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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div class="wr-wrapper" id="wr-game-container">
    
    <div id="wr-screen-start" class="wr-screen wr-active">
        <div class="wr-icon-large">🗺️🧭</div>
        <h1 class="wr-title">Cyber Walk Rally</h1>
        <p class="wr-subtitle">ผจญภัยตรรกะการค้นหา AND & OR</p>
        
        <div class="wr-rules-box">
            <h3 style="color: #FFC107; margin-top: 0;">🎒 ภารกิจนักสำรวจ</h3>
            <p style="margin: 0; font-size: 15px; color: #E0F2F1; line-height: 1.6; text-align: left;">
                คุณต้องออกเดินทางไปตามเส้นทางวอล์คแรลลี่ เพื่อไปยังพอร์ทัลข้อมูลของโรงเรียน การจะก้าวเดินไปแต่ละจุดได้ <strong>คุณต้องตอบคำถามปลดล็อกเส้นทางให้ถูกต้อง</strong> หากพร้อมแล้ว ลงทะเบียนชื่อนักสำรวจได้เลย!
            </p>
        </div>
        
        <button class="wr-btn wr-btn-primary" onclick="wr_initGame()">เริ่มการผจญภัย 🚀</button>
    </div>

<div id="wr-screen-game" class="wr-screen">
        <div class="wr-hud">
            <div>นักสำรวจ: <span id="wr-ui-name" style="color: #FFC107; font-weight: bold;">-</span></div>
            <div>ด่านที่: <span id="wr-ui-step" style="color: #B2DFDB;">1/3</span></div>
        </div>

<div class="wr-board-container">
            <div class="wr-path-line"></div>
            <div class="wr-node" id="wr-node-0">
                <div class="wr-node-icon">🚩</div>
                <div class="wr-node-label">จุดเริ่มต้น</div>
            </div>
            <div class="wr-node" id="wr-node-1">
                <div class="wr-node-icon">🔒</div>
                <div class="wr-node-label">ด่าน AND</div>
            </div>
            <div class="wr-node" id="wr-node-2">
                <div class="wr-node-icon">🔓</div>
                <div class="wr-node-label">ด่าน OR</div>
            </div>
            <div class="wr-node" id="wr-node-3">
                <div class="wr-node-icon">🏫</div>
                <div class="wr-node-label">พอร์ทัล ร.ร.</div>
            </div>
        </div>

<div class="wr-quiz-panel">
            <div class="wr-question-text" id="wr-question-text">โหลดคำถาม...</div>
            <div class="wr-choices-container" id="wr-choices-container">
                </div>
        </div>
    </div>

<div id="wr-screen-result" class="wr-screen">
        <div class="wr-icon-large" style="animation: wrBounce 2s infinite;">🏆✨</div>
        <h1 class="wr-title" style="color: #FFC107;">ภารกิจสำเร็จ!</h1>
        <p class="wr-subtitle">คุณเดินทางถึงเป้าหมายอย่างปลอดภัย</p>
        
        <div class="wr-rules-box" style="text-align: center; background: rgba(0, 77, 64, 0.8);">
            <p style="margin: 0; font-size: 16px; color: #B2DFDB;">สุดยอดนักสำรวจไซเบอร์</p>
            <h2 id="wr-result-name" style="color: #FFF; margin: 10px 0;">-</h2>
            <p style="margin: 0; font-size: 14px; color: #FFC107;">"คุณเข้าใจตรรกะบูลีน และรู้จักการจัดเก็บข้อมูลที่ปลอดภัยแล้ว!"</p>
        </div>
        
        <button class="wr-btn wr-btn-primary" onclick="wr_restartGame()">ผจญภัยอีกครั้ง 🔄</button>
    </div>

</div>

.wr-wrapper * { box-sizing: border-box; }

.wr-screen { display: none; padding: 30px 20px; animation: wrFadeIn 0.4s ease-out; }
    .wr-screen.wr-active { display: block; }

