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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@400;600;800&family=Sarabun:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<div class="wr-wrapper">

<div id="wr-screen-start" class="wr-screen active">
        <div class="wr-start-banner">
            <h1 class="wr-title">🌍 ตะลุยโลกอินเทอร์เน็ต</h1>
            <p class="wr-subtitle">เชื่อมต่อเครือข่าย เปิดประตูสู่เบราว์เซอร์!</p>
        </div>
        <div class="wr-intro-box">
            <p><strong>กฎการผจญภัย Walk Rally:</strong></p>
            <p style="margin-top: 5px;">1. เดินทางผ่าน <strong>6 ฐานเชื่อมต่อ (Node)</strong> เพื่อทดสอบความรู้</p>
            <p>2. อ่านคำถาม แล้วคลิกเลือกคำตอบที่ถูกต้องที่สุด</p>
            <p>3. มีเวลาจำกัดฐานละ 15 วินาที พลังชีวิต 3 หัวใจ 🧡</p>
        </div>
        <button class="wr-btn-3d" onclick="wr_requestPlayerName()">🚀 ลงทะเบียนท่องเว็บ</button>
    </div>

<div id="wr-screen-game" class="wr-screen">
        <div class="wr-hud-bar">
            <div class="wr-hud-item">👤 <span id="wr-hud-player-name" style="color:#2196F3;">-</span></div>
            <div class="wr-hud-item">🏆 คะแนน: <span id="wr-hud-score" style="color:#4CAF50; font-size:22px;">0</span></div>
            <div class="wr-hud-item">🧡 <span id="wr-hud-hearts">🧡🧡🧡</span></div>
        </div>

<div class="wr-map-container" id="wr-progress-map">
            <div class="wr-map-line"></div>
        </div>

<div class="wr-question-box">
            <div class="wr-question-text" id="wr-current-question">กำลังโหลดข้อมูลจากเซิร์ฟเวอร์...</div>
        </div>
        
        <div class="wr-progress-container">
            <div class="wr-progress-bar" id="wr-timer-bar"></div>
        </div>

<div class="wr-options-grid" id="wr-options-container">
            
        </div>
    </div>

<div id="wr-screen-result" class="wr-screen">
        <h1 class="wr-title" style="color: #0D47A1;">🎉 การเชื่อมต่อสำเร็จ! 🎉</h1>
        <h2 id="wr-result-greeting" style="color: #1976D2; margin-bottom: 20px; font-family: 'Prompt', sans-serif;">เก่งมากเลย นักท่องเว็บตัวน้อย!</h2>
        
        <div class="wr-result-box">
            <p style="font-size: 18px; color:#555;">รหัสผู้ใช้: <strong id="wr-result-name" style="color:#0D47A1; font-size: 22px;">-</strong></p>
            <p style="font-size: 20px; margin-top: 15px; color:#424242; font-weight: bold;">คะแนนสะสม:</p>
            <p style="font-size: 55px; font-weight: 800; color: #4CAF50; margin: 0; line-height: 1;"><span id="wr-result-score">0</span></p>
            <div style="font-size: 22px; font-weight: 800; color: #FFC107; margin-top: 20px; text-shadow: 1px 1px 1px rgba(0,0,0,0.1);" id="wr-result-rank">ระดับ: โหลดข้อมูล...</div>
        </div>

<button class="wr-btn-3d" onclick="wr_restartGame()">🔄 เริ่มต้นผจญภัยใหม่</button>
    </div>

</div>

<style>
    .wr-wrapper {
        font-family: 'Prompt', 'Sarabun', sans-serif;
        background: #FFFFFF;
        border-radius: 25px;
        box-shadow: 0 10px 30px rgba(13, 71, 161, 0.15);
        border: 6px solid #BBDEFB;
        max-width: 800px;
        margin: 30px auto;
        position: relative;
        overflow: hidden;
    }
    
    .wr-wrapper * {
        box-sizing: border-box;
    }

.wr-screen {
        display: none;
        padding: 35px;
        text-align: center;
        animation: wrFadeIn 0.4s ease-in-out forwards;
    }
    
    .wr-screen.active { 
        display: block; 
    }

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

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

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

