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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div class="ceo-wrapper" id="ceo-game-container">
    
    <div id="ceo-screen-start" class="ceo-screen active">
        <div style="font-size: 60px; margin-bottom: 10px;">🏢</div>
        <h1 class="ceo-title">IT Startup Manager</h1>
        <p style="color: #3b82f6; font-weight: 700; font-size: 18px; margin-bottom: 20px;">สวมบทบาท CEO บริหารโปรเจกต์ไอที</p>
        
        <div class="ceo-intro-box">
            <p style="color: #1e3a8a; font-weight: 800; margin-bottom: 10px; font-size: 16px;">> รายละเอียดงานสำหรับ CEO:</p>
            <p style="font-size: 15px; margin-bottom: 5px; color: #475569;">1. คุณจะได้รับ <strong>"โปรเจกต์"</strong> จากลูกค้า</p>
            <p style="font-size: 15px; margin-bottom: 5px; color: #475569;">2. ต้องอนุมัติองค์ประกอบ 3 ส่วนให้ถูกต้อง: <br><strong style="color:#10b981;">[Data] -> [Peopleware] -> [Procedure]</strong></p>
            <p style="font-size: 15px; margin-bottom: 0; color: #475569;">3. มีเวลา 20 วินาที/โปรเจกต์ หากตัดสินใจพลาด บริษัทจะเสียความน่าเชื่อถือ!</p>
        </div>
        
        <button class="ceo-btn-main" onclick="ceo_requestPlayerName()">เข้ารับตำแหน่ง CEO 💼</button>
    </div>

<div id="ceo-screen-game" class="ceo-screen">
        <div class="ceo-hud-bar">
            <div class="ceo-hud-item">👤 CEO: <span class="ceo-val-box" id="ceo-hud-name">-</span></div>
            <div class="ceo-hud-item">🏆 กำไร: <span class="ceo-val-box" style="color:#fbbf24;" id="ceo-hud-score">฿0</span></div>
            <div class="ceo-hud-item">❤️ ความเชื่อมั่น: <span class="ceo-val-box" id="ceo-hud-hearts">❤️❤️❤️</span></div>
        </div>

<div class="ceo-project-card">
            <div class="ceo-proj-title" id="ceo-proj-title">📋 Project: กำลังโหลด...</div>
            
            <div class="ceo-progress-steps">
                <div class="ceo-step-badge" id="ceo-badge-0">1. DATA</div>
                <div class="ceo-step-badge" id="ceo-badge-1">2. PEOPLE</div>
                <div class="ceo-step-badge" id="ceo-badge-2">3. PROCEDURE</div>
            </div>

<div class="ceo-question-text" id="ceo-question-text">กรุณาเลือกทรัพยากร...</div>

<div id="ceo-screen-result" class="ceo-screen">
        <h1 class="ceo-title" style="font-size: 38px;">สรุปผลประกอบการ</h1>
        <h2 style="color: #64748b; margin-bottom: 20px; font-weight: 600; font-size: 18px;">สิ้นสุดปีงบประมาณ</h2>
        
        <div class="ceo-result-box">
            <p style="font-size: 16px; color:#64748b; font-weight: 700; margin-bottom: 5px;">ชื่อผู้บริหาร: <strong id="ceo-result-name" style="color:#1e3a8a; font-size: 20px;">-</strong></p>
            <p style="font-size: 18px; margin-top: 15px; color:#334155; font-weight: 700; margin-bottom: 5px;">กำไรสุทธิบริษัท:</p>
            <p style="font-size: 50px; font-weight: 800; color: #10b981; margin: 5px 0;">฿<span id="ceo-result-score">0</span></p>
            <div class="ceo-rank-badge" id="ceo-result-rank">ระดับ: โหลดข้อมูล...</div>
        </div>

<button class="ceo-btn-main" onclick="ceo_restartGame()">เปิดบริษัทใหม่ 🔄</button>
    </div>

</div>

.ceo-wrapper * { 
        box-sizing: border-box; 
    }

.ceo-screen { 
        display: none; 
        padding: 30px; 
        text-align: center; 
        animation: ceoFadeIn 0.4s ease-out forwards; 
    }
    .ceo-screen.active { display: block; }

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

