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

Back

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

Title

Description

Keyword

Detail (HTML Code)

font-family: var(--font-main);
        background: linear-gradient(135deg, #D1C4E9 0%, #B39DDB 100%);
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        margin: 20px 0;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

.p5-adv-container {
        width: 100%;
        max-width: 850px;
        background: #FFFFFF;
        border-radius: 24px;
        box-shadow: 0 15px 40px rgba(49, 27, 146, 0.3);
        border: 5px solid var(--primary-light);
        overflow: hidden;
        position: relative;
    }

/* Screens Layout */
    .p5-adv-screen {
        display: none;
        padding: 30px;
        text-align: center;
        animation: p5AdvFadeIn 0.4s ease-in-out forwards;
    }
    .p5-adv-screen.active { display: block; }

@keyframes p5AdvFadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

.p5-adv-screen h1 { font-size: 30px; color: var(--primary-dark); margin-bottom: 10px; font-weight: 800; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); font-family: var(--font-main); }
    .p5-adv-screen p { font-size: 16px; color: #555; line-height: 1.6; }

/* 3D Buttons */
    .p5-adv-btn-3d {
        display: inline-block;
        padding: 15px 40px;
        font-size: 20px;
        font-weight: 600;
        color: #311B92;
        background: linear-gradient(180deg, #FFD54F 0%, #FFC107 100%);
        border: none;
        border-radius: 50px;
        cursor: pointer;
        box-shadow: 0 6px 0 #FF9800, 0 8px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.1s ease;
        font-family: var(--font-main);
        margin-top: 20px;
    }
    .p5-adv-btn-3d:hover { transform: translateY(2px); box-shadow: 0 4px 0 #FF9800, 0 6px 10px rgba(0, 0, 0, 0.15); }
    .p5-adv-btn-3d:active { transform: translateY(6px); box-shadow: 0 0px 0 #FF9800, 0 2px 5px rgba(0, 0, 0, 0.1); }

/* Start Screen Specific */
    .p5-adv-banner {
        background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-dark) 100%);
        color: white;
        padding: 40px 20px;
        border-radius: 18px;
        margin-bottom: 25px;
        border-bottom: 6px solid #1A237E;
    }
    .p5-adv-banner h1 { color: #FFF; }
    
    .p5-adv-intro-box {
        background: #FAFAFA;
        padding: 20px;
        border-radius: 15px;
        margin-bottom: 30px;
        text-align: left;
        border-left: 6px solid var(--accent);
    }

/* Game HUD Bar */
    .p5-adv-hud-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--bg-game);
        padding: 12px 20px;
        border-radius: 12px;
        margin-bottom: 20px;
        border: 2px solid #D1C4E9;
    }
    .p5-adv-hud-item { font-weight: 600; font-size: 16px; color: var(--primary-dark); }

/* Walk Rally Progress Map */
    .p5-adv-map-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        position: relative;
        padding: 0 10px;
    }
    .p5-adv-map-line {
        position: absolute;
        top: 50%;
        left: 20px;
        right: 20px;
        height: 4px;
        background: #E0E0E0;
        z-index: 1;
        transform: translateY(-50%);
    }
    .p5-adv-map-node {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: #FFF;
        border: 4px solid #E0E0E0;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
        color: #9E9E9E;
        transition: all 0.3s ease;
    }
    .p5-adv-map-node.active { border-color: var(--accent); background: var(--accent); color: var(--primary-dark); transform: scale(1.2); box-shadow: 0 0 10px rgba(255, 193, 7, 0.5); }
    .p5-adv-map-node.passed { border-color: var(--success); background: var(--success); color: white; }

