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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div id="smarty-game-space-drive" style="max-width: 900px; margin: auto; background-color: #fafafa; border: 4px solid #880E4F; border-radius: 20px; font-family: 'Sarabun', sans-serif; box-shadow: 0 10px 25px rgba(0,0,0,0.1); padding: 40px; text-align: center; position: relative; overflow: hidden;">
    
    
    <div id="start-screen">
        <div style="font-size: 50px; margin-bottom: 15px;">🛸 📁 🤖</div>
        <h2 style="color: #880E4F; font-size: 36px; font-weight: bold; margin-bottom: 10px;">ภารกิจแยกประเภทแฟ้มลับอวกาศ (Google Workspace)</h2>
        <p style="color: #D81B60; font-size: 20px; font-weight: bold; margin-bottom: 30px;">ช่วยกัปตันหุ่นยนต์แยกไฟล์ข้อมูลส่งเข้า Google Drive ให้ถูกต้อง!</p>
        
        <div style="background: linear-gradient(135deg, #880E4F 0%, #700b3f 100%); color: white; padding: 25px; border-radius: 15px; max-width: 600px; margin: auto; text-align: left; box-shadow: 0 8px 15px rgba(136, 14, 79, 0.4); margin-bottom: 35px;">
            <h4 style="margin-top: 0; font-size: 20px; border-bottom: 1px solid #FFC107; padding-bottom: 10px;">📋 คู่มือนักแก้ปัญหา</h4>
            <ul style="line-height: 1.8; font-size: 16px; margin-bottom: 0;">
                <li>อ่านสถานการณ์ภารกิจที่กัปตันมอบหมายให้ดี</li>
                <li>เลือกเครื่องมือ (Docs, Sheets, Slides) หรือวิธีจัดเก็บไฟล์ที่ถูกต้องที่สุด</li>
                <li>มีภารกิจ 5 ข้อ และหัวใจ 3 ดวง ❤️❤️❤️ (ตอบผิดโดนหักหัวใจนะ!)</li>
            </ul>
        </div>
        
        <input type="text" id="playerName" placeholder="พิมพ์ชื่อ-นามสกุล ของนักเรียน" style="padding: 15px; width: 60%; font-size: 16px; border: 2px solid #ccc; border-radius: 8px; margin-bottom: 25px; outline: none; text-align: center;">
        <br>
        <button onclick="startGame()" style="background-color: #880E4F; color: white; border: none; padding: 15px 40px; font-size: 18px; border-radius: 8px; cursor: pointer; font-weight: bold; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); transition: 0.3s;">เริ่มเกมเลย! 🚀</button>
    </div>

<div id="game-screen" style="display: none;">
        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 3px dashed #FFC107; padding-bottom: 15px; margin-bottom: 20px;">
            <div style="font-size: 18px; font-weight: bold; color: #880E4F;">กัปตัน: <span id="displayName" style="color: #D81B60;"></span></div>
            <div style="font-size: 20px;">คะแนน: <span id="score" style="color: #FFC107; font-weight: bold; font-size: 24px;">0</span></div>
            <div id="lives" style="font-size: 24px;">❤️❤️❤️</div>
        </div>

<div style="background-color: #ffffff; border: 2px solid #e0e0e0; border-radius: 12px; padding: 30px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
            <div style="font-size: 40px; margin-bottom: 15px;" id="question-icon">🚀</div>
            <h3 id="question-text" style="color: #880E4F; font-size: 22px; margin-top: 0;">คำถามจะแสดงที่นี่</h3>
            
            <div id="options-container" style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 25px;">
                
            </div>
        </div>
        
        
        <div id="feedback-message" style="display: none; padding: 15px; border-radius: 8px; font-weight: bold; font-size: 18px; margin-bottom: 15px;"></div>
        
        <button id="next-btn" onclick="nextQuestion()" style="display: none; background-color: #FFC107; color: #880E4F; border: none; padding: 12px 30px; font-size: 18px; border-radius: 8px; cursor: pointer; font-weight: bold; margin: auto; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">ภารกิจต่อไป ➡️</button>
    </div>

