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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div class="ipo-wrapper" id="ipo-game-container">
    
    
    
    
    <div id="ipo-screen-start" class="ipo-screen ipo-active">
        <div style="font-size: 80px; margin-bottom: 10px; animation: ipoFloat 2s ease-in-out infinite;">🥪🏭</div>
        <h1 class="ipo-title">ภารกิจไขรหัส I-P-O</h1>
        <p class="ipo-subtitle">โรงงานแซนด์วิชหรรษา</p>
        
        <div class="ipo-rules-box">
            <h3 style="color: #FFCDD2; margin-top: 0; font-size: 18px; text-shadow: 0 1px 2px rgba(0,0,0,0.3);">📋 คู่มือพนักงานใหม่</h3>
            <ul style="margin: 0; font-size: 15px; color: #FFFFFF; line-height: 1.6; text-align: left; padding-left: 20px;">
                <li>ลาก <strong>"สิ่งของ"</strong> จากคลังสินค้า ไปวางในสายพานให้ถูกต้อง</li>
                <li><strong>INPUT (รับเข้า):</strong> วัตถุดิบที่ต้องใช้มีอะไรบ้าง?</li>
                <li><strong>PROCESS (ประมวลผล):</strong> ใครและเครื่องมือใดที่ใช้ทำ?</li>
                <li><strong>OUTPUT (ส่งออก):</strong> ผลลัพธ์สุดท้ายคืออะไร?</li>
            </ul>
        </div>
        
        <button class="ipo-btn ipo-btn-primary" onclick="ipo_promptName()">เริ่มการผลิต 🚀</button>
    </div>

<div id="ipo-screen-game" class="ipo-screen" style="padding: 20px;">
        <div class="ipo-hud">
            <div class="ipo-hud-item">
                <span class="ipo-hud-label">ผู้จัดการโรงงาน</span><br>
                <strong id="ipo-ui-name" style="color: #E63946; font-size: 16px;">-</strong>
            </div>
            <div class="ipo-hud-item" style="text-align: right;">
                <span class="ipo-hud-label">สถานะ</span><br>
                <strong style="color: #2E7D32; font-size: 16px;">กำลังคัดแยก...</strong>
            </div>
        </div>

<div class="ipo-zones-container">
            
            <div class="ipo-zone" data-type="input">
                <div class="ipo-zone-header" style="background: #2E7D32;">
                    INPUT<br><small style="font-weight: normal; font-size: 13px;">(รับเข้า / วัตถุดิบ)</small>
                </div>
                <div class="ipo-zone-content" id="zone-input"></div>
            </div>
            
            
            <div class="ipo-zone" data-type="process">
                <div class="ipo-zone-header" style="background: #1565C0;">
                    PROCESS<br><small style="font-weight: normal; font-size: 13px;">(ประมวลผล / วิธีทำ)</small>
                </div>
                <div class="ipo-zone-content" id="zone-process"></div>
            </div>
            
            
            <div class="ipo-zone" data-type="output">
                <div class="ipo-zone-header" style="background: #E65100;">
                    OUTPUT<br><small style="font-weight: normal; font-size: 13px;">(ส่งออก / ผลลัพธ์)</small>
                </div>
                <div class="ipo-zone-content" id="zone-output"></div>
            </div>
        </div>

<div class="ipo-bank-panel">
            <div style="font-size: 14px; color: #780016; font-weight: bold; margin-bottom: 10px;">📦 คลังสินค้า (ลากไอเทมไปวางในสายพานด้านบน)</div>
            <div class="ipo-bank-container" id="ipo-inventory">
                
            </div>
        </div>

<div style="text-align: center; margin-top: 20px;">
            <button class="ipo-btn ipo-btn-success" onclick="ipo_checkAnswer()">✔️ ตรวจสอบสายพานการผลิต</button>
        </div>
    </div>

