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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@400;600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="cfq-global-container">
    
    <div class="cfq-wrapper" id="cfq-game-container">
        
        
        <div id="cfq-screen-start" class="cfq-screen cfq-active">
            <div class="cfq-emoji-header">🔁☕</div>
            <h1 class="cfq-title">Flowchart Quest</h1>
            <p class="cfq-subtitle">ภารกิจพิชิตผังงาน (เรื่อง ลูปทำซ้ำ)</p>
            
            <div class="cfq-rules-box">
                <h3 class="cfq-rules-title">📋 กติกาการแข่งขัน</h3>
                <ul class="cfq-rules-list">
                    <li>ลาก <strong>"บล็อกคำสั่ง"</strong> ไปวางในผังงานให้ถูกต้องตามตรรกะ</li>
                    <li>สังเกต <strong>เส้นลูกศรวนลูป</strong> ให้ดี ว่าต้องลากกลับไปทำงานใด</li>
                    <li>ทำสำเร็จครบ 3 สถานการณ์เพื่อเป็นสุดยอดนักเขียนโปรแกรม!</li>
                </ul>
            </div>
            
            <button class="cfq-btn cfq-btn-primary" onclick="cfq_promptName()">ลงทะเบียนเข้าเล่น 🚀</button>
        </div>

<div id="cfq-screen-game" class="cfq-screen" style="padding: 20px; justify-content: flex-start;">
            
            <div class="cfq-hud">
                <div class="cfq-hud-item">
                    <span class="cfq-hud-label">ผู้เล่น</span><br>
                    <strong id="cfq-ui-name" class="cfq-hud-text-red">-</strong>
                </div>
                <div class="cfq-hud-item cfq-text-center">
                    <span class="cfq-hud-label">ภารกิจที่</span><br>
                    <strong class="cfq-hud-text-darkred"><span id="cfq-ui-level">1</span>/3</strong>
                </div>
                <div class="cfq-hud-item cfq-text-right">
                    <span class="cfq-hud-label">สถานะ</span><br>
                    <strong class="cfq-hud-text-red" id="cfq-ui-status">กำลังเล่น ⏳</strong>
                </div>
            </div>

<h2 id="cfq-mission-title" class="cfq-mission-header">สถานการณ์: -</h2>

<div class="cfq-flowchart" id="cfq-flowchart-area">
                
                <div class="cfq-loop-container">
                    <div class="cfq-loop-top"><div class="cfq-loop-arrowhead"></div></div>
                    <div class="cfq-loop-right"><span class="cfq-loop-label">ไม่ใช่ ❌</span></div>
                    <div class="cfq-loop-bottom"></div>
                </div>

<div class="cfq-dropzone cfq-term-node" data-type="start" id="cfq-drop-1"><span class="cfq-hint-text">วางจุดเริ่มต้น</span></div>
                <div class="cfq-arrow-down"></div>
                
                <div class="cfq-dropzone cfq-process" data-type="process1" id="cfq-drop-2"><span class="cfq-hint-text">การปฏิบัติงานในลูป</span></div>
                <div class="cfq-arrow-down"></div>
                
                <div class="cfq-diamond-wrapper">
                    <div class="cfq-dropzone cfq-diamond" data-type="decision" id="cfq-drop-3">
                        <span class="cfq-hint-text">วางเงื่อนไข</span>
                    </div>
                </div>
                <div class="cfq-arrow-down"></div>
                <div class="cfq-path-label cfq-true-path">ใช่ (True) ✅</div>
                
                <div class="cfq-dropzone cfq-process" data-type="process2" id="cfq-drop-4"><span class="cfq-hint-text">ทำงานเมื่อหลุดลูป</span></div>
                <div class="cfq-arrow-down"></div>
                
                <div class="cfq-dropzone cfq-term-node" data-type="end" id="cfq-drop-5"><span class="cfq-hint-text">วางจุดสิ้นสุด</span></div>
            </div>

<div class="cfq-choices-panel" id="cfq-choices-panel">
                
            </div>
            
            <button class="cfq-btn cfq-btn-success" id="cfq-next-btn" style="display: none; margin-top: 20px; align-self: center;" onclick="cfq_nextLevel()">ไปภารกิจถัดไป ➡️</button>
        </div>

