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

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-wrapper" id="cfq-game-container">
    
    
    <div id="cfq-screen-start" class="cfq-screen cfq-active">
        <div style="font-size: 70px; margin-bottom: 10px; animation: cfqFloat 2s ease-in-out infinite;">🧩🚀</div>
        <h1 class="cfq-title">Flowchart Quest</h1>
        <p class="cfq-subtitle">ภารกิจพิชิตผังงาน (ฉบับสัญลักษณ์สากล)</p>
        
        <div class="cfq-rules-box">
            <h3 style="color: #FFCDD2; margin-top: 0; font-size: 18px; text-shadow: 0 1px 2px rgba(0,0,0,0.3);">📋 กติกาการแข่งขัน</h3>
            <ul style="margin: 0; font-size: 15px; color: #FFFFFF; line-height: 1.6; text-align: left; padding-left: 20px;">
                <li>ลาก <strong>"บล็อกคำสั่ง"</strong> ไปวางในผังงานให้ถูกต้องตามตรรกะ</li>
                <li>เรียนรู้การใช้สัญลักษณ์ <strong>การตัดสินใจ (Diamond)</strong> และ <strong>กระบวนการ (Rectangle)</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" style="color: #E63946; font-size: 16px;">-</strong>
            </div>
            <div class="cfq-hud-item" style="text-align: center;">
                <span class="cfq-hud-label">ภารกิจที่</span><br>
                <strong style="color: #780016; font-size: 20px;"><span id="cfq-ui-level">1</span>/3</strong>
            </div>
            <div class="cfq-hud-item" style="text-align: right;">
                <span class="cfq-hud-label">สถานะ</span><br>
                <strong style="font-size: 16px; color: #E63946;" id="cfq-ui-status">กำลังเล่น ⏳</strong>
            </div>
        </div>

<h2 id="cfq-mission-title" style="color: #780016; font-size: 20px; margin-bottom: 15px; text-align: center;">สถานการณ์: -</h2>

<div class="cfq-flowchart" id="cfq-flowchart-area">
            
            <div class="cfq-node cfq-term-node">เริ่มต้น: <span id="cfq-context-display"></span></div>
            <div class="cfq-arrow-down"></div>
            
            
            <div class="cfq-dropzone cfq-diamond" data-type="decision" id="cfq-drop-decision">
                <span class="cfq-hint-text">วางเงื่อนไข (คำถาม)</span>
            </div>

<div class="cfq-branches">
                <div class="cfq-branch-lines"></div>
                
                <div class="cfq-branch">
                    <div class="cfq-path-label cfq-true-path">ใช่ (True) ✅</div>
                    <div class="cfq-dropzone cfq-process" data-type="true" id="cfq-drop-true">
                        <span class="cfq-hint-text">วางสิ่งที่ต้องทำ</span>
                    </div>
                </div>
                
                <div class="cfq-branch">
                    <div class="cfq-path-label cfq-false-path">ไม่ใช่ (False) ❌</div>
                    <div class="cfq-dropzone cfq-process" data-type="false" id="cfq-drop-false">
                        <span class="cfq-hint-text">วางสิ่งที่ต้องทำ</span>
                    </div>
                </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 style="font-size: 80px; margin-bottom: 10px; animation: cfqPop 1s infinite alternate;">🎉🏆</div>
        <h1 class="cfq-title" style="color: #E63946;">ยอดเยี่ยมมาก!</h1>
        <p class="cfq-subtitle" style="color: #780016;">คุณพิชิตภารกิจผังงานครบถ้วน</p>
        
        <div class="cfq-rules-box" style="text-align: center; border-color: #E63946; background: #780016; width: 100%;">
            <p style="margin: 0; font-size: 18px; color: #FFF;">ผู้เข้าแข่งขัน: <strong id="cfq-result-name" style="color: #FFCDD2; font-size: 22px;">-</strong></p>
            <p style="margin: 15px 0 5px 0; font-size: 16px; color: #FFEBEE;">คุณเข้าใจการใช้สัญลักษณ์</p>
            <p style="margin: 0; font-size: 24px; font-weight: 900; color: #FFCDD2;">การตัดสินใจ และ กระบวนการ</p>
        </div>
        
        <button class="cfq-btn cfq-btn-primary" onclick="cfq_restartGame()">เล่นอีกครั้ง 🔄</button>
    </div>
</div>

.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; }

@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); } }

.cfq-title { font-size: 36px; color: #780016; margin: 0 0 5px 0; font-weight: 900; text-align: center; }
    .cfq-subtitle { font-size: 18px; color: #E63946; font-weight: 600; margin: 0 0 25px 0; text-align: center; }

.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-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;
    }
    .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; }

.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; }

/* Flowchart Layout */
    .cfq-flowchart {
        display: flex; flex-direction: column; align-items: center;
        width: 100%; position: relative; margin-bottom: 20px;
    }

.cfq-node { background: #FFF; border: 3px solid #780016; font-weight: bold; z-index: 2; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; padding: 10px 25px; color: #780016; }
    .cfq-term-node { border-radius: 50px; min-width: 150px; }

.cfq-arrow-down { width: 4px; height: 30px; background-color: #780016; z-index: 1; transition: all 0.3s; }

.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;
    }

/* Decision (Diamond) */
    .cfq-diamond {
        width: 130px; height: 130px; border: 3px dashed #B0BEC5;
        transform: rotate(45deg); border-radius: 6px; margin: 30px 0;
    }
    .cfq-diamond .cfq-hint-text { transform: rotate(-45deg); display: block; width: 160px; }
    .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; transform: rotate(45deg); box-shadow: 0 4px 10px rgba(120,0,22,0.2); }

