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

Back

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

Title

Description

Keyword

Detail (HTML Code)

/* Options Grid */
        .hack-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .hack-btn {
            background: #111;
            border: 2px solid #004400;
            color: #00ff00;
            padding: 15px;
            border-radius: 6px;
            cursor: pointer;
            transition: 0.2s;
            font-family: 'Prompt', sans-serif;
            font-size: 16px;
            font-weight: 500;
            text-align: center;
        }
        .hack-btn:hover { background: #003300; border-color: #00ff00; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,255,0,0.2); }
        .hack-btn:active { transform: translateY(2px); box-shadow: none; }

.btn-action {
            background: #00ff00; color: #000; font-weight: bold; border: none; padding: 12px 30px; font-size: 18px; border-radius: 4px; cursor: pointer; text-transform: uppercase; font-family: 'Courier New', Courier, monospace; transition: 0.2s; margin-top: 15px;
        }
        .btn-action:hover { background: #33ff33; box-shadow: 0 0 15px #00ff00; }

/* Overlays */
        .hack-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.95); z-index: 10;
            display: none; flex-direction: column; align-items: center; justify-content: center;
            padding: 20px; text-align: center; border: 2px solid;
        }
        .overlay-icon { font-size: 60px; margin-bottom: 15px; }
        .overlay-title { font-size: 26px; font-weight: bold; margin-bottom: 10px; font-family: 'Courier New';}
        .overlay-msg { font-size: 16px; color: #ccc; max-width: 90%; line-height: 1.6; margin-bottom: 25px; font-family: 'Sarabun';}

.screen { display: none; }
        .screen.active { display: block; animation: hackFadeIn 0.3s ease; }
        @keyframes hackFadeIn { from {opacity: 0; filter: blur(5px);} to {opacity: 1; filter: blur(0);} }

/* Progress Bar */
        .hack-progress-bg { width: 100%; height: 6px; background: #222; margin-top: 10px; }
        .hack-progress-bar { height: 100%; background: #00ff00; width: 0%; transition: 0.3s; box-shadow: 0 0 10px #00ff00;}
    </style>

<div class="wsst-hack-wrapper">
    <div class="hack-container">
        
        <div class="hack-header">
            <h2>> CYBER_PATTERN_CRACKER.exe</h2>
            <span class="blink-text">● SYSTEM ARMED</span>
        </div>
        <div class="hack-progress-bg"><div class="hack-progress-bar" id="progress-bar"></div></div>

<div id="screen-start" class="hack-body screen active">
            <span style="font-size: 70px;">🕵️‍♂️</span>
            <h3 style="color: #00ff00; font-size: 24px; margin-top: 15px;">INITIALIZING MISSION...</h3>
            <div class="terminal-box" style="text-align: center;">
                <p>ยินดีต้อนรับ Agent! ระบบถูกเข้ารหัสรักษาความปลอดภัยไว้ 3 ชั้น</p>
                <p>คุณต้องใช้ทักษะ <b>"Pattern Recognition" (การหารูปแบบ)</b><br>สังเกตความเหมือน หาจุดเชื่อมโยง และเลือกคำตอบที่ถูกต้องเพื่อปลดล็อก Firewall</p>
            </div>
            <button class="btn-action" onclick="startHack()">[ INITIATE HACK ]</button>
        </div>

<div id="screen-game" class="hack-body screen">
            <div style="text-align: left; color: #666; margin-bottom: 10px; font-weight: bold;">SECURITY LEVEL: <span id="level-indicator" style="color: #fff;">1/3</span></div>
            
            <div class="terminal-box">
                <div class="terminal-title" id="target-title">>> FIREWALL_NODE_1</div>
                <div id="target-desc" style="font-family: 'Sarabun';">วิเคราะห์ข้อมูล (Log) ด้านล่าง และหารูปแบบที่ซ่อนอยู่...</div>
                
                <div class="pattern-display" id="pattern-display">
                    </div>
            </div>

<div style="text-align: left; margin-bottom: 10px; color: #00ff00;">> SELECT_OVERRIDE_KEY:</div>
            <div class="hack-options" id="options-container">
                </div>
        </div>

<div id="screen-end" class="hack-body screen">
            <span style="font-size: 80px;">🔓</span>
            <h3 style="color: #00ff00; font-size: 28px; margin-top: 15px;">ACCESS GRANTED!</h3>
            <div class="terminal-box" style="text-align: center;">
                <p style="color: #fff; font-size: 18px;">ภารกิจเสร็จสิ้น! คุณถอดรหัสระบบได้สำเร็จ</p>
                <p style="font-family: 'Sarabun'; color: #aaa;">ทักษะการหารูปแบบ (Pattern Recognition) ช่วยให้เราคาดเดาสิ่งที่จะเกิดขึ้น และนำวิธีแก้ปัญหาเดิมไปใช้ซ้ำได้โดยไม่ต้องเหนื่อยคิดใหม่ทั้งหมด!</p>
            </div>
            <button class="btn-action" onclick="resetHack()">[ REBOOT SYSTEM ]</button>
        </div>

<div class="hack-overlay" id="feedback-overlay">
            <div class="overlay-icon" id="fb-icon">✔️</div>
            <div class="overlay-title" id="fb-title">FIREWALL BYPASSED</div>
            <div class="overlay-msg" id="fb-msg">คำอธิบาย...</div>
            <button class="btn-action" id="fb-btn" onclick="nextHackLevel()">[ CONTINUE ]</button>
        </div>

</div>
</div>

let currentHackLvl = 0;

function switchScreen(screenId) {
        document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
        document.getElementById(screenId).classList.add('active');
    }

function updateProgress() {
        const progress = (currentHackLvl / hackLevels.length) * 100;
        document.getElementById('progress-bar').style.width = progress + '%';
    }

function startHack() {
        currentHackLvl = 0;
        updateProgress();
        switchScreen('screen-game');
        loadHackLevel();
    }

function loadHackLevel() {
        const lvl = hackLevels[currentHackLvl];
        
        document.getElementById('level-indicator').innerText = `${currentHackLvl + 1}/${hackLevels.length}`;
        document.getElementById('target-title').innerText = lvl.title;
        document.getElementById('target-desc').innerHTML = lvl.desc;
        document.getElementById('pattern-display').innerHTML = lvl.pattern;

const container = document.getElementById('options-container');
        container.innerHTML = '';
        
        // เอาตัวเลือกมาสลับตำแหน่ง
        const shuffledOptions = [...lvl.options].sort(() => Math.random() - 0.5);

shuffledOptions.forEach((opt) => {
            const btn = document.createElement('button');
            btn.className = 'hack-btn';
            btn.innerText = opt.text;
            btn.onclick = () => checkHackAnswer(opt.isCorrect, lvl.explanation);
            container.appendChild(btn);
        });
    }

function checkHackAnswer(isCorrect, explanation) {
        const overlay = document.getElementById('feedback-overlay');
        const titleEl = document.getElementById('fb-title');
        const msgEl = document.getElementById('fb-msg');
        const btnEl = document.getElementById('fb-btn');
        const iconEl = document.getElementById('fb-icon');

if (isCorrect) {
            overlay.style.borderColor = "#00ff00";
            overlay.style.boxShadow = "inset 0 0 50px rgba(0,255,0,0.2)";
            iconEl.innerText = "✔️";
            iconEl.style.color = "#00ff00";
            titleEl.innerText = "FIREWALL BYPASSED!";
            titleEl.style.color = "#00ff00";
            msgEl.innerText = explanation;
            btnEl.innerText = "[ CONTINUE ]";
            btnEl.style.background = "#00ff00";
            btnEl.style.color = "#000";
            
            btnEl.onclick = () => {
                overlay.style.display = 'none';
                currentHackLvl++;
                updateProgress();
                if (currentHackLvl < hackLevels.length) {
                    loadHackLevel();
                } else {
                    switchScreen('screen-end');
                }
            };
        } else {
            overlay.style.borderColor = "#ff003c";
            overlay.style.boxShadow = "inset 0 0 50px rgba(255,0,60,0.2)";
            iconEl.innerText = "❌";
            iconEl.style.color = "#ff003c";
            titleEl.innerText = "ACCESS DENIED!";
            titleEl.style.color = "#ff003c";
            msgEl.innerText = "รูปแบบผิดพลาด! ระบบรักษาความปลอดภัยตรวจพบการบุกรุก ลองวิเคราะห์ความเชื่อมโยงดูใหม่อีกครั้ง!";
            btnEl.innerText = "[ RETRY ]";
            btnEl.style.background = "#ff003c";
            btnEl.style.color = "#fff";
            
            btnEl.onclick = () => { overlay.style.display = 'none'; };
        }
        
        overlay.style.display = 'flex';
    }

function resetHack() {
        startHack();
    }
</script>