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

Back

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

Title

Description

Keyword

Detail (HTML Code)

.logic-m1-title-text {
            margin: 0;
            font-size: clamp(20px, 5vw, 26px);
            font-weight: bold;
        }

.logic-m1-instruction {
            background: #fff;
            padding: 15px 20px;
            border-radius: 10px;
            border-left: 5px solid #8B0F0F;
            margin-bottom: 20px;
            font-size: 16px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

/* Game Layout */
        .logic-m1-main-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

@media (max-width: 768px) {
            .logic-m1-main-grid { grid-template-columns: 1fr; }
        }

.logic-m1-box {
            background: #ffffff;
            padding: 15px;
            border-radius: 12px;
            border: 1px solid #ddd;
            min-height: 500px;
        }

.logic-m1-box-title {
            color: #8B0F0F;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
            border-bottom: 2px solid #F4F6F8;
            padding-bottom: 10px;
        }

/* Items */
        .logic-m1-card {
            background: white;
            border: 2px solid #8B0F0F;
            padding: 10px 15px;
            margin-bottom: 8px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14.5px;
            transition: 0.2s;
            display: flex;
            align-items: center;
            animation: logicFadeIn 0.3s ease;
        }
        @keyframes logicFadeIn { from {opacity:0; transform:translateY(5px);} to {opacity:1; transform:translateY(0);} }

.logic-m1-card:hover {
            background: #8B0F0F;
            color: white;
        }

.logic-m1-card::before {
            content: "✦";
            margin-right: 10px;
            font-weight: bold;
        }

/* Slot Styling */
        .logic-m1-target-slot {
            background: #F9FAFB;
            border: 1.5px dashed #ccc;
            min-height: 48px;
            margin-bottom: 6px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            padding-left: 45px;
            position: relative;
        }

.logic-m1-step-num {
            position: absolute;
            left: 10px;
            background: #5C0A0A;
            color: white;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
        }

/* Buttons */
        .logic-m1-btn-group {
            text-align: center;
            margin-top: 25px;
            padding-bottom: 10px;
        }

.logic-m1-primary-btn {
            background: #8B0F0F;
            color: white;
            border: none;
            padding: 12px 35px;
            border-radius: 30px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            margin: 5px;
            transition: 0.3s;
            box-shadow: 0 4px 10px rgba(139, 15, 15, 0.2);
        }

.logic-m1-primary-btn:hover { background: #5C0A0A; transform: scale(1.05); }

.logic-m1-secondary-btn {
            background: #666;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 30px;
            font-size: 16px;
            cursor: pointer;
            margin: 5px;
        }

/* Result Modal */
        .logic-m1-result-overlay {
            position: fixed;
            top:0; left:0; width:100%; height:100%;
            background: rgba(0,0,0,0.8);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            padding: 20px;
        }

.logic-m1-result-content {
            background: white;
            padding: 30px;
            border-radius: 20px;
            text-align: center;
            max-width: 450px;
            width: 100%;
        }
    </style>

<div class="logic-m1-header-bar">
        <h2 class="logic-m1-title-text">🤖 เกม Smart-Clean Logic: โปรแกรมหุ่นยนต์อัจฉริยะ</h2>
        <p style="margin: 5px 0 0; opacity: 0.9;">หน่วยการเรียนรู้ที่ 2: การออกแบบอัลกอริทึม (ชั้น ม.1)</p>
    </div>

<div class="logic-m1-instruction">
        <strong>สถานการณ์:</strong> คุณได้รับมอบหมายให้เขียน "อัลกอริทึม" ควบคุมหุ่นยนต์ดูดฝุ่นรุ่นใหม่ล่าสุด โดยต้องเรียงลำดับขั้นตอนการทำงานให้ถูกต้องที่สุดตั้งแต่เริ่มจนถึงกลับเข้าที่ชาร์จ 
        <br><span style="color: #8B0F0F; font-weight: bold;">(มีทั้งหมด 11 ขั้นตอน - คลิกเลือกคำสั่งทางซ้ายเพื่อวางในลำดับ)</span>
    </div>

<div class="logic-m1-main-grid">
        <div class="logic-m1-box">
            <div class="logic-m1-box-title">📦 คลังคำสั่งอัลกอริทึม</div>
            <div id="logic-pool-container"><div class="logic-m1-card">เคลื่อนที่เข้าจุดชาร์จและปิดเครื่อง (Standby)</div><div class="logic-m1-card">ค้นหาสัญญาณสถานีชาร์จ (Home Station)</div><div class="logic-m1-card">สแกนพื้นที่เพื่อสร้างแผนที่ห้อง</div><div class="logic-m1-card">ทำซ้ำขั้นตอนการดูดฝุ่นจนทั่วบริเวณ</div><div class="logic-m1-card">ตรวจสอบระดับพลังงานแบตเตอรี่</div><div class="logic-m1-card">เคลื่อนที่ไปข้างหน้าเพื่อดูดฝุ่น</div><div class="logic-m1-card">ถ้าครบแล้ว ให้หยุดระบบดูดฝุ่น</div><div class="logic-m1-card">เริ่มการทำงาน (Power On)</div><div class="logic-m1-card">ถ้าถังเก็บฝุ่นเต็ม ให้แจ้งเตือนผู้ใช้งาน</div><div class="logic-m1-card">ถ้าตรวจพบสิ่งกีดขวาง ให้เลี้ยวขวา 90 องศา</div><div class="logic-m1-card">ตรวจสอบว่าทำความสะอาดครบพื้นที่หรือไม่</div></div>
        </div>

<div class="logic-m1-box">
            <div class="logic-m1-box-title">⚙️ ลำดับขั้นตอนการทำงาน (Process)</div>
            <div id="logic-slots-container"><div class="logic-m1-target-slot"><div class="logic-m1-step-num">1</div><span style="color:#ccc; font-style:italic; font-size:13px;">ว่าง</span></div><div class="logic-m1-target-slot"><div class="logic-m1-step-num">2</div><span style="color:#ccc; font-style:italic; font-size:13px;">ว่าง</span></div><div class="logic-m1-target-slot"><div class="logic-m1-step-num">3</div><span style="color:#ccc; font-style:italic; font-size:13px;">ว่าง</span></div><div class="logic-m1-target-slot"><div class="logic-m1-step-num">4</div><span style="color:#ccc; font-style:italic; font-size:13px;">ว่าง</span></div><div class="logic-m1-target-slot"><div class="logic-m1-step-num">5</div><span style="color:#ccc; font-style:italic; font-size:13px;">ว่าง</span></div><div class="logic-m1-target-slot"><div class="logic-m1-step-num">6</div><span style="color:#ccc; font-style:italic; font-size:13px;">ว่าง</span></div><div class="logic-m1-target-slot"><div class="logic-m1-step-num">7</div><span style="color:#ccc; font-style:italic; font-size:13px;">ว่าง</span></div><div class="logic-m1-target-slot"><div class="logic-m1-step-num">8</div><span style="color:#ccc; font-style:italic; font-size:13px;">ว่าง</span></div><div class="logic-m1-target-slot"><div class="logic-m1-step-num">9</div><span style="color:#ccc; font-style:italic; font-size:13px;">ว่าง</span></div><div class="logic-m1-target-slot"><div class="logic-m1-step-num">10</div><span style="color:#ccc; font-style:italic; font-size:13px;">ว่าง</span></div><div class="logic-m1-target-slot"><div class="logic-m1-step-num">11</div><span style="color:#ccc; font-style:italic; font-size:13px;">ว่าง</span></div></div>
        </div>
    </div>

<div class="logic-m1-btn-group">
        <button class="logic-m1-secondary-btn" onclick="logicResetGame()">🔄 ล้างลำดับใหม่</button>
        <button class="logic-m1-primary-btn" onclick="logicCheckResult()">✔️ ตรวจสอบอัลกอริทึม</button>
    </div>

<div class="logic-m1-result-overlay" id="logic-popup">
        <div class="logic-m1-result-content">
            <div id="logic-pop-icon" style="font-size: 60px; margin-bottom: 10px;">🏆</div>
            <h2 id="logic-pop-title" style="margin: 0; color: #8B0F0F;">ยอดเยี่ยม!</h2>
            <p id="logic-pop-msg" style="font-size: 18px; color: #444; margin: 15px 0;"></p>
            <button class="logic-m1-primary-btn" onclick="logicClosePopup()">เข้าใจแล้ว</button>
        </div>
    </div>

let logicPool = [];
        let logicApplied = [];

// ฟังก์ชันเริ่มเกม
        function logicInit() {
            // Shuffle pool
            logicPool = [...logicCorrectSteps].sort(() => Math.random() - 0.5);
            logicApplied = [];
            logicRender();
        }

function logicRender() {
            const poolArea = document.getElementById('logic-pool-container');
            const slotArea = document.getElementById('logic-slots-container');

// Render Pool
            poolArea.innerHTML = "";
            logicPool.forEach(item => {
                const card = document.createElement('div');
                card.className = "logic-m1-card";
                card.innerText = item.text;
                card.onclick = () => logicAddStep(item.id);
                poolArea.appendChild(card);
            });

// Render Slots (11 slots)
            slotArea.innerHTML = "";
            for (let i = 0; i < 11; i++) {
                const slot = document.createElement('div');
                slot.className = "logic-m1-target-slot";
                
                const num = document.createElement('div');
                num.className = "logic-m1-step-num";
                num.innerText = i + 1;
                slot.appendChild(num);

if (logicApplied[i]) {
                    const card = document.createElement('div');
                    card.className = "logic-m1-card";
                    card.style.margin = "0";
                    card.style.width = "95%";
                    card.innerText = logicApplied[i].text;
                    card.onclick = () => logicRemoveStep(i);
                    slot.appendChild(card);
                } else {
                    slot.innerHTML += `<span style="color:#ccc; font-style:italic; font-size:13px;">ว่าง</span>`;
                }
                slotArea.appendChild(slot);
            }
        }

function logicAddStep(id) {
            if (logicApplied.length >= 11) return;
            const idx = logicPool.findIndex(x => x.id === id);
            const item = logicPool.splice(idx, 1)[0];
            logicApplied.push(item);
            logicRender();
        }

function logicRemoveStep(index) {
            const item = logicApplied.splice(index, 1)[0];
            logicPool.push(item);
            logicRender();
        }

function logicResetGame() {
            logicInit();
        }

function logicCheckResult() {
            if (logicApplied.length < 11) {
                logicShowPopup("⚠️", "ยังไม่ครบ!", "กรุณาวางลำดับขั้นตอนให้ครบทั้ง 11 ขั้นตอนก่อนตรวจสอบนะครับ", false);
                return;
            }

let perfect = true;
            for (let i = 0; i < 11; i++) {
                if (logicApplied[i].id !== logicCorrectSteps[i].id) {
                    perfect = false;
                    break;
                }
            }

if (perfect) {
                logicShowPopup("🏆", "สุดยอดโปรแกรมเมอร์!", "คุณออกแบบอัลกอริทึมได้ถูกต้องแม่นยำ หุ่นยนต์ทำงานได้มีประสิทธิภาพสูงสุด!", true);
            } else {
                logicShowPopup("❌", "ลำดับสับสนเล็กน้อย", "หุ่นยนต์ทำงานผิดพลาด! ลองทบทวนลำดับตรรกะ (Logic) ดูใหม่อีกครั้งนะ ขั้นตอนไหนควรเกิดก่อน-หลัง?", false);
            }
        }

function logicShowPopup(icon, title, msg, success) {
            document.getElementById('logic-pop-icon').innerText = icon;
            document.getElementById('logic-pop-title').innerText = title;
            document.getElementById('logic-pop-title').style.color = success ? "#27ae60" : "#8B0F0F";
            document.getElementById('logic-pop-msg').innerText = msg;
            document.getElementById('logic-popup').style.display = 'flex';
        }

function logicClosePopup() {
            document.getElementById('logic-popup').style.display = 'none';
        }

// เรียกใช้งานทันทีโดยไม่พึ่ง window.onload
        logicInit();

</script>
</div>