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

Back

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

Title

Description

Keyword

Detail (HTML Code)

/* Card Content */
        .card-tag { display: inline-block; padding: 4px 10px; background: #e3f2fd; color: #1565c0; font-weight: bold; border-radius: 20px; font-size: 12px; margin-bottom: 15px; font-family: 'Prompt'; }
        .card-title { font-size: 18px; font-weight: bold; color: #311b92; margin: 0 0 15px 0; font-family: 'Prompt'; line-height: 1.4;}
        .card-detail { font-size: 14px; color: #555; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 8px; border-bottom: 1px dashed #eee; padding-bottom: 5px;}
        .detail-icon { font-size: 16px; }

/* Action Buttons */
        .swipe-controls { display: flex; justify-content: center; gap: 20px; }
        .btn-swipe { width: 70px; height: 70px; border-radius: 50%; border: none; font-size: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; box-shadow: 0 5px 15px rgba(0,0,0,0.3); outline: none; }
        .btn-reject { background: #ffebee; color: #f44336; border: 3px solid #f44336; }
        .btn-reject:hover { background: #f44336; color: #fff; transform: scale(1.1); }
        .btn-accept { background: #e8f5e9; color: #4caf50; border: 3px solid #4caf50; }
        .btn-accept:hover { background: #4caf50; color: #fff; transform: scale(1.1); }
        .btn-swipe:active { transform: scale(0.95); box-shadow: none; }

.control-labels { display: flex; justify-content: center; gap: 60px; margin-top: 10px; font-weight: bold; font-family: 'Prompt'; font-size: 14px; }
        .lbl-reject { color: #f44336; } .lbl-accept { color: #4caf50; }

/* General Controls */
        .wsst-btn { background: linear-gradient(180deg, #ffca28 0%, #ffb300 100%); color: #311b92; border: none; padding: 12px 35px; font-size: 18px; font-weight: bold; border-radius: 30px; cursor: pointer; font-family: 'Prompt', sans-serif; box-shadow: 0 5px 0 #ff8f00; transition: 0.1s; margin-top: 10px; }
        .wsst-btn:active { transform: translateY(5px); box-shadow: 0 0 0 #ff8f00; }
        
        /* Overlays */
        .feedback-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 16, 37, 0.95); z-index: 10; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 25px; text-align: center; }
        .fb-icon { font-size: 70px; margin-bottom: 15px; }
        .fb-title { font-size: 26px; font-weight: bold; font-family: 'Prompt', sans-serif; margin-bottom: 10px; }
        .fb-msg { font-size: 16px; color: #ede7f6; max-width: 85%; line-height: 1.6; margin-bottom: 25px; }
        
        .screen { display: none; }
        .screen.active { display: block; animation: fadeIn 0.4s ease; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .progress-text { color: #ffc107; font-weight: bold; margin-bottom: 10px; font-family: 'Prompt'; font-size: 16px; letter-spacing: 1px;}
    </style>

<div class="wsst-swipe-wrapper">
    <div class="swipe-container">
        
        <div class="swipe-header">
            <h2>🕵️‍♂️ FACT-CHECK SWIPE</h2>
            <p>เช็กให้ชัวร์ ก่อนเชื่อและแชร์! วิเคราะห์การ์ดข้อมูลทีละใบ</p>
        </div>

<div id="scr-start" class="swipe-body screen active">
            <span style="font-size: 90px;">📱</span>
            <h3 style="color: #b388ff; font-family: 'Prompt', sans-serif; font-size: 24px; margin-top: 15px;">ระบบสแกนข่าวปลอมพร้อมทำงาน</h3>
            <p style="font-size: 16px; color: #d1c4e9; max-width: 550px; margin: 0 auto 30px; line-height: 1.8;">
                ยินดีต้อนรับนักสืบไซเบอร์! ภารกิจของคุณคือการตรวจสอบ "การ์ดข้อมูล"<br>
                สแกนนามสกุลเว็บ (.go.th, .com), วันที่, และผู้เขียนให้ดี<br>
                🟢 <b>น่าเชื่อถือ / ถูกต้อง</b> กดปุ่ม <b>ปัดขวา (✔️)</b><br>
                🔴 <b>ไม่น่าเชื่อถือ / ข่าวปลอม</b> กดปุ่ม <b>ปัดซ้าย (❌)</b>
            </p>
            <button class="wsst-btn" onclick="startSwipeGame()">เริ่มสแกนข้อมูล 🚀</button>
        </div>

<div id="scr-game" class="swipe-body screen">
            <div class="progress-text" id="mission-title">ภารกิจที่ 1: สแกนนามสกุลเว็บไซต์</div>
            
            <div class="card-area">
                <div class="swipe-card" id="data-card">
                    </div>
            </div>

<div class="swipe-controls">
                <button class="btn-swipe btn-reject" onclick="handleSwipe('left')">❌</button>
                <button class="btn-swipe btn-accept" onclick="handleSwipe('right')">✅</button>
            </div>
            <div class="control-labels">
                <span class="lbl-reject">ปัดซ้าย (บล็อก)</span>
                <span class="lbl-accept">ปัดขวา (เชื่อถือ)</span>
            </div>
        </div>

<div id="scr-end" class="swipe-body screen">
            <span style="font-size: 90px;">🛡️</span>
            <h3 style="color: #69f0ae; font-family: 'Prompt', sans-serif; font-size: 28px; margin-top: 20px;">SAFE & SECURE!</h3>
            <p style="font-size: 16px; color: #d1c4e9; max-width: 550px; margin: 0 auto 30px; line-height: 1.8;">
                ภารกิจสำเร็จ! คุณเคลียร์ข้อมูลหลอกลวงออกจากระบบได้หมดจด<br>
                จำไว้เสมอว่า <b>"ใครเขียน? เขียนเมื่อไหร่? อ้างอิงจากไหน?"</b><br>
                ถ้าข้อมูลไม่ผ่านเกณฑ์เหล่านี้ ให้ปัดทิ้งไปได้เลยครับ!<br>
                คุณคือนักสืบไซเบอร์ตัวจริง!
            </p>
            <button class="wsst-btn" onclick="resetSwipeGame()">เล่นใหม่อีกครั้ง 🔄</button>
        </div>

</div>
</div>

let currentMission = 0;
    let currentCardIdx = 0;

function switchScreen(id) {
        document.querySelectorAll('.screen').forEach(function(s){s.classList.remove('active');});
        document.getElementById(id).classList.add('active');
    }

function startSwipeGame() {
        currentMission = 0;
        currentCardIdx = 0;
        switchScreen('scr-game');
        loadCard();
    }

cardEl.innerHTML = `
            <span class="card-tag">${cardData.tag}</span>
            <h3 class="card-title">${cardData.title}</h3>
            <div style="margin-top: 15px;">${detailsHtml}</div>
        `;
    }

function handleSwipe(direction) { // direction = 'left' or 'right'
        const cardEl = document.getElementById('data-card');
        const mission = swipeMissions[currentMission];
        const cardData = mission.cards[currentCardIdx];
        
        // Animate Card
        if (direction === 'left') {
            cardEl.className = 'swipe-card swipe-out-left';
        } else {
            cardEl.className = 'swipe-card swipe-out-right';
        }

// Check Answer
        const isCorrect = (direction === cardData.correctSwipe);
        
        // Wait for animation to finish before showing feedback
        setTimeout(function() {
            if (isCorrect) {
                showFeedback("ตัดสินใจได้เฉียบขาด! ✅", cardData.exp, "🌟", "#4caf50", "การ์ดต่อไป", true);
            } else {
                let mistakeMsg = (direction === 'right') ? "ใจเย็นๆ! ข้อมูลนี้น่าสงสัยและไม่น่าเชื่อถือ คุณไม่ควรเชื่อหรือแชร์ต่อนะครับ" : "เดี๋ยวก่อน! ข้อมูลนี้มาจากแหล่งที่เชื่อถือได้และถูกต้องนะ ทำไมถึงปัดทิ้งล่ะ?";
                showFeedback("พลาดแล้ว! ❌", mistakeMsg + "<br><br>" + cardData.exp, "⚠️", "#f44336", "ลองดูการ์ดนี้ใหม่", false);
            }
        }, 300);
    }

function resetSwipeGame() {
        startSwipeGame();
    }
</script>