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

Back

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

Title

Description

Keyword

Detail (HTML Code)

/* พื้นที่ตัวเลือกสัญลักษณ์ */
    .flow-options-area { margin-bottom: 25px; }
    .flow-options-area h4 { margin: 0 0 20px 0; color: #0288D1; font-family: 'Prompt', sans-serif; font-size: 18px;}
    
    .flow-symbols-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
    
    .flow-symbol-card { background: white; border: 3px solid #E1F5FE; border-radius: 12px; width: 150px; padding: 20px 10px; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 6px rgba(0,0,0,0.05);}
    .flow-symbol-card:hover { border-color: #0288D1; background: #F1F8E9; transform: translateY(-5px); box-shadow: 0 8px 15px rgba(2,136,209,0.2);}
    .flow-symbol-card:active { transform: translateY(0); }
    
    .flow-symbol-name { font-weight: bold; color: #0288D1; margin-top: 15px; font-size: 14px; }

/* การวาดสัญลักษณ์ด้วย CSS */
    .shape-container { height: 60px; display: flex; align-items: center; justify-content: center; width: 100%;}
    
    .shape-capsule { width: 80px; height: 40px; background-color: #ff9a9e; border-radius: 20px; border: 2px solid #e91e63;}
    .shape-io { width: 80px; height: 40px; background-color: #ffb347; transform: skew(-20deg); border: 2px solid #f57c00;}
    .shape-process { width: 90px; height: 45px; background-color: #4facfe; border: 2px solid #0288d1;}
    .shape-decision { width: 50px; height: 50px; background-color: #f6d365; transform: rotate(45deg); border: 2px solid #fbc02d;}

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

.flow-btn-action { 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; margin-top: 25px;}
    .flow-btn-action:active { transform: translateY(4px); box-shadow: none !important;}

</style>

<div class="wsst-flow-wrapper">
    <div class="flow-container">
        <div class="flow-header">
            <h2>📐 ปรมาจารย์ผังงาน (Flowchart Master)</h2>
            <p>ภารกิจ: อ่านคำสั่งด้านล่าง แล้วเลือก "สัญลักษณ์" ที่ตรงกับหน้าที่ให้ถูกต้อง!</p>
        </div>

<div class="flow-body">
            
            <div class="flow-mission-box">
                <div class="flow-mission-header">
                    <span class="flow-mission-title" id="flow-mission-title">ชื่อระบบ...</span>
                    <div class="flow-level-badge" id="flow-level-text">ด่าน 1/3</div>
                </div>
                <div class="flow-step-box">
                    <div class="flow-step-counter" id="flow-step-counter">ขั้นตอนที่ 1/4</div>
                    <div class="flow-step-text" id="flow-step-text">"ข้อความคำสั่ง..."</div>
                </div>
            </div>

<div class="flow-options-area">
                <h4>👇 เลือกสัญลักษณ์ที่ถูกต้องสำหรับข้อความด้านบน</h4>
                <div class="flow-symbols-grid">
                    
                    <div class="flow-symbol-card" onclick="checkFlowAnswer('start_end')">
                        <div class="shape-container"><div class="shape-capsule"></div></div>
                        <div class="flow-symbol-name">Start/End<br>(เริ่ม/จบ)</div>
                    </div>
                    
                    <div class="flow-symbol-card" onclick="checkFlowAnswer('io')">
                        <div class="shape-container"><div class="shape-io"></div></div>
                        <div class="flow-symbol-name">Input/Output<br>(รับ/แสดงผล)</div>
                    </div>

<div class="flow-symbol-card" onclick="checkFlowAnswer('process')">
                        <div class="shape-container"><div class="shape-process"></div></div>
                        <div class="flow-symbol-name">Process<br>(ประมวลผล)</div>
                    </div>

<div class="flow-symbol-card" onclick="checkFlowAnswer('decision')">
                        <div class="shape-container"><div class="shape-decision"></div></div>
                        <div class="flow-symbol-name">Decision<br>(ตัดสินใจ)</div>
                    </div>

</div>
            </div>

<div class="flow-feedback-overlay" id="flow-feedback-overlay">
                <div class="flow-feedback-icon" id="flow-feedback-icon">✅</div>
                <div class="flow-feedback-title" id="flow-feedback-title">สมบูรณ์แบบ!</div>
                <div class="flow-feedback-msg" id="flow-feedback-msg">คำอธิบาย...</div>
                <button class="flow-btn-action" id="flow-btn-action">ขั้นตอนต่อไป</button>
            </div>

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

let currentFlowMission = 0;
    let currentFlowStep = 0;
    let isFlowProcessing = false;

// โหลดภารกิจ
    function loadFlowMission() {
        const mission = flowMissions[currentFlowMission];
        const step = mission.steps[currentFlowStep];
        
        document.getElementById('flow-mission-title').innerText = mission.title;
        document.getElementById('flow-level-text').innerText = `ด่าน ${currentFlowMission + 1}/${flowMissions.length}`;
        
        document.getElementById('flow-step-counter').innerText = `ขั้นตอนที่ ${currentFlowStep + 1}/${mission.steps.length}`;
        document.getElementById('flow-step-text').innerText = `"${step.text}"`;
        
        document.getElementById('flow-feedback-overlay').style.display = 'none';
        isFlowProcessing = false;
    }

// ตรวจสอบคำตอบเมื่อคลิกสัญลักษณ์
    function checkFlowAnswer(selectedShape) {
        if (isFlowProcessing) return;
        isFlowProcessing = true;

const mission = flowMissions[currentFlowMission];
        const step = mission.steps[currentFlowStep];
        
        const overlay = document.getElementById('flow-feedback-overlay');
        const iconEl = document.getElementById('flow-feedback-icon');
        const titleEl = document.getElementById('flow-feedback-title');
        const msgEl = document.getElementById('flow-feedback-msg');
        const actionBtn = document.getElementById('flow-btn-action');

if (selectedShape === step.shape) {
            // ตอบถูก
            iconEl.innerText = "✅";
            titleEl.innerText = "ถูกต้องแม่นยำ!";
            titleEl.style.color = "#0288D1";
            msgEl.innerHTML = step.explain;
            
            actionBtn.style.backgroundColor = "#4CAF50"; 
            actionBtn.style.boxShadow = "0 4px 0 #2E7D32";
            
            // เช็คว่าเป็นข้อสุดท้ายของด่านหรือไม่
            if (currentFlowStep < mission.steps.length - 1) {
                actionBtn.innerText = "ดำเนินการขั้นตอนต่อไป";
                actionBtn.onclick = () => {
                    currentFlowStep++;
                    loadFlowMission();
                };
            } else {
                // จบด่าน เช็คว่าเป็นด่านสุดท้ายของเกมไหม
                if (currentFlowMission < flowMissions.length - 1) {
                    titleEl.innerText = "🎉 สร้างผังงานสำเร็จ!";
                    actionBtn.innerText = "ไปด่านต่อไป ⏭️";
                    actionBtn.style.backgroundColor = "#FF9800"; 
                    actionBtn.style.boxShadow = "0 4px 0 #F57C00";
                    actionBtn.onclick = () => {
                        currentFlowMission++;
                        currentFlowStep = 0;
                        loadFlowMission();
                    };
                } else {
                    titleEl.innerText = "🏆 ปรมาจารย์ผังงาน!";
                    msgEl.innerHTML = "ยอดเยี่ยมมาก! คุณมีความเข้าใจเรื่องสัญลักษณ์ของ Flowchart ครบทุกสถานการณ์แล้วครับ!";
                    actionBtn.innerText = "เล่นใหม่อีกครั้ง 🔄";
                    actionBtn.style.backgroundColor = "#E91E63"; 
                    actionBtn.style.boxShadow = "0 4px 0 #C2185B";
                    actionBtn.onclick = () => {
                        currentFlowMission = 0;
                        currentFlowStep = 0;
                        loadFlowMission();
                    };
                }
            }
        } else {
            // ตอบผิด
            iconEl.innerText = "❌";
            titleEl.innerText = "ยังไม่ถูกต้องครับ!";
            titleEl.style.color = "#D32F2F";
            
            let correctName = "";
            if(step.shape === 'start_end') correctName = "วงรี (Start/End)";
            if(step.shape === 'io') correctName = "สี่เหลี่ยมด้านขนาน (Input/Output)";
            if(step.shape === 'process') correctName = "สี่เหลี่ยมผืนผ้า (Process)";
            if(step.shape === 'decision') correctName = "สี่เหลี่ยมข้าวหลามตัด (Decision)";

msgEl.innerHTML = `สัญลักษณ์ที่ถูกต้องสำหรับข้อนี้คือ <b>${correctName}</b><br><span style="font-size:15px; color:#555;">เหตุผล: ${step.explain}</span>`;
            
            actionBtn.innerText = "พยายามใหม่อีกครั้ง";
            actionBtn.style.backgroundColor = "#F44336"; 
            actionBtn.style.boxShadow = "0 4px 0 #C62828";
            actionBtn.onclick = () => {
                document.getElementById('flow-feedback-overlay').style.display = 'none';
                isFlowProcessing = false;
            };
        }

overlay.style.display = 'flex';
    }

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