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

Back

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

Title

Description

Keyword

Detail (HTML Code)

/* พื้นที่จัดเรียงของนักเรียน */
    .p3-my-sequence { background: #E0F2F1; border: 3px dashed #26A69A; border-radius: 15px; padding: 20px; margin-bottom: 25px; min-height: 150px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
    .p3-my-sequence h4 { margin: 0 0 10px 0; color: #00695C; font-family: 'Prompt', sans-serif; font-size: 18px;}
    
    /* กล่องขั้นตอน */
    .p3-step-slot { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 500px; }
    .p3-step-num { background: #FF9800; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 20px; flex-shrink: 0; box-shadow: 0 3px 5px rgba(0,0,0,0.2); border: 2px solid white;}
    .p3-step-content { flex: 1; background: white; border: 3px solid #FF9800; padding: 12px 15px; border-radius: 10px; font-size: 18px; color: #333 !important; cursor: pointer; transition: 0.2s; box-shadow: 0 3px 5px rgba(0,0,0,0.1); font-weight: bold; display: flex; align-items: center; gap: 10px;}
    .p3-step-content:hover { background: #FFF3E0; transform: scale(1.02);}
    .p3-arrow-down { color: #4CAF50; font-size: 24px; font-weight: bold; margin: -2px 0; }

/* พื้นที่ตัวเลือก (ปุ่มใหญ่ๆ น่ารักๆ) */
    .p3-options-area { background: #F1F8E9; padding: 20px; border-radius: 15px; border: 3px solid #C5E1A5; margin-bottom: 25px; text-align: center;}
    .p3-options-area h4 { margin: 0 0 15px 0; color: #33691E; font-family: 'Prompt', sans-serif; font-size: 18px;}
    .p3-options-container { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;}
    
    .p3-option-btn { background-color: white; border: 3px solid #8BC34A; padding: 12px 20px; border-radius: 12px; font-size: 18px; cursor: pointer; transition: 0.2s; color: #2E7D32 !important; font-weight: bold; box-shadow: 0 5px 0 #689F38; display: flex; align-items: center; gap: 8px;}
    .p3-option-btn:hover { background-color: #F1F8E9; transform: translateY(2px); box-shadow: 0 3px 0 #689F38; }
    .p3-option-btn:active { transform: translateY(5px); box-shadow: none; }
    .p3-option-btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: translateY(5px); }

/* ปุ่มควบคุมหน้าจอหลัก */
    .p3-controls { display: flex; gap: 15px; justify-content: center; }
    .p3-btn { padding: 15px 30px; border: none; border-radius: 10px; font-size: 20px; font-weight: bold; cursor: pointer; color: white !important; font-family: 'Prompt', sans-serif; transition: 0.2s; }
    .p3-btn-check { background-color: #00BCD4; box-shadow: 0 5px 0 #0097A7; }
    .p3-btn-check:active { transform: translateY(5px); box-shadow: none; }
    .p3-btn-reset { background-color: #FF5252; box-shadow: 0 5px 0 #D32F2F; }
    .p3-btn-reset:active { transform: translateY(5px); box-shadow: none; }

/* ฟีดแบค Overlay */
    .p3-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; padding: 20px; box-sizing: border-box;}
    .p3-feedback-icon { font-size: 80px; margin-bottom: 10px; animation: bounce 1s infinite alternate; }
    @keyframes bounce { from { transform: translateY(0px); } to { transform: translateY(-15px); } }
    .p3-feedback-title { font-size: 30px; font-weight: bold; font-family: 'Prompt', sans-serif; margin-bottom: 10px; }
    .p3-feedback-msg { font-size: 20px; color: #444 !important; font-weight: bold; max-width: 600px; line-height: 1.6;}

</style>

<div class="wsst-p3-algo-wrapper">
    <div class="p3-algo-container">
        <div class="p3-algo-header">
            <h2>🦸‍♂️ Algorithm Hero (ฮีโร่จิ๋วนักจัดลำดับ)</h2>
            <p>นำขั้นตอนมาเรียงให้ถูกต้อง เพื่อทำภารกิจให้สำเร็จ!</p>
        </div>

<div class="p3-algo-body">
            
            <div class="p3-mission-box">
                <div>
                    <span style="font-size: 16px; color: #FFEB3B !important; font-weight: bold;">ภารกิจของฮีโร่:</span>
                    <p class="p3-mission-title" id="p3-mission-text">กำลังโหลดภารกิจ...</p>
                </div>
                <div class="p3-level-badge" id="p3-level-text">ด่าน 1/3</div>
            </div>

<div class="p3-my-sequence">
                <h4>👇 จัดเรียงขั้นตอนที่นี่ (คลิกเพื่อเอาออก)</h4>
                <div id="p3-sequence-list" style="width: 100%; display: flex; flex-direction: column; align-items: center;">
                    <span style="color: #00897B; margin-top: 20px; font-weight:bold; font-size: 18px;">(ว่างเปล่า! รอฮีโร่เลือกคำสั่งด้านล่าง)</span>
                </div>
            </div>

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

<div class="p3-controls">
                <button class="p3-btn p3-btn-reset" onclick="resetP3Sequence()">🔄 ล้างใหม่</button>
                <button class="p3-btn p3-btn-check" onclick="checkP3Answer()">🌟 ส่งภารกิจ</button>
            </div>

<div class="p3-feedback-overlay" id="p3-feedback-overlay">
                <div class="p3-feedback-icon" id="p3-feedback-icon">🎉</div>
                <div class="p3-feedback-title" id="p3-feedback-title">เก่งมาก!</div>
                <div class="p3-feedback-msg" id="p3-feedback-msg">คำอธิบาย...</div>
                <button class="p3-btn p3-btn-check" style="margin-top: 30px;" id="p3-btn-action">ไปด่านต่อไป ⏭️</button>
            </div>

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

let currentP3Level = 0;
    let p3AvailableSteps = []; 
    let p3MySequence = [];

// สลับตำแหน่งบล็อก
    function shuffleP3Array(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 loadP3Level() {
        const mission = p3Missions[currentP3Level];
        document.getElementById('p3-mission-text').innerText = mission.title;
        document.getElementById('p3-level-text').innerText = `ด่าน ${currentP3Level + 1}/${p3Missions.length}`;
        
        p3AvailableSteps = shuffleP3Array([...mission.steps]);
        p3MySequence = [];
        
        updateP3UI();
        document.getElementById('p3-feedback-overlay').style.display = 'none';
    }

function updateP3UI() {
        renderP3AvailableSteps();
        renderP3MySequence();
    }

// สร้างปุ่มตัวเลือก
    function renderP3AvailableSteps() {
        const container = document.getElementById('p3-options-container');
        container.innerHTML = '';

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

// แสดงลำดับที่เด็กเลือก
    function renderP3MySequence() {
        const listContainer = document.getElementById('p3-sequence-list');
        listContainer.innerHTML = '';

if (p3MySequence.length === 0) {
            listContainer.innerHTML = '<span style="color: #00897B; margin-top: 20px; font-weight:bold; font-size: 18px;">(ว่างเปล่า! รอฮีโร่เลือกคำสั่งด้านล่าง)</span>';
            return;
        }

p3MySequence.forEach((step, index) => {
            const slot = document.createElement('div');
            slot.className = 'p3-step-slot';
            
            const num = document.createElement('div');
            num.className = 'p3-step-num';
            num.innerText = index + 1;

const content = document.createElement('div');
            content.className = 'p3-step-content';
            content.innerText = step.text;
            content.onclick = () => removeP3Step(index);

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

if (index < p3MySequence.length - 1 || p3MySequence.length !== p3Missions[currentP3Level].steps.length) {
                const arrow = document.createElement('div');
                arrow.className = 'p3-arrow-down';
                arrow.innerText = '⬇️';
                listContainer.appendChild(arrow);
            }
        });
    }

function selectP3Step(step) {
        if (p3MySequence.length < p3Missions[currentP3Level].steps.length) {
            p3MySequence.push(step);
            updateP3UI();
        }
    }

function removeP3Step(index) {
        p3MySequence.splice(index, 1);
        updateP3UI();
    }

function resetP3Sequence() {
        p3MySequence = [];
        updateP3UI();
    }

// ตรวจคำตอบ
    function checkP3Answer() {
        const mission = p3Missions[currentP3Level];

if (p3MySequence.length < mission.steps.length) {
            showP3Feedback("ยังไม่เสร็จนะ!", "ฮีโร่ต้องเรียงขั้นตอนให้ครบทุกอันก่อนส่งภารกิจนะครับ", "warning");
            return;
        }

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

if (isCorrect) {
            if (currentP3Level < p3Missions.length - 1) {
                showP3Feedback("เก่งมากฮีโร่จิ๋ว! 🌟", mission.explanation, "success", true);
            } else {
                showP3Feedback("🏆 ชนะเลิศ!", "สุดยอดไปเลย! น้องๆ ทำภารกิจอัลกอริทึมสำเร็จครบทุกด่านแล้วครับ!", "success", false);
            }
        } else {
            showP3Feedback("เอ๊ะ! ลองดูใหม่นะ 🤔", "การเรียงลำดับยังไม่ถูกต้องจ้า ลองลบและเรียงใหม่ดูอีกครั้งนะ สู้ๆ!", "error");
        }
    }

// ป๊อปอัปแจ้งผล (ออกแบบให้ดูเป็นมิตรกับเด็ก ป.3)
    function showP3Feedback(title, msg, type, isNextLevel = false) {
        const overlay = document.getElementById('p3-feedback-overlay');
        const iconEl = document.getElementById('p3-feedback-icon');
        const titleEl = document.getElementById('p3-feedback-title');
        const actionBtn = document.getElementById('p3-btn-action');
        
        titleEl.innerText = title;
        document.getElementById('p3-feedback-msg').innerHTML = msg;

if (type === 'success') {
            iconEl.innerText = "🎉";
            titleEl.style.color = "#00897B";
            actionBtn.style.backgroundColor = "#FF9800"; 
            actionBtn.style.boxShadow = "0 5px 0 #E65100";
            
            if (isNextLevel) {
                actionBtn.innerText = "ไปด่านต่อไป ⏭️";
                actionBtn.onclick = () => {
                    document.getElementById('p3-feedback-overlay').style.display = 'none';
                    currentP3Level++;
                    loadP3Level();
                };
            } else {
                actionBtn.innerText = "เล่นใหม่อีกครั้ง 🔄";
                actionBtn.onclick = () => {
                    document.getElementById('p3-feedback-overlay').style.display = 'none';
                    currentP3Level = 0;
                    loadP3Level();
                };
            }
        } else if (type === 'error') {
            iconEl.innerText = "💪";
            titleEl.style.color = "#D32F2F";
            actionBtn.innerText = "กลับไปแก้ไข";
            actionBtn.style.backgroundColor = "#F44336"; 
            actionBtn.style.boxShadow = "0 5px 0 #C62828";
            actionBtn.onclick = () => {
                document.getElementById('p3-feedback-overlay').style.display = 'none';
            };
        } else {
            iconEl.innerText = "👀";
            titleEl.style.color = "#F57C00";
            actionBtn.innerText = "ตกลง";
            actionBtn.style.backgroundColor = "#00BCD4";
            actionBtn.style.boxShadow = "0 5px 0 #0097A7";
            actionBtn.onclick = () => {
                document.getElementById('p3-feedback-overlay').style.display = 'none';
            };
        }

overlay.style.display = 'flex';
    }

setTimeout(loadP3Level, 200);
</script>