<div id="end-screen" style="display: none; padding: 30px;">
        <div style="font-size: 60px; margin-bottom: 20px;" id="end-icon">🏆</div>
        <h2 style="color: #880E4F; font-size: 32px; font-weight: bold; margin-bottom: 10px;">จบภารกิจ!</h2>
        <p style="font-size: 20px; color: #333;">กัปตัน <span id="final-name" style="font-weight: bold; color: #D81B60;"></span> ทำคะแนนไปได้</p>
        <div style="font-size: 50px; font-weight: bold; color: #FFC107; margin: 20px 0; text-shadow: 1px 1px 3px rgba(0,0,0,0.2);"><span id="final-score"></span> / 500</div>
        <p id="end-message" style="font-size: 18px; color: #880E4F; font-weight: bold; margin-bottom: 30px;"></p>
        
        <button onclick="location.reload()" style="background-color: #880E4F; color: white; border: none; padding: 15px 40px; font-size: 18px; border-radius: 8px; cursor: pointer; font-weight: bold;">เล่นอีกครั้ง 🔄</button>
    </div>

<script>
        const questions = [
            {
                icon: "📝",
                question: "ภารกิจที่ 1: กัปตันต้องการ 'พิมพ์รายงาน' สรุปการสำรวจดาวเคราะห์ดวงใหม่ ต้องสร้างไฟล์อะไร?",
                options: [
                    { text: "Google Docs (สีฟ้า)", correct: true },
                    { text: "Google Sheets (สีเขียว)", correct: false },
                    { text: "Google Slides (สีเหลือง)", correct: false },
                    { text: "สร้างโฟลเดอร์ใหม่", correct: false }
                ]
            },
            {
                icon: "➕",
                question: "ภารกิจที่ 2: กัปตันเข้า Google Drive แล้ว แต่หาปุ่มสร้างไฟล์ไม่เจอ ต้องกดปุ่มไหน?",
                options: [
                    { text: "ปุ่มรูปเฟือง (Settings)", correct: false },
                    { text: "ปุ่มถังขยะ (Trash)", correct: false },
                    { text: "ปุ่มแชร์ (Share)", correct: false },
                    { text: "ปุ่ม + ใหม่ (+ New)", correct: true }
                ]
            },
            {
                icon: "📊",
                question: "ภารกิจที่ 3: เราได้ข้อมูลจำนวนเอเลี่ยนบนดาวมาเพียบเลย! ต้องใช้โปรแกรมอะไรทำตารางและคำนวณตัวเลข?",
                options: [
                    { text: "Google Docs", correct: false },
                    { text: "Google Sheets", correct: true },
                    { text: "Google Slides", correct: false },
                    { text: "Google Forms", correct: false }
                ]
            },
            {
                icon: "📂",
                question: "ภารกิจที่ 4: สร้างไฟล์เสร็จแล้ว! แต่ไฟล์ลอยเคว้งคว้างในอวกาศ (หน้าแรกของ Drive) กัปตันควรทำอย่างไร?",
                options: [
                    { text: "ปล่อยทิ้งไว้แบบนั้นแหละ", correct: false },
                    { text: "ลากไฟล์ไปใส่ในถังขยะ", correct: false },
                    { text: "คลิกลากไฟล์ไปเก็บในโฟลเดอร์ให้เป็นระเบียบ", correct: true },
                    { text: "กดเปลี่ยนสีไฟล์", correct: false }
                ]
            },
            {
                icon: "🖼️",
                question: "ภารกิจที่ 5: กัปตันต้องการสร้าง 'หน้าต่างนำเสนอ' ใส่รูปเท่ๆ เพื่อพรีเซนต์งานให้เพื่อนดู ต้องใช้เครื่องมือใด?",
                options: [
                    { text: "Google Slides", correct: true },
                    { text: "Google Sheets", correct: false },
                    { text: "Google Docs", correct: false },
                    { text: "Google Drive", correct: false }
                ]
            }
        ];

let currentQuestion = 0;
        let score = 0;
        let lives = 3;
        let playerName = "";

function startGame() {
            playerName = document.getElementById("playerName").value.trim();
            if (playerName === "") {
                const nameInput = document.getElementById("playerName");
                nameInput.style.borderColor = "#D81B60";
                nameInput.placeholder = "⚠️ กรุณาพิมพ์ชื่อก่อนเริ่มเกมนะครับ!";
                return;
            }

document.getElementById("start-screen").style.display = "none";
            document.getElementById("game-screen").style.display = "block";
            document.getElementById("displayName").innerText = playerName;
            
            loadQuestion();
        }

