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

Back

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

Title

Description

Keyword

Detail (HTML Code)

.parts-area-title { font-size: 18px; font-weight: bold; color: #9C27B0; margin-bottom: 15px; background: #F3E5F5; padding: 10px; border-radius: 8px; display: inline-block;}
        .parts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 12px;
            margin-bottom: 25px;
        }
        
        .part-card {
            background: white;
            border: 2px solid #ddd;
            border-radius: 10px;
            padding: 15px 10px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            user-select: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100px;
        }
        .part-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-color: #B3E5FC;}
        .part-card.selected {
            background: #E8F5E9;
            border-color: #4CAF50;
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
        }
        .part-icon { font-size: 35px; margin-bottom: 8px; display: block; }
        .part-name { font-size: 14px; font-weight: bold; color: #333; line-height: 1.3;}

/* เปลี่ยนชื่อ Class เป็น wsst-decomp-btn ป้องกันการชนกับ Bootstrap */
        .wsst-decomp-btn {
            background: linear-gradient(to bottom, #FFC107, #FF9800);
            color: #fff;
            border: none;
            padding: 12px 35px;
            font-size: 18px;
            font-weight: bold;
            border-radius: 30px;
            cursor: pointer;
            font-family: 'Prompt', sans-serif;
            box-shadow: 0 5px 0 #E65100;
            transition: 0.1s;
            margin-top: 10px;
            display: inline-block;
        }
        .wsst-decomp-btn:active { transform: translateY(5px); box-shadow: 0 0 0 #E65100; }

.decomp-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(255,255,255,0.95); z-index: 10;
            display: none; flex-direction: column; align-items: center; justify-content: center;
            border-radius: 16px; padding: 20px; text-align: center;
        }
        .overlay-icon { font-size: 70px; margin-bottom: 10px; }
        .overlay-title { font-size: 28px; font-weight: bold; font-family: 'Prompt', sans-serif; margin-bottom: 10px;}
        .overlay-msg { font-size: 18px; color: #444; max-width: 85%; line-height: 1.6; margin-bottom: 25px; font-weight: 500;}
        
        .btn-next { background: #2196F3; box-shadow: 0 5px 0 #1565C0; color: white; border: none; padding: 12px 30px; border-radius: 30px; font-size: 18px; font-weight:bold; cursor:pointer;}
        .btn-next:active { transform: translateY(5px); box-shadow: none;}

.screen { display: none; }
        .screen.active { display: block; animation: fadeIn 0.4s ease; }
        @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }

.level-badge { position: absolute; top: 15px; left: 15px; background: #FFC107; color: #B71C1C; padding: 6px 15px; border-radius: 20px; font-weight: bold; font-size: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);}
    </style>

<div class="wsst-decomp-wrapper">
    <div class="decomp-container">
        <div class="decomp-header">
            <h2>🏭 โรงงานแยกชิ้นส่วน (Hard Mode)</h2>
            <p>ระวังตัวหลอกให้ดี! เลือกเฉพาะ "ส่วนประกอบ" ที่แท้จริงเท่านั้น</p>
        </div>

<div id="screen-start" class="decomp-body screen active">
            <span style="font-size: 80px;">🕵️‍♂️</span>
            <h3 style="color: #9C27B0; font-family: 'Prompt', sans-serif; font-size: 24px; margin-top: 15px;">ภารกิจวิเคราะห์ขั้นสูง!</h3>
            <p style="font-size: 16px; color: #555; max-width: 550px; margin: 0 auto 25px; line-height: 1.8;">ในโหมดนี้ จะมีชิ้นส่วนมากมายไหลมาตามสายพาน บางชิ้นเป็นของที่ <b style="color:#D32F2F;">"ใช้คู่กันแต่ไม่ใช่ส่วนประกอบหลัก"</b> คุณต้องใช้หลักการ Decomposition เลือกเฉพาะชิ้นส่วนที่เป็นองค์ประกอบของสิ่งนั้นจริงๆ เท่านั้น!</p>
            <button class="wsst-decomp-btn" onclick="startGame()">🚀 เริ่มวิเคราะห์เลย!</button>
        </div>

<div id="screen-game" class="decomp-body screen">
            <div class="level-badge" id="level-indicator">ด่าน 1/3</div>
            
            <div class="target-box">
                <span class="target-icon" id="target-icon">🍔</span>
                <h3 class="target-title" id="target-title">แฮมเบอร์เกอร์</h3>
                <p class="target-desc">แฮมเบอร์เกอร์ 1 ชิ้น ประกอบไปด้วยวัตถุดิบอะไรบ้าง?</p>
            </div>

<div class="parts-area-title">👇 คลิกเลือกส่วนประกอบที่ถูกต้อง (เลือกให้ครบทุกชิ้น)</div>
            <div class="parts-grid" id="parts-container">
                </div>

<button class="wsst-decomp-btn" id="btn-submit" onclick="checkDecompAnswer()">🔍 ยืนยันชิ้นส่วน</button>
        </div>

<div id="screen-end" class="decomp-body screen">
            <span style="font-size: 80px;">🏆</span>
            <h3 style="color: #4CAF50; font-family: 'Prompt', sans-serif; font-size: 28px; margin-top: 15px;">สุดยอดนักวิเคราะห์ระบบ!</h3>
            <p style="font-size: 16px; color: #555; max-width: 500px; margin: 0 auto 25px; line-height: 1.8;">ยอดเยี่ยมมากครับ! น้องๆ ไม่หลงกลตัวหลอกเลย การแยกแยะ "ส่วนประกอบหลัก" ออกจาก "สิ่งของที่เกี่ยวข้อง" ได้ จะทำให้เราเข้าใจปัญหาและเขียนโปรแกรมได้เก่งขึ้นอย่างแน่นอน!</p>
            <button class="wsst-decomp-btn" onclick="resetGame()">🔄 ทบทวนความรู้อีกครั้ง</button>
        </div>

<div class="decomp-overlay" id="feedback-overlay">
            <div class="overlay-icon" id="fb-icon">✅</div>
            <div class="overlay-title" id="fb-title">ถูกต้อง!</div>
            <div class="overlay-msg" id="fb-msg">คำอธิบาย...</div>
            <button class="btn-next" id="fb-btn" onclick="nextLevel()">ด่านต่อไป ⏭️</button>
        </div>

</div>
</div>

let currentLvlIdx = 0;
    let selectedParts = [];

function shuffleArray(arr) {
        return arr.sort(() => Math.random() - 0.5);
    }

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

function startGame() {
        currentLvlIdx = 0;
        switchScreen('screen-game');
        loadLevel();
    }

function loadLevel() {
        selectedParts = [];
        const lvl = decompLevels[currentLvlIdx];
        
        document.getElementById('level-indicator').innerText = `ด่าน ${currentLvlIdx + 1}/${decompLevels.length}`;
        document.getElementById('target-title').innerText = lvl.target;
        document.getElementById('target-icon').innerText = lvl.icon;
        document.querySelector('.target-desc').innerText = lvl.desc;

const container = document.getElementById('parts-container');
        container.innerHTML = '';
        
        const shuffledParts = shuffleArray([...lvl.parts]);

shuffledParts.forEach((part) => {
            const card = document.createElement('div');
            card.className = 'part-card';
            card.innerHTML = `<span class="part-icon">${part.icon}</span><span class="part-name">${part.name}</span>`;
            
            card.onclick = () => {
                if (card.classList.contains('selected')) {
                    card.classList.remove('selected');
                    selectedParts = selectedParts.filter(p => p !== part.name);
                } else {
                    card.classList.add('selected');
                    selectedParts.push(part.name);
                }
            };
            container.appendChild(card);
        });
    }

function checkDecompAnswer() {
        const lvl = decompLevels[currentLvlIdx];
        const correctAnswers = lvl.parts.filter(p => p.isCorrect).map(p => p.name);
        
        const isAllCorrectSelected = correctAnswers.every(ans => selectedParts.includes(ans));
        const isNoWrongSelected = selectedParts.every(ans => correctAnswers.includes(ans));

if (selectedParts.length === 0) {
            showFeedback("❌ เดี๋ยวก่อน!", "ยังไม่ได้เลือกชิ้นส่วนเลยนะ ลองคลิกเลือกดูก่อนครับ", "#D32F2F", "ลองใหม่", false);
            return;
        }

if (isAllCorrectSelected && isNoWrongSelected) {
            showFeedback("✅ ถูกต้องแม่นยำ!", lvl.explanation, "#4CAF50", "ด่านต่อไป ⏭️", true);
        } else if (!isNoWrongSelected) {
            showFeedback("⚠️ โดนสับขาหลอกแล้ว!", "เอ... ดูเหมือนจะเผลอหยิบชิ้นส่วนที่ไม่ใช่ส่วนประกอบจริงๆ มาด้วยนะ ลองวิเคราะห์ใหม่ดูครับ!", "#F57C00", "พยายามใหม่", false);
        } else {
            showFeedback("⚠️ ยังไม่ครบ!", "ชิ้นส่วนที่เลือกมาถูกต้องแล้วครับ แต่ยังขาดส่วนประกอบสำคัญไปอีกนะ ลองหาดูดีๆ ครับ!", "#F57C00", "พยายามใหม่", false);
        }
    }

function resetGame() {
        startGame();
    }
</script>