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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div class="content-wrapper" style="font-family: 'Sarabun', 'Prompt', sans-serif; line-height: 1.6; color: #333; background-color: #F4F6F8; padding: 20px; border-radius: 15px; max-width: 900px; margin: auto; box-shadow: 0 4px 15px rgba(0,0,0,0.05);">

<style>
        .proto-m2-header {
            background-color: #8B0F0F; /* สีหลัก */
            color: white;
            padding: 30px;
            border-radius: 12px;
            text-align: center;
            margin-bottom: 25px;
            border-bottom: 6px solid #5C0A0A; /* สีรอง */
        }
        
        .proto-m2-title {
            margin: 0;
            font-size: 28px;
            font-weight: bold;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
        }

.proto-m2-intro {
            background: white;
            padding: 20px;
            border-radius: 10px;
            border-left: 5px solid #8B0F0F;
            margin-bottom: 25px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            font-size: 16px;
        }

/* Game Layout */
        .proto-m2-game-board {
            background: #ffffff;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            border: 1px solid #e0e0e0;
        }

.proto-m2-status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px dashed #ccc;
            font-weight: bold;
            font-size: 18px;
            color: #5C0A0A;
        }

.proto-m2-scenario-box {
            background: #F4F6F8;
            padding: 25px;
            border-radius: 10px;
            font-size: 20px;
            text-align: center;
            margin-bottom: 25px;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-left: 5px solid #8B0F0F;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
        }

.proto-m2-options-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 15px;
        }

.proto-m2-btn-option {
            background-color: white;
            color: #8B0F0F;
            border: 2px solid #8B0F0F;
            padding: 15px 10px;
            font-size: 16px;
            font-weight: bold;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(139, 15, 15, 0.1);
        }

.proto-m2-btn-option:hover {
            background-color: #8B0F0F;
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(139, 15, 15, 0.2);
        }

.proto-m2-btn-option:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

/* Feedback Area */
        .proto-m2-feedback {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            display: none;
            animation: protoFadeIn 0.3s;
        }
        @keyframes protoFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.proto-m2-btn-next {
            background-color: #5C0A0A;
            color: white;
            border: none;
            padding: 10px 25px;
            font-size: 16px;
            border-radius: 20px;
            cursor: pointer;
            margin-top: 15px;
            font-weight: bold;
            display: none;
        }
        .proto-m2-btn-next:hover { background-color: #333; }

/* Result Modal */
        .proto-m2-modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.8);
            display: none; align-items: center; justify-content: center;
            z-index: 9999;
            padding: 20px;
        }

