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

Back

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

Title

Description

Keyword

Detail (HTML Code)

/* Factory Bins */
        .fac-bins-grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 600px; margin: 0 auto 25px; }
        @media (min-width: 500px) { .fac-bins-grid { grid-template-columns: 1fr 1fr; } }
        
        .fac-bin-btn { background: #2f344f; border: 2px solid #414868; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 10px; }
        .fac-bin-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
        .bin-data:hover { border-color: #7aa2f7; background: #242b45; }
        .bin-info:hover { border-color: #e0af68; background: #363336; }
        .bin-icon { font-size: 45px; display: block; }
        .bin-name { font-size: 18px; font-weight: bold; font-family: 'Prompt', sans-serif; }
        .bin-data .bin-name { color: #7aa2f7; }
        .bin-info .bin-name { color: #e0af68; }
        .bin-desc { font-size: 13px; color: #9ab1d6; }

/* General Controls */
        .wsst-fac-btn { background: linear-gradient(180deg, #ff9e64 0%, #ff7a29 100%); color: #fff; border: none; padding: 12px 40px; font-size: 18px; font-weight: bold; border-radius: 30px; cursor: pointer; font-family: 'Prompt', sans-serif; box-shadow: 0 4px 0 #db6927; transition: 0.1s; }
        .wsst-fac-btn:active { transform: translateY(4px); box-shadow: none; }
        
        /* Overlays */
        .fac-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 28, 35, 0.96); z-index: 10; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 25px; text-align: center; }
        .fac-fb-icon { font-size: 70px; margin-bottom: 15px; }
        .fac-fb-title { font-size: 26px; font-weight: bold; font-family: 'Prompt', sans-serif; margin-bottom: 10px; }
        .fac-fb-msg { font-size: 16px; color: #a9b1d6; max-width: 85%; line-height: 1.6; margin-bottom: 25px; }
        
        .screen { display: none; }
        .screen.active { display: block; animation: facFade 0.4s ease; }
        @keyframes facFade { from { opacity: 0; } to { opacity: 1; } }
        .fac-progress { color: #ff9e64; font-weight: bold; margin-bottom: 15px; font-family: 'Prompt'; font-size: 14px; }
    </style>

<div class="wsst-fac-wrapper">
    <div class="fac-container">
        
        <div class="fac-header">
            <h2>🏭 DATA PROCESSING FACTORY</h2>
            <p>ควบคุมสายพานอัจฉริยะ แยกแยะข้อมูลลงถังให้ถูกต้อง!</p>
        </div>

<div id="fac-start" class="fac-body screen active">
            <span style="font-size: 90px;">⚙️</span>
            <h3 style="color: #ff9e64; font-family: 'Prompt', sans-serif; font-size: 24px; margin-top: 15px;">START CONVEYOR BELT...</h3>
            <p style="font-size: 16px; color: #a9b1d6; max-width: 550px; margin: 0 auto 30px; line-height: 1.8;">
                ยินดีต้อนรับผู้ควบคุมระบบ! สายพานคัดแยกกำลังจะเริ่มเดินเครื่อง<br>
                จะมีกล่องข้อความไหลมาที่สถานีตรวจสอบทีละกล่อง<br>
                วิเคราะห์ให้ไว! แล้วกดส่งลงถัง <b>ข้อมูลดิบ (Data)</b> หรือ <b>สารสนเทศ (Information)</b> ให้ถูกต้อง!
            </p>
            <button class="wsst-fac-btn" onclick="startFacGame()">เดินเครื่องสายพาน 🚀</button>
        </div>

<div id="fac-game" class="fac-body screen">
            <div class="fac-progress" id="fac-level-text">กล่องที่ 1/6</div>
            
            <div class="conveyor-station">
                <div style="font-size: 13px; color: #ff9e64; font-weight: bold; margin-bottom: 10px; letter-spacing: 1px;">[ STATION_INSPECTION ]</div>
                <div class="conveyor-item" id="fac-item-text">กำลังโหลดวัตถุ...</div>
                <div class="conveyor-belt-line"></div>
            </div>

<div style="font-size: 15px; margin-bottom: 15px; color: #bb9af7; font-weight: bold;">⚠️ เลือกถังคัดแยกที่ถูกต้อง:</div>
            
            <div class="fac-bins-grid">
                <button class="fac-bin-btn bin-data" onclick="sortItem('data')">
                    <span class="bin-icon">📁</span>
                    <span class="bin-name">ข้อมูลดิบ (Data)</span>
                    <span class="bin-desc">ข้อเท็จจริงดิบๆ ยังไม่ผ่านการประมวลผล</span>
                </button>
                <button class="fac-bin-btn bin-info" onclick="sortItem('information')">
                    <span class="bin-icon">💡</span>
                    <span class="bin-name">สารสนเทศ (Information)</span>
                    <span class="bin-desc">ผ่านการสรุปหรือคำนวณ พร้อมใช้งาน</span>
                </button>
            </div>
        </div>

<div id="fac-end" class="fac-body screen">
            <span style="font-size: 90px;">👑</span>
            <h3 style="color: #7abc6d; font-family: 'Prompt', sans-serif; font-size: 28px; margin-top: 20px;">FACTORY OPTIMIZED!</h3>
            <p style="font-size: 16px; color: #a9b1d6; max-width: 550px; margin: 0 auto 30px; line-height: 1.8;">
                เยี่ยมยอด! คุณคัดแยกวัตถุทั้งหมดบนสายพานได้อย่างไม่มีข้อผิดพลาด<br>
                ตอนนี้คุณแยกออกแล้วว่า สิ่งไหนคือ <b>ข้อเท็จจริงดิบ (Data)</b> และสิ่งไหนคือ <b>ผลลัพธ์พร้อมใช้ (Information)</b> ซึ่งเป็นพื้นฐานสำคัญของระบบฐานข้อมูลคอมพิวเตอร์ครับ!
            </p>
            <button class="wsst-fac-btn" onclick="resetFacGame()">เดินสายพานอีกครั้ง 🔄</button>
        </div>

<div class="fac-overlay" id="fac-feedback">
            <div class="fac-fb-icon" id="fac-fb-icon">✅</div>
            <div class="fac-fb-title" id="fac-fb-title">CORRECT</div>
            <div class="fac-fb-msg" id="fac-fb-msg">...</div>
            <button class="wsst-fac-btn" id="fac-fb-btn" style="padding: 10px 30px; font-size: 16px;">กล่องต่อไป ⏭️</button>
        </div>

</div>
</div>

let currentFacIdx = 0;
    let shuffledFacItems = [];

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

function startFacGame() {
        currentFacIdx = 0;
        // สุ่มลำดับกล่องที่ไหลมาตามสายพานเพื่อความไม่ซ้ำซาก
        shuffledFacItems = [...facItems].sort(function(){return Math.random()-0.5;});
        switchFacScreen('fac-game');
        loadFacItem();
    }

function loadFacItem() {
        const item = shuffledFacItems[currentFacIdx];
        document.getElementById('fac-level-text').innerText = "กล่องที่ " + (currentFacIdx + 1) + "/" + shuffledFacItems.length;
        
        // เอฟเฟกต์รีเซ็ตแอนิเมชันของไอเทมบนสายพาน
        const itemEl = document.getElementById('fac-item-text');
        itemEl.style.animation = 'none';
        itemEl.offsetHeight; /* trigger reflow */
        itemEl.style.animation = null;
        
        itemEl.innerText = '“ ' + item.text + ' ”';
    }

function resetFacGame() {
        startFacGame();
    }
</script>