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

Back

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

Title

Description

Keyword

Detail (HTML Code)

<div class="smm-game-wrapper" style="background-color: #F4F6F8; padding: 15px; font-family: 'Sarabun', 'Prompt', sans-serif; min-height: 100vh; box-sizing: border-box;">
    
    <style>
        .smm-game-wrapper * { box-sizing: border-box; }
        
        .smm-card {
            max-width: 900px;
            margin: 0 auto;
            background: #ffffff;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(0,0,0,0.1);
        }

.smm-header {
            background-color: #8B0F0F;
            padding: 20px;
            text-align: center;
            color: #ffffff;
        }

.smm-header h2 { margin: 0; font-size: 28px; font-weight: bold; color: #ffffff !important; }
        .smm-header p { margin: 5px 0 0; font-size: 16px; color: #ffffff !important; opacity: 0.9; }

.smm-progress-bar { width: 100%; height: 10px; background: #ddd; }
        .smm-progress-fill { height: 100%; background: #5C0A0A; width: 0%; transition: width 0.4s ease; }

.smm-game-area { padding: 25px; }

.smm-task-desc {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            text-align: center;
            margin-bottom: 25px;
            background: #FFF5F5;
            padding: 15px;
            border-radius: 12px;
            border-left: 5px solid #8B0F0F;
        }

/* --- Mode A: Compose UI --- */
        .smm-compose-ui { display: none; background: #fff; border: 2px solid #eee; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        .smm-slot-row { display: flex; align-items: stretch; margin-bottom: 12px; min-height: 50px; }
        .smm-slot-label { width: 120px; background: #f0f0f0; padding: 12px; font-weight: bold; color: #555; display: flex; align-items: center; border-radius: 8px 0 0 8px; border: 1px solid #ddd; border-right: none; }
        .smm-drop-slot { flex: 1; border: 2px dashed #bbb; border-radius: 0 8px 8px 0; background: #fafafa; display: flex; align-items: center; padding: 10px; transition: all 0.2s; position: relative; }
        .smm-drop-slot.drag-over { background: #e8f4fd; border-color: #2196F3; }
        .smm-drop-slot.filled { border: 2px solid #4CAF50; background: #E8F5E9; }

/* --- Mode B: Sort UI --- */
        .smm-sort-ui { display: none; display: flex; gap: 15px; margin-bottom: 25px; justify-content: center; flex-wrap: wrap; }
        .smm-folder-slot {
            flex: 1; min-width: 200px; height: 160px; border-radius: 15px; border: 3px dashed #ccc; 
            display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px;
            transition: all 0.2s; position: relative; background: #fafafa;
        }
        .smm-folder-slot.drag-over { transform: scale(1.02); }
        .smm-folder-important { border-color: #FFC107; }
        .smm-folder-important.drag-over { background: #FFF8E1; border-color: #FFB300; }
        .smm-folder-spam { border-color: #F44336; }
        .smm-folder-spam.drag-over { background: #FFEBEE; border-color: #E53935; }
        .smm-folder-promo { border-color: #2196F3; }
        .smm-folder-promo.drag-over { background: #E3F2FD; border-color: #1E88E5; }
        
        .smm-folder-icon { font-size: 40px; margin-bottom: 10px; pointer-events: none; }
        .smm-folder-name { font-weight: bold; font-size: 18px; pointer-events: none; text-align: center;}
        
        /* Dropped items container in folders */
        .smm-folder-contents { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 10px; pointer-events: none; display: flex; flex-direction: column; gap: 5px; justify-content: flex-end; opacity: 0.9;}

/* --- Inventory & Draggables --- */
        .smm-inventory {
            background: #eee; border-radius: 12px; padding: 20px; min-height: 120px;
            display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center;
        }
        .smm-draggable {
            background: white; border: 2px solid #8B0F0F; color: #8B0F0F; padding: 10px 18px; border-radius: 30px;
            font-weight: bold; cursor: grab; user-select: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.1s; font-size: 15px; z-index: 10; touch-action: none; text-align: center;
        }
        .smm-draggable:active { cursor: grabbing; }
        .smm-draggable.file-type { border: 2px solid #2196F3; color: #0D47A1; border-radius: 8px; background: #E3F2FD; }
        .smm-draggable.subject-type { border: 2px solid #555; color: #333; background: #fff; border-radius: 8px; width: 100%; max-width: 350px;}

/* Ghost element for dragging */
        .smm-ghost { position: fixed; pointer-events: none; z-index: 9999; opacity: 0.8; transform: scale(1.05); }

/* Screens */
        #smm-start-screen, #smm-result-screen { text-align: center; padding: 40px 20px; }
        .smm-btn {
            background: #8B0F0F; color: white; border: none; padding: 15px 40px; font-size: 20px;
            border-radius: 50px; cursor: pointer; font-weight: bold; box-shadow: 0 4px 15px rgba(139, 15, 15, 0.3); transition: background 0.3s;
        }
        .smm-btn:hover { background: #5C0A0A; }
    </style>

<div class="smm-card">
        <div class="smm-header">
            <h2>📧 Smart Mailbox Master</h2>
            <p>ภารกิจจัดการอีเมลและแยกแยะไฟล์ปลอดภัย!</p>
        </div>
        
        <div class="smm-progress-bar"><div id="smm-progress" class="smm-progress-fill"></div></div>

<div id="smm-start-screen">
            <h1 style="color: #8B0F0F;">ยินดีต้อนรับสู่ศูนย์จัดการอีเมล!</h1>
            <p style="font-size: 18px; line-height: 1.6; margin-bottom: 30px;">
                หน้าที่ของคุณคือการ <strong>"เขียนอีเมล (Compose)"</strong> โดยเลือกไฟล์แนบที่ปลอดภัยให้ถูกต้อง<br>
                และการ <strong>"คัดแยกอีเมล (Sort)"</strong> จัดระเบียบกล่องข้อความ ระวังอีเมลหลอกลวง (Phishing) และสแปมให้ดี!
            </p>
            <button class="smm-btn" onclick="smmGame.startGame()">เริ่มภารกิจเลย!</button>
        </div>

<div id="smm-compose-ui" class="smm-compose-ui">
                <div class="smm-slot-row">
                    <div class="smm-slot-label">ถึง (To):</div>
                    <div class="smm-drop-slot" data-slot-id="to"></div>
                </div>
                <div class="smm-slot-row">
                    <div class="smm-slot-label">หัวข้อ (Subject):</div>
                    <div class="smm-drop-slot" data-slot-id="subject"></div>
                </div>
                <div class="smm-slot-row">
                    <div class="smm-slot-label">ข้อความ (Body):</div>
                    <div class="smm-drop-slot" data-slot-id="body" style="min-height: 80px;"></div>
                </div>
                <div class="smm-slot-row">
                    <div class="smm-slot-label" style="background:#E3F2FD; color:#0D47A1; border-color:#90CAF9;">แนบไฟล์ 📎</div>
                    <div class="smm-drop-slot" data-slot-id="attachment" style="border-color:#90CAF9; background:#F8BBD0(0,0,0,0)"></div>
                </div>
            </div>

<div id="smm-sort-ui" class="smm-sort-ui">
                <div class="smm-folder-slot smm-folder-important" data-slot-id="important">
                    <div class="smm-folder-icon">⭐</div>
                    <div class="smm-folder-name" style="color: #F57F17;">สำคัญ (Important)</div>
                    <div class="smm-folder-contents"></div>
                </div>
                <div class="smm-folder-slot smm-folder-spam" data-slot-id="spam">
                    <div class="smm-folder-icon">🗑️</div>
                    <div class="smm-folder-name" style="color: #C62828;">สแปม/อันตราย</div>
                    <div class="smm-folder-contents"></div>
                </div>
                <div class="smm-folder-slot smm-folder-promo" data-slot-id="promo">
                    <div class="smm-folder-icon">🏷️</div>
                    <div class="smm-folder-name" style="color: #1565C0;">ทั่วไป/โปรโมชัน</div>
                    <div class="smm-folder-contents"></div>
                </div>
            </div>

<div style="font-weight: bold; color: #555; margin-bottom: 10px; text-align: center;">ตัวเลือก (ลากไปวางในช่องให้ถูกต้อง)</div>
            <div id="smm-inventory" class="smm-inventory"></div>
        </div>

<div id="smm-result-screen" style="display: none;">
            <h1 style="color: #8B0F0F;">สุดยอด Mailbox Master! 🏆</h1>
            <p style="font-size: 20px; line-height: 1.6; margin-bottom: 30px;">
                คุณสามารถส่งอีเมลได้อย่างปลอดภัย และคัดกรองภัยคุกคามทางไซเบอร์ได้ยอดเยี่ยมมาก!
            </p>
            <button class="smm-btn" onclick="location.reload()">เล่นอีกครั้ง</button>
        </div>
    </div>

const smmGame = {
            currentLevel: 0,
            audioCtx: null,
            draggedEl: null,
            ghostEl: null,
            activeDropZone: null,
            slotsFilled: 0,
            slotsNeeded: 0,

initAudio() {
                if (!this.audioCtx) {
                    this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                }
            },

playSound(type) {
                if (!this.audioCtx) return;
                const osc = this.audioCtx.createOscillator();
                const gain = this.audioCtx.createGain();
                osc.connect(gain);
                gain.connect(this.audioCtx.destination);

if (type === 'success') {
                    osc.type = 'sine';
                    osc.frequency.setValueAtTime(600, this.audioCtx.currentTime);
                    osc.frequency.exponentialRampToValueAtTime(1200, this.audioCtx.currentTime + 0.1);
                    gain.gain.setValueAtTime(0.3, this.audioCtx.currentTime);
                    gain.gain.exponentialRampToValueAtTime(0.01, this.audioCtx.currentTime + 0.3);
                    osc.start(); osc.stop(this.audioCtx.currentTime + 0.3);
                } else if (type === 'error') {
                    osc.type = 'sawtooth';
                    osc.frequency.setValueAtTime(200, this.audioCtx.currentTime);
                    osc.frequency.exponentialRampToValueAtTime(100, this.audioCtx.currentTime + 0.2);
                    gain.gain.setValueAtTime(0.2, this.audioCtx.currentTime);
                    gain.gain.exponentialRampToValueAtTime(0.01, this.audioCtx.currentTime + 0.2);
                    osc.start(); osc.stop(this.audioCtx.currentTime + 0.2);
                } else if (type === 'pickup') {
                    osc.type = 'square';
                    osc.frequency.setValueAtTime(400, this.audioCtx.currentTime);
                    gain.gain.setValueAtTime(0.1, this.audioCtx.currentTime);
                    gain.gain.exponentialRampToValueAtTime(0.01, this.audioCtx.currentTime + 0.1);
                    osc.start(); osc.stop(this.audioCtx.currentTime + 0.1);
                }
            },

startGame() {
                this.initAudio();
                document.getElementById('smm-start-screen').style.display = 'none';
                document.getElementById('smm-game-screen').style.display = 'block';
                this.currentLevel = 0;
                this.loadLevel();
            },

shuffle(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;
            },

loadLevel() {
                const levelData = eb_levelsData[this.currentLevel];
                document.getElementById('smm-progress').style.width = `${(this.currentLevel / eb_levelsData.length) * 100}%`;
                document.getElementById('smm-task-desc').innerText = `ด่าน ${this.currentLevel + 1}: ${levelData.task}`;
                
                const composeUI = document.getElementById('smm-compose-ui');
                const sortUI = document.getElementById('smm-sort-ui');
                const inventory = document.getElementById('smm-inventory');
                
                inventory.innerHTML = '';
                this.slotsFilled = 0;

// Reset drop zones
                document.querySelectorAll('.smm-drop-slot, .smm-folder-slot').forEach(slot => {
                    slot.classList.remove('filled');
                    if(slot.classList.contains('smm-drop-slot')) slot.innerHTML = '';
                    if(slot.classList.contains('smm-folder-slot')) slot.querySelector('.smm-folder-contents').innerHTML = '';
                    
                    // Assign expected ID based on mode
                    const slotId = slot.getAttribute('data-slot-id');
                    if (levelData.slots[slotId]) {
                        slot.dataset.expected = levelData.slots[slotId];
                    } else {
                        slot.dataset.expected = 'none';
                    }
                });

if (levelData.type === 'compose') {
                    composeUI.style.display = 'block';
                    sortUI.style.display = 'none';
                    this.slotsNeeded = 4;
                } else {
                    composeUI.style.display = 'none';
                    sortUI.style.display = 'flex';
                    this.slotsNeeded = 3;
                }

// Render draggables
                const shuffledItems = this.shuffle([...levelData.draggables]);
                shuffledItems.forEach(item => {
                    const el = document.createElement('div');
                    el.className = `smm-draggable ${item.type}-type`;
                    el.innerText = item.text;
                    el.dataset.id = item.id;
                    
                    el.addEventListener('mousedown', this.dragStart.bind(this));
                    el.addEventListener('touchstart', this.dragStart.bind(this), {passive: false});
                    
                    inventory.appendChild(el);
                });
            },

dragStart(e) {
                if (e.type === 'touchstart') e.preventDefault();
                this.initAudio();
                this.playSound('pickup');
                
                this.draggedEl = e.target;
                const rect = this.draggedEl.getBoundingClientRect();
                
                this.ghostEl = this.draggedEl.cloneNode(true);
                this.ghostEl.classList.add('smm-ghost');
                this.ghostEl.style.width = `${rect.width}px`;
                this.ghostEl.style.height = `${rect.height}px`;
                document.body.appendChild(this.ghostEl);
                
                this.draggedEl.style.opacity = '0.3';
                
                this.moveGhost(e);
                
                const moveEvent = e.type === 'mousedown' ? 'mousemove' : 'touchmove';
                const endEvent = e.type === 'mousedown' ? 'mouseup' : 'touchend';
                
                this.boundMove = this.dragMove.bind(this);
                this.boundEnd = this.dragEnd.bind(this);
                
                document.addEventListener(moveEvent, this.boundMove, {passive: false});
                document.addEventListener(endEvent, this.boundEnd);
            },

dragMove(e) {
                if (e.type === 'touchmove') e.preventDefault();
                this.moveGhost(e);
                
                const x = e.clientX || e.touches[0].clientX;
                const y = e.clientY || e.touches[0].clientY;
                
                if (this.activeDropZone) this.activeDropZone.classList.remove('drag-over');
                
                const elements = document.elementsFromPoint(x, y);
                this.activeDropZone = elements.find(el => 
                    (el.classList.contains('smm-drop-slot') && !el.classList.contains('filled')) || 
                    el.classList.contains('smm-folder-slot')
                );
                
                if (this.activeDropZone) {
                    this.activeDropZone.classList.add('drag-over');
                }
            },

moveGhost(e) {
                const x = e.clientX || (e.touches && e.touches[0].clientX);
                const y = e.clientY || (e.touches && e.touches[0].clientY);
                this.ghostEl.style.left = `${x - this.ghostEl.offsetWidth/2}px`;
                this.ghostEl.style.top = `${y - this.ghostEl.offsetHeight/2}px`;
            },

dragEnd(e) {
                document.removeEventListener('mousemove', this.boundMove);
                document.removeEventListener('touchmove', this.boundMove);
                document.removeEventListener('mouseup', this.boundEnd);
                document.removeEventListener('touchend', this.boundEnd);
                
                if (this.ghostEl) {
                    this.ghostEl.remove();
                    this.ghostEl = null;
                }
                
                this.draggedEl.style.opacity = '1';
                
                if (this.activeDropZone) {
                    this.activeDropZone.classList.remove('drag-over');
                    
                    const expectedId = this.activeDropZone.dataset.expected;
                    const draggedId = this.draggedEl.dataset.id;
                    
                    if (expectedId === draggedId) {
                        this.playSound('success');
                        
                        // Handle placement based on mode
                        if (this.activeDropZone.classList.contains('smm-drop-slot')) {
                            this.draggedEl.style.width = '100%';
                            this.draggedEl.style.margin = '0';
                            this.activeDropZone.appendChild(this.draggedEl);
                            this.activeDropZone.classList.add('filled');
                        } else if (this.activeDropZone.classList.contains('smm-folder-slot')) {
                            const contents = this.activeDropZone.querySelector('.smm-folder-contents');
                            this.draggedEl.style.fontSize = '12px';
                            this.draggedEl.style.padding = '4px';
                            this.draggedEl.style.borderWidth = '1px';
                            contents.appendChild(this.draggedEl);
                        }
                        
                        this.draggedEl.removeEventListener('mousedown', this.dragStart);
                        this.draggedEl.removeEventListener('touchstart', this.dragStart);
                        this.draggedEl.style.cursor = 'default';
                        
                        this.slotsFilled++;
                        if (this.slotsFilled >= this.slotsNeeded) {
                            setTimeout(() => this.levelComplete(), 800);
                        }
                    } else {
                        this.playSound('error');
                    }
                }
                
                this.activeDropZone = null;
                this.draggedEl = null;
            },

levelComplete() {
                this.currentLevel++;
                if (this.currentLevel >= eb_levelsData.length) {
                    document.getElementById('smm-game-screen').style.display = 'none';
                    document.getElementById('smm-result-screen').style.display = 'block';
                    document.getElementById('smm-progress').style.width = '100%';
                } else {
                    this.loadLevel();
                }
            }
        };
    </script>
</div>