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

Back

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

Title

Description

Keyword

Detail (HTML Code)

/* สายพานและกล่อง I P O */
    .ipo-factory-line { display: flex; justify-content: space-between; align-items: stretch; gap: 15px; margin-bottom: 30px; background: #eceff1; padding: 20px; border-radius: 12px; border: 2px dashed #b2dfdb; }
    
    .ipo-slot-box { flex: 1; display: flex; flex-direction: column; background: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); overflow: hidden; border: 2px solid #ccc; transition: 0.3s; }
    .ipo-slot-header { padding: 10px; font-weight: bold; color: white; font-family: 'Prompt', sans-serif; font-size: 18px; }
    .ipo-bg-input { background-color: #F57F17; }
    .ipo-bg-process { background-color: #00796B; }
    .ipo-bg-output { background-color: #C2185B; }
    
    .ipo-slot-content { flex: 1; padding: 15px 10px; min-height: 80px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #555; cursor: pointer; border-top: 1px solid #eee; }
    .ipo-slot-content.filled { background-color: #e8f5e9; color: #1b5e20; font-weight: bold; border: 2px solid #4CAF50; cursor: pointer; }
    .ipo-slot-content.filled:hover { background-color: #c8e6c9; }

/* ลูกศรเชื่อม */
    .ipo-arrow { display: flex; align-items: center; justify-content: center; font-size: 30px; color: #00897B; font-weight: bold; }

/* ตัวเลือกชิ้นส่วน */
    .ipo-options-area { background: #fff8e1; padding: 20px; border-radius: 12px; border: 2px solid #ffe082; margin-bottom: 25px; }
    .ipo-options-area h4 { margin: 0 0 15px 0; color: #f57f17; font-family: 'Prompt', sans-serif; }
    .ipo-options-container { display: flex; flex-direction: column; gap: 10px; }
    
    .ipo-option-btn { background-color: white; border: 2px solid #ffd54f; padding: 12px 20px; border-radius: 8px; font-size: 16px; cursor: pointer; transition: 0.2s; color: #333; text-align: left; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
    .ipo-option-btn:hover { background-color: #fffde7; border-color: #ffca28; transform: translateY(-2px); }
    .ipo-option-btn:active { transform: translateY(0); }

/* ปุ่มควบคุม */
    .ipo-controls { display: flex; gap: 15px; justify-content: center; }
    .ipo-btn { padding: 12px 30px; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; color: white; font-family: 'Prompt', sans-serif; transition: 0.2s; }
    .ipo-btn-check { background-color: #00796B; box-shadow: 0 4px 0 #004D40; }
    .ipo-btn-check:active { transform: translateY(4px); box-shadow: none; }
    .ipo-btn-reset { background-color: #d32f2f; box-shadow: 0 4px 0 #b71c1c; }
    .ipo-btn-reset:active { transform: translateY(4px); box-shadow: none; }
    .ipo-btn-next { background-color: #f57f17; box-shadow: 0 4px 0 #f57f17; display: none; }

/* ฟีดแบค Overlay */
    .ipo-feedback-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.95); z-index: 10; border-radius: 15px; display: none; flex-direction: column; align-items: center; justify-content: center; transition: 0.3s; }
    .ipo-feedback-icon { font-size: 70px; margin-bottom: 15px; }
    .ipo-feedback-title { font-size: 26px; font-weight: bold; font-family: 'Prompt', sans-serif; margin-bottom: 10px; }
    .ipo-feedback-msg { font-size: 18px; color: #555; text-align: center; padding: 0 20px; max-width: 600px; }

/* Responsive */
    @media (max-width: 600px) {
        .ipo-factory-line { flex-direction: column; align-items: stretch; }
        .ipo-arrow { transform: rotate(90deg); margin: 5px 0; }
    }
</style>

<div class="wsst-ipo-wrapper">
    <div class="ipo-container">
        <div class="ipo-header">
            <h2>⚙️ IPO Factory (โรงงานประกอบร่าง)</h2>
            <p>ภารกิจ: คลิกเลือกชิ้นส่วนด้านล่าง เพื่อนำไปประกอบในกล่อง I-P-O ให้ถูกต้อง!</p>
        </div>

<div class="ipo-body">
            
            <div class="ipo-mission-box">
                <p class="ipo-mission-title" id="ipo-mission-text">กำลังโหลดภารกิจ...</p>
                <div class="ipo-level-badge" id="ipo-level-text">ด่าน 1/3</div>
            </div>

<div class="ipo-factory-line">
                <div class="ipo-slot-box">
                    <div class="ipo-slot-header ipo-bg-input">📥 Input (ข้อมูลเข้า)</div>
                    <div class="ipo-slot-content" id="ipo-slot-in" onclick="removeIpoItem('in')">(ว่าง)</div>
                </div>
                
                <div class="ipo-arrow">➡️</div>
                
                <div class="ipo-slot-box">
                    <div class="ipo-slot-header ipo-bg-process">⚙️ Process (ประมวลผล)</div>
                    <div class="ipo-slot-content" id="ipo-slot-pro" onclick="removeIpoItem('pro')">(ว่าง)</div>
                </div>
                
                <div class="ipo-arrow">➡️</div>
                
                <div class="ipo-slot-box">
                    <div class="ipo-slot-header ipo-bg-output">📤 Output (ผลลัพธ์)</div>
                    <div class="ipo-slot-content" id="ipo-slot-out" onclick="removeIpoItem('out')">(ว่าง)</div>
                </div>
            </div>

<div class="ipo-options-area">
                <h4>👇 คลิกเลือกชิ้นส่วนเพื่อนำไปใส่ในกล่องด้านบน</h4>
                <div class="ipo-options-container" id="ipo-options-container">
                    </div>
            </div>

<div class="ipo-controls">
                <button class="ipo-btn ipo-btn-reset" onclick="resetIpoSlots()">🔄 ล้างกล่อง</button>
                <button class="ipo-btn ipo-btn-check" id="ipo-btn-check" onclick="checkIpoAnswer()">🔍 ตรวจสอบระบบ</button>
                <button class="ipo-btn ipo-btn-next" id="ipo-btn-next" onclick="nextIpoLevel()">⏭️ ด่านต่อไป</button>
            </div>

<div class="ipo-feedback-overlay" id="ipo-feedback-overlay">
                <div class="ipo-feedback-icon" id="ipo-feedback-icon">✅</div>
                <div class="ipo-feedback-title" id="ipo-feedback-title">สมบูรณ์แบบ!</div>
                <div class="ipo-feedback-msg" id="ipo-feedback-msg">คำอธิบายเพิ่มเติม...</div>
                <button class="ipo-btn ipo-btn-check" style="margin-top: 20px;" onclick="closeIpoFeedback()" id="ipo-btn-close-fb">ตกลง</button>
            </div>

</div>
    </div>
</div>

let currentIpoLevel = 0;
    let ipoSlots = { in: null, pro: null, out: null };
    let availableOptions = [];

// ฟังก์ชันสลับลำดับตัวเลือก (ไม่ให้เรียง I P O)
    function shuffleIpoArray(array) {
        return array.sort(() => Math.random() - 0.5);
    }

// ฟังก์ชันเริ่มด่าน
    function loadIpoLevel() {
        const levelData = ipoLevels[currentIpoLevel];
        document.getElementById('ipo-mission-text').innerText = levelData.title;
        document.getElementById('ipo-level-text').innerText = `ด่าน ${currentIpoLevel + 1}/${ipoLevels.length}`;
        
        // ก๊อปปี้และสลับตัวเลือก
        availableOptions = shuffleIpoArray([...levelData.items]);
        
        resetIpoSlots();
        
        document.getElementById('ipo-btn-check').style.display = 'block';
        document.getElementById('ipo-btn-next').style.display = 'none';
        document.getElementById('ipo-feedback-overlay').style.display = 'none';
    }

// ล้างกล่องทั้งหมด
    function resetIpoSlots() {
        ipoSlots = { in: null, pro: null, out: null };
        
        // รีเซ็ตหน้าตากล่อง
        ['in', 'pro', 'out'].forEach(key => {
            const el = document.getElementById(`ipo-slot-${key}`);
            el.innerText = "(คลิกชิ้นส่วนด้านล่างมาใส่)";
            el.className = "ipo-slot-content";
        });

renderIpoOptions();
    }

// สร้างปุ่มตัวเลือกด้านล่าง
    function renderIpoOptions() {
        const container = document.getElementById('ipo-options-container');
        container.innerHTML = '';

availableOptions.forEach(opt => {
            // เช็คว่าตัวเลือกนี้ถูกใส่ในกล่องไหนหรือยัง
            const isUsed = Object.values(ipoSlots).some(slot => slot && slot.id === opt.id);
            
            if (!isUsed) {
                const btn = document.createElement('button');
                btn.className = 'ipo-option-btn';
                btn.innerText = opt.text;
                btn.onclick = () => selectIpoItem(opt);
                container.appendChild(btn);
            }
        });

// ถ้าเลือกครบแล้ว ให้แสดงข้อความ
        if (Object.values(ipoSlots).every(slot => slot !== null)) {
            container.innerHTML = '<div style="color:#00796B; font-weight:bold; padding:10px;">✅ จัดเรียงครบแล้ว! กดปุ่ม "ตรวจสอบระบบ" ได้เลยครับ</div>';
        }
    }

// เมื่อผู้เล่นคลิกตัวเลือก
    function selectIpoItem(opt) {
        // หาช่องที่ยังว่างอยู่ (ไล่จาก I -> P -> O)
        let emptySlotKey = null;
        if (!ipoSlots.in) emptySlotKey = 'in';
        else if (!ipoSlots.pro) emptySlotKey = 'pro';
        else if (!ipoSlots.out) emptySlotKey = 'out';

if (emptySlotKey) {
            ipoSlots[emptySlotKey] = opt;
            const el = document.getElementById(`ipo-slot-${emptySlotKey}`);
            el.innerText = opt.text;
            el.className = "ipo-slot-content filled";
            renderIpoOptions();
        }
    }

// เมื่อผู้เล่นคลิกที่กล่องเพื่อเอาออก
    function removeIpoItem(slotKey) {
        if (ipoSlots[slotKey]) {
            ipoSlots[slotKey] = null;
            const el = document.getElementById(`ipo-slot-${slotKey}`);
            el.innerText = "(คลิกชิ้นส่วนด้านล่างมาใส่)";
            el.className = "ipo-slot-content";
            renderIpoOptions();
        }
    }

// ตรวจสอบคำตอบ
    function checkIpoAnswer() {
        if (!ipoSlots.in || !ipoSlots.pro || !ipoSlots.out) {
            showIpoFeedback("⚠️ ระบบไม่สมบูรณ์!", "กรุณาประกอบชิ้นส่วนให้ครบทั้ง 3 ช่องก่อนตรวจสอบนะครับ", "warning");
            return;
        }

// ตรวจสอบว่าตรงล็อกไหม (id ต้องตรงกับช่อง)
        if (ipoSlots.in.id === 'in' && ipoSlots.pro.id === 'pro' && ipoSlots.out.id === 'out') {
            // ถูกต้อง
            if (currentIpoLevel < ipoLevels.length - 1) {
                showIpoFeedback("🎉 ยอดเยี่ยมมาก!", "ระบบเชื่อมต่อสมบูรณ์แบบ วิเคราะห์ได้ถูกต้องเป๊ะ!", "success", true);
            } else {
                showIpoFeedback("🏆 ภารกิจเสร็จสิ้น!", "คุณสอบผ่านการเป็นวิศวกรวิเคราะห์ระบบ IPO ยอดเยี่ยมมากครับ!", "success", false);
                document.getElementById('ipo-btn-check').style.display = 'none';
                document.getElementById('ipo-btn-close-fb').innerText = "เล่นใหม่อีกครั้ง";
                document.getElementById('ipo-btn-close-fb').onclick = () => {
                    currentIpoLevel = 0;
                    loadIpoLevel();
                };
            }
        } else {
            // ผิดพลาด
            showIpoFeedback("💥 เกิดข้อผิดพลาด!", "มีบางชิ้นส่วนวางผิดตำแหน่ง ลองวิเคราะห์กระบวนการใหม่ดูอีกครั้งนะครับ", "error");
        }
    }

// ฟังก์ชันแสดงป๊อปอัปแจ้งผล
    function showIpoFeedback(title, msg, type, isNextLevel = false) {
        const overlay = document.getElementById('ipo-feedback-overlay');
        const iconEl = document.getElementById('ipo-feedback-icon');
        
        document.getElementById('ipo-feedback-title').innerText = title;
        document.getElementById('ipo-feedback-msg').innerHTML = msg;

if (type === 'success') {
            iconEl.innerText = "✅";
            document.getElementById('ipo-feedback-title').style.color = "#00796B";
            
            if (isNextLevel) {
                document.getElementById('ipo-btn-check').style.display = 'none';
                document.getElementById('ipo-btn-next').style.display = 'block';
            }
        } else if (type === 'error') {
            iconEl.innerText = "❌";
            document.getElementById('ipo-feedback-title').style.color = "#d32f2f";
        } else {
            iconEl.innerText = "⚠️";
            document.getElementById('ipo-feedback-title').style.color = "#f57f17";
        }

overlay.style.display = 'flex';
    }

// ปิดป๊อปอัป
    function closeIpoFeedback() {
        document.getElementById('ipo-feedback-overlay').style.display = 'none';
    }

// ไปด่านต่อไป
    function nextIpoLevel() {
        currentIpoLevel++;
        loadIpoLevel();
    }

// โหลดเกมทันทีเมื่อเข้าเว็บ
    setTimeout(loadIpoLevel, 200);
</script>