/* Question Area */
    .p5-adv-question-box {
        background: #FFF9C4;
        border: 3px solid #FFF59D;
        padding: 25px;
        border-radius: 16px;
        font-size: 20px;
        font-weight: 800;
        color: var(--primary-dark);
        margin-bottom: 25px;
        box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
        min-height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* Timer Bar */
    .p5-adv-progress-container { width: 100%; height: 12px; background: #E0E0E0; border-radius: 6px; margin-bottom: 25px; overflow: hidden; }
    .p5-adv-progress-bar { width: 100%; height: 100%; background: linear-gradient(90deg, #4CAF50, #2196F3, #9C27B0); transition: width 0.1s linear; }

/* Options Grid */
    .p5-adv-options-grid { display: grid; grid-template-columns: 1fr; gap: 15px; margin-bottom: 15px; }
    @media (min-width: 600px) { .p5-adv-options-grid { grid-template-columns: 1fr 1fr; } }

.p5-adv-option-btn {
        background: white; border: 3px solid #EEEEEE; padding: 18px; border-radius: 15px;
        font-size: 16px; font-weight: 600; color: #333; cursor: pointer;
        transition: all 0.2s ease; text-align: left; display: flex; align-items: center; gap: 15px;
        font-family: var(--font-main); box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    }
    .p5-adv-option-btn:hover { border-color: var(--primary-light); background: var(--bg-game); transform: translateY(-3px); box-shadow: 0 6px 12px rgba(94, 53, 177, 0.2); }
    .p5-adv-option-btn:active { transform: translateY(1px); }
    
    .p5-adv-option-icon { font-size: 28px; flex-shrink: 0; }

/* SweetAlert Customization */
    .swal2-custom-popup { font-family: 'Prompt', 'Sarabun', sans-serif !important; border-radius: 20px !important; border: 4px solid #673AB7 !important; }
    .swal2-custom-title { color: #311B92 !important; }
    .swal2-custom-confirm { background: linear-gradient(180deg, #FFD54F 0%, #FFC107 100%) !important; color: #311B92 !important; box-shadow: 0 4px 0 #FF9800 !important; border-radius: 50px !important; font-weight: 800 !important; }
    
    .p5-adv-result-box { background: var(--bg-game); border: 3px solid #D1C4E9; padding: 30px; border-radius: 20px; margin-bottom: 25px; }
</style>

<div id="p5-screen-start" class="p5-adv-screen active">
            <div class="p5-adv-banner">
                <h1>💻 ผจญภัยในสมองกล</h1>
                <p style="color: #EDE7F6; font-weight: bold; font-size: 18px; margin-top: 5px;">ตอน: อัจฉริยะนักโปรแกรมเมอร์ ป.5</p>
            </div>
            <div class="p5-adv-intro-box">
                <p><strong>กติกาการผจญภัย (Walk Rally):</strong></p>
                <p style="margin-top: 5px;">1. คุณต้องเดินทางเข้าสู่สมองกลคอมพิวเตอร์ ผ่านด่านทดสอบทั้งหมด <strong>10 โหนด (ด่าน)</strong></p>
                <p>2. มีเวลาซ่อมแซมระบบด่านละ <strong>15 วินาที</strong> ตอบถูกรับ 10 คะแนน (คะแนนเต็ม 100!)</p>
                <p>3. คุณมีพลังชีวิต (แบตเตอรี่) 3 หัวใจ 🧡 ระวังอย่าให้แบตหมดก่อนถึงเส้นชัยล่ะ!</p>
            </div>
            <button class="p5-adv-btn-3d" onclick="requestP5AdvPlayerName()">🚀 เริ่มต้นการผจญภัย</button>
        </div>

<div id="p5-screen-game" class="p5-adv-screen">
            <div class="p5-adv-hud-bar">
                <div class="p5-adv-hud-item">👤 วิศวกร: <span id="p5-hud-player-name" style="color:#5E35B1;">-</span></div>
                <div class="p5-adv-hud-item">🏆 คะแนน: <span id="p5-hud-score" style="color:#4CAF50; font-size:20px;">0</span>/100</div>
                <div class="p5-adv-hud-item">🧡 <span id="p5-hud-hearts">🧡🧡🧡</span></div>
            </div>

<div class="p5-adv-question-box" id="p5-current-question">ระบบกำลังประมวลผลคำถาม...</div>
            <div class="p5-adv-progress-container"><div class="p5-adv-progress-bar" id="p5-timer-bar"></div></div>

<div id="p5-screen-result" class="p5-adv-screen">
            <h1 style="font-size: 34px; color: #311B92;">🎉 ซ่อมแซมระบบเสร็จสิ้น! 🎉</h1>
            <h2 id="p5-result-greeting" style="color: #333; margin-bottom: 20px;">ยอดเยี่ยมมาก วิศวกรตัวจิ๋ว!</h2>
            
            <div class="p5-adv-result-box">
                <p style="font-size: 18px; color:#555;">ผู้บังคับบัญชาการ: <strong id="p5-result-name" style="color:#673AB7;">-</strong></p>
                <p style="font-size: 24px; margin-top: 10px; color:#333;">คะแนนประเมินผล: <strong id="p5-result-score" style="color:#4CAF50; font-size:36px;">0</strong> <span style="font-size: 20px;">/ 100 คะแนน</span></p>
                <div style="font-size: 22px; font-weight: 800; color: #311B92; margin-top: 15px;" id="p5-result-rank">ระดับ: โหลดข้อมูล...</div>
            </div>

<button class="p5-adv-btn-3d" onclick="restartP5AdvGame()">🔄 ผจญภัยอีกครั้ง</button>
        </div>

</div>
</div>

let p5AdvPlayerName = "", p5AdvCurrentNodeIdx = 0, p5AdvScore = 0, p5AdvHearts = 3, p5AdvQuestionTimer = null, p5AdvTimeRemaining = 100, p5AdvIsWaitingForNext = false;
    const P5ADV_POINTS_PER_Q = 10;
    const P5ADV_TIME_LIMIT_SEC = 15;
    let p5AdvAudioCtx = null;

// --- 2. AUDIO SYSTEM (8-Bit Style) ---
    function initP5AdvAudio() { if (!p5AdvAudioCtx) p5AdvAudioCtx = new (window.AudioContext || window.webkitAudioContext)(); }
    
    function playP5AdvSound(type) {
        if (!p5AdvAudioCtx) return;
        try {
            const osc = p5AdvAudioCtx.createOscillator(), gain = p5AdvAudioCtx.createGain();
            osc.connect(gain); gain.connect(p5AdvAudioCtx.destination);
            const now = p5AdvAudioCtx.currentTime;
            
            if (type === 'correct') { 
                osc.type = 'square'; osc.frequency.setValueAtTime(440, now); osc.frequency.setValueAtTime(659.25, now + 0.1); osc.frequency.setValueAtTime(880, now + 0.2);
                gain.gain.setValueAtTime(0.1, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.4); 
                osc.start(now); osc.stop(now + 0.4); 
            } else if (type === 'wrong') { 
                osc.type = 'sawtooth'; osc.frequency.setValueAtTime(150, now); osc.frequency.linearRampToValueAtTime(80, now + 0.3); 
                gain.gain.setValueAtTime(0.2, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.4); 
                osc.start(now); osc.stop(now + 0.4); 
            } else if (type === 'win') {
                osc.type = 'square'; const notes = [523.25, 659.25, 783.99, 1046.50];
                notes.forEach((f, i) => osc.frequency.setValueAtTime(f, now + (i*0.15)));
                gain.gain.setValueAtTime(0.1, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.8);
                osc.start(now); osc.stop(now + 0.8);
            }
        } catch (e) {}
    }

// --- 3. CORE LOGIC ---
    function showP5AdvScreen(screenId) { 
        document.querySelectorAll('.p5-adv-screen').forEach(s => s.classList.remove('active')); 
        document.getElementById(screenId).classList.add('active'); 
    }

function startP5AdvGame() { 
        p5AdvScore = 0; p5AdvHearts = 3; p5AdvCurrentNodeIdx = 0; p5AdvIsWaitingForNext = false; 
        document.getElementById('p5-hud-player-name').innerText = p5AdvPlayerName; 
        document.getElementById('p5-hud-score').innerText = p5AdvScore; 
        updateP5AdvHeartsUI(); 
        setupP5AdvMap();
        showP5AdvScreen('p5-screen-game'); 
        loadP5AdvQuestion(); 
    }

function updateP5AdvHeartsUI() { 
        document.getElementById('p5-hud-hearts').innerHTML = Array.from({length: 3}, (_, i) => i < p5AdvHearts ? "🧡" : "🖤").join(''); 
    }

startP5AdvTimeLimit();
    }

function checkP5AdvAnswer(selectedText, correctText, btnElement) {
        if (p5AdvIsWaitingForNext) return;
        p5AdvIsWaitingForNext = true; 
        clearInterval(p5AdvQuestionTimer);

document.querySelectorAll('.p5-adv-option-btn').forEach(b => {
            b.style.pointerEvents = 'none';
            if(b.innerText.includes(correctText)) b.style.borderColor = '#4CAF50';
        });

if (selectedText === correctText) {
            playP5AdvSound('correct'); 
            p5AdvScore += P5ADV_POINTS_PER_Q; 
            document.getElementById('p5-hud-score').innerText = p5AdvScore;
            btnElement.style.background = '#E8F5E9';
            
            Swal.fire({
                icon: 'success', title: 'ประมวลผลถูกต้อง!', text: 'ระบบทำงานได้อย่างสมบูรณ์',
                timer: 1500, showConfirmButton: false, customClass: { popup: 'swal2-custom-popup' }
            }).then(nextP5AdvQuestion);
        } else {
            playP5AdvSound('wrong'); 
            p5AdvHearts--; 
            updateP5AdvHeartsUI();
            btnElement.style.background = '#FFEBEE';
            btnElement.style.borderColor = '#F44336';
            
            Swal.fire({
                icon: 'error', title: 'ข้อมูลขัดข้อง!', text: `คำสั่งที่ถูกต้องคือ: ${correctText}`,
                timer: 2000, showConfirmButton: false, customClass: { popup: 'swal2-custom-popup' }
            }).then(nextP5AdvQuestion);
        }
    }

function nextP5AdvQuestion() {
        p5AdvHearts <= 0 ? endP5AdvGame() : (p5AdvCurrentNodeIdx++, loadP5AdvQuestion());
    }

function endP5AdvGame() {
        if(p5AdvQuestionTimer) clearInterval(p5AdvQuestionTimer);
        document.getElementById('p5-result-name').innerText = p5AdvPlayerName; 
        document.getElementById('p5-result-score').innerText = p5AdvScore;
        
        if(p5AdvScore > 0 && p5AdvHearts > 0) playP5AdvSound('win');

let rank = p5AdvScore >= 80 ? "ผู้เชี่ยวชาญระบบคอมพิวเตอร์ 💻✨" : p5AdvScore >= 50 ? "โปรแกรมเมอร์ฝึกหัด ⚙️" : "ต้องกลับไปทบทวนอัลกอริทึมใหม่ 📚";
        document.getElementById('p5-result-rank').innerText = `ระดับการประเมิน: ${rank}`;
        
        showP5AdvScreen('p5-screen-result');
    }
    
    function restartP5AdvGame() { showP5AdvScreen('p5-screen-start'); }
</script>