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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div class="dd-wrapper" id="dd-game-container">
    
    <div id="dd-screen-start" class="dd-screen dd-active">
        <div class="dd-icon-large">🔮🧙‍♂️</div>
        <h1 class="dd-title">Logic Match</h1>
        <p class="dd-subtitle">จับคู่เวทมนตร์ค้นหา (AND / OR)</p>
        
        <div class="dd-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>"ลากและวาง" (Drag & Drop)</strong> บล็อกข้อความเวทมนตร์ ไปยังเป้าหมายให้ถูกต้องทั้ง 3 ด่าน เพื่อก้าวเป็นสุดยอดมาสเตอร์
            </p>
        </div>
        
        <button class="dd-btn dd-btn-primary" onclick="dd_initGame()">เริ่มการทดสอบ 🚀</button>
    </div>

<div id="dd-screen-game" class="dd-screen">
        <div class="dd-hud">
            <div>นักเวทย์: <span id="dd-ui-name" style="color: #FFC107; font-weight: bold;">-</span></div>
            <div>ด่านที่: <span id="dd-ui-level" style="color: #B2DFDB;">1/3</span></div>
        </div>

<div class="dd-mission-box">
            <strong style="color: #FFC107; font-size: 18px;" id="dd-level-title">ด่านที่ 1: แยกประเภทเวทมนตร์</strong><br>
            <span id="dd-level-desc" style="font-size: 14px; color: #E0F2F1;">ลากบล็อกคำค้นหาไปใส่หีบให้ถูกประเภท</span>
        </div>

<button class="dd-btn dd-btn-check" onclick="dd_checkAnswer()">✅ ตรวจคำตอบ</button>
    </div>

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

</div>

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

.dd-screen { display: none; padding: 30px 20px; animation: ddFadeIn 0.5s ease-out forwards; }
    .dd-screen.dd-active { display: block; }

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

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

.dd-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;
    }

.dd-mission-box {
        background: rgba(0, 0, 0, 0.2); padding: 15px; border-radius: 12px;
        margin-bottom: 20px; border-left: 5px solid #FFC107; text-align: left;
    }

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

.dd-btn-check {
        background: #00897B; color: #FFF; width: 100%; max-width: 400px;
        box-shadow: 0 6px 0 #004D40; margin-top: 20px;
    }
    .dd-btn-check:active { transform: translateY(6px); box-shadow: 0 0px 0 #004D40; }

/* HUD */
    .dd-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: 20px; border: 2px solid #00897B; font-size: 16px; font-weight: 600;
    }

/* Drag & Drop Areas */
    .dd-game-area { min-height: 250px; }
    
    .dd-inventory {
        display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
        background: rgba(255,255,255,0.1); padding: 15px; border-radius: 15px;
        border: 2px dashed #B2DFDB; min-height: 80px; margin-bottom: 20px;
    }

.dd-draggable {
        background: #FFF8E1; border: 2px solid #FFB300; padding: 10px 15px;
        border-radius: 12px; font-weight: 600; font-size: 14px; color: #004D40;
        cursor: grab; box-shadow: 0 4px 0 #FF8F00; transition: transform 0.1s;
        display: flex; align-items: center; justify-content: center;
    }
    .dd-draggable:active { cursor: grabbing; }
    .dd-draggable.dd-dragging { opacity: 0.6; transform: scale(1.05); box-shadow: 0 8px 15px rgba(0,0,0,0.3); }

