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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div id="fn-screen-start" class="fn-screen active">
        <div class="fn-start-banner">
            <h1 class="fn-title">🕵️‍♂️ แฟ้มคดีลับ: แก๊งข่าวปลอม</h1>
            <p class="fn-subtitle">สืบสวนหาความจริงฉบับนักเรียน ป.5</p>
        </div>
        <div class="fn-intro-box">
            <p><strong>ภารกิจนักสืบไซเบอร์:</strong></p>
            <p style="margin-top: 5px;">1. วิเคราะห์ <strong>"หลักฐาน"</strong> ที่ปรากฏบนแฟ้มคดีจำนวน 10 คดี</p>
            <p>2. ตัดสินใจประทับตราว่าข้อมูลนี้ <strong>"น่าเชื่อถือ ✔️"</strong> หรือ <strong>"ข่าวปลอม ❌"</strong></p>
            <p>3. คุณมีเวลาตัดสินใจคดีละ 15 วินาที และมีพลังชีวิต 3 หัวใจ 🧡 ระวังประทับตราพลาดล่ะ!</p>
        </div>
        <button class="fn-btn-3d" onclick="fn_requestPlayerName()">🔍 ลงทะเบียนนักสืบ</button>
    </div>

<div id="fn-screen-game" class="fn-screen">
        <div class="fn-hud-bar">
            <div class="fn-hud-item">นักสืบ: <span id="fn-hud-player-name" style="color:#673AB7;">-</span></div>
            <div class="fn-hud-item">🏆 คะแนน: <span id="fn-hud-score" style="color:#4CAF50; font-size:22px;">0</span></div>
            <div class="fn-hud-item">🧡 <span id="fn-hud-hearts">🧡🧡🧡</span></div>
        </div>

<div class="fn-case-file">
            <div class="fn-case-text" id="fn-current-question">ดึงข้อมูลหลักฐาน...</div>
        </div>
        
        <div class="fn-progress-container">
            <div class="fn-progress-bar" id="fn-timer-bar"></div>
        </div>

<div class="fn-decision-grid">
            <button class="fn-btn-stamp fn-btn-stamp-true" onclick="fn_checkAnswer(true)">
                <span class="fn-stamp-icon">✔️</span>
                <span>น่าเชื่อถือ / ถูกต้อง</span>
            </button>
            <button class="fn-btn-stamp fn-btn-stamp-false" onclick="fn_checkAnswer(false)">
                <span class="fn-stamp-icon">❌</span>
                <span>ไม่น่าเชื่อถือ / ข่าวปลอม</span>
            </button>
        </div>
    </div>

<div id="fn-screen-result" class="fn-screen">
        <h1 class="fn-title" style="color: #311B92;">🎉 ปิดคดีสำเร็จ! 🎉</h1>
        <h2 id="fn-result-greeting" style="color: #424242; margin-bottom: 20px; font-family: 'Prompt', sans-serif;">ทำงานได้ดีมาก นักสืบไซเบอร์!</h2>
        
        <div class="fn-result-box">
            <p style="font-size: 18px; color:#757575;">รหัสประจำตัว: <strong id="fn-result-name" style="color:#512DA8;">-</strong></p>
            <p style="font-size: 20px; margin-top: 10px; color:#424242;">คะแนนสืบสวน:</p>
            <p style="font-size: 50px; font-weight: 800; color: #4CAF50; margin: 0; line-height: 1;"><span id="fn-result-score">0</span></p>
            <div style="font-size: 22px; font-weight: 800; color: #311B92; margin-top: 20px;" id="fn-result-rank">ระดับ: โหลดข้อมูล...</div>
        </div>

<button class="fn-btn-3d" onclick="fn_restartGame()">🔄 รับแฟ้มคดีใหม่</button>
    </div>

</div>

.fn-wrapper::before {
        content: "CONFIDENTIAL";
        position: absolute;
        top: 0; 
        left: 0;
        background: #311B92;
        color: white;
        font-weight: 800;
        font-size: 12px;
        padding: 2px 15px;
        border-radius: 0 0 10px 0;
        letter-spacing: 1px;
    }

.fn-screen {
        display: none;
        padding: 30px;
        text-align: center;
        animation: fnFadeIn 0.4s ease-in-out forwards;
    }
    
    .fn-screen.active { 
        display: block; 
    }

@keyframes fnFadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

.fn-wrapper h1.fn-title { 
        font-size: 32px; 
        color: #311B92; 
        margin-bottom: 10px; 
        font-weight: 800; 
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        margin-top: 0;
    }
    
    .fn-wrapper p { 
        font-size: 16px; 
        color: #424242; 
        line-height: 1.6; 
        margin-bottom: 0;
    }

