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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div class="gs-wrapper" id="gs-game-container">
    
    
    <div id="gs-screen-start" class="gs-screen gs-active">
        <div style="font-size: 70px; margin-bottom: 10px; animation: gsFloat 2s ease-in-out infinite;">📱💻</div>
        <h1 class="gs-title">App Inventor Game Show</h1>
        <p class="gs-subtitle">ภารกิจพิชิตแอปแรก ก้าวสู่โลกนักพัฒนา!</p>
        
        <div class="gs-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>MIT App Inventor</strong> ขั้นพื้นฐาน</li>
                <li>ระบบจะ <strong>สุ่มคำถาม</strong> ขึ้นมาทีละข้อ จำนวนทั้งหมด 10 ข้อ</li>
                <li>เลือกคำตอบที่ถูกต้องที่สุดเพื่อสะสมคะแนนข้อละ 100 คะแนน</li>
                <li>พร้อมแล้วมากดปุ่มสุ่มคำถาม เพื่อเริ่มสร้างแอปแรกไปด้วยกันเลย!</li>
            </ul>
        </div>
        
        <button class="gs-btn gs-btn-primary" onclick="gs_promptName()">เข้าร่วมรายการ 🚀</button>
    </div>

<div id="gs-screen-randomizer" class="gs-screen">
        <div style="font-size: 80px; margin-bottom: 20px; animation: gsPop 0.5s infinite alternate;">🎯</div>
        <h2 style="color: #780016; font-size: 28px; margin-bottom: 30px;">ได้เวลาสุ่มคำถามข้อต่อไป!</h2>
        <button class="gs-btn gs-btn-success" id="btn-random" onclick="gs_rollQuestion()" style="font-size: 24px; padding: 20px 40px; border-radius: 50px;">สุ่มคำถาม! 🎲</button>
        
        <div id="gs-random-animation" style="display:none; flex-direction: column; align-items: center; margin-top: 30px;">
            <h1 class="gs-bouncing-text" id="gs-rolling-text" style="color: #E63946; font-size: 32px;">กำลังค้นหา...</h1>
        </div>
    </div>

<div id="gs-screen-question" class="gs-screen" style="padding: 20px; justify-content: flex-start;">
        <div class="gs-hud">
            <div class="gs-hud-item">
                <span class="gs-hud-label">ผู้เข้าแข่งขัน</span><br>
                <strong id="gs-ui-name" style="color: #E63946; font-size: 16px;">-</strong>
            </div>
            <div class="gs-hud-item" style="text-align: center;">
                <span class="gs-hud-label">ข้อที่</span><br>
                <strong style="color: #780016; font-size: 20px;"><span id="gs-ui-counter">1</span>/10</strong>
            </div>
            <div class="gs-hud-item" style="text-align: right;">
                <span class="gs-hud-label">คะแนนสะสม</span><br>
                <strong style="font-size: 18px; color: #E63946;">💎 <span id="gs-ui-score">0</span></strong>
            </div>
        </div>

<div class="gs-game-area" style="flex-direction: column;">
            
            <div class="gs-narrative-panel" style="min-height: 180px;">
                <div class="gs-panel-header" style="font-size: 18px;">💡 คำถาม</div>
                <div class="gs-narrative-content" id="gs-q-text" style="text-align: center; font-size: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px;">
                    
                </div>
            </div>

<div class="gs-choices-grid" id="gs-q-choices">
                
            </div>
        </div>
    </div>

<div id="gs-screen-result" class="gs-screen">
        <div style="font-size: 80px; margin-bottom: 10px; animation: gsPop 1s infinite alternate;">🎉🏆</div>
        <h1 class="gs-title" style="color: #E63946;">จบรายการเกมโชว์!</h1>
        <p class="gs-subtitle" style="color: #780016;">คุณพร้อมที่จะเป็นนักพัฒนาแอปแล้ว!</p>
        
        <div class="gs-rules-box" style="text-align: center; border-color: #E63946; background: #780016;">
            <p style="margin: 0; font-size: 18px; color: #FFF;">ผู้เข้าแข่งขัน: <strong id="gs-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: 40px; font-weight: 900; color: #FFCDD2; text-shadow: 2px 2px 0px #4A000D;" id="gs-final-score">0</p>
        </div>
        
        <button class="gs-btn gs-btn-primary" onclick="gs_restartGame()">เล่นอีกครั้ง 🔄</button>
    </div>

</div>

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

