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

Back

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

Title

Description

Keyword

Detail (HTML Code)

/* พื้นที่จัดเรียงรหัสลำลอง */
    .pt-my-sequence { background: #282c34; border: 3px solid #61afef; border-radius: 12px; padding: 20px; margin-bottom: 25px; min-height: 180px; display: flex; flex-direction: column; gap: 10px; }
    .pt-my-sequence h4 { margin: 0 0 15px 0; color: #61afef; font-family: 'Prompt', sans-serif; text-align: center; }
    
    .pt-step-slot { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: center;}
    .pt-step-content { background: #3e4451; border: 2px solid #98c379; padding: 12px 20px; border-radius: 8px; font-size: 18px; color: #98c379 !important; cursor: pointer; transition: 0.2s; font-family: monospace; font-weight: bold; width: 100%; max-width: 400px; text-align: left; position: relative;}
    .pt-step-content:hover { background: #4b5263; border-color: #e5c07b; color: #e5c07b !important;}
    .pt-step-content::before { content: '×'; position: absolute; right: 15px; color: #e06c75; font-weight: bold; opacity: 0; transition: 0.2s;}
    .pt-step-content:hover::before { opacity: 1; }

/* พื้นที่ตัวเลือก (คลังคำสั่ง) */
    .pt-options-area { background: #E3F2FD; padding: 20px; border-radius: 12px; border: 2px solid #90CAF9; margin-bottom: 25px; text-align: center; }
    .pt-options-area h4 { margin: 0 0 15px 0; color: #1565C0; font-family: 'Prompt', sans-serif; }
    .pt-options-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;}
    
    .pt-option-btn { background-color: #1976D2; border: none; padding: 12px 20px; border-radius: 8px; font-size: 16px; cursor: pointer; transition: 0.2s; color: white !important; font-weight: bold; box-shadow: 0 4px 0 #0D47A1; font-family: monospace; letter-spacing: 0.5px;}
    .pt-option-btn:hover { background-color: #1E88E5; transform: translateY(2px); box-shadow: 0 2px 0 #0D47A1; }
    .pt-option-btn:active { transform: translateY(4px); box-shadow: none; }
    .pt-option-btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: translateY(4px); background-color: #78909C;}

/* ปุ่มควบคุม */
    .pt-controls { display: flex; gap: 15px; justify-content: center; }
    .pt-btn { padding: 12px 30px; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; color: white !important; font-family: 'Prompt', sans-serif; transition: 0.2s; }
    .pt-btn-check { background-color: #4CAF50; box-shadow: 0 4px 0 #2E7D32; }
    .pt-btn-check:active { transform: translateY(4px); box-shadow: none; }
    .pt-btn-reset { background-color: #F44336; box-shadow: 0 4px 0 #C62828; }
    .pt-btn-reset:active { transform: translateY(4px); box-shadow: none; }

/* ฟีดแบค Overlay */
    .pt-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; text-align: center;}
    .pt-feedback-icon { font-size: 70px; margin-bottom: 15px; }
    .pt-feedback-title { font-size: 26px; font-weight: bold; font-family: 'Prompt', sans-serif; margin-bottom: 10px; }
    .pt-feedback-msg { font-size: 18px; color: #333 !important; padding: 0 20px; max-width: 600px; line-height: 1.6;}

</style>

<div class="wsst-pt-wrapper">
    <div class="pt-container">
        <div class="pt-header">
            <h2>💻 Pseudo Translator (เครื่องแปลรหัสลำลอง)</h2>
            <p>ภารกิจ: แปลง "ภาษาบรรยาย" ด้านบน ให้เป็น "รหัสลำลอง" ในกล่องสีดำให้ถูกต้อง!</p>
        </div>

<div class="pt-body">
            
            <div class="pt-mission-box">
                <div class="pt-mission-header">
                    <span class="pt-mission-title">📝 โจทย์ภาษาบรรยาย (Narrative):</span>
                    <div class="pt-level-badge" id="pt-level-text">ด่าน 1/3</div>
                </div>
                <div class="pt-narrative-box">
                    <div class="pt-narrative-text" id="pt-mission-text">
                        กำลังโหลดภารกิจ...
                    </div>
                </div>
            </div>

<div class="pt-my-sequence">
                <h4>✨ รหัสลำลองของคุณ (คลิกที่บล็อกโค้ดเพื่อเอาออก)</h4>
                <div id="pt-sequence-list" style="width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px;">
                    <span style="color: #abb2bf; margin-top: 20px; font-family: 'Sarabun';">(คลิกเลือกคำสั่งด้านล่าง เพื่อนำมาต่อเป็นรหัสลำลองที่นี่)</span>
                </div>
            </div>

<div class="pt-options-area">
                <h4>👉 คลังบล็อกคำสั่ง (คลิกตามลำดับที่ถูกต้อง)</h4>
                <div class="pt-options-container" id="pt-options-container">
                    </div>
            </div>

<div class="pt-controls">
                <button class="pt-btn pt-btn-reset" onclick="resetPtSequence()">🔄 ล้างโค้ด</button>
                <button class="pt-btn pt-btn-check" onclick="checkPtAnswer()">🔍 รันโค้ดตรวจสอบ</button>
            </div>

<div class="pt-feedback-overlay" id="pt-feedback-overlay">
                <div class="pt-feedback-icon" id="pt-feedback-icon">✅</div>
                <div class="pt-feedback-title" id="pt-feedback-title">สมบูรณ์แบบ!</div>
                <div class="pt-feedback-msg" id="pt-feedback-msg">คำอธิบาย...</div>
                <button class="pt-btn pt-btn-check" style="margin-top: 25px;" id="pt-btn-action">แก้ไขโค้ด</button>
            </div>

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

let currentPtLevel = 0;
    let availablePtSteps = []; 
    let myPtSequence = [];

// ฟังก์ชันสลับลำดับตัวเลือก (Fisher-Yates)
    function shufflePtArray(array) {
        let currentIndex = array.length, randomIndex;
        while (currentIndex != 0) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex--;
            [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
        }
        return array;
    }

// โหลดภารกิจ
    function loadPtLevel() {
        const mission = ptMissions[currentPtLevel];
        document.getElementById('pt-mission-text').innerHTML = mission.narrative; // ใช้ innerHTML เพราะมีแท็ก <br>
        document.getElementById('pt-level-text').innerText = `ด่าน ${currentPtLevel + 1}/${ptMissions.length}`;
        
        // สลับบล็อกคำสั่ง
        availablePtSteps = shufflePtArray([...mission.steps]);
        myPtSequence = [];
        
        updatePtUI();
        document.getElementById('pt-feedback-overlay').style.display = 'none';
    }

// อัปเดตหน้าจอหลัก
    function updatePtUI() {
        renderPtAvailableSteps();
        renderMyPtSequence();
    }

// สร้างปุ่มบล็อกคำสั่ง (คลัง)
    function renderPtAvailableSteps() {
        const container = document.getElementById('pt-options-container');
        container.innerHTML = '';

availablePtSteps.forEach(step => {
            const isUsed = myPtSequence.some(item => item.id === step.id);
            const btn = document.createElement('button');
            btn.className = `pt-option-btn ${isUsed ? 'disabled' : ''}`;
            btn.innerText = step.text;
            if (!isUsed) {
                btn.onclick = () => selectPtStep(step);
            }
            container.appendChild(btn);
        });
    }

// สร้างลิสต์โค้ดที่นักเรียนเลือก
    function renderMyPtSequence() {
        const listContainer = document.getElementById('pt-sequence-list');
        listContainer.innerHTML = '';

if (myPtSequence.length === 0) {
            listContainer.innerHTML = '<span style="color: #abb2bf; margin-top: 20px; font-family: Sarabun;">(คลิกเลือกคำสั่งด้านล่าง เพื่อนำมาต่อเป็นรหัสลำลองที่นี่)</span>';
            return;
        }

myPtSequence.forEach((step, index) => {
            const slot = document.createElement('div');
            slot.className = 'pt-step-slot';
            
            const content = document.createElement('div');
            content.className = 'pt-step-content';
            
            // ทำให้โค้ดดูมีการย่อหน้า (Indentation) ถ้าไม่ใช่ Start/End
            let indent = "";
            if(step.text !== "Start" && step.text !== "End") {
                indent = "    "; // เคาะเว้นวรรค
            }
            
            content.innerHTML = `${indent}${step.text}`;
            content.onclick = () => removePtStep(index);

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

function selectPtStep(step) {
        if (myPtSequence.length < ptMissions[currentPtLevel].steps.length) {
            myPtSequence.push(step);
            updatePtUI();
        }
    }

function removePtStep(index) {
        myPtSequence.splice(index, 1);
        updatePtUI();
    }

function resetPtSequence() {
        myPtSequence = [];
        updatePtUI();
    }

// ตรวจสอบโค้ด
    function checkPtAnswer() {
        const mission = ptMissions[currentPtLevel];

if (myPtSequence.length < mission.steps.length) {
            showPtFeedback("⚠️ โค้ดยังไม่สมบูรณ์!", "รหัสลำลองต้องมีคำสั่งให้ครบถ้วน รวมถึง Start และ End ด้วยนะครับ", "warning");
            return;
        }

let isCorrect = true;
        for (let i = 0; i < mission.steps.length; i++) {
            if (myPtSequence[i].id !== mission.steps[i].id) {
                isCorrect = false;
                break;
            }
        }

if (isCorrect) {
            if (currentPtLevel < ptMissions.length - 1) {
                showPtFeedback("🎉 คอมไพล์ผ่าน! (Code Success)", mission.explanation, "success", true);
            } else {
                showPtFeedback("🏆 โปรแกรมเมอร์ยอดเยี่ยม!", "คุณสามารถแปลภาษาบรรยายเป็นรหัสลำลองได้อย่างสมบูรณ์แบบครบทุกด่านแล้ว!", "success", false);
            }
        } else {
            showPtFeedback("💥 Syntax Error! (โค้ดผิดพลาด)", "ลำดับของรหัสลำลองไม่ถูกต้อง หรือลืมใส่ Start/End ให้ถูกที่ ลองลบแล้วเรียงใหม่ดูนะ", "error");
        }
    }

function showPtFeedback(title, msg, type, isNextLevel = false) {
        const overlay = document.getElementById('pt-feedback-overlay');
        const iconEl = document.getElementById('pt-feedback-icon');
        const titleEl = document.getElementById('pt-feedback-title');
        const actionBtn = document.getElementById('pt-btn-action');
        
        titleEl.innerText = title;
        document.getElementById('pt-feedback-msg').innerHTML = msg;

if (type === 'success') {
            iconEl.innerText = "✅";
            titleEl.style.color = "#0D47A1";
            actionBtn.style.backgroundColor = "#FFC107"; 
            actionBtn.style.color = "#0D47A1";
            actionBtn.style.boxShadow = "0 4px 0 #F57F17";
            
            if (isNextLevel) {
                actionBtn.innerText = "⏭️ ด่านต่อไป";
                actionBtn.onclick = () => {
                    closePtFeedback();
                    currentPtLevel++;
                    loadPtLevel();
                };
            } else {
                actionBtn.innerText = "🔄 เล่นใหม่อีกครั้ง";
                actionBtn.onclick = () => {
                    closePtFeedback();
                    currentPtLevel = 0;
                    loadPtLevel();
                };
            }
        } else if (type === 'error') {
            iconEl.innerText = "❌";
            titleEl.style.color = "#C62828";
            actionBtn.innerText = "⚙️ แก้ไขโค้ด (Debug)";
            actionBtn.style.backgroundColor = "#F44336"; 
            actionBtn.style.color = "white";
            actionBtn.style.boxShadow = "0 4px 0 #C62828";
            actionBtn.onclick = closePtFeedback;
        } else {
            iconEl.innerText = "⚠️";
            titleEl.style.color = "#F57F17";
            actionBtn.innerText = "ตกลง";
            actionBtn.style.backgroundColor = "#FFC107";
            actionBtn.style.color = "#0D47A1";
            actionBtn.style.boxShadow = "0 4px 0 #F57F17";
            actionBtn.onclick = closePtFeedback;
        }

overlay.style.display = 'flex';
    }

function closePtFeedback() {
        document.getElementById('pt-feedback-overlay').style.display = 'none';
    }

// โหลดเกมทันที
    setTimeout(loadPtLevel, 200);
</script>