<div id="ipo-screen-result" class="ipo-screen">
        <div style="font-size: 80px; margin-bottom: 10px; animation: ipoPop 1s infinite alternate;">🥪🌟</div>
        <h1 class="ipo-title" style="color: #2E7D32;">ยอดเยี่ยมมาก!</h1>
        <p class="ipo-subtitle" style="color: #4CAF50;">คุณเข้าใจระบบการทำงานของคอมพิวเตอร์แล้ว</p>
        
        <div class="ipo-rules-box" style="text-align: center; border-color: #4CAF50; background: #E8F5E9; max-width: 600px;">
            <h3 style="color: #2E7D32; margin-top: 0;">สรุปการทำงาน (I-P-O)</h3>
            <p style="color: #333; font-size: 15px; line-height: 1.6; margin-bottom: 0;">
                คอมพิวเตอร์ทำงานเหมือนโรงงานแซนด์วิช!<br>
                รับข้อมูลดิบเข้ามา <strong>(Input)</strong> ➔ นำไปคิดคำนวณและประมวลผล <strong>(Process)</strong> ➔ จนได้ผลลัพธ์ที่ต้องการออกมา <strong>(Output)</strong>
            </p>
        </div>
        
        <button class="ipo-btn ipo-btn-primary" onclick="ipo_restartGame()">เล่นอีกครั้ง 🔄</button>
    </div>

</div>

.ipo-screen { display: none; padding: 40px 30px; animation: ipoFadeIn 0.3s ease-out forwards; min-height: 600px; flex-direction: column; justify-content: center; align-items: center; }
    .ipo-screen.ipo-active { display: flex; }
    #ipo-screen-game { display: none; flex-direction: column; justify-content: flex-start; align-items: stretch; }
    #ipo-screen-game.ipo-active { display: flex; }