.ceo-wrapper h1.ceo-title { 
        font-size: 32px; 
        color: #1e3a8a; 
        margin-bottom: 5px; 
        margin-top: 0;
        font-weight: 800; 
    }
    
    .ceo-wrapper p { margin-top: 0; }

/* 3D Buttons */
    .ceo-btn-main {
        display: inline-block; 
        padding: 15px 40px; 
        font-size: 20px; 
        font-weight: 800;
        color: #fff; 
        background: #f97316; 
        border: none; 
        border-radius: 50px;
        cursor: pointer; 
        box-shadow: 0 6px 0 #c2410c, 0 10px 15px rgba(249, 115, 22, 0.3);
        transition: all 0.1s; 
        margin-top: 20px; 
        font-family: 'Prompt', sans-serif;
    }
    .ceo-btn-main:hover { 
        transform: translateY(2px); 
        box-shadow: 0 4px 0 #c2410c, 0 5px 10px rgba(249, 115, 22, 0.3); 
    }
    .ceo-btn-main:active { 
        transform: translateY(6px); 
        box-shadow: none; 
    }

.ceo-intro-box {
        background: #fff; 
        padding: 20px; 
        border-radius: 15px; 
        text-align: left; 
        border-left: 5px solid #f97316; 
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        margin: 0 auto 20px auto;
        max-width: 600px;
    }

/* HUD Dashboard */
    .ceo-hud-bar {
        display: flex; 
        justify-content: space-between; 
        align-items: center;
        background: #1e3a8a; 
        padding: 15px 20px; 
        border-radius: 12px;
        margin-bottom: 20px; 
        color: #fff; 
        box-shadow: 0 4px 10px rgba(30, 58, 138, 0.2);
    }
    .ceo-hud-item { 
        font-size: 16px; 
        font-weight: 600; 
        display: flex; 
        align-items: center; 
        gap: 8px;
    }
    .ceo-val-box { 
        background: rgba(255,255,255,0.2); 
        padding: 4px 12px; 
        border-radius: 20px; 
        font-weight: 800; 
        font-size: 18px;
    }

