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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div class="wsst-card-wrapper">
    <div id="screen-start" class="wsst-screen active">
        <h1>🔍 Cyber Card Flip</h1>
        <p style="margin-bottom: 20px;">จับคู่คำศัพท์และขั้นตอนการค้นหาข้อมูลให้ครบ 10 คู่!</p>
        <button class="wsst-btn" onclick="wsstStartGame()">เริ่มภารกิจนักค้นหา</button>
    </div>

<div id="screen-game" class="wsst-screen">
        <div id="wsst-timer" style="font-size: 20px; font-weight: bold; margin-bottom: 10px;">เวลา: 60s</div>
        <div class="wsst-card-grid" id="wsst-card-grid"></div>
    </div>
</div>

<style>
    .wsst-card-wrapper { font-family: 'Prompt', sans-serif; background: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 4px solid #2196F3; max-width: 800px; margin: auto; text-align: center; }
    .wsst-screen { display: none; }
    .wsst-screen.active { display: block; }
    .wsst-btn { padding: 15px 40px; font-size: 18px; font-weight: 800; color: white; background: linear-gradient(180deg, #2196F3 0%, #0D47A1 100%); border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 5px 0 #0D47A1; transition: 0.1s; }
    .wsst-btn:active { transform: translateY(5px); box-shadow: none; }
    .wsst-card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; perspective: 1000px; margin-bottom: 20px; }
    .wsst-card { height: 100px; cursor: pointer; position: relative; transform-style: preserve-3d; transition: transform 0.6s; }
    .wsst-card.flipped { transform: rotateY(180deg); }
    .wsst-card.matched { visibility: hidden; }
    .wsst-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; border-radius: 10px; font-weight: bold; font-size: 13px; padding: 5px; border: 2px solid white; }
    .wsst-front { background: #2196F3; color: white; }
    .wsst-back { background: #0D47A1; color: #E3F2FD; transform: rotateY(180deg); border-color: #FFC107; }
</style>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    const wsstPairs = [
        ["คีย์เวิร์ด (Keyword)", "ขนมไทยจากกะทิ"], ["คำค้นกว้างไป", "ขนม"],
        ["เซฟรูปภาพ", "บันทึกรูปภาพเป็น..."], ["ค้นหาขั้นสูง", "กรองข้อมูล (Filter)"],
        ["กรองเวลา", "ภายใน 1 ปี"], ["กรองประเภทไฟล์", "PDF"],
        ["ค้นหารูปภาพ", "ขนาดใหญ่"], ["Google", "เครื่องมือค้นหา"],
        ["Web Browser", "Chrome / Edge"], ["หน้าแรกสุด", "Home Page"]
    ];

let wsstFlipped = [], wsstMatched = 0, wsstTime = 60, wsstTimer = null;

function wsstStartGame() {
        document.getElementById('screen-start').style.display = 'none';
        document.getElementById('screen-game').style.display = 'block';
        let deck = [...wsstPairs.flat()].sort(() => Math.random() - 0.5);
        const grid = document.getElementById('wsst-card-grid');
        grid.innerHTML = '';
        deck.forEach(text => {
            const card = document.createElement('div');
            card.className = 'wsst-card';
            card.innerHTML = `<div class="wsst-face wsst-front">?</div><div class="wsst-face wsst-back">${text}</div>`;
            card.onclick = () => wsstFlip(card, text);
            grid.appendChild(card);
        });
        wsstTimer = setInterval(() => {
            wsstTime--;
            document.getElementById('wsst-timer').innerText = "เวลา: " + wsstTime + "s";
            if(wsstTime <= 0) wsstEnd(false);
        }, 1000);
    }

function wsstFlip(card, text) {
        if(wsstFlipped.length < 2 && !card.classList.contains('flipped')) {
            card.classList.add('flipped');
            wsstFlipped.push({card, text});
            if(wsstFlipped.length === 2) {
                const [c1, c2] = wsstFlipped;
                const isMatch = wsstPairs.some(p => p.includes(c1.text) && p.includes(c2.text));
                if(isMatch) {
                    wsstMatched++;
                    setTimeout(() => { c1.card.classList.add('matched'); c2.card.classList.add('matched'); wsstFlipped=[]; if(wsstMatched === wsstPairs.length) wsstEnd(true); }, 500);
                } else {
                    setTimeout(() => { c1.card.classList.remove('flipped'); c2.card.classList.remove('flipped'); wsstFlipped=[]; }, 1000);
                }
            }
        }
    }

function wsstEnd(win) {
        clearInterval(wsstTimer);
        Swal.fire({ title: win ? "ภารกิจสำเร็จ!" : "หมดเวลา!", text: win ? "คุณคือนักค้นหาข้อมูลระดับโปร!" : "ลองใหม่อีกครั้งนะ!", icon: win ? "success" : "error" }).then(() => location.reload());
    }
</script>