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

Back

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

Title

Description

Keyword

Detail (HTML Code)

/* หน้าจอแสกนเนอร์ (แสดงข้อมูลที่ไหลมา) */
    .scan-screen { background: #e0f7fa; border: 4px dashed #0288d1; border-radius: 15px; padding: 40px 20px; margin-bottom: 25px; min-height: 150px; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; overflow: hidden;}
    .scan-screen::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(2,136,209,0.1) 0%, transparent 70%); animation: scanPulse 3s infinite linear; pointer-events: none;}
    @keyframes scanPulse { 0% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(0.8); opacity: 0.5; } }
    
    .scan-item-text { font-size: 24px; color: #01579b; font-weight: bold; line-height: 1.4; margin: 0; z-index: 1; font-family: 'Prompt', sans-serif;}
    .scan-item-count { position: absolute; top: 10px; right: 15px; font-weight: bold; color: #0288d1; background: rgba(255,255,255,0.8); padding: 5px 10px; border-radius: 20px; font-size: 14px;}

/* ปุ่มตัดสินใจ (Core vs Shell) */
    .scan-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .scan-btn { padding: 20px; border: none; border-radius: 15px; font-size: 18px; font-weight: bold; cursor: pointer; transition: all 0.2s; font-family: 'Prompt', sans-serif; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #fff; }
    .scan-btn:active { transform: translateY(4px); box-shadow: none !important; }
    
    .scan-btn-core { background-color: #2E7D32; box-shadow: 0 6px 0 #1B5E20; border: 2px solid #4CAF50;}
    .scan-btn-core:hover { background-color: #388E3C; }
    
    .scan-btn-shell { background-color: #C62828; box-shadow: 0 6px 0 #b71c1c; border: 2px solid #ef5350;}
    .scan-btn-shell:hover { background-color: #D32F2F; }
    
    .scan-btn-icon { font-size: 35px; }

/* หน้าจอจบเกม */
    #scan-end-screen { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 20px 0; }
    .scan-score-box { background: #F3E5F5; border: 4px solid #9C27B0; border-radius: 20px; padding: 20px 40px; margin: 20px 0; font-size: 24px; font-weight: bold; color: #4A148C; }
    .scan-btn-restart { background: #4A148C; color: white; padding: 12px 30px; border: none; border-radius: 30px; font-size: 18px; cursor: pointer; margin-top: 20px; font-family: 'Prompt', sans-serif; font-weight: bold; box-shadow: 0 4px 0 #311B92; }

/* ฟีดแบคตอนตอบ (Overlay) */
    .scan-feedback-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,0.95); z-index: 10; border-radius: 12px; display: none; transition: opacity 0.3s; }
    .scan-feedback-icon { font-size: 60px; margin-bottom: 10px; }
    .scan-feedback-msg { font-size: 18px; font-weight: bold; padding: 0 20px; color: #333; }
</style>

<div class="wsst-scan-wrapper">
    <div class="scan-container">
        <div class="scan-header">
            <h2>🔍 Abstraction Scanner</h2>
            <p>ภารกิจ: สแกนหา "แก่น (จำเป็น)" และตัด "เปลือก (ไม่จำเป็น)" ทิ้งไป!</p>
        </div>

<div class="scan-body">
            
            <div id="scan-game-screen">
                
                <div class="scan-mission-box">
                    <h3>🎯 ภารกิจปัจจุบัน:</h3>
                    <div class="scan-mission-text" id="scan-mission-text">กำลังโหลดภารกิจ...</div>
                </div>

<div class="scan-screen">
                    <div class="scan-item-count" id="scan-item-count">ข้อมูลที่ 1/4</div>
                    <p class="scan-item-text" id="scan-item-text">กำลังค้นหาข้อมูล...</p>
                    
                    <div class="scan-feedback-overlay" id="scan-feedback-overlay">
                        <div class="scan-feedback-icon" id="scan-feedback-icon">✅</div>
                        <div class="scan-feedback-msg" id="scan-feedback-msg">ถูกต้อง!</div>
                    </div>
                </div>

<div class="scan-controls">
                    <button class="scan-btn scan-btn-core" onclick="checkScanAnswer('core')">
                        <span class="scan-btn-icon">✅</span>
                        เก็บไว้ (แก่นที่จำเป็น)
                    </button>
                    <button class="scan-btn scan-btn-shell" onclick="checkScanAnswer('shell')">
                        <span class="scan-btn-icon">❌</span>
                        ตัดทิ้ง (เปลือกไร้สาระ)
                    </button>
                </div>
            </div>

<div id="scan-end-screen">
                <h2 style="color: #4A148C; font-family: 'Prompt', sans-serif; font-size: 28px; margin:0;">สแกนเสร็จสิ้น!</h2>
                <div class="scan-score-box">
                    สแกนถูกต้อง: <span id="scan-final-score" style="font-size: 36px; color: #E91E63;">0</span> / <span id="scan-total-score">0</span>
                </div>
                <p style="font-size: 18px; color: #555;" id="scan-end-msg">เยี่ยมมาก! คุณมีมุมมองแบบโปรแกรมเมอร์แล้ว!</p>
                <button class="scan-btn-restart" onclick="initScanGame()">🔄 รับภารกิจใหม่</button>
            </div>

</div>
    </div>
</div>

let currentMissionIndex = 0;
    let currentItemIndex = 0;
    let scanScore = 0;
    let totalItems = 0;
    let isScanning = false; // ป้องกันการกดปุ่มรัวๆ

// ฟังก์ชันเริ่มเกม (หรือเริ่มด่านใหม่)
    function initScanGame() {
        document.getElementById('scan-game-screen').style.display = 'block';
        document.getElementById('scan-end-screen').style.display = 'none';
        
        // ถ้าเล่นครบทุกด่านแล้ว ให้วนกลับมาด่านแรกใหม่
        if(currentMissionIndex >= scanMissions.length) {
            currentMissionIndex = 0;
        }

scanScore = 0;
        currentItemIndex = 0;
        isScanning = false;
        
        // นับจำนวนข้อทั้งหมดในด่านนี้
        totalItems = scanMissions[currentMissionIndex].items.length;
        
        updateScanUI();
    }

// ฟังก์ชันอัปเดตหน้าจอแสกนเนอร์
    function updateScanUI() {
        const mission = scanMissions[currentMissionIndex];
        const item = mission.items[currentItemIndex];
        
        document.getElementById('scan-mission-text').innerText = mission.goal;
        document.getElementById('scan-item-count').innerText = `ข้อมูลที่ ${currentItemIndex + 1}/${totalItems}`;
        document.getElementById('scan-item-text').innerText = `"${item.text}"`;
        
        document.getElementById('scan-feedback-overlay').style.display = 'none';
    }

// ฟังก์ชันตรวจคำตอบเมื่อผู้เล่นกดปุ่ม
    function checkScanAnswer(selectedType) {
        if (isScanning) return;
        isScanning = true;

const mission = scanMissions[currentMissionIndex];
        const item = mission.items[currentItemIndex];
        
        const overlay = document.getElementById('scan-feedback-overlay');
        const iconEl = document.getElementById('scan-feedback-icon');
        const msgEl = document.getElementById('scan-feedback-msg');

if (selectedType === item.type) {
            // ตอบถูก
            scanScore++;
            iconEl.innerText = "✅ ถูกต้อง!";
            iconEl.style.color = "#2E7D32";
            msgEl.innerHTML = `เก่งมาก! ${item.explain}`;
        } else {
            // ตอบผิด
            iconEl.innerText = "❌ วิเคราะห์พลาด!";
            iconEl.style.color = "#C62828";
            let correctWord = item.type === "core" ? "เก็บไว้ (มันคือแก่น)" : "ตัดทิ้ง (มันคือเปลือก)";
            msgEl.innerHTML = `จริงๆ แล้วควร <b>${correctWord}</b> นะครับ<br><span style="font-size:14px; font-weight:normal;">(เพราะ: ${item.explain})</span>`;
        }

// แสดงผล
        overlay.style.display = "flex";

// หน่วงเวลา 2.5 วินาที แล้วไปข้อต่อไป
        setTimeout(() => {
            currentItemIndex++;
            
            if (currentItemIndex < totalItems) {
                updateScanUI();
                isScanning = false;
            } else {
                showScanEndScreen();
            }
        }, 2500);
    }

// ฟังก์ชันจบด่าน
    function showScanEndScreen() {
        document.getElementById('scan-game-screen').style.display = 'none';
        const endScreen = document.getElementById('scan-end-screen');
        
        endScreen.style.display = 'flex';
        document.getElementById('scan-final-score').innerText = scanScore;
        document.getElementById('scan-total-score').innerText = totalItems;

const endMsg = document.getElementById('scan-end-msg');
        if (scanScore === totalItems) {
            endMsg.innerText = "สมบูรณ์แบบ! เลนส์วิเศษของคุณแม่นยำมาก 🌟";
        } else {
            endMsg.innerText = "เยี่ยมมาก! แต่ยังมีข้อมูลบางส่วนที่หลุดรอดไปนะ ลองฝึกบ่อยๆ ✌️";
        }

// เตรียมไปภารกิจถัดไป
        currentMissionIndex++;
    }

// โหลดเกมทันทีเมื่อเข้าเว็บ
    setTimeout(initScanGame, 200);
</script>