.proto-m2-modal {
            background: white; padding: 35px; border-radius: 15px;
            text-align: center; max-width: 450px; width: 100%;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

.proto-m2-btn-restart {
            background-color: #8B0F0F; color: white; border: none;
            padding: 12px 30px; font-size: 18px; border-radius: 25px;
            cursor: pointer; font-weight: bold; margin-top: 20px;
        }
        .proto-m2-btn-restart:hover { background-color: #5C0A0A; }
    </style>

<div class="proto-m2-header">
        
        <h1 class="proto-m2-title">🚦 เกม Cyber Traffic: ผู้บัญชาการโปรโตคอล</h1>
        <p style="margin: 10px 0 0; opacity: 0.9; font-size: 18px;">วิทยาการคำนวณ ม.2 - กฎจราจรไซเบอร์</p>
    </div>

<div class="proto-m2-intro">
        <p style="margin: 0;">
            <strong>สวัสดีครับ แอดมินเครือข่ายมือใหม่! 👩‍💻👨‍💻</strong><br>
            ยินดีต้อนรับสู่ศูนย์ควบคุมจราจรทางข้อมูล หน้าที่ของคุณคือการอ่านสถานการณ์และ <strong>"เลือกโปรโตคอล (Protocol)"</strong> ให้ถูกต้อง เพื่อส่งข้อมูลไปยังปลายทางได้อย่างปลอดภัยและรวดเร็วที่สุด 
            <br><br>
            <span style="color: #8B0F0F; font-weight: bold;">ภารกิจทั้งหมด 10 ด่าน ทำคะแนนให้ได้มากที่สุดเพื่อรับใบอนุญาตผู้ดูแลเครือข่าย! พร้อมแล้วลุยเลย!</span>
        </p>
    </div>

<div class="proto-m2-game-board">
        <div class="proto-m2-status-bar">
            <div id="proto-mission-text">ภารกิจที่: 1 / 10</div>
            <div id="proto-score-text">คะแนน: 0</div>
        </div>

<div id="proto-scenario" class="proto-m2-scenario-box">ถ้าต้องการให้เครื่อง Mac, Windows และสมาร์ทโฟน Android คุยกันรู้เรื่องบนเครือข่ายอินเทอร์เน็ต ต้องอาศัยกฎจราจรหลักข้อใด?</div>

<div class="proto-m2-options-grid" id="proto-options">
            <button class="proto-m2-btn-option" onclick="checkProtoAnswer('TCP/IP', this)" style="background-color: white; color: rgb(139, 15, 15);">TCP/IP</button>
            <button class="proto-m2-btn-option" onclick="checkProtoAnswer('HTTP', this)" style="background-color: white; color: rgb(139, 15, 15);">HTTP</button>
            <button class="proto-m2-btn-option" onclick="checkProtoAnswer('HTTPS', this)" style="background-color: white; color: rgb(139, 15, 15);">HTTPS</button>
            <button class="proto-m2-btn-option" onclick="checkProtoAnswer('FTP', this)" style="background-color: white; color: rgb(139, 15, 15);">FTP</button>
            <button class="proto-m2-btn-option" onclick="checkProtoAnswer('SMTP', this)" style="background-color: white; color: rgb(139, 15, 15);">SMTP</button>
            <button class="proto-m2-btn-option" onclick="checkProtoAnswer('POP3/IMAP', this)" style="background-color: white; color: rgb(139, 15, 15);">POP3/IMAP</button>
        </div>

<div class="proto-m2-modal-overlay" id="proto-result-modal" style="display: none;">
        <div class="proto-m2-modal">
            <div id="proto-final-icon" style="font-size: 60px; margin-bottom: 10px;">🏆</div>
            <h2 id="proto-final-title" style="color: #8B0F0F; margin-top: 0; font-size: 28px;">สรุปผลภารกิจ</h2>
            <p id="proto-final-desc" style="font-size: 18px; margin-bottom: 5px;"></p>
            <p style="font-size: 24px; font-weight: bold; color: #5C0A0A; margin-top: 0;">คะแนนของคุณ: <span id="proto-final-score">0</span> / 10</p>
            <button class="proto-m2-btn-restart" onclick="initProtoGame()">🔄 เล่นใหม่อีกครั้ง</button>
        </div>
    </div>

<script>
        // ฐานข้อมูลภารกิจทั้ง 10 ข้อ (M.2 Level)
        const protoMissionsDB = [
            {
                scenario: "ด.ญ.ฟ้า ต้องการโอนเงินค่าขนมผ่านเว็บไซต์ของธนาคาร เธอต้องสังเกตโปรโตคอลใดบนช่อง URL เพื่อป้องกันแฮกเกอร์ดักจับรหัสผ่าน?",
                correct: "HTTPS",
                explanation: "HTTPS มีการเข้ารหัสข้อมูล (Secure) ทำให้การโอนเงินหรือส่งรหัสผ่านปลอดภัยจากการถูกขโมยข้อมูลครับ!"
            },
            {
                scenario: "ด.ช.ดิน กำลังส่งอีเมลรายงานวิชาวิทยาการคำนวณไปให้คุณครู คอมพิวเตอร์ของดินต้องใช้โปรโตคอลใดในการ 'ส่งจดหมายออก' ?",
                correct: "SMTP",
                explanation: "SMTP (Simple Mail Transfer Protocol) ทำหน้าที่เหมือนบุรุษไปรษณีย์ คอยรับอีเมลจากเครื่องเราไปส่งให้เซิร์ฟเวอร์ครับ"
            },
            {
                scenario: "โปรโตคอลพื้นฐานที่เป็นเหมือน 'ภาษามาตรฐานสากล' คอยแบ่งข้อมูลเป็นแพ็กเก็ตย่อยๆ และจ่าหน้าซองที่อยู่ (IP) เพื่อส่งข้ามโลกคืออะไร?",
                correct: "TCP/IP",
                explanation: "TCP/IP คือหัวใจหลักของอินเทอร์เน็ตที่ทำให้คอมพิวเตอร์ทั่วโลกสื่อสารกันรู้เรื่องครับ"
            },
            {
                scenario: "บริษัททำแอนิเมชันต้องการ 'ดาวน์โหลด' ไฟล์วิดีโอความละเอียดสูงขนาด 50GB จากเซิร์ฟเวอร์ โปรโตคอลใดเหมาะสมที่สุดสำหรับการโอนย้ายไฟล์ขนาดใหญ่?",
                correct: "FTP",
                explanation: "FTP (File Transfer Protocol) ถูกออกแบบมาเพื่อการอัปโหลดและดาวน์โหลดไฟล์โดยเฉพาะ ทำงานได้รวดเร็วและเสถียรครับ"
            },
            {
                scenario: "เมื่อนักเรียนเปิดแอปพลิเคชันในมือถือเพื่อ 'ดึงอีเมลใหม่' เข้ามาอ่านใน Inbox ต้องใช้โปรโตคอลใด?",
                correct: "POP3/IMAP",
                explanation: "POP3 หรือ IMAP มีหน้าที่ไปไขกุญแจกล่องจดหมายบนเซิร์ฟเวอร์ แล้วดึงอีเมลกลับมาแสดงผลที่หน้าจอของเราครับ"
            },
            {
                scenario: "ต้นกล้าเปิดเข้าเว็บไซต์อ่านข่าวกีฬาทั่วไป ที่ไม่มีการกรอกรหัสผ่านหรือข้อมูลส่วนตัวใดๆ โปรโตคอลพื้นฐานที่ใช้เรียกหน้าเว็บนี้คืออะไร?",
                correct: "HTTP",
                explanation: "HTTP คือโปรโตคอลพื้นฐานที่ใช้แสดงผลหน้าเว็บไซต์ (World Wide Web) ทั่วไปที่ไม่ได้ต้องการความปลอดภัยขั้นสูงครับ"
            },
            {
                scenario: "แอดมินดูแลเว็บไซต์โรงเรียนกำลัง 'อัปโหลด' โค้ด HTML และรูปภาพกิจกรรมทั้งหมดขึ้นไปเก็บบน Web Server เขาควรใช้บริการโปรโตคอลใด?",
                correct: "FTP",
                explanation: "การนำไฟล์ขึ้นเซิร์ฟเวอร์ (Upload) หรือโหลดกลับมาแก้ไข (Download) คือหน้าที่หลักของ FTP เลยครับ"
            },
            {
                scenario: "น้ำใสกำลังกรอกข้อมูลบัตรเครดิตเพื่อซื้อรองเท้าผ้าใบคู่ใหม่บนร้านค้าออนไลน์ ระบบต้องใช้โปรโตคอลใดเพื่อความปลอดภัยสูงสุด?",
                correct: "HTTPS",
                explanation: "จำไว้เสมอ! เรื่องเงินๆ ทองๆ และข้อมูลส่วนตัว ต้องมีตัว S (Secure) ต่อท้ายเสมอ นั่นคือ HTTPS ครับ"
            },
            {
                scenario: "ถ้าต้องการให้เครื่อง Mac, Windows และสมาร์ทโฟน Android คุยกันรู้เรื่องบนเครือข่ายอินเทอร์เน็ต ต้องอาศัยกฎจราจรหลักข้อใด?",
                correct: "TCP/IP",
                explanation: "ไม่ว่าอุปกรณ์จะต่างยี่ห้อหรือระบบปฏิบัติการต่างกันแค่ไหน TCP/IP ก็ช่วยให้ทุกเครื่องสื่อสารกันได้ด้วยมาตรฐานเดียวกัน"
            },
            {
                scenario: "ผู้อำนวยการพิมพ์ประกาศโรงเรียน และกดปุ่ม 'ส่ง (Send)' กระจายอีเมลไปยังนักเรียนทุกคน โปรโตคอลใดทำงานทันทีที่กดปุ่มส่ง?",
                correct: "SMTP",
                explanation: "เมื่อกดส่ง (Send) โปรโตคอล SMTP จะเริ่มทำงานทันทีเพื่อนำข้อความออกจากเครื่องผู้ส่งไปยังเซิร์ฟเวอร์เมลครับ"
            }
        ];

let currentMissions = [];
        let currentIndex = 0;
        let score = 0;

// สุ่มลำดับอาเรย์
        function shuffleProtoArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }

function initProtoGame() {
            // ปิด Modal (ถ้ามี)
            document.getElementById('proto-result-modal').style.display = 'none';
            
            // สุ่มลำดับภารกิจ
            currentMissions = shuffleProtoArray([...protoMissionsDB]);
            currentIndex = 0;
            score = 0;
            
            updateProtoBoard();
        }

function updateProtoBoard() {
            // รีเซ็ต UI
            document.getElementById('proto-feedback').style.display = 'none';
            document.getElementById('proto-next-btn').style.display = 'none';
            
            const btns = document.querySelectorAll('.proto-m2-btn-option');
            btns.forEach(btn => {
                btn.disabled = false;
                btn.style.backgroundColor = 'white';
                btn.style.color = '#8B0F0F';
            });

// อัปเดตข้อมูล
            document.getElementById('proto-mission-text').innerText = `ภารกิจที่: ${currentIndex + 1} / 10`;
            document.getElementById('proto-score-text').innerText = `คะแนน: ${score}`;
            document.getElementById('proto-scenario').innerText = currentMissions[currentIndex].scenario;
        }

function checkProtoAnswer(selectedAns, btnElement) {
            // ปิดปุ่มทั้งหมด
            const btns = document.querySelectorAll('.proto-m2-btn-option');
            btns.forEach(b => b.disabled = true);

feedbackBox.style.backgroundColor = '#FFEBEE';
                feedbackBox.style.color = '#B71C1C';
                feedbackBox.innerHTML = `❌ <strong>ยังไม่ใช่นะครับ</strong><br>โปรโตคอลที่ถูกต้องคือ <strong>${current.correct}</strong><br><em>เหตุผล:</em> ${current.explanation}`;
            }

feedbackBox.style.display = 'block';
            document.getElementById('proto-next-btn').style.display = 'inline-block';
        }

function showProtoFinalResult() {
            document.getElementById('proto-final-score').innerText = score;
            const desc = document.getElementById('proto-final-desc');
            const icon = document.getElementById('proto-final-icon');

if (score === 10) {
                icon.innerText = "🏅";
                desc.innerHTML = "สมบูรณ์แบบ! คุณคือ <strong>'แอดมินเครือข่ายระดับพระกาฬ'</strong> รู้ลึกรู้จริงเรื่องโปรโตคอล!";
            } else if (score >= 7) {
                icon.innerText = "👍";
                desc.innerHTML = "ทำได้ดีมากครับ! คุณได้รับใบอนุญาต <strong>'ผู้ดูแลเครือข่ายระดับต้น'</strong> แล้ว";
            } else {
                icon.innerText = "📚";
                desc.innerHTML = "การจัดการข้อมูลยังมีจุดผิดพลาดอยู่บ้าง ลองทบทวนเนื้อหาแล้วมาลุยกันใหม่อีกครั้งนะครับ!";
            }

document.getElementById('proto-result-modal').style.display = 'flex';
        }

// เริ่มเกมอัตโนมัติ
        initProtoGame();

</script>
</div>