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

Back

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

Title

Description

Keyword

Detail (HTML Code)

/* Mission Display */
        .mission-box {
            background: #1a3d39;
            border-left: 5px solid #4CAF50;
            padding: 20px;
            margin-bottom: 25px;
            text-align: left;
            box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
        }
        .mission-label { color: #4CAF50; font-weight: bold; font-size: 14px; text-transform: uppercase; margin-bottom: 5px; display: block; }
        .mission-title { font-size: 20px; font-weight: bold; color: #fff; font-family: 'Prompt', sans-serif; margin: 0; }
        .mission-desc { font-size: 15px; color: #b2dfdb; margin-top: 5px; }

/* Data Grid */
        .data-grid-title { font-size: 16px; margin-bottom: 15px; color: #80cbc4; font-weight: bold; text-align: left; }
        .data-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px;
            margin-bottom: 30px;
        }
        
        .data-node {
            background: #0d2522;
            border: 2px solid #26a69a;
            border-radius: 8px;
            padding: 15px 10px;
            cursor: pointer;
            transition: 0.2s;
            display: flex;
            align-items: center;
            gap: 10px;
            user-select: none;
        }
        .data-node:hover { background: #1a4d48; border-color: #4db6ac; transform: translateY(-2px); }
        .data-node.selected {
            background: #004d40;
            border-color: #4CAF50;
            box-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
        }
        .node-icon { font-size: 24px; }
        .node-text { font-size: 14px; font-weight: 500; color: #e0f2f1; text-align: left; }

/* Custom Button */
        .wsst-abs-btn {
            background: #4CAF50;
            color: #fff;
            border: none;
            padding: 12px 40px;
            font-size: 18px;
            font-weight: bold;
            border-radius: 4px;
            cursor: pointer;
            font-family: 'Prompt', sans-serif;
            box-shadow: 0 4px 0 #2E7D32;
            transition: 0.1s;
            text-transform: uppercase;
        }
        .wsst-abs-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #2E7D32; }

/* Overlays */
        .abs-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(10, 31, 29, 0.98); z-index: 10;
            display: none; flex-direction: column; align-items: center; justify-content: center;
            padding: 30px; text-align: center;
        }
        .overlay-icon { font-size: 80px; margin-bottom: 20px; }
        .overlay-title { font-size: 28px; font-weight: bold; font-family: 'Prompt', sans-serif; margin-bottom: 15px; color: #4CAF50;}
        .overlay-msg { font-size: 17px; color: #b2dfdb; max-width: 80%; line-height: 1.7; margin-bottom: 30px;}

.screen { display: none; }
        .screen.active { display: block; animation: absFade 0.4s ease; }
        @keyframes absFade { from {opacity: 0; transform: scale(0.95);} to {opacity: 1; transform: scale(1);} }

.progress-line { width: 100%; height: 4px; background: #0d2522; margin-bottom: 20px; }
        .progress-bar { height: 100%; background: #4CAF50; width: 0%; transition: 0.4s; box-shadow: 0 0 10px #4CAF50;}
    </style>

<div class="wsst-abs-wrapper">
    <div class="abs-container">
        <div class="abs-header">
            <h2>DATA PURGE: ABSTRACTION MISSION</h2>
            <p>คัดกรองสิ่งสำคัญ เพื่อประสิทธิภาพสูงสุดของระบบ</p>
        </div>
        <div class="progress-line"><div class="progress-bar" id="wsst-progress"></div></div>

<div id="abs-start" class="abs-body screen active">
            <span style="font-size: 100px;">🖥️</span>
            <h3 style="color: #4CAF50; font-family: 'Prompt', sans-serif; font-size: 26px; margin-top: 20px;">ACCESSING SYSTEM...</h3>
            <p style="font-size: 16px; color: #b2dfdb; max-width: 600px; margin: 0 auto 30px; line-height: 1.8;">
                ยินดีต้อนรับวิศวกรข้อมูล! ระบบกำลังจะถูกออกแบบใหม่<br>
                คุณต้องใช้ทักษะ <b>Abstraction</b> เลือกเฉพาะข้อมูลที่ <b>"จำเป็นต่อเป้าหมาย"</b> เท่านั้น<br>
                ข้อมูลขยะ (Redundant Data) จะทำให้ระบบล่ม อย่าเลือกมาเด็ดขาด!
            </p>
            <button class="wsst-abs-btn" onclick="startAbsGame()">Initialize Mission</button>
        </div>

<div id="abs-game" class="abs-body screen">
            <div class="mission-box">
                <span class="mission-label">System Objective:</span>
                <p class="mission-title" id="wsst-target-title">เป้าหมาย...</p>
                <p class="mission-desc" id="wsst-target-desc">รายละเอียด...</p>
            </div>

<div class="data-grid-title">> SELECT_REQUIRED_DATA_NODES:</div>
            <div class="data-grid" id="wsst-node-container">
                </div>

<button class="wsst-abs-btn" onclick="checkAbsAnswer()">Deploy System</button>
        </div>

<div id="abs-end" class="abs-body screen">
            <span style="font-size: 100px;">🏆</span>
            <h3 style="color: #4CAF50; font-family: 'Prompt', sans-serif; font-size: 30px; margin-top: 20px;">SYSTEM OPTIMIZED!</h3>
            <p style="font-size: 18px; color: #b2dfdb; max-width: 600px; margin: 0 auto 30px; line-height: 1.8;">
                ยอดเยี่ยมมาก! คุณผ่านการทดสอบหลักการคิดเชิงนามธรรมแล้ว<br>
                โปรแกรมเมอร์ที่เก่ง ไม่ใช่คนที่ใส่ข้อมูลทุกอย่างลงไป<br>
                แต่คือคนที่เลือกใส่เฉพาะ "สิ่งที่จำเป็น" ได้อย่างแม่นยำที่สุด!
            </p>
            <button class="wsst-abs-btn" onclick="resetAbsGame()">Re-Run Mission</button>
        </div>

<div class="abs-overlay" id="abs-feedback">
            <div class="overlay-icon" id="abs-fb-icon">🛰️</div>
            <div class="overlay-title" id="abs-fb-title">RESULT</div>
            <div class="overlay-msg" id="abs-fb-msg">...</div>
            <button class="wsst-abs-btn" id="abs-fb-btn">Proceed</button>
        </div>

</div>
</div>

let currentAbsIdx = 0;
    let selectedNodes = [];

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

function startAbsGame() {
        currentAbsIdx = 0;
        switchAbsScreen('abs-game');
        loadAbsMission();
    }

function loadAbsMission() {
        selectedNodes = [];
        const m = absMissions[currentAbsIdx];
        
        // Progress bar
        document.getElementById('wsst-progress').style.width = (currentAbsIdx / absMissions.length * 100) + '%';
        
        document.getElementById('wsst-target-title').innerText = m.target;
        document.getElementById('wsst-target-desc').innerText = m.desc;

const container = document.getElementById('wsst-node-container');
        container.innerHTML = '';
        
        // Shuffle nodes
        const shuffledNodes = [...m.nodes].sort(() => Math.random() - 0.5);

shuffledNodes.forEach((node) => {
            const div = document.createElement('div');
            div.className = 'data-node';
            div.innerHTML = `<span class="node-icon">${node.icon}</span><span class="node-text">${node.text}</span>`;
            
            div.onclick = () => {
                div.classList.toggle('selected');
                const val = node.text;
                if (selectedNodes.includes(val)) {
                    selectedNodes = selectedNodes.filter(n => n !== val);
                } else {
                    selectedNodes.push(val);
                }
            };
            container.appendChild(div);
        });
    }

function checkAbsAnswer() {
        const m = absMissions[currentAbsIdx];
        const essentialCount = m.nodes.filter(n => n.essential).length;
        const correctSelected = m.nodes.filter(n => n.essential && selectedNodes.includes(n.text)).length;
        const wrongSelected = m.nodes.filter(n => !n.essential && selectedNodes.includes(n.text)).length;

if (selectedNodes.length === 0) {
            showAbsFeedback("SYSTEM IDLE", "กรุณาเลือกข้อมูลเพื่อเริ่มการออกแบบระบบ...", "⚠️", "#FFA000", "OK", false);
            return;
        }

if (correctSelected === essentialCount && wrongSelected === 0) {
            showAbsFeedback("DEPLOY SUCCESS!", m.explanation, "🚀", "#4CAF50", "Next Level", true);
        } else if (wrongSelected > 0) {
            showAbsFeedback("DATA OVERLOAD", "คุณเลือก 'ข้อมูลขยะ' เข้ามาในระบบมากเกินไป ทำให้การประมวลผลช้าลง ลองตัดสิ่งที่ไม่จำเป็นออกดูนะ!", "❌", "#F44336", "Try Again", false);
        } else {
            showAbsFeedback("INCOMPLETE DATA", "ข้อมูลสำคัญยังไม่ครบถ้วน! ระบบไม่สามารถระบุแนวทางที่ถูกต้องได้ ลองหาแก่นสำคัญเพิ่มดูครับ", "🔍", "#2196F3", "Search More", false);
        }
    }

function resetAbsGame() {
        startAbsGame();
    }
</script>