/* Project Card */
    .ceo-project-card {
        background: #ffffff; 
        border-radius: 15px; 
        padding: 25px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
        margin-bottom: 20px;
        border-top: 6px solid #3b82f6; 
        text-align: left;
    }
    .ceo-proj-title { 
        font-size: 22px; 
        color: #1e3a8a; 
        font-weight: 800; 
        margin-bottom: 15px; 
        border-bottom: 2px dashed #e2e8f0; 
        padding-bottom: 10px; 
        margin-top: 0;
    }
    
    .ceo-progress-steps { 
        display: flex; 
        justify-content: space-between; 
        margin-bottom: 20px; 
    }
    .ceo-step-badge {
        flex: 1; 
        text-align: center; 
        padding: 8px; 
        margin: 0 5px; 
        border-radius: 8px;
        background: #f1f5f9; 
        color: #64748b; 
        font-weight: 800; 
        font-size: 14px;
        transition: all 0.3s; 
        border: 2px solid #e2e8f0;
    }
    .ceo-step-badge.active { background: #e0f2fe; color: #3b82f6; border-color: #3b82f6; }
    .ceo-step-badge.completed { background: #d1fae5; color: #10b981; border-color: #10b981; }

.ceo-question-text { 
        font-size: 18px; 
        color: #334155; 
        font-weight: 600; 
        margin-bottom: 20px; 
        text-align: center; 
    }

/* Options Grid */
    .ceo-options-grid { 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        gap: 15px; 
    }
    .ceo-opt-btn {
        background: #f8fafc; 
        border: 3px solid #cbd5e1; 
        padding: 20px 15px;
        border-radius: 12px; 
        color: #1e293b; 
        font-size: 16px; 
        font-weight: 700;
        cursor: pointer; 
        transition: all 0.2s; 
        font-family: 'Prompt', sans-serif;
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        gap: 10px;
    }
    .ceo-opt-btn:hover { 
        border-color: #3b82f6; 
        background: #eff6ff; 
        transform: translateY(-3px); 
        box-shadow: 0 6px 15px rgba(59, 130, 246, 0.1); 
    }
    .ceo-opt-btn:active { 
        transform: translateY(1px); 
        box-shadow: none; 
    }
    .ceo-opt-icon { font-size: 32px; }

/* Timer */
    .ceo-timer-track { 
        width: 100%; 
        height: 8px; 
        background: #cbd5e1; 
        border-radius: 4px; 
        overflow: hidden; 
        margin-bottom: 20px; 
    }
    .ceo-timer-fill { 
        width: 100%; 
        height: 100%; 
        background: #10b981; 
        transition: width 0.1s linear, background-color 0.3s; 
    }

.ceo-result-box {
        background: #fff; 
        border: 2px solid #e2e8f0; 
        padding: 30px; 
        border-radius: 15px; 
        margin-bottom: 25px; 
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }
    
    .ceo-rank-badge {
        font-size: 20px; 
        font-weight: 800; 
        color: #f97316; 
        margin-top: 15px; 
        background: #fff7ed; 
        display: inline-block; 
        padding: 5px 15px; 
        border-radius: 10px;
    }

/* SweetAlert Custom */
    .swal-ceo-popup { 
        font-family: 'Prompt', sans-serif !important; 
        border-radius: 15px !important; 
        border: 4px solid #1e3a8a !important; 
    }
    .swal-ceo-popup .swal2-title { color: #1e3a8a !important; font-weight: 800; }
    .swal-ceo-popup .swal2-confirm { 
        background: #3b82f6 !important; 
        color: #fff !important; 
        font-weight: 800 !important; 
        border-radius: 30px !important; 
        padding: 12px 30px !important; 
        box-shadow: 0 4px 0 #1e3a8a !important;
    }

.ceo-shake { animation: ceoShake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
    @keyframes ceoShake { 
        10%, 90% { transform: translate3d(-2px, 0, 0); } 
        20%, 80% { transform: translate3d(4px, 0, 0); } 
        30%, 50%, 70% { transform: translate3d(-6px, 0, 0); } 
        40%, 60% { transform: translate3d(6px, 0, 0); } 
    }
    
    /* Mobile Responsive */
    @media (max-width: 600px) {
        .ceo-hud-bar { flex-direction: column; gap: 10px; align-items: stretch;}
        .ceo-hud-item { justify-content: space-between; }
        .ceo-options-grid { grid-template-columns: 1fr; }
        .ceo-step-badge { font-size: 12px; padding: 5px; }
        .ceo-wrapper { padding: 15px 5px; }
    }
</style>

let ceo_playerName = "";
    let ceo_score = 0;
    let ceo_hearts = 3;
    let ceo_currentProjIdx = 0;
    let ceo_currentStepIdx = 0;
    let ceo_gameTimer = null;
    let ceo_timeRemaining = 100;
    let ceo_isWaiting = false;
    let ceo_audioCtx = null;

function ceo_initAudio() { 
        if (!ceo_audioCtx) {
            ceo_audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 
        }
    }

function ceo_playSound(type) {
        if (!ceo_audioCtx) return;
        try {
            const osc = ceo_audioCtx.createOscillator(), gain = ceo_audioCtx.createGain();
            osc.connect(gain); gain.connect(ceo_audioCtx.destination);
            const now = ceo_audioCtx.currentTime;

if (type === 'stamp') {
                osc.type = 'square'; osc.frequency.setValueAtTime(400, now); osc.frequency.exponentialRampToValueAtTime(800, now + 0.1);
                gain.gain.setValueAtTime(0.1, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
                osc.start(now); osc.stop(now + 0.1);
            } else if (type === 'error') {
                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.3);
                osc.start(now); osc.stop(now + 0.3);
            } else if (type === 'success') {
                osc.type = 'sine'; [523.25, 659.25, 783.99, 1046.50].forEach((f, i) => osc.frequency.setValueAtTime(f, now + (i*0.1)));
                gain.gain.setValueAtTime(0.15, now); gain.gain.exponentialRampToValueAtTime(0.01, now + 0.5);
                osc.start(now); osc.stop(now + 0.5);
            }
        } catch (e) { console.error("Audio error:", e); }
    }

function ceo_showScreen(id) {
        document.querySelectorAll('.ceo-screen').forEach(s => s.classList.remove('active'));
        document.getElementById(id).classList.add('active');
    }

function ceo_startGame() {
        ceo_score = 0; 
        ceo_hearts = 3; 
        ceo_currentProjIdx = 0;
        document.getElementById('ceo-hud-name').innerText = ceo_playerName;
        ceo_updateHUD();
        
        // Shuffle projects
        ceo_projects.sort(() => Math.random() - 0.5);
        ceo_showScreen('ceo-screen-game');
        ceo_loadProject();
    }

function ceo_updateHUD() {
        document.getElementById('ceo-hud-score').innerText = '฿' + ceo_score.toLocaleString();
        document.getElementById('ceo-hud-hearts').innerText = "❤️".repeat(ceo_hearts) + "🖤".repeat(3 - ceo_hearts);
    }

ceo_startTimer();
        ceo_loadStep();
    }

function ceo_loadStep() {
        ceo_isWaiting = false;
        const proj = ceo_projects[ceo_currentProjIdx];
        const step = proj.steps[ceo_currentStepIdx];
        
        // Update Badges
        [0, 1, 2].forEach(i => {
            const b = document.getElementById(`ceo-badge-${i}`);
            if (i < ceo_currentStepIdx) b.className = 'ceo-step-badge completed';
            else if (i === ceo_currentStepIdx) b.className = 'ceo-step-badge active';
            else b.className = 'ceo-step-badge';
        });

function ceo_checkAnswer(selected, correct) {
        if(ceo_isWaiting) return;
        ceo_isWaiting = true;

if (selected === correct) {
            ceo_playSound('stamp');
            ceo_currentStepIdx++;
            
            if (ceo_currentStepIdx > 2) {
                // Project Completed
                clearInterval(ceo_gameTimer);
                ceo_playSound('success');
                ceo_score += 50000;
                ceo_updateHUD();
                
                document.getElementById('ceo-badge-2').className = 'ceo-step-badge completed';
                document.getElementById('ceo-question-text').innerHTML = "<span style='color:#10b981;'>ปิดโปรเจกต์สำเร็จ! 🎉</span>";
                document.getElementById('ceo-options-container').innerHTML = '';
                
                setTimeout(() => {
                    ceo_currentProjIdx++;
                    ceo_loadProject();
                }, 1500);
            } else {
                ceo_loadStep(); 
            }
        } else {
            ceo_handleError("การตัดสินใจผิดพลาด! ส่งผลกระทบต่อระบบ");
        }
    }

function ceo_handleError(msg) {
        ceo_isWaiting = true;
        clearInterval(ceo_gameTimer);
        ceo_playSound('error');
        ceo_hearts--;
        ceo_updateHUD();
        
        const wrapper = document.getElementById('ceo-game-container');
        wrapper.classList.add('ceo-shake');
        setTimeout(() => wrapper.classList.remove('ceo-shake'), 400);

Swal.fire({
            title: '❌ อนุมัติล้มเหลว', 
            text: msg, 
            icon: 'error',
            confirmButtonText: 'ดำเนินการต่อ', 
            customClass: { popup: 'swal-ceo-popup' }
        }).then(() => {
            if(ceo_hearts <= 0) ceo_endGame();
            else {
                ceo_currentProjIdx++; // Skip this project
                ceo_loadProject();
            }
        });
    }

function ceo_endGame() {
        clearInterval(ceo_gameTimer);
        document.getElementById('ceo-result-name').innerText = ceo_playerName;
        document.getElementById('ceo-result-score').innerText = ceo_score.toLocaleString();
        
        if (ceo_hearts > 0) ceo_playSound('success');
        
        let rank = ceo_score >= 150000 ? "🌟 สุดยอด CEO ระดับโลก" : ceo_score >= 100000 ? "💼 ผู้บริหารมืออาชีพ" : "📉 ผู้บริหารฝึกหัด";
        if(ceo_hearts <= 0) rank = "💥 บริษัทล้มละลาย";
        
        document.getElementById('ceo-result-rank').innerText = rank;
        ceo_showScreen('ceo-screen-result');
    }
    
    function ceo_restartGame() {
        ceo_showScreen('ceo-screen-start');
    }
</script>