function updateLivesDisplay() {
            let hearts = "";
            for (let i = 0; i < 3; i++) {
                hearts += i < lives ? "❤️" : "🖤";
            }
            document.getElementById("lives").innerText = hearts;
        }

function loadQuestion() {
            const q = questions[currentQuestion];
            document.getElementById("question-icon").innerText = q.icon;
            document.getElementById("question-text").innerText = q.question;
            
            const optionsContainer = document.getElementById("options-container");
            optionsContainer.innerHTML = "";
            document.getElementById("feedback-message").style.display = "none";
            document.getElementById("next-btn").style.display = "none";

q.options.forEach((opt) => {
                const btn = document.createElement("button");
                btn.innerText = opt.text;
                btn.style.cssText = "padding: 15px; font-size: 16px; border: 2px solid #ccc; border-radius: 8px; background-color: #fafafa; cursor: pointer; transition: 0.2s; font-family: 'Sarabun', sans-serif; font-weight: bold; color: #333;";
                btn.onclick = () => checkAnswer(opt.correct, btn);
                optionsContainer.appendChild(btn);
            });
        }

function checkAnswer(isCorrect, selectedBtn) {
            const allBtns = document.getElementById("options-container").querySelectorAll("button");
            allBtns.forEach(btn => {
                btn.disabled = true;
                btn.style.cursor = "not-allowed";
                btn.style.opacity = "0.7";
            });

const feedback = document.getElementById("feedback-message");
            feedback.style.display = "block";

if (isCorrect) {
                selectedBtn.style.backgroundColor = "#4CAF50";
                selectedBtn.style.color = "white";
                selectedBtn.style.borderColor = "#388E3C";
                selectedBtn.style.opacity = "1";
                score += 100;
                document.getElementById("score").innerText = score;
                feedback.style.backgroundColor = "#E8F5E9";
                feedback.style.color = "#2E7D32";
                feedback.innerText = "✅ ถูกต้อง! กัปตันเก่งมาก!";
            } else {
                selectedBtn.style.backgroundColor = "#F44336";
                selectedBtn.style.color = "white";
                selectedBtn.style.borderColor = "#D32F2F";
                selectedBtn.style.opacity = "1";
                lives--;
                updateLivesDisplay();
                feedback.style.backgroundColor = "#FFEBEE";
                feedback.style.color = "#C62828";
                feedback.innerText = "❌ ผิดพลาด! ระบบเตือนภัยทำงาน! เสียหัวใจ 1 ดวง";
                
                // เฉลยข้อถูก
                questions[currentQuestion].options.forEach((opt, index) => {
                    if(opt.correct) {
                        allBtns[index].style.borderColor = "#4CAF50";
                        allBtns[index].style.borderWidth = "4px";
                        allBtns[index].style.opacity = "1";
                    }
                });
            }

if (lives <= 0) {
                setTimeout(endGame, 1500);
            } else {
                document.getElementById("next-btn").style.display = "block";
            }
        }

function endGame() {
            document.getElementById("game-screen").style.display = "none";
            const endScreen = document.getElementById("end-screen");
            endScreen.style.display = "block";
            
            document.getElementById("final-name").innerText = playerName;
            document.getElementById("final-score").innerText = score;

const endMsg = document.getElementById("end-message");
            const endIcon = document.getElementById("end-icon");

if (lives <= 0) {
                endIcon.innerText = "💥";
                endMsg.innerText = "ยานอวกาศเสียหาย! หัวใจหมดซะแล้ว ลองฝึกฝนใหม่นะกัปตัน!";
                endMsg.style.color = "#D81B60";
            } else if (score === 500) {
                endIcon.innerText = "🌟";
                endMsg.innerText = "สมบูรณ์แบบ! คุณคือกัปตันอวกาศระดับตำนาน แฟ้มลับปลอดภัยสุดๆ!";
            } else {
                endIcon.innerText = "👍";
                endMsg.innerText = "เก่งมาก! ฐานข้อมูลอวกาศของเราเป็นระเบียบขึ้นเยอะเลย!";
            }
        }
    </script>
</div>