/* Level 1: Chests */
    .dd-l1-container { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
    .dd-chest {
        flex: 1; min-width: 150px; background: rgba(0,0,0,0.3); border-radius: 15px;
        border: 3px solid #00897B; padding: 15px; min-height: 150px;
        display: flex; flex-direction: column; gap: 10px; transition: all 0.2s;
    }
    .dd-chest-title { font-weight: bold; color: #FFC107; margin-bottom: 5px; }
    
    /* Level 2: Fill blanks */
    .dd-l2-sentence {
        background: rgba(0, 37, 26, 0.6); padding: 15px; border-radius: 12px;
        margin-bottom: 15px; font-size: 16px; display: flex; flex-wrap: wrap;
        align-items: center; justify-content: center; gap: 10px; border: 1px solid #00897B;
    }
    .dd-slot {
        background: rgba(255,255,255,0.1); border: 2px dashed #FFC107; border-radius: 10px;
        min-width: 80px; height: 45px; display: flex; align-items: center; justify-content: center;
        transition: all 0.2s;
    }

/* Level 3: Order */
    .dd-l3-list { display: flex; flex-direction: column; gap: 10px; align-items: center; }
    .dd-l3-step {
        display: flex; align-items: center; gap: 10px; width: 100%; max-width: 400px;
    }
    .dd-l3-num {
        background: #FFC107; color: #004D40; width: 35px; height: 35px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%; font-weight: bold; font-size: 16px; box-shadow: 0 3px 0 #FF8F00;
    }
    .dd-l3-slot {
        flex: 1; background: rgba(0,0,0,0.3); border: 2px dashed #00897B;
        border-radius: 12px; min-height: 50px; display: flex; align-items: center;
        padding: 5px; transition: all 0.2s;
    }

/* Drag Over effect */
    .dd-drag-over { background: rgba(255, 193, 7, 0.2) !important; border-color: #FFC107 !important; }

/* SweetAlert Override */
    .dd-swal-popup { background: #004D40 !important; border: 2px solid #FFC107 !important; border-radius: 20px !important; color: #FFF !important; font-family: 'Prompt', sans-serif !important; }
    .dd-swal-popup .swal2-title { color: #FFC107 !important; }
    .dd-swal-popup .swal2-input { color: #FFF !important; text-align: center; }
    .dd-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: 600px) {
        .dd-title { font-size: 26px; }
        .dd-draggable { font-size: 12px; padding: 8px 12px; }
        .dd-l2-sentence { font-size: 14px; }
    }
</style>

let dd_playerName = "";
    let dd_currentLevel = 0;
    let dd_audioCtx = null;
    let dd_draggedItem = null;

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

function dd_playSound(type) {
        if (!dd_audioCtx) return;
        try {
            const osc = dd_audioCtx.createOscillator();
            const gain = dd_audioCtx.createGain();
            osc.connect(gain); gain.connect(dd_audioCtx.destination);
            const now = dd_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 === 'drag') {
                osc.type = 'triangle'; osc.frequency.setValueAtTime(200, now); osc.frequency.exponentialRampToValueAtTime(250, now + 0.1);
                gain.gain.setValueAtTime(0.1, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
                osc.start(now); osc.stop(now + 0.1);
            } else if (type === 'drop') {
                osc.type = 'sine'; osc.frequency.setValueAtTime(300, now); osc.frequency.exponentialRampToValueAtTime(150, 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 === 'correct') {
                osc.type = 'square'; [523.25, 659.25, 783.99].forEach((f, i) => osc.frequency.setValueAtTime(f, now + (i*0.1)));
                gain.gain.setValueAtTime(0.15, 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 dd_showScreen(id) {
        document.querySelectorAll('.dd-screen').forEach(s => s.classList.remove('dd-active'));
        document.getElementById(id).classList.add('dd-active');
    }

/* --- Game Logic --- */
    function dd_initGame() {
        dd_initAudio(); dd_playSound('click');
        
        Swal.fire({
            title: 'เชื่อมต่อระบบ...',
            text: 'กรุณายืนยันตัวตนนักเวทย์ของคุณ',
            input: 'text',
            inputPlaceholder: 'พิมพ์ชื่อของคุณ',
            confirmButtonText: 'เข้าสู่โลกเวทมนตร์',
            customClass: { popup: 'dd-swal-popup', confirmButton: 'dd-swal-confirm' },
            inputValidator: (value) => { if (!value.trim()) return 'ระบบปฏิเสธ: กรุณาใส่ชื่อ!'; }
        }).then((result) => {
            if (result.isConfirmed) {
                dd_playerName = result.value.trim();
                dd_currentLevel = 0;
                
                document.getElementById('dd-ui-name').innerText = dd_playerName;
                document.getElementById('dd-result-name').innerText = dd_playerName;
                
                dd_playSound('click');
                dd_loadLevel();
                dd_showScreen('dd-screen-game');
            }
        });
    }

function dd_loadLevel() {
        const level = dd_levelsData[dd_currentLevel];
        document.getElementById('dd-ui-level').innerText = `${dd_currentLevel + 1}/3`;
        document.getElementById('dd-level-title').innerText = level.title;
        document.getElementById('dd-level-desc').innerText = level.desc;

const gameArea = document.getElementById('dd-game-area');
        gameArea.innerHTML = ''; // Clear old

// 1. สร้าง Inventory (จุดปล่อยของ)
        const inventory = document.createElement('div');
        inventory.id = 'dd-inventory';
        inventory.className = 'dd-inventory';
        inventory.dataset.multi = "true";
        gameArea.appendChild(inventory);

// 2. สุ่มและสร้าง Draggable Items ใส่ Inventory
        let shuffledItems = [...level.items].sort(() => Math.random() - 0.5);
        shuffledItems.forEach(item => {
            const div = document.createElement('div');
            div.className = 'dd-draggable';
            div.draggable = true;
            div.innerText = item.text;
            div.dataset.target = item.target;
            div.dataset.id = item.id;
            
            // ผูก Event HTML5 Drag & Drop
            div.addEventListener('dragstart', dd_handleDragStart);
            div.addEventListener('dragend', dd_handleDragEnd);
            
            inventory.appendChild(div);
        });

// 3. สร้าง Drop Zones ตามประเภทของด่าน
        if (level.type === 'sort') {
            const container = document.createElement('div');
            container.className = 'dd-l1-container';
            level.zones.forEach(zone => {
                const chest = document.createElement('div');
                chest.className = 'dd-chest dd-drop-zone';
                chest.dataset.id = zone.id;
                chest.dataset.multi = "true";
                chest.innerHTML = `<div class="dd-chest-title">${zone.label}</div>`;
                container.appendChild(chest);
            });
            gameArea.appendChild(container);
        } 
        else if (level.type === 'fill') {
            const container = document.createElement('div');
            level.sentences.forEach(s => {
                const sentenceDiv = document.createElement('div');
                sentenceDiv.className = 'dd-l2-sentence';
                
                // สร้างช่องว่างตรงกลางประโยค
                sentenceDiv.innerHTML = `<span>${s.pre} "${s.slotText.replace('🟩', `<span style="color:#FFC107">___</span>`)}" ${s.post}</span>`;
                
                const slot = document.createElement('div');
                slot.className = 'dd-slot dd-drop-zone';
                slot.dataset.id = s.id;
                slot.dataset.multi = "false";
                
                sentenceDiv.appendChild(slot);
                container.appendChild(sentenceDiv);
            });
            gameArea.appendChild(container);
        }
        else if (level.type === 'order') {
            const container = document.createElement('div');
            container.className = 'dd-l3-list';
            for(let i=1; i<=4; i++) {
                const stepDiv = document.createElement('div');
                stepDiv.className = 'dd-l3-step';
                
                const num = document.createElement('div');
                num.className = 'dd-l3-num';
                num.innerText = i;
                
                const slot = document.createElement('div');
                slot.className = 'dd-l3-slot dd-drop-zone';
                slot.dataset.id = `slot-${i}`;
                slot.dataset.multi = "false";
                
                stepDiv.appendChild(num);
                stepDiv.appendChild(slot);
                container.appendChild(stepDiv);
            }
            gameArea.appendChild(container);
        }

// ผูก Event ให้ทุก Drop Zone รวมถึง Inventory
        document.querySelectorAll('.dd-drop-zone, .dd-inventory').forEach(zone => {
            zone.addEventListener('dragover', dd_handleDragOver);
            zone.addEventListener('dragleave', dd_handleDragLeave);
            zone.addEventListener('drop', dd_handleDrop);
        });
    }

/* --- Drag & Drop Handlers --- */
    function dd_handleDragStart(e) {
        dd_draggedItem = this;
        setTimeout(() => this.classList.add('dd-dragging'), 0);
        dd_playSound('drag');
    }

function dd_handleDragEnd(e) {
        this.classList.remove('dd-dragging');
        dd_draggedItem = null;
    }

function dd_handleDragOver(e) {
        e.preventDefault();
        this.classList.add('dd-drag-over');
    }

function dd_handleDragLeave(e) {
        this.classList.remove('dd-drag-over');
    }

/* --- Validation --- */
    function dd_checkAnswer() {
        // ตรวจว่าใน Inventory ยังมีของเหลือไหม
        const invItems = document.getElementById('dd-inventory').querySelectorAll('.dd-draggable');
        if (invItems.length > 0) {
            dd_playSound('wrong');
            Swal.fire({ title: 'เดี๋ยวก่อน!', text: 'กรุณาลากบล็อกให้ครบทุกชิ้นนะ', icon: 'warning', customClass: { popup: 'dd-swal-popup', confirmButton: 'dd-swal-confirm' } });
            return;
        }

const level = dd_levelsData[dd_currentLevel];
        let isCorrect = true;
        const allDraggables = document.getElementById('dd-game-area').querySelectorAll('.dd-draggable');

allDraggables.forEach(item => {
            const parentZone = item.parentElement;
            // ตรวจว่า parent zone id ตรงกับเป้าหมายที่ตั้งไว้ไหม
            if (parentZone.dataset.id !== item.dataset.target) {
                isCorrect = false;
            }
        });

if (isCorrect) {
            dd_playSound('correct');
            Swal.fire({
                title: 'เก่งมาก! 🎉',
                text: 'คุณจัดวางเวทมนตร์ได้ถูกต้องเป๊ะเลย',
                icon: 'success',
                confirmButtonText: 'ไปด่านต่อไป',
                customClass: { popup: 'dd-swal-popup', confirmButton: 'dd-swal-confirm' }
            }).then(() => {
                dd_currentLevel++;
                if (dd_currentLevel < dd_levelsData.length) {
                    dd_loadLevel();
                } else {
                    dd_playSound('correct');
                    dd_showScreen('dd-screen-result');
                }
            });
        } else {
            dd_playSound('wrong');
            Swal.fire({
                title: 'อ๊ะ! มีบางอย่างผิดพลาด 🛑',
                text: 'การจัดเรียงยังไม่ถูกต้อง ลองวิเคราะห์ใหม่อีกครั้งนะ!',
                icon: 'error',
                confirmButtonText: 'พยายามใหม่',
                customClass: { popup: 'dd-swal-popup', confirmButton: 'dd-swal-confirm' }
            });
        }
    }

function dd_restartGame() {
        dd_playSound('click');
        dd_showScreen('dd-screen-start');
    }
</script>