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

Back

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

Title

Description

Keyword

Detail (HTML Code)

.wr-wrapper * {
            box-sizing: border-box;
        }

/* =========================================
           2. HEADER & UI ELEMENTS
           ========================================= */
        .wr-header {
            display: none;
            background: linear-gradient(135deg, #1976D2 0%, #0D47A1 100%);
            color: #FFF;
            padding: 15px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 5px solid #FFC107;
        }

.wr-header-hidden {
            display: none !important;
        }

.wr-header-info {
            display: flex;
            flex-direction: column;
        }

.wr-game-title {
            font-size: 14px;
            color: #BBDEFB;
            font-weight: 600;
        }

.wr-player-name {
            font-size: 20px;
            font-weight: 800;
            color: #FFC107;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }

.wr-status {
            text-align: right;
        }

.wr-station-badge {
            background-color: #4CAF50;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 800;
            margin-bottom: 5px;
            display: inline-block;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

.wr-lives {
            font-size: 20px;
            letter-spacing: 2px;
        }

/* =========================================
           3. SCREENS & LAYOUT
           ========================================= */
        .wr-screen {
            display: none;
            padding: 40px 30px;
            min-height: 500px;
            animation: wrFadeIn 0.5s ease;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

.wr-screen.active {
            display: flex;
        }

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

.wr-title-main {
            font-size: 32px;
            color: #1976D2;
            font-weight: 800;
            text-align: center;
            margin-bottom: 10px;
        }

.wr-subtitle {
            font-size: 18px;
            color: #4CAF50;
            font-weight: 600;
            text-align: center;
            margin-bottom: 30px;
        }

/* Content Boxes */
        .wr-content-box {
            background: #FFF;
            border: 2px solid #E0E0E0;
            border-left: 6px solid #1976D2;
            padding: 25px;
            border-radius: 12px;
            width: 100%;
            max-width: 650px;
            margin-bottom: 25px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }

.wr-content-box.nature-theme {
            border-left: 6px solid #4CAF50;
            background: #F1F8E9;
        }

.wr-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

.wr-list li {
            margin-bottom: 15px;
            font-size: 16px;
            line-height: 1.5;
            display: flex;
            align-items: flex-start;
        }

.wr-list li span.wr-icon {
            margin-right: 15px;
            font-size: 20px;
        }

/* =========================================
           4. 3D BUTTONS & MICRO-INTERACTIONS
           ========================================= */
        .wr-btn {
            display: inline-block;
            padding: 15px 35px;
            font-size: 18px;
            font-weight: 800;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.1s ease;
            font-family: 'Prompt', sans-serif;
            text-align: center;
            outline: none;
        }

.wr-btn-primary {
            background-color: #1976D2;
            color: #FFF;
            box-shadow: 0 6px 0 #0D47A1, 0 10px 15px rgba(25, 118, 210, 0.3);
        }
        .wr-btn-primary:active {
            transform: translateY(6px);
            box-shadow: 0 0 0 #0D47A1, 0 4px 5px rgba(25, 118, 210, 0.2);
        }

.wr-btn-success {
            background-color: #4CAF50;
            color: #FFF;
            box-shadow: 0 6px 0 #2E7D32, 0 10px 15px rgba(76, 175, 80, 0.3);
        }
        .wr-btn-success:active {
            transform: translateY(6px);
            box-shadow: 0 0 0 #2E7D32, 0 4px 5px rgba(76, 175, 80, 0.2);
        }

.wr-btn-warning {
            background-color: #FFC107;
            color: #000;
            box-shadow: 0 6px 0 #F57F17, 0 10px 15px rgba(255, 193, 7, 0.3);
        }
        .wr-btn-warning:active {
            transform: translateY(6px);
            box-shadow: 0 0 0 #F57F17, 0 4px 5px rgba(255, 193, 7, 0.2);
        }

/* Quiz Buttons */
        .wr-quiz-grid {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 100%;
            max-width: 650px;
        }

.wr-btn-quiz {
            background-color: #FFF;
            color: #333;
            border: 2px solid #BBDEFB;
            padding: 15px 20px;
            font-size: 16px;
            font-weight: 600;
            text-align: left;
            border-radius: 12px;
            cursor: pointer;
            box-shadow: 0 4px 0 #90CAF9;
            transition: all 0.1s ease;
            font-family: 'Prompt', sans-serif;
            display: flex;
            align-items: center;
        }

.wr-btn-quiz:hover {
            background-color: #E3F2FD;
            border-color: #64B5F6;
        }

.wr-btn-quiz:active {
            transform: translateY(4px);
            box-shadow: 0 0 0 #90CAF9;
        }

/* =========================================
           5. SWEETALERT CUSTOMIZATION
           ========================================= */
        .wr-swal-popup {
            font-family: 'Prompt', sans-serif !important;
            border-radius: 16px !important;
            border: 3px solid #1976D2 !important;
        }
        .wr-swal-title { color: #1976D2 !important; font-weight: 800 !important; }
        .wr-swal-confirm { 
            background-color: #FFC107 !important; 
            color: #000 !important; 
            font-weight: 800 !important;
            border-radius: 8px !important;
            box-shadow: 0 4px 0 #F57F17 !important;
        }
        .wr-swal-confirm:active { transform: translateY(4px) !important; box-shadow: none !important; }
    </style>

<div class="wr-header wr-header-hidden" id="wr-header">
        <div class="wr-header-info">
            <span class="wr-game-title">Cyber Safe Walk Rally</span>
            <span class="wr-player-name" id="wr-ui-name">Player</span>
        </div>
        <div class="wr-status">
            <div class="wr-station-badge" id="wr-ui-station">ฐานที่ 1</div>
            <div class="wr-lives" id="wr-ui-lives">❤️❤️❤️</div>
        </div>
    </div>

<div id="wr-screen-welcome" class="wr-screen active">
        <div style="font-size: 80px; margin-bottom: 10px;">🗺️🛡️</div>
        <h1 class="wr-title-main">Cyber Safe<br>Walk Rally</h1>
        <h2 class="wr-subtitle" style="color: #1976D2;">ภารกิจท่องเน็ตปลอดภัย & ถนอมสายตา</h2>
        
        <div class="wr-content-box" style="text-align: center;">
            <p>ยินดีต้อนรับนักผจญภัยไซเบอร์!<br>คุณพร้อมที่จะออกเดินทางไปรวบรวมความรู้เพื่อเป็น <strong>"พลเมืองดิจิทัลที่สมบูรณ์แบบ"</strong> หรือยัง?</p>
            <p style="color: #F44336; font-size: 14px; margin-top: 10px;">*คุณมีหัวใจ 3 ดวง หากตอบคำถามพลาด หัวใจจะลดลงนะ*</p>
        </div>
        
        <button class="wr-btn wr-btn-primary" id="wr-btn-start">เริ่มการผจญภัย 🚀</button>
    </div>

<div id="wr-screen-station1" class="wr-screen">
        <h1 class="wr-title-main" style="color: #1976D2;">ฐานที่ 1: ปราการข้อมูลส่วนตัว</h1>
        <h2 class="wr-subtitle">4 กฎทอง ท่องเน็ตปลอดภัย</h2>
        
        <div class="wr-content-box">
            <ul class="wr-list">
                <li><span class="wr-icon">🛑</span> <div><strong>ไม่ส่งต่อข้อมูลมั่วๆ</strong><br>อย่ารีบแชร์ข้อความน่าตกใจถ้ายังไม่ได้ตรวจสอบความจริง</div></li>
                <li><span class="wr-icon">🤐</span> <div><strong>เก็บข้อมูลส่วนตัวให้มิดชิด</strong><br>ห้ามโพสต์ชื่อ เบอร์โทร หรือเลขบัตรประชาชนลงเน็ตเด็ดขาด</div></li>
                <li><span class="wr-icon">📶</span> <div><strong>ระวัง Wi-Fi สาธารณะ</strong><br>หลีกเลี่ยงการใช้ Wi-Fi ฟรีล็อกอินระบบสำคัญ เพราะแฮกเกอร์อาจดักข้อมูลได้</div></li>
                <li><span class="wr-icon">🙋‍♂️</span> <div><strong>ปรึกษาผู้ใหญ่เสมอ</strong><br>ถ้ามีคนแปลกหน้าขู่ หรือเจอสิ่งผิดปกติ ให้รีบบอกคุณพ่อคุณแม่ทันที</div></li>
            </ul>
        </div>
        
        <button class="wr-btn wr-btn-primary" id="wr-btn-s1-next">ไปฐานถัดไป ➡️</button>
    </div>

<div id="wr-screen-station2" class="wr-screen">
        <h1 class="wr-title-main" style="color: #4CAF50;">ฐานที่ 2: วิหารแห่งดวงตา</h1>
        <h2 class="wr-subtitle">5 ทริค ถนอมสายตาคู่สวย</h2>
        
        <div class="wr-content-box nature-theme">
            <ul class="wr-list">
                <li><span class="wr-icon">🖥️</span> <div>ไม่ควรมองหน้าจอใกล้เกินไป ควรห่างประมาณ <strong>1 ช่วงแขน</strong></div></li>
                <li><span class="wr-icon">☀️</span> <div>ปรับความสว่างจอให้ <strong>พอดีกับดวงตา</strong> ไม่สว่างจ้าจนแสบตา</div></li>
                <li><span class="wr-icon">🌙</span> <div><strong>ห้ามปิดไฟเล่นมือถือ</strong> หรือมองหน้าจอในที่มืดสนิทเด็ดขาด</div></li>
                <li><span class="wr-icon">⏳</span> <div>ใช้จอนานๆ ควร <strong>พักสายตา</strong> โดยการมองต้นไม้สีเขียวที่อยู่ไกลๆ</div></li>
                <li><span class="wr-icon">🔠</span> <div>ปรับ <strong>ขนาดตัวอักษร</strong> ให้ใหญ่พอดี อ่านง่าย ไม่ต้องเพ่ง</div></li>
            </ul>
        </div>
        
        <button class="wr-btn wr-btn-success" id="wr-btn-s2-next">ไปด่านทดสอบ ⚔️</button>
    </div>

<div id="wr-screen-station3" class="wr-screen">
        <h1 class="wr-title-main" style="color: #F57F17;">ฐานที่ 3: ด่านทดสอบพลเมืองดิจิทัล</h1>
        <h2 class="wr-subtitle" style="color: #333;" id="wr-s3-question">คำถามข้อที่...</h2>
        
        <div class="wr-quiz-grid" id="wr-s3-options">
            </div>
    </div>

<div id="wr-screen-station4" class="wr-screen">
        <h1 class="wr-title-main" style="color: #F57F17;">ฐานที่ 4: ลานประลองสายตา</h1>
        <h2 class="wr-subtitle" style="color: #333;" id="wr-s4-question">คำถามข้อที่...</h2>
        
        <div class="wr-quiz-grid" id="wr-s4-options">
            </div>
    </div>

<div id="wr-screen-victory" class="wr-screen">
        <div style="font-size: 80px; margin-bottom: 10px;">🏆✨</div>
        <h1 class="wr-title-main" style="color: #FFC107; font-size: 40px;">ภารกิจสำเร็จ!</h1>
        <h2 class="wr-subtitle" style="color: #1976D2;">ขอแสดงความยินดีกับ <span id="wr-vic-name" style="color:#F44336;"></span></h2>
        
        <div class="wr-content-box" style="text-align: center;">
            <p style="font-size: 18px;">คุณได้รับประกาศนียบัตร: <strong>"พลเมืองดิจิทัลคุณภาพ"</strong><br>ที่สามารถท่องเน็ตได้อย่างปลอดภัยและรู้จักถนอมสายตาอย่างถูกวิธี!</p>
            <div style="font-size: 24px; margin-top: 15px; font-weight: bold; color: #4CAF50;">
                พลังชีวิตที่เหลือ: <span id="wr-vic-lives"></span>
            </div>
        </div>
        
        <button class="wr-btn wr-btn-warning" id="wr-btn-restart-win">เริ่มผจญภัยใหม่ 🔄</button>
    </div>

<div id="wr-screen-gameover" class="wr-screen">
        <div style="font-size: 80px; margin-bottom: 10px;">💔💀</div>
        <h1 class="wr-title-main" style="color: #F44336; font-size: 40px;">เกมโอเวอร์</h1>
        <h2 class="wr-subtitle" style="color: #333;">พลังชีวิตของคุณหมดแล้ว</h2>
        
        <div class="wr-content-box" style="text-align: center; border-left-color: #F44336;">
            <p style="font-size: 16px;">อย่าเพิ่งยอมแพ้นะ! ความปลอดภัยทางไซเบอร์คือสิ่งที่ฝึกฝนกันได้<br>กลับไปทบทวนกฎและวิธีการใหม่ แล้วกลับมาท้าทายอีกครั้ง!</p>
        </div>
        
        <button class="wr-btn wr-btn-primary" id="wr-btn-restart-fail">พยายามอีกครั้ง 🔄</button>
    </div>

</div>

// ข้อมูลคำถามจากบทเรียน
    const wr_quizData = {
        station3: [
            {
                q: "ข้อที่ 1: พฤติกรรมใด ถือเป็นการใช้เทคโนโลยีสารสนเทศที่ 'ไม่ปลอดภัย'?",
                options: [
                    { t: "ก. กดออกจากระบบ (Log out) ทุกครั้งหลังใช้งานเสร็จ", isCorrect: false },
                    { t: "ข. ติดตั้งโปรแกรมสแกนไวรัสไว้ในคอมพิวเตอร์", isCorrect: false },
                    { t: "ค. บอกชื่อจริงและโรงเรียนให้เพื่อนใหม่ในเกมออนไลน์ทราบ", isCorrect: true, exp: "การบอกข้อมูลส่วนตัวให้คนแปลกหน้า อาจทำให้มิจฉาชีพนำข้อมูลไปใช้ในทางที่ผิดได้" },
                    { t: "ง. ปรึกษาคุณแม่เมื่อมีข้อความข่มขู่ส่งมาในมือถือ", isCorrect: false }
                ]
            },
            {
                q: "ข้อที่ 2: ทำไมเราจึง 'ไม่ควร' ใช้ Wi-Fi สาธารณะ (ฟรี) ในการล็อกอินเข้าสู่ระบบที่สำคัญ?",
                options: [
                    { t: "ก. เพราะอาจถูกแฮกเกอร์แอบดักขโมยข้อมูลหรือรหัสผ่านได้ง่าย", isCorrect: true, exp: "Wi-Fi สาธารณะมักไม่มีระบบรักษาความปลอดภัยที่แน่นหนา แฮกเกอร์อาจแอบดักจับข้อมูลได้" },
                    { t: "ข. เพราะจะทำให้คอมพิวเตอร์ของเราพังและเปิดไม่ติดอีกเลย", isCorrect: false },
                    { t: "ค. เพราะเราจะต้องเสียค่าบริการอินเทอร์เน็ตแพงกว่าปกติ", isCorrect: false },
                    { t: "ง. เพราะจะทำให้หน้าจอโทรศัพท์มือถือสว่างจ้าจนแสบตา", isCorrect: false }
                ]
            }
        ],
        station4: [
            {
                q: "ข้อที่ 3: วิธีการใดต่อไปนี้ เป็นการ 'ถนอมสายตา' ที่ถูกต้องที่สุดเมื่อต้องใช้งานคอมพิวเตอร์?",
                options: [
                    { t: "ก. ปิดไฟในห้องให้มืดสนิท เพื่อให้เห็นแสงจากหน้าจอชัดเจน", isCorrect: false },
                    { t: "ข. ขยับหน้าเข้าไปใกล้ๆ จอภาพให้มากที่สุดเพื่อไม่ให้เพ่งตา", isCorrect: false },
                    { t: "ค. ปรับขนาดตัวอักษรให้เล็กที่สุด เพื่ออ่านเนื้อหาได้เยอะๆ", isCorrect: false },
                    { t: "ง. ปรับแสงหน้าจอให้พอดี และหมั่นพักสายตามองไปที่ไกลๆ", isCorrect: true, exp: "การปรับแสงให้พอดี และพักสายตามองไกลๆ ช่วยให้กล้ามเนื้อตาได้ผ่อนคลาย" }
                ]
            }
        ]
    };

/* =========================================
       2. WEB AUDIO API SYNTHESIZER
       ========================================= */
    function wr_initAudio() {
        if (!wr_audioCtx) {
            wr_audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (wr_audioCtx.state === 'suspended') {
            wr_audioCtx.resume();
        }
    }

/* =========================================
       3. CORE GAME LOGIC & NAVIGATION
       ========================================= */
    document.addEventListener("DOMContentLoaded", () => {
        // ผูก Event Listeners ให้กับปุ่มทั้งหมดเพื่อเลี่ยง Inline JS
        document.getElementById("wr-btn-start").addEventListener("click", wr_handleStartClick);
        document.getElementById("wr-btn-s1-next").addEventListener("click", () => wr_goToStation(2));
        document.getElementById("wr-btn-s2-next").addEventListener("click", () => wr_goToStation(3));
        document.getElementById("wr-btn-restart-win").addEventListener("click", wr_resetGame);
        document.getElementById("wr-btn-restart-fail").addEventListener("click", wr_resetGame);
    });

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

function wr_updateHeader() {
        document.getElementById("wr-ui-name").innerText = wr_playerName;
        document.getElementById("wr-ui-station").innerText = "ฐานที่ " + wr_currentStation;
        let hearts = "";
        for(let i=0; i<3; i++) { hearts += (i < wr_lives) ? "❤️" : "🖤"; }
        document.getElementById("wr-ui-lives").innerText = hearts;
    }

function wr_startGame() {
        wr_lives = 3;
        wr_currentStation = 1;
        wr_s3_qIndex = 0;
        
        document.getElementById("wr-header").classList.remove("wr-header-hidden");
        wr_updateHeader();
        wr_showScreen("wr-screen-station1");
    }

function wr_resetGame() {
        wr_playSound('click');
        document.getElementById("wr-header").classList.add("wr-header-hidden");
        wr_showScreen("wr-screen-welcome");
    }

/* =========================================
       4. QUIZ LOGIC & RENDERING
       ========================================= */
    function wr_renderQuiz(quizObj, titleId, optionsContainerId, callbackFn) {
        document.getElementById(titleId).innerText = quizObj.q;
        const container = document.getElementById(optionsContainerId);
        container.innerHTML = ""; // Clear old buttons

// Shuffle options
        let options = [...quizObj.options].sort(() => Math.random() - 0.5);

options.forEach(opt => {
            const btn = document.createElement("button");
            btn.className = "wr-btn-quiz";
            btn.innerText = opt.t;
            btn.addEventListener("click", () => {
                wr_playSound('click');
                callbackFn(opt, quizObj);
            });
            container.appendChild(btn);
        });
    }

function wr_handleWrongAnswer() {
        wr_playSound('wrong');
        wr_lives--;
        wr_updateHeader();

Swal.fire({
            title: 'ผิดพลาด!',
            text: 'คำตอบนี้ยังไม่ใช่นะครับ เสียพลังชีวิต 1 ดวง',
            icon: 'error',
            confirmButtonText: 'พยายามใหม่',
            customClass: { popup: 'wr-swal-popup', confirmButton: 'wr-swal-confirm' }
        }).then(() => {
            if (wr_lives <= 0) {
                document.getElementById("wr-header").classList.add("wr-header-hidden");
                wr_showScreen("wr-screen-gameover");
            }
        });
    }

</script>