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

Back

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

Title

Description

Keyword

Detail (HTML Code)

/* Mission Display */
        .mission-panel {
            background: #23153c;
            border-left: 5px solid #FFC107;
            padding: 20px;
            margin-bottom: 25px;
            text-align: left;
            border-radius: 8px;
        }
        .mission-label { color: #FFC107; font-weight: bold; font-size: 14px; text-transform: uppercase; margin-bottom: 5px; display: block; }
        .mission-title { font-size: 20px; font-weight: bold; color: #fff; font-family: 'Prompt', sans-serif; margin: 0; }
        
        /* Sequence Areas */
        .algo-workspace {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 25px;
        }
        @media (min-width: 768px) {
            .algo-workspace { flex-direction: row; }
        }

.algo-panel {
            flex: 1;
            background: #140b24;
            border: 2px dashed #4527a0;
            border-radius: 10px;
            padding: 15px;
            min-height: 250px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .algo-panel-title { font-family: 'Prompt'; font-size: 16px; color: #b388ff; font-weight: bold; margin-bottom: 10px; text-align: left; border-bottom: 1px solid #311b92; padding-bottom: 8px;}

/* Command Blocks */
        .cmd-block {
            background: #311b92;
            border: 1px solid #512da8;
            border-left: 6px solid #b388ff;
            color: #fff;
            padding: 12px 15px;
            border-radius: 6px;
            cursor: pointer;
            text-align: left;
            font-size: 15px;
            font-weight: 500;
            transition: all 0.2s ease;
            user-select: none;
            display: flex;
            align-items: center;
        }
        .cmd-block:hover { background: #4527a0; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(103, 58, 183, 0.4); }
        .cmd-block:active { transform: translateY(0); }
        
        /* Blocks inside "My Algorithm" */
        #my-algorithm .cmd-block { background: #004d40; border-color: #00695c; border-left-color: #1de9b6; }
        #my-algorithm .cmd-block:hover { background: #00695c; }
        .cmd-number { font-weight: bold; margin-right: 15px; color: #FFC107; font-size: 18px; width: 20px;}

/* Buttons */
        .wsst-algo-btn {
            background: linear-gradient(180deg, #FFD54F 0%, #FFC107 100%);
            color: #311b92;
            border: none;
            padding: 12px 40px;
            font-size: 18px;
            font-weight: bold;
            border-radius: 30px;
            cursor: pointer;
            font-family: 'Prompt', sans-serif;
            box-shadow: 0 5px 0 #FF9800;
            transition: 0.1s;
            text-transform: uppercase;
        }
        .wsst-algo-btn:active { transform: translateY(5px); box-shadow: 0 0 0 #FF9800; }

/* Overlays */
        .algo-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(17, 7, 28, 0.95); z-index: 10;
            display: none; flex-direction: column; align-items: center; justify-content: center;
            padding: 30px; text-align: center;
        }
        .overlay-icon { font-size: 80px; margin-bottom: 20px; }
        .overlay-title { font-size: 28px; font-weight: bold; font-family: 'Prompt', sans-serif; margin-bottom: 15px;}
        .overlay-msg { font-size: 17px; color: #d1c4e9; max-width: 80%; line-height: 1.7; margin-bottom: 30px;}

.screen { display: none; }
        .screen.active { display: block; animation: algoFade 0.4s ease; }
        @keyframes algoFade { from {opacity: 0; transform: scale(0.98);} to {opacity: 1; transform: scale(1);} }

.progress-indicator { color: #FFC107; font-weight: bold; position: absolute; top: 20px; right: 20px; font-family: 'Prompt';}
    </style>

<div class="wsst-algo-wrapper">
    <div class="algo-container">
        <div class="algo-header">
            <h2>⚙️ ALGORITHM ARCHITECT</h2>
            <p>วางแผนให้เป๊ะ เรียงลำดับคำสั่งให้ชัวร์ ทีละสเต็ป!</p>
        </div>

<div id="algo-start" class="algo-body screen active">
            <span style="font-size: 90px;">📐</span>
            <h3 style="color: #b388ff; font-family: 'Prompt', sans-serif; font-size: 26px; margin-top: 20px;">SYSTEM OVERRIDE REQUIRED</h3>
            <p style="font-size: 16px; color: #d1c4e9; max-width: 600px; margin: 0 auto 30px; line-height: 1.8;">
                ผู้บัญชาการ! ระบบคำสั่งของเราถูกสลับตำแหน่งจนทำงานไม่ได้<br>
                ภารกิจของคุณคือการนำขั้นตอนย่อยๆ เหล่านี้ มา <b>คลิกเรียงลำดับใหม่</b><br>
                ให้เป็น <b>Algorithm</b> ที่ถูกต้องและสมเหตุสมผลที่สุดตั้งแต่เริ่มต้นจนจบ!
            </p>
            <button class="wsst-algo-btn" onclick="startAlgoGame()">START MISSION</button>
        </div>

<div id="algo-game" class="algo-body screen">
            <div class="progress-indicator" id="algo-level-text">LEVEL 1/3</div>
            
            <div class="mission-panel">
                <span class="mission-label">Target Algorithm:</span>
                <p class="mission-title" id="algo-target-title">โจทย์...</p>
            </div>

<div class="algo-workspace">
                <div class="algo-panel" id="available-commands">
                    <div class="algo-panel-title">🗃️ คลังคำสั่ง (คลิกเพื่อจัดเรียง)</div>
                    </div>

<div class="algo-panel" id="my-algorithm">
                    <div class="algo-panel-title">📝 อัลกอริทึมของคุณ (คลิกเพื่อเอาออก)</div>
                    </div>
            </div>

<button class="wsst-algo-btn" onclick="checkAlgoAnswer()">EXECUTE PROGRAM</button>
        </div>

<div id="algo-end" class="algo-body screen">
            <span style="font-size: 90px;">🏆</span>
            <h3 style="color: #1de9b6; font-family: 'Prompt', sans-serif; font-size: 30px; margin-top: 20px;">MISSION ACCOMPLISHED!</h3>
            <p style="font-size: 18px; color: #d1c4e9; max-width: 600px; margin: 0 auto 30px; line-height: 1.8;">
                สุดยอดสถาปนิก! คุณสามารถออกแบบขั้นตอนวิธี (Algorithm) ได้อย่างสมบูรณ์แบบ<br>
                จำไว้เสมอว่า คอมพิวเตอร์ไม่สามารถคิดเองได้ มันจะทำตามคำสั่งของคุณทีละบรรทัด<br>
                ถ้าคุณเรียงลำดับคำสั่งได้เป๊ะ ปัญหาทุกอย่างก็แก้ได้ชัวร์ครับ!
            </p>
            <button class="wsst-algo-btn" onclick="resetAlgoGame()">PLAY AGAIN</button>
        </div>

<div class="algo-overlay" id="algo-feedback">
            <div class="overlay-icon" id="algo-fb-icon">✅</div>
            <div class="overlay-title" id="algo-fb-title">SUCCESS</div>
            <div class="overlay-msg" id="algo-fb-msg">...</div>
            <button class="wsst-algo-btn" id="algo-fb-btn" style="background: #1de9b6; color: #004d40; box-shadow: 0 5px 0 #00bfa5;">CONTINUE</button>
        </div>

</div>
</div>

let currentAlgoIdx = 0;
    let availableSteps = [];
    let mySequence = [];

function switchAlgoScreen(id) {
        document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
        document.getElementById(id).classList.add('active');
    }

// ฟังก์ชันสลับลำดับอาร์เรย์ (Shuffle)
    function shuffleAlgoArray(arr) {
        return arr.sort(() => Math.random() - 0.5);
    }

function startAlgoGame() {
        currentAlgoIdx = 0;
        switchAlgoScreen('algo-game');
        loadAlgoMission();
    }

function loadAlgoMission() {
        mySequence = [];
        const m = algoMissions[currentAlgoIdx];
        
        document.getElementById('algo-level-text').innerText = `LEVEL ${currentAlgoIdx + 1}/${algoMissions.length}`;
        document.getElementById('algo-target-title').innerText = m.title;

// สับเปลี่ยนคำสั่งก่อนแสดงผล
        availableSteps = shuffleAlgoArray([...m.steps]);
        updateAlgoUI();
    }

function updateAlgoUI() {
        const availableContainer = document.getElementById('available-commands');
        const myContainer = document.getElementById('my-algorithm');
        
        // ล้างข้อมูลเก่า (เก็บเฉพาะ Title ไว้)
        availableContainer.innerHTML = `<div class="algo-panel-title">🗃️ คลังคำสั่ง (คลิกเพื่อเลือก)</div>`;
        myContainer.innerHTML = `<div class="algo-panel-title">📝 อัลกอริทึมของคุณ (คลิกเพื่อเอาออก)</div>`;

// เรนเดอร์คลังคำสั่ง
        availableSteps.forEach((step) => {
            const div = document.createElement('div');
            div.className = 'cmd-block';
            div.innerText = step.text;
            div.onclick = () => selectStep(step);
            availableContainer.appendChild(div);
        });

// เรนเดอร์ลำดับของฉัน
        mySequence.forEach((step, index) => {
            const div = document.createElement('div');
            div.className = 'cmd-block';
            div.innerHTML = `<span class="cmd-number">${index + 1}.</span> ${step.text}`;
            div.onclick = () => removeStep(index, step);
            myContainer.appendChild(div);
        });
    }

// ย้ายจากคลัง ไป ลำดับของฉัน
    function selectStep(stepObj) {
        // เอาออกจากคลัง
        availableSteps = availableSteps.filter(s => s.id !== stepObj.id);
        // ใส่ในลำดับ
        mySequence.push(stepObj);
        updateAlgoUI();
    }

// ย้ายจากลำดับของฉัน กลับไปคลัง
    function removeStep(index, stepObj) {
        // เอาออกจากลำดับ
        mySequence.splice(index, 1);
        // คืนกลับเข้าคลัง
        availableSteps.push(stepObj);
        updateAlgoUI();
    }

function checkAlgoAnswer() {
        const m = algoMissions[currentAlgoIdx];

if (mySequence.length < m.steps.length) {
            showAlgoFeedback("SYNTAX ERROR", "อัลกอริทึมยังไม่สมบูรณ์! คุณต้องดึงคำสั่งมาเรียงให้ครบทุกข้อก่อนสั่งทำงานครับ", "⚠️", "#FFC107", "TRY AGAIN", false);
            return;
        }

// ตรวจสอบความถูกต้องตามลำดับ
        let isCorrect = true;
        for (let i = 0; i < m.steps.length; i++) {
            if (mySequence[i].id !== m.steps[i].id) {
                isCorrect = false;
                break;
            }
        }

if (isCorrect) {
            showAlgoFeedback("PROGRAM EXECUTED!", m.explanation, "✅", "#1de9b6", "NEXT LEVEL", true);
        } else {
            showAlgoFeedback("LOGIC BUG DETECTED!", "เกิดข้อผิดพลาดในการทำงาน! ลำดับขั้นตอนของคุณยังไม่ถูกต้องสมเหตุสมผล ลองเอาออกแล้วเรียงใหม่ดูอีกครั้งครับ", "🐛", "#ff5252", "DEBUG CODE", false);
        }
    }

function resetAlgoGame() {
        startAlgoGame();
    }
</script>