แก้ไขเกมการศึกษา

Back

รูปสินค้า (850 x 600 / .jpg , .png) *

Title

Description

Keyword

Detail (HTML Code)

/* ฝั่งขวา: บล็อกคำสั่ง */
    .rb-right-panel { flex: 1.5; min-width: 300px; display: flex; flex-direction: column; gap: 15px; }
    .rb-blocks-container { display: flex; flex-wrap: wrap; gap: 10px; background: #f1f3f4; padding: 15px; border-radius: 8px; min-height: 80px; }
    
    .rb-block { background-color: #ffab19; color: white; padding: 10px 15px; border-radius: 20px; cursor: pointer; font-weight: bold; box-shadow: 0 4px 0 #d97706; user-select: none; transition: transform 0.1s; border: none; font-size: 16px; }
    .rb-block:active { transform: translateY(4px); box-shadow: 0 0 0 #d97706; }

/* พื้นที่เขียนโค้ด (Flowchart) */
    #rb-my-flowchart { background: #e8f5e9; border: 2px solid #59c059; min-height: 250px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .rb-flow-arrow { color: #59c059; font-size: 20px; }

/* ปุ่มควบคุม */
    .rb-controls { display: flex; gap: 10px; margin-top: 10px; }
    .rb-btn { flex: 1; padding: 12px; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; color: white; font-family: 'Prompt', sans-serif; transition: 0.2s; }
    .rb-btn-run { background-color: #59c059; box-shadow: 0 4px 0 #2e7d32; }
    .rb-btn-run:active { transform: translateY(4px); box-shadow: none; }
    .rb-btn-reset { background-color: #ff4d4d; box-shadow: 0 4px 0 #d32f2f; }
    .rb-btn-reset:active { transform: translateY(4px); box-shadow: none; }
</style>

<div class="wsst-rb-wrapper">
    <div class="rb-container">
        <div class="rb-header">
            <h1>🤖 Robot Barista (หุ่นยนต์บาริสต้าคิวทอง)</h1>
            <p>ภารกิจโซนมือใหม่: เรียงลำดับคำสั่งทำ "ชานมไข่มุก" ให้ถูกต้อง ห้ามสลับขั้นตอนเด็ดขาด!</p>
        </div>

<div class="rb-body">
            <div class="rb-left-panel">
                <div class="rb-order-box">
                    <h3 style="color: #1a73e8; margin-bottom: 5px;">📝 ออร์เดอร์ลูกค้า:</h3>
                    <span style="font-size: 20px; font-weight: bold; color: #8B0000;">🧋 ชานมไข่มุก 1 แก้ว!</span>
                </div>
                
                <div class="rb-robot-screen" id="rb-robot-face">🤖</div>
                <div class="rb-feedback" id="rb-feedback-text">สแตนด์บายรอรับคำสั่ง...</div>
            </div>

<div class="rb-right-panel">
                <div>
                    <h3>1. คลังคำสั่ง (คลิกเพื่อเพิ่ม)</h3>
                    <div class="rb-blocks-container" id="rb-available-blocks">
                        </div>
                </div>

<div>
                    <h3>2. ผังงานของฉัน (Flowchart)</h3>
                    <div class="rb-blocks-container" id="rb-my-flowchart">
                        </div>
                </div>

<div class="rb-controls">
                    <button class="rb-btn rb-btn-reset" onclick="resetRbGame()">🔄 เริ่มใหม่</button>
                    <button class="rb-btn rb-btn-run" onclick="runRbProgram()">🚀 รันโปรแกรม</button>
                </div>
            </div>
        </div>
    </div>
</div>

let rbUserSequence = [];

// เริ่มต้นเกม
    function initRbGame() {
        renderRbAvailableBlocks();
        renderRbMyFlowchart();
        updateRbRobot('🤖', 'สแตนด์บายรอรับคำสั่ง...');
    }

// สร้างบล็อกในคลังคำสั่ง
    function renderRbAvailableBlocks() {
        const container = document.getElementById('rb-available-blocks');
        container.innerHTML = '';
        
        rbBlockData.forEach(block => {
            // เช็คว่าถูกเลือกไปแล้วหรือยัง (ถ้าเลือกแล้วซ่อนจากคลัง)
            if (!rbUserSequence.some(item => item.id === block.id)) {
                const btn = document.createElement('div');
                btn.className = 'rb-block';
                btn.innerText = block.text;
                btn.onclick = () => addRbBlock(block);
                container.appendChild(btn);
            }
        });
    }

// สร้างผังงานของนักเรียน
    function renderRbMyFlowchart() {
        const container = document.getElementById('rb-my-flowchart');
        container.innerHTML = '';

if (rbUserSequence.length === 0) {
            container.innerHTML = '<span style="color:#aaa; font-weight:bold; margin-top:20px;">(คลิกบล็อกด้านบนเพื่อจัดเรียงคำสั่ง)</span>';
            return;
        }

rbUserSequence.forEach((block, index) => {
            // สร้างลูกศรชี้ลง (ยกเว้นอันแรก)
            if (index > 0) {
                const arrow = document.createElement('div');
                arrow.className = 'rb-flow-arrow';
                arrow.innerHTML = '⬇️';
                container.appendChild(arrow);
            }

const btn = document.createElement('div');
            btn.className = 'rb-block';
            btn.innerText = block.text;
            btn.style.backgroundColor = "#59c059"; // เปลี่ยนสีบล็อกในผังงานให้ต่างกัน
            btn.style.boxShadow = "0 4px 0 #2e7d32";
            btn.onclick = () => removeRbBlock(index); // คลิกเพื่อเอาออก
            container.appendChild(btn);
        });
    }

// เพิ่มบล็อกเข้าผังงาน
    function addRbBlock(block) {
        rbUserSequence.push(block);
        renderRbAvailableBlocks();
        renderRbMyFlowchart();
        updateRbRobot('🤔', 'กำลังเขียนโปรแกรม...');
    }

// เอาบล็อกออกจากผังงาน
    function removeRbBlock(index) {
        rbUserSequence.splice(index, 1);
        renderRbAvailableBlocks();
        renderRbMyFlowchart();
    }

// ตรวจสอบความถูกต้อง (รันโปรแกรม)
    function runRbProgram() {
        if (rbUserSequence.length === 0) {
            updateRbRobot('❓', 'ยังไม่ได้ใส่คำสั่งเลยครับเจ้านาย!');
            return;
        }

const userIds = rbUserSequence.map(b => b.id);
        let isCorrect = true;
        let errorMessage = "";

// ตรวจสอบเงื่อนไขทีละข้อ (Debugging)
        if (userIds.length < rbCorrectSequence.length) {
            isCorrect = false;
            errorMessage = "คำสั่งยังไม่ครบ! ลืมใส่อะไรไปหรือเปล่า?";
        } else if (userIds[0] !== 'cup') {
            isCorrect = false;
            errorMessage = "เอ๊ะ! เทส่วนผสมโดยไม่หยิบแก้วก่อน น้ำหกหมดเลย 💦";
        } else if (userIds[userIds.length - 1] !== 'serve') {
            isCorrect = false;
            errorMessage = "ทำเสร็จแล้วลืมเสิร์ฟให้ลูกค้าครับ!";
        } else {
            // ตรวจสอบการเรียงลำดับ
            for (let i = 0; i < rbCorrectSequence.length; i++) {
                if (userIds[i] !== rbCorrectSequence[i]) {
                    isCorrect = false;
                    errorMessage = "ลำดับขั้นตอนผิดพลาด! รสชาติเพี้ยนแน่ๆ ลองเรียงใหม่นะ";
                    break;
                }
            }
        }

// แสดงผลลัพธ์
        if (isCorrect) {
            updateRbRobot('🤩', '<span style="color:#28a745;">ยอดเยี่ยม! ทำชานมไข่มุกได้สมบูรณ์แบบ แบตเตอรี่เต็มเปี่ยม! ✨🧋</span>');
        } else {
            updateRbRobot('😵', `<span style="color:#dc3545;">Bug (ข้อผิดพลาด):</span> ${errorMessage} <br><span style="color:#555; font-size:14px; font-weight:normal;">(คลิกที่บล็อกในผังงานเพื่อเอาออก แล้วเรียงใหม่ดูนะ)</span>`);
        }
    }

// อัปเดตหน้าตาหุ่นยนต์และข้อความ
    function updateRbRobot(emoji, text) {
        document.getElementById('rb-robot-face').innerText = emoji;
        document.getElementById('rb-feedback-text').innerHTML = text;
    }

// รีเซ็ตเกม
    function resetRbGame() {
        rbUserSequence = [];
        initRbGame();
    }

// สั่งรันเมื่อโหลดหน้าเว็บ
    setTimeout(initRbGame, 300);
</script>