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

Back

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

Title

Description

Keyword

Detail (HTML Code)

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

/* บังคับสีตัวอักษรให้เป็นสีขาวเสมอเพื่อป้องกันการดึงสีจากระบบเว็บหลัก */
        .lesson-package-p5-unit3 .header-bar-xyz h2 {
            margin: 0;
            font-size: 24px;
            letter-spacing: 1px;
            color: #ffffff !important; 
        }

.lesson-package-p5-unit3 .header-bar-xyz p {
            margin: 5px 0 0; 
            color: #ffffff !important;
            opacity: 0.9;
        }

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

.lesson-package-p5-unit3 .progress-container-xyz {
            background: #eee;
            height: 10px;
            width: 100%;
        }

.lesson-package-p5-unit3 .progress-bar-xyz {
            background: #8B0F0F;
            height: 100%;
            width: 0%;
            transition: width 0.5s ease;
        }

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

.lesson-package-p5-unit3 .btn-answer-xyz:hover {
            border-color: #8B0F0F;
            background: #FFF5F5;
        }

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

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

.lesson-package-p5-unit3 .score-badge-xyz {
            display: inline-block;
            background: #8B0F0F;
            color: white !important;
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }

.lesson-package-p5-unit3 .feedback-xyz {
            padding: 15px;
            border-radius: 10px;
            margin-top: 15px;
            display: none;
            font-weight: bold;
        }

.lesson-package-p5-unit3 .human-touch-text {
            color: #555;
            font-size: 16px;
            font-style: italic;
        }
    </style>

<div class="game-card-xyz">
        <div class="header-bar-xyz">
            <h2 id="title-display">🔍 ยอดนักสืบดิจิทัล: ภารกิจพิชิตเซิร์ชเอนจิน</h2>
            <p>ระดับชั้นประถมศึกษาปีที่ 5</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;">ฮัลโหลเหล่านักสืบ ป.5 ทุกคน! 🕵️‍♂️</h1>
                <p style="font-size: 18px; color: #333;">ห้องสมุดอินเทอร์เน็ตมันกว้างใหญ่มาก... <br>มาฝึกวิชาหาข้อมูลให้เป๊ะและน่าเชื่อถือกันเถอะ!<br>มีทั้งหมด 10 ภารกิจลับรอพวกเธออยู่ พร้อมหรือยัง?</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>/10</div>
                <h3 id="question-text" style="font-size: 20px; color: #333; margin-top: 5px;"></h3>
                <div id="answer-options"></div>
                <div id="feedback-area" class="feedback-xyz"></div>
                <div style="text-align: right; margin-top: 20px;">
                    <button id="next-btn" class="btn-start-xyz" style="display: none; font-size: 16px; padding: 10px 25px;" onclick="nextMission()">ต่อไป >></button>
                </div>
            </div>

<div id="result-screen" style="display: none;">
                <h1 style="color: #8B0F0F; margin-top: 0;">จบภารกิจแล้ว! 🏆</h1>
                <p id="final-score-text" style="font-size: 24px; font-weight: bold; color: #333;"></p>
                <p id="evaluation-text" style="font-size: 18px; color: #555;"></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.color = '#2E7D32';
                feedback.innerHTML = "✅ " + opt.msg;
            } else {
                feedback.style.backgroundColor = '#FFEBEE';
                feedback.style.color = '#B71C1C';
                feedback.innerHTML = "❌ " + 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';
            document.getElementById('title-display').innerText = "สรุปผลคะแนนภารกิจ";
            
            const scoreText = document.getElementById('final-score-text');
            scoreText.innerText = `คุณทำคะแนนได้ ${score} / ${missions.length}`;

<div style="text-align: center; margin-top: 15px;" class="human-touch-text">
        ปล. อย่าลืมนะครับว่า 'ข้อมูลที่ดีต้องมาจากแหล่งที่น่าเชื่อถือ' สู้ๆ ครับเด็กๆ!
    </div>
</div>