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

Back

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

Title

Description

Keyword

Detail (HTML Code)

.pseudo-title {
            margin: 0;
            font-size: 26px;
            font-weight: bold;
            color: #FFC107;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
        }

.pseudo-desc {
            background: white;
            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);
        }

/* Grid Layout */
        .pseudo-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

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

.pseudo-panel {
            background: #ffffff;
            padding: 20px;
            border-radius: 12px;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

.pseudo-panel-title {
            color: #8B0F0F;
            font-size: 18px;
            font-weight: bold;
            margin-top: 0;
            margin-bottom: 15px;
            text-align: center;
            border-bottom: 2px dashed #ccc;
            padding-bottom: 10px;
        }

/* Items */
        .pseudo-item {
            background-color: #fff;
            border: 2px solid #8B0F0F;
            color: #333;
            padding: 10px 15px;
            margin-bottom: 8px;
            border-radius: 8px;
            cursor: pointer;
            font-family: 'Courier New', Courier, monospace; /* ใช้ฟอนต์โค้ด */
            font-weight: bold;
            font-size: 15px;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(139,15,15,0.1);
        }

.pseudo-item:hover {
            background-color: #8B0F0F;
            color: white;
            transform: translateY(-2px);
        }

/* Slots */
        .pseudo-slot {
            background-color: #F9FAFB;
            border: 2px dashed #bbb;
            min-height: 46px;
            margin-bottom: 8px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            padding-left: 45px;
            position: relative;
        }

.pseudo-slot-num {
            position: absolute;
            left: -10px;
            background: #5C0A0A;
            color: white;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 13px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            z-index: 1;
        }

.pseudo-slot-content {
            width: 100%;
        }

/* Buttons */
        .pseudo-btn-group {
            text-align: center;
            margin-top: 25px;
        }

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

.pseudo-btn:hover { background-color: #5C0A0A; transform: scale(1.05); }
        .pseudo-btn-reset { background-color: #64748b; }
        .pseudo-btn-reset:hover { background-color: #334155; }

/* Modal */
        .pseudo-modal-bg {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.7);
            display: none; align-items: center; justify-content: center;
            z-index: 9999;
        }

.pseudo-modal-box {
            background: white; padding: 30px; border-radius: 15px;
            text-align: center; max-width: 450px; width: 90%;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
    </style>

<div class="pseudo-header">
        <h2 class="pseudo-title">💻 Pseudo Code Builder: ภารกิจโปรแกรมเมอร์มือใหม่</h2>
        <p style="margin: 5px 0 0; opacity: 0.9; font-size: 16px;">จัดเรียงรหัสลำลอง (Pseudo Code) 11 ขั้นตอนให้สมบูรณ์</p>
    </div>

<div class="pseudo-desc">
        <strong>📝 สถานการณ์:</strong> ให้เขียนรหัสลำลองสำหรับ <strong>"โปรแกรมคำนวณดัชนีมวลกาย (BMI)"</strong> โดยรับค่าน้ำหนักและส่วนสูง คำนวณค่า BMI และตรวจสอบเงื่อนไขว่าถ้า BMI ตั้งแต่ 25 ขึ้นไปให้แสดงผลว่า "Overweight" แต่ถ้าไม่ใช่ให้แสดงผลว่า "Normal"<br>
        <span style="color: #8B0F0F; font-size: 14px;"><strong>คำแนะนำ:</strong> สังเกตการย่อหน้าของคำสั่งภายในเงื่อนไข if/else ให้ดี และอย่าลืมจุดเริ่มต้น-สิ้นสุด! (คลิกที่กล่องข้อความเพื่อย้ายตำแหน่ง)</span>
    </div>

<div class="pseudo-grid">
        <div class="pseudo-panel">
            <h3 class="pseudo-panel-title">📦 คลังรหัสคำสั่ง (สุ่มลำดับ)</h3>
            <div id="pseudo-pool-area"><div class="pseudo-item">read weight</div><div class="pseudo-item">Start</div><div class="pseudo-item">print bmi</div><div class="pseudo-item">read height</div><div class="pseudo-item">    print "Overweight"</div><div class="pseudo-item">End</div><div class="pseudo-item">compute bmi = weight / (height_m * height_m)</div><div class="pseudo-item">    print "Normal"</div><div class="pseudo-item">if bmi >= 25 then</div><div class="pseudo-item">compute height_m = height / 100</div><div class="pseudo-item">else</div></div>
        </div>

<div class="pseudo-panel">
            <h3 class="pseudo-panel-title">⚙️ พื้นที่เขียนโปรแกรม (Code Editor)</h3>
            <div id="pseudo-slot-area"><div class="pseudo-slot"><div class="pseudo-slot-num">1</div><div class="pseudo-slot-content"><span style="color:#bbb; font-size:14px; font-style:italic;">(วางคำสั่งที่นี่)</span></div></div><div class="pseudo-slot"><div class="pseudo-slot-num">2</div><div class="pseudo-slot-content"><span style="color:#bbb; font-size:14px; font-style:italic;">(วางคำสั่งที่นี่)</span></div></div><div class="pseudo-slot"><div class="pseudo-slot-num">3</div><div class="pseudo-slot-content"><span style="color:#bbb; font-size:14px; font-style:italic;">(วางคำสั่งที่นี่)</span></div></div><div class="pseudo-slot"><div class="pseudo-slot-num">4</div><div class="pseudo-slot-content"><span style="color:#bbb; font-size:14px; font-style:italic;">(วางคำสั่งที่นี่)</span></div></div><div class="pseudo-slot"><div class="pseudo-slot-num">5</div><div class="pseudo-slot-content"><span style="color:#bbb; font-size:14px; font-style:italic;">(วางคำสั่งที่นี่)</span></div></div><div class="pseudo-slot"><div class="pseudo-slot-num">6</div><div class="pseudo-slot-content"><span style="color:#bbb; font-size:14px; font-style:italic;">(วางคำสั่งที่นี่)</span></div></div><div class="pseudo-slot"><div class="pseudo-slot-num">7</div><div class="pseudo-slot-content"><span style="color:#bbb; font-size:14px; font-style:italic;">(วางคำสั่งที่นี่)</span></div></div><div class="pseudo-slot"><div class="pseudo-slot-num">8</div><div class="pseudo-slot-content"><span style="color:#bbb; font-size:14px; font-style:italic;">(วางคำสั่งที่นี่)</span></div></div><div class="pseudo-slot"><div class="pseudo-slot-num">9</div><div class="pseudo-slot-content"><span style="color:#bbb; font-size:14px; font-style:italic;">(วางคำสั่งที่นี่)</span></div></div><div class="pseudo-slot"><div class="pseudo-slot-num">10</div><div class="pseudo-slot-content"><span style="color:#bbb; font-size:14px; font-style:italic;">(วางคำสั่งที่นี่)</span></div></div><div class="pseudo-slot"><div class="pseudo-slot-num">11</div><div class="pseudo-slot-content"><span style="color:#bbb; font-size:14px; font-style:italic;">(วางคำสั่งที่นี่)</span></div></div></div>
        </div>
    </div>

<div class="pseudo-btn-group">
        <button class="pseudo-btn pseudo-btn-reset" onclick="pseudoReset()">🔄 เริ่มใหม่</button>
        <button class="pseudo-btn" onclick="pseudoCheck()">✔️ ตรวจสอบโค้ด (Compile)</button>
    </div>

<div class="pseudo-modal-bg" id="pseudo-modal">
        <div class="pseudo-modal-box">
            <div id="pseudo-icon" style="font-size: 60px; margin-bottom: 15px;">🏆</div>
            <h2 id="pseudo-msg-title" style="margin-top: 0; color: #8B0F0F;">สุดยอด!</h2>
            <p id="pseudo-msg-desc" style="font-size: 16px;"></p>
            <button class="pseudo-btn" style="margin-top: 15px;" onclick="pseudoCloseModal()">ปิดหน้าต่าง</button>
        </div>
    </div>

let pseudoPool = [];
        let pseudoSlots = new Array(11).fill(null);

function pseudoInit() {
            // คัดลอกและสุ่มคลังคำสั่ง
            pseudoPool = [...pseudoCorrect].sort(() => Math.random() - 0.5);
            pseudoSlots = new Array(11).fill(null);
            pseudoRender();
        }

function pseudoRender() {
            const poolArea = document.getElementById('pseudo-pool-area');
            const slotArea = document.getElementById('pseudo-slot-area');

// Render Pool
            poolArea.innerHTML = "";
            pseudoPool.forEach(item => {
                const div = document.createElement('div');
                div.className = "pseudo-item";
                // ใช้ replace เพื่อให้เว้นวรรคแสดงผลใน HTML ได้ถูกต้อง
                div.innerHTML = item.text.replace(/ {4}/g, '    '); 
                div.onclick = () => moveToSlot(item.id);
                poolArea.appendChild(div);
            });

if(pseudoPool.length === 0) {
                poolArea.innerHTML = '<p style="text-align:center; color:#999;">(คลังคำสั่งว่างเปล่า)</p>';
            }

// Render Slots
            slotArea.innerHTML = "";
            pseudoSlots.forEach((item, index) => {
                const slot = document.createElement('div');
                slot.className = "pseudo-slot";
                
                const num = document.createElement('div');
                num.className = "pseudo-slot-num";
                num.innerText = index + 1;
                slot.appendChild(num);

const content = document.createElement('div');
                content.className = "pseudo-slot-content";

if(item) {
                    const iDiv = document.createElement('div');
                    iDiv.className = "pseudo-item";
                    iDiv.style.margin = "0";
                    iDiv.style.width = "95%";
                    iDiv.innerHTML = item.text.replace(/ {4}/g, '    ');
                    iDiv.onclick = () => moveToPool(index);
                    content.appendChild(iDiv);
                } else {
                    content.innerHTML = '<span style="color:#bbb; font-size:14px; font-style:italic;">(วางคำสั่งที่นี่)</span>';
                }

slot.appendChild(content);
                slotArea.appendChild(slot);
            });
        }

function moveToSlot(id) {
            const emptyIdx = pseudoSlots.indexOf(null);
            if(emptyIdx !== -1) {
                const itemIdx = pseudoPool.findIndex(i => i.id === id);
                const item = pseudoPool.splice(itemIdx, 1)[0];
                pseudoSlots[emptyIdx] = item;
                pseudoRender();
            }
        }

function moveToPool(slotIdx) {
            const item = pseudoSlots[slotIdx];
            pseudoSlots[slotIdx] = null;
            pseudoPool.push(item);
            pseudoRender();
        }

function pseudoReset() {
            pseudoInit();
        }

function pseudoCheck() {
            if(pseudoSlots.includes(null)) {
                showPseudoModal("⚠️", "โปรแกรมยังไม่สมบูรณ์!", "กรุณานำคำสั่งมาเรียงให้ครบทั้ง 11 บรรทัดก่อนกดตรวจสอบ (Compile) นะครับ", false);
                return;
            }

let isCorrect = true;
            for(let i=0; i<11; i++) {
                if(pseudoSlots[i].id !== pseudoCorrect[i].id) {
                    isCorrect = false;
                    break;
                }
            }

if(isCorrect) {
                showPseudoModal("🎉", "Compile ผ่านฉลุย!", "ยอดเยี่ยมมาก! คุณเขียนรหัสลำลองได้ถูกต้องตามหลักการเป๊ะ ทั้งการรับค่า การประมวลผล และการใช้เงื่อนไข (If-Else) เตรียมตัวเป็นโปรแกรมเมอร์ได้เลย!", true);
            } else {
                showPseudoModal("🐛", "พบข้อผิดพลาด (Syntax Error)!", "ลำดับการทำงานยังมีจุดที่ไม่ถูกต้อง ลองตรวจสอบดูว่า:<br>1. เริ่มต้น/สิ้นสุด ถูกต้องไหม?<br>2. ลำดับการรับค่าและคำนวณถูกต้องหรือเปล่า?<br>3. คำสั่งภายใต้ If/Else อยู่ถูกที่ไหม?", false);
            }
        }

function showPseudoModal(icon, title, desc, isSuccess) {
            document.getElementById('pseudo-icon').innerText = icon;
            document.getElementById('pseudo-msg-title').innerText = title;
            document.getElementById('pseudo-msg-title').style.color = isSuccess ? "#2E7D32" : "#8B0F0F";
            document.getElementById('pseudo-msg-desc').innerHTML = desc;
            document.getElementById('pseudo-modal').style.display = 'flex';
        }

function pseudoCloseModal() {
            document.getElementById('pseudo-modal').style.display = 'none';
        }

// เริ่มเกมทันทีที่สคริปต์โหลดเสร็จ
        pseudoInit();
    </script>
</div>