<div id="cfq-screen-result" class="cfq-screen">
            <div class="cfq-emoji-header cfq-anim-pop">🎉🏆</div>
            <h1 class="cfq-title cfq-text-red">ยอดเยี่ยมมาก!</h1>
            <p class="cfq-subtitle cfq-text-darkred">คุณพิชิตภารกิจผังงานลูปครบถ้วน</p>
            
            <div class="cfq-rules-box cfq-result-box">
                <p class="cfq-result-p">โปรแกรมเมอร์: <strong id="cfq-result-name" class="cfq-result-highlight">-</strong></p>
                <p class="cfq-result-p-small">คุณเข้าใจตรรกะการทำซ้ำ</p>
                <p class="cfq-result-p-large">และเส้นลูกศรย้อนกลับ!</p>
            </div>
            
            <button class="cfq-btn cfq-btn-primary" onclick="cfq_restartGame()">เล่นอีกครั้ง 🔄</button>
        </div>
    </div>
</div>

.cfq-wrapper {
        width: 100%; max-width: 900px; margin: 0 auto;
        background: #ECEFF1; border-radius: 20px;
        box-shadow: 0 10px 30px rgba(120, 0, 22, 0.15);
        border: 4px solid #780016; overflow: hidden;
        position: relative; color: #333;
    }

.cfq-screen { display: none; padding: 40px 30px; animation: cfqFadeIn 0.3s ease-out forwards; min-height: 600px; flex-direction: column; justify-content: center; align-items: center; }
    .cfq-screen.cfq-active { display: flex; }

/* Animations */
    @keyframes cfqFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes cfqFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    @keyframes cfqPop { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
    @keyframes cfqShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px) rotate(-3deg); } 40%, 80% { transform: translateX(10px) rotate(3deg); } }
    @keyframes cfqPopIn { 0% { transform: scale(0.5); } 100% { transform: scale(1); } }
    @keyframes cfqPopInDiamond { 0% { transform: rotate(-45deg) scale(0.5); } 100% { transform: rotate(-45deg) scale(1); } }

