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

Back

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

Title

Description

Keyword

Detail (HTML Code)

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

/* =========================================
           2. SCREENS & ANIMATIONS
           ========================================= */
        .nw-screen {
            display: none;
            padding: 40px 30px;
            min-height: 600px;
            animation: nwFadeIn 0.5s ease;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

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

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

/* =========================================
           3. TYPOGRAPHY
           ========================================= */
        .nw-title {
            font-size: 36px;
            color: #01579B;
            font-weight: 800;
            margin-bottom: 10px;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.nw-subtitle {
            font-size: 20px;
            color: #03A9F4;
            font-weight: 600;
            margin-bottom: 30px;
            text-align: center;
        }

/* =========================================
           4. 3D BUTTONS & MICRO-INTERACTIONS
           ========================================= */
        .nw-btn {
            display: inline-block;
            padding: 16px 40px;
            font-size: 20px;
            font-weight: 800;
            color: #FFF;
            background-color: #03A9F4;
            border: none;
            border-radius: 16px;
            cursor: pointer;
            box-shadow: 0 8px 0 #0277BD, 0 15px 20px rgba(3, 169, 244, 0.3);
            transition: all 0.1s ease;
            font-family: 'Prompt', sans-serif;
            margin-top: 20px;
            text-align: center;
            outline: none;
        }

.nw-btn:active {
            transform: translateY(8px);
            box-shadow: 0 0 0 #0277BD, 0 4px 5px rgba(3, 169, 244, 0.2);
        }

/* =========================================
           5. GAME INTERFACE (HEADER, WORK ORDER, GRID)
           ========================================= */
        .nw-header {
            width: 100%;
            background: linear-gradient(135deg, #01579B 0%, #0288D1 100%);
            color: #FFF;
            padding: 15px 25px;
            border-radius: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            box-shadow: 0 6px 15px rgba(1, 87, 155, 0.3);
        }

.nw-player-info {
            font-size: 18px;
            font-weight: 800;
            color: #E1F5FE;
        }

.nw-status-container {
            text-align: right;
        }

.nw-score {
            font-size: 16px;
            color: #B3E5FC;
            margin-bottom: 5px;
        }

.nw-lives {
            font-size: 22px;
            letter-spacing: 2px;
        }

/* Work Order Box */
        .nw-work-order {
            background-color: #FFF;
            border: 3px solid #E1F5FE;
            border-left: 8px solid #03A9F4;
            padding: 30px;
            border-radius: 16px;
            font-size: 20px;
            font-weight: 600;
            color: #01579B;
            width: 100%;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            margin-bottom: 30px;
            text-align: center;
            position: relative;
        }

.nw-work-order::before {
            content: "📝 ใบสั่งงาน (Work Order)";
            position: absolute;
            top: -15px;
            left: 20px;
            background: #03A9F4;
            color: #FFF;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 800;
        }

/* Options Grid */
        .nw-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 15px;
            width: 100%;
        }

.nw-btn-option {
            background-color: #FFF;
            color: #01579B;
            border: 2px solid #81D4FA;
            padding: 15px;
            font-size: 16px;
            font-weight: 800;
            text-align: center;
            border-radius: 12px;
            cursor: pointer;
            box-shadow: 0 6px 0 #4FC3F7;
            transition: all 0.1s ease;
            font-family: 'Prompt', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 70px;
        }

.nw-btn-option:hover {
            background-color: #E1F5FE;
        }

.nw-btn-option:active {
            transform: translateY(6px);
            box-shadow: 0 0 0 #4FC3F7;
        }

/* =========================================
           6. SWEETALERT CUSTOMIZATION
           ========================================= */
        .nw-swal-popup {
            font-family: 'Prompt', sans-serif !important;
            border-radius: 24px !important;
            border: 4px solid #03A9F4 !important;
        }
        .nw-swal-title { color: #01579B !important; font-weight: 800 !important; }
        .nw-swal-confirm { 
            background-color: #03A9F4 !important; 
            border-radius: 12px !important; 
            font-weight: 800 !important;
            box-shadow: 0 4px 0 #0288D1 !important;
        }
        .nw-swal-confirm:active { transform: translateY(4px) !important; box-shadow: none !important; }
        .nw-swal-input {
            border-radius: 12px !important;
            text-align: center !important;
        }
    </style>

<div class="nw-wrapper" id="nw-game-container">
    
    <div id="nw-screen-start" class="nw-screen nw-active">
        <div style="font-size: 80px; margin-bottom: 10px;">🌐🌉</div>
        <h1 class="nw-title">Network Architect</h1>
        <h2 class="nw-subtitle">ภารกิจเชื่อมโยงโลกข้อมูล</h2>
        
        <div style="background: #FFF; padding: 25px; border-radius: 16px; border: 2px dashed #03A9F4; max-width: 500px; text-align: left; box-shadow: 0 5px 15px rgba(0,0,0,0.05);">
            <strong style="color: #01579B; font-size: 18px;">💡 กติกาการเล่น:</strong>
            <ul style="margin-top: 10px; color: #333; font-size: 16px; line-height: 1.6; padding-left: 20px;">
                <li>รับบทเป็น <strong>สถาปนิกโครงข่าย</strong> อ่านความต้องการจาก "ใบสั่งงาน"</li>
                <li>คลิกเลือก <strong>"สื่อกลางการสื่อสาร"</strong> ที่เหมาะสมที่สุดจากตัวเลือกด้านล่าง</li>
                <li>มีภารกิจทั้งหมด 10 ข้อ ไม่มีจับเวลา แต่มี <strong>หัวใจ 3 ดวง</strong> ❤️</li>
                <li>ตอบผิดหักหัวใจ 1 ดวง ถ้าหัวใจหมดจะถือว่า Game Over ทันที!</li>
            </ul>
        </div>
        
        <button class="nw-btn" id="nw-btn-start">เริ่มรับงานเลย! 🚀</button>
    </div>

<div id="nw-screen-game" class="nw-screen">
        <div class="nw-header">
            <div class="nw-player-info">
                <div style="font-size: 14px; color: #B3E5FC;">สถาปนิกโครงข่าย:</div>
                <div id="nw-ui-name">ผู้เล่น</div>
            </div>
            <div class="nw-status-container">
                <div class="nw-score">ภารกิจสำเร็จ: <strong id="nw-ui-score" style="color:#FFF;">0</strong>/10</div>
                <div class="nw-lives" id="nw-ui-lives">❤️❤️❤️</div>
            </div>
        </div>

<div class="nw-work-order" id="nw-work-order-text">
            กำลังโหลดใบสั่งงาน...
        </div>

<div id="nw-screen-result" class="nw-screen">
        <div id="nw-res-icon" style="font-size: 90px; margin-bottom: 10px;">🏆✨</div>
        <h1 class="nw-title" id="nw-res-title" style="font-size: 40px;">ภารกิจสำเร็จ!</h1>
        <h2 class="nw-subtitle" id="nw-res-desc" style="color: #01579B; font-size: 20px;">ยอดเยี่ยมมาก!</h2>
        
        <div style="background: #FFF; padding: 20px; border-radius: 16px; border: 2px solid #81D4FA; margin-bottom: 25px;">
            <p style="font-size: 18px; color: #333; margin: 0; font-weight: 600;">คะแนนที่ได้: <span id="nw-res-score" style="color: #03A9F4; font-size: 24px;">0</span> / 10</p>
        </div>
        
        <button class="nw-btn" id="nw-btn-restart">รับใบสั่งงานใหม่ 🔄</button>
    </div>

</div>

const nw_questionsData = [
        { q: "เชื่อมต่อคอมพิวเตอร์ในห้องเรียนคอมฯ ให้เล่นเน็ตได้ (งบจำกัด)", a: "สายคู่บิดเกลียว (UTP)", exp: "UTP หรือสายแลนธรรมดา ราคาถูกและเพียงพอสำหรับห้องเรียนครับ" },
        { q: "เดินสายเชื่อมต่อเครือข่ายระหว่างตึก 2 ตึกที่อยู่ห่างกัน 30 กิโลเมตร", a: "ไมโครเวฟ", exp: "ไมโครเวฟเหมาะกับการส่งข้อมูลระยะไกลข้ามตึกแบบเส้นตรงครับ" },
        { q: "ส่งสัญญาณเปลี่ยนช่องทีวีจากรีโมตคอนโทรล", a: "อินฟราเรด", exp: "รีโมตทีวีใช้แสงอินฟราเรดระยะสั้น ต้องไม่มีอะไรมาบังครับ" },
        { q: "ธนาคารต้องการเดินสายข้อมูลที่ต้องการ 'ความปลอดภัยสูงสุด และเร็วที่สุด'", a: "สายไฟเบอร์ออปติก", exp: "ไฟเบอร์ออปติกใช้แสงส่งข้อมูล ทำให้เร็วที่สุดและไม่ถูกดักจับสัญญาณไฟฟ้าครับ" },
        { q: "รถยนต์ต้องการระบบนำทาง GPS แจ้งพิกัดรถบนถนน", a: "ดาวเทียม", exp: "ระบบ GPS ต้องรับพิกัดจากดาวเทียมที่ลอยอยู่บนอวกาศครับ" },
        { q: "ให้บริการอินเทอร์เน็ตไร้สายสำหรับลูกค้าในร้านกาแฟ", a: "คลื่นวิทยุ", exp: "Wi-Fi ทำงานโดยใช้คลื่นวิทยุ กระจายสัญญาณทะลุกำแพงได้ครับ" },
        { q: "เดินสายแลนในโรงงานอุตสาหกรรมที่มีคลื่นแม่เหล็กไฟฟ้ารบกวนสูง", a: "สายคู่บิดเกลียว (STP)", exp: "STP มีฟอยล์หุ้ม ป้องกันคลื่นรบกวนจากเครื่องจักรได้ดีกว่า UTP ครับ" },
        { q: "ถ่ายทอดสดการแข่งขันกีฬาโอลิมปิกจากต่างประเทศมายังประเทศไทย", a: "ดาวเทียม", exp: "การถ่ายทอดสดข้ามทวีปนิยมใช้ดาวเทียมส่งสัญญาณครับ" },
        { q: "เดินสายสัญญาณเคเบิลทีวีเข้าสู่บ้านเรือนรุ่นเก่า", a: "สายโคแอกเชียล", exp: "สายโคแอกเชียลมีตาข่ายโลหะหุ้ม นิยมใช้ทำสายเคเบิลทีวีดั้งเดิมครับ" },
        { q: "เชื่อมต่อหูฟังไร้สายเข้ากับสมาร์ตโฟน (Bluetooth)", a: "คลื่นวิทยุ", exp: "เทคโนโลยี Bluetooth ทำงานโดยใช้คลื่นวิทยุระยะสั้นครับ" }
    ];

let nw_playerName = "";
    let nw_lives = 3;
    let nw_score = 0;
    let nw_currentQIndex = 0;
    let nw_gameList = [];
    let nw_audioCtx = null;

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

/* =========================================
       3. CORE GAME LOGIC & INITIALIZATION
       ========================================= */
    document.addEventListener('DOMContentLoaded', () => {
        // Register Event Listeners
        document.getElementById('nw-btn-start').addEventListener('click', nw_handleStartClick);
        document.getElementById('nw-btn-restart').addEventListener('click', () => {
            nw_playSound('click');
            nw_showScreen('nw-screen-start');
        });
        
        // Build Options Grid
        const grid = document.getElementById('nw-options-grid');
        nw_mediumOptions.forEach(opt => {
            const btn = document.createElement('div');
            btn.className = 'nw-btn-option';
            btn.innerText = opt;
            btn.addEventListener('click', () => nw_handleOptionClick(opt));
            grid.appendChild(btn);
        });
    });

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

function nw_shuffle(array) {
        return array.sort(() => Math.random() - 0.5);
    }

function nw_startGame() {
        nw_lives = 3;
        nw_score = 0;
        nw_currentQIndex = 0;
        nw_gameList = nw_shuffle([...nw_questionsData]);

document.getElementById('nw-ui-name').innerText = nw_playerName;
        nw_updateUI();
        nw_showScreen('nw-screen-game');
    }

function nw_updateUI() {
        document.getElementById('nw-ui-score').innerText = nw_score;
        let hearts = "";
        for(let i=0; i<3; i++) { hearts += (i < nw_lives) ? "❤️" : "🖤"; }
        document.getElementById('nw-ui-lives').innerText = hearts;

if (nw_currentQIndex < nw_gameList.length) {
            document.getElementById('nw-work-order-text').innerText = nw_gameList[nw_currentQIndex].q;
        }
    }

function nw_handleOptionClick(selectedMedium) {
        if (nw_currentQIndex >= nw_gameList.length || nw_lives <= 0) return;

const currentQ = nw_gameList[nw_currentQIndex];
        const isCorrect = (selectedMedium === currentQ.a);

if (isCorrect) {
            nw_playSound('correct');
            nw_score++;
            Swal.fire({
                title: 'วิเคราะห์ได้เฉียบขาด!',
                text: currentQ.exp,
                icon: 'success',
                timer: 2000,
                showConfirmButton: false,
                customClass: { popup: 'nw-swal-popup', title: 'nw-swal-title' }
            }).then(() => {
                nw_currentQIndex++;
                nw_checkGameProgress();
            });
        } else {
            nw_playSound('wrong');
            nw_lives--;
            nw_updateUI(); // Update hearts immediately
            Swal.fire({
                title: 'อ๊ะ! สื่อกลางนี้ยังไม่เหมาะนะ',
                text: 'เสียหัวใจ 1 ดวง ลองวิเคราะห์ใบสั่งงานใหม่อีกครั้งครับ',
                icon: 'error',
                confirmButtonText: 'พยายามใหม่',
                customClass: { popup: 'nw-swal-popup', title: 'nw-swal-title', confirmButton: 'nw-swal-confirm' }
            }).then(() => {
                if (nw_lives <= 0) {
                    nw_endGame(false);
                }
            });
        }
    }

function nw_checkGameProgress() {
        if (nw_currentQIndex >= nw_gameList.length) {
            nw_endGame(true);
        } else {
            nw_updateUI();
        }
    }

function nw_endGame(isWin) {
        document.getElementById('nw-res-score').innerText = nw_score;
        const resTitle = document.getElementById('nw-res-title');
        const resDesc = document.getElementById('nw-res-desc');
        const resIcon = document.getElementById('nw-res-icon');

if (isWin) {
            nw_playSound('win');
            resIcon.innerText = "🏆✨";
            resTitle.innerText = "ภารกิจสำเร็จ!";
            resTitle.style.color = "#01579B";
            resDesc.innerText = `สุดยอดสถาปนิกโครงข่าย คุณ ${nw_playerName}`;
            resDesc.style.color = "#03A9F4";
        } else {
            nw_playSound('lose');
            resIcon.innerText = "💔🔌";
            resTitle.innerText = "Game Over!";
            resTitle.style.color = "#D32F2F";
            resDesc.innerText = `โธ่! หัวใจหมดซะแล้ว คุณ ${nw_playerName}`;
            resDesc.style.color = "#FF5252";
        }

nw_showScreen('nw-screen-result');
    }

</script>