.fn-btn-3d {
        display: inline-block;
        padding: 15px 40px;
        font-size: 20px;
        font-weight: 800;
        color: #311B92;
        background: linear-gradient(180deg, #FFD54F 0%, #FFC107 100%);
        border: none;
        border-radius: 50px;
        cursor: pointer;
        box-shadow: 0 6px 0 #FF8F00, 0 8px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.1s ease;
        font-family: 'Prompt', sans-serif;
        margin-top: 20px;
    }
    
    .fn-btn-3d:hover { 
        transform: translateY(2px); 
        box-shadow: 0 4px 0 #FF8F00, 0 6px 10px rgba(0, 0, 0, 0.15); 
    }
    
    .fn-btn-3d:active { 
        transform: translateY(6px); 
        box-shadow: 0 0px 0 #FF8F00, 0 2px 5px rgba(0, 0, 0, 0.1); 
    }

.fn-start-banner {
        background: linear-gradient(135deg, #673AB7 0%, #311B92 100%);
        padding: 35px 20px;
        border-radius: 12px;
        margin-bottom: 25px;
        margin-top: 15px;
        border-bottom: 5px solid #311B92;
    }
    
    .fn-start-banner h1.fn-title { 
        color: #FFF; 
        margin-bottom: 5px;
    }
    
    .fn-subtitle {
        color: #EDE7F6 !important;
        font-weight: bold;
        font-size: 18px !important;
        margin-top: 5px;
    }
    
    .fn-intro-box {
        background: #FFFFFF;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 25px;
        text-align: left;
        border-left: 6px solid #FFC107;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

.fn-hud-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #EDE7F6;
        padding: 12px 20px;
        border-radius: 10px;
        margin-bottom: 20px;
        margin-top: 15px;
        border: 1px dashed #673AB7;
    }
    
    .fn-hud-item { 
        font-weight: 700; 
        font-size: 16px; 
        color: #311B92; 
    }

.fn-map-container {
        display: flex; 
        justify-content: space-between; 
        align-items: center;
        margin-bottom: 25px; 
        position: relative; 
        padding: 0 10px;
    }
    
    .fn-map-line {
        position: absolute; 
        top: 50%; 
        left: 20px; 
        right: 20px; 
        height: 3px;
        background: #BDBDBD; 
        z-index: 1; 
        transform: translateY(-50%);
    }
    
    .fn-map-node {
        width: 30px; 
        height: 30px; 
        border-radius: 50%; 
        background: #FFF;
        border: 3px solid #BDBDBD; 
        z-index: 2; 
        display: flex;
        justify-content: center; 
        align-items: center; 
        font-size: 12px;
        font-weight: bold; 
        color: #9E9E9E; 
        transition: all 0.3s ease;
    }
    
    .fn-map-node.active { 
        border-color: #FFC107; 
        background: #FFC107; 
        color: #311B92; 
        transform: scale(1.3); 
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.5); 
    }
    
    .fn-map-node.passed { 
        border-color: #4CAF50; 
        background: #4CAF50; 
        color: white; 
    }
    
    .fn-map-node.failed { 
        border-color: #E53935; 
        background: #E53935; 
        color: white; 
    }

.fn-case-file {
        background: #FFF;
        border: 2px solid #E0E0E0;
        padding: 30px 20px;
        border-radius: 10px;
        position: relative;
        margin-bottom: 25px;
        box-shadow: inset 0 0 20px rgba(0,0,0,0.02), 0 4px 6px rgba(0,0,0,0.05);
        min-height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .fn-case-file::before {
        content: "หลักฐานหมายเลข...";
        position: absolute;
        top: -12px; 
        left: 20px;
        background: #FFF;
        padding: 0 10px;
        color: #757575;
        font-weight: bold;
        font-size: 14px;
    }
    
    .fn-case-text {
        font-size: 22px;
        font-weight: 800;
        color: #212121;
        line-height: 1.5;
    }

.fn-progress-container { 
        width: 100%; 
        height: 10px; 
        background: #E0E0E0; 
        border-radius: 5px; 
        margin-bottom: 25px; 
        overflow: hidden; 
    }
    
    .fn-progress-bar { 
        width: 100%; 
        height: 100%; 
        background: linear-gradient(90deg, #4CAF50, #FFC107, #F44336); 
        transition: width 0.1s linear; 
    }

.fn-decision-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .fn-btn-stamp {
        background: white; 
        border: 4px solid #EEEEEE; 
        padding: 20px 10px; 
        border-radius: 15px;
        font-size: 20px; 
        font-weight: 800; 
        cursor: pointer; 
        transition: all 0.2s ease;
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        gap: 10px;
        font-family: 'Prompt', sans-serif; 
        box-shadow: 0 6px 10px rgba(0,0,0,0.05);
    }
    
    .fn-btn-stamp-true { color: #4CAF50; }
    .fn-btn-stamp-false { color: #E53935; }
    
    .fn-btn-stamp:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
    .fn-btn-stamp:active { transform: translateY(2px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    
    .fn-btn-stamp-true:hover { border-color: #4CAF50; background: #E8F5E9; }
    .fn-btn-stamp-false:hover { border-color: #E53935; background: #FFEBEE; }

.fn-stamp-icon { font-size: 40px; line-height: 1; }

.fn-result-box { 
        background: #FAFAFA; 
        border: 3px dashed #BDBDBD; 
        padding: 30px; 
        border-radius: 15px; 
        margin-bottom: 25px; 
    }

/* SweetAlert Customization - Scoped by customClass */
    .swal2-fn-popup { 
        font-family: 'Prompt', 'Sarabun', sans-serif !important; 
        border-radius: 15px !important; 
        border: 5px solid #512DA8 !important; 
    }
    .swal2-fn-title { color: #311B92 !important; }
    .swal2-fn-confirm { 
        background: linear-gradient(180deg, #FFD54F 0%, #FFC107 100%) !important; 
        color: #311B92 !important; 
        box-shadow: 0 4px 0 #FF8F00 !important; 
        border-radius: 50px !important; 
        font-weight: 800 !important; 
    }
    
    /* Responsive Mobile */
    @media (max-width: 600px) {
        .fn-decision-grid { grid-template-columns: 1fr; }
        .fn-hud-bar { flex-direction: column; gap: 5px; }
        .fn-wrapper { padding: 15px; }
    }
</style>

let fn_playerName = "";
    let fn_currentCaseIdx = 0;
    let fn_score = 0;
    let fn_hearts = 3;
    let fn_gameTimer = null;
    let fn_timeRemaining = 100;
    let fn_isWaiting = false;
    
    const FN_POINTS_PER_Q = 10;
    const FN_TIME_LIMIT_SEC = 15;
    let fn_audioCtx = null;
    let fn_typeWriterInterval = null;

function fn_showScreen(screenId) { 
        document.querySelectorAll('.fn-screen').forEach(s => s.classList.remove('active')); 
        document.getElementById(screenId).classList.add('active'); 
    }

function fn_startGame() { 
        fn_score = 0; 
        fn_hearts = 3; 
        fn_currentCaseIdx = 0; 
        fn_isWaiting = false; 
        
        document.getElementById('fn-hud-player-name').innerText = fn_playerName; 
        document.getElementById('fn-hud-score').innerText = fn_score; 
        
        fn_questionPool.sort(() => Math.random() - 0.5);
        
        fn_updateHeartsUI(); 
        fn_setupMap();
        fn_showScreen('fn-screen-game'); 
        fn_loadCase(); 
    }

function fn_updateHeartsUI() { 
        document.getElementById('fn-hud-hearts').innerHTML = Array.from(
            {length: 3}, 
            (_, i) => i < fn_hearts ? "🧡" : "🖤"
        ).join(''); 
    }

function fn_checkAnswer(playerChoice) {
        if (fn_isWaiting) return;
        fn_isWaiting = true; 
        clearInterval(fn_gameTimer);

const qData = fn_questionPool[fn_currentCaseIdx];
        const isCorrect = (playerChoice === qData.isTrue);

if (isCorrect) {
            fn_playSound('correct'); 
            fn_score += FN_POINTS_PER_Q; 
            document.getElementById('fn-hud-score').innerText = fn_score;
            fn_updateMapUI('correct');
            
            Swal.fire({
                icon: 'success', 
                title: 'วิเคราะห์เฉียบขาด!', 
                text: qData.explanation,
                timer: 2500, 
                showConfirmButton: false, 
                customClass: { popup: 'swal2-fn-popup', title: 'swal2-fn-title' }
            }).then(() => {
                fn_nextCase();
            });
        } else {
            fn_playSound('wrong'); 
            fn_hearts--; 
            fn_updateHeartsUI();
            fn_updateMapUI('failed');
            
            Swal.fire({
                icon: 'error', 
                title: 'ประทับตราพลาด!', 
                text: qData.explanation,
                timer: 3000, 
                showConfirmButton: false, 
                customClass: { popup: 'swal2-fn-popup', title: 'swal2-fn-title' }
            }).then(() => {
                fn_nextCase();
            });
        }
    }

function fn_nextCase() {
        if (fn_hearts <= 0) {
            fn_endGame();
        } else {
            fn_currentCaseIdx++;
            fn_loadCase();
        }
    }

function fn_endGame() {
        if(fn_gameTimer) clearInterval(fn_gameTimer);
        if(fn_typeWriterInterval) clearInterval(fn_typeWriterInterval);
        
        document.getElementById('fn-result-name').innerText = fn_playerName; 
        document.getElementById('fn-result-score').innerText = fn_score;
        
        if(fn_score > 0) fn_playSound('win');