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

Back

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

Title

Description

Keyword

Detail (HTML Code)

/* หน้าจอจบเกม */
    #ct-end-screen { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 30px 0; }
    .ct-score-circle { width: 120px; height: 120px; border-radius: 50%; background: #FFC107; color: #0D47A1; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: bold; margin: 20px 0; border: 5px solid #1976D2; box-shadow: 0 0 20px rgba(255,193,7,0.5); }
    .ct-btn-restart { background: #0D47A1; color: white; padding: 12px 30px; border: none; border-radius: 30px; font-size: 18px; cursor: pointer; margin-top: 20px; font-family: 'Prompt', sans-serif; font-weight: bold; box-shadow: 0 4px 0 #002171; }
    .ct-btn-restart:active { transform: translateY(4px); box-shadow: none; }

/* ฟีดแบคตอนตอบ */
    .ct-feedback-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,0.95); z-index: 10; border-radius: 12px; display: none; }
    .ct-feedback-icon { font-size: 60px; margin-bottom: 10px; }
    .ct-feedback-msg { font-size: 18px; font-weight: bold; padding: 0 20px; }

@media (max-width: 600px) {
        .ct-bins-container { grid-template-columns: 1fr; }
        .ct-question-text { font-size: 18px; }
    }
</style>

<div class="ct-hero-wrapper">
    <div class="ct-hero-container">
        <div class="ct-hero-header">
            <h1>🦸‍♂️ CT Sorting Hero</h1>
            <p>ภารกิจ: อ่านสถานการณ์แล้วคัดแยกใส่ "4 เสาหลัก" ให้ถูกต้อง!</p>
        </div>

<div class="ct-hero-body">
            
            <div id="ct-game-screen">
                <div class="ct-status-bar">
                    <span id="ct-score-display">คะแนน: 0</span>
                    <span id="ct-progress-display">ข้อที่: 1 / 8</span>
                </div>

<div style="position: relative;">
                    <div class="ct-question-card" id="ct-question-card">
                        <span style="font-size: 40px; margin-bottom: 10px;">📄</span>
                        <p class="ct-question-text" id="ct-question-text">กำลังโหลดโจทย์...</p>
                    </div>

<div class="ct-feedback-overlay" id="ct-feedback-overlay">
                        <div class="ct-feedback-icon" id="ct-feedback-icon">✅</div>
                        <div class="ct-feedback-msg" id="ct-feedback-msg">คำอธิบาย...</div>
                    </div>
                </div>

<div class="ct-bins-container">
                    <button class="ct-bin-btn ct-bg-decomp" onclick="checkCtAnswer('decomp')">
                        <span class="ct-bin-icon">🧩</span>
                        1. การแยกย่อย (Decomposition)
                    </button>
                    <button class="ct-bin-btn ct-bg-pattern" onclick="checkCtAnswer('pattern')">
                        <span class="ct-bin-icon">🔍</span>
                        2. การหารูปแบบ (Pattern)
                    </button>
                    <button class="ct-bin-btn ct-bg-abstract" onclick="checkCtAnswer('abstract')">
                        <span class="ct-bin-icon">🎯</span>
                        3. คิดเชิงนามธรรม (Abstraction)
                    </button>
                    <button class="ct-bin-btn ct-bg-algo" onclick="checkCtAnswer('algo')">
                        <span class="ct-bin-icon">📝</span>
                        4. ออกแบบขั้นตอน (Algorithm)
                    </button>
                </div>
            </div>

<div id="ct-end-screen">
                <h2 style="color: #0D47A1; font-family: 'Prompt', sans-serif; font-size: 28px; margin:0;">ทำภารกิจสำเร็จ!</h2>
                <div class="ct-score-circle" id="ct-final-score">8/8</div>
                <p style="font-size: 18px; color: #555;" id="ct-end-msg">คุณคือสุดยอดฮีโร่แนวคิดเชิงคำนวณ!</p>
                <button class="ct-btn-restart" onclick="initCtGame()">🔄 เล่นใหม่อีกครั้ง</button>
            </div>

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

let currentCtIndex = 0;
    let ctScore = 0;
    let shuffledQuestions = [];
    let isProcessing = false; // ป้องกันการกดปุ่มรัวๆ

// ฟังก์ชันสลับลำดับคำถาม
    function shuffleArray(array) {
        return array.sort(() => Math.random() - 0.5);
    }

