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

Back

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

Title

Description

Keyword

Detail (HTML Code)

/* Connection Lines */
        .net-line-container { position: absolute; top: 50%; left: 100px; right: 100px; height: 6px; transform: translateY(-35px); z-index: 1; display: flex; justify-content: center; }
        .net-line { height: 100%; width: 0%; background: #10b981; transition: width 0.8s ease-in-out; box-shadow: 0 0 10px #10b981; }
        .net-line.connected { width: 100%; }

/* Mission & Tools */
        .net-mission-box { background: #1e293b; border-left: 5px solid #f59e0b; padding: 15px 20px; border-radius: 6px; margin-bottom: 25px; text-align: left; }
        .net-mission-title { font-size: 14px; color: #f59e0b; font-weight: bold; text-transform: uppercase; margin-bottom: 5px; }
        .net-mission-desc { font-size: 18px; color: #fff; font-weight: 500; margin: 0; line-height: 1.5; font-family: 'Prompt'; }

.net-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 20px; }
        .net-tool-btn { background: #1e3a8a; border: 2px solid #3b82f6; border-radius: 10px; padding: 15px; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; }
        .net-tool-btn:hover { background: #2563eb; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(59,130,246,0.4); }
        .net-tool-btn:active { transform: translateY(0); }
        .tool-icon { font-size: 35px; }
        .tool-name { font-size: 15px; font-weight: bold; font-family: 'Prompt'; }

/* General Controls */
        .wsst-net-btn { background: linear-gradient(180deg, #34d399 0%, #10b981 100%); color: #064e3b; border: none; padding: 12px 35px; font-size: 18px; font-weight: bold; border-radius: 30px; cursor: pointer; font-family: 'Prompt', sans-serif; box-shadow: 0 5px 0 #047857; transition: 0.1s; margin-top: 10px; }
        .wsst-net-btn:active { transform: translateY(5px); box-shadow: 0 0 0 #047857; }
        
        /* Overlays */
        .net-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11, 25, 44, 0.95); z-index: 10; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 25px; text-align: center; }
        .net-fb-icon { font-size: 70px; margin-bottom: 15px; }
        .net-fb-title { font-size: 26px; font-weight: bold; font-family: 'Prompt', sans-serif; margin-bottom: 10px; }
        .net-fb-msg { font-size: 16px; color: #bfdbfe; max-width: 85%; line-height: 1.6; margin-bottom: 25px; }
        
        .screen { display: none; }
        .screen.active { display: block; animation: netFade 0.4s ease; }
        @keyframes netFade { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
        .net-progress { color: #f59e0b; font-weight: bold; margin-bottom: 15px; font-family: 'Prompt'; font-size: 14px; letter-spacing: 1px;}
    </style>

<div class="wsst-net-wrapper">
    <div class="net-container">
        
        <div class="net-header">
            <h2>🌐 NETWORK CITY BUILDER</h2>
            <p>ภารกิจสร้างเมืองเครือข่าย เชื่อมต่อระบบสู่โลกกว้าง!</p>
        </div>

<div id="net-start" class="net-body screen active">
            <span style="font-size: 90px;">👷‍♂️</span>
            <h3 style="color: #60a5fa; font-family: 'Prompt', sans-serif; font-size: 24px; margin-top: 15px;">ยินดีต้อนรับวิศวกรระบบ!</h3>
            <p style="font-size: 16px; color: #94a3b8; max-width: 550px; margin: 0 auto 30px; line-height: 1.8;">
                เมืองเครือข่ายของเรากำลังรอการเชื่อมต่อจากคุณ!<br>
                คุณจะต้องเลือกใช้อุปกรณ์ทั้ง <b>"มีสาย"</b> และ <b>"ไร้สาย"</b> ให้เหมาะสม<br>
                พร้อมทั้งไขความลับการเดินทางของข้อมูลบนโลกอินเทอร์เน็ต<br>
                เตรียมเครื่องมือให้พร้อม แล้วเริ่มวางระบบกันเลย!
            </p>
            <button class="wsst-net-btn" onclick="startNetGame()">เริ่มวางระบบ 🚀</button>
        </div>

<div id="net-game" class="net-body screen">
            <div class="net-progress" id="net-level-text">ภารกิจที่ 1: ห้องเรียนคอมพิวเตอร์</div>
            
            <div class="net-map-area">
                <div class="net-node active" id="node-start">
                    <div class="net-node-icon" id="icon-start">🖥️</div>
                    <div class="net-node-name" id="name-start">PC ต้นทาง</div>
                </div>
                
                <div class="net-line-container"><div class="net-line" id="net-line"></div></div>
                
                <div class="net-node target" id="node-end">
                    <div class="net-node-icon" id="icon-end">🌐</div>
                    <div class="net-node-name" id="name-end">เครือข่ายปลายทาง</div>
                </div>
            </div>

<div class="net-mission-box">
                <div class="net-mission-title" id="mission-step">ขั้นตอนที่ 1/3</div>
                <div class="net-mission-desc" id="mission-desc">คำถามภารกิจจะปรากฏที่นี่...</div>
            </div>
            
            <div class="net-tools-grid" id="net-tools-container">
                </div>
        </div>

<div id="net-end" class="net-body screen">
            <span style="font-size: 90px;">🌍</span>
            <h3 style="color: #34d399; font-family: 'Prompt', sans-serif; font-size: 28px; margin-top: 20px;">CITY CONNECTED!</h3>
            <p style="font-size: 16px; color: #94a3b8; max-width: 550px; margin: 0 auto 30px; line-height: 1.8;">
                ยอดเยี่ยมมาก! คุณเชื่อมต่อเมืองนี้เข้ากับโลกอินเทอร์เน็ตได้สำเร็จ<br>
                ตอนนี้คุณรู้แล้วว่า คอมพิวเตอร์คุยกันได้ต้องอาศัยเครือข่าย<br>
                เบราว์เซอร์พาเราไปหาเซิร์ฟเวอร์โดยใช้ URL และ IP Address<br>
                คุณคือสุดยอดวิศวกรเครือข่ายตัวจริง!
            </p>
            <button class="wsst-net-btn" onclick="resetNetGame()">เล่นภารกิจอีกครั้ง 🔄</button>
        </div>

<div class="net-overlay" id="net-feedback">
            <div class="net-fb-icon" id="net-fb-icon">✅</div>
            <div class="net-fb-title" id="net-fb-title">SUCCESS</div>
            <div class="net-fb-msg" id="net-fb-msg">...</div>
            <button class="wsst-net-btn" id="net-fb-btn" style="padding: 10px 30px; font-size: 16px;">ขั้นตอนต่อไป ⏭️</button>
        </div>

</div>
</div>

let currentLevel = 0;
    let currentStep = 0;

function loadNetLevel() {
        currentStep = 0;
        const level = netMissions[currentLevel];
        
        document.getElementById('net-level-text').innerText = level.levelName;
        document.getElementById('icon-start').innerText = level.nodeStart.icon;
        document.getElementById('name-start').innerText = level.nodeStart.name;
        document.getElementById('icon-end').innerText = level.nodeEnd.icon;
        document.getElementById('name-end').innerText = level.nodeEnd.name;
        
        // Reset Line & Node State
        document.getElementById('net-line').classList.remove('connected');
        document.getElementById('node-end').classList.remove('active');
        document.getElementById('node-end').classList.add('target');

loadNetStep();
    }

function loadNetStep() {
        const level = netMissions[currentLevel];
        const step = level.steps[currentStep];

document.getElementById('mission-step').innerText = "ขั้นตอนที่ " + (currentStep + 1) + "/" + level.steps.length;
        document.getElementById('mission-desc').innerText = step.q;

const container = document.getElementById('net-tools-container');
        container.innerHTML = '';

const shuffledOptions = shuffleArray(step.options);
        shuffledOptions.forEach(function(opt) {
            const btn = document.createElement('button');
            btn.className = 'net-tool-btn';
            btn.innerHTML = '<span class="tool-icon">' + opt.icon + '</span><span class="tool-name">' + opt.text + '</span>';
            btn.onclick = function() { checkNetAnswer(opt.isCorrect, level.steps[currentStep].exp); };
            container.appendChild(btn);
        });
    }

function resetNetGame() {
        startNetGame();
    }
</script>