.wr-start-banner {
        background: linear-gradient(135deg, #29B6F6 0%, #0277BD 100%);
        padding: 40px 20px;
        border-radius: 18px;
        margin-bottom: 25px;
        border-bottom: 6px solid #01579B;
    }
    
    .wr-start-banner h1.wr-title { 
        color: #FFF; 
        margin-bottom: 5px;
    }
    
    .wr-subtitle {
        color: #E1F5FE !important;
        font-weight: bold;
        font-size: 20px !important;
        margin-top: 5px;
    }
    
    .wr-intro-box {
        background: #FAFAFA;
        padding: 20px;
        border-radius: 12px;
        margin-bottom: 25px;
        text-align: left;
        border-left: 6px solid #FFC107;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

.wr-hud-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #E3F2FD;
        padding: 15px 20px;
        border-radius: 15px;
        margin-bottom: 25px;
        border: 2px solid #90CAF9;
    }
    
    .wr-hud-item { 
        font-weight: 800; 
        font-size: 18px; 
        color: #0D47A1; 
    }

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

.wr-question-box {
        background: #FFF;
        border: 3px dashed #64B5F6;
        padding: 25px 20px;
        border-radius: 15px;
        position: relative;
        margin-bottom: 25px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        min-height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .wr-question-text { 
        font-size: 20px; 
        font-weight: 800; 
        color: #1565C0; 
        line-height: 1.4; 
    }

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

.wr-options-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    
    .wr-btn-option {
        background: white; 
        border: 3px solid #E3F2FD; 
        padding: 15px; 
        border-radius: 12px;
        font-size: 16px; 
        font-weight: 700; 
        color: #333; 
        cursor: pointer; 
        transition: all 0.2s ease;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
        font-family: 'Prompt', sans-serif;
        text-align: left; 
        display: flex; 
        align-items: center;
    }
    
    .wr-btn-option:hover { 
        transform: translateY(-3px); 
        box-shadow: 0 6px 12px rgba(33, 150, 243, 0.15); 
        border-color: #64B5F6; 
        background: #F1F8FF; 
    }
    
    .wr-btn-option:active { 
        transform: translateY(1px); 
        box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
    }

.wr-result-box { 
        background: #E3F2FD; 
        border: 3px solid #90CAF9; 
        padding: 30px; 
        border-radius: 20px; 
        margin-bottom: 25px; 
    }

/* SweetAlert Customization */
    .swal2-wr-popup { 
        font-family: 'Prompt', 'Sarabun', sans-serif !important; 
        border-radius: 20px !important; 
        border: 6px solid #64B5F6 !important; 
    }
    .swal2-wr-title { 
        color: #0D47A1 !important; 
        font-weight: 800 !important; 
    }
    .swal2-wr-confirm { 
        background: linear-gradient(180deg, #42A5F5 0%, #1565C0 100%) !important; 
        color: #FFF !important; 
        box-shadow: 0 5px 0 #0D47A1 !important; 
        border-radius: 50px !important; 
        font-weight: 800 !important; 
        padding: 12px 30px !important; 
    }
    
    /* Responsive Mobile */
    @media (max-width: 600px) {
        .wr-options-grid { grid-template-columns: 1fr; }
        .wr-hud-bar { flex-direction: column; gap: 5px; }
        .wr-wrapper { padding: 15px; }
        .wr-map-container { padding: 0 5px; }
        .wr-map-node { width: 30px; height: 30px; font-size: 14px; }
        .wr-btn-3d { padding: 12px 25px; font-size: 18px; }
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

let wr_playerName = "";
    let wr_currentNodeIdx = 0;
    let wr_score = 0;
    let wr_hearts = 3;
    let wr_gameTimer = null;
    let wr_timeRemaining = 100;
    let wr_isWaiting = false;
    
    const WR_POINTS_PER_Q = 10;
    const WR_TIME_LIMIT_SEC = 15;
    let wr_audioCtx = null;

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

function wr_startGame() { 
        wr_score = 0; 
        wr_hearts = 3; 
        wr_currentNodeIdx = 0; 
        wr_isWaiting = false; 
        
        document.getElementById('wr-hud-player-name').innerText = wr_playerName; 
        document.getElementById('wr-hud-score').innerText = wr_score; 
        
        wr_updateHeartsUI(); 
        wr_setupMap();
        wr_showScreen('wr-screen-game'); 
        wr_loadNode(); 
    }

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

wr_startTimer();
    }

function wr_checkAnswer(selected, correct) {
        if (wr_isWaiting) return;
        wr_isWaiting = true; 
        clearInterval(wr_gameTimer);

if (selected === correct) {
            wr_playSound('correct'); 
            wr_score += WR_POINTS_PER_Q; 
            document.getElementById('wr-hud-score').innerText = wr_score;
            wr_updateMapUI('correct');
            
            Swal.fire({
                icon: 'success', 
                title: 'ตอบถูก!', 
                text: 'ผ่านจุดเชื่อมต่อได้อย่างยอดเยี่ยม',
                timer: 1500, 
                showConfirmButton: false, 
                customClass: { popup: 'swal2-wr-popup', title: 'swal2-wr-title' }
            }).then(() => {
                wr_nextNode();
            });
        } else {
            wr_playSound('wrong'); 
            wr_hearts--; 
            wr_updateHeartsUI();
            wr_updateMapUI('failed');
            
            Swal.fire({
                icon: 'error', 
                title: 'การเชื่อมต่อขัดข้อง', 
                text: `คำตอบคือ: ${correct}`,
                timer: 2500, 
                showConfirmButton: false, 
                customClass: { popup: 'swal2-wr-popup', title: 'swal2-wr-title' }
            }).then(() => {
                wr_nextNode();
            });
        }
    }

function wr_nextNode() {
        if (wr_hearts <= 0) {
            wr_endGame();
        } else {
            wr_currentNodeIdx++;
            wr_loadNode();
        }
    }

function wr_endGame() {
        if(wr_gameTimer) clearInterval(wr_gameTimer);
        
        document.getElementById('wr-result-name').innerText = wr_playerName; 
        document.getElementById('wr-result-score').innerText = wr_score;
        
        if(wr_score > 0) wr_playSound('win');