/* Process (Rectangle) */
    .cfq-process {
        width: 240px; min-height: 60px; border: 3px dashed #B0BEC5;
        border-radius: 4px; padding: 10px;
    }
    .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); }

/* Branches */
    .cfq-branches { display: flex; justify-content: center; width: 100%; max-width: 550px; position: relative; margin-top: 10px; }
    .cfq-branch-lines {
        position: absolute; top: -15px; width: 65%; height: 20px;
        border-top: 4px solid #780016; border-left: 4px solid #780016; border-right: 4px solid #780016; z-index: 1; transition: all 0.3s;
    }
    .cfq-branch { display: flex; flex-direction: column; align-items: center; width: 50%; padding: 0 5px; }

.cfq-path-label {
        color: #FFF; padding: 4px 15px; border-radius: 20px;
        font-size: 0.85rem; margin-bottom: 20px; z-index: 2; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .cfq-true-path { background: #2E7D32; }
    .cfq-false-path { background: #E63946; }

/* 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;
    }
    .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-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;
    }
    .cfq-diamond .cfq-draggable.cfq-in-slot {
        box-shadow: none; border: none; background: transparent; cursor: default;
        width: 160px; 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;
    }

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

/* Completed State Glow */
    .cfq-flowchart.cfq-completed .cfq-arrow-down,
    .cfq-flowchart.cfq-completed .cfq-branch-lines { border-color: #2E7D32 !important; background-color: #2E7D32 !important; }
    .cfq-flowchart.cfq-completed .cfq-node { border-color: #2E7D32 !important; color: #2E7D32; }
    .cfq-flowchart.cfq-completed .cfq-dropzone { border-color: #2E7D32 !important; }

/* SweetAlert Customization */
    .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;}

@media (max-width: 650px) {
        .cfq-branches { flex-direction: column; align-items: center; gap: 25px; margin-top: 15px; }
        .cfq-branch { width: 100%; }
        .cfq-branch-lines { display: none; }
        .cfq-diamond { width: 110px; height: 110px; }
        .cfq-diamond .cfq-hint-text { width: 140px; font-size: 12px;}
    }
</style>

const cfq_missions = [
        {
            title: "ไปโรงเรียนในวันฟ้าครึ้ม ☁️",
            context: "เตรียมตัวไปโรงเรียน",
            blocks: [
                { id: "cfq-m1-dec", text: "ฝนตกหรือไม่? 🌧️", type: "decision" },
                { id: "cfq-m1-t", text: "กางร่มไปโรงเรียน ☔", type: "true" },
                { id: "cfq-m1-f", text: "เดินไปตามปกติ 🚶", type: "false" }
            ]
        },
        {
            title: "ซื้อขนมหลังเลิกเรียน 🍡",
            context: "หน้าร้านขนม",
            blocks: [
                { id: "cfq-m2-dec", text: "เงิน > 20 บาท? 💰", type: "decision" },
                { id: "cfq-m2-t", text: "ซื้อขนม 1 ชิ้น 🍩", type: "true" },
                { id: "cfq-m2-f", text: "เก็บเงินหยอดกระปุก 🐷", type: "false" }
            ]
        },
        {
            title: "เวลาว่างยามเย็น 🎮",
            context: "อยากเล่นเกม",
            blocks: [
                { id: "cfq-m3-dec", text: "การบ้านเสร็จไหม? 📚", type: "decision" },
                { id: "cfq-m3-t", text: "เล่นเกม 1 ชม. 🕹️", type: "true" },
                { id: "cfq-m3-f", text: "ไปทำการบ้าน ✏️", type: "false" }
            ]
        }
    ];

/* --- 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}`;
        document.getElementById('cfq-context-display').innerText = mission.context;

// Reset Dropzones
        document.querySelectorAll('.cfq-dropzone').forEach(zone => {
            if (zone.id === 'cfq-drop-decision') {
                zone.innerHTML = '<span class="cfq-hint-text">วางเงื่อนไข (คำถาม)</span>';
            } else {
                zone.innerHTML = '<span class="cfq-hint-text">วางสิ่งที่ต้องทำ</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();
        cfq_draggedElement = this;
        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'));
        cfq_draggedElement = null;
    }

function cfq_setupDropzones() {
        const dropzones = document.querySelectorAll('.cfq-dropzone');
        // Clear old listeners by replacing elements (safe in single page life cycle)
        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')) {
                    // Correct Drop
                    cfq_sfx.click();
                    this.innerHTML = ''; 
                    
                    block.classList.remove('cfq-draggable');
                    block.classList.add('cfq-in-slot');
                    block.removeAttribute('draggable');
                    
                    this.appendChild(block);
                    this.classList.add('cfq-filled');
                    
                    cfq_filledCount++;
                    cfq_checkLevelComplete();
                } else {
                    // Wrong Drop
                    cfq_sfx.boing();
                    block.classList.add('cfq-wrong-shake');
                    setTimeout(() => block.classList.remove('cfq-wrong-shake'), 500);
                }
            });
        });
    }

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