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

Back

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

Title

Description

Keyword

Detail (HTML Code)

.lesson-package-p4-unit5 .header-bar-xyz {
            background-color: #8B0F0F;
            padding: 25px;
            text-align: center;
        }

/* บังคับสีตัวอักษร Header เป็นสีขาวเสมอ */
        .lesson-package-p4-unit5 .header-bar-xyz h2 {
            margin: 0;
            font-size: 26px;
            letter-spacing: 1px;
            color: #ffffff !important; 
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

.lesson-package-p4-unit5 .header-bar-xyz p {
            margin: 5px 0 0; 
            color: #ffffff !important;
            opacity: 0.9;
            font-size: 18px;
        }

.lesson-package-p4-unit5 .mission-box-xyz {
            padding: 30px;
            min-height: 400px;
        }

.lesson-package-p4-unit5 .progress-container-xyz {
            background: #eee;
            height: 12px;
            width: 100%;
        }

.lesson-package-p4-unit5 .progress-bar-xyz {
            background: #8B0F0F;
            height: 100%;
            width: 0%;
            transition: width 0.5s ease;
            border-radius: 0 5px 5px 0;
        }

.lesson-package-p4-unit5 .btn-answer-xyz {
            display: block;
            width: 100%;
            padding: 18px;
            margin: 12px 0;
            background: #F4F6F8;
            border: 2px solid #ddd;
            border-radius: 15px;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: left;
            color: #333;
            font-weight: bold;
        }

.lesson-package-p4-unit5 .btn-answer-xyz:hover {
            border-color: #8B0F0F;
            background: #FFF5F5;
            transform: scale(1.01);
        }

.lesson-package-p4-unit5 .btn-start-xyz {
            background: #8B0F0F;
            color: white !important;
            border: none;
            padding: 15px 40px;
            font-size: 22px;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
            box-shadow: 0 4px 15px rgba(139, 15, 15, 0.3);
            transition: background 0.3s;
        }

.lesson-package-p4-unit5 .btn-start-xyz:hover {
            background: #5C0A0A;
        }

.lesson-package-p4-unit5 .score-badge-xyz {
            display: inline-block;
            background: #8B0F0F;
            color: white !important;
            padding: 8px 20px;
            border-radius: 25px;
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 15px;
        }

.lesson-package-p4-unit5 .feedback-xyz {
            padding: 15px;
            border-radius: 12px;
            margin-top: 15px;
            display: none;
            font-weight: bold;
            font-size: 18px;
            text-align: left;
        }

.lesson-package-p4-unit5 .question-text-xyz {
            font-size: 20px;
            color: #333;
            margin-top: 5px;
            line-height: 1.5;
        }
    </style>

<div class="game-card-xyz">
        <div class="header-bar-xyz">
            <h2 id="title-display">🛡️ อัศวินไซเบอร์: ผู้พิทักษ์โลกออนไลน์</h2>
            <p>ระดับชั้นประถมศึกษาปีที่ 4</p>
        </div>

<div id="game-screen" class="mission-box-xyz" style="text-align: center;">
            <div id="start-screen">
                <h1 style="color: #8B0F0F; margin-top: 0; font-size: 28px;">ยินดีต้อนรับ ว่าที่อัศวินไซเบอร์! ⚔️</h1>
                <p style="font-size: 18px; color: #444; line-height: 1.6;">โลกออนไลน์เต็มไปด้วยข้อมูลที่มีประโยชน์และอันตรายที่แอบแฝงอยู่<br>ภารกิจของนักเรียนคือการตัดสินใจแก้ปัญหาในสถานการณ์จำลองทั้ง 13 ข้อ<br>เพื่อพิสูจน์ความพร้อมในการเป็นพลเมืองดิจิทัลที่ดี!</p>
                <br>
                <button class="btn-start-xyz" onclick="startGame()">เริ่มบททดสอบอัศวิน!</button>
            </div>

<div id="mission-screen" style="display: none; text-align: left;">
                <div class="score-badge-xyz">ด่านที่ <span id="current-mission-num">1</span>/13</div>
                <h3 id="question-text" class="question-text-xyz"></h3>
                <div id="answer-options"></div>
                <div id="feedback-area" class="feedback-xyz"></div>
                <div style="text-align: right; margin-top: 25px;">
                    <button id="next-btn" class="btn-start-xyz" style="display: none; font-size: 18px; padding: 12px 30px;" onclick="nextMission()">ไปด่านต่อไปเลย! >></button>
                </div>
            </div>

<div id="result-screen" style="display: none;">
                <h1 style="color: #8B0F0F; margin-top: 0; font-size: 32px;">จบภารกิจแล้ว! 🏅</h1>
                <p id="final-score-text" style="font-size: 26px; font-weight: bold; color: #333; margin: 15px 0;"></p>
                <p id="evaluation-text" style="font-size: 20px; color: #555; line-height: 1.6;"></p>
                <br>
                <button class="btn-start-xyz" onclick="location.reload()">ทำภารกิจใหม่อีกครั้ง 🔄</button>
            </div>
        </div>
    </div>

let currentMission = 0;
        let score = 0;

function startGame() {
            document.getElementById('start-screen').style.display = 'none';
            document.getElementById('mission-screen').style.display = 'block';
            updateMission();
        }

function updateMission() {
            const m = missions[currentMission];
            document.getElementById('current-mission-num').innerText = currentMission + 1;
            document.getElementById('question-text').innerText = m.q;
            document.getElementById('progress-bar').style.width = ((currentMission + 1) / missions.length * 100) + "%";
            
            const optionsArea = document.getElementById('answer-options');
            optionsArea.innerHTML = '';
            
            m.options.forEach((opt, idx) => {
                const btn = document.createElement('button');
                btn.className = 'btn-answer-xyz';
                btn.innerText = opt.text;
                btn.onclick = () => selectAnswer(idx);
                optionsArea.appendChild(btn);
            });

document.getElementById('feedback-area').style.display = 'none';
            document.getElementById('next-btn').style.display = 'none';
        }

function selectAnswer(idx) {
            const m = missions[currentMission];
            const opt = m.options[idx];
            const feedback = document.getElementById('feedback-area');
            const btns = document.querySelectorAll('.btn-answer-xyz');

btns.forEach(b => b.disabled = true);
            feedback.style.display = 'block';

if (opt.correct) {
                score++;
                feedback.style.backgroundColor = '#E8F5E9';
                feedback.style.borderLeft = '6px solid #2E7D32';
                feedback.style.color = '#1B5E20';
                feedback.innerHTML = "🛡️ <strong>ป้องกันสำเร็จ!</strong><br>" + opt.msg;
            } else {
                feedback.style.backgroundColor = '#FFEBEE';
                feedback.style.borderLeft = '6px solid #C62828';
                feedback.style.color = '#B71C1C';
                feedback.innerHTML = "⚠️ <strong>ระวังอันตราย!</strong><br>" + opt.msg;
            }

document.getElementById('next-btn').style.display = 'inline-block';
        }

function showResult() {
            document.getElementById('mission-screen').style.display = 'none';
            document.getElementById('result-screen').style.display = 'block';
            
            const scoreText = document.getElementById('final-score-text');
            scoreText.innerText = `คุณทำคะแนนได้ ${score} / ${missions.length} คะแนน`;