@keyframes wrFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes wrBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.wr-icon-large { font-size: 65px; margin-bottom: 10px; text-shadow: 0 4px 10px rgba(0,0,0,0.5); }
    .wr-title { font-size: 32px; color: #FFFFFF; margin: 0 0 5px 0; font-weight: 800; text-shadow: 0 3px 0 #004D40; }
    .wr-subtitle { font-size: 18px; color: #FFC107; font-weight: 600; margin: 0 0 20px 0; }

.wr-rules-box {
        background: rgba(0, 37, 26, 0.6); border: 2px dashed #00897B;
        padding: 20px; border-radius: 15px; margin: 0 auto 25px auto; max-width: 500px;
    }

/* Buttons */
    .wr-btn {
        display: inline-block; padding: 15px 35px; font-size: 18px; font-weight: 800;
        border: none; border-radius: 15px; cursor: pointer; transition: all 0.1s;
        font-family: 'Prompt', sans-serif;
    }
    .wr-btn-primary {
        background: #FFC107; color: #004D40;
        box-shadow: 0 6px 0 #FF8F00;
    }
    .wr-btn-primary:active { transform: translateY(6px); box-shadow: 0 0px 0 #FF8F00; }

/* HUD */
    .wr-hud {
        display: flex; justify-content: space-between; align-items: center;
        background: rgba(0, 37, 26, 0.8); padding: 12px 20px; border-radius: 12px;
        margin-bottom: 25px; border: 2px solid #00695C; font-size: 16px; font-weight: 600;
    }

/* Board Game Path */
    .wr-board-container {
        display: flex; justify-content: space-between; align-items: center;
        position: relative; margin: 0 auto 30px auto; max-width: 600px; padding: 0 10px;
    }
    
    .wr-path-line {
        position: absolute; top: 35px; left: 10%; right: 10%; height: 8px;
        background: #004D40; border-radius: 4px; z-index: 1;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    }

.wr-node {
        position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;
        width: 70px; opacity: 0.5; transition: all 0.3s;
    }
    .wr-node-icon {
        width: 60px; height: 60px; background: #00251A; border: 4px solid #004D40;
        border-radius: 50%; display: flex; justify-content: center; align-items: center;
        font-size: 24px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); transition: all 0.3s;
    }
    .wr-node-label { margin-top: 8px; font-size: 12px; font-weight: bold; color: #B2DFDB; }

/* Node States */
    .wr-node.wr-passed { opacity: 1; }
    .wr-node.wr-passed .wr-node-icon { background: #00695C; border-color: #00BFA5; }
    .wr-node.wr-current { opacity: 1; transform: scale(1.1); animation: wrPulse 1.5s infinite; }
    .wr-node.wr-current .wr-node-icon { 
        background: #FFC107; border-color: #FFF8E1; color: #004D40; 
        box-shadow: 0 0 20px rgba(255, 193, 7, 0.6);
    }
    .wr-node.wr-current .wr-node-label { color: #FFC107; }

@keyframes wrPulse {
        0% { transform: scale(1.1); }
        50% { transform: scale(1.15); }
        100% { transform: scale(1.1); }
    }

/* Quiz Panel */
    .wr-quiz-panel {
        background: #FFFFFF; color: #333; border-radius: 15px; padding: 25px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2); border-bottom: 6px solid #B2DFDB;
    }
    .wr-question-text {
        font-size: 18px; font-weight: bold; color: #00695C; margin-bottom: 20px;
        text-align: left; line-height: 1.5;
    }
    
    .wr-choices-container { display: flex; flex-direction: column; gap: 10px; }
    
    .wr-choice-btn {
        background: #F1F8E9; border: 2px solid #AED581; padding: 12px 15px;
        border-radius: 10px; font-size: 15px; font-weight: 600; color: #33691E;
        text-align: left; cursor: pointer; transition: all 0.2s; font-family: 'Prompt', sans-serif;
    }
    .wr-choice-btn:hover { background: #DCEDC8; transform: translateX(5px); }
    .wr-choice-btn:active { transform: translateX(2px) scale(0.98); }

/* SweetAlert Override */
    .wr-swal-popup { background: #004D40 !important; border: 2px solid #FFC107 !important; border-radius: 20px !important; color: #FFF !important; font-family: 'Prompt', sans-serif !important; }
    .wr-swal-popup .swal2-title { color: #FFC107 !important; }
    .wr-swal-popup .swal2-input { color: #FFF !important; text-align: center; }
    .wr-swal-popup .swal2-html-container { color: #E0F2F1 !important; }
    .wr-swal-confirm { background: #FFC107 !important; color: #004D40 !important; font-weight: bold !important; border-radius: 12px !important; box-shadow: 0 4px 0 #FF8F00 !important; }

@media (max-width: 500px) {
        .wr-node-icon { width: 45px; height: 45px; font-size: 18px; }
        .wr-path-line { top: 25px; }
        .wr-question-text { font-size: 16px; }
    }
</style>

let wr_playerName = "";
    let wr_currentStep = 0; // 0 = Start, 1 = Q1, 2 = Q2, 3 = Finish
    let wr_audioCtx = null;

/* --- Audio System --- */
    function wr_initAudio() {
        if (!wr_audioCtx) wr_audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (wr_audioCtx.state === 'suspended') wr_audioCtx.resume();
    }

function wr_playSound(type) {
        if (!wr_audioCtx) return;
        try {
            const osc = wr_audioCtx.createOscillator();
            const gain = wr_audioCtx.createGain();
            osc.connect(gain); gain.connect(wr_audioCtx.destination);
            const now = wr_audioCtx.currentTime;

if (type === 'click') {
                osc.type = 'sine'; osc.frequency.setValueAtTime(600, now); osc.frequency.exponentialRampToValueAtTime(1000, now + 0.1);
                gain.gain.setValueAtTime(0.3, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
                osc.start(now); osc.stop(now + 0.1);
            } else if (type === 'step') {
                osc.type = 'square'; osc.frequency.setValueAtTime(300, now); osc.frequency.setValueAtTime(450, now + 0.1);
                gain.gain.setValueAtTime(0.2, now); gain.gain.linearRampToValueAtTime(0.01, now + 0.2);
                osc.start(now); osc.stop(now + 0.2);
            } else if (type === 'correct') {
                osc.type = 'sine'; [523.25, 659.25, 783.99, 1046.50].forEach((f, i) => osc.frequency.setValueAtTime(f, now + (i*0.1)));
                gain.gain.setValueAtTime(0.2, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.4);
                osc.start(now); osc.stop(now + 0.4);
            } else if (type === 'wrong') {
                osc.type = 'sawtooth'; osc.frequency.setValueAtTime(150, now); osc.frequency.linearRampToValueAtTime(100, now + 0.3);
                gain.gain.setValueAtTime(0.2, now); gain.gain.linearRampToValueAtTime(0.01, now + 0.3);
                osc.start(now); osc.stop(now + 0.3);
            }
        } catch (e) { console.error("Audio Error:", e); }
    }

/* --- Navigation --- */
    function wr_showScreen(id) {
        document.querySelectorAll('.wr-screen').forEach(s => s.classList.remove('wr-active'));
        document.getElementById(id).classList.add('wr-active');
    }

/* --- Game Logic --- */
    function wr_initGame() {
        wr_initAudio(); wr_playSound('click');
        
        Swal.fire({
            title: 'เตรียมพร้อมเดินทาง!',
            text: 'โปรดลงทะเบียนชื่อนักสำรวจของคุณ',
            input: 'text',
            inputPlaceholder: 'พิมพ์ชื่อของคุณที่นี่...',
            confirmButtonText: 'ออกเดินทาง 🗺️',
            customClass: { popup: 'wr-swal-popup', confirmButton: 'wr-swal-confirm' },
            inputValidator: (value) => { if (!value.trim()) return 'ต้องใส่ชื่อก่อนออกเดินทางนะ!'; }
        }).then((result) => {
            if (result.isConfirmed) {
                wr_playerName = result.value.trim();
                wr_currentStep = 0; // Start at Node 0
                
                document.getElementById('wr-ui-name').innerText = wr_playerName;
                document.getElementById('wr-result-name').innerText = wr_playerName;
                
                wr_playSound('step');
                wr_updateBoard();
                wr_loadQuestion();
                wr_showScreen('wr-screen-game');
            }
        });
    }

function wr_loadQuestion() {
        // If finished
        if (wr_currentStep >= 3) {
            setTimeout(() => {
                wr_playSound('correct');
                wr_showScreen('wr-screen-result');
            }, 1000);
            return;
        }

const qData = wr_questions[wr_currentStep];
        document.getElementById('wr-question-text').innerText = qData.q;
        
        const choicesBox = document.getElementById('wr-choices-container');
        choicesBox.innerHTML = '';
        
        qData.choices.forEach((choice, index) => {
            const btn = document.createElement('button');
            btn.className = 'wr-choice-btn';
            btn.innerText = choice;
            btn.onclick = () => wr_checkAnswer(index);
            choicesBox.appendChild(btn);
        });
    }

function wr_restartGame() {
        wr_playSound('click');
        wr_showScreen('wr-screen-start');
    }
</script>