@keyframes gsFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes gsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    @keyframes gsPop { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
    @keyframes gsBounce { from { transform: translateY(0) scale(1); } to { transform: translateY(-10px) scale(1.05); } }

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

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

.gs-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;
    }
    .gs-btn-primary { background: #780016; color: #FFFFFF; box-shadow: 0 6px 0 #4A000D; }
    .gs-btn-primary:active { transform: translateY(6px); box-shadow: 0 0px 0 #4A000D; }
    .gs-btn-success { background: #E63946; color: #FFFFFF; box-shadow: 0 6px 0 #B31222; }
    .gs-btn-success:active { transform: translateY(6px); box-shadow: 0 0px 0 #B31222; }

.gs-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);
    }
    .gs-hud-item { flex: 1; text-align: left; line-height: 1.2; }
    .gs-hud-label { font-size: 12px; color: #78909C; font-weight: bold; }

.gs-narrative-panel { background: #FFF; border-radius: 12px; border: 2px solid #FFCDD2; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
    .gs-panel-header { background: #780016; color: #FFF; padding: 10px 15px; font-weight: bold; text-align: center; }
    .gs-narrative-content { padding: 25px 15px; color: #333; font-weight: 600; line-height: 1.5; }

.gs-choices-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; margin-top: 15px; }
    @media (max-width: 600px) { .gs-choices-grid { grid-template-columns: 1fr; } }

.gs-choice-btn {
        background: #FFFFFF; color: #780016; font-size: 16px; font-weight: 600;
        border: 2px solid #E63946; border-radius: 12px; padding: 15px; cursor: pointer;
        transition: all 0.1s; box-shadow: 0 6px 0 #B31222; font-family: 'Prompt', sans-serif;
        display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px;
    }
    .gs-choice-btn:hover { background: #FFEBEE; transform: translateY(-2px); box-shadow: 0 8px 0 #B31222; }
    .gs-choice-btn:active { transform: translateY(6px); box-shadow: 0 0 0 #B31222; }

.gs-bouncing-text { animation: gsBounce 0.4s infinite alternate; font-weight: 900; }

/* SweetAlert */
    .gs-swal-popup { background: #FFFFFF !important; border: 3px solid #780016 !important; border-radius: 15px !important; font-family: 'Prompt', sans-serif !important; }
    .gs-swal-title { color: #780016 !important; font-size: 22px !important; font-weight: 800 !important; }
    .gs-swal-confirm { background: #E63946 !important; color: #FFF !important; font-weight: bold !important; border-radius: 8px !important; box-shadow: 0 4px 0 #B31222 !important; }
</style>

// Data: 10 Questions for MIT App Inventor (Mission 1)
    const gs_allQuestions = [
        { qHtml: 'เว็บไซต์สำหรับสร้างแอปพลิเคชันที่เราจะใช้งานกัน มีชื่อว่าอะไร?', choices: [{ text: 'MIT App Inventor', isCorrect: true }, { text: 'Google App Maker', isCorrect: false }, { text: 'Thunkable', isCorrect: false }, { text: 'Scratch', isCorrect: false }] },
        { qHtml: 'เราต้องใช้อะไรในการเข้าสู่ระบบ (Login) เพื่อเริ่มใช้งาน MIT App Inventor?', choices: [{ text: 'บัญชี Facebook', isCorrect: false }, { text: 'บัญชี Google (Gmail)', isCorrect: true }, { text: 'Apple ID', isCorrect: false }, { text: 'หมายเลขโทรศัพท์', isCorrect: false }] },
        { qHtml: 'หากต้องการเปลี่ยนเมนูเครื่องมือให้เป็น <strong>"ภาษาไทย"</strong> ต้องคลิกที่มุมใดของหน้าจอ?', choices: [{ text: 'มุมซ้ายบน', isCorrect: false }, { text: 'มุมซ้ายล่าง', isCorrect: false }, { text: 'มุมขวาบน', isCorrect: true }, { text: 'มุมขวาล่าง', isCorrect: false }] },
        { qHtml: 'การเขียนโปรแกรมใน MIT App Inventor มีลักษณะเป็นแบบใด?', choices: [{ text: 'พิมพ์โค้ดภาษาอังกฤษยาวๆ', isCorrect: false }, { text: 'การต่อบล็อกคำสั่ง (เหมือนเลโก้)', isCorrect: true }, { text: 'การวาดรูปผังงาน', isCorrect: false }, { text: 'การใช้เสียงสั่งการ', isCorrect: false }] },
        { qHtml: 'ในการสร้างแอปพลิเคชันของเรา <strong>"หน้าจอคอมพิวเตอร์"</strong> เปรียบเสมือนอะไร?', choices: [{ text: 'เครื่องมือสแกน QR Code', isCorrect: false }, { text: 'โรงงานประดิษฐ์ (ออกแบบและต่อบล็อก)', isCorrect: true }, { text: 'อุปกรณ์สำหรับพกพาแอป', isCorrect: false }, { text: 'กล้องถ่ายรูป', isCorrect: false }] },
        { qHtml: 'แอปพลิเคชันบนแท็บเล็ตที่ใช้สำหรับเปิดดูผลลัพธ์ของแอปที่เราสร้าง มีชื่อว่าอะไร?', choices: [{ text: 'MIT App Viewer', isCorrect: false }, { text: 'App Inventor Live', isCorrect: false }, { text: 'MIT AI2 Companion', isCorrect: true }, { text: 'Android Studio', isCorrect: false }] },
        { qHtml: 'ไอคอนของแอปพลิเคชัน <strong>MIT AI2 Companion</strong> บนแท็บเล็ต คือรูปของสัตว์ชนิดใด?', choices: [{ text: 'นกฮูก', isCorrect: false }, { text: 'สุนัข', isCorrect: false }, { text: 'แมว', isCorrect: false }, { text: 'ผึ้ง', isCorrect: true }] },
        { qHtml: 'เมื่อต้องการเชื่อมต่อคอมพิวเตอร์กับแท็บเล็ต ต้องเลือกเมนูใดเพื่อสร้าง QR Code?', choices: [{ text: 'เชื่อมต่อ (Connect) ➔ AI Companion', isCorrect: true }, { text: 'สร้าง (Build) ➔ Android App', isCorrect: false }, { text: 'โครงการ (Projects) ➔ บันทึก', isCorrect: false }, { text: 'ส่วนติดต่อผู้ใช้ ➔ ปุ่ม', isCorrect: false }] },
        { qHtml: 'การตั้งชื่อโปรเจกต์ (Project) ครั้งแรก ใน MIT App Inventor ข้อใดทำได้ <strong>ถูกต้อง</strong>?', choices: [{ text: 'แอปแรกของฉัน', isCorrect: false }, { text: 'My First App (เว้นวรรค)', isCorrect: false }, { text: 'MyFirstApp', isCorrect: true }, { text: 'My-App-1!', isCorrect: false }] },
        { qHtml: 'เมื่อแท็บเล็ตสแกน QR Code สำเร็จ หน้าจอแท็บเล็ตจะแสดงผลอย่างไร?', choices: [{ text: 'หน้าจอดับไป', isCorrect: false }, { text: 'ว่างเปล่าเหมือนหน้าจอจำลองในคอมพิวเตอร์', isCorrect: true }, { text: 'แสดงโค้ดภาษาอังกฤษเต็มหน้าจอ', isCorrect: false }, { text: 'เปิดแอปพลิเคชันกล้องถ่ายรูปค้างไว้', isCorrect: false }] }
    ];

/* --- Audio --- */
    function gs_initAudio() {
        if (!gs_audioCtx) gs_audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (gs_audioCtx.state === 'suspended') gs_audioCtx.resume();
    }
    function gs_playTone(freq, type, duration, vol = 0.1, startTimeOffset = 0) {
        if (!gs_audioCtx) return;
        try {
            const osc = gs_audioCtx.createOscillator();
            const gain = gs_audioCtx.createGain();
            const now = gs_audioCtx.currentTime + startTimeOffset;
            osc.type = type; osc.frequency.setValueAtTime(freq, now);
            gain.gain.setValueAtTime(0, now); gain.gain.linearRampToValueAtTime(vol, now + 0.05); gain.gain.exponentialRampToValueAtTime(0.001, now + duration);
            osc.connect(gain); gain.connect(gs_audioCtx.destination);
            osc.start(now); osc.stop(now + duration);
        } catch(e){}
    }
    function gs_startBGM() {
        if(gs_bgmInterval) clearInterval(gs_bgmInterval);
        const notes = [261.63, 329.63, 392.00, 329.63];
        let step = 0;
        gs_bgmInterval = setInterval(() => {
            if(gs_audioCtx && gs_audioCtx.state === 'running') { gs_playTone(notes[step % notes.length], 'square', 0.1, 0.02); step++; }
        }, 300);
    }
    function gs_sfxDrumroll() {
        let count = 0; let roll = setInterval(() => { gs_playTone(150 + Math.random() * 50, 'square', 0.05, 0.05); count++; if(count > 30) clearInterval(roll); }, 50);
    }
    function gs_sfxCorrect() { gs_playTone(1046.50, 'sine', 0.2, 0.1, 0); gs_playTone(1318.51, 'sine', 0.4, 0.1, 0.1); }
    function gs_sfxWrong() { gs_playTone(150, 'sawtooth', 0.3, 0.1, 0); gs_playTone(140, 'sawtooth', 0.4, 0.1, 0.2); }
    function gs_sfxVictory() { const chords = [440, 554.37, 659.25]; chords.forEach(freq => { gs_playTone(freq, 'triangle', 0.4, 0.1, 0); gs_playTone(freq, 'triangle', 0.8, 0.1, 0.4); }); }

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

function gs_startGame() {
        gs_score = 0; gs_questionCount = 0;
        document.getElementById('gs-ui-name').innerText = gs_playerName;
        document.getElementById('gs-result-name').innerText = gs_playerName;
        document.getElementById('gs-ui-score').innerText = gs_score;
        
        gs_availableQuestions = Array.from({length: 10}, (_, i) => i).sort(() => Math.random() - 0.5);
        
        gs_startBGM();
        gs_showScreen('gs-screen-randomizer');
    }

function gs_rollQuestion() {
        document.getElementById('btn-random').style.display = 'none';
        const animDiv = document.getElementById('gs-random-animation');
        const rollingText = document.getElementById('gs-rolling-text');
        animDiv.style.display = 'flex';
        
        gs_sfxDrumroll();
        const phrases = ["ค้นหาจากคลังคำถาม...", "โหลดข้อมูลเข้าแอป...", "ข้อที่แจ็คพอตคือ...", "กำลังสุ่ม..."];
        let t = 0;
        let shuffleInt = setInterval(() => { rollingText.innerText = phrases[t % phrases.length]; t++; }, 200);

setTimeout(() => {
            clearInterval(shuffleInt); animDiv.style.display = 'none';
            document.getElementById('btn-random').style.display = 'inline-block';
            gs_showQuestion();
        }, 1500);
    }

function gs_showQuestion() {
        gs_questionCount++;
        document.getElementById('gs-ui-counter').innerText = gs_questionCount;
        
        const qIndex = gs_availableQuestions.pop();
        const qData = gs_allQuestions[qIndex];
        
        document.getElementById('gs-q-text').innerHTML = qData.qHtml;
        
        let choices = [...qData.choices].sort(() => Math.random() - 0.5);
        const choicesGrid = document.getElementById('gs-q-choices');
        choicesGrid.innerHTML = '';
        
        choices.forEach(choice => {
            const btn = document.createElement('button');
            btn.className = 'gs-choice-btn';
            btn.innerHTML = choice.text;
            btn.onclick = () => gs_checkAnswer(choice.isCorrect, btn);
            choicesGrid.appendChild(btn);
        });

gs_showScreen('gs-screen-question');
    }

function gs_checkAnswer(isCorrect, btnElement) {
        document.querySelectorAll('.gs-choice-btn').forEach(b => b.style.pointerEvents = 'none');

if (isCorrect) {
            gs_sfxCorrect();
            gs_score += 100;
            document.getElementById('gs-ui-score').innerText = gs_score;
            btnElement.style.background = '#2E7D32'; btnElement.style.color = '#FFF';
            btnElement.style.borderColor = '#1B5E20'; btnElement.style.boxShadow = '0 6px 0 #1B5E20';
        } else {
            gs_sfxWrong();
            btnElement.style.background = '#D32F2F'; btnElement.style.color = '#FFF';
            btnElement.style.borderColor = '#8E0000'; btnElement.style.boxShadow = '0 6px 0 #8E0000';
            
            // Highlight correct one
            document.querySelectorAll('.gs-choice-btn').forEach(b => {
                const matched = gs_allQuestions.find(q => q.choices.some(c => c.text === b.innerHTML && c.isCorrect));
                if(matched) { b.style.border = '4px solid #2E7D32'; }
            });
        }

setTimeout(() => {
            if (gs_questionCount >= 10) { gs_endGame(); } else { gs_showScreen('gs-screen-randomizer'); }
        }, 2000);
    }

function gs_endGame() {
        gs_sfxVictory();
        clearInterval(gs_bgmInterval);
        document.getElementById('gs-final-score').innerText = gs_score;
        gs_showScreen('gs-screen-result');
    }

function gs_restartGame() {
        gs_playTone(600, 'sine', 0.1, 0.1);
        gs_showScreen('gs-screen-start');
    }
</script>