/* Typography inside cfq */
    .cfq-emoji-header { font-size: 70px; margin-bottom: 10px; animation: cfqFloat 2s ease-in-out infinite; line-height: 1; }
    .cfq-anim-pop { animation: cfqPop 1s infinite alternate; }
    .cfq-title { font-size: 36px !important; color: #780016 !important; margin: 0 0 5px 0 !important; font-weight: 900 !important; text-align: center !important; line-height: 1.2 !important; font-family: 'Prompt', sans-serif !important;}
    .cfq-subtitle { font-size: 18px !important; color: #E63946 !important; font-weight: 600 !important; margin: 0 0 25px 0 !important; text-align: center !important; line-height: 1.2 !important; font-family: 'Prompt', sans-serif !important;}
    
    .cfq-text-red { color: #E63946 !important; }
    .cfq-text-darkred { color: #780016 !important; }
    .cfq-text-center { text-align: center !important; }
    .cfq-text-right { text-align: right !important; }

/* Boxes & UI */
    .cfq-rules-box { background: #780016; border: 3px solid #E63946; padding: 25px; border-radius: 15px; margin: 0 auto 30px auto; max-width: 500px; box-shadow: 0 8px 15px rgba(230, 57, 70, 0.3); }
    .cfq-rules-title { color: #FFCDD2; margin-top: 0; font-size: 18px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); margin-bottom: 10px; font-weight: 600; }
    .cfq-rules-list { margin: 0; font-size: 15px; color: #FFFFFF; line-height: 1.6; text-align: left; padding-left: 20px; list-style-type: disc; }
    
    .cfq-result-box { text-align: center; border-color: #E63946; background: #780016; width: 100%; }
    .cfq-result-p { margin: 0; font-size: 18px; color: #FFF; }
    .cfq-result-highlight { color: #FFCDD2; font-size: 22px; font-weight: 800; }
    .cfq-result-p-small { margin: 15px 0 5px 0; font-size: 16px; color: #FFEBEE; }
    .cfq-result-p-large { margin: 0; font-size: 24px; font-weight: 900; color: #FFCDD2; }

/* Buttons */
    .cfq-btn { display: inline-block; padding: 15px 35px; font-size: 18px; font-weight: 800; border: none; border-radius: 12px; cursor: pointer; transition: all 0.1s; font-family: 'Prompt', sans-serif; text-align: center; line-height: 1; }
    .cfq-btn-primary { background: #780016; color: #FFFFFF; box-shadow: 0 6px 0 #4A000D; }
    .cfq-btn-primary:active { transform: translateY(6px); box-shadow: 0 0px 0 #4A000D; }
    .cfq-btn-success { background: #E63946; color: #FFFFFF; box-shadow: 0 6px 0 #B31222; }
    .cfq-btn-success:active { transform: translateY(6px); box-shadow: 0 0px 0 #B31222; }

/* HUD */
    .cfq-hud { display: flex; justify-content: space-between; align-items: center; width: 100%; background: #FFFFFF; padding: 10px 20px; border-radius: 12px; margin-bottom: 20px; border: 2px solid #780016; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
    .cfq-hud-item { flex: 1; text-align: left; line-height: 1.2; }
    .cfq-hud-label { font-size: 12px; color: #78909C; font-weight: bold; }
    .cfq-hud-text-red { font-size: 16px; color: #E63946; font-weight: 600;}
    .cfq-hud-text-darkred { font-size: 20px; color: #780016; font-weight: 800; }

.cfq-mission-header { color: #780016 !important; font-size: 20px !important; margin-bottom: 25px !important; text-align: center !important; font-weight: bold !important; font-family: 'Prompt', sans-serif !important;}

/* Flowchart Layout */
    .cfq-flowchart { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 500px; position: relative; margin: 0 auto 20px auto; padding: 20px 0; }
    .cfq-arrow-down { width: 4px; height: 35px; background-color: #780016; z-index: 1; transition: all 0.3s; margin: 5px 0;}
    .cfq-path-label { color: #FFF; padding: 4px 15px; border-radius: 20px; font-size: 0.85rem; z-index: 2; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.2); background: #2E7D32; margin-bottom: 5px; }

/* Loop Lines (Red Theme) */
    .cfq-loop-container { position: absolute; top: 130px; right: 40px; width: 100px; height: 180px; z-index: 1; pointer-events: none; }
    .cfq-loop-top { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #E63946; }
    .cfq-loop-right { position: absolute; top: 0; bottom: 0; right: 0; width: 4px; background: #E63946; display: flex; align-items: center; }
    .cfq-loop-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: #E63946; }
    .cfq-loop-arrowhead { position: absolute; top: -7px; left: -2px; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 14px solid #E63946; }
    .cfq-loop-label { position: absolute; right: -20px; background: #E63946; color: #FFF; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; transform: translateX(100%); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

/* Dropzones Standard Shapes */
    .cfq-dropzone { display: flex; align-items: center; justify-content: center; background-color: rgba(255,255,255,0.6); transition: all 0.3s ease; z-index: 2; color: #94a3b8; font-size: 0.9rem; text-align: center; position: relative; }
    .cfq-hint-text { font-weight: normal; color: #94a3b8; }

.cfq-term-node { width: 200px; height: 60px; border-radius: 40px; border: 3px dashed #B0BEC5; }
    .cfq-term-node.cfq-filled { border: 3px solid #780016; background-color: #FFF; box-shadow: 0 4px 10px rgba(120,0,22,0.2); }
    .cfq-term-node.cfq-drag-over { border-color: #E63946; background-color: #FFEBEE; transform: scale(1.05); }

.cfq-process { width: 240px; min-height: 65px; border: 3px dashed #B0BEC5; border-radius: 6px; }
    .cfq-process.cfq-drag-over { border-color: #E63946; background-color: #FFEBEE; transform: scale(1.05); }
    .cfq-process.cfq-filled { border: 3px solid #780016; background-color: #FFF; box-shadow: 0 4px 10px rgba(120,0,22,0.2); }

.cfq-diamond-wrapper { width: 140px; height: 140px; position: relative; margin: 15px 0; display: flex; justify-content: center; align-items: center;}
    .cfq-diamond { width: 100px; height: 100px; border: 3px dashed #B0BEC5; transform: rotate(45deg); position: absolute; }
    .cfq-diamond .cfq-hint-text { transform: rotate(-45deg); display: block; width: 140px; }
    .cfq-diamond.cfq-drag-over { border-color: #E63946; background-color: #FFEBEE; transform: rotate(45deg) scale(1.05); }
    .cfq-diamond.cfq-filled { border: 3px solid #780016; background-color: #FFF; box-shadow: 0 4px 10px rgba(120,0,22,0.2); }

/* Draggable Blocks Panel */
    .cfq-choices-panel { width: 100%; background: #FFF; padding: 20px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; border: 2px solid #FFCDD2; margin-top: 10px; }
    .cfq-draggable { background-color: #FFF; color: #780016; border: 2px solid #E63946; border-radius: 8px; padding: 12px 20px; font-weight: bold; cursor: grab; box-shadow: 0 4px 0 #B31222; transition: transform 0.1s, box-shadow 0.1s; user-select: none; font-size: 15px; z-index: 10; line-height: 1.2;}
    .cfq-draggable:active, .cfq-draggable.cfq-dragging { cursor: grabbing; transform: translateY(4px); box-shadow: 0 0 0 #B31222; opacity: 0.8; }

/* Blocks in Slots */
    .cfq-term-node .cfq-draggable.cfq-in-slot, .cfq-process .cfq-draggable.cfq-in-slot { box-shadow: none; border: none; background: transparent; cursor: default; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; animation: cfqPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); padding: 0; color: #780016; font-size: 14px; margin: 0;}
    .cfq-diamond .cfq-draggable.cfq-in-slot { box-shadow: none; border: none; background: transparent; cursor: default; width: 140px; display: flex; align-items: center; justify-content: center; transform: rotate(-45deg); animation: cfqPopInDiamond 0.3s forwards; padding: 0; color: #780016; font-size: 13px; text-align: center; margin: 0;}

.cfq-wrong-shake { animation: cfqShake 0.5s ease; border-color: red !important; }

/* Completed State Glow */
    .cfq-flowchart.cfq-completed .cfq-arrow-down { background-color: #2E7D32 !important; }
    .cfq-flowchart.cfq-completed .cfq-loop-top, .cfq-flowchart.cfq-completed .cfq-loop-right, .cfq-flowchart.cfq-completed .cfq-loop-bottom { background-color: #2E7D32 !important; }
    .cfq-flowchart.cfq-completed .cfq-loop-arrowhead { border-right-color: #2E7D32 !important; }
    .cfq-flowchart.cfq-completed .cfq-loop-label { background: #2E7D32 !important; }
    .cfq-flowchart.cfq-completed .cfq-dropzone { border-color: #2E7D32 !important; }
    .cfq-flowchart.cfq-completed .cfq-draggable.cfq-in-slot { color: #2E7D32 !important; }

/* SweetAlert Customization for CFQ */
    .cfq-swal-popup { background: #ECEFF1 !important; border: 4px solid #780016 !important; border-radius: 20px !important; font-family: 'Prompt', sans-serif !important; }
    .cfq-swal-title { color: #780016 !important; font-size: 24px !important; font-weight: 800 !important; }
    .cfq-swal-confirm { background: #E63946 !important; color: #FFF !important; font-weight: bold !important; border-radius: 12px !important; box-shadow: 0 4px 0 #B31222 !important; padding: 12px 25px !important; font-size: 16px !important;}
</style>

const cfq_missions = [
        {
            title: "ชงอเมริกาโน่มะนาวโซดา ☕",
            blocks: [
                { id: "b1", text: "เริ่มต้น", type: "start" },
                { id: "b2", text: "ปั๊มน้ำมะนาว 1 ครั้ง", type: "process1" },
                { id: "b3", text: "ครบ 3 ปั๊มแล้วใช่ไหม?", type: "decision" },
                { id: "b4", text: "เติมกาแฟและโซดา", type: "process2" },
                { id: "b5", text: "สิ้นสุด", type: "end" }
            ]
        },
        {
            title: "วิ่งรอบสนาม รร.วัดศรีษะทอง 🏃‍♂️",
            blocks: [
                { id: "b1", text: "เริ่มต้น", type: "start" },
                { id: "b2", text: "วิ่งรอบสนาม 1 รอบ", type: "process1" },
                { id: "b3", text: "วิ่งครบ 5 รอบหรือยัง?", type: "decision" },
                { id: "b4", text: "ดื่มน้ำพักผ่อน", type: "process2" },
                { id: "b5", text: "สิ้นสุด", type: "end" }
            ]
        },
        {
            title: "เขียนโปรแกรมเกมเก็บเหรียญ 👾",
            blocks: [
                { id: "b1", text: "เริ่มต้น", type: "start" },
                { id: "b2", text: "เก็บได้ 1 เหรียญ", type: "process1" },
                { id: "b3", text: "เหรียญครบ 10 หรือยัง?", type: "decision" },
                { id: "b4", text: "แสดงข้อความ You Win!", type: "process2" },
                { id: "b5", text: "สิ้นสุด", type: "end" }
            ]
        }
    ];

/* --- Audio System --- */
    function cfq_initAudio() {
        if (!cfq_audioCtx) {
            cfq_audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (cfq_audioCtx.state === 'suspended') cfq_audioCtx.resume();
    }

const cfq_sfx = {
        pop: () => cfq_playTone(400, 'sine', 0.1, 0.2, 200),
        click: () => cfq_playTone(800, 'triangle', 0.1, 0.15),
        boing: () => cfq_playTone(150, 'sawtooth', 0.3, 0.2, 50),
        win: () => {
            setTimeout(() => cfq_playTone(523.25, 'sine', 0.2, 0.2), 0);
            setTimeout(() => cfq_playTone(659.25, 'sine', 0.2, 0.2), 150);
            setTimeout(() => cfq_playTone(783.99, 'sine', 0.2, 0.2), 300);
            setTimeout(() => cfq_playTone(1046.50, 'sine', 0.4, 0.2), 450);
        }
    };

/* --- Flow Control --- */
    function cfq_showScreen(id) {
        document.querySelectorAll('.cfq-screen').forEach(s => s.classList.remove('cfq-active'));
        document.getElementById(id).classList.add('cfq-active');
    }

function cfq_startGame() {
        cfq_currentLevel = 0;
        document.getElementById('cfq-ui-name').innerText = cfq_playerName;
        document.getElementById('cfq-result-name').innerText = cfq_playerName;
        cfq_startBGM();
        cfq_showScreen('cfq-screen-game');
        cfq_loadLevel(cfq_currentLevel);
    }

function cfq_shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
    }

function cfq_loadLevel(levelIdx) {
        cfq_filledCount = 0;
        document.getElementById('cfq-next-btn').style.display = 'none';
        document.getElementById('cfq-flowchart-area').classList.remove('cfq-completed');
        document.getElementById('cfq-ui-status').innerText = 'กำลังเล่น ⏳';
        document.getElementById('cfq-ui-status').style.color = '#E63946';
        
        const mission = cfq_missions[levelIdx];
        document.getElementById('cfq-ui-level').innerText = levelIdx + 1;
        document.getElementById('cfq-mission-title').innerText = `สถานการณ์: ${mission.title}`;

// Reset Dropzones
        const texts = ["วางจุดเริ่มต้น", "การปฏิบัติงานในลูป", "วางเงื่อนไขตรวจสอบ", "ทำงานเมื่อหลุดลูป", "วางจุดสิ้นสุด"];
        document.querySelectorAll('.cfq-dropzone').forEach((zone, index) => {
            if(zone.classList.contains('cfq-diamond')) {
                zone.innerHTML = `<span class="cfq-hint-text">${texts[index]}</span>`;
            } else {
                zone.innerHTML = `<span class="cfq-hint-text">${texts[index]}</span>`;
            }
            zone.classList.remove('cfq-filled');
        });

// Setup Draggable Blocks
        const panel = document.getElementById('cfq-choices-panel');
        panel.innerHTML = '';
        const shuffled = cfq_shuffleArray([...mission.blocks]);
        
        shuffled.forEach(bData => {
            const block = document.createElement('div');
            block.className = 'cfq-draggable';
            block.setAttribute('draggable', 'true');
            block.id = bData.id;
            block.setAttribute('data-type', bData.type);
            block.innerText = bData.text;

block.addEventListener('dragstart', cfq_handleDragStart);
            block.addEventListener('dragend', cfq_handleDragEnd);
            panel.appendChild(block);
        });

cfq_setupDropzones();
    }

/* --- Drag and Drop Logic --- */
    function cfq_handleDragStart(e) {
        cfq_sfx.pop();
        setTimeout(() => this.classList.add('cfq-dragging'), 0);
        e.dataTransfer.setData('text/plain', this.id);
        e.dataTransfer.effectAllowed = 'move';
    }

function cfq_handleDragEnd() {
        this.classList.remove('cfq-dragging');
        document.querySelectorAll('.cfq-dropzone').forEach(z => z.classList.remove('cfq-drag-over'));
    }

function cfq_setupDropzones() {
        const dropzones = document.querySelectorAll('.cfq-dropzone');
        dropzones.forEach(zone => {
            const newZone = zone.cloneNode(true);
            zone.parentNode.replaceChild(newZone, zone);
            
            newZone.addEventListener('dragover', (e) => {
                e.preventDefault(); 
                if (!newZone.classList.contains('cfq-filled')) {
                    newZone.classList.add('cfq-drag-over');
                }
            });

newZone.addEventListener('dragleave', () => {
                newZone.classList.remove('cfq-drag-over');
            });

newZone.addEventListener('drop', function(e) {
                e.preventDefault();
                this.classList.remove('cfq-drag-over');
                
                const droppedId = e.dataTransfer.getData('text/plain');
                const block = document.getElementById(droppedId);
                if (!block) return;

const bType = block.getAttribute('data-type');
                const zType = this.getAttribute('data-type');

if (bType === zType && !this.classList.contains('cfq-filled')) {
                    cfq_sfx.click();
                    this.innerHTML = ''; 
                    
                    block.classList.remove('cfq-draggable');
                    block.classList.add('cfq-in-slot');
                    block.removeAttribute('draggable');
                    
                    if(this.classList.contains('cfq-diamond')){
                        const inner = document.createElement('div');
                        inner.className = 'cfq-hint-text';
                        inner.appendChild(block);
                        this.appendChild(inner);
                    } else {
                        this.appendChild(block);
                    }
                    
                    this.classList.add('cfq-filled');
                    cfq_filledCount++;
                    cfq_checkLevelComplete();
                } else {
                    cfq_sfx.boing();
                    block.classList.add('cfq-wrong-shake');
                    setTimeout(() => block.classList.remove('cfq-wrong-shake'), 500);
                    
                    Swal.fire({
                        title: 'อ๊ะ! ตรรกะยังไม่ตรง',
                        text: 'ลองตรวจสอบรูปทรงสัญลักษณ์สากล หรือลำดับการทำงานใหม่อีกครั้งนะ',
                        icon: 'error',
                        confirmButtonText: 'ลองใหม่',
                        customClass: { popup: 'cfq-swal-popup', title: 'cfq-swal-title', confirmButton: 'cfq-swal-confirm' }
                    });
                }
            });
        });
    }

function cfq_checkLevelComplete() {
        if (cfq_filledCount === 5) {
            setTimeout(() => {
                cfq_sfx.win();
                document.getElementById('cfq-flowchart-area').classList.add('cfq-completed');
                document.getElementById('cfq-ui-status').innerText = 'ผ่านด่าน! 🎉';
                document.getElementById('cfq-ui-status').style.color = '#2E7D32';
                
                let swalTitle = cfq_currentLevel === cfq_missions.length - 1 ? 'เก่งมาก! ด่านสุดท้ายผ่านแล้ว' : 'เก่งมาก! ผ่านด่านแล้ว';
                let swalText = cfq_currentLevel === cfq_missions.length - 1 ? 'คลิกไปต่อเพื่อดูสรุปผลงานของคุณ' : 'ลำดับตรรกะถูกต้อง ผังงานสามารถทำงานวนลูปได้สมบูรณ์';

Swal.fire({
                    title: swalTitle,
                    text: swalText,
                    icon: 'success',
                    confirmButtonText: 'ไปต่อ ➡️',
                    allowOutsideClick: false,
                    customClass: { popup: 'cfq-swal-popup', title: 'cfq-swal-title', confirmButton: 'cfq-swal-confirm' }
                }).then(() => {
                    const nBtn = document.getElementById('cfq-next-btn');
                    nBtn.style.display = 'block';
                    nBtn.style.animation = 'cfqPopIn 0.5s';
                });
            }, 300);
        }
    }

function cfq_restartGame() {
        cfq_playTone(600, 'sine', 0.1, 0.1);
        cfq_showScreen('cfq-screen-start');
    }
</script>