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

Back

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

Title

Description

Keyword

Detail (HTML Code)

.app-m3-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 */
        .app-m3-game-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

/* Status Bar */
        .app-m3-status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            padding: 15px 20px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            border: 1px solid #ddd;
        }

.app-m3-progress-wrapper {
            flex-grow: 1;
            margin: 0 20px;
            background: #e0e0e0;
            height: 12px;
            border-radius: 6px;
            overflow: hidden;
        }

.app-m3-progress-fill {
            height: 100%;
            background: #8B0F0F;
            width: 0%;
            transition: width 0.3s ease;
        }

.app-m3-stats {
            font-weight: bold;
            color: #5C0A0A;
            font-size: 18px;
        }

/* Brief Card (Email Style) */
        .app-m3-brief-card {
            background: #ffffff;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            border-top: 5px solid #8B0F0F;
            position: relative;
            min-height: 180px;
        }

.app-m3-brief-header {
            color: #666;
            font-size: 14px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px dashed #ccc;
        }

.app-m3-brief-content {
            font-size: 20px;
            color: #333;
            font-weight: 500;
        }

/* Options Grid */
        .app-m3-options-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 15px;
        }

.app-m3-btn-option {
            background-color: white;
            color: #8B0F0F;
            border: 2px solid #8B0F0F;
            padding: 15px;
            font-size: 16px;
            font-weight: bold;
            font-family: inherit;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(139, 15, 15, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

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

.app-m3-btn-option:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

/* Feedback Overlay */
        .app-m3-feedback-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            animation: appFadeIn 0.3s ease;
            z-index: 10;
        }

@keyframes appFadeIn { from { opacity: 0; } to { opacity: 1; } }

.app-m3-btn-next {
            background-color: #5C0A0A;
            color: white;
            border: none;
            padding: 10px 30px;
            font-size: 16px;
            border-radius: 20px;
            cursor: pointer;
            margin-top: 15px;
            font-weight: bold;
            font-family: inherit;
        }
        .app-m3-btn-next:hover { background-color: #333; }

/* Modal */
        .app-m3-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;
        }

.app-m3-modal {
            background: white; padding: 40px; border-radius: 15px;
            text-align: center; max-width: 500px; width: 100%;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

.app-m3-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; font-family: inherit;
        }
        .app-m3-btn-restart:hover { background-color: #5C0A0A; }
    </style>

<div class="app-m3-header">
        <h1 class="app-m3-title">🚀 เกม App Architect: วิศวกรออกแบบระบบ</h1>
        <p style="margin: 10px 0 0; opacity: 0.9; font-size: 18px;">Tech Startup Simulation (วิชาวิทยาการคำนวณ ม.3)</p>
    </div>

<div class="app-m3-intro">
        <p style="margin: 0;">
            <strong>ยินดีต้อนรับสู่บริษัท Startup ของเราครับ System Architect! 💼</strong><br>
            ในฐานะหัวหน้าทีมออกแบบระบบ คุณจะได้รับ <strong>"อีเมลบรีฟงานจากลูกค้า"</strong> จำนวน 10 โปรเจกต์ หน้าที่ของคุณคือการวิเคราะห์ความต้องการของลูกค้า แล้วตัดสินใจเลือก <strong>"ประเภทของแอปพลิเคชัน"</strong> ให้ถูกต้องและเหมาะสมที่สุด เพื่อให้โปรเจกต์ประสบความสำเร็จและสร้างชื่อเสียงให้กับบริษัท!
        </p>
    </div>

<div class="app-m3-game-container">
        
        <div class="app-m3-status-bar">
            <div class="app-m3-stats" id="app-m3-mission-text">โปรเจกต์: 1/10</div>
            <div class="app-m3-progress-wrapper">
                <div class="app-m3-progress-fill" id="app-m3-progress"></div>
            </div>
            <div class="app-m3-stats" id="app-m3-score-text">ความพึงพอใจ: 0%</div>
        </div>

<div class="app-m3-brief-card" id="app-m3-card">
            <div class="app-m3-brief-header">
                <strong>จาก:</strong> ตัวแทนลูกค้า <br>
                <strong>หัวเรื่อง:</strong> แจ้งความต้องการพัฒนาระบบซอฟต์แวร์ใหม่
            </div>
            <div class="app-m3-brief-content" id="app-m3-brief-text">
                </div>

<div class="app-m3-feedback-overlay" id="app-m3-feedback">
                <div id="app-m3-feedback-icon" style="font-size: 50px; margin-bottom: 10px;">✅</div>
                <h3 id="app-m3-feedback-title" style="margin: 0 0 10px 0; color: #8B0F0F;">วิเคราะห์ถูกต้อง!</h3>
                <p id="app-m3-feedback-desc" style="font-size: 16px; margin-bottom: 15px; color: #555;"></p>
                <button class="app-m3-btn-next" onclick="nextAppM3Mission()">โปรเจกต์ต่อไป ➡️</button>
            </div>
        </div>

<div class="app-m3-options-grid" id="app-m3-options">
            <button class="app-m3-btn-option" onclick="checkAppM3Answer('Desktop')">
                <span style="font-size: 24px;">💻</span> Desktop App
            </button>
            <button class="app-m3-btn-option" onclick="checkAppM3Answer('Microcontroller')">
                <span style="font-size: 24px;">⚙️</span> Microcontroller
            </button>
            <button class="app-m3-btn-option" onclick="checkAppM3Answer('Mobile')">
                <span style="font-size: 24px;">📱</span> Mobile App
            </button>
            <button class="app-m3-btn-option" onclick="checkAppM3Answer('Web')">
                <span style="font-size: 24px;">🌐</span> Web App
            </button>
            <button class="app-m3-btn-option" onclick="checkAppM3Answer('SmartWatch')">
                <span style="font-size: 24px;">⌚</span> Smart Watch
            </button>
        </div>

</div>

<div class="app-m3-modal-overlay" id="app-m3-result-modal">
        <div class="app-m3-modal">
            <div id="app-m3-final-icon" style="font-size: 60px; margin-bottom: 10px;">🏆</div>
            <h2 id="app-m3-final-title" style="color: #8B0F0F; margin-top: 0; font-size: 28px;">สรุปผลประกอบการ</h2>
            <p id="app-m3-final-desc" style="font-size: 18px; margin-bottom: 10px;"></p>
            <div style="background: #F4F6F8; padding: 15px; border-radius: 10px; margin-bottom: 20px;">
                <p style="font-size: 20px; font-weight: bold; color: #5C0A0A; margin: 0;">ความพึงพอใจลูกค้าสุทธิ: <span id="app-m3-final-score">0</span>%</p>
            </div>
            <button class="app-m3-btn-restart" onclick="initAppM3Game()">🔄 รับโปรเจกต์ใหม่ (เริ่มเกมใหม่)</button>
        </div>
    </div>

let currentAppIndex = 0;
        let appScore = 0;
        let shuffledMissions = [];

// สุ่มคำถาม
        function shuffleAppArray(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 initAppM3Game() {
            document.getElementById('app-m3-result-modal').style.display = 'none';
            shuffledMissions = shuffleAppArray([...appMissions]);
            currentAppIndex = 0;
            appScore = 0;
            updateAppM3Board();
        }

function checkAppM3Answer(selectedType) {
            // ปิดปุ่มทั้งหมด
            const btns = document.querySelectorAll('.app-m3-btn-option');
            btns.forEach(btn => btn.disabled = true);

const currentBrief = shuffledMissions[currentAppIndex];
            const feedbackOverlay = document.getElementById('app-m3-feedback');
            const feedbackTitle = document.getElementById('app-m3-feedback-title');
            const feedbackDesc = document.getElementById('app-m3-feedback-desc');
            const feedbackIcon = document.getElementById('app-m3-feedback-icon');

if (selectedType === currentBrief.correct) {
                // ตอบถูก
                appScore++;
                document.getElementById('app-m3-score-text').innerText = `ความพึงพอใจ: ${appScore * 10}%`;
                
                feedbackIcon.innerText = "🌟";
                feedbackTitle.innerText = "วิเคราะห์เจ๋งมาก!";
                feedbackTitle.style.color = "#2E7D32"; // สีเขียวความสำเร็จ
                feedbackDesc.innerHTML = `การเลือก <strong>${currentBrief.correct}</strong> คือคำตอบที่ใช่!<br>${currentBrief.explanation}`;
            } else {
                // ตอบผิด
                feedbackIcon.innerText = "⚠️";
                feedbackTitle.innerText = "อ๊ะ! ลูกค้ายังไม่ปลื้ม";
                feedbackTitle.style.color = "#8B0F0F"; // สีแดงแบรนด์
                feedbackDesc.innerHTML = `โปรเจกต์นี้ควรใช้ <strong>${currentBrief.correct}</strong> มากกว่าครับ<br><em>เหตุผล:</em> ${currentBrief.explanation}`;
            }

feedbackOverlay.style.display = 'flex';
        }

function showAppM3FinalResult() {
            // อัปเดต Progress Bar ครั้งสุดท้าย
            document.getElementById('app-m3-progress').style.width = '100%';
            
            const finalPercent = appScore * 10;
            document.getElementById('app-m3-final-score').innerText = finalPercent;
            
            const desc = document.getElementById('app-m3-final-desc');
            const icon = document.getElementById('app-m3-final-icon');

if (appScore === 10) {
                icon.innerText = "🦄";
                desc.innerHTML = "เพอร์เฟกต์! บริษัทของคุณกลายเป็น <strong>Tech Unicorn</strong> แล้ว ทักษะการเป็น System Architect ของคุณไร้ที่ติ!";
            } else if (appScore >= 7) {
                icon.innerText = "📈";
                desc.innerHTML = "ยอดเยี่ยมมาก! ลูกค้าส่วนใหญ่พึงพอใจ บริษัท Startup ของเราเติบโตได้อย่างมั่นคงครับ";
            } else {
                icon.innerText = "💡";
                desc.innerHTML = "ธุรกิจมีขึ้นมีลง! ลองกลับไปทบทวนคุณสมบัติของแอปแต่ละประเภท แล้วมาบริหารบริษัทกันใหม่อีกครั้งนะครับ";
            }

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

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

</script>
</div>