// ฟังก์ชันเริ่มเกม
    function initCtGame() {
        document.getElementById('ct-game-screen').style.display = 'block';
        document.getElementById('ct-end-screen').style.display = 'none';
        
        ctScore = 0;
        currentCtIndex = 0;
        isProcessing = false;
        
        // ก๊อปปี้และสลับคำถามใหม่ทุกครั้งที่เริ่มเล่น
        shuffledQuestions = shuffleArray([...ctQuestions]);
        
        updateCtUI();
    }

// ฟังก์ชันอัปเดตหน้าจอ
    function updateCtUI() {
        const q = shuffledQuestions[currentCtIndex];
        document.getElementById('ct-question-text').innerText = `"${q.text}"`;
        document.getElementById('ct-score-display').innerText = `คะแนน: ${ctScore}`;
        document.getElementById('ct-progress-display').innerText = `ข้อที่: ${currentCtIndex + 1} / ${shuffledQuestions.length}`;
        
        // ซ่อน overlay
        document.getElementById('ct-feedback-overlay').style.display = 'none';
    }

// ฟังก์ชันตรวจคำตอบเมื่อผู้เล่นกดเลือกถัง
    function checkCtAnswer(selectedType) {
        if (isProcessing) return;
        isProcessing = true;

const q = shuffledQuestions[currentCtIndex];
        const overlay = document.getElementById('ct-feedback-overlay');
        const iconEl = document.getElementById('ct-feedback-icon');
        const msgEl = document.getElementById('ct-feedback-msg');

if (selectedType === q.type) {
            // ตอบถูก
            ctScore++;
            document.getElementById('ct-score-display').innerText = `คะแนน: ${ctScore}`;
            iconEl.innerText = "✅ ถูกต้อง!";
            iconEl.style.color = "#2E7D32";
            msgEl.innerText = q.explanation;
            msgEl.style.color = "#2E7D32";
            document.getElementById('ct-question-card').style.borderColor = "#2E7D32";
        } else {
            // ตอบผิด
            let correctName = "";
            if(q.type === 'decomp') correctName = "การแยกย่อย";
            if(q.type === 'pattern') correctName = "การหารูปแบบ";
            if(q.type === 'abstract') correctName = "การคิดเชิงนามธรรม";
            if(q.type === 'algo') correctName = "การออกแบบขั้นตอน";

iconEl.innerText = "❌ ผิดหมวดหมู่!";
            iconEl.style.color = "#C62828";
            msgEl.innerHTML = `ที่ถูกคือ <b>${correctName}</b><br><span style="font-size:14px; font-weight:normal;">(เหตุผล: ${q.explanation})</span>`;
            msgEl.style.color = "#C62828";
            document.getElementById('ct-question-card').style.borderColor = "#C62828";
        }

// แสดงหน้าต่างเฉลยทับการ์ด
        overlay.style.display = "flex";

// หน่วงเวลา 2.5 วินาที แล้วไปข้อต่อไป
        setTimeout(() => {
            document.getElementById('ct-question-card').style.borderColor = "#1976D2"; // คืนสีขอบเดิม
            currentCtIndex++;
            
            if (currentCtIndex < shuffledQuestions.length) {
                updateCtUI();
                isProcessing = false;
            } else {
                showCtEndScreen();
            }
        }, 3000);
    }

// ฟังก์ชันแสดงหน้าจอสรุปคะแนนเมื่อเล่นจบ
    function showCtEndScreen() {
        document.getElementById('ct-game-screen').style.display = 'none';
        const endScreen = document.getElementById('ct-end-screen');
        const finalScore = document.getElementById('ct-final-score');
        const endMsg = document.getElementById('ct-end-msg');

endScreen.style.display = 'flex';
        finalScore.innerText = `${ctScore}/${shuffledQuestions.length}`;

if (ctScore === shuffledQuestions.length) {
            endMsg.innerText = "สมบูรณ์แบบ! คุณคือปรมาจารย์ด้าน CT 🏆";
        } else if (ctScore >= shuffledQuestions.length / 2) {
            endMsg.innerText = "เก่งมาก! พื้นฐานโปรแกรมเมอร์แน่นใช้ได้เลย 👏";
        } else {
            endMsg.innerText = "ไม่เป็นไรนะ! ลองกลับไปทบทวนเนื้อหาแล้วมาลุยใหม่ 💪";
        }
    }

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