@keyframes ipoFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes ipoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    @keyframes ipoPop { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

.ipo-title { font-size: 36px; color: #780016; margin: 0 0 5px 0; font-weight: 800; text-align: center; }
    .ipo-subtitle { font-size: 18px; color: #E63946; font-weight: 600; margin: 0 0 25px 0; text-align: center; }

.ipo-rules-box {
        background: #780016; border: 3px solid #E63946; padding: 25px; border-radius: 15px; 
        margin: 0 auto 30px auto; max-width: 500px; box-shadow: 0 8px 15px rgba(230, 57, 70, 0.3);
    }

.ipo-btn {
        display: inline-block; padding: 15px 35px; font-size: 18px; font-weight: 800;
        border: none; border-radius: 12px; cursor: pointer; transition: all 0.1s;
        font-family: 'Prompt', sans-serif; text-align: center;
    }
    .ipo-btn-primary { background: #780016; color: #FFFFFF; box-shadow: 0 6px 0 #4A000D; }
    .ipo-btn-primary:active { transform: translateY(6px); box-shadow: 0 0px 0 #4A000D; }
    
    .ipo-btn-success { background: #E63946; color: #FFFFFF; box-shadow: 0 6px 0 #B31222; width: 100%; max-width: 350px; }
    .ipo-btn-success:active { transform: translateY(6px); box-shadow: 0 0px 0 #B31222; }

.ipo-hud {
        display: flex; justify-content: space-between; align-items: center; background: #FFFFFF; 
        padding: 10px 20px; border-radius: 12px; margin-bottom: 20px; border: 2px solid #780016; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    .ipo-hud-item { flex: 1; text-align: left; line-height: 1.2; }
    .ipo-hud-label { font-size: 12px; color: #78909C; font-weight: bold; }

/* Zones Layout */
    .ipo-zones-container { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; }
    @media (min-width: 750px) { .ipo-zones-container { flex-direction: row; } }

.ipo-zone {
        flex: 1; background: #FFF; border-radius: 12px; overflow: hidden;
        border: 2px solid #CCC; box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        display: flex; flex-direction: column;
    }
    .ipo-zone[data-type="input"] { border-color: #4CAF50; }
    .ipo-zone[data-type="process"] { border-color: #2196F3; }
    .ipo-zone[data-type="output"] { border-color: #FF9800; }

.ipo-zone-header { color: #FFF; padding: 10px; font-weight: bold; font-size: 18px; text-align: center; }
    .ipo-zone-content { 
        padding: 15px; min-height: 180px; display: flex; flex-direction: column; gap: 10px;
        align-items: center; transition: all 0.2s; flex: 1;
    }
    .ipo-zone-content.ipo-drag-over { background: #F5F5F5; transform: scale(1.02); }
    
    .ipo-zone[data-type="input"] .ipo-zone-content { background: #E8F5E9; }
    .ipo-zone[data-type="process"] .ipo-zone-content { background: #E3F2FD; }
    .ipo-zone[data-type="output"] .ipo-zone-content { background: #FFF3E0; }

/* Bank Layout */
    .ipo-bank-panel { background: #FFF; padding: 15px; border-radius: 12px; border: 2px solid #780016; box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
    .ipo-bank-container { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; min-height: 80px; align-items: center;}
    .ipo-bank-container.ipo-drag-over { background: #FCE4E4; border-radius: 8px; }

/* Draggable Items */
    .ipo-item {
        background: #FFFFFF; padding: 8px 15px; border-radius: 12px; border: 2px solid #999;
        font-family: 'Prompt', sans-serif; font-size: 15px; font-weight: bold; color: #333;
        cursor: grab; box-shadow: 0 4px 0 rgba(0,0,0,0.1); transition: transform 0.1s;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        width: 110px; user-select: none; z-index: 10;
    }
    .ipo-item:active { cursor: grabbing; }
    .ipo-item.ipo-dragging { opacity: 0.8; transform: scale(1.1); box-shadow: 0 8px 15px rgba(0,0,0,0.3); z-index: 100; pointer-events: none; }
    
    .ipo-item-icon { font-size: 35px; margin-bottom: 5px; pointer-events: none; }
    .ipo-item-text { pointer-events: none; line-height: 1; text-align: center; }

/* Touch Ghost */
    .ipo-touch-ghost { position: fixed; pointer-events: none; z-index: 9999; opacity: 0.9; transform: translate(-50%, -50%); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }

/* SweetAlert Override */
    .ipo-swal-popup { background: #FFFFFF !important; border: 3px solid #780016 !important; border-radius: 15px !important; font-family: 'Prompt', sans-serif !important; }
    .ipo-swal-title { color: #780016 !important; font-size: 22px !important; font-weight: 800 !important; }
    .ipo-swal-confirm { background: #E63946 !important; color: #FFF !important; font-weight: bold !important; border-radius: 8px !important; box-shadow: 0 4px 0 #B31222 !important; }
</style>

let ipo_playerName = "";
    let ipo_audioCtx = null;
    let ipo_draggedItem = null;
    let ipo_touchGhost = null;

// --- Audio System ---
    function ipo_initAudio() {
        if (!ipo_audioCtx) ipo_audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (ipo_audioCtx.state === 'suspended') ipo_audioCtx.resume();
    }
    function ipo_playSound(type) {
        if (!ipo_audioCtx) return;
        try {
            const osc = ipo_audioCtx.createOscillator(); const gain = ipo_audioCtx.createGain();
            osc.connect(gain); gain.connect(ipo_audioCtx.destination);
            const now = ipo_audioCtx.currentTime;
            if (type === 'click') { osc.type = 'sine'; osc.frequency.setValueAtTime(600, now); osc.frequency.exponentialRampToValueAtTime(1000, now + 0.1); gain.gain.setValueAtTime(0.2, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1); osc.start(now); osc.stop(now + 0.1); } 
            else if (type === 'drag') { osc.type = 'triangle'; osc.frequency.setValueAtTime(400, now); osc.frequency.exponentialRampToValueAtTime(450, now + 0.1); gain.gain.setValueAtTime(0.1, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1); osc.start(now); osc.stop(now + 0.1); } 
            else if (type === 'drop') { osc.type = 'sine'; osc.frequency.setValueAtTime(500, now); osc.frequency.exponentialRampToValueAtTime(300, now + 0.1); gain.gain.setValueAtTime(0.2, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1); osc.start(now); osc.stop(now + 0.1); } 
            else if (type === 'correct') { osc.type = 'square'; [523.25, 659.25, 783.99].forEach((f, i) => osc.frequency.setValueAtTime(f, now + (i*0.1))); gain.gain.setValueAtTime(0.1, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.4); osc.start(now); osc.stop(now + 0.4); } 
            else if (type === 'wrong') { osc.type = 'sawtooth'; osc.frequency.setValueAtTime(200, now); osc.frequency.linearRampToValueAtTime(120, now + 0.3); gain.gain.setValueAtTime(0.15, now); gain.gain.linearRampToValueAtTime(0.01, now + 0.3); osc.start(now); osc.stop(now + 0.3); }
        } catch (e) {}
    }

// --- Navigation & Core ---
    function ipo_showScreen(id) {
        document.querySelectorAll('.ipo-screen').forEach(s => s.classList.remove('ipo-active'));
        document.getElementById(id).classList.add('ipo-active');
    }
    function ipo_shuffle(array) { return array.sort(() => Math.random() - 0.5); }

function ipo_startGame() {
        ipo_playSound('click');
        document.getElementById('ipo-ui-name').innerText = ipo_playerName;
        
        // เคลียร์พื้นที่โซน
        document.querySelectorAll('.ipo-zone-content').forEach(zone => zone.innerHTML = '');

// สร้างไอเทมในคลังแบบสุ่ม
        const bank = document.getElementById('ipo-inventory');
        bank.innerHTML = '';
        let shuffledItems = ipo_shuffle([...ipo_itemsData]);

shuffledItems.forEach((data) => {
            const div = document.createElement('div');
            div.className = `ipo-item`;
            div.draggable = true;
            div.dataset.type = data.type; // คำตอบที่ถูกต้อง
            
            div.innerHTML = `<div class="ipo-item-icon">${data.icon}</div><div class="ipo-item-text">${data.text}</div>`;
            
            // Events
            div.addEventListener('dragstart', ipo_handleDragStart); div.addEventListener('dragend', ipo_handleDragEnd);
            div.addEventListener('touchstart', ipo_handleTouchStart, {passive: false});
            div.addEventListener('touchmove', ipo_handleTouchMove, {passive: false});
            div.addEventListener('touchend', ipo_handleTouchEnd);
            bank.appendChild(div);
        });

// Setup Dropzones
        const dropTargets = [...document.querySelectorAll('.ipo-zone-content'), document.getElementById('ipo-inventory')];
        dropTargets.forEach(target => {
            target.addEventListener('dragover', ipo_handleDragOver); 
            target.addEventListener('dragleave', ipo_handleDragLeave); 
            target.addEventListener('drop', ipo_handleDrop);
        });

ipo_showScreen('ipo-screen-game');
    }

// --- Drag/Drop Functions ---
    function ipo_handleDragStart(e) { ipo_draggedItem = this; setTimeout(() => this.classList.add('ipo-dragging'), 0); ipo_playSound('drag'); }
    function ipo_handleDragEnd(e) { this.classList.remove('ipo-dragging'); ipo_draggedItem = null; }
    function ipo_handleDragOver(e) { e.preventDefault(); this.classList.add('ipo-drag-over'); }
    function ipo_handleDragLeave(e) { this.classList.remove('ipo-drag-over'); }
    function ipo_handleDrop(e) { e.preventDefault(); this.classList.remove('ipo-drag-over'); if (ipo_draggedItem) ipo_processDrop(this, ipo_draggedItem); }

// --- Touch Functions ---
    function ipo_handleTouchStart(e) {
        if(e.cancelable) e.preventDefault(); ipo_playSound('drag');
        ipo_draggedItem = e.currentTarget; ipo_draggedItem.classList.add('ipo-dragging');
        ipo_touchGhost = ipo_draggedItem.cloneNode(true); ipo_touchGhost.classList.add('ipo-touch-ghost');
        ipo_touchGhost.style.width = ipo_draggedItem.offsetWidth + 'px';
        document.body.appendChild(ipo_touchGhost); ipo_moveGhost(e.touches[0].clientX, e.touches[0].clientY);
    }
    function ipo_handleTouchMove(e) { if (!ipo_touchGhost) return; if(e.cancelable) e.preventDefault(); ipo_moveGhost(e.touches[0].clientX, e.touches[0].clientY); }
    function ipo_handleTouchEnd(e) {
        if (!ipo_touchGhost) return;
        ipo_draggedItem.classList.remove('ipo-dragging'); ipo_touchGhost.style.display = 'none';
        const changedTouch = e.changedTouches[0];
        const elemBelow = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
        fc_touchGhost_elem = document.querySelector('.ipo-touch-ghost');
        if(fc_touchGhost_elem) fc_touchGhost_elem.remove();
        ipo_touchGhost = null;
        
        const zone = elemBelow ? elemBelow.closest('.ipo-zone-content, .ipo-bank-container') : null;
        if (zone) ipo_processDrop(zone, ipo_draggedItem); else ipo_playSound('drop');
        ipo_draggedItem = null;
    }
    function ipo_moveGhost(x, y) { ipo_touchGhost.style.left = x + 'px'; ipo_touchGhost.style.top = y + 'px'; }

// --- Process Placement ---
    function ipo_processDrop(zone, item) {
        ipo_playSound('drop');
        zone.appendChild(item);
    }

// --- Validate Answer ---
    function ipo_checkAnswer() {
        ipo_playSound('click');
        const bank = document.getElementById('ipo-inventory');
        
        // เช็คว่าไอเทมถูกหยิบออกหมดหรือยัง
        if (bank.children.length > 0) {
            ipo_playSound('wrong');
            Swal.fire({ title: 'เดี๋ยวก่อน!', text: 'กรุณาลากสิ่งของทั้งหมดไปวางในสายพานให้ครบครับ', icon: 'warning', customClass: { popup: 'ipo-swal-popup', title: 'ipo-swal-title', confirmButton: 'ipo-swal-confirm' } });
            return;
        }

const items = document.querySelectorAll('.ipo-item');
        let isCorrect = true;

items.forEach(item => {
            const currentZoneType = item.closest('.ipo-zone').dataset.type;
            const correctType = item.dataset.type;
            
            if (currentZoneType !== correctType) {
                isCorrect = false;
            }
        });

if (isCorrect) {
            ipo_playSound('correct');
            Swal.fire({
                title: 'สำเร็จ! สายพานทำงาน ✅', text: 'คุณจัดหมวดหมู่ I-P-O ได้ถูกต้องสมบูรณ์', icon: 'success',
                timer: 1500, showConfirmButton: false, customClass: { popup: 'ipo-swal-popup', title: 'ipo-swal-title' }
            }).then(() => {
                ipo_showScreen('ipo-screen-result');
            });
        } else {
            ipo_playSound('wrong');
            Swal.fire({
                title: 'มีบางอย่างผิดพลาด! ⚠️', text: 'วัตถุดิบหรือเครื่องมือวางผิดช่อง ลองจัดเรียงใหม่ดูนะ', icon: 'error',
                confirmButtonText: 'กลับไปแก้ไข', customClass: { popup: 'ipo-swal-popup', title: 'ipo-swal-title', confirmButton: 'ipo-swal-confirm' }
            });
        }
    }

function ipo_restartGame() {
        ipo_playSound('click');
        ipo_showScreen('ipo-screen-start');
    }
</script>