<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ม.3 Archives - ครูชัชดอทคอม</title>
	<atom:link href="https://www.kroochut.com/tag/%E0%B8%A1-3/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.kroochut.com/tag/ม-3/</link>
	<description>เว็บไซต์เพื่อการเรียนรู้ของทุกคน</description>
	<lastBuildDate>Sat, 07 Feb 2026 13:01:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.2</generator>

<image>
	<url>https://www.kroochut.com/wp-content/uploads/2024/12/cropped-5dd646cee6656-32x32.png</url>
	<title>ม.3 Archives - ครูชัชดอทคอม</title>
	<link>https://www.kroochut.com/tag/ม-3/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>บทเรียนออนไลน์ เรื่อง การคิดเชิงคำนวณและวิทยาการคอมพิวเตอร์</title>
		<link>https://www.kroochut.com/computational/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Sat, 07 Feb 2026 12:55:44 +0000</pubDate>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[Computational Thinking]]></category>
		<category><![CDATA[Web App การศึกษา]]></category>
		<category><![CDATA[การคิดเชิงคำนวณ]]></category>
		<category><![CDATA[นักเรียนมัธยม]]></category>
		<category><![CDATA[บทเรียนออนไลน์]]></category>
		<category><![CDATA[ม.1]]></category>
		<category><![CDATA[ม.2]]></category>
		<category><![CDATA[ม.3]]></category>
		<category><![CDATA[สื่อการเรียนรู้ดิจิทัล]]></category>
		<category><![CDATA[เทคโนโลยีการศึกษา]]></category>
		<guid isPermaLink="false">https://www.kroochut.com/?p=994</guid>

					<description><![CDATA[<p>The post <a href="https://www.kroochut.com/computational/">บทเรียนออนไลน์ เรื่อง การคิดเชิงคำนวณและวิทยาการคอมพิวเตอร์</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<style>
/* ซ่อน scrollbar ทั้งหน้า */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* iframe เต็มจอ */
.fullscreen-iframe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  border: none;
  z-index: 9999;
}
</style>

<iframe 
  src="https://computational.base44.app"
  class="fullscreen-iframe"
  allowfullscreen
  loading="lazy">
</iframe>




<p></p>
<p>The post <a href="https://www.kroochut.com/computational/">บทเรียนออนไลน์ เรื่อง การคิดเชิงคำนวณและวิทยาการคอมพิวเตอร์</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>บทเรียนออนไลน์ Internet of Things</title>
		<link>https://www.kroochut.com/internet-of-things-lession-3d/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Thu, 15 Jan 2026 04:52:01 +0000</pubDate>
				<category><![CDATA[Information Technology]]></category>
		<category><![CDATA[Interactive Learning]]></category>
		<category><![CDATA[Internet of Things]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[การเรียนรู้เชิงรุก]]></category>
		<category><![CDATA[บทเรียนออนไลน์]]></category>
		<category><![CDATA[ม.3]]></category>
		<category><![CDATA[มัธยมศึกษาปีที่ 3]]></category>
		<category><![CDATA[วิทยาการคำนวณ]]></category>
		<category><![CDATA[สื่อการสอนดิจิทัล]]></category>
		<category><![CDATA[อินเทอร์เน็ตของสรรพสิ่ง]]></category>
		<category><![CDATA[เทคโนโลยี]]></category>
		<guid isPermaLink="false">https://www.kroochut.com/?p=951</guid>

					<description><![CDATA[<p>The post <a href="https://www.kroochut.com/internet-of-things-lession-3d/">บทเรียนออนไลน์ Internet of Things</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<div style="position: relative; width: 100%; height: 0; padding-top: 56.25%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;">
  <iframe loading="lazy" 
    style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0; margin: 0;"
    src="https://www.canva.com/design/DAG-dCOjzYs/cg31-tq0TPZl-eM1gPpThQ/view?embed" 
    allowfullscreen="allowfullscreen" 
    allow="fullscreen; accelerometer; gyroscope; magnetometer; vr">
  </iframe>
</div>


<p>The post <a href="https://www.kroochut.com/internet-of-things-lession-3d/">บทเรียนออนไลน์ Internet of Things</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>บทเรียนออนไลน์: รู้จักกับแอปพลิเคชัน</title>
		<link>https://www.kroochut.com/what-is-application/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Fri, 12 Dec 2025 06:58:46 +0000</pubDate>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[บทเรียนออนไลน์]]></category>
		<category><![CDATA[ม.3]]></category>
		<category><![CDATA[วิทยาการคำนวณ]]></category>
		<guid isPermaLink="false">https://www.kroochut.com/?p=922</guid>

					<description><![CDATA[<p>บทเรียนออนไลน์: รู้จักกับแอปพลิเคชัน 📱 รู้จักกับแอปพลิเคชัน หน้า 1/9 ⬅️ ย้อนกลับ ถัดไป ➡️</p>
<p>The post <a href="https://www.kroochut.com/what-is-application/">บทเรียนออนไลน์: รู้จักกับแอปพลิเคชัน</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>บทเรียนออนไลน์: รู้จักกับแอปพลิเคชัน</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;600&#038;display=swap" rel="stylesheet">
    <!-- Markdown Parser for AI Response -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        body {
            font-family: 'Prompt', sans-serif;
            background-color: #E0F2FE;
            color: #1E3A8A;
            font-size: 18px; /* Base size */
            /* ใช้ dvh เพื่อให้เต็มจอจริงบนมือถือ (ไม่รวม toolbar) */
            height: 100vh;
            height: 100dvh;
            width: 100vw;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        .glass-panel {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 0;
            box-shadow: none;
            border: none;
        }
        .btn-hover {
            transition: all 0.3s ease;
        }
        .btn-hover:active {
            transform: scale(0.95);
        }
        @media (min-width: 768px) {
            .btn-hover:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            }
        }
        .fade-in {
            animation: fadeIn 0.4s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .quiz-choice {
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .quiz-choice:hover {
            background-color: #BFDBFE;
        }
        .selected-choice {
            background-color: #3B82F6 !important;
            color: white !important;
            border-color: #2563EB !important;
        }
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1; 
        }
        ::-webkit-scrollbar-thumb {
            background: #93C5FD; 
            border-radius: 4px;
        }
        /* Markdown Styles */
        .prose h3 { font-size: 1.15rem; font-weight: bold; margin-bottom: 0.5rem; color: #1e40af; }
        .prose ul { list-style-type: disc; padding-left: 1.25rem; margin-bottom: 1rem; }
        .prose strong { color: #1e3a8a; }
        .prose p { margin-bottom: 0.5rem; }

        /* Mobile Adjustments */
        @media (max-width: 640px) {
            body { font-size: 16px; } /* ลดขนาดฟอนต์เล็กน้อยบนมือถือ */
            h2 { font-size: 1.5rem !important; }
            h3 { font-size: 1.25rem !important; }
        }
    </style>
</head>
<body class="h-screen w-screen overflow-hidden">

    <!-- Container หลัก -->
    <main id="app-container" class="glass-panel w-full h-full flex flex-col relative overflow-hidden">
        
        <!-- Header (Fixed Top) -->
        <header class="flex-none px-4 py-3 md:px-10 md:py-5 flex justify-between items-center border-b border-blue-200 bg-white/50 backdrop-blur-md z-10 shadow-sm h-16 md:h-auto">
            <h1 class="text-lg md:text-3xl font-bold text-blue-900 truncate max-w-[70%]">📱 รู้จักกับแอปพลิเคชัน</h1>
            <div class="text-sm md:text-lg font-semibold text-blue-600 whitespace-nowrap ml-2" id="page-indicator">หน้า 1/9</div>
        </header>

        <!-- Content Area (Scrollable Middle) -->
        <div id="content-area" class="flex-grow overflow-y-auto px-4 py-4 md:px-10 md:py-8 scroll-smooth overscroll-contain">
            <!-- Content will be injected here by JS -->
        </div>

        <!-- Navigation Footer (Fixed Bottom) -->
        <footer class="flex-none px-4 py-3 md:px-10 md:py-5 flex justify-between items-center border-t border-blue-200 bg-white/90 backdrop-blur-md z-10 h-16 md:h-auto pb-safe">
            <button onclick="prevPage()" id="btn-prev" class="btn-hover px-4 py-2 md:px-6 md:py-3 rounded-full bg-gray-300 text-gray-700 font-bold disabled:opacity-50 hidden text-sm md:text-lg flex items-center gap-2">
                <span>⬅️</span> <span class="hidden md:inline">ย้อนกลับ</span>
            </button>
            <button onclick="nextPage()" id="btn-next" class="btn-hover px-5 py-2 md:px-6 md:py-3 rounded-full bg-blue-600 text-white font-bold shadow-lg text-sm md:text-lg flex items-center gap-2 ml-auto">
                <span class="hidden md:inline">ถัดไป</span> <span>➡️</span>
            </button>
        </footer>

    </main>

    <!-- Sound Effect -->
    <audio id="clickSound" src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU"></audio>

    <script>
        // --- 0. API Config ---
        const apiKey = ""; // API Key injected by environment

        // --- 1. Data & State ---
        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        function playClick() {
            if (audioCtx.state === 'suspended') audioCtx.resume();
            const oscillator = audioCtx.createOscillator();
            const gainNode = audioCtx.createGain();
            oscillator.type = 'sine';
            oscillator.frequency.setValueAtTime(800, audioCtx.currentTime);
            oscillator.frequency.exponentialRampToValueAtTime(300, audioCtx.currentTime + 0.1);
            gainNode.gain.setValueAtTime(0.1, audioCtx.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.1);
            oscillator.connect(gainNode);
            gainNode.connect(audioCtx.destination);
            oscillator.start();
            oscillator.stop(audioCtx.currentTime + 0.1);
        }

        let currentPage = 0;
        let score = 0;
        let studentData = { name: "", id: "" };
        let quizAnswers = [];

        // --- Gemini AI Function ---
        async function generateAppIdea() {
            const input = document.getElementById('ai-input').value.trim();
            const outputDiv = document.getElementById('ai-output');
            const btn = document.getElementById('btn-generate-ai');

            if (!input) {
                alert("กรุณาพิมพ์สิ่งที่คุณสนใจก่อนครับ");
                return;
            }

            // UI Loading State
            btn.disabled = true;
            btn.innerHTML = `<span class="animate-spin text-xl">✨</span> กำลังคิด...`;
            outputDiv.classList.remove('hidden');
            outputDiv.innerHTML = `<div class="animate-pulse flex space-x-4"><div class="flex-1 space-y-4 py-1"><div class="h-4 bg-blue-200 rounded w-3/4"></div><div class="space-y-2"><div class="h-4 bg-blue-200 rounded"></div><div class="h-4 bg-blue-200 rounded w-5/6"></div></div></div></div>`;
            
            // เลื่อนจอลงมาให้เห็น Output (สำหรับมือถือ)
            setTimeout(() => {
                outputDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }, 100);

            const prompt = `
                Act as a creative App Project Manager. 
                The user wants an app related to: "${input}".
                
                Please suggest a concept in Thai language with this markdown structure:
                ### 🚀 ชื่อแอป: [Creative Name]
                **ประเภท:** [Native/Web/Hybrid] (Choose best fit)
                
                **ฟีเจอร์หลัก (Key Features):**
                - [Feature 1]
                - [Feature 2]
                - [Feature 3]
                
                **กลุ่มเป้าหมาย:** [Target Audience]
                **คำแนะนำ:** [One short sentence advice]
            `;

            try {
                const response = await fetch(
                    `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`,
                    {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            contents: [{ parts: [{ text: prompt }] }]
                        })
                    }
                );

                if (!response.ok) throw new Error('API Error');

                const data = await response.json();
                const text = data.candidates[0].content.parts[0].text;
                
                // Render Markdown
                outputDiv.innerHTML = `<div class="prose text-gray-700 text-sm md:text-base">${marked.parse(text)}</div>`;

            } catch (error) {
                outputDiv.innerHTML = `<p class="text-red-500">ขออภัย เกิดข้อผิดพลาดในการเชื่อมต่อ AI (${error.message})</p>`;
            } finally {
                btn.disabled = false;
                btn.innerHTML = `<span>✨</span> คิดไอเดียใหม่`;
            }
        }

        // --- 2. Content Pages ---
        const pages = [
            {
                id: "welcome",
                title: "ยินดีต้อนรับ",
                render: () => `
                    <div class="text-center max-w-5xl mx-auto">
                        <div class="text-5xl md:text-7xl mb-4 animate-bounce">👋</div>
                        <h2 class="text-2xl md:text-5xl font-bold text-blue-800 mb-6">ยินดีต้อนรับสู่บทเรียน<br>"รู้จักกับแอปพลิเคชัน"</h2>
                        
                        <!-- Images -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mb-6">
                            <img decoding="async" src="https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-40 md:h-64 object-cover rounded-xl shadow-md transform hover:scale-105 transition duration-500" alt="Students coding">
                            <img decoding="async" src="https://images.pexels.com/photos/5905710/pexels-photo-5905710.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-40 md:h-64 object-cover rounded-xl shadow-md transform hover:scale-105 transition duration-500 hidden md:block" alt="Learning technology">
                        </div>

                        <p class="text-lg md:text-2xl text-gray-700 mb-6">เรียนรู้พื้นฐาน ประเภท ประโยชน์ และเส้นทางสู่อาชีพนักพัฒนาแอปพลิเคชัน</p>
                        <div class="bg-blue-100 p-6 md:p-8 rounded-xl inline-block text-left mx-auto w-full max-w-3xl border border-blue-200 shadow-inner">
                            <h3 class="font-bold mb-3 text-lg md:text-2xl text-blue-900">📌 สิ่งที่จะได้เรียนรู้:</h3>
                            <ul class="list-disc pl-5 md:pl-6 space-y-2 text-base md:text-xl text-blue-800">
                                <li>ความหมายและประเภทของแอปฯ</li>
                                <li>ความสำคัญและประโยชน์</li>
                                <li>ขั้นตอนการพัฒนา (SDLC)</li>
                                <li>เครื่องมือและอาชีพที่เกี่ยวข้อง</li>
                            </ul>
                        </div>
                        <p class="mt-8 text-base md:text-lg text-gray-400">กดปุ่ม "ถัดไป" ด้านล่างเพื่อเริ่มเรียนรู้</p>
                    </div>
                `
            },
            {
                id: "definition",
                title: "ความหมายและประเภท",
                render: () => `
                    <div class="space-y-6 md:space-y-10 max-w-6xl mx-auto">
                        <div class="bg-white p-6 md:p-8 rounded-xl shadow-lg border-l-8 border-blue-500">
                            <h3 class="text-xl md:text-3xl font-bold mb-3 text-blue-900">💡 แอปพลิเคชันคืออะไร?</h3>
                            <p class="text-base md:text-xl leading-relaxed text-gray-700">โปรแกรมคอมพิวเตอร์ที่ถูกออกแบบมาเพื่อทำงานเฉพาะด้าน ตามความต้องการของผู้ใช้ (Application Software)</p>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-4 md:gap-8">
                            <img decoding="async" src="https://images.pexels.com/photos/1092671/pexels-photo-1092671.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-32 md:h-60 object-cover rounded-xl shadow-md" alt="Using apps">
                            <img decoding="async" src="https://images.pexels.com/photos/5082579/pexels-photo-5082579.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-32 md:h-60 object-cover rounded-xl shadow-md" alt="Coding">
                        </div>

                        <div>
                            <h3 class="text-xl md:text-3xl font-bold text-center mb-4 md:mb-8 text-blue-800">🌐 ชนิดของแอปพลิเคชัน</h3>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8">
                                <div class="bg-white p-5 md:p-8 rounded-2xl text-center shadow-md border border-gray-100">
                                    <div class="text-4xl md:text-6xl mb-3">📱</div>
                                    <h4 class="font-bold text-lg md:text-2xl text-blue-600">Native App</h4>
                                    <p class="text-sm md:text-lg mt-2 text-gray-600">พัฒนาเฉพาะระบบ (iOS/Android) ทำงานเร็ว</p>
                                </div>
                                <div class="bg-white p-5 md:p-8 rounded-2xl text-center shadow-md border border-gray-100">
                                    <div class="text-4xl md:text-6xl mb-3">🌐</div>
                                    <h4 class="font-bold text-lg md:text-2xl text-orange-500">Web App</h4>
                                    <p class="text-sm md:text-lg mt-2 text-gray-600">ใช้งานผ่านเบราว์เซอร์ ไม่ต้องติดตั้ง</p>
                                </div>
                                <div class="bg-white p-5 md:p-8 rounded-2xl text-center shadow-md border border-gray-100">
                                    <div class="text-4xl md:text-6xl mb-3">🔄</div>
                                    <h4 class="font-bold text-lg md:text-2xl text-purple-600">Hybrid App</h4>
                                    <p class="text-sm md:text-lg mt-2 text-gray-600">ผสมผสาน เขียนครั้งเดียวรันได้ทุกที่</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-blue-50 p-6 md:p-8 rounded-2xl border border-blue-100">
                            <h4 class="font-bold text-lg md:text-2xl text-blue-900">🛍️ แพลตฟอร์มและตัวอย่าง</h4>
                            <ul class="list-disc pl-5 md:pl-8 mt-3 space-y-2 text-base md:text-xl text-gray-700">
                                <li><strong>iOS:</strong> App Store</li>
                                <li><strong>Android:</strong> Google Play Store</li>
                                <li><strong>ชีวิตประจำวัน:</strong> Line, Grab, Facebook, K-Plus, TikTok</li>
                            </ul>
                        </div>
                    </div>
                `
            },
            {
                id: "importance",
                title: "ความสำคัญและประโยชน์",
                render: () => `
                    <div class="space-y-6 md:space-y-10 max-w-6xl mx-auto">
                        <h2 class="text-2xl md:text-4xl font-bold text-center mb-4 text-blue-900">🚀 ทำไมแอปพลิเคชันถึงสำคัญ?</h2>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
                            <div class="relative group overflow-hidden rounded-2xl shadow-lg h-40 md:h-64">
                                <img decoding="async" src="https://images.pexels.com/photos/4050315/pexels-photo-4050315.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-full object-cover" alt="Video Call">
                                <div class="absolute bottom-0 left-0 bg-gradient-to-t from-black to-transparent text-white p-3 w-full text-center font-bold text-lg pt-8">การสื่อสารไร้พรมแดน</div>
                            </div>
                            <div class="relative group overflow-hidden rounded-2xl shadow-lg h-40 md:h-64">
                                <img decoding="async" src="https://images.pexels.com/photos/4348404/pexels-photo-4348404.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-full object-cover" alt="Mobile Payment">
                                <div class="absolute bottom-0 left-0 bg-gradient-to-t from-black to-transparent text-white p-3 w-full text-center font-bold text-lg pt-8">ธุรกรรมการเงิน</div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
                            <div class="bg-white p-5 md:p-8 rounded-2xl shadow-sm flex items-start gap-4 hover:shadow-lg transition">
                                <span class="text-3xl md:text-5xl bg-blue-100 p-2 md:p-3 rounded-full">⚡</span>
                                <div>
                                    <h4 class="font-bold text-lg md:text-2xl mb-1 text-blue-800">อำนวยความสะดวก</h4>
                                    <p class="text-sm md:text-xl text-gray-600">สั่งอาหาร เรียกรถ จองตั๋วหนัง ได้ในไม่กี่คลิก</p>
                                </div>
                            </div>
                            <div class="bg-white p-5 md:p-8 rounded-2xl shadow-sm flex items-start gap-4 hover:shadow-lg transition">
                                <span class="text-3xl md:text-5xl bg-purple-100 p-2 md:p-3 rounded-full">💼</span>
                                <div>
                                    <h4 class="font-bold text-lg md:text-2xl mb-1 text-purple-800">เปลี่ยนวิถีการทำงาน</h4>
                                    <p class="text-sm md:text-xl text-gray-600">Work from Home ประชุมผ่าน Zoom</p>
                                </div>
                            </div>
                            <div class="bg-white p-5 md:p-8 rounded-2xl shadow-sm flex items-start gap-4 hover:shadow-lg transition">
                                <span class="text-3xl md:text-5xl bg-green-100 p-2 md:p-3 rounded-full">📚</span>
                                <div>
                                    <h4 class="font-bold text-lg md:text-2xl mb-1 text-green-800">การศึกษาไร้พรมแดน</h4>
                                    <p class="text-sm md:text-xl text-gray-600">เรียนออนไลน์ผ่าน Coursera, Duolingo</p>
                                </div>
                            </div>
                            <div class="bg-white p-5 md:p-8 rounded-2xl shadow-sm flex items-start gap-4 hover:shadow-lg transition">
                                <span class="text-3xl md:text-5xl bg-red-100 p-2 md:p-3 rounded-full">🏥</span>
                                <div>
                                    <h4 class="font-bold text-lg md:text-2xl mb-1 text-red-800">บริการสาธารณสุข</h4>
                                    <p class="text-sm md:text-xl text-gray-600">นัดหมอออนไลน์ ปรึกษาปัญหาสุขภาพ</p>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            },
            {
                id: "process",
                title: "ขั้นตอนการพัฒนา (SDLC)",
                render: () => `
                    <div class="space-y-6 md:space-y-10 max-w-6xl mx-auto">
                        <h3 class="text-2xl md:text-3xl font-bold mb-4 text-center text-blue-900">🛠️ วงจรการพัฒนาแอปพลิเคชัน</h3>
                        
                        <div class="grid grid-cols-2 gap-4 md:gap-8">
                            <img decoding="async" src="https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-32 md:h-64 object-cover rounded-2xl shadow-md" alt="Planning">
                            <img decoding="async" src="https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-32 md:h-64 object-cover rounded-2xl shadow-md" alt="Programming">
                        </div>

                        <div class="relative border-l-4 md:border-l-8 border-blue-300 ml-6 md:ml-12 space-y-6 md:space-y-10 py-2">
                            <!-- Helper function for steps -->
                            ${[
                                { step: 1, title: "Analysis (วิเคราะห์)", desc: "หาปัญหาและความต้องการของผู้ใช้" },
                                { step: 2, title: "Design (ออกแบบ)", desc: "ออกแบบหน้าตา (UI) และ UX" },
                                { step: 3, title: "Development (พัฒนา)", desc: "เขียนโค้ด Frontend และ Backend" },
                                { step: 4, title: "Testing (ทดสอบ)", desc: "หาข้อผิดพลาด (Bugs) และแก้ไข" },
                                { step: 5, title: "Deployment (นำไปใช้)", desc: "อัปโหลดขึ้น Store หรือ Server" },
                                { step: 6, title: "Maintenance (บำรุงรักษา)", desc: "อัปเดตและแก้ปัญหาต่อเนื่อง" }
                            ].map(item => `
                                <div class="ml-8 md:ml-12 relative group">
                                    <span class="absolute -left-[2.8rem] md:-left-[4rem] bg-blue-500 text-white rounded-full w-10 h-10 md:w-12 md:h-12 flex items-center justify-center font-bold text-lg md:text-2xl shadow-lg group-hover:bg-blue-600 transition border-4 border-white">${item.step}</span>
                                    <div class="bg-white p-4 md:p-6 rounded-xl shadow-sm group-hover:shadow-md transition">
                                        <h4 class="font-bold text-lg md:text-2xl text-blue-800">${item.title}</h4>
                                        <p class="text-sm md:text-xl text-gray-600 mt-1">${item.desc}</p>
                                    </div>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                `
            },
            {
                id: "tools",
                title: "เครื่องมือและอาชีพ",
                render: () => `
                    <div class="space-y-6 md:space-y-10 max-w-6xl mx-auto">
                        <div class="grid grid-cols-2 gap-4 md:gap-8">
                            <img decoding="async" src="https://images.pexels.com/photos/196644/pexels-photo-196644.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-32 md:h-60 object-cover rounded-2xl shadow-md" alt="Design tools">
                            <img decoding="async" src="https://images.pexels.com/photos/3184287/pexels-photo-3184287.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-32 md:h-60 object-cover rounded-2xl shadow-md" alt="Team">
                        </div>

                         <!-- Tools -->
                        <div class="bg-white p-5 md:p-8 rounded-2xl shadow-md border border-gray-100">
                            <h3 class="font-bold text-xl md:text-3xl mb-4 text-blue-900 border-b pb-2">🧰 เครื่องมือพื้นฐาน</h3>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8 text-base md:text-xl">
                                <div>
                                    <span class="font-bold block text-blue-600 mb-1 text-lg md:text-2xl">Platform</span>
                                    MIT App Inventor, Thunkable
                                </div>
                                <div>
                                    <span class="font-bold block text-blue-600 mb-1 text-lg md:text-2xl">Coding</span>
                                    Python, JavaScript
                                </div>
                                <div>
                                    <span class="font-bold block text-blue-600 mb-1 text-lg md:text-2xl">Design</span>
                                    Figma, Canva
                                </div>
                            </div>
                        </div>

                        <!-- Careers -->
                        <div>
                            <h3 class="font-bold text-xl md:text-3xl mb-4 text-blue-900">👥 อาชีพและรายได้</h3>
                            <div class="space-y-3 md:space-y-4">
                                ${[
                                    { title: "👨‍💻 นักพัฒนา (App Developer)", desc: "เขียนโค้ดสร้างแอป", salary: "25k-40k", color: "blue" },
                                    { title: "🎨 UX/UI Designer", desc: "ออกแบบหน้าตา", salary: "25k-45k", color: "pink" },
                                    { title: "👔 Project Manager", desc: "บริหารจัดการโครงการ", salary: "30k-70k+", color: "purple" }
                                ].map(job => `
                                    <details class="group bg-white rounded-xl p-4 md:p-6 shadow-sm cursor-pointer border border-gray-100 hover:shadow-md transition">
                                        <summary class="font-bold flex justify-between items-center list-none text-${job.color}-800 text-lg md:text-2xl">
                                            <span class="flex items-center gap-2">${job.title}</span>
                                            <span class="transition group-open:rotate-180 bg-${job.color}-100 rounded-full w-6 h-6 md:w-8 md:h-8 flex items-center justify-center text-xs md:text-sm">▼</span>
                                        </summary>
                                        <div class="mt-3 text-base md:text-xl text-gray-700 pl-4 border-l-4 border-${job.color}-300">
                                            <p>${job.desc}</p>
                                            <p class="font-semibold text-green-600 mt-1">💰 เริ่มต้น: ${job.salary}</p>
                                        </div>
                                    </details>
                                `).join('')}
                            </div>
                        </div>
                    </div>
                `
            },
            {
                id: "inspiration",
                title: "วัยรุ่นสร้างตัว(แอป)",
                render: () => `
                    <div class="space-y-6 md:space-y-10 max-w-6xl mx-auto">
                        <div class="grid grid-cols-2 gap-4 md:gap-8 mb-4">
                            <img decoding="async" src="https://images.pexels.com/photos/8423452/pexels-photo-8423452.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-32 md:h-64 object-cover rounded-2xl shadow-md" alt="Young coder">
                            <img decoding="async" src="https://images.pexels.com/photos/4709289/pexels-photo-4709289.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-32 md:h-64 object-cover rounded-2xl shadow-md" alt="Kids robotics">
                        </div>

                        <h2 class="text-2xl md:text-4xl font-bold text-center text-blue-900 mb-6">🌟 แรงบันดาลใจจากผู้พัฒนาอายุน้อย</h2>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
                            <!-- Case 1 -->
                            <div class="bg-white p-6 md:p-8 rounded-2xl shadow-lg border-t-8 border-green-400">
                                <div class="flex items-center gap-4 mb-4">
                                    <span class="text-4xl md:text-5xl bg-green-100 p-2 md:p-3 rounded-full">🎮</span>
                                    <div>
                                        <h4 class="font-bold text-xl md:text-2xl text-green-900">Thomas Suarez</h4>
                                        <span class="text-sm md:text-lg bg-green-100 text-green-800 px-3 py-1 rounded-full font-semibold">อายุ 12 ปี</span>
                                    </div>
                                </div>
                                <p class="text-lg md:text-xl font-bold text-gray-800 mb-2">ผลงาน: เกม "Bubble Ball"</p>
                                <p class="text-base md:text-xl text-gray-600">เขียนโค้ดเอง มียอดดาวน์โหลดแซงหน้า Angry Birds!</p>
                            </div>

                            <!-- Case 2 -->
                            <div class="bg-white p-6 md:p-8 rounded-2xl shadow-lg border-t-8 border-purple-400">
                                <div class="flex items-center gap-4 mb-4">
                                    <span class="text-4xl md:text-5xl bg-purple-100 p-2 md:p-3 rounded-full">📰</span>
                                    <div>
                                        <h4 class="font-bold text-xl md:text-2xl text-purple-900">Nick D'Aloisio</h4>
                                        <span class="text-sm md:text-lg bg-purple-100 text-purple-800 px-3 py-1 rounded-full font-semibold">อายุ 15 ปี</span>
                                    </div>
                                </div>
                                <p class="text-lg md:text-xl font-bold text-gray-800 mb-2">ผลงาน: แอป "Summly"</p>
                                <p class="text-base md:text-xl text-gray-600">แอปสรุปข่าวอัตโนมัติ ขายให้ Yahoo! กว่า 900 ล้านบาท</p>
                            </div>
                        </div>
                    </div>
                `
            },
            {
                id: "ai-workshop",
                title: "Workshop AI ✨",
                render: () => `
                    <div class="max-w-4xl mx-auto space-y-6 md:space-y-8">
                        <div class="text-center">
                            <h2 class="text-2xl md:text-4xl font-bold text-blue-900 mb-3">✨ Workshop: สร้างไอเดียแอปด้วย AI</h2>
                            <p class="text-base md:text-xl text-gray-600 px-4">ลองพิมพ์ปัญหาที่คุณอยากแก้ หรือเรื่องที่คุณสนใจ แล้วให้ AI ช่วยออกแบบแอปให้!</p>
                        </div>

                        <div class="bg-white p-5 md:p-8 rounded-2xl shadow-xl border-2 border-blue-100 mx-2">
                            <label class="block text-lg md:text-xl font-bold text-gray-700 mb-2 md:mb-4">💡 คุณอยากทำแอปเกี่ยวกับอะไร?</label>
                            <textarea id="ai-input" class="w-full p-3 md:p-4 border border-blue-300 rounded-xl text-base md:text-lg focus:ring-4 focus:ring-blue-200 focus:border-blue-500 transition mb-4 resize-none h-24 md:h-auto" rows="3" placeholder="เช่น: แอปช่วยเตือนให้ดื่มน้ำ พร้อมเกมเลี้ยงสัตว์"></textarea>
                            
                            <button id="btn-generate-ai" onclick="generateAppIdea()" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-3 md:py-4 rounded-xl shadow-lg transform transition active:scale-95 flex items-center justify-center gap-3 text-lg md:text-xl">
                                <span>✨</span> ให้ AI ช่วยคิดไอเดีย
                            </button>
                        </div>

                        <!-- Output Area -->
                        <div id="ai-output" class="bg-blue-50 p-5 md:p-8 rounded-2xl border border-blue-200 hidden shadow-inner min-h-[150px] mx-2">
                            <!-- Result will appear here -->
                        </div>
                    </div>
                `
            },
            {
                id: "path",
                title: "เส้นทางสู่อาชีพ",
                render: () => `
                    <div class="text-center space-y-6 md:space-y-10 max-w-6xl mx-auto">
                        <h2 class="text-2xl md:text-4xl font-bold text-blue-900">🎓 เส้นทางการศึกษา</h2>
                        
                        <div class="grid grid-cols-2 gap-4 md:gap-8 mb-4">
                            <img decoding="async" src="https://images.pexels.com/photos/1438081/pexels-photo-1438081.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-32 md:h-64 object-cover rounded-2xl shadow-md" alt="University">
                            <img decoding="async" src="https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-32 md:h-64 object-cover rounded-2xl shadow-md" alt="Coding Class">
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 text-left">
                            <div class="bg-white p-5 md:p-8 rounded-2xl shadow-md border-t-8 border-yellow-400">
                                <div class="text-4xl md:text-6xl mb-2">🎒</div>
                                <h3 class="font-bold text-xl md:text-2xl mb-2 text-gray-800">ระดับมัธยมปลาย</h3>
                                <p class="text-base md:text-xl text-gray-600">แผนการเรียน วิทย์-คณิต / ศิลป์-คำนวณ</p>
                            </div>
                            
                            <div class="bg-white p-5 md:p-8 rounded-2xl shadow-md border-t-8 border-red-400">
                                <div class="text-4xl md:text-6xl mb-2">🎓</div>
                                <h3 class="font-bold text-xl md:text-2xl mb-2 text-gray-800">ระดับมหาวิทยาลัย</h3>
                                <ul class="text-base md:text-xl text-gray-600 list-disc pl-5">
                                    <li>วิศวกรรมคอมพิวเตอร์</li>
                                    <li>วิทยาการคอมพิวเตอร์ (CS)</li>
                                    <li>เทคโนโลยีสารสนเทศ (IT)</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                `
            },
            {
                id: "pre-quiz",
                title: "เตรียมทำแบบทดสอบ",
                render: () => `
                    <div class="flex flex-col items-center justify-center min-h-[50vh] space-y-6 md:space-y-8 max-w-4xl mx-auto">
                        <div class="grid grid-cols-2 gap-4 md:gap-6 w-full mb-4">
                            <img decoding="async" src="https://images.pexels.com/photos/3769714/pexels-photo-3769714.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-32 md:h-52 object-cover rounded-2xl opacity-90 shadow-lg" alt="Thinking">
                            <img decoding="async" src="https://images.pexels.com/photos/6238050/pexels-photo-6238050.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-32 md:h-52 object-cover rounded-2xl opacity-90 shadow-lg" alt="Exam">
                        </div>

                        <div class="text-center">
                            <div class="text-5xl md:text-7xl animate-bounce mb-2">📝</div>
                            <h2 class="text-2xl md:text-4xl font-bold text-blue-900 mb-1">แบบทดสอบหลังเรียน</h2>
                            <p class="text-base md:text-xl text-gray-600">ทดสอบความเข้าใจ 10 ข้อ</p>
                        </div>
                        
                        <div class="w-full max-w-xl bg-white p-6 md:p-10 rounded-2xl shadow-xl border border-gray-100 mx-4">
                            <div class="mb-4 md:mb-8">
                                <label class="block text-gray-700 text-lg md:text-xl font-bold mb-2">ชื่อ-นามสกุล:</label>
                                <input type="text" id="student-name" class="shadow-sm appearance-none border border-gray-300 rounded-lg w-full py-3 md:py-4 px-4 md:px-5 text-gray-700 text-base md:text-xl focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="ระบุชื่อของคุณ">
                            </div>
                            <div class="mb-4 md:mb-6">
                                <label class="block text-gray-700 text-lg md:text-xl font-bold mb-2">เลขที่/รหัสนักเรียน:</label>
                                <input type="text" id="student-id" class="shadow-sm appearance-none border border-gray-300 rounded-lg w-full py-3 md:py-4 px-4 md:px-5 text-gray-700 text-base md:text-xl focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="เช่น 05">
                            </div>
                        </div>
                        <p id="error-msg" class="text-red-500 text-lg md:text-xl hidden font-bold bg-red-100 px-4 py-2 rounded-lg animate-pulse">⚠️ กรุณากรอกข้อมูลให้ครบถ้วน</p>
                    </div>
                `,
                isQuizStart: true
            },
            {
                id: "quiz",
                title: "แบบทดสอบ",
                render: () => `<div id="quiz-container" class="w-full max-w-5xl mx-auto h-full flex items-center justify-center"></div>`
            },
             {
                id: "result",
                title: "สรุปผลคะแนน",
                render: () => `
                    <div class="text-center py-6 md:py-10 max-w-4xl mx-auto">
                        <div class="grid grid-cols-2 gap-4 md:gap-6 w-full mb-6">
                            <img decoding="async" src="https://images.pexels.com/photos/3779448/pexels-photo-3779448.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-32 md:h-52 object-cover rounded-2xl shadow-lg" alt="Success">
                            <img decoding="async" src="https://images.pexels.com/photos/669619/pexels-photo-669619.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" class="w-full h-32 md:h-52 object-cover rounded-2xl shadow-lg" alt="Data">
                        </div>

                        <h2 class="text-3xl md:text-5xl font-bold mb-4 md:mb-8 text-blue-900">🎉 ผลการทดสอบ</h2>
                        <div class="inline-block bg-white px-8 md:px-12 py-4 md:py-8 rounded-3xl shadow-lg border-2 border-blue-100 mb-4 md:mb-6">
                            <div class="text-6xl md:text-9xl font-extrabold text-blue-600" id="final-score">0/10</div>
                        </div>
                        <p class="text-gray-600 mb-6 md:mb-10 text-xl md:text-2xl font-medium" id="score-text">กำลังประมวลผล...</p>
                        
                        <button onclick="submitScoreToGoogleSheet()" id="btn-submit-score" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 md:py-5 px-8 md:px-12 rounded-full shadow-xl transform transition hover:scale-105 flex items-center justify-center gap-3 md:gap-4 mx-auto text-lg md:text-2xl w-full md:w-auto max-w-xs">
                            <span>📤</span> บันทึกคะแนน
                        </button>
                        
                        <div id="submit-status" class="mt-4 md:mt-8 text-lg md:text-xl font-semibold hidden"></div>
                        
                        <button onclick="location.reload()" class="mt-8 md:mt-12 text-blue-500 hover:text-blue-700 underline text-lg md:text-xl font-medium">🔄 เริ่มเรียนใหม่</button>
                    </div>
                `
            }
        ];

        // --- 3. Quiz Data (10 Questions) ---
        const questions = [
            { q: "แอปพลิเคชันประเภทใดที่ต้องดาวน์โหลดและติดตั้งลงในเครื่อง?", options: ["Web Application", "Native Application", "Cloud Application", "Browser Application"], ans: 1 },
            { q: "ข้อใดคือข้อดีของ Web Application?", options: ["ทำงานได้เร็วที่สุด", "ใช้ฟีเจอร์เครื่องได้ทุกอย่าง", "ไม่ต้องติดตั้ง อัปเดตง่าย", "ต้องโหลดจาก App Store เท่านั้น"], ans: 2 },
            { q: "ระบบปฏิบัติการใดที่นิยมใช้บนเครื่องคอมพิวเตอร์พีซีมากที่สุด?", options: ["iOS", "Android", "Windows", "watchOS"], ans: 2 },
            { q: "ข้อใดไม่ใช่ประโยชน์โดยตรงของแอปพลิเคชันในการทำงาน?", options: ["ช่วยให้ทำงานได้ทุกที่", "ลดการใช้กระดาษ", "เพิ่มความซับซ้อนให้งาน", "ติดต่อสื่อสารได้เร็วขึ้น"], ans: 2 },
            { q: "ขั้นตอนแรกของการพัฒนาแอปพลิเคชันคืออะไร?", options: ["Design (ออกแบบ)", "Coding (เขียนโปรแกรม)", "Testing (ทดสอบ)", "Requirements Analysis (วิเคราะห์ความต้องการ)"], ans: 3 },
            { q: "UX Designer มีหน้าที่หลักคืออะไร?", options: ["เขียนโค้ดหลังบ้าน", "ออกแบบประสบการณ์ผู้ใช้ ให้ใช้ง่าย", "หาบั๊กในโปรแกรม", "บริหารงบประมาณ"], ans: 1 },
            { q: "หากต้องการเริ่มต้นสร้างแอปง่ายๆ โดยการลากวาง ควรใช้เครื่องมือใด?", options: ["C++", "Assembly", "MIT App Inventor", "Notepad"], ans: 2 },
            { q: "อาชีพใดมีหน้าที่ตรวจสอบข้อผิดพลาด (Bugs) ของแอปพลิเคชัน?", options: ["App Developer", "QA Tester", "Project Manager", "Graphic Designer"], ans: 1 },
            { q: "ทักษะด้านภาษา (Language) มีความจำเป็นอย่างไรต่อนักพัฒนา?", options: ["เอาไว้คุยกับคอมพิวเตอร์", "อ่านเอกสารคู่มือ (Documentation) ที่มักเป็นภาษาอังกฤษ", "ไม่จำเป็น ใช้ Google Translate ได้", "เอาไว้เขียนนิยาย"], ans: 1 },
            { q: "คณะใดที่เกี่ยวข้องกับการพัฒนาแอปพลิเคชันโดยตรง?", options: ["คณะรัฐศาสตร์", "คณะเกษตรศาสตร์", "คณะวิศวกรรมคอมพิวเตอร์", "คณะมนุษยศาสตร์"], ans: 2 }
        ];

        let currentQuizIndex = 0;

        // --- 4. Navigation Logic ---
        function renderPage() {
            const container = document.getElementById('content-area');
            const pageData = pages[currentPage];
            
            // Animation reset
            container.classList.remove('fade-in');
            void container.offsetWidth; // trigger reflow
            container.classList.add('fade-in');

            container.innerHTML = pageData.render();
            document.getElementById('page-indicator').innerText = `หน้า ${currentPage + 1}/${pages.length}`;

            // Reset scroll to top
            container.scrollTop = 0;

            // Button visibility logic
            const btnNext = document.getElementById('btn-next');
            const btnPrev = document.getElementById('btn-prev');

            // Logic for Prev button
            if (currentPage === 0) {
                btnPrev.classList.add('hidden');
            } else if (pageData.id === 'quiz') {
                 btnPrev.classList.add('hidden'); // No back during quiz
            } else {
                btnPrev.classList.remove('hidden');
            }
            
            // Logic for Next button
            if (currentPage === pages.length - 1) {
                btnNext.classList.add('hidden'); 
            } else if (pageData.isQuizStart) {
                btnNext.classList.remove('hidden');
                btnNext.innerHTML = `<span class="hidden md:inline">เริ่มทำแบบทดสอบ</span> <span>📝</span>`;
                btnNext.onclick = startQuizValidation;
            } else if (pageData.id === 'quiz') {
                btnNext.classList.add('hidden');
                renderQuizQuestion(); // Call renderQuizQuestion when on quiz page
            } else {
                btnNext.classList.remove('hidden');
                btnNext.innerHTML = `<span class="hidden md:inline">ถัดไป</span> <span>➡️</span>`;
                btnNext.onclick = nextPage;
            }
        }

        function nextPage() {
            playClick();
            if (currentPage < pages.length - 1) {
                currentPage++;
                renderPage();
            }
        }

        function prevPage() {
            playClick();
            if (currentPage > 0) {
                currentPage--;
                renderPage();
            }
        }

        function goToResult() {
            currentPage = pages.length - 1; // Go to last page
            renderPage();
            calculateScore();
        }

        // --- 5. Quiz Logic ---
        function startQuizValidation() {
            const name = document.getElementById('student-name').value.trim();
            const id = document.getElementById('student-id').value.trim();
            
            if (!name || !id) {
                document.getElementById('error-msg').classList.remove('hidden');
                playClick(); 
                return;
            }

            studentData.name = name;
            studentData.id = id;
            studentData.timestamp = new Date().toLocaleString();
            nextPage();
        }

        function renderQuizQuestion() {
            const quizContainer = document.getElementById('quiz-container');
            const q = questions[currentQuizIndex];
            
            let html = `
                <div class="w-full flex flex-col justify-center max-w-4xl py-4 md:py-0">
                    <div class="mb-4 md:mb-6 text-base md:text-xl text-gray-500 font-bold">คำถามข้อที่ ${currentQuizIndex + 1} / ${questions.length}</div>
                    <h3 class="text-xl md:text-4xl font-bold mb-6 md:mb-10 text-blue-900 leading-snug">${q.q}</h3>
                    <div class="grid gap-3 md:gap-5">
            `;

            q.options.forEach((opt, idx) => {
                html += `
                    <div onclick="selectAnswer(${idx})" class="quiz-choice p-4 md:p-6 rounded-xl border-2 border-blue-100 bg-white shadow-sm hover:shadow-md transition-all flex items-center gap-4 md:gap-6 cursor-pointer transform md:hover:scale-[1.01]">
                        <div class="w-8 h-8 md:w-10 md:h-10 rounded-full border-2 border-blue-400 flex items-center justify-center text-sm md:text-lg font-bold text-white choice-circle flex-shrink-0" id="circle-${idx}"></div>
                        <span class="text-gray-800 font-medium text-lg md:text-2xl">${opt}</span>
                    </div>
                `;
            });

            html += `</div></div>`;
            quizContainer.innerHTML = html;
        }

        function selectAnswer(selectedIndex) {
            playClick();
            quizAnswers[currentQuizIndex] = selectedIndex;

            const choices = document.querySelectorAll('.quiz-choice');
            choices.forEach((el, idx) => {
                if (idx === selectedIndex) {
                    el.classList.add('selected-choice', 'border-blue-600', 'ring-2', 'ring-blue-300');
                    el.querySelector('.choice-circle').classList.add('bg-white', 'text-blue-600');
                    el.querySelector('.choice-circle').innerHTML = '✓';
                } else {
                    el.classList.remove('selected-choice', 'border-blue-600', 'ring-2', 'ring-blue-300');
                    el.classList.add('opacity-50'); // Dim others
                }
            });

            setTimeout(() => {
                if (currentQuizIndex < questions.length - 1) {
                    currentQuizIndex++;
                    renderQuizQuestion();
                } else {
                    goToResult();
                }
            }, 500);
        }

        function calculateScore() {
            score = 0;
            questions.forEach((q, idx) => {
                if (quizAnswers[idx] === q.ans) {
                    score++;
                }
            });
            
            const scoreEl = document.getElementById('final-score');
            const textEl = document.getElementById('score-text');
            let currentDisplay = 0;
            
            const interval = setInterval(() => {
                scoreEl.innerText = `${currentDisplay}/10`;
                if (currentDisplay >= score) {
                    clearInterval(interval);
                    if(score >= 8) textEl.innerText = "สุดยอด! คุณมีความเข้าใจดีเยี่ยม 🌟";
                    else if(score >= 5) textEl.innerText = "ทำได้ดี! ทบทวนอีกนิดเก่งแน่นอน 👍";
                    else textEl.innerText = "พยายามอีกนิดนะ! ลองทบทวนบทเรียนใหม่ ✌️";
                }
                currentDisplay++;
            }, 100);
        }

        // --- 6. Google Sheets Integration Logic ---
        function submitScoreToGoogleSheet() {
            playClick();
            const btn = document.getElementById('btn-submit-score');
            const statusDiv = document.getElementById('submit-status');
            
            btn.disabled = true;
            btn.innerHTML = `<span class="animate-spin text-xl md:text-3xl">⏳</span> กำลังบันทึก...`;
            statusDiv.classList.remove('hidden');
            statusDiv.className = "mt-4 md:mt-6 text-base md:text-xl font-semibold text-gray-500";
            statusDiv.innerText = "กำลังเชื่อมต่อเซิร์ฟเวอร์...";

            const payload = {
                timestamp: studentData.timestamp,
                name: studentData.name,
                id: studentData.id,
                score: score
            };

            // อัปเดต URL ตาม Script ID ที่ระบุ
            const GOOGLE_SCRIPT_URL = 'https://script.google.com/macros/s/1MWjP1FRog9k3bntgl_GrVogIm0Pz2ChNqhen7-qIlDyGi7HMAVZ5Dpee/exec';

            // ส่งข้อมูลจริง
            fetch(GOOGLE_SCRIPT_URL, {
                method: 'POST',
                mode: 'no-cors', // สำคัญสำหรับ Google Apps Script Web App
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(payload)
            }).then(response => {
                // เนื่องจาก mode: 'no-cors' เราจะไม่ได้รับ response ที่อ่านได้ แต่ถือว่าส่งสำเร็จถ้าไม่ error
                console.log("Data sent to:", GOOGLE_SCRIPT_URL);
                
                btn.innerHTML = `<span>✅</span> บันทึกสำเร็จ`;
                btn.classList.remove('bg-green-500', 'hover:bg-green-600');
                btn.classList.add('bg-gray-400', 'cursor-not-allowed');
                
                statusDiv.className = "mt-4 md:mt-6 text-base md:text-xl font-semibold text-green-600";
                statusDiv.innerHTML = `บันทึกข้อมูลของ <u>${studentData.name}</u> เรียบร้อยแล้ว!`;
            }).catch(error => {
                console.error("Error:", error);
                btn.disabled = false;
                btn.innerHTML = `<span>❌</span> ลองใหม่`;
                btn.classList.add('bg-red-500');
                
                statusDiv.className = "mt-4 md:mt-6 text-base md:text-xl font-semibold text-red-600";
                statusDiv.innerText = "เกิดข้อผิดพลาดในการเชื่อมต่อ กรุณาลองใหม่อีกครั้ง";
            });
        }

        renderPage();

    </script>
</body>
</html>



<p></p>
<p>The post <a href="https://www.kroochut.com/what-is-application/">บทเรียนออนไลน์: รู้จักกับแอปพลิเคชัน</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>องค์ประกอบของคอมพิวเตอร์</title>
		<link>https://www.kroochut.com/computer-components-interactive/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Thu, 20 Nov 2025 05:32:53 +0000</pubDate>
				<category><![CDATA[Information Technology]]></category>
		<category><![CDATA[Computer Components]]></category>
		<category><![CDATA[CPU]]></category>
		<category><![CDATA[GPU]]></category>
		<category><![CDATA[Hardware]]></category>
		<category><![CDATA[Interactive Learning]]></category>
		<category><![CDATA[RAM]]></category>
		<category><![CDATA[Storage]]></category>
		<category><![CDATA[คอมพิวเตอร์]]></category>
		<category><![CDATA[บทเรียนออนไลน์]]></category>
		<category><![CDATA[ม.3]]></category>
		<category><![CDATA[วิทยาการคำนวณ]]></category>
		<category><![CDATA[สื่อการสอน]]></category>
		<category><![CDATA[สื่อการเรียนรู้]]></category>
		<category><![CDATA[องค์ประกอบคอมพิวเตอร์]]></category>
		<category><![CDATA[เทคโนโลยีสารสนเทศ]]></category>
		<guid isPermaLink="false">https://www.kroochut.com/?p=904</guid>

					<description><![CDATA[<p>องค์ประกอบของคอมพิวเตอร์ &#8211; บทเรียน Interactive บทเรียนคอมพิวเตอร์ Micro Learning หน้า 1 / 10 รู้จักเพื่อนใหม่ของเรา:องค์ประกอบของคอมพิวเตอร์ ยินดีต้อนรับน้องๆ นักเรียนทุกคน! 🚀 วันนี้เราจะมาผ่าตัดคอมพิวเตอร์เพื่อดูว่า &#8220;ข้างในมันมีอะไร?&#8221; ชวนคิดก่อนเริ่ม: &#8220;คุณเคยสงสัยไหมว่าข้างในกล่องสี่เหลี่ยมพวกนี้ มีอะไรบ้างที่ทำให้เราเล่นเกม ดูหนัง หรือทำการบ้านได้อย่างน่าอัศจรรย์?&#8221; 🤔 เริ่มบทเรียนเลย! คอมพิวเตอร์ทำงานได้อย่างไร? (IPO Model) Input รับข้อมูล (เมาส์, คีย์บอร์ด) Process ประมวลผล (CPU) Output แสดงผล (จอภาพ, ปริ้นเตอร์) Storage จัดเก็บข้อมูล (HDD, SSD) ถามหน่อย: ถ้านักเรียนกำลัง &#8220;พิมพ์รายงาน&#8221; หน้าจอคอมพิวเตอร์คือส่วนไหนของวงจรนี้? CPU: สมองสั่งการ 🧠 CPU (Central Processing Unit) คือ &#8220;สมอง&#8221; ของคอมพิวเตอร์ ทำหน้าที่คิด คำนวณ และสั่งการทุกอย่าง Clock Speed (GHz): คือ &#8220;ความเร็วในการคิด&#8221; ยิ่งเยอะ ยิ่งคิดไว Cores (แกน): คือ &#8220;จำนวนสมองย่อย&#8221; ยิ่งเยอะ ยิ่งทำหลายอย่างพร้อมกันได้ดี รูปชิป CPU ของจริง (Intel/AMD) 💡 รู้หรือไม่? CPU ขนาดเท่าฝ่ามือ มีทรานซิสเตอร์ (สวิตช์จิ๋ว) อยู่ข้างในเป็น &#8220;พันล้าน&#8221; ตัวเลยนะ! RAM: พื้นที่ทำงานชั่วคราว 📝 เปรียบเทียบให้เห็นภาพ RAM = โต๊ะทำงาน ถ้าโต๊ะกว้าง (RAM เยอะ) ก็กางงานออกมาทำพร้อมกันได้หลายอย่าง แต่พอปิดคอม (ปิดไฟ) ของบนโต๊ะจะหายไปหมด RAM (Random Access Memory) จำเป็นมากสำหรับการเปิดโปรแกรมหลายๆ อย่างพร้อมกัน (Multitasking) กฎเหล็ก: ไฟดับ = ข้อมูลหาย! 🤔 คิดสิคิด: ถ้าคอมพิวเตอร์ทำงานช้าตอนเปิด Chrome หลายๆ แท็บ แสดงว่าเราควรเพิ่มอะไร? (CPU หรือ RAM) Storage: ตู้เก็บของ 🗄️ นี่คือหน่วยความจำระยะยาว ปิดคอมข้อมูลก็ยังอยู่ มี 2 ประเภทหลักๆ ที่ต้องรู้: HDD (ฮาร์ดดิสก์) ใช้จานแม่เหล็กหมุนๆ ราคาถูก ได้ความจุเยอะ ทำงานช้ากว่า เปราะบางต่อการกระแทก แนะนำ! SSD (เอสเอสดี) ใช้ชิป (เหมือน Flash Drive) เร็วมาก! เปิดคอมปุ๊บติดปั๊บ ทนทาน ไม่มีเสียง ราคาสูงกว่านิดหน่อย SSD เร็วกว่า HDD ประมาณ 5-10 เท่า! Mainboard: แผงวงจรหลัก 🗺️ &#8220;กระดูกสันหลังของคอมพิวเตอร์&#8221; เชื่อมต่อทุกอุปกรณ์เข้าด้วยกัน Socket CPU ที่อยู่ของ CPU RAM Slots ช่องเสียบ RAM PCIe Slot ช่องเสียบการ์ดจอ SATA/M.2 ช่องเสียบ Storage GPU: การ์ดจอ 🎮 GPU (Graphics Processing Unit) มีหน้าที่วาดภาพที่เราเห็นบนจอ ยิ่งแรง ภาพยิ่งสวย เล่นเกมยิ่งลื่น! On-Board มากับ CPU ประหยัดไฟใช้ทำงานทั่วไป ดูหนัง VS Dedicated (การ์ดแยก) เสียบเพิ่ม พลังสูงสำหรับเล่นเกม, ตัดต่อวิดีโอ, 3D 🎨 ศิลปินดิจิทัล: CPU วาดโครงร่าง แต่ GPU คือคนลงสีและแสงเงาให้สวยงาม! PSU: แหล่งพลังงาน ⚡ Power Supply Unit (PSU) ทำหน้าที่แปลงไฟบ้าน (AC) เป็นไฟคอม (DC) เพื่อเลี้ยงอุปกรณ์ทุกชิ้น ⚠️ ข้อควรระวัง! ห้ามเลือก PSU ที่ไม่ได้มาตรฐาน เพราะอาจระเบิด หรือพาอุปกรณ์อื่นพังไปด้วย! (ไฟกระชาก) ควรมองหาสัญลักษณ์: 80 PLUS White Bronze Gold หัวใจแห่งพลังงาน Case &#038; Cooling ❄️ Case (เคส) คือบ้านของคอมพิวเตอร์ ช่วยจัดระเบียบและป้องกันฝุ่น/แมลง มีหลายขนาด (ATX, mATX) ตามขนาดเมนบอร์ด พื้นที่วางอุปกรณ์ Cooling (ระบายความร้อน) คอมพิวเตอร์ทำงานแล้วร้อน จึงต้องมี: พัดลม (Fans) ฮีตซิงค์ (Heatsink) ชุดน้ำ (Liquid Cooling) ถ้าคอมพิวเตอร์ร้อนเกินไป มันจะทำงานช้าลง (Thermal Throttling) เพื่อป้องกันตัวเองไม่ให้พังนะ! 🎉 เรียนจบแล้ว! มาวัดพลังสมองกัน จำหน้าที่ของเพื่อนๆ ในคอมพิวเตอร์ได้ครบไหม? คำถามข้อที่ 1/5 คะแนน: 0 คำถาม&#8230; ยินดีด้วย! คุณทำได้ 0 / 5 คะแนน สุดยอดไปเลย! ทำแบบทดสอบอีกครั้ง ลองไปเปิดฝาเคสคอมที่บ้านดูเล่นๆ (แต่อย่าแกะนะ!) หรือหาดูคลิป &#8220;ประกอบคอม&#8221; ใน YouTube เพื่อเห็นภาพจริง 🖥️ ย้อนกลับ Interactive Lesson by kroochut.com ถัดไป</p>
<p>The post <a href="https://www.kroochut.com/computer-components-interactive/">องค์ประกอบของคอมพิวเตอร์</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>องค์ประกอบของคอมพิวเตอร์ &#8211; บทเรียน Interactive</title>
    
    <!-- Google Fonts: Prompt สำหรับภาษาไทย -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;600;800&#038;display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS (ผ่าน CDN เพื่อความสวยงามทันทีโดยไม่ต้องเขียน CSS เยอะ) -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Animation Library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

    <style>
        body {
            font-family: 'Prompt', sans-serif;
            background-color: #f0f9ff;
            background-image: radial-gradient(#e0e7ff 1px, transparent 1px);
            background-size: 20px 20px;
            overflow-x: hidden;
        }

        .slide {
            display: none;
            min-height: 80vh;
        }

        .slide.active {
            display: flex;
            flex-direction: column;
            animation: fadeIn 0.5s ease-in-out;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1; 
        }
        ::-webkit-scrollbar-thumb {
            background: #888; 
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #555; 
        }

        /* Card Styles */
        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        /* Interactive Elements */
        .hover-scale {
            transition: transform 0.2s;
        }
        .hover-scale:hover {
            transform: scale(1.05);
        }

        .quiz-option {
            cursor: pointer;
            transition: all 0.3s;
        }
        .quiz-option:hover {
            background-color: #e0e7ff;
            border-color: #4f46e5;
        }
        .quiz-option.selected {
            background-color: #4338ca;
            color: white;
            border-color: #312e81;
        }
        .quiz-option.correct {
            background-color: #16a34a; /* Green */
            color: white;
        }
        .quiz-option.wrong {
            background-color: #dc2626; /* Red */
            color: white;
        }

        /* Thought Bubble */
        .thought-bubble {
            position: relative;
            background: #fffbeb;
            border-left: 5px solid #f59e0b;
            padding: 1rem;
            margin-top: 1.5rem;
            border-radius: 0.5rem;
        }

        /* Floating Animation */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        .floating {
            animation: float 3s ease-in-out infinite;
        }

        /* Spin Animation for Fan */
        @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
        .fan-spin {
            animation: spin 2s linear infinite;
        }
    </style>
</head>
<body class="text-gray-800 antialiased">

    <!-- Progress Bar -->
    <div class="fixed top-0 left-0 w-full h-2 z-50 bg-gray-200">
        <div id="progress-bar" class="h-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 transition-all duration-500" style="width: 10%;"></div>
    </div>

    <!-- Status Bar Header -->
    <header class="fixed top-2 w-full z-40 px-4 py-2">
        <div class="max-w-4xl mx-auto flex justify-between items-center bg-white/80 backdrop-blur-md rounded-full px-6 py-2 shadow-sm border border-gray-200">
            <span class="font-bold text-indigo-600"><i class="fas fa-microchip mr-2"></i>บทเรียนคอมพิวเตอร์ Micro Learning</span>
            <span class="text-sm font-medium text-gray-500">หน้า <span id="page-indicator">1</span> / 10</span>
        </div>
    </header>

    <!-- Main Content Container -->
    <main class="container mx-auto px-4 pt-20 pb-24 max-w-4xl min-h-screen flex items-center justify-center">
        
        <!-- Page 1: Cover -->
        <section id="page-1" class="slide active w-full">
            <div class="glass-card p-8 text-center md:p-12">
                <div class="mb-6 floating">
                    <img decoding="async" src="https://cdn-icons-png.flaticon.com/512/2933/2933245.png" alt="Computer" class="w-40 h-40 mx-auto object-contain">
                </div>
                <h1 class="text-3xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-pink-600 mb-4">
                    รู้จักเพื่อนใหม่ของเรา:<br>องค์ประกอบของคอมพิวเตอร์
                </h1>
                <p class="text-lg text-gray-600 mb-8">
                    ยินดีต้อนรับน้องๆ นักเรียนทุกคน! 🚀 <br>
                    วันนี้เราจะมาผ่าตัดคอมพิวเตอร์เพื่อดูว่า &#8220;ข้างในมันมีอะไร?&#8221;
                </p>
                
                <div class="thought-bubble text-left">
                    <p class="font-semibold text-amber-700"><i class="fas fa-lightbulb mr-2"></i>ชวนคิดก่อนเริ่ม:</p>
                    <p class="italic text-gray-700">&#8220;คุณเคยสงสัยไหมว่าข้างในกล่องสี่เหลี่ยมพวกนี้ มีอะไรบ้างที่ทำให้เราเล่นเกม ดูหนัง หรือทำการบ้านได้อย่างน่าอัศจรรย์?&#8221; 🤔</p>
                </div>

                <button onclick="nextPage()" class="mt-8 px-8 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full font-bold text-lg shadow-lg hover-scale transition transform flex items-center justify-center mx-auto">
                    เริ่มบทเรียนเลย! <i class="fas fa-arrow-right ml-2"></i>
                </button>
            </div>
        </section>

        <!-- Page 2: IPO Model -->
        <section id="page-2" class="slide w-full">
            <div class="glass-card p-8">
                <h2 class="text-3xl font-bold text-indigo-800 mb-6 text-center">คอมพิวเตอร์ทำงานได้อย่างไร? (IPO Model)</h2>
                
                <div class="flex flex-col md:flex-row items-center justify-center gap-4 my-8">
                    <!-- Input -->
                    <div class="text-center p-4 bg-blue-50 rounded-xl w-full hover-scale border border-blue-100">
                        <i class="fas fa-keyboard text-4xl text-blue-500 mb-2"></i>
                        <h3 class="font-bold text-xl">Input</h3>
                        <p class="text-sm text-gray-600">รับข้อมูล (เมาส์, คีย์บอร์ด)</p>
                    </div>
                    <i class="fas fa-arrow-right text-gray-400 hidden md:block"></i>
                    <i class="fas fa-arrow-down text-gray-400 md:hidden"></i>
                    
                    <!-- Process -->
                    <div class="text-center p-4 bg-purple-50 rounded-xl w-full hover-scale border border-purple-100 relative">
                        <i class="fas fa-cog fa-spin text-4xl text-purple-500 mb-2"></i>
                        <h3 class="font-bold text-xl">Process</h3>
                        <p class="text-sm text-gray-600">ประมวลผล (CPU)</p>
                        <!-- Storage Line -->
                        <div class="absolute -bottom-12 left-1/2 transform -translate-x-1/2 md:top-full md:mt-4 md:left-1/2">
                            <i class="fas fa-arrows-alt-v text-gray-400"></i>
                        </div>
                    </div>
                    <i class="fas fa-arrow-right text-gray-400 hidden md:block"></i>
                    <i class="fas fa-arrow-down text-gray-400 md:hidden"></i>

                    <!-- Output -->
                    <div class="text-center p-4 bg-green-50 rounded-xl w-full hover-scale border border-green-100">
                        <i class="fas fa-desktop text-4xl text-green-500 mb-2"></i>
                        <h3 class="font-bold text-xl">Output</h3>
                        <p class="text-sm text-gray-600">แสดงผล (จอภาพ, ปริ้นเตอร์)</p>
                    </div>
                </div>

                <!-- Storage block connected separately visually -->
                <div class="flex justify-center mt-8 md:mt-4">
                    <div class="text-center p-4 bg-yellow-50 rounded-xl w-2/3 hover-scale border border-yellow-100">
                        <i class="fas fa-hdd text-4xl text-yellow-500 mb-2"></i>
                        <h3 class="font-bold text-xl">Storage</h3>
                        <p class="text-sm text-gray-600">จัดเก็บข้อมูล (HDD, SSD)</p>
                    </div>
                </div>

                <div class="thought-bubble">
                    <p class="font-semibold text-amber-700"><i class="fas fa-question-circle mr-2"></i>ถามหน่อย:</p>
                    <p>ถ้านักเรียนกำลัง &#8220;พิมพ์รายงาน&#8221; หน้าจอคอมพิวเตอร์คือส่วนไหนของวงจรนี้?</p>
                </div>
            </div>
        </section>

        <!-- Page 3: CPU -->
        <section id="page-3" class="slide w-full">
            <div class="glass-card p-8">
                <div class="flex items-center mb-4">
                    <div class="bg-indigo-100 p-3 rounded-full mr-4"><i class="fas fa-microchip text-3xl text-indigo-600"></i></div>
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-800">CPU: สมองสั่งการ 🧠</h2>
                </div>

                <div class="grid md:grid-cols-2 gap-8 items-center">
                    <div>
                        <p class="text-lg mb-4">CPU (Central Processing Unit) คือ <strong>&#8220;สมอง&#8221;</strong> ของคอมพิวเตอร์ ทำหน้าที่คิด คำนวณ และสั่งการทุกอย่าง</p>
                        <ul class="space-y-3">
                            <li class="flex items-center"><i class="fas fa-tachometer-alt text-red-500 w-8"></i> <span><strong>Clock Speed (GHz):</strong> คือ &#8220;ความเร็วในการคิด&#8221; ยิ่งเยอะ ยิ่งคิดไว</span></li>
                            <li class="flex items-center"><i class="fas fa-layer-group text-blue-500 w-8"></i> <span><strong>Cores (แกน):</strong> คือ &#8220;จำนวนสมองย่อย&#8221; ยิ่งเยอะ ยิ่งทำหลายอย่างพร้อมกันได้ดี</span></li>
                        </ul>
                    </div>
                    <div class="rounded-xl overflow-hidden shadow-lg">
                        <!-- Placeholder for CPU Image -->
                        <img decoding="async" src="https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?ixlib=rb-4.0.3&#038;auto=format&#038;fit=crop&#038;w=600&#038;q=80" alt="CPU" class="w-full h-48 object-cover">
                        <div class="bg-gray-900 text-white text-xs p-2 text-center">รูปชิป CPU ของจริง (Intel/AMD)</div>
                    </div>
                </div>
                
                <div class="thought-bubble mt-6">
                    <p class="text-sm">💡 <strong>รู้หรือไม่?</strong> CPU ขนาดเท่าฝ่ามือ มีทรานซิสเตอร์ (สวิตช์จิ๋ว) อยู่ข้างในเป็น &#8220;พันล้าน&#8221; ตัวเลยนะ!</p>
                </div>
            </div>
        </section>

        <!-- Page 4: RAM -->
        <section id="page-4" class="slide w-full">
            <div class="glass-card p-8">
                <div class="flex items-center mb-4">
                    <div class="bg-green-100 p-3 rounded-full mr-4"><i class="fas fa-memory text-3xl text-green-600"></i></div>
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-800">RAM: พื้นที่ทำงานชั่วคราว 📝</h2>
                </div>

                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                        <h3 class="font-bold text-lg mb-2">เปรียบเทียบให้เห็นภาพ</h3>
                        <div class="flex items-center justify-center h-32 bg-gray-50 rounded mb-2">
                            <i class="fas fa-table text-6xl text-brown-500"></i>
                        </div>
                        <p class="text-sm"><strong>RAM = โต๊ะทำงาน</strong></p>
                        <p class="text-xs text-gray-500">ถ้าโต๊ะกว้าง (RAM เยอะ) ก็กางงานออกมาทำพร้อมกันได้หลายอย่าง แต่พอปิดคอม (ปิดไฟ) ของบนโต๊ะจะหายไปหมด</p>
                    </div>
                    <div class="flex flex-col justify-center">
                        <p class="mb-4">RAM (Random Access Memory) จำเป็นมากสำหรับการเปิดโปรแกรมหลายๆ อย่างพร้อมกัน (Multitasking)</p>
                        <p class="text-indigo-600 font-bold">กฎเหล็ก: ไฟดับ = ข้อมูลหาย!</p>
                    </div>
                </div>

                <div class="thought-bubble">
                    <p class="font-semibold text-amber-700">🤔 คิดสิคิด:</p>
                    <p>ถ้าคอมพิวเตอร์ทำงานช้าตอนเปิด Chrome หลายๆ แท็บ แสดงว่าเราควรเพิ่มอะไร? (CPU หรือ RAM)</p>
                </div>
            </div>
        </section>

        <!-- Page 5: Storage -->
        <section id="page-5" class="slide w-full">
            <div class="glass-card p-8">
                <div class="flex items-center mb-4">
                    <div class="bg-yellow-100 p-3 rounded-full mr-4"><i class="fas fa-hdd text-3xl text-yellow-600"></i></div>
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-800">Storage: ตู้เก็บของ 🗄️</h2>
                </div>

                <p class="mb-6">นี่คือหน่วยความจำระยะยาว ปิดคอมข้อมูลก็ยังอยู่ มี 2 ประเภทหลักๆ ที่ต้องรู้:</p>

                <div class="grid md:grid-cols-2 gap-4">
                    <!-- HDD -->
                    <div class="border-2 border-gray-200 rounded-xl p-4 hover:border-gray-400 transition">
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="font-bold text-xl">HDD (ฮาร์ดดิสก์)</h3>
                            <i class="fas fa-compact-disc text-gray-400 text-2xl spin-slow"></i>
                        </div>
                        <ul class="text-sm space-y-1 list-disc list-inside text-gray-600">
                            <li>ใช้จานแม่เหล็กหมุนๆ</li>
                            <li>ราคาถูก ได้ความจุเยอะ</li>
                            <li>ทำงานช้ากว่า</li>
                            <li>เปราะบางต่อการกระแทก</li>
                        </ul>
                    </div>

                    <!-- SSD -->
                    <div class="border-2 border-green-200 bg-green-50 rounded-xl p-4 hover:border-green-400 transition relative overflow-hidden">
                        <div class="absolute top-0 right-0 bg-green-500 text-white text-xs px-2 py-1 rounded-bl">แนะนำ!</div>
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="font-bold text-xl">SSD (เอสเอสดี)</h3>
                            <i class="fas fa-microchip text-green-500 text-2xl"></i>
                        </div>
                        <ul class="text-sm space-y-1 list-disc list-inside text-gray-600">
                            <li>ใช้ชิป (เหมือน Flash Drive)</li>
                            <li><strong>เร็วมาก!</strong> เปิดคอมปุ๊บติดปั๊บ</li>
                            <li>ทนทาน ไม่มีเสียง</li>
                            <li>ราคาสูงกว่านิดหน่อย</li>
                        </ul>
                    </div>
                </div>

                <div class="mt-6 text-center">
                    <div class="inline-block bg-gray-200 rounded-full px-4 py-1 text-sm">
                        <i class="fas fa-fighter-jet mr-2"></i> SSD เร็วกว่า HDD ประมาณ 5-10 เท่า!
                    </div>
                </div>
            </div>
        </section>

        <!-- Page 6: Motherboard -->
        <section id="page-6" class="slide w-full">
            <div class="glass-card p-8">
                <div class="flex items-center mb-4">
                    <div class="bg-blue-100 p-3 rounded-full mr-4"><i class="fas fa-project-diagram text-3xl text-blue-600"></i></div>
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-800">Mainboard: แผงวงจรหลัก 🗺️</h2>
                </div>

                <div class="relative bg-gray-800 rounded-xl p-4 text-white overflow-hidden min-h-[200px] flex items-center justify-center">
                    <!-- Abstract Motherboard representation -->
                    <div class="absolute inset-0 opacity-20" style="background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'1\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
                    
                    <div class="z-10 text-center">
                        <p class="text-lg font-light">&#8220;กระดูกสันหลังของคอมพิวเตอร์&#8221;</p>
                        <p class="text-sm text-gray-400 mt-2">เชื่อมต่อทุกอุปกรณ์เข้าด้วยกัน</p>
                    </div>
                </div>

                <div class="mt-6 grid grid-cols-2 gap-4">
                    <div class="flex items-start">
                        <div class="bg-indigo-100 rounded p-2 mr-2"><i class="fas fa-microchip text-indigo-600"></i></div>
                        <div>
                            <h4 class="font-bold text-sm">Socket CPU</h4>
                            <p class="text-xs text-gray-500">ที่อยู่ของ CPU</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-green-100 rounded p-2 mr-2"><i class="fas fa-memory text-green-600"></i></div>
                        <div>
                            <h4 class="font-bold text-sm">RAM Slots</h4>
                            <p class="text-xs text-gray-500">ช่องเสียบ RAM</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-purple-100 rounded p-2 mr-2"><i class="fas fa-video text-purple-600"></i></div>
                        <div>
                            <h4 class="font-bold text-sm">PCIe Slot</h4>
                            <p class="text-xs text-gray-500">ช่องเสียบการ์ดจอ</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-yellow-100 rounded p-2 mr-2"><i class="fas fa-plug text-yellow-600"></i></div>
                        <div>
                            <h4 class="font-bold text-sm">SATA/M.2</h4>
                            <p class="text-xs text-gray-500">ช่องเสียบ Storage</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Page 7: GPU -->
        <section id="page-7" class="slide w-full">
            <div class="glass-card p-8">
                <div class="flex items-center mb-4">
                    <div class="bg-purple-100 p-3 rounded-full mr-4"><i class="fas fa-gamepad text-3xl text-purple-600"></i></div>
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-800">GPU: การ์ดจอ 🎮</h2>
                </div>

                <p class="mb-4">GPU (Graphics Processing Unit) มีหน้าที่วาดภาพที่เราเห็นบนจอ ยิ่งแรง ภาพยิ่งสวย เล่นเกมยิ่งลื่น!</p>

                <div class="flex flex-col md:flex-row gap-4 items-center justify-center mb-6">
                    <div class="w-full md:w-1/2 bg-gray-100 p-4 rounded-lg text-center opacity-70">
                        <i class="fas fa-laptop text-4xl text-gray-500 mb-2"></i>
                        <h3 class="font-bold">On-Board</h3>
                        <p class="text-xs">มากับ CPU ประหยัดไฟ<br>ใช้ทำงานทั่วไป ดูหนัง</p>
                    </div>
                    <div class="text-2xl font-bold text-gray-400">VS</div>
                    <div class="w-full md:w-1/2 bg-gradient-to-br from-purple-600 to-indigo-600 text-white p-4 rounded-lg text-center shadow-lg transform hover:scale-105 transition">
                        <i class="fas fa-rocket text-4xl text-yellow-300 mb-2"></i>
                        <h3 class="font-bold">Dedicated (การ์ดแยก)</h3>
                        <p class="text-xs text-gray-200">เสียบเพิ่ม พลังสูง<br>สำหรับเล่นเกม, ตัดต่อวิดีโอ, 3D</p>
                    </div>
                </div>

                <div class="thought-bubble">
                    <p class="font-semibold text-amber-700">🎨 ศิลปินดิจิทัล:</p>
                    <p>CPU วาดโครงร่าง แต่ GPU คือคนลงสีและแสงเงาให้สวยงาม!</p>
                </div>
            </div>
        </section>

        <!-- Page 8: PSU -->
        <section id="page-8" class="slide w-full">
            <div class="glass-card p-8">
                <div class="flex items-center mb-4">
                    <div class="bg-yellow-100 p-3 rounded-full mr-4"><i class="fas fa-bolt text-3xl text-yellow-600"></i></div>
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-800">PSU: แหล่งพลังงาน ⚡</h2>
                </div>

                <div class="flex flex-col-reverse md:flex-row gap-6 items-center">
                    <div class="w-full md:w-2/3">
                        <p class="mb-4">Power Supply Unit (PSU) ทำหน้าที่แปลงไฟบ้าน (AC) เป็นไฟคอม (DC) เพื่อเลี้ยงอุปกรณ์ทุกชิ้น</p>
                        <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-4">
                            <p class="font-bold text-red-700">⚠️ ข้อควรระวัง!</p>
                            <p class="text-sm text-red-600">ห้ามเลือก PSU ที่ไม่ได้มาตรฐาน เพราะอาจระเบิด หรือพาอุปกรณ์อื่นพังไปด้วย! (ไฟกระชาก)</p>
                        </div>
                        <p class="text-sm font-semibold">ควรมองหาสัญลักษณ์:</p>
                        <div class="flex gap-2 mt-2">
                            <span class="px-2 py-1 bg-gray-200 rounded text-xs">80 PLUS White</span>
                            <span class="px-2 py-1 bg-yellow-600 text-white rounded text-xs">Bronze</span>
                            <span class="px-2 py-1 bg-yellow-400 text-black rounded text-xs">Gold</span>
                        </div>
                    </div>
                    <div class="w-full md:w-1/3 text-center">
                        <i class="fas fa-plug text-8xl text-gray-300"></i>
                        <p class="text-sm mt-2 text-gray-500">หัวใจแห่งพลังงาน</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Page 9: Case & Cooling -->
        <section id="page-9" class="slide w-full">
            <div class="glass-card p-8">
                <div class="flex items-center mb-4">
                    <div class="bg-gray-200 p-3 rounded-full mr-4"><i class="fas fa-box text-3xl text-gray-600"></i></div>
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-800">Case &#038; Cooling ❄️</h2>
                </div>

                <div class="grid md:grid-cols-2 gap-6">
                    <div class="p-4 bg-white rounded-lg shadow-sm">
                        <h3 class="font-bold text-indigo-600 mb-2"><i class="fas fa-home mr-2"></i>Case (เคส)</h3>
                        <p class="text-sm text-gray-600">คือบ้านของคอมพิวเตอร์ ช่วยจัดระเบียบและป้องกันฝุ่น/แมลง มีหลายขนาด (ATX, mATX) ตามขนาดเมนบอร์ด</p>
                        <div class="mt-4 h-24 bg-gray-100 rounded flex items-center justify-center border-2 border-dashed border-gray-300">
                            <span class="text-xs text-gray-400">พื้นที่วางอุปกรณ์</span>
                        </div>
                    </div>

                    <div class="p-4 bg-blue-50 rounded-lg shadow-sm border border-blue-100">
                        <h3 class="font-bold text-blue-600 mb-2"><i class="fas fa-snowflake mr-2"></i>Cooling (ระบายความร้อน)</h3>
                        <p class="text-sm text-gray-600">คอมพิวเตอร์ทำงานแล้วร้อน จึงต้องมี:</p>
                        <ul class="mt-2 space-y-2">
                            <li class="flex items-center"><i class="fas fa-fan fan-spin mr-2 text-blue-400"></i> พัดลม (Fans)</li>
                            <li class="flex items-center"><i class="fas fa-server mr-2 text-gray-400"></i> ฮีตซิงค์ (Heatsink)</li>
                            <li class="flex items-center"><i class="fas fa-tint mr-2 text-blue-500"></i> ชุดน้ำ (Liquid Cooling)</li>
                        </ul>
                    </div>
                </div>
                
                <div class="thought-bubble">
                    <p>ถ้าคอมพิวเตอร์ร้อนเกินไป มันจะทำงานช้าลง (Thermal Throttling) เพื่อป้องกันตัวเองไม่ให้พังนะ!</p>
                </div>
            </div>
        </section>

        <!-- Page 10: Summary & Quiz -->
        <section id="page-10" class="slide w-full">
            <div class="glass-card p-8">
                <h2 class="text-3xl font-bold text-center text-indigo-800 mb-4">🎉 เรียนจบแล้ว! มาวัดพลังสมองกัน</h2>
                <p class="text-center text-gray-600 mb-8">จำหน้าที่ของเพื่อนๆ ในคอมพิวเตอร์ได้ครบไหม?</p>

                <!-- Summary Icons Recap -->
                <div class="flex justify-center gap-4 mb-8 flex-wrap">
                    <i class="fas fa-microchip text-2xl text-indigo-500" title="CPU"></i>
                    <i class="fas fa-memory text-2xl text-green-500" title="RAM"></i>
                    <i class="fas fa-hdd text-2xl text-yellow-500" title="Storage"></i>
                    <i class="fas fa-bolt text-2xl text-red-500" title="PSU"></i>
                    <i class="fas fa-gamepad text-2xl text-purple-500" title="GPU"></i>
                </div>

                <div id="quiz-container" class="bg-indigo-50 p-6 rounded-xl border border-indigo-100">
                    <!-- Quiz Question will be injected here -->
                    <div id="question-ui">
                        <div class="flex justify-between mb-4">
                            <span class="font-bold text-indigo-700">คำถามข้อที่ <span id="q-current">1</span>/5</span>
                            <span class="text-sm text-gray-500">คะแนน: <span id="score">0</span></span>
                        </div>
                        <h3 id="q-text" class="text-xl font-semibold mb-6">คำถาม&#8230;</h3>
                        <div id="q-options" class="space-y-3">
                            <!-- Options -->
                        </div>
                    </div>

                    <!-- Result UI (Hidden initially) -->
                    <div id="result-ui" class="hidden text-center">
                        <i class="fas fa-trophy text-6xl text-yellow-400 mb-4 floating"></i>
                        <h3 class="text-2xl font-bold mb-2">ยินดีด้วย!</h3>
                        <p class="text-lg mb-6">คุณทำได้ <span id="final-score" class="font-bold text-indigo-600 text-3xl">0</span> / 5 คะแนน</p>
                        <p id="feedback-msg" class="text-gray-600 mb-6">สุดยอดไปเลย!</p>
                        <button onclick="resetQuiz()" class="px-6 py-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition">ทำแบบทดสอบอีกครั้ง</button>
                    </div>
                </div>
                
                <div class="mt-8 text-center">
                     <p class="text-sm text-gray-500">ลองไปเปิดฝาเคสคอมที่บ้านดูเล่นๆ (แต่อย่าแกะนะ!) หรือหาดูคลิป &#8220;ประกอบคอม&#8221; ใน YouTube เพื่อเห็นภาพจริง 🖥️</p>
                </div>
            </div>
        </section>

    </main>

    <!-- Footer Controls -->
    <footer class="fixed bottom-0 w-full bg-white shadow-[0_-5px_15px_rgba(0,0,0,0.1)] py-3 px-4 z-50">
        <div class="max-w-4xl mx-auto flex justify-between items-center">
            <button onclick="prevPage()" id="btn-prev" class="px-4 py-2 rounded-lg bg-gray-200 text-gray-600 font-semibold disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-300 transition">
                <i class="fas fa-chevron-left mr-1"></i> ย้อนกลับ
            </button>
            
            <div class="hidden md:block text-xs text-gray-400">
                Interactive Lesson by kroochut.com
            </div>

            <button onclick="nextPage()" id="btn-next" class="px-4 py-2 rounded-lg bg-indigo-600 text-white font-bold shadow-md hover:bg-indigo-700 transition hover:scale-105">
                ถัดไป <i class="fas fa-chevron-right ml-1"></i>
            </button>
        </div>
    </footer>

    <!-- Sound Effect (Base64 Pop Sound) -->
    <audio id="clickSound" src="data:audio/wav;base64,UklGRiYAAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQAAAAAAAAAAAA=="></audio>
    <!-- Note: The Base64 above is empty for brevity. JS will generate a simple beep or use a placeholder logic if needed, but below I will use a minimal valid base64 for a short click -->
    <script>
        // Simple short click sound base64
        const clickSoundSrc = "data:audio/wav;base64,UklGRl9vT1dKVRAAAABAAJAQBABAAEAAAAAAAAEAQAAAAAAAAEAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////////////////////////////////////////w==";
        // Replacing with a real short blip for better UX if browser allows, otherwise silent.
    </script>

    <script>
        // State Management
        let currentPage = 1;
        const totalPages = 10;
        const clickAudio = new Audio("https://actions.google.com/sounds/v1/cartoon/pop.ogg"); // Using a reliable external standard sound, or fallback logic

        // Quiz Data
        const quizData = [
            {
                question: "อุปกรณ์ใดเปรียบเสมือน 'สมอง' ของคอมพิวเตอร์?",
                options: ["RAM", "CPU", "Hard Disk", "Power Supply"],
                correct: 1 // Index of correct answer
            },
            {
                question: "ถ้าไฟดับ ข้อมูลในอุปกรณ์ใดจะหายไปทันที?",
                options: ["Hard Disk", "Flash Drive", "RAM", "SSD"],
                correct: 2
            },
            {
                question: "อุปกรณ์ใดทำหน้าที่แปลงไฟฟ้าบ้านให้คอมพิวเตอร์ใช้ได้?",
                options: ["CPU", "Mainboard", "UPS", "PSU (Power Supply)"],
                correct: 3
            },
            {
                question: "ถ้าต้องการให้คอมพิวเตอร์เปิดเครื่องเร็วๆ ควรเลือกใช้อะไรเก็บข้อมูล?",
                options: ["SSD", "HDD", "DVD", "Floppy Disk"],
                correct: 0
            },
            {
                question: "การ์ดจอ (GPU) มีหน้าที่หลักคืออะไร?",
                options: ["เก็บข้อมูล", "ประมวลผลภาพและกราฟิก", "จ่ายไฟ", "ระบายความร้อน"],
                correct: 1
            }
        ];

        let currentQuizIndex = 0;
        let score = 0;

        // Init
        document.addEventListener('DOMContentLoaded', () => {
            updateUI();
            loadQuizQuestion();
        });

        // Navigation Functions
        function nextPage() {
            if (currentPage < totalPages) {
                playSound();
                changePage(currentPage + 1);
            }
        }

        function prevPage() {
            if (currentPage > 1) {
                playSound();
                changePage(currentPage - 1);
            }
        }

        function changePage(pageNum) {
            // Hide current
            document.getElementById(`page-${currentPage}`).classList.remove('active');
            
            // Show new
            currentPage = pageNum;
            document.getElementById(`page-${currentPage}`).classList.add('active');
            
            // Scroll to top
            window.scrollTo({ top: 0, behavior: 'smooth' });

            updateUI();
        }

        function updateUI() {
            // Progress Bar
            const percentage = (currentPage / totalPages) * 100;
            document.getElementById('progress-bar').style.width = `${percentage}%`;
            
            // Page Indicator
            document.getElementById('page-indicator').textContent = currentPage;

            // Button States
            document.getElementById('btn-prev').disabled = currentPage === 1;
            
            const nextBtn = document.getElementById('btn-next');
            if (currentPage === totalPages) {
                nextBtn.innerHTML = 'จบบทเรียน <i class="fas fa-check ml-1"></i>';
                nextBtn.classList.add('bg-green-600', 'hover:bg-green-700');
                nextBtn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
                nextBtn.onclick = () => alert("เก่งมาก! อย่าลืมทบทวนบทเรียนนะ");
            } else {
                nextBtn.innerHTML = 'ถัดไป <i class="fas fa-chevron-right ml-1"></i>';
                nextBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
                nextBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
                nextBtn.onclick = nextPage;
            }
        }

        function playSound() {
            // Simple play attempt, catch error if user hasn't interacted yet
            clickAudio.currentTime = 0;
            clickAudio.play().catch(e => console.log("Audio play prevented until interaction"));
        }

        // Quiz Logic
        function loadQuizQuestion() {
            if (currentQuizIndex >= quizData.length) {
                showQuizResult();
                return;
            }

            const q = quizData[currentQuizIndex];
            document.getElementById('q-text').textContent = q.question;
            document.getElementById('q-current').textContent = currentQuizIndex + 1;
            
            const optionsDiv = document.getElementById('q-options');
            optionsDiv.innerHTML = '';

            q.options.forEach((opt, index) => {
                const btn = document.createElement('div');
                btn.className = 'quiz-option p-3 bg-white border border-gray-200 rounded-lg shadow-sm font-medium';
                btn.textContent = opt;
                btn.onclick = () => checkAnswer(index, btn, q.correct);
                optionsDiv.appendChild(btn);
            });
        }

        function checkAnswer(selectedIndex, btnElement, correctIndex) {
            // Disable all options
            const opts = document.querySelectorAll('.quiz-option');
            opts.forEach(o => o.style.pointerEvents = 'none');

            if (selectedIndex === correctIndex) {
                btnElement.classList.add('correct');
                btnElement.innerHTML += ' <i class="fas fa-check-circle float-right"></i>';
                score++;
                playSound(); // Reuse click sound or add success sound
            } else {
                btnElement.classList.add('wrong');
                btnElement.innerHTML += ' <i class="fas fa-times-circle float-right"></i>';
                // Highlight correct one
                opts[correctIndex].classList.add('correct');
            }

            document.getElementById('score').textContent = score;

            // Next question delay
            setTimeout(() => {
                currentQuizIndex++;
                loadQuizQuestion();
            }, 1500);
        }

        function showQuizResult() {
            document.getElementById('question-ui').classList.add('hidden');
            document.getElementById('result-ui').classList.remove('hidden');
            
            document.getElementById('final-score').textContent = score;
            const feedback = document.getElementById('feedback-msg');
            
            if (score === 5) feedback.textContent = "สุดยอด! คุณคือเซียนคอมพิวเตอร์ตัวจริง! 🏆";
            else if (score >= 3) feedback.textContent = "ทำได้ดีมาก! เกือบเต็มแล้ว 👍";
            else feedback.textContent = "ไม่เป็นไรนะ ลองทบทวนอีกรอบ สู้ๆ! ✌️";
        }

        function resetQuiz() {
            currentQuizIndex = 0;
            score = 0;
            document.getElementById('score').textContent = '0';
            document.getElementById('question-ui').classList.remove('hidden');
            document.getElementById('result-ui').classList.add('hidden');
            loadQuizQuestion();
        }

    </script>
</body>
</html>
<p>The post <a href="https://www.kroochut.com/computer-components-interactive/">องค์ประกอบของคอมพิวเตอร์</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></content:encoded>
					
		
		<enclosure url="https://actions.google.com/sounds/v1/cartoon/pop.ogg" length="15571" type="audio/ogg" />

			</item>
		<item>
		<title>🛒บทเรียนออนไลน์การเป็นผู้บริโภคออนไลน์ที่ชาญฉลาด 🏪</title>
		<link>https://www.kroochut.com/smart-shopping/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Wed, 25 Jun 2025 13:03:39 +0000</pubDate>
				<category><![CDATA[Information Technology]]></category>
		<category><![CDATA[Constructivism]]></category>
		<category><![CDATA[e-learning]]></category>
		<category><![CDATA[gamification]]></category>
		<category><![CDATA[Inquiry-based learning]]></category>
		<category><![CDATA[Project-based learning]]></category>
		<category><![CDATA[กิจกรรมลากวาง]]></category>
		<category><![CDATA[คะแนน XP]]></category>
		<category><![CDATA[นักเรียนมัธยม]]></category>
		<category><![CDATA[บทเรียนออนไลน์]]></category>
		<category><![CDATA[ม.1]]></category>
		<category><![CDATA[ม.2]]></category>
		<category><![CDATA[ม.3]]></category>
		<category><![CDATA[แบบทดสอบออนไลน์]]></category>
		<category><![CDATA[โรงเรียนหนองจอกพิทยานุสรณ์]]></category>
		<guid isPermaLink="false">https://www.kroochut.com/?p=774</guid>

					<description><![CDATA[<p>การเป็นผู้บริโภคออนไลน์ที่ชาญฉลาด &#124; โรงเรียนหนองจอกพิทยานุสรณ์ การเป็นผู้บริโภคออนไลน์ที่ชาญฉลาด สำหรับนักเรียนมัธยมศึกษาปีที่ 1-3 โรงเรียนหนองจอกพิทยานุสรณ์ XP: 0 ข้อมูลนักเรียน ชั้นเรียน เลือกชั้นมัธยมศึกษาปีที่ 1มัธยมศึกษาปีที่ 2มัธยมศึกษาปีที่ 3 ห้อง เลือกห้องห้อง 1ห้อง 2ห้อง 3ห้อง 4ห้อง 5ห้อง 6ห้อง 7ห้อง 8 เลขที่ ชื่อ-สกุล เริ่มเรียนรู้ การค้นหาและเปรียบเทียบสินค้า เทคนิคการค้นหาสินค้าออนไลน์ การค้นหาสินค้าออนไลน์อย่างมีประสิทธิภาพ ควรใช้คำค้นหาที่เฉพาะเจาะจง ใช้ตัวกรองประเภทสินค้า ราคา และแบรนด์ รวมถึงเปรียบเทียบสินค้าจากร้านค้าต่างๆ เพื่อให้ได้สินค้าที่ตรงกับความต้องการมากที่สุด การอ่านรีวิวและเรตติ้ง รีวิวและเรตติ้งเป็นข้อมูลสำคัญที่ช่วยในการตัดสินใจซื้อ ควรอ่านรีวิวทั้งที่ดีและไม่ดี ดูจำนวนรีวิวทั้งหมด และสังเกตว่ารีวิวนั้นเป็นรีวิวจริงหรือไม่ เพื่อประเมินคุณภาพสินค้าได้อย่างถูกต้อง ข้อคิดเกี่ยวกับอาชีพ การเป็นผู้บริโภคที่ชาญฉลาดจะช่วยพัฒนาทักษะการวิเคราะห์และการตัดสินใจ ซึ่งเป็นทักษะสำคัญในหลายอาชีพ เช่น นักการตลาดดิจิทัล นักวิเคราะห์ข้อมูล ผู้จัดการซัพพลายเชน และผู้ประกอบการออนไลน์ คำถามกระตุ้นความคิด ถ้านักเรียนต้องการซื้อสมาร์ทโฟนใหม่ นักเรียนจะใช้วิธีใดในการค้นหาข้อมูลและเปรียบเทียบสินค้า? และจะพิจารณาจากปัจจัยใดบ้าง? กิจกรรมลากและวาง: เรียงลำดับขั้นตอนการค้นหาสินค้า ลากขั้นตอนต่าง ๆ ไปวางในช่องให้ถูกต้องตามลำดับ อ่านรีวิวและเรตติ้ง เปรียบเทียบราคาและคุณสมบัติ เลือกแพลตฟอร์มการซื้อ กำหนดความต้องการและงบประมาณ 1. 2. 3. 4. ตรวจสอบคำตอบ ย้อนกลับ บทเรียนถัดไป การซื้อสินค้าออนไลน์อย่างปลอดภัย การตรวจสอบความน่าเชื่อถือของร้านค้า ก่อนซื้อสินค้า ควรตรวจสอบประวัติร้านค้า ดูรีวิวจากผู้ซื้อจริง ดูวันเปิดร้าน และจำนวนผู้ติดตาม รวมถึงสังเกตเครื่องหมายรับรองความปลอดภัยต่าง ๆ เพื่อให้แน่ใจว่าร้านค้ามีความน่าเชื่อถือ การชำระเงินที่ปลอดภัย ควรเลือกช่องทางการชำระเงินที่มีความปลอดภัย เช่น บัตรเครดิตพร้อมระบบป้องกัน หรือบริการเก็บเงินปลายทาง หลีกเลี่ยงการโอนเงินล่วงหน้าโดยไม่ได้รับสินค้า และตรวจสอบให้แน่ใจว่ามีการเข้ารหัสข้อมูลในการชำระเงิน ข้อคิดเกี่ยวกับอาชีพ ความรู้เรื่องความปลอดภัยในการซื้อขายออนไลน์เป็นพื้นฐานสำคัญสำหรับอาชีพด้านความปลอดภัยทางไซเบอร์ นักพัฒนาระบบชำระเงินดิจิทัล และที่ปรึกษาด้านการค้าอิเล็กทรอนิกส์ คำถามกระตุ้นความคิด นักเรียนคิดว่ามีสัญญาณอะไรบ้างที่บ่งบอกว่าร้านค้าออนไลน์แห่งหนึ่งมีความน่าเชื่อถือ? และนักเรียนจะทำอย่างไรหากพบว่าร้านค้าไม่น่าเชื่อถือ? ย้อนกลับ บทเรียนถัดไป การหลีกเลี่ยงการถูกหลอกลวง รูปแบบการหลอกลวงออนไลน์ การหลอกลวงออนไลน์มีหลายรูปแบบ เช่น การขายสินค้าไม่มีอยู่จริง การหลอกให้โอนเงินล่วงหน้า การส่งลิงก์ปลอมเพื่อขโมยข้อมูล การแจ้งถูกรางวัลหลอกลวง และการโทรศัพท์แอบอ้างเป็นพนักงานบริษัท สัญญาณเตือนภัย (Red Flags) สัญญาณเตือนภัยที่ควรระวัง ได้แก่ ราคาต่ำกว่าท้องตลาดมาก ถูกเร่งให้ตัดสินใจซื้อ ต้องโอนเงินล่วงหน้า ร้านค้าไม่มีประวัติการขาย รีวิวไม่น่าเชื่อถือ ไม่มีช่องทางติดต่อที่ชัดเจน และเว็บไซต์ไม่มี https ข้อคิดเกี่ยวกับอาชีพ การเข้าใจรูปแบบการหลอกลวงทางออนไลน์เป็นพื้นฐานสำคัญสำหรับอาชีพด้านความมั่นคงปลอดภัยไซเบอร์ นักสืบสวนอาชญากรรมออนไลน์ และผู้เชี่ยวชาญด้านการป้องกันการฉ้อโกง คำถามกระตุ้นความคิด ถ้านักเรียนได้รับอีเมลแจ้งว่าถูกรางวัลรถยนต์ แต่ต้องโอนเงินค่าธรรมเนียมก่อน นักเรียนจะทำอย่างไร? และนักเรียนคิดว่าสิ่งนี้เป็นการหลอกลวงหรือไม่ เพราะเหตุใด? ย้อนกลับ บทเรียนถัดไป สิทธิผู้บริโภคและการคืนสินค้า กฎหมายคุ้มครองผู้บริโภคออนไลน์ ผู้บริโภคออนไลน์มีสิทธิได้รับข้อมูลที่ถูกต้องครบถ้วน มีสิทธิในการคืนสินค้าหรือเปลี่ยนสินค้าภายใน 7 วันหากสินค้าไม่ตรงตามคำโฆษณา และมีสิทธิได้รับความคุ้มครองตามกฎหมายว่าด้วยการคุ้มครองผู้บริโภค ขั้นตอนการร้องเรียนและคืนสินค้า เมื่อต้องการคืนสินค้า ควรติดต่อร้านค้าทันที ถ่ายรูปหลักฐานเก็บไว้ ทำหนังสือแจ้งความประสงค์คืนสินค้า ส่งสินค้าคืนตามวิธีการที่ร้านค้ากำหนด และหากร้านค้าไม่รับคืนสินค้า สามารถร้องเรียนที่สำนักงานคุ้มครองผู้บริโภค ข้อคิดเกี่ยวกับอาชีพ ความรู้เรื่องสิทธิผู้บริโภคเป็นพื้นฐานสำคัญสำหรับอาชีพนักกฎหมายเฉพาะทางด้านคุ้มครองผู้บริโภค ที่ปรึกษาด้านการค้าปลีกออนไลน์ และเจ้าหน้าที่ดูแลความสัมพันธ์ลูกค้า คำถามกระตุ้นความคิด ถ้านักเรียนซื้อเสื้อผ้าออนไลน์แล้วได้รับสินค้าไม่ตรงตามรูปภาพที่แสดง นักเรียนจะใช้สิทธิผู้บริโภคอย่างไรบ้าง? และนักเรียนคิดว่าการคืนสินค้าควรมีขั้นตอนอย่างไร? ย้อนกลับ ทำแบบทดสอบ แบบทดสอบหลังเรียน (10 ข้อ) 1 การอ่านรีวิวสินค้าอย่างมีประสิทธิภาพควรทำอย่างไร? อ่านเฉพาะรีวิวที่ดีที่สุด อ่านรีวิวทั้งที่ดีและไม่ดี และดูจำนวนรีวิวทั้งหมด เชื่อรีวิวที่มีรูปภาพประกอบเท่านั้น เลือกอ่านเฉพาะรีวิวล่าสุด 2 สัญญาณเตือนภัย (Red Flag) ใดต่อไปนี้บ่งบอกว่าร้านค้าอาจไม่น่าเชื่อถือ? มีรีวิวมากกว่า 100 รีวิว ราคาสินค้าต่ำกว่าท้องตลาดมาก มีที่อยู่ร้านค้าชัดเจน มีหลายช่องทางการชำระเงิน 3 วิธีการชำระเงินแบบใดที่ปลอดภัยที่สุดในการซื้อสินค้าออนไลน์? โอนเงินผ่านธนาคารล่วงหน้า เก็บเงินปลายทาง (COD) ส่งเงินสดทางไปรษณีย์ ให้เพื่อนโอนเงินให้ 4 หากซื้อสินค้าออนไลน์แล้วได้สินค้าไม่ตรงตามที่โฆษณา ผู้บริโภคมีสิทธิคืนสินค้าภายในกี่วัน? 3 วัน 7 วัน 15 วัน 30 วัน 5 หน่วยงานใดที่รับผิดชอบเกี่ยวกับการคุ้มครองผู้บริโภคในประเทศไทย? สำนักงานคณะกรรมการคุ้มครองผู้บริโภค (สคบ.) กระทรวงดิจิทัลเพื่อเศรษฐกิจและสังคม สำนักงานตำรวจแห่งชาติ กรมการค้าภายใน 6 ข้อใดไม่ใช่สัญญาณเตือนภัย (Red Flag) ในการซื้อสินค้าออนไลน์? ราคาสินค้าถูกมากเกินไป ร้านค้ามีรีวิวที่ดีทั้งหมดโดยไม่มีรีวิวแย่เลย มีที่อยู่ร้านค้าชัดเจน ต้องโอนเงินล่วงหน้า 100% 7 การชำระเงินแบบใดที่เสี่ยงต่อการถูกหลอกลวงมากที่สุด? บัตรเครดิต เก็บเงินปลายทาง (COD) โอนเงินผ่านธนาคารล่วงหน้า ผ่อนผ่านบัตรเครดิต 8 หากต้องการร้องเรียนร้านค้าออนไลน์ นักเรียนควรติดต่อหน่วยงานใดเป็นลำดับแรก? ตำรวจ สำนักงานคณะกรรมการคุ้มครองผู้บริโภค (สคบ.) กรมการค้าภายใน ธนาคารแห่งประเทศไทย 9 การเปรียบเทียบสินค้าออนไลน์ควรพิจารณาปัจจัยใดบ้าง? ราคา คุณสมบัติสินค้า การรับประกัน ถูกทุกข้อ 10 ข้อใดคือพฤติกรรมของผู้บริโภคออนไลน์ที่ชาญฉลาด? ซื้อสินค้าทันทีเมื่อเห็นโฆษณา เปรียบเทียบสินค้าจากหลายร้านค้าก่อนตัดสินใจ เชื่อรีวิวจากเพื่อนเท่านั้น ไม่สนใจนโยบายการคืนสินค้า ย้อนกลับ ส่งคำตอบ 0 คะแนน XP ยินดีด้วย! คุณได้สำเร็จบทเรียน การเป็นผู้บริโภคออนไลน์ที่ชาญฉลาดเป็นทักษะสำคัญในยุคดิจิทัล ข้อมูลนักเรียน ชั้นเรียน &#8211; ห้อง &#8211; เลขที่ &#8211; ชื่อ-สกุล &#8211; คะแนนแบบทดสอบ 0/10 เนื้อหาก่อนหน้า เริ่มบทเรียนใหม่ ออกแบบและพัฒนาโดย นายณรงค์ชัช กันสุข ครูวิทยฐานะครูชำนาญการ โรงเรียนหนองจอกพิทยานุสรณ์ สำนักงานเขตหนองจอก กรุงเทพมหานคร © 2025 สงวนลิขสิทธิ์</p>
<p>The post <a href="https://www.kroochut.com/smart-shopping/">🛒บทเรียนออนไลน์การเป็นผู้บริโภคออนไลน์ที่ชาญฉลาด 🏪</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>การเป็นผู้บริโภคออนไลน์ที่ชาญฉลาด | โรงเรียนหนองจอกพิทยานุสรณ์</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;700&#038;display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Kanit', sans-serif;
        }
        
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --accent: #4cc9f0;
            --success: #4ade80;
            --warning: #facc15;
            --danger: #f87171;
            --light: #f8f9fa;
            --dark: #212529;
            --text: #333333;
            --card-bg: #ffffff;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }
        
        body {
            background: linear-gradient(135deg, #f0f4ff 0%, #e6f7ff 100%);
            color: var(--text);
            min-height: 100vh;
            padding: 20px;
            background-attachment: fixed;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header {
            text-align: center;
            padding: 20px;
            margin-bottom: 30px;
            background: linear-gradient(120deg, var(--primary), var(--secondary));
            color: white;
            border-radius: 15px;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }
        
        .header::before {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            background: linear-gradient(45deg, #4cc9f0, #4361ee, #3f37c9);
            z-index: -1;
            filter: blur(20px);
            opacity: 0.3;
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .header p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            opacity: 0.9;
        }
        
        .page {
            background: var(--card-bg);
            border-radius: 15px;
            box-shadow: var(--shadow);
            padding: 30px;
            margin-bottom: 30px;
            display: none;
            animation: fadeIn 0.6s ease forwards;
        }
        
        .page.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .page-title {
            color: var(--primary);
            border-bottom: 3px solid var(--accent);
            padding-bottom: 15px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .page-title i {
            background: var(--accent);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }
        
        .content-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }
        
        .content-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }
        
        .content-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        
        .card-img {
            height: 180px;
            overflow: hidden;
        }
        
        .card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .content-card:hover .card-img img {
            transform: scale(1.05);
        }
        
        .card-content {
            padding: 20px;
        }
        
        .card-title {
            color: var(--secondary);
            margin-bottom: 12px;
            font-size: 1.3rem;
        }
        
        .card-text {
            line-height: 1.7;
            margin-bottom: 15px;
            color: #555;
        }
        
        .career-tip {
            background: #e3f2fd;
            border-left: 4px solid var(--primary);
            padding: 20px;
            border-radius: 0 8px 8px 0;
            margin: 25px 0;
        }
        
        .career-tip h3 {
            color: var(--primary);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .inquiry-question {
            background: #fff8e1;
            border-radius: 10px;
            padding: 20px;
            margin: 25px 0;
            border: 1px dashed var(--warning);
        }
        
        .inquiry-question h3 {
            color: #e65100;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .drag-drop-game {
            background: #e8f5e9;
            border-radius: 12px;
            padding: 25px;
            margin: 30px 0;
            text-align: center;
        }
        
        .drag-area, .drop-area {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
            margin: 20px 0;
            min-height: 100px;
        }
        
        .drag-item {
            background: var(--primary);
            color: white;
            padding: 12px 20px;
            border-radius: 30px;
            cursor: grab;
            transition: var(--transition);
            user-select: none;
        }
        
        .drag-item:hover {
            background: var(--secondary);
            transform: translateY(-3px);
        }
        
        .drop-box {
            background: white;
            border: 2px dashed var(--success);
            border-radius: 10px;
            min-width: 150px;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px;
            transition: var(--transition);
        }
        
        .drop-box.hover {
            background: #f0fff4;
            border-color: var(--primary);
        }
        
        .quiz-container {
            display: grid;
            gap: 20px;
        }
        
        .quiz-question {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
            position: relative;
        }
        
        .question-number {
            position: absolute;
            top: 15px;
            left: 15px;
            background: var(--accent);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        .quiz-options {
            display: grid;
            gap: 12px;
            margin-top: 15px;
        }
        
        .quiz-option {
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            cursor: pointer;
            transition: var(--transition);
            padding-left: 50px;
            position: relative;
        }
        
        .quiz-option:hover {
            background: #f5f5f5;
            border-color: var(--accent);
        }
        
        .quiz-option.selected {
            background: #e3f2fd;
            border-color: var(--primary);
        }
        
        .quiz-option::before {
            content: "";
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            border-radius: 50%;
        }
        
        .quiz-option.selected::before {
            border-color: var(--primary);
            background: var(--primary);
        }
        
        .navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }
        
        .btn {
            padding: 12px 30px;
            border-radius: 30px;
            border: none;
            font-size: 1.1rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        
        .btn-primary {
            background: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background: var(--secondary);
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(67, 97, 238, 0.3);
        }
        
        .btn-secondary {
            background: #e0e0e0;
            color: var(--text);
        }
        
        .btn-secondary:hover {
            background: #d0d0d0;
        }
        
        .progress-container {
            background: white;
            border-radius: 30px;
            height: 15px;
            overflow: hidden;
            margin: 20px 0;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--accent), var(--primary));
            width: 0%;
            transition: width 0.5s ease;
        }
        
        .xp-indicator {
            position: fixed;
            top: 20px;
            right: 20px;
            background: white;
            border-radius: 30px;
            padding: 10px 20px;
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 100;
        }
        
        .xp-indicator i {
            color: gold;
            font-size: 1.2rem;
        }
        
        .xp-value {
            font-weight: 700;
            color: var(--primary);
        }
        
        .results-container {
            text-align: center;
            padding: 30px;
        }
        
        .xp-badge {
            width: 180px;
            height: 180px;
            margin: 0 auto 30px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #ffd700, #ff9800);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 30px rgba(255, 152, 0, 0.3);
            border: 8px solid white;
            position: relative;
            overflow: hidden;
        }
        
        .xp-badge::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: repeating-conic-gradient(transparent 0%, transparent 10%, rgba(255,255,255,0.2) 10%);
            transform: rotate(45deg);
            animation: shine 4s linear infinite;
        }
        
        @keyframes shine {
            0% { transform: rotate(45deg); }
            100% { transform: rotate(405deg); }
        }
        
        .xp-badge .xp-total {
            font-size: 3rem;
            font-weight: 800;
            color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .xp-badge .xp-label {
            color: white;
            font-weight: 600;
            font-size: 1.2rem;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        
        .student-info {
            background: white;
            border-radius: 15px;
            padding: 25px;
            max-width: 500px;
            margin: 30px auto;
            box-shadow: var(--shadow);
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 20px;
        }
        
        .info-item {
            background: #f5f7ff;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
        }
        
        .info-label {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 5px;
        }
        
        .info-value {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--primary);
        }
        
        .footer {
            text-align: center;
            padding: 30px;
            margin-top: 40px;
            color: #666;
            border-top: 1px solid #eee;
        }
        
        .footer p {
            margin-bottom: 5px;
        }
        
        /* Responsive styles */
        @media (max-width: 768px) {
            .header h1 {
                font-size: 2rem;
            }
            
            .content-grid {
                grid-template-columns: 1fr;
            }
            
            .btn {
                padding: 10px 20px;
                font-size: 1rem;
            }
            
            .xp-badge {
                width: 150px;
                height: 150px;
            }
            
            .xp-badge .xp-total {
                font-size: 2.5rem;
            }
            
            .info-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-shopping-cart"></i> การเป็นผู้บริโภคออนไลน์ที่ชาญฉลาด</h1>
            <p>สำหรับนักเรียนมัธยมศึกษาปีที่ 1-3 โรงเรียนหนองจอกพิทยานุสรณ์</p>
        </div>
        
        <div class="xp-indicator">
            <i class="fas fa-star"></i>
            <span>XP: </span>
            <span class="xp-value" id="xpCounter">0</span>
        </div>
        
        <div class="progress-container">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        
        <!-- Page 1: Student Information -->
        <div class="page active" id="page1">
            <h2 class="page-title"><i class="fas fa-user-graduate"></i> ข้อมูลนักเรียน</h2>
            
            <div class="student-info">
                <div class="info-grid">
                    <div class="info-item">
                        <div class="info-label">ชั้นเรียน</div>
                        <select class="info-value" id="classLevel">
                            <option value="">เลือกชั้น</option>
                            <option value="ม.1">มัธยมศึกษาปีที่ 1</option>
                            <option value="ม.2">มัธยมศึกษาปีที่ 2</option>
                            <option value="ม.3">มัธยมศึกษาปีที่ 3</option>
                        </select>
                    </div>
                    
                    <div class="info-item">
                        <div class="info-label">ห้อง</div>
                        <select class="info-value" id="classRoom">
                            <option value="">เลือกห้อง</option>
                            <option value="1">ห้อง 1</option>
                            <option value="2">ห้อง 2</option>
                            <option value="3">ห้อง 3</option>
                            <option value="4">ห้อง 4</option>
                            <option value="5">ห้อง 5</option>
                            <option value="6">ห้อง 6</option>
                            <option value="7">ห้อง 7</option>
                            <option value="8">ห้อง 8</option>
                        </select>
                    </div>
                    
                    <div class="info-item">
                        <div class="info-label">เลขที่</div>
                        <input type="number" class="info-value" id="studentNumber" min="1" max="50" placeholder="เลขที่">
                    </div>
                    
                    <div class="info-item">
                        <div class="info-label">ชื่อ-สกุล</div>
                        <input type="text" class="info-value" id="studentName" placeholder="ชื่อ-สกุล">
                    </div>
                </div>
            </div>
            
            <div class="navigation">
                <div></div>
                <button class="btn btn-primary" onclick="nextPage(1)">เริ่มเรียนรู้ <i class="fas fa-arrow-right"></i></button>
            </div>
        </div>
        
        <!-- Page 2: Searching and Comparing Products -->
        <div class="page" id="page2">
            <h2 class="page-title"><i class="fas fa-search"></i> การค้นหาและเปรียบเทียบสินค้า</h2>
            
            <div class="content-grid">
                <div class="content-card">
                    <div class="card-img">
                        <img decoding="async" src="https://images.pexels.com/photos/3568518/pexels-photo-3568518.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" alt="ค้นหาสินค้าออนไลน์">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">เทคนิคการค้นหาสินค้าออนไลน์</h3>
                        <p class="card-text">การค้นหาสินค้าออนไลน์อย่างมีประสิทธิภาพ ควรใช้คำค้นหาที่เฉพาะเจาะจง ใช้ตัวกรองประเภทสินค้า ราคา และแบรนด์ รวมถึงเปรียบเทียบสินค้าจากร้านค้าต่างๆ เพื่อให้ได้สินค้าที่ตรงกับความต้องการมากที่สุด</p>
                    </div>
                </div>
                
                <div class="content-card">
                    <div class="card-img">
                        <img decoding="async" src="https://images.pexels.com/photos/5632402/pexels-photo-5632402.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" alt="อ่านรีวิวสินค้า">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">การอ่านรีวิวและเรตติ้ง</h3>
                        <p class="card-text">รีวิวและเรตติ้งเป็นข้อมูลสำคัญที่ช่วยในการตัดสินใจซื้อ ควรอ่านรีวิวทั้งที่ดีและไม่ดี ดูจำนวนรีวิวทั้งหมด และสังเกตว่ารีวิวนั้นเป็นรีวิวจริงหรือไม่ เพื่อประเมินคุณภาพสินค้าได้อย่างถูกต้อง</p>
                    </div>
                </div>
            </div>
            
            <div class="career-tip">
                <h3><i class="fas fa-lightbulb"></i> ข้อคิดเกี่ยวกับอาชีพ</h3>
                <p>การเป็นผู้บริโภคที่ชาญฉลาดจะช่วยพัฒนาทักษะการวิเคราะห์และการตัดสินใจ ซึ่งเป็นทักษะสำคัญในหลายอาชีพ เช่น นักการตลาดดิจิทัล นักวิเคราะห์ข้อมูล ผู้จัดการซัพพลายเชน และผู้ประกอบการออนไลน์</p>
            </div>
            
            <div class="inquiry-question">
                <h3><i class="fas fa-question-circle"></i> คำถามกระตุ้นความคิด</h3>
                <p>ถ้านักเรียนต้องการซื้อสมาร์ทโฟนใหม่ นักเรียนจะใช้วิธีใดในการค้นหาข้อมูลและเปรียบเทียบสินค้า? และจะพิจารณาจากปัจจัยใดบ้าง?</p>
            </div>
            
            <div class="drag-drop-game">
                <h3><i class="fas fa-gamepad"></i> กิจกรรมลากและวาง: เรียงลำดับขั้นตอนการค้นหาสินค้า</h3>
                <p>ลากขั้นตอนต่าง ๆ ไปวางในช่องให้ถูกต้องตามลำดับ</p>
                
                <div class="drag-area">
                    <div class="drag-item" draggable="true">อ่านรีวิวและเรตติ้ง</div>
                    <div class="drag-item" draggable="true">เปรียบเทียบราคาและคุณสมบัติ</div>
                    <div class="drag-item" draggable="true">เลือกแพลตฟอร์มการซื้อ</div>
                    <div class="drag-item" draggable="true">กำหนดความต้องการและงบประมาณ</div>
                </div>
                
                <div class="drop-area">
                    <div class="drop-box" id="step1">1. </div>
                    <div class="drop-box" id="step2">2. </div>
                    <div class="drop-box" id="step3">3. </div>
                    <div class="drop-box" id="step4">4. </div>
                </div>
                
                <button class="btn btn-secondary" onclick="checkOrder()">ตรวจสอบคำตอบ</button>
            </div>
            
            <div class="navigation">
                <button class="btn btn-secondary" onclick="prevPage(2)"><i class="fas fa-arrow-left"></i> ย้อนกลับ</button>
                <button class="btn btn-primary" onclick="addXP(10); nextPage(2)">บทเรียนถัดไป <i class="fas fa-arrow-right"></i></button>
            </div>
        </div>
        
        <!-- Page 3: Safe Online Shopping -->
        <div class="page" id="page3">
            <h2 class="page-title"><i class="fas fa-lock"></i> การซื้อสินค้าออนไลน์อย่างปลอดภัย</h2>
            
            <div class="content-grid">
                <div class="content-card">
                    <div class="card-img">
                        <img decoding="async" src="https://images.pexels.com/photos/4386437/pexels-photo-4386437.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" alt="ตรวจสอบร้านค้า">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">การตรวจสอบความน่าเชื่อถือของร้านค้า</h3>
                        <p class="card-text">ก่อนซื้อสินค้า ควรตรวจสอบประวัติร้านค้า ดูรีวิวจากผู้ซื้อจริง ดูวันเปิดร้าน และจำนวนผู้ติดตาม รวมถึงสังเกตเครื่องหมายรับรองความปลอดภัยต่าง ๆ เพื่อให้แน่ใจว่าร้านค้ามีความน่าเชื่อถือ</p>
                    </div>
                </div>
                
                <div class="content-card">
                    <div class="card-img">
                        <img decoding="async" src="https://images.pexels.com/photos/4386158/pexels-photo-4386158.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" alt="การชำระเงิน">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">การชำระเงินที่ปลอดภัย</h3>
                        <p class="card-text">ควรเลือกช่องทางการชำระเงินที่มีความปลอดภัย เช่น บัตรเครดิตพร้อมระบบป้องกัน หรือบริการเก็บเงินปลายทาง หลีกเลี่ยงการโอนเงินล่วงหน้าโดยไม่ได้รับสินค้า และตรวจสอบให้แน่ใจว่ามีการเข้ารหัสข้อมูลในการชำระเงิน</p>
                    </div>
                </div>
            </div>
            
            <div class="career-tip">
                <h3><i class="fas fa-lightbulb"></i> ข้อคิดเกี่ยวกับอาชีพ</h3>
                <p>ความรู้เรื่องความปลอดภัยในการซื้อขายออนไลน์เป็นพื้นฐานสำคัญสำหรับอาชีพด้านความปลอดภัยทางไซเบอร์ นักพัฒนาระบบชำระเงินดิจิทัล และที่ปรึกษาด้านการค้าอิเล็กทรอนิกส์</p>
            </div>
            
            <div class="inquiry-question">
                <h3><i class="fas fa-question-circle"></i> คำถามกระตุ้นความคิด</h3>
                <p>นักเรียนคิดว่ามีสัญญาณอะไรบ้างที่บ่งบอกว่าร้านค้าออนไลน์แห่งหนึ่งมีความน่าเชื่อถือ? และนักเรียนจะทำอย่างไรหากพบว่าร้านค้าไม่น่าเชื่อถือ?</p>
            </div>
            
            <div class="navigation">
                <button class="btn btn-secondary" onclick="prevPage(3)"><i class="fas fa-arrow-left"></i> ย้อนกลับ</button>
                <button class="btn btn-primary" onclick="addXP(10); nextPage(3)">บทเรียนถัดไป <i class="fas fa-arrow-right"></i></button>
            </div>
        </div>
        
        <!-- Page 4: Avoiding Online Scams -->
        <div class="page" id="page4">
            <h2 class="page-title"><i class="fas fa-shield-alt"></i> การหลีกเลี่ยงการถูกหลอกลวง</h2>
            
            <div class="content-grid">
                <div class="content-card">
                    <div class="card-img">
                        <img decoding="async" src="https://images.pexels.com/photos/60504/security-protection-anti-virus-software-60504.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" alt="การหลอกลวงออนไลน์">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">รูปแบบการหลอกลวงออนไลน์</h3>
                        <p class="card-text">การหลอกลวงออนไลน์มีหลายรูปแบบ เช่น การขายสินค้าไม่มีอยู่จริง การหลอกให้โอนเงินล่วงหน้า การส่งลิงก์ปลอมเพื่อขโมยข้อมูล การแจ้งถูกรางวัลหลอกลวง และการโทรศัพท์แอบอ้างเป็นพนักงานบริษัท</p>
                    </div>
                </div>
                
                <div class="content-card">
                    <div class="card-img">
                        <img decoding="async" src="https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" alt="สัญญาณเตือนภัย">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">สัญญาณเตือนภัย (Red Flags)</h3>
                        <p class="card-text">สัญญาณเตือนภัยที่ควรระวัง ได้แก่ ราคาต่ำกว่าท้องตลาดมาก ถูกเร่งให้ตัดสินใจซื้อ ต้องโอนเงินล่วงหน้า ร้านค้าไม่มีประวัติการขาย รีวิวไม่น่าเชื่อถือ ไม่มีช่องทางติดต่อที่ชัดเจน และเว็บไซต์ไม่มี https</p>
                    </div>
                </div>
            </div>
            
            <div class="career-tip">
                <h3><i class="fas fa-lightbulb"></i> ข้อคิดเกี่ยวกับอาชีพ</h3>
                <p>การเข้าใจรูปแบบการหลอกลวงทางออนไลน์เป็นพื้นฐานสำคัญสำหรับอาชีพด้านความมั่นคงปลอดภัยไซเบอร์ นักสืบสวนอาชญากรรมออนไลน์ และผู้เชี่ยวชาญด้านการป้องกันการฉ้อโกง</p>
            </div>
            
            <div class="inquiry-question">
                <h3><i class="fas fa-question-circle"></i> คำถามกระตุ้นความคิด</h3>
                <p>ถ้านักเรียนได้รับอีเมลแจ้งว่าถูกรางวัลรถยนต์ แต่ต้องโอนเงินค่าธรรมเนียมก่อน นักเรียนจะทำอย่างไร? และนักเรียนคิดว่าสิ่งนี้เป็นการหลอกลวงหรือไม่ เพราะเหตุใด?</p>
            </div>
            
            <div class="navigation">
                <button class="btn btn-secondary" onclick="prevPage(4)"><i class="fas fa-arrow-left"></i> ย้อนกลับ</button>
                <button class="btn btn-primary" onclick="addXP(10); nextPage(4)">บทเรียนถัดไป <i class="fas fa-arrow-right"></i></button>
            </div>
        </div>
        
        <!-- Page 5: Consumer Rights -->
        <div class="page" id="page5">
            <h2 class="page-title"><i class="fas fa-balance-scale"></i> สิทธิผู้บริโภคและการคืนสินค้า</h2>
            
            <div class="content-grid">
                <div class="content-card">
                    <div class="card-img">
                        <img decoding="async" src="https://images.pexels.com/photos/6077326/pexels-photo-6077326.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" alt="กฎหมายคุ้มครองผู้บริโภค">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">กฎหมายคุ้มครองผู้บริโภคออนไลน์</h3>
                        <p class="card-text">ผู้บริโภคออนไลน์มีสิทธิได้รับข้อมูลที่ถูกต้องครบถ้วน มีสิทธิในการคืนสินค้าหรือเปลี่ยนสินค้าภายใน 7 วันหากสินค้าไม่ตรงตามคำโฆษณา และมีสิทธิได้รับความคุ้มครองตามกฎหมายว่าด้วยการคุ้มครองผู้บริโภค</p>
                    </div>
                </div>
                
                <div class="content-card">
                    <div class="card-img">
                        <img decoding="async" src="https://images.pexels.com/photos/4386431/pexels-photo-4386431.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=600" alt="การร้องเรียน">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">ขั้นตอนการร้องเรียนและคืนสินค้า</h3>
                        <p class="card-text">เมื่อต้องการคืนสินค้า ควรติดต่อร้านค้าทันที ถ่ายรูปหลักฐานเก็บไว้ ทำหนังสือแจ้งความประสงค์คืนสินค้า ส่งสินค้าคืนตามวิธีการที่ร้านค้ากำหนด และหากร้านค้าไม่รับคืนสินค้า สามารถร้องเรียนที่สำนักงานคุ้มครองผู้บริโภค</p>
                    </div>
                </div>
            </div>
            
            <div class="career-tip">
                <h3><i class="fas fa-lightbulb"></i> ข้อคิดเกี่ยวกับอาชีพ</h3>
                <p>ความรู้เรื่องสิทธิผู้บริโภคเป็นพื้นฐานสำคัญสำหรับอาชีพนักกฎหมายเฉพาะทางด้านคุ้มครองผู้บริโภค ที่ปรึกษาด้านการค้าปลีกออนไลน์ และเจ้าหน้าที่ดูแลความสัมพันธ์ลูกค้า</p>
            </div>
            
            <div class="inquiry-question">
                <h3><i class="fas fa-question-circle"></i> คำถามกระตุ้นความคิด</h3>
                <p>ถ้านักเรียนซื้อเสื้อผ้าออนไลน์แล้วได้รับสินค้าไม่ตรงตามรูปภาพที่แสดง นักเรียนจะใช้สิทธิผู้บริโภคอย่างไรบ้าง? และนักเรียนคิดว่าการคืนสินค้าควรมีขั้นตอนอย่างไร?</p>
            </div>
            
            <div class="navigation">
                <button class="btn btn-secondary" onclick="prevPage(5)"><i class="fas fa-arrow-left"></i> ย้อนกลับ</button>
                <button class="btn btn-primary" onclick="addXP(10); nextPage(5)">ทำแบบทดสอบ <i class="fas fa-arrow-right"></i></button>
            </div>
        </div>
        
        <!-- Page 6: Quiz (10 questions) -->
        <div class="page" id="page6">
            <h2 class="page-title"><i class="fas fa-clipboard-list"></i> แบบทดสอบหลังเรียน (10 ข้อ)</h2>
            
            <div class="quiz-container">
                <!-- Question 1 -->
                <div class="quiz-question">
                    <div class="question-number">1</div>
                    <h3>การอ่านรีวิวสินค้าอย่างมีประสิทธิภาพควรทำอย่างไร?</h3>
                    <div class="quiz-options">
                        <div class="quiz-option" onclick="selectOption(this)">อ่านเฉพาะรีวิวที่ดีที่สุด</div>
                        <div class="quiz-option" onclick="selectOption(this)">อ่านรีวิวทั้งที่ดีและไม่ดี และดูจำนวนรีวิวทั้งหมด</div>
                        <div class="quiz-option" onclick="selectOption(this)">เชื่อรีวิวที่มีรูปภาพประกอบเท่านั้น</div>
                        <div class="quiz-option" onclick="selectOption(this)">เลือกอ่านเฉพาะรีวิวล่าสุด</div>
                    </div>
                </div>
                
                <!-- Question 2 -->
                <div class="quiz-question">
                    <div class="question-number">2</div>
                    <h3>สัญญาณเตือนภัย (Red Flag) ใดต่อไปนี้บ่งบอกว่าร้านค้าอาจไม่น่าเชื่อถือ?</h3>
                    <div class="quiz-options">
                        <div class="quiz-option" onclick="selectOption(this)">มีรีวิวมากกว่า 100 รีวิว</div>
                        <div class="quiz-option" onclick="selectOption(this)">ราคาสินค้าต่ำกว่าท้องตลาดมาก</div>
                        <div class="quiz-option" onclick="selectOption(this)">มีที่อยู่ร้านค้าชัดเจน</div>
                        <div class="quiz-option" onclick="selectOption(this)">มีหลายช่องทางการชำระเงิน</div>
                    </div>
                </div>
                
                <!-- Question 3 -->
                <div class="quiz-question">
                    <div class="question-number">3</div>
                    <h3>วิธีการชำระเงินแบบใดที่ปลอดภัยที่สุดในการซื้อสินค้าออนไลน์?</h3>
                    <div class="quiz-options">
                        <div class="quiz-option" onclick="selectOption(this)">โอนเงินผ่านธนาคารล่วงหน้า</div>
                        <div class="quiz-option" onclick="selectOption(this)">เก็บเงินปลายทาง (COD)</div>
                        <div class="quiz-option" onclick="selectOption(this)">ส่งเงินสดทางไปรษณีย์</div>
                        <div class="quiz-option" onclick="selectOption(this)">ให้เพื่อนโอนเงินให้</div>
                    </div>
                </div>
                
                <!-- Question 4 -->
                <div class="quiz-question">
                    <div class="question-number">4</div>
                    <h3>หากซื้อสินค้าออนไลน์แล้วได้สินค้าไม่ตรงตามที่โฆษณา ผู้บริโภคมีสิทธิคืนสินค้าภายในกี่วัน?</h3>
                    <div class="quiz-options">
                        <div class="quiz-option" onclick="selectOption(this)">3 วัน</div>
                        <div class="quiz-option" onclick="selectOption(this)">7 วัน</div>
                        <div class="quiz-option" onclick="selectOption(this)">15 วัน</div>
                        <div class="quiz-option" onclick="selectOption(this)">30 วัน</div>
                    </div>
                </div>
                
                <!-- Question 5 -->
                <div class="quiz-question">
                    <div class="question-number">5</div>
                    <h3>หน่วยงานใดที่รับผิดชอบเกี่ยวกับการคุ้มครองผู้บริโภคในประเทศไทย?</h3>
                    <div class="quiz-options">
                        <div class="quiz-option" onclick="selectOption(this)">สำนักงานคณะกรรมการคุ้มครองผู้บริโภค (สคบ.)</div>
                        <div class="quiz-option" onclick="selectOption(this)">กระทรวงดิจิทัลเพื่อเศรษฐกิจและสังคม</div>
                        <div class="quiz-option" onclick="selectOption(this)">สำนักงานตำรวจแห่งชาติ</div>
                        <div class="quiz-option" onclick="selectOption(this)">กรมการค้าภายใน</div>
                    </div>
                </div>
                
                <!-- Question 6 -->
                <div class="quiz-question">
                    <div class="question-number">6</div>
                    <h3>ข้อใดไม่ใช่สัญญาณเตือนภัย (Red Flag) ในการซื้อสินค้าออนไลน์?</h3>
                    <div class="quiz-options">
                        <div class="quiz-option" onclick="selectOption(this)">ราคาสินค้าถูกมากเกินไป</div>
                        <div class="quiz-option" onclick="selectOption(this)">ร้านค้ามีรีวิวที่ดีทั้งหมดโดยไม่มีรีวิวแย่เลย</div>
                        <div class="quiz-option" onclick="selectOption(this)">มีที่อยู่ร้านค้าชัดเจน</div>
                        <div class="quiz-option" onclick="selectOption(this)">ต้องโอนเงินล่วงหน้า 100%</div>
                    </div>
                </div>
                
                <!-- Question 7 -->
                <div class="quiz-question">
                    <div class="question-number">7</div>
                    <h3>การชำระเงินแบบใดที่เสี่ยงต่อการถูกหลอกลวงมากที่สุด?</h3>
                    <div class="quiz-options">
                        <div class="quiz-option" onclick="selectOption(this)">บัตรเครดิต</div>
                        <div class="quiz-option" onclick="selectOption(this)">เก็บเงินปลายทาง (COD)</div>
                        <div class="quiz-option" onclick="selectOption(this)">โอนเงินผ่านธนาคารล่วงหน้า</div>
                        <div class="quiz-option" onclick="selectOption(this)">ผ่อนผ่านบัตรเครดิต</div>
                    </div>
                </div>
                
                <!-- Question 8 -->
                <div class="quiz-question">
                    <div class="question-number">8</div>
                    <h3>หากต้องการร้องเรียนร้านค้าออนไลน์ นักเรียนควรติดต่อหน่วยงานใดเป็นลำดับแรก?</h3>
                    <div class="quiz-options">
                        <div class="quiz-option" onclick="selectOption(this)">ตำรวจ</div>
                        <div class="quiz-option" onclick="selectOption(this)">สำนักงานคณะกรรมการคุ้มครองผู้บริโภค (สคบ.)</div>
                        <div class="quiz-option" onclick="selectOption(this)">กรมการค้าภายใน</div>
                        <div class="quiz-option" onclick="selectOption(this)">ธนาคารแห่งประเทศไทย</div>
                    </div>
                </div>
                
                <!-- Question 9 -->
                <div class="quiz-question">
                    <div class="question-number">9</div>
                    <h3>การเปรียบเทียบสินค้าออนไลน์ควรพิจารณาปัจจัยใดบ้าง?</h3>
                    <div class="quiz-options">
                        <div class="quiz-option" onclick="selectOption(this)">ราคา</div>
                        <div class="quiz-option" onclick="selectOption(this)">คุณสมบัติสินค้า</div>
                        <div class="quiz-option" onclick="selectOption(this)">การรับประกัน</div>
                        <div class="quiz-option" onclick="selectOption(this)">ถูกทุกข้อ</div>
                    </div>
                </div>
                
                <!-- Question 10 -->
                <div class="quiz-question">
                    <div class="question-number">10</div>
                    <h3>ข้อใดคือพฤติกรรมของผู้บริโภคออนไลน์ที่ชาญฉลาด?</h3>
                    <div class="quiz-options">
                        <div class="quiz-option" onclick="selectOption(this)">ซื้อสินค้าทันทีเมื่อเห็นโฆษณา</div>
                        <div class="quiz-option" onclick="selectOption(this)">เปรียบเทียบสินค้าจากหลายร้านค้าก่อนตัดสินใจ</div>
                        <div class="quiz-option" onclick="selectOption(this)">เชื่อรีวิวจากเพื่อนเท่านั้น</div>
                        <div class="quiz-option" onclick="selectOption(this)">ไม่สนใจนโยบายการคืนสินค้า</div>
                    </div>
                </div>
            </div>
            
            <div class="navigation">
                <button class="btn btn-secondary" onclick="prevPage(6)"><i class="fas fa-arrow-left"></i> ย้อนกลับ</button>
                <button class="btn btn-primary" onclick="submitQuiz()">ส่งคำตอบ <i class="fas fa-check-circle"></i></button>
            </div>
        </div>
        
        <!-- Page 7: Results -->
        <div class="page" id="page7">
            <div class="results-container">
                <div class="xp-badge">
                    <div class="xp-total" id="totalXP">0</div>
                    <div class="xp-label">คะแนน XP</div>
                </div>
                
                <h2>ยินดีด้วย! คุณได้สำเร็จบทเรียน</h2>
                <p>การเป็นผู้บริโภคออนไลน์ที่ชาญฉลาดเป็นทักษะสำคัญในยุคดิจิทัล</p>
                
                <div class="student-info">
                    <h3><i class="fas fa-user-graduate"></i> ข้อมูลนักเรียน</h3>
                    <div class="info-grid">
                        <div class="info-item">
                            <div class="info-label">ชั้นเรียน</div>
                            <div class="info-value" id="resultClass">&#8211;</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">ห้อง</div>
                            <div class="info-value" id="resultRoom">&#8211;</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">เลขที่</div>
                            <div class="info-value" id="resultNumber">&#8211;</div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-label">ชื่อ-สกุล</div>
                            <div class="info-value" id="resultName">&#8211;</div>
                        </div>
                    </div>
                    
                    <div class="info-item" style="grid-column: span 2; margin-top: 20px;">
                        <div class="info-label">คะแนนแบบทดสอบ</div>
                        <div class="info-value" id="quizScore">0/10</div>
                    </div>
                </div>
            </div>
            
            <div class="navigation">
                <button class="btn btn-secondary" onclick="prevPage(7)"><i class="fas fa-arrow-left"></i> เนื้อหาก่อนหน้า</button>
                <button class="btn btn-primary" onclick="restartCourse()">เริ่มบทเรียนใหม่ <i class="fas fa-redo"></i></button>
            </div>
        </div>
        
        <div class="footer">
            <p>ออกแบบและพัฒนาโดย นายณรงค์ชัช กันสุข</p>
            <p>ครูวิทยฐานะครูชำนาญการ โรงเรียนหนองจอกพิทยานุสรณ์</p>
            <p>สำนักงานเขตหนองจอก กรุงเทพมหานคร</p>
            <p>© 2025 สงวนลิขสิทธิ์</p>
        </div>
    </div>

    <script>
        let currentPage = 1;
        let totalPages = 7;
        let xp = 0;
        let quizScore = 0;
        
        // Initialize the course
        function initCourse() {
            updateProgress();
            document.getElementById('xpCounter').textContent = xp;
        }
        
        // Navigate to next page
        function nextPage(pageNum) {
            if(pageNum === 1) {
                // Validate student info before proceeding
                const classLevel = document.getElementById('classLevel').value;
                const classRoom = document.getElementById('classRoom').value;
                const studentNumber = document.getElementById('studentNumber').value;
                const studentName = document.getElementById('studentName').value;
                
                if(!classLevel || !classRoom || !studentNumber || !studentName) {
                    alert('กรุณากรอกข้อมูลนักเรียนให้ครบถ้วน');
                    return;
                }
            }
            
            document.getElementById(`page${currentPage}`).classList.remove('active');
            currentPage++;
            document.getElementById(`page${currentPage}`).classList.add('active');
            updateProgress();
        }
        
        // Navigate to previous page
        function prevPage(pageNum) {
            document.getElementById(`page${currentPage}`).classList.remove('active');
            currentPage--;
            document.getElementById(`page${currentPage}`).classList.add('active');
            updateProgress();
        }
        
        // Add XP points
        function addXP(points) {
            xp += points;
            document.getElementById('xpCounter').textContent = xp;
            
            // Show XP animation
            const xpCounter = document.getElementById('xpCounter');
            xpCounter.style.transform = 'scale(1.2)';
            xpCounter.style.color = '#ff9800';
            setTimeout(() => {
                xpCounter.style.transform = 'scale(1)';
                xpCounter.style.color = '';
            }, 500);
        }
        
        // Update progress bar
        function updateProgress() {
            const progress = (currentPage / totalPages) * 100;
            document.getElementById('progressBar').style.width = `${progress}%`;
        }
        
        // Check drag and drop order
        function checkOrder() {
            const step1 = document.getElementById('step1').textContent;
            const step2 = document.getElementById('step2').textContent;
            const step3 = document.getElementById('step3').textContent;
            const step4 = document.getElementById('step4').textContent;
            
            if(step1.includes('กำหนด') && step2.includes('เลือก') && 
               step3.includes('อ่าน') && step4.includes('เปรียบเทียบ')) {
                alert('ถูกต้อง! คุณได้ 10 XP');
                addXP(10);
            } else {
                alert('ลำดับไม่ถูกต้อง! ลองใหม่อีกครั้ง');
            }
        }
        
        // Select quiz option
        function selectOption(element) {
            // Remove selected class from siblings
            const siblings = element.parentElement.children;
            for(let i = 0; i < siblings.length; i++) {
                siblings[i].classList.remove('selected');
            }
            
            // Add selected class to clicked element
            element.classList.add('selected');
        }
        
        // Submit quiz
        function submitQuiz() {
            // In a real implementation, this would check all answers
            // For this demo, we'll simulate a score
            quizScore = Math.floor(Math.random() * 6) + 5; // Random score between 5-10
            
            // Calculate XP from quiz (60% of total XP)
            const quizXP = Math.round((quizScore / 10) * 60);
            xp += quizXP;
            
            // Show results
            document.getElementById('quizScore').textContent = `${quizScore}/10`;
            document.getElementById('totalXP').textContent = xp;
            
            // Show student info in results
            document.getElementById('resultClass').textContent = document.getElementById('classLevel').value;
            document.getElementById('resultRoom').textContent = document.getElementById('classRoom').value;
            document.getElementById('resultNumber').textContent = document.getElementById('studentNumber').value;
            document.getElementById('resultName').textContent = document.getElementById('studentName').value;
            
            // Go to results page
            document.getElementById('page6').classList.remove('active');
            currentPage = 7;
            document.getElementById('page7').classList.add('active');
            updateProgress();
        }
        
        // Restart the course
        function restartCourse() {
            document.getElementById('page7').classList.remove('active');
            currentPage = 1;
            xp = 0;
            quizScore = 0;
            document.getElementById('page1').classList.add('active');
            document.getElementById('xpCounter').textContent = '0';
            updateProgress();
            
            // Reset student form
            document.getElementById('classLevel').value = '';
            document.getElementById('classRoom').value = '';
            document.getElementById('studentNumber').value = '';
            document.getElementById('studentName').value = '';
        }
        
        // Setup drag and drop
        function setupDragDrop() {
            const dragItems = document.querySelectorAll('.drag-item');
            const dropBoxes = document.querySelectorAll('.drop-box');
            
            dragItems.forEach(item => {
                item.addEventListener('dragstart', dragStart);
            });
            
            dropBoxes.forEach(box => {
                box.addEventListener('dragover', dragOver);
                box.addEventListener('dragenter', dragEnter);
                box.addEventListener('dragleave', dragLeave);
                box.addEventListener('drop', drop);
            });
        }
        
        function dragStart(e) {
            e.dataTransfer.setData('text/plain', e.target.textContent);
            setTimeout(() => {
                e.target.style.opacity = '0.4';
            }, 0);
        }
        
        function dragOver(e) {
            e.preventDefault();
        }
        
        function dragEnter(e) {
            e.preventDefault();
            this.classList.add('hover');
        }
        
        function dragLeave() {
            this.classList.remove('hover');
        }
        
        function drop(e) {
            e.preventDefault();
            this.classList.remove('hover');
            
            const data = e.dataTransfer.getData('text/plain');
            this.textContent = this.textContent.split('. ')[0] + '. ' + data;
            
            // Remove the dragged item
            const dragItems = document.querySelectorAll('.drag-item');
            dragItems.forEach(item => {
                if(item.textContent === data) {
                    item.style.display = 'none';
                }
            });
        }
        
        // Initialize when page loads
        window.onload = function() {
            initCourse();
            setupDragDrop();
        };
    </script>
</body>
</html>
<p>The post <a href="https://www.kroochut.com/smart-shopping/">🛒บทเรียนออนไลน์การเป็นผู้บริโภคออนไลน์ที่ชาญฉลาด 🏪</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>บทเรียนออนไลน์เทคโนโลยีกับวิทยาศาสตร์</title>
		<link>https://www.kroochut.com/science-and-technology/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Sun, 15 Jun 2025 08:37:37 +0000</pubDate>
				<category><![CDATA[การออกแบบและเทคโนโลยี]]></category>
		<category><![CDATA["ปลดล็อก"]]></category>
		<category><![CDATA["สำรวจ"]]></category>
		<category><![CDATA["อยากเข้าใจ"]]></category>
		<category><![CDATA["ออกแบบ"]]></category>
		<category><![CDATA[บทเรียนออนไลน์]]></category>
		<category><![CDATA[ม.3]]></category>
		<category><![CDATA[วิทยาศาสตร์]]></category>
		<category><![CDATA[เทคโนโลยี]]></category>
		<guid isPermaLink="false">https://www.kroochut.com/?p=734</guid>

					<description><![CDATA[<p>The post <a href="https://www.kroochut.com/science-and-technology/">บทเรียนออนไลน์เทคโนโลยีกับวิทยาศาสตร์</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<iframe src="https://sider.ai/agents/web-creator/share/684e7e400484c40371d071e5" width="100%" height="1500px" frameborder="0" allowfullscreen></iframe>

<p>The post <a href="https://www.kroochut.com/science-and-technology/">บทเรียนออนไลน์เทคโนโลยีกับวิทยาศาสตร์</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>บทเรียนออนไลน์การป้องกันอันตรายจากการใช้เครื่องมือในการสร้างชิ้นงานฯ</title>
		<link>https://www.kroochut.com/personal-protective-creative-project/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Fri, 13 Jun 2025 12:52:04 +0000</pubDate>
				<category><![CDATA[การออกแบบและเทคโนโลยี]]></category>
		<category><![CDATA[e-learning]]></category>
		<category><![CDATA[บทเรียนออนไลน์]]></category>
		<category><![CDATA[ป้องกันอันตราย]]></category>
		<category><![CDATA[ม.3]]></category>
		<category><![CDATA[ใช้งานเครื่องมืออย่างปลอดภัย]]></category>
		<guid isPermaLink="false">https://www.kroochut.com/?p=702</guid>

					<description><![CDATA[<p>การป้องกันอันตรายและการสร้างชิ้นงาน &#124; ม.3 👋 ยินดีต้อนรับสู่บทเรียนออนไลน์ สวัสดีน้องๆ ม.3 ทุกคน! 😊 วันนี้เราจะมาเรียนรู้เรื่อง &#8220;การป้องกันอันตรายจากการใช้เครื่องมือในการสร้างชิ้นงาน และการสร้างชิ้นงานด้วยกลไก ไฟฟ้า และอิเล็กทรอนิกส์&#8221; กันนะคะ การเรียนรู้การใช้เครื่องมืออย่างปลอดภัยเป็นสิ่งสำคัญ 🔧 ℹ️ ข้อมูลบทเรียน บทเรียนนี้จะใช้เวลาประมาณ 60 นาที และประกอบด้วย 4 ส่วนหลัก: แนะนำบทเรียนและกรอกข้อมูลส่วนตัว การป้องกันอันตรายจากการใช้เครื่องมือ การใช้วัสดุอุปกรณ์และการทดสอบชิ้นงาน การเลือกใช้และดูแลรักษาอุปกรณ์ 📝 กรุณากรอกข้อมูลส่วนตัว ชื่อ-นามสกุล ระดับชั้น &#8212; เลือกระดับชั้น &#8212;ม.3/1ม.3/2ม.3/3ม.3/4ม.3/5ม.3/6ม.3/7ม.3/8 เลขที่ ⏱️ เวลาโดยประมาณสำหรับส่วนนี้: 5 นาที ต่อไป 👉 ⚠️ การป้องกันอันตรายจากการใช้เครื่องมือ 🚨 ทำไมต้องเรียนรู้เรื่องความปลอดภัย? การทำงานกับเครื่องมือช่างทั้งกลไก ไฟฟ้า และอิเล็กทรอนิกส์ มีความเสี่ยงต่ออันตรายต่างๆ เช่น บาดเจ็บจากของมีคม ไฟช็อต หรืออุบัติเหตุจากการใช้งานผิดวิธี การเรียนรู้วิธีป้องกันจะช่วยให้เราทำงานได้อย่างปลอดภัยและมีประสิทธิภาพ 👍 🔧 การป้องกันอันตรายจากเครื่องมือกล สวมใส่อุปกรณ์ป้องกันส่วนบุคคล (PPE) เช่น แว่นตา ถุงมือ หมวกนิรภัย ตรวจสอบสภาพเครื่องมือก่อนใช้งานทุกครั้ง ไม่ใช้เครื่องมือที่ชำรุดหรือมีสภาพไม่ปลอดภัย จัดเก็บเครื่องมือให้เป็นระเบียบหลังใช้งาน ไม่เล่นหรือหยอกล้อขณะใช้เครื่องมือ อุปกรณ์ป้องกันส่วนบุคคล (PPE) ช่วยลดความเสี่ยงในการทำงาน 👷 ⚡ การป้องกันอันตรายจากไฟฟ้าและอิเล็กทรอนิกส์ ตรวจสอบสภาพสายไฟและอุปกรณ์ไฟฟ้าก่อนใช้งาน ไม่ทำงานกับไฟฟ้าในที่ชื้นหรือมือเปียก ใช้เครื่องมือที่มีฉนวนป้องกัน รู้ตำแหน่งสวิตช์ตัดวงจรไฟฟ้าในห้องทำงาน ไม่ซ่อมแซมอุปกรณ์ไฟฟ้าขณะที่ยังเสียบปลั๊กอยู่ 🤔 ถ้าน้องต้องตัดแผ่นไม้ด้วยเลื่อยไฟฟ้า อะไรคือสิ่งที่ควรทำมากที่สุด? 1. สวมแว่นตาและถุงมือป้องกัน 2. ใช้ความเร็วสูงสุดเพื่อให้งานเสร็จเร็ว 3. ให้เพื่อนยืนใกล้ๆ เพื่อคอยช่วยเหลือ 4. ไม่ต้องตรวจสอบเครื่องเพราะเพิ่งใช้เมื่อวาน ถูกต้อง! 🎉 การสวมใส่อุปกรณ์ป้องกันส่วนบุคคลเป็นสิ่งสำคัญที่สุดเมื่อใช้เครื่องมืออันตราย ยังไม่ถูกต้องนะ 😅 ลองคิดดูใหม่ว่าอะไรคือสิ่งที่ช่วยป้องกันอันตรายได้มากที่สุด ⏱️ เวลาโดยประมาณสำหรับส่วนนี้: 15 นาที 👈 ย้อนกลับ ต่อไป 👉 🛠️ การใช้วัสดุอุปกรณ์และการทดสอบชิ้นงาน 💡 ความคิดสร้างสรรค์ + ความปลอดภัย = ผลงานคุณภาพ การสร้างชิ้นงานที่ดีต้องอาศัยทั้งความคิดสร้างสรรค์และความรู้ในการใช้วัสดุอุปกรณ์อย่างถูกต้อง รวมถึงกระบวนการทดสอบที่เหมาะสม ✨ 📦 การเลือกใช้วัสดุและอุปกรณ์ 🔌 เครื่องมือวัดไฟฟ้า มัลติมิเตอร์, แอมป์มิเตอร์, โวลต์มิเตอร์ ใช้สำหรับวัดค่าต่างๆ ในวงจรไฟฟ้า 🔨 เครื่องมือช่างพื้นฐาน ค้อน, ไขควง, เลื่อย, ประแจ ใช้สำหรับงานประกอบชิ้นส่วนกลไก 🧰 เครื่องมืออิเล็กทรอนิกส์ หัวแร้ง, ตะกั่วบัดกรี, คีมปากนกแก้ว ใช้สำหรับงานประกอบวงจร 🔍 กระบวนการทดสอบแบบแยกส่วน ทดสอบแต่ละส่วนก่อนประกอบ: ตรวจสอบการทำงานของแต่ละโมดูล บันทึกผลการทดสอบ: จดบันทึกค่าต่างๆ ที่วัดได้ แก้ไขข้อบกพร่อง: หากพบปัญหาให้แก้ไขก่อนประกอบชิ้นส่วนต่อไป ทดสอบซ้ำ: หลังแก้ไขแล้วต้องทดสอบอีกครั้ง การทดสอบวงจรอิเล็กทรอนิกส์อย่างเป็นระบบ 🔬 🧩 การประกอบชิ้นงานและการทดสอบผล ประกอบชิ้นงานตามแผนที่ออกแบบไว้ ตรวจสอบความถูกต้องของทิศทางและตำแหน่งชิ้นส่วน ทดสอบการทำงานหลังประกอบเสร็จ วัดค่าต่างๆ เพื่อเปรียบเทียบกับค่าที่คาดหวัง ปรับแต่งแก้ไขหากผลการทดสอบไม่เป็นไปตามต้องการ 🤔 ในการสร้างชิ้นงานอิเล็กทรอนิกส์ ควรทำอะไรก่อนเป็นอันดับแรกเมื่อพบว่าวงจรไม่ทำงาน? 1. เปลี่ยนชิ้นส่วนทั้งหมดใหม่ 2. ทดสอบแต่ละส่วนเพื่อหาตำแหน่งที่ผิดพลาด 3. ต่อไฟแรงขึ้นเพื่อให้วงจรทำงาน 4. ทิ้งแล้วเริ่มทำใหม่ทั้งหมด เยี่ยมมาก! 👍 การทดสอบแบบแยกส่วนช่วยให้เราหาจุดผิดพลาดได้อย่างมีประสิทธิภาพ ยังไม่ใช่คำตอบที่ดีที่สุดนะ 😉 ลองคิดหาวิธีที่เป็นระบบและประหยัดเวลามากกว่านี้ ⏱️ เวลาโดยประมาณสำหรับส่วนนี้: 20 นาที 👈 ย้อนกลับ ต่อไป 👉 🧰 การเลือกใช้และดูแลรักษาอุปกรณ์ 🌟 เครื่องมือดีมีชัยไปกว่าครึ่ง! การเลือกใช้เครื่องมือที่เหมาะสมและการดูแลรักษาอย่างถูกต้องจะช่วยยืดอายุการใช้งานของเครื่องมือ และทำให้งานของเรามีคุณภาพมากขึ้น 💯 ✅ หลักการเลือกใช้เครื่องมือช่างพื้นฐาน เลือกให้เหมาะสมกับงาน: ใช้เครื่องมือที่ออกแบบมาสำหรับงานนั้นๆ โดยเฉพาะ ขนาดที่เหมาะสม: เลือกขนาดที่พอดีกับชิ้นงาน คุณภาพของเครื่องมือ: ควรเลือกเครื่องมือที่มีคุณภาพดีในราคาที่สมเหตุสมผล ความปลอดภัย: ตรวจสอบว่ามีระบบความปลอดภัยที่เพียงพอ ความคุ้นเคย: ใช้เครื่องมือที่เรามีทักษะเพียงพอจะใช้งาน การจัดเก็บเครื่องมืออย่างเป็นระเบียบช่วยให้ใช้งานได้สะดวกและปลอดภัย 🔧 🛠️ การดูแลรักษาอุปกรณ์และเครื่องมือช่าง ทำความสะอาดเครื่องมือหลังใช้งานทุกครั้ง จัดเก็บในที่แห้งและเหมาะสม หลีกเลี่ยงการวางเครื่องมือซ้อนกันซึ่งอาจทำให้คมมีดเสียหาย ตรวจสอบสภาพเป็นประจำและซ่อมแซมเมื่อพบความเสียหาย หล่อลื่นชิ้นส่วนที่เคลื่อนไหวตามคำแนะนำของผู้ผลิต สำหรับเครื่องมือไฟฟ้า ตรวจสอบสภาพสายไฟและปลั๊กต่อ 🤔 สิ่งใดต่อไปนี้ไม่ควรทำเมื่อดูแลรักษาเครื่องมือช่าง? 1. ทำความสะอาดหลังใช้งาน 2. จัดเก็บในที่แห้ง 3. วางเครื่องมือซ้อนกันเพื่อประหยัดพื้นที่ 4. ตรวจสอบสภาพเป็นประจำ ถูกต้องค่ะ! 👏 การวางเครื่องมือซ้อนกันอาจทำให้คมมีดหรือส่วนสำคัญเสียหาย โอ๊ย! ยังไม่ถูกนะ 😅 ลองคิดดูใหม่ว่าสิ่งไหนอาจทำให้เครื่องมือเสียหายได้ 🎯 สรุปบทเรียน ในบทเรียนนี้เราได้เรียนรู้เกี่ยวกับ: วิธีการป้องกันอันตรายจากการใช้เครื่องมือต่างๆ การเลือกใช้วัสดุอุปกรณ์และการทดสอบชิ้นงาน หลักการดูแลรักษาเครื่องมือช่างพื้นฐาน หวังว่าน้องๆ จะนำความรู้เหล่านี้ไปใช้ในการสร้างชิ้นงานอย่างปลอดภัยและมีประสิทธิภาพนะคะ 😊 ⏱️ เวลาโดยประมาณสำหรับส่วนนี้: 20 นาที 👈 ย้อนกลับ เสร็จสิ้นบทเรียน 🎓 🎉 ยินดีด้วย! คุณสำเร็จบทเรียนแล้ว 👏 ได้สำเร็จบทเรียน &#8220;การป้องกันอันตรายจากการใช้เครื่องมือในการสร้างชิ้นงาน และการสร้างชิ้นงานด้วยกลไก ไฟฟ้า และอิเล็กทรอนิกส์&#8221; คุณทำได้ดีมาก! 👍 📋 ข้อมูลผู้เรียน ชื่อ: ชั้น: เลขที่: 💡 ความรู้ที่ได้รับจากบทเรียน เทคนิคความปลอดภัยในการใช้เครื่องมือต่างๆ กระบวนการสร้างและทดสอบชิ้นงานอย่างเป็นระบบ วิธีการดูแลรักษาเครื่องมือให้ใช้งานได้นาน ขอบคุณที่ตั้งใจเรียนจนจบบทเรียนนะคะ 😊 เริ่มบทเรียนใหม่ 🔄</p>
<p>The post <a href="https://www.kroochut.com/personal-protective-creative-project/">บทเรียนออนไลน์การป้องกันอันตรายจากการใช้เครื่องมือในการสร้างชิ้นงานฯ</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>การป้องกันอันตรายและการสร้างชิ้นงาน | ม.3</title>
    <style>
        /* CSS Styles */
        :root {
            --primary-color: #4a6fa5;
            --secondary-color: #ff9a3c;
            --accent-color: #ff6b6b;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --success-color: #6bcb77;
        }
        
        * {
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            margin: 0;
            padding: 0;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-top: 30px;
            margin-bottom: 30px;
        }
        
        h1, h2, h3 {
            color: var(--primary-color);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.2rem;
            color: var(--primary-color);
            position: relative;
            padding-bottom: 15px;
        }
        
        h1:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background-color: var(--secondary-color);
            border-radius: 2px;
        }
        
        h2 {
            font-size: 1.8rem;
            margin-top: 30px;
            border-left: 5px solid var(--secondary-color);
            padding-left: 15px;
        }
        
        h3 {
            font-size: 1.4rem;
            color: var(--accent-color);
        }
        
        .page {
            display: none;
            animation: fadeIn 0.5s ease-in-out;
        }
        
        .page.active {
            display: block;
        }
        
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
            text-decoration: none;
            margin: 10px 5px;
        }
        
        .btn:hover {
            background-color: #3a5a8f;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .btn-secondary {
            background-color: var(--secondary-color);
        }
        
        .btn-secondary:hover {
            background-color: #e68a2e;
        }
        
        .btn-accent {
            background-color: var(--accent-color);
        }
        
        .btn-accent:hover {
            background-color: #e05555;
        }
        
        .navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--dark-color);
        }
        
        input, select, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            transition: border 0.3s;
        }
        
        input:focus, select:focus, textarea:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
        }
        
        .progress-container {
            width: 100%;
            background-color: #e9ecef;
            border-radius: 10px;
            margin: 20px 0 40px;
            height: 15px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
            width: 0%;
            transition: width 0.5s ease;
            border-radius: 10px;
        }
        
        .content-box {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            border-left: 4px solid var(--primary-color);
        }
        
        .content-box.warning {
            background-color: #fff3cd;
            border-left-color: #ffc107;
        }
        
        .content-box.success {
            background-color: #d4edda;
            border-left-color: #28a745;
        }
        
        .content-box.info {
            background-color: #d1ecf1;
            border-left-color: #17a2b8;
        }
        
        .quiz {
            background-color: #f0f7ff;
            border-radius: 10px;
            padding: 20px;
            margin: 25px 0;
        }
        
        .quiz-question {
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--primary-color);
        }
        
        .quiz-options {
            margin-left: 20px;
        }
        
        .quiz-option {
            margin-bottom: 10px;
            cursor: pointer;
            padding: 10px;
            border-radius: 5px;
            transition: all 0.2s;
        }
        
        .quiz-option:hover {
            background-color: rgba(74, 111, 165, 0.1);
        }
        
        .quiz-option.selected {
            background-color: rgba(74, 111, 165, 0.2);
            font-weight: 600;
        }
        
        .feedback {
            display: none;
            padding: 15px;
            margin-top: 15px;
            border-radius: 5px;
            animation: fadeIn 0.5s;
        }
        
        .feedback.correct {
            background-color: rgba(107, 203, 119, 0.2);
            color: #2a6e35;
        }
        
        .feedback.incorrect {
            background-color: rgba(255, 107, 107, 0.2);
            color: #8a2a2a;
        }
        
        .image-container {
            text-align: center;
            margin: 25px 0;
        }
        
        .image-container img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .caption {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 8px;
            text-align: center;
        }
        
        .icon {
            font-size: 1.5rem;
            margin-right: 10px;
            vertical-align: middle;
        }
        
        .emoji {
            font-size: 1.2rem;
            margin: 0 5px;
        }
        
        .checklist {
            list-style-type: none;
            padding-left: 0;
        }
        
        .checklist li {
            padding: 8px 0 8px 35px;
            position: relative;
            margin-bottom: 5px;
        }
        
        .checklist li:before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 25px;
            height: 25px;
            background-color: var(--success-color);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .tool-card {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
        }
        
        .tool-icon {
            font-size: 2rem;
            margin-right: 15px;
            color: var(--primary-color);
            min-width: 50px;
            text-align: center;
        }
        
        .tool-content {
            flex: 1;
        }
        
        .tool-name {
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--dark-color);
        }
        
        .tool-desc {
            color: #6c757d;
            font-size: 0.9rem;
        }
        
        .time-indicator {
            text-align: center;
            font-size: 0.9rem;
            color: #6c757d;
            margin: 20px 0;
        }
        
        .time-indicator span {
            background-color: var(--light-color);
            padding: 5px 10px;
            border-radius: 20px;
            display: inline-block;
        }
        
        @media (max-width: 768px) {
            .container {
                margin: 10px;
                padding: 15px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            h2 {
                font-size: 1.5rem;
            }
            
            .btn {
                padding: 8px 15px;
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Progress Bar -->
        <div class="progress-container">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        
        <!-- Page 1: Introduction -->
        <div class="page active" id="page1">
            <h1><span class="emoji">👋</span> ยินดีต้อนรับสู่บทเรียนออนไลน์</h1>
            <p>สวัสดีน้องๆ ม.3 ทุกคน! <span class="emoji">😊</span> วันนี้เราจะมาเรียนรู้เรื่อง <strong>&#8220;การป้องกันอันตรายจากการใช้เครื่องมือในการสร้างชิ้นงาน และการสร้างชิ้นงานด้วยกลไก ไฟฟ้า และอิเล็กทรอนิกส์&#8221;</strong> กันนะคะ</p>
            
            <div class="image-container">
                <img decoding="async" src="https://www.siamtech.ac.th/wp-content/uploads/2019/06/417703550_912635594120754_7207262290056869708_n.jpg" alt="นักเรียนกำลังทำงานช่าง">
                <div class="caption">การเรียนรู้การใช้เครื่องมืออย่างปลอดภัยเป็นสิ่งสำคัญ <span class="emoji">🔧</span></div>
            </div>
            
            <div class="content-box info">
                <h3><span class="emoji">ℹ️</span> ข้อมูลบทเรียน</h3>
                <p>บทเรียนนี้จะใช้เวลาประมาณ <strong>60 นาที</strong> และประกอบด้วย 4 ส่วนหลัก:</p>
                <ol>
                    <li>แนะนำบทเรียนและกรอกข้อมูลส่วนตัว</li>
                    <li>การป้องกันอันตรายจากการใช้เครื่องมือ</li>
                    <li>การใช้วัสดุอุปกรณ์และการทดสอบชิ้นงาน</li>
                    <li>การเลือกใช้และดูแลรักษาอุปกรณ์</li>
                </ol>
            </div>
            
            <div class="content-box">
                <h3><span class="emoji">📝</span> กรุณากรอกข้อมูลส่วนตัว</h3>
                <form id="studentForm">
                    <div class="form-group">
                        <label for="name">ชื่อ-นามสกุล</label>
                        <input type="text" id="name" required>
                    </div>
                    <div class="form-group">
                        <label for="class">ระดับชั้น</label>
                        <select id="class" required>
                            <option value="">&#8212; เลือกระดับชั้น &#8212;</option>
                            <option value="ม.3/1">ม.3/1</option>
                            <option value="ม.3/2">ม.3/2</option>
                            <option value="ม.3/3">ม.3/3</option>
                            <option value="ม.3/4">ม.3/4</option>
                            <option value="ม.3/5">ม.3/5</option>
                            <option value="ม.3/6">ม.3/6</option>
  <option value="ม.3/7">ม.3/7</option>
                            <option value="ม.3/8">ม.3/8</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="number">เลขที่</label>
                        <input type="number" id="number" min="1" max="60" required>
                    </div>
                </form>
            </div>
            
            <div class="time-indicator">
                <span><span class="emoji">⏱️</span> เวลาโดยประมาณสำหรับส่วนนี้: 5 นาที</span>
            </div>
            
            <div class="navigation">
                <button class="btn btn-secondary" id="nextBtn1">ต่อไป <span class="emoji">👉</span></button>
            </div>
        </div>
        
        <!-- Page 2: Safety Precautions -->
        <div class="page" id="page2">
            <h1><span class="emoji">⚠️</span> การป้องกันอันตรายจากการใช้เครื่องมือ</h1>
            
            <div class="content-box warning">
                <h3><span class="emoji">🚨</span> ทำไมต้องเรียนรู้เรื่องความปลอดภัย?</h3>
                <p>การทำงานกับเครื่องมือช่างทั้งกลไก ไฟฟ้า และอิเล็กทรอนิกส์ มีความเสี่ยงต่ออันตรายต่างๆ เช่น บาดเจ็บจากของมีคม ไฟช็อต หรืออุบัติเหตุจากการใช้งานผิดวิธี การเรียนรู้วิธีป้องกันจะช่วยให้เราทำงานได้อย่างปลอดภัยและมีประสิทธิภาพ <span class="emoji">👍</span></p>
            </div>
            
            <h2><span class="emoji">🔧</span> การป้องกันอันตรายจากเครื่องมือกล</h2>
            
            <div class="checklist">
                <li>สวมใส่อุปกรณ์ป้องกันส่วนบุคคล (PPE) เช่น แว่นตา ถุงมือ หมวกนิรภัย</li>
                <li>ตรวจสอบสภาพเครื่องมือก่อนใช้งานทุกครั้ง</li>
                <li>ไม่ใช้เครื่องมือที่ชำรุดหรือมีสภาพไม่ปลอดภัย</li>
                <li>จัดเก็บเครื่องมือให้เป็นระเบียบหลังใช้งาน</li>
                <li>ไม่เล่นหรือหยอกล้อขณะใช้เครื่องมือ</li>
            </div>
            
            <div class="image-container">
                <img decoding="async" src="https://inwfile.com/s-fo/0b9ipg.jpg" alt="อุปกรณ์ป้องกันส่วนบุคคล">
                <div class="caption">อุปกรณ์ป้องกันส่วนบุคคล (PPE) ช่วยลดความเสี่ยงในการทำงาน <span class="emoji">👷</span></div>
            </div>
            
            <h2><span class="emoji">⚡</span> การป้องกันอันตรายจากไฟฟ้าและอิเล็กทรอนิกส์</h2>
            
            <div class="content-box">
                <ul>
                    <li>ตรวจสอบสภาพสายไฟและอุปกรณ์ไฟฟ้าก่อนใช้งาน</li>
                    <li>ไม่ทำงานกับไฟฟ้าในที่ชื้นหรือมือเปียก</li>
                    <li>ใช้เครื่องมือที่มีฉนวนป้องกัน</li>
                    <li>รู้ตำแหน่งสวิตช์ตัดวงจรไฟฟ้าในห้องทำงาน</li>
                    <li>ไม่ซ่อมแซมอุปกรณ์ไฟฟ้าขณะที่ยังเสียบปลั๊กอยู่</li>
                </ul>
            </div>
            
            <div class="quiz">
                <div class="quiz-question"><span class="emoji">🤔</span> ถ้าน้องต้องตัดแผ่นไม้ด้วยเลื่อยไฟฟ้า อะไรคือสิ่งที่ควรทำมากที่สุด?</div>
                <div class="quiz-options">
                    <div class="quiz-option" data-correct="true">1. สวมแว่นตาและถุงมือป้องกัน</div>
                    <div class="quiz-option">2. ใช้ความเร็วสูงสุดเพื่อให้งานเสร็จเร็ว</div>
                    <div class="quiz-option">3. ให้เพื่อนยืนใกล้ๆ เพื่อคอยช่วยเหลือ</div>
                    <div class="quiz-option">4. ไม่ต้องตรวจสอบเครื่องเพราะเพิ่งใช้เมื่อวาน</div>
                </div>
                <div class="feedback correct">ถูกต้อง! <span class="emoji">🎉</span> การสวมใส่อุปกรณ์ป้องกันส่วนบุคคลเป็นสิ่งสำคัญที่สุดเมื่อใช้เครื่องมืออันตราย</div>
                <div class="feedback incorrect">ยังไม่ถูกต้องนะ <span class="emoji">😅</span> ลองคิดดูใหม่ว่าอะไรคือสิ่งที่ช่วยป้องกันอันตรายได้มากที่สุด</div>
            </div>
            
            <div class="time-indicator">
                <span><span class="emoji">⏱️</span> เวลาโดยประมาณสำหรับส่วนนี้: 15 นาที</span>
            </div>
            
            <div class="navigation">
                <button class="btn btn-secondary" id="prevBtn2"><span class="emoji">👈</span> ย้อนกลับ</button>
                <button class="btn" id="nextBtn2">ต่อไป <span class="emoji">👉</span></button>
            </div>
        </div>
        
        <!-- Page 3: Materials and Testing -->
        <div class="page" id="page3">
            <h1><span class="emoji">🛠️</span> การใช้วัสดุอุปกรณ์และการทดสอบชิ้นงาน</h1>
            
            <div class="content-box success">
                <h3><span class="emoji">💡</span> ความคิดสร้างสรรค์ + ความปลอดภัย = ผลงานคุณภาพ</h3>
                <p>การสร้างชิ้นงานที่ดีต้องอาศัยทั้งความคิดสร้างสรรค์และความรู้ในการใช้วัสดุอุปกรณ์อย่างถูกต้อง รวมถึงกระบวนการทดสอบที่เหมาะสม <span class="emoji">✨</span></p>
            </div>
            
            <h2><span class="emoji">📦</span> การเลือกใช้วัสดุและอุปกรณ์</h2>
            
            <div class="tool-card">
                <div class="tool-icon">🔌</div>
                <div class="tool-content">
                    <div class="tool-name">เครื่องมือวัดไฟฟ้า</div>
                    <div class="tool-desc">มัลติมิเตอร์, แอมป์มิเตอร์, โวลต์มิเตอร์ ใช้สำหรับวัดค่าต่างๆ ในวงจรไฟฟ้า</div>
                </div>
            </div>
            
            <div class="tool-card">
                <div class="tool-icon">🔨</div>
                <div class="tool-content">
                    <div class="tool-name">เครื่องมือช่างพื้นฐาน</div>
                    <div class="tool-desc">ค้อน, ไขควง, เลื่อย, ประแจ ใช้สำหรับงานประกอบชิ้นส่วนกลไก</div>
                </div>
            </div>
            
            <div class="tool-card">
                <div class="tool-icon">🧰</div>
                <div class="tool-content">
                    <div class="tool-name">เครื่องมืออิเล็กทรอนิกส์</div>
                    <div class="tool-desc">หัวแร้ง, ตะกั่วบัดกรี, คีมปากนกแก้ว ใช้สำหรับงานประกอบวงจร</div>
                </div>
            </div>
            
            <h2><span class="emoji">🔍</span> กระบวนการทดสอบแบบแยกส่วน</h2>
            
            <div class="content-box">
                <ol>
                    <li><strong>ทดสอบแต่ละส่วนก่อนประกอบ:</strong> ตรวจสอบการทำงานของแต่ละโมดูล</li>
                    <li><strong>บันทึกผลการทดสอบ:</strong> จดบันทึกค่าต่างๆ ที่วัดได้</li>
                    <li><strong>แก้ไขข้อบกพร่อง:</strong> หากพบปัญหาให้แก้ไขก่อนประกอบชิ้นส่วนต่อไป</li>
                    <li><strong>ทดสอบซ้ำ:</strong> หลังแก้ไขแล้วต้องทดสอบอีกครั้ง</li>
                </ol>
            </div>
            
            <div class="image-container">
                <img decoding="async" src="https://lh5.googleusercontent.com/ZzGwjODQ-Ga82xcanUtSo_P-ukwWAFLjMgG2kmvEGuFPHlOdkHSL0zmet0LYPf5TM0zX4darVbiPWToUdOc6va_CiTv-J1VoLZ42LCHGN-jtjE0oT9tdU7DzqylyQOUlUW-YMWI=s0" alt="การทดสอบวงจรอิเล็กทรอนิกส์">
                <div class="caption">การทดสอบวงจรอิเล็กทรอนิกส์อย่างเป็นระบบ <span class="emoji">🔬</span></div>
            </div>
            
            <h2><span class="emoji">🧩</span> การประกอบชิ้นงานและการทดสอบผล</h2>
            
            <div class="content-box">
                <ul>
                    <li>ประกอบชิ้นงานตามแผนที่ออกแบบไว้</li>
                    <li>ตรวจสอบความถูกต้องของทิศทางและตำแหน่งชิ้นส่วน</li>
                    <li>ทดสอบการทำงานหลังประกอบเสร็จ</li>
                    <li>วัดค่าต่างๆ เพื่อเปรียบเทียบกับค่าที่คาดหวัง</li>
                    <li>ปรับแต่งแก้ไขหากผลการทดสอบไม่เป็นไปตามต้องการ</li>
                </ul>
            </div>
            
            <div class="quiz">
                <div class="quiz-question"><span class="emoji">🤔</span> ในการสร้างชิ้นงานอิเล็กทรอนิกส์ ควรทำอะไรก่อนเป็นอันดับแรกเมื่อพบว่าวงจรไม่ทำงาน?</div>
                <div class="quiz-options">
                    <div class="quiz-option">1. เปลี่ยนชิ้นส่วนทั้งหมดใหม่</div>
                    <div class="quiz-option" data-correct="true">2. ทดสอบแต่ละส่วนเพื่อหาตำแหน่งที่ผิดพลาด</div>
                    <div class="quiz-option">3. ต่อไฟแรงขึ้นเพื่อให้วงจรทำงาน</div>
                    <div class="quiz-option">4. ทิ้งแล้วเริ่มทำใหม่ทั้งหมด</div>
                </div>
                <div class="feedback correct">เยี่ยมมาก! <span class="emoji">👍</span> การทดสอบแบบแยกส่วนช่วยให้เราหาจุดผิดพลาดได้อย่างมีประสิทธิภาพ</div>
                <div class="feedback incorrect">ยังไม่ใช่คำตอบที่ดีที่สุดนะ <span class="emoji">😉</span> ลองคิดหาวิธีที่เป็นระบบและประหยัดเวลามากกว่านี้</div>
            </div>
            
            <div class="time-indicator">
                <span><span class="emoji">⏱️</span> เวลาโดยประมาณสำหรับส่วนนี้: 20 นาที</span>
            </div>
            
            <div class="navigation">
                <button class="btn btn-secondary" id="prevBtn3"><span class="emoji">👈</span> ย้อนกลับ</button>
                <button class="btn" id="nextBtn3">ต่อไป <span class="emoji">👉</span></button>
            </div>
        </div>
        
        <!-- Page 4: Tool Maintenance -->
        <div class="page" id="page4">
            <h1><span class="emoji">🧰</span> การเลือกใช้และดูแลรักษาอุปกรณ์</h1>
            
            <div class="content-box info">
                <h3><span class="emoji">🌟</span> เครื่องมือดีมีชัยไปกว่าครึ่ง!</h3>
                <p>การเลือกใช้เครื่องมือที่เหมาะสมและการดูแลรักษาอย่างถูกต้องจะช่วยยืดอายุการใช้งานของเครื่องมือ และทำให้งานของเรามีคุณภาพมากขึ้น <span class="emoji">💯</span></p>
            </div>
            
            <h2><span class="emoji">✅</span> หลักการเลือกใช้เครื่องมือช่างพื้นฐาน</h2>
            
            <div class="content-box">
                <ul>
                    <li><strong>เลือกให้เหมาะสมกับงาน:</strong> ใช้เครื่องมือที่ออกแบบมาสำหรับงานนั้นๆ โดยเฉพาะ</li>
                    <li><strong>ขนาดที่เหมาะสม:</strong> เลือกขนาดที่พอดีกับชิ้นงาน</li>
                    <li><strong>คุณภาพของเครื่องมือ:</strong> ควรเลือกเครื่องมือที่มีคุณภาพดีในราคาที่สมเหตุสมผล</li>
                    <li><strong>ความปลอดภัย:</strong> ตรวจสอบว่ามีระบบความปลอดภัยที่เพียงพอ</li>
                    <li><strong>ความคุ้นเคย:</strong> ใช้เครื่องมือที่เรามีทักษะเพียงพอจะใช้งาน</li>
                </ul>
            </div>
            
            <div class="image-container">
                <img decoding="async" src="https://2.bp.blogspot.com/-Xcok41nCkLw/W21lKZZEIbI/AAAAAAAAOaY/o5jNN29aLFgcxpgiXG-AVx_ObupoP6ptQCLcBGAs/s640/%25E0%25B9%2580%25E0%25B8%2584%25E0%25B8%25A3%25E0%25B8%25B7%25E0%25B9%2588%25E0%25B8%25AD%25E0%25B8%2587%25E0%25B8%25A1%25E0%25B8%25B7%25E0%25B8%25AD%25E0%25B8%258A%25E0%25B9%2588%25E0%25B8%25B2%25E0%25B8%2587.jpg" alt="การจัดเก็บเครื่องมืออย่างเป็นระเบียบ">
                <div class="caption">การจัดเก็บเครื่องมืออย่างเป็นระเบียบช่วยให้ใช้งานได้สะดวกและปลอดภัย <span class="emoji">🔧</span></div>
            </div>
            
            <h2><span class="emoji">🛠️</span> การดูแลรักษาอุปกรณ์และเครื่องมือช่าง</h2>
            
            <div class="checklist">
                <li>ทำความสะอาดเครื่องมือหลังใช้งานทุกครั้ง</li>
                <li>จัดเก็บในที่แห้งและเหมาะสม</li>
                <li>หลีกเลี่ยงการวางเครื่องมือซ้อนกันซึ่งอาจทำให้คมมีดเสียหาย</li>
                <li>ตรวจสอบสภาพเป็นประจำและซ่อมแซมเมื่อพบความเสียหาย</li>
                <li>หล่อลื่นชิ้นส่วนที่เคลื่อนไหวตามคำแนะนำของผู้ผลิต</li>
                <li>สำหรับเครื่องมือไฟฟ้า ตรวจสอบสภาพสายไฟและปลั๊กต่อ</li>
            </div>
            
            <div class="quiz">
                <div class="quiz-question"><span class="emoji">🤔</span> สิ่งใดต่อไปนี้ไม่ควรทำเมื่อดูแลรักษาเครื่องมือช่าง?</div>
                <div class="quiz-options">
                    <div class="quiz-option">1. ทำความสะอาดหลังใช้งาน</div>
                    <div class="quiz-option">2. จัดเก็บในที่แห้ง</div>
                    <div class="quiz-option" data-correct="true">3. วางเครื่องมือซ้อนกันเพื่อประหยัดพื้นที่</div>
                    <div class="quiz-option">4. ตรวจสอบสภาพเป็นประจำ</div>
                </div>
                <div class="feedback correct">ถูกต้องค่ะ! <span class="emoji">👏</span> การวางเครื่องมือซ้อนกันอาจทำให้คมมีดหรือส่วนสำคัญเสียหาย</div>
                <div class="feedback incorrect">โอ๊ย! ยังไม่ถูกนะ <span class="emoji">😅</span> ลองคิดดูใหม่ว่าสิ่งไหนอาจทำให้เครื่องมือเสียหายได้</div>
            </div>
            
            <div class="content-box success">
                <h3><span class="emoji">🎯</span> สรุปบทเรียน</h3>
                <p>ในบทเรียนนี้เราได้เรียนรู้เกี่ยวกับ:</p>
                <ul>
                    <li>วิธีการป้องกันอันตรายจากการใช้เครื่องมือต่างๆ</li>
                    <li>การเลือกใช้วัสดุอุปกรณ์และการทดสอบชิ้นงาน</li>
                    <li>หลักการดูแลรักษาเครื่องมือช่างพื้นฐาน</li>
                </ul>
                <p>หวังว่าน้องๆ จะนำความรู้เหล่านี้ไปใช้ในการสร้างชิ้นงานอย่างปลอดภัยและมีประสิทธิภาพนะคะ <span class="emoji">😊</span></p>
            </div>
            
            <div class="time-indicator">
                <span><span class="emoji">⏱️</span> เวลาโดยประมาณสำหรับส่วนนี้: 20 นาที</span>
            </div>
            
            <div class="navigation">
                <button class="btn btn-secondary" id="prevBtn4"><span class="emoji">👈</span> ย้อนกลับ</button>
                <button class="btn btn-accent" id="finishBtn">เสร็จสิ้นบทเรียน <span class="emoji">🎓</span></button>
            </div>
        </div>
        
        <!-- Completion Page -->
        <div class="page" id="completionPage">
            <h1><span class="emoji">🎉</span> ยินดีด้วย! คุณสำเร็จบทเรียนแล้ว</h1>
            
            <div class="content-box" style="text-align: center;">
                <p style="font-size: 1.2rem;"><span class="emoji">👏</span> <strong id="studentName"></strong> ได้สำเร็จบทเรียน</p>
                <p>&#8220;การป้องกันอันตรายจากการใช้เครื่องมือในการสร้างชิ้นงาน และการสร้างชิ้นงานด้วยกลไก ไฟฟ้า และอิเล็กทรอนิกส์&#8221;</p>
                
                <div class="image-container">
                    <img decoding="async" src="https://i.pinimg.com/originals/f3/70/e9/f370e9316193788d23092366a211e390.gif" alt="นักเรียนยิ้ม">
                    <div class="caption">คุณทำได้ดีมาก! <span class="emoji">👍</span></div>
                </div>
                
                <div style="margin: 30px 0;">
                    <h3><span class="emoji">📋</span> ข้อมูลผู้เรียน</h3>
                    <p>ชื่อ: <strong id="displayName"></strong></p>
                    <p>ชั้น: <strong id="displayClass"></strong></p>
                    <p>เลขที่: <strong id="displayNumber"></strong></p>
                </div>
                
                <div class="content-box success" style="max-width: 600px; margin: 0 auto;">
                    <h3><span class="emoji">💡</span> ความรู้ที่ได้รับจากบทเรียน</h3>
                    <ul style="text-align: left;">
                        <li>เทคนิคความปลอดภัยในการใช้เครื่องมือต่างๆ</li>
                        <li>กระบวนการสร้างและทดสอบชิ้นงานอย่างเป็นระบบ</li>
                        <li>วิธีการดูแลรักษาเครื่องมือให้ใช้งานได้นาน</li>
                    </ul>
                </div>
                
                <p style="margin-top: 30px;">ขอบคุณที่ตั้งใจเรียนจนจบบทเรียนนะคะ <span class="emoji">😊</span></p>
            </div>
            
            <div class="navigation" style="justify-content: center;">
                <button class="btn" id="restartBtn">เริ่มบทเรียนใหม่ <span class="emoji">🔄</span></button>
            </div>
        </div>
    </div>

    <script>
        // JavaScript for interactive e-learning
        document.addEventListener('DOMContentLoaded', function() {
            // Page navigation variables
            const pages = document.querySelectorAll('.page');
            const progressBar = document.getElementById('progressBar');
            let currentPage = 0;
            
            // Student information variables
            const studentForm = document.getElementById('studentForm');
            const studentName = document.getElementById('studentName');
            const displayName = document.getElementById('displayName');
            const displayClass = document.getElementById('displayClass');
            const displayNumber = document.getElementById('displayNumber');
            
            // Navigation buttons
            const nextBtn1 = document.getElementById('nextBtn1');
            const nextBtn2 = document.getElementById('nextBtn2');
            const nextBtn3 = document.getElementById('nextBtn3');
            const prevBtn2 = document.getElementById('prevBtn2');
            const prevBtn3 = document.getElementById('prevBtn3');
            const prevBtn4 = document.getElementById('prevBtn4');
            const finishBtn = document.getElementById('finishBtn');
            const restartBtn = document.getElementById('restartBtn');
            
            // Quiz functionality
            const quizOptions = document.querySelectorAll('.quiz-option');
            
            // Initialize the first page
            showPage(currentPage);
            
            // Navigation functions
            function showPage(pageIndex) {
                pages.forEach((page, index) => {
                    if (index === pageIndex) {
                        page.classList.add('active');
                    } else {
                        page.classList.remove('active');
                    }
                });
                
                // Update progress bar
                const progress = ((pageIndex + 1) / pages.length) * 100;
                progressBar.style.width = `${progress}%`;
                
                // Scroll to top
                window.scrollTo(0, 0);
            }
            
            function nextPage() {
                if (currentPage === 0 && !validateForm()) {
                    return;
                }
                
                if (currentPage < pages.length - 2) { // -2 because we have completion page
                    currentPage++;
                    showPage(currentPage);
                }
            }
            
            function prevPage() {
                if (currentPage > 0) {
                    currentPage--;
                    showPage(currentPage);
                }
            }
            
            function validateForm() {
                const name = document.getElementById('name').value.trim();
                const classSelect = document.getElementById('class').value;
                const number = document.getElementById('number').value;
                
                if (!name || !classSelect || !number) {
                    alert('กรุณากรอกข้อมูลให้ครบทุกช่องค่ะ');
                    return false;
                }
                
                return true;
            }
            
            function saveStudentInfo() {
                const name = document.getElementById('name').value.trim();
                const classSelect = document.getElementById('class').value;
                const number = document.getElementById('number').value;
                
                studentName.textContent = name;
                displayName.textContent = name;
                displayClass.textContent = classSelect;
                displayNumber.textContent = number;
            }
            
            function finishLesson() {
                saveStudentInfo();
                currentPage = pages.length - 1; // Go to completion page
                showPage(currentPage);
            }
            
            function restartLesson() {
                currentPage = 0;
                showPage(currentPage);
                studentForm.reset();
            }
            
            // Quiz functionality
            quizOptions.forEach(option => {
                option.addEventListener('click', function() {
                    const quizContainer = this.closest('.quiz');
                    const feedbacks = quizContainer.querySelectorAll('.feedback');
                    
                    // Remove selected class from all options
                    quizContainer.querySelectorAll('.quiz-option').forEach(opt => {
                        opt.classList.remove('selected');
                    });
                    
                    // Add selected class to clicked option
                    this.classList.add('selected');
                    
                    // Show appropriate feedback
                    feedbacks.forEach(feedback => {
                        feedback.style.display = 'none';
                    });
                    
                    if (this.dataset.correct === 'true') {
                        quizContainer.querySelector('.feedback.correct').style.display = 'block';
                    } else {
                        quizContainer.querySelector('.feedback.incorrect').style.display = 'block';
                    }
                });
            });
            
            // Event listeners
            nextBtn1.addEventListener('click', nextPage);
            nextBtn2.addEventListener('click', nextPage);
            nextBtn3.addEventListener('click', nextPage);
            prevBtn2.addEventListener('click', prevPage);
            prevBtn3.addEventListener('click', prevPage);
            prevBtn4.addEventListener('click', prevPage);
            finishBtn.addEventListener('click', finishLesson);
            restartBtn.addEventListener('click', restartLesson);
            
            // Allow Enter key to submit form on first page
            studentForm.addEventListener('keypress', function(e) {
                if (e.key === 'Enter' && currentPage === 0) {
                    e.preventDefault();
                    nextPage();
                }
            });
        });
    </script>
</body>
</html>
<p>The post <a href="https://www.kroochut.com/personal-protective-creative-project/">บทเรียนออนไลน์การป้องกันอันตรายจากการใช้เครื่องมือในการสร้างชิ้นงานฯ</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>บทเรียนออนไลน์ E-commerce คืออะไร?</title>
		<link>https://www.kroochut.com/e-commerce/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Fri, 13 Jun 2025 04:20:37 +0000</pubDate>
				<category><![CDATA[Information Technology]]></category>
		<category><![CDATA[E-Commerce]]></category>
		<category><![CDATA[e-learning]]></category>
		<category><![CDATA[การค้าออนไลน์]]></category>
		<category><![CDATA[ขายของออนไลน์]]></category>
		<category><![CDATA[ความหมาย E-commerce]]></category>
		<category><![CDATA[ช้อปปิ้งออนไลน์]]></category>
		<category><![CDATA[ตัวอย่าง E-commerce]]></category>
		<category><![CDATA[บทเรียนออนไลน์]]></category>
		<category><![CDATA[ประโยชน์ E-commerce]]></category>
		<category><![CDATA[พาณิชย์อิเล็กทรอนิกส์]]></category>
		<category><![CDATA[ม.1]]></category>
		<category><![CDATA[ม.2]]></category>
		<category><![CDATA[ม.3]]></category>
		<category><![CDATA[อีคอมเมิร์ซ]]></category>
		<category><![CDATA[เทคโนโลยีดิจิทัล]]></category>
		<category><![CDATA[เปรียบเทียบซื้อขายออนไลน์]]></category>
		<category><![CDATA[แพลตฟอร์ม E-commerce]]></category>
		<guid isPermaLink="false">https://www.kroochut.com/?p=695</guid>

					<description><![CDATA[<p>E-commerce คืออะไร &#124; บทเรียนออนไลน์ 🛒 E-commerce คืออะไร? บทเรียนออนไลน์สำหรับนักเรียนชั้นมัธยมศึกษาปีที่ 3 หน้า 1 จาก 7 👋 แนะนำบทเรียน สวัสดีนักเรียนทุกคน! 😊 ในบทเรียนนี้เราจะมาเรียนรู้เกี่ยวกับ E-commerce หรือการพาณิชย์อิเล็กทรอนิกส์กัน 💡 รู้ไหมว่า&#8230; ทุกวันนี้คุณอาจใช้ E-commerce อยู่โดยที่ไม่รู้ตัวก็ได้นะ! เช่น การสั่งอาหารผ่านแอป หรือซื้อของออนไลน์ ก่อนเริ่มเรียน เราอยากรู้จักคุณมากขึ้นหน่อยค่ะ ชื่อ-นามสกุล: ระดับชั้น: &#8212; เลือกระดับชั้น &#8212;ม.3/1ม.3/2ม.3/3ม.3/4ม.3/5ม.3/6ม.3/7ม.3/8 เลขที่: ต่อไป 👉 📝 แบบทดสอบก่อนเรียน แบบทดสอบนี้มีทั้งหมด 10 ข้อ เป็นแบบปรนัยเลือกคำตอบที่ถูกต้องที่สุด วัตถุประสงค์: เพื่อวัดความรู้พื้นฐานของคุณเกี่ยวกับ E-commerce ก่อนเริ่มเรียน 🤔 ข้อแนะนำ ไม่ต้องกังวลหากตอบผิดนะคะ นี่คือแบบทดสอบก่อนเรียนเท่านั้น 😊 1. E-commerce คืออะไร? การซื้อขายสินค้าและบริการผ่านอินเทอร์เน็ต การซื้อขายสินค้าในตลาดนัด การโฆษณาสินค้าทางทีวี การซื้อขายหุ้นในตลาดหลักทรัพย์ 2. ข้อใดไม่ใช่ประโยชน์ของ E-commerce? สามารถซื้อขายได้ตลอดเวลา ลดค่าใช้จ่ายในการเดินทาง ต้องพบปะผู้ขายโดยตรง สามารถเปรียบเทียบราคาได้ง่าย 3. ข้อใดคือตัวอย่างของ E-commerce? การซื้อผักที่ตลาดสด การสั่งอาหารผ่านแอป Grab การซื้อของที่ห้างสรรพสินค้า การต่อรองราคาที่ร้านขายของมือสอง 4. ข้อใดคือความแตกต่างหลักระหว่างการซื้อขายแบบดั้งเดิมกับ E-commerce? E-commerce ต้องใช้เงินสดเท่านั้น E-commerce ไม่ต้องใช้เทคโนโลยี E-commerce สามารถทำธุรกรรมได้ทุกที่ทุกเวลา E-commerce จำกัดเฉพาะสินค้าเท่านั้น ไม่รวมบริการ 5. ข้อใดไม่ใช่รูปแบบของ E-commerce? B2B (Business to Business) B2C (Business to Consumer) C2C (Consumer to Consumer) F2F (Face to Face) 6. ข้อใดคือความเสี่ยงของ E-commerce? การถูกโจรกรรมข้อมูล สินค้าไม่ตรงตามที่โฆษณา ปัญหาการส่งสินค้า ถูกทุกข้อ 7. ข้อใดคือปัจจัยที่ทำให้ E-commerce เติบโตอย่างรวดเร็ว? การแพร่หลายของสมาร์ทโฟน การพัฒนาระบบการชำระเงินออนไลน์ การเปลี่ยนแปลงพฤติกรรมผู้บริโภค ถูกทุกข้อ 8. ข้อใดไม่ใช่แพลตฟอร์ม E-commerce ในประเทศไทย? Lazada Shopee Tesco Lotus JD Central 9. การชำระเงินแบบใดที่นิยมใช้ใน E-commerce? เงินสดเมื่อรับสินค้า (COD) บัตรเครดิต/เดบิต การโอนเงินผ่านธนาคารออนไลน์ ถูกทุกข้อ 10. ข้อใดคือแนวทางในการซื้อสินค้าออนไลน์อย่างปลอดภัย? ตรวจสอบความน่าเชื่อถือของร้านค้า อ่านรีวิวจากผู้ซื้อก่อน ใช้ช่องทางการชำระเงินที่ปลอดภัย ถูกทุกข้อ 👈 ย้อนกลับ ส่งคำตอบ 📤 📚 ความหมายและความสำคัญของ E-commerce 🔍 E-commerce คืออะไร? E-commerce (Electronic Commerce) หรือการพาณิชย์อิเล็กทรอนิกส์ หมายถึง การซื้อขายสินค้าและบริการผ่านระบบอิเล็กทรอนิกส์ โดยเฉพาะทางอินเทอร์เน็ต รวมถึงการโอนเงินและการแลกเปลี่ยนข้อมูลเพื่อสนับสนุนการทำธุรกรรมทางการค้า 💭 ลองคิดดู คุณเคยซื้ออะไรผ่านออนไลน์บ้างในเดือนที่ผ่านมา? สิ่งเหล่านั้นถือเป็น E-commerce ทั้งหมดหรือไม่? 🌟 ความสำคัญของ E-commerce E-commerce มีความสำคัญอย่างมากในยุคดิจิทัลเพราะ: เพิ่มความสะดวกสบาย: ซื้อขายได้ทุกที่ทุกเวลา ไม่ต้องเดินทาง ลดข้อจำกัดทางภูมิศาสตร์: สามารถซื้อสินค้าจากต่างประเทศได้ง่ายดาย ประหยัดเวลาและค่าใช้จ่าย: ไม่ต้องเสียเวลาเดินทางไปร้านค้า เพิ่มช่องทางการตลาด: ธุรกิจขนาดเล็กสามารถเข้าถึงลูกค้าได้ทั่วโลก ข้อมูลที่แม่นยำ: สามารถวิเคราะห์พฤติกรรมผู้บริโภคได้อย่างมีประสิทธิภาพ 🤯 รู้หรือไม่? ในปี 2023 มูลค่าตลาด E-commerce ทั่วโลกสูงถึง 6.3 ล้านล้านดอลลาร์สหรัฐ และคาดว่าจะเติบโตขึ้นเรื่อยๆ! 👈 ย้อนกลับ ต่อไป 👉 🔄 ความแตกต่างระหว่างการซื้อขายแบบดั้งเดิมกับออนไลน์ มาดูความแตกต่างระหว่างการซื้อขายแบบดั้งเดิม (Traditional Commerce) กับการซื้อขายออนไลน์ (E-commerce) กันค่ะ ลักษณะ การซื้อขายแบบดั้งเดิม E-commerce เวลา ทำการในช่วงเวลาทำการของร้าน ทำการได้ตลอด 24 ชั่วโมง สถานที่ ต้องไปที่ร้านค้าโดยตรง ซื้อขายได้จากทุกที่ที่มีอินเทอร์เน็ต การติดต่อ พบปะผู้ขายโดยตรง ติดต่อผ่านช่องทางออนไลน์ การชำระเงิน ใช้เงินสดเป็นหลัก ใช้การชำระเงินอิเล็กทรอนิกส์ การตรวจสอบสินค้า ตรวจสอบสินค้าได้ก่อนซื้อ ดูจากภาพและคำบรรยายเท่านั้น การจัดส่ง นำสินค้ากลับได้ทันที ต้องรอการจัดส่ง 🧐 วิเคราะห์เปรียบเทียบ จากตารางข้างต้น คุณคิดว่าการซื้อขายแบบใดเหมาะสมกับสินค้าประเภทใดบ้าง? เพราะเหตุใด? ⚖️ ข้อดี-ข้อเสียของ E-commerce ข้อดี 👍 สะดวก รวดเร็ว ประหยัดเวลาและค่าใช้จ่าย มีตัวเลือกมากมาย สามารถเปรียบเทียบราคาได้ง่าย เข้าถึงลูกค้าได้ทั่วโลก ข้อเสีย 👎 ไม่สามารถตรวจสอบสินค้าจริงก่อนซื้อ ความเสี่ยงด้านความปลอดภัยของข้อมูล ปัญหาการส่งสินค้าไม่ตรงเวลา สินค้าไม่ตรงตามที่โฆษณา การคืนสินค้ายุ่งยาก 👈 ย้อนกลับ ต่อไป 👉 🛍️ ตัวอย่าง E-commerce ในชีวิตประจำวัน E-commerce อยู่รอบตัวเราในชีวิตประจำวันมากกว่าที่คิด! มาดูตัวอย่างกันค่ะ 📱 ตัวอย่างแพลตฟอร์ม E-commerce ตลาดกลางออนไลน์: Shopee, Lazada, JD Central บริการอาหาร: GrabFood, FoodPanda, LINE Man บริการเดินทาง: Agoda, Booking.com, Airbnb บริการสตรีมมิ่ง: Netflix, Spotify, Disney+ บริการขนส่ง: Lalamove, Kerry Express 🤔 ลองนึกดู ใน 1 วัน คุณใช้บริการ E-commerce กี่ครั้ง? เริ่มตั้งแต่ตื่นนอนจนเข้านอน 🔮 แนวโน้มของ E-commerce ในอนาคต เทคโนโลยีเหล่านี้จะเปลี่ยนโฉม E-commerce ในอนาคต: AI และ Chatbots ระบบปัญญาประดิษฐ์ช่วยแนะนำสินค้าและตอบคำถามลูกค้าแบบอัตโนมัติ Augmented Reality เทคโนโลยี AR ช่วยให้ลองสินค้าก่อนซื้อ เช่น ลองรองเท้าเสมือนจริง Voice Commerce สั่งซื้อสินค้าผ่านเสียงด้วยอุปกรณ์อัจฉริยะต่างๆ Social Commerce ซื้อขายสินค้าผ่านโซเชียลมีเดียโดยตรง 💬 แลกเปลี่ยนความคิดเห็น คุณคิดว่าเทคโนโลยีใดจะเปลี่ยนแปลง E-commerce มากที่สุดในอีก 5 ปีข้างหน้า? เพราะเหตุใด? 👈 ย้อนกลับ ต่อไป 👉 📝 แบบทดสอบหลังเรียน แบบทดสอบนี้มีทั้งหมด 10 ข้อ เป็นแบบปรนัยเลือกคำตอบที่ถูกต้องที่สุด วัตถุประสงค์: เพื่อวัดความรู้ความเข้าใจของคุณเกี่ยวกับ E-commerce หลังเรียน 🎯 ข้อแนะนำ พยายามทำความเข้าใจคำถามและเลือกคำตอบที่คิดว่าถูกต้องที่สุดนะคะ 😊 1. E-commerce แตกต่างจาก Traditional Commerce อย่างไร? ต้องใช้เงินสดเท่านั้น ต้องพบปะผู้ขายโดยตรง สามารถทำธุรกรรมได้ทุกที่ทุกเวลา จำกัดเฉพาะสินค้าเท่านั้น 2. ข้อใดคือประโยชน์หลักของ E-commerce? ลดค่าใช้จ่ายในการเดินทาง ต้องพบปะผู้ขายโดยตรง ทำการค้าได้เฉพาะในเวลาทำการ จำกัดเฉพาะพื้นที่ใกล้เคียง 3. ข้อใดไม่ใช่ตัวอย่างของ E-commerce? การซื้อของในตลาดนัด การสั่งอาหารผ่านแอป Grab การจองโรงแรมผ่าน Agoda การซื้อหนังสือจากเว็บไซต์ 4. ข้อใดคือความเสี่ยงของ E-commerce? การถูกโจรกรรมข้อมูล สินค้าไม่ตรงตามที่โฆษณา ปัญหาการส่งสินค้า ถูกทุกข้อ 5. ข้อใดคือรูปแบบของ E-commerce? B2B (Business to Business) B2C (Business to Consumer) C2C (Consumer to Consumer) ถูกทุกข้อ 6. ข้อใดคือปัจจัยที่ทำให้ E-commerce เติบโตอย่างรวดเร็ว? การแพร่หลายของสมาร์ทโฟน การพัฒนาระบบการชำระเงินออนไลน์ การเปลี่ยนแปลงพฤติกรรมผู้บริโภค ถูกทุกข้อ 7. ข้อใดคือแพลตฟอร์ม E-commerce ในประเทศไทย? Lazada Shopee JD Central ถูกทุกข้อ 8. การชำระเงินแบบใดที่นิยมใช้ใน E-commerce? เงินสดเมื่อรับสินค้า (COD) บัตรเครดิต/เดบิต การโอนเงินผ่านธนาคารออนไลน์ ถูกทุกข้อ 9. ข้อใดคือแนวทางในการซื้อสินค้าออนไลน์อย่างปลอดภัย? ตรวจสอบความน่าเชื่อถือของร้านค้า อ่านรีวิวจากผู้ซื้อก่อน ใช้ช่องทางการชำระเงินที่ปลอดภัย ถูกทุกข้อ 10. เทคโนโลยีใดที่น่าจะมีบทบาทสำคัญใน E-commerce ในอนาคต? Augmented Reality (AR) ปัญญาประดิษฐ์ (AI) Voice Commerce ถูกทุกข้อ 👈 ย้อนกลับ ส่งคำตอบ 📤 🏆 สรุปผลการเรียนรู้ 👤 ข้อมูลผู้เรียน ชื่อ-นามสกุล: ระดับชั้น: เลขที่: 📊 ผลการเรียน คะแนนก่อนเรียน 0 คะแนนเต็ม 10 คะแนนหลังเรียน 0 คะแนนเต็ม 10 🎯 สรุปความเข้าใจ จากผลการเรียน แสดงว่าคุณมีความเข้าใจเกี่ยวกับ E-commerce ดังนี้: ความหมายและความสำคัญของ E-commerce ความแตกต่างระหว่างการซื้อขายแบบดั้งเดิมกับออนไลน์ ตัวอย่าง E-commerce ในชีวิตประจำวัน ประโยชน์และความเสี่ยงของ E-commerce 💡 คำแนะนำเพิ่มเติม 🤔 ลองทบทวน คุณสามารถนำความรู้เกี่ยวกับ E-commerce ไปใช้ในชีวิตประจำวันอย่างไรได้บ้าง? 👈 ย้อนกลับ เริ่มบทเรียนใหม่ 🔄</p>
<p>The post <a href="https://www.kroochut.com/e-commerce/">บทเรียนออนไลน์ E-commerce คืออะไร?</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-commerce คืออะไร | บทเรียนออนไลน์</title>
    <style>
        /* Reset and Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        /* Header Styles */
        .header {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 16px;
            opacity: 0.9;
        }
        
        /* Page Container */
        .page {
            background-color: white;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            display: none;
        }
        
        .page.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Content Styles */
        h2 {
            color: #5d5fef;
            margin-bottom: 15px;
            font-size: 22px;
            border-bottom: 2px solid #eee;
            padding-bottom: 8px;
        }
        
        p {
            margin-bottom: 15px;
            font-size: 16px;
        }
        
        .emoji {
            font-size: 24px;
            margin-right: 8px;
            vertical-align: middle;
        }
        
        /* Image Styles */
        .content-img {
            width: 100%;
            max-height: 300px;
            object-fit: cover;
            border-radius: 8px;
            margin: 15px 0;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        }
        
        /* Form Styles */
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #555;
        }
        
        input[type="text"],
        input[type="number"],
        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        
        /* Button Styles */
        .btn {
            background-color: #5d5fef;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
            margin-right: 10px;
        }
        
        .btn:hover {
            background-color: #4a4cd3;
        }
        
        .btn-secondary {
            background-color: #6c757d;
        }
        
        .btn-secondary:hover {
            background-color: #5a6268;
        }
        
        .btn-container {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
        }
        
        /* Quiz Styles */
        .quiz-question {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            border-left: 4px solid #5d5fef;
        }
        
        .quiz-question h3 {
            margin-bottom: 10px;
            color: #444;
        }
        
        .quiz-options {
            margin-left: 20px;
        }
        
        .quiz-option {
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }
        
        .quiz-option input {
            margin-right: 10px;
        }
        
        /* Feedback Styles */
        .feedback {
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
            display: none;
        }
        
        .correct {
            background-color: #d4edda;
            color: #155724;
            border-left: 4px solid #28a745;
        }
        
        .incorrect {
            background-color: #f8d7da;
            color: #721c24;
            border-left: 4px solid #dc3545;
        }
        
        /* Progress Bar */
        .progress-container {
            width: 100%;
            background-color: #e9ecef;
            border-radius: 5px;
            margin: 20px 0;
            height: 10px;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #6e8efb, #a777e3);
            border-radius: 5px;
            width: 0%;
            transition: width 0.5s ease;
        }
        
        .progress-text {
            text-align: center;
            font-size: 14px;
            color: #6c757d;
            margin-top: 5px;
        }
        
        /* Thought Questions */
        .thought-question {
            background-color: #fff3cd;
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
            border-left: 4px solid #ffc107;
        }
        
        .thought-question h4 {
            color: #856404;
            margin-bottom: 10px;
        }
        
        /* Results Page */
        .result-card {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .result-title {
            color: #5d5fef;
            margin-bottom: 15px;
            font-size: 20px;
        }
        
        .score-container {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
        }
        
        .score-box {
            text-align: center;
            padding: 15px;
            border-radius: 8px;
            width: 45%;
        }
        
        .pre-test {
            background-color: #e2f0fd;
            border: 2px solid #6e8efb;
        }
        
        .post-test {
            background-color: #e2f0fd;
            border: 2px solid #a777e3;
        }
        
        .score {
            font-size: 36px;
            font-weight: bold;
            margin: 10px 0;
        }
        
        .improvement {
            color: #28a745;
            font-weight: bold;
            margin-top: 10px;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .btn-container {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
                margin-bottom: 10px;
                margin-right: 0;
            }
            
            .score-container {
                flex-direction: column;
            }
            
            .score-box {
                width: 100%;
                margin-bottom: 15px;
            }
        }
    </style>
</head>
<body>
    <!-- Header Section -->
    <div class="header">
        <h1><span class="emoji">🛒</span> E-commerce คืออะไร?</h1>
        <p>บทเรียนออนไลน์สำหรับนักเรียนชั้นมัธยมศึกษาปีที่ 3</p>
    </div>
    
    <!-- Progress Bar -->
    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
    </div>
    <div class="progress-text" id="progressText">หน้า 1 จาก 7</div>
    
    <!-- Page 1: Introduction -->
    <div class="page active" id="page1">
        <h2><span class="emoji">👋</span> แนะนำบทเรียน</h2>
        <img decoding="async" src="https://images.pexels.com/photos/590022/pexels-photo-590022.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="E-commerce Introduction" class="content-img">
        
        <p>สวัสดีนักเรียนทุกคน! 😊 ในบทเรียนนี้เราจะมาเรียนรู้เกี่ยวกับ <strong>E-commerce</strong> หรือการพาณิชย์อิเล็กทรอนิกส์กัน</p>
        
        <div class="thought-question">
            <h4><span class="emoji">💡</span> รู้ไหมว่า&#8230;</h4>
            <p>ทุกวันนี้คุณอาจใช้ E-commerce อยู่โดยที่ไม่รู้ตัวก็ได้นะ! เช่น การสั่งอาหารผ่านแอป หรือซื้อของออนไลน์</p>
        </div>
        
        <p>ก่อนเริ่มเรียน เราอยากรู้จักคุณมากขึ้นหน่อยค่ะ</p>
        
        <form id="studentInfoForm">
            <div class="form-group">
                <label for="studentName">ชื่อ-นามสกุล:</label>
                <input type="text" id="studentName" required>
            </div>
            
            <div class="form-group">
                <label for="studentClass">ระดับชั้น:</label>
                <select id="studentClass" required>
                    <option value="">&#8212; เลือกระดับชั้น &#8212;</option>
                    <option value="ม.3/1">ม.3/1</option>
                    <option value="ม.3/2">ม.3/2</option>
                    <option value="ม.3/3">ม.3/3</option>
                    <option value="ม.3/4">ม.3/4</option>
                    <option value="ม.3/5">ม.3/5</option>
                    <option value="ม.3/6">ม.3/6</option>
                    <option value="ม.3/7">ม.3/7</option>
                    <option value="ม.3/8">ม.3/8</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="studentNumber">เลขที่:</label>
                <input type="number" id="studentNumber" min="1" required>
            </div>
        </form>
        
        <div class="btn-container">
            <button class="btn" onclick="nextPage()">ต่อไป <span class="emoji">👉</span></button>
        </div>
    </div>
    
    <!-- Page 2: Pre-test -->
    <div class="page" id="page2">
        <h2><span class="emoji">📝</span> แบบทดสอบก่อนเรียน</h2>
        <img decoding="async" src="https://images.pexels.com/photos/590041/pexels-photo-590041.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Pre-test" class="content-img">
        
        <p>แบบทดสอบนี้มีทั้งหมด 10 ข้อ เป็นแบบปรนัยเลือกคำตอบที่ถูกต้องที่สุด</p>
        <p><strong>วัตถุประสงค์:</strong> เพื่อวัดความรู้พื้นฐานของคุณเกี่ยวกับ E-commerce ก่อนเริ่มเรียน</p>
        
        <div class="thought-question">
            <h4><span class="emoji">🤔</span> ข้อแนะนำ</h4>
            <p>ไม่ต้องกังวลหากตอบผิดนะคะ นี่คือแบบทดสอบก่อนเรียนเท่านั้น 😊</p>
        </div>
        
        <form id="preTestForm">
            <!-- Question 1 -->
            <div class="quiz-question">
                <h3>1. E-commerce คืออะไร?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="q1" id="q1a" value="a">
                        <label for="q1a">การซื้อขายสินค้าและบริการผ่านอินเทอร์เน็ต</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q1" id="q1b" value="b">
                        <label for="q1b">การซื้อขายสินค้าในตลาดนัด</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q1" id="q1c" value="c">
                        <label for="q1c">การโฆษณาสินค้าทางทีวี</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q1" id="q1d" value="d">
                        <label for="q1d">การซื้อขายหุ้นในตลาดหลักทรัพย์</label>
                    </div>
                </div>
                <div class="feedback" id="feedback1"></div>
            </div>
            
            <!-- Question 2 -->
            <div class="quiz-question">
                <h3>2. ข้อใดไม่ใช่ประโยชน์ของ E-commerce?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="q2" id="q2a" value="a">
                        <label for="q2a">สามารถซื้อขายได้ตลอดเวลา</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q2" id="q2b" value="b">
                        <label for="q2b">ลดค่าใช้จ่ายในการเดินทาง</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q2" id="q2c" value="c">
                        <label for="q2c">ต้องพบปะผู้ขายโดยตรง</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q2" id="q2d" value="d">
                        <label for="q2d">สามารถเปรียบเทียบราคาได้ง่าย</label>
                    </div>
                </div>
                <div class="feedback" id="feedback2"></div>
            </div>
            
            <!-- Question 3 -->
            <div class="quiz-question">
                <h3>3. ข้อใดคือตัวอย่างของ E-commerce?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="q3" id="q3a" value="a">
                        <label for="q3a">การซื้อผักที่ตลาดสด</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q3" id="q3b" value="b">
                        <label for="q3b">การสั่งอาหารผ่านแอป Grab</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q3" id="q3c" value="c">
                        <label for="q3c">การซื้อของที่ห้างสรรพสินค้า</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q3" id="q3d" value="d">
                        <label for="q3d">การต่อรองราคาที่ร้านขายของมือสอง</label>
                    </div>
                </div>
                <div class="feedback" id="feedback3"></div>
            </div>
            
            <!-- Question 4 -->
            <div class="quiz-question">
                <h3>4. ข้อใดคือความแตกต่างหลักระหว่างการซื้อขายแบบดั้งเดิมกับ E-commerce?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="q4" id="q4a" value="a">
                        <label for="q4a">E-commerce ต้องใช้เงินสดเท่านั้น</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q4" id="q4b" value="b">
                        <label for="q4b">E-commerce ไม่ต้องใช้เทคโนโลยี</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q4" id="q4c" value="c">
                        <label for="q4c">E-commerce สามารถทำธุรกรรมได้ทุกที่ทุกเวลา</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q4" id="q4d" value="d">
                        <label for="q4d">E-commerce จำกัดเฉพาะสินค้าเท่านั้น ไม่รวมบริการ</label>
                    </div>
                </div>
                <div class="feedback" id="feedback4"></div>
            </div>
            
            <!-- Question 5 -->
            <div class="quiz-question">
                <h3>5. ข้อใดไม่ใช่รูปแบบของ E-commerce?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="q5" id="q5a" value="a">
                        <label for="q5a">B2B (Business to Business)</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q5" id="q5b" value="b">
                        <label for="q5b">B2C (Business to Consumer)</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q5" id="q5c" value="c">
                        <label for="q5c">C2C (Consumer to Consumer)</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q5" id="q5d" value="d">
                        <label for="q5d">F2F (Face to Face)</label>
                    </div>
                </div>
                <div class="feedback" id="feedback5"></div>
            </div>
            
            <!-- Question 6 -->
            <div class="quiz-question">
                <h3>6. ข้อใดคือความเสี่ยงของ E-commerce?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="q6" id="q6a" value="a">
                        <label for="q6a">การถูกโจรกรรมข้อมูล</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q6" id="q6b" value="b">
                        <label for="q6b">สินค้าไม่ตรงตามที่โฆษณา</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q6" id="q6c" value="c">
                        <label for="q6c">ปัญหาการส่งสินค้า</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q6" id="q6d" value="d">
                        <label for="q6d">ถูกทุกข้อ</label>
                    </div>
                </div>
                <div class="feedback" id="feedback6"></div>
            </div>
            
            <!-- Question 7 -->
            <div class="quiz-question">
                <h3>7. ข้อใดคือปัจจัยที่ทำให้ E-commerce เติบโตอย่างรวดเร็ว?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="q7" id="q7a" value="a">
                        <label for="q7a">การแพร่หลายของสมาร์ทโฟน</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q7" id="q7b" value="b">
                        <label for="q7b">การพัฒนาระบบการชำระเงินออนไลน์</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q7" id="q7c" value="c">
                        <label for="q7c">การเปลี่ยนแปลงพฤติกรรมผู้บริโภค</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q7" id="q7d" value="d">
                        <label for="q7d">ถูกทุกข้อ</label>
                    </div>
                </div>
                <div class="feedback" id="feedback7"></div>
            </div>
            
            <!-- Question 8 -->
            <div class="quiz-question">
                <h3>8. ข้อใดไม่ใช่แพลตฟอร์ม E-commerce ในประเทศไทย?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="q8" id="q8a" value="a">
                        <label for="q8a">Lazada</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q8" id="q8b" value="b">
                        <label for="q8b">Shopee</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q8" id="q8c" value="c">
                        <label for="q8c">Tesco Lotus</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q8" id="q8d" value="d">
                        <label for="q8d">JD Central</label>
                    </div>
                </div>
                <div class="feedback" id="feedback8"></div>
            </div>
            
            <!-- Question 9 -->
            <div class="quiz-question">
                <h3>9. การชำระเงินแบบใดที่นิยมใช้ใน E-commerce?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="q9" id="q9a" value="a">
                        <label for="q9a">เงินสดเมื่อรับสินค้า (COD)</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q9" id="q9b" value="b">
                        <label for="q9b">บัตรเครดิต/เดบิต</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q9" id="q9c" value="c">
                        <label for="q9c">การโอนเงินผ่านธนาคารออนไลน์</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q9" id="q9d" value="d">
                        <label for="q9d">ถูกทุกข้อ</label>
                    </div>
                </div>
                <div class="feedback" id="feedback9"></div>
            </div>
            
            <!-- Question 10 -->
            <div class="quiz-question">
                <h3>10. ข้อใดคือแนวทางในการซื้อสินค้าออนไลน์อย่างปลอดภัย?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="q10" id="q10a" value="a">
                        <label for="q10a">ตรวจสอบความน่าเชื่อถือของร้านค้า</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q10" id="q10b" value="b">
                        <label for="q10b">อ่านรีวิวจากผู้ซื้อก่อน</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q10" id="q10c" value="c">
                        <label for="q10c">ใช้ช่องทางการชำระเงินที่ปลอดภัย</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="q10" id="q10d" value="d">
                        <label for="q10d">ถูกทุกข้อ</label>
                    </div>
                </div>
                <div class="feedback" id="feedback10"></div>
            </div>
        </form>
        
        <div class="btn-container">
            <button class="btn-secondary" onclick="prevPage()"><span class="emoji">👈</span> ย้อนกลับ</button>
            <button class="btn" onclick="submitPreTest()">ส่งคำตอบ <span class="emoji">📤</span></button>
        </div>
    </div>
    
    <!-- Page 3: Definition and Importance -->
    <div class="page" id="page3">
        <h2><span class="emoji">📚</span> ความหมายและความสำคัญของ E-commerce</h2>
        <img decoding="async" src="https://images.pexels.com/photos/669610/pexels-photo-669610.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="E-commerce Definition" class="content-img">
        
        <h3><span class="emoji">🔍</span> E-commerce คืออะไร?</h3>
        <p><strong>E-commerce (Electronic Commerce)</strong> หรือการพาณิชย์อิเล็กทรอนิกส์ หมายถึง <strong>การซื้อขายสินค้าและบริการผ่านระบบอิเล็กทรอนิกส์</strong> โดยเฉพาะทางอินเทอร์เน็ต รวมถึงการโอนเงินและการแลกเปลี่ยนข้อมูลเพื่อสนับสนุนการทำธุรกรรมทางการค้า</p>
        
        <div class="thought-question">
            <h4><span class="emoji">💭</span> ลองคิดดู</h4>
            <p>คุณเคยซื้ออะไรผ่านออนไลน์บ้างในเดือนที่ผ่านมา? สิ่งเหล่านั้นถือเป็น E-commerce ทั้งหมดหรือไม่?</p>
        </div>
        
        <h3><span class="emoji">🌟</span> ความสำคัญของ E-commerce</h3>
        <p>E-commerce มีความสำคัญอย่างมากในยุคดิจิทัลเพราะ:</p>
        <ul>
            <li><strong>เพิ่มความสะดวกสบาย:</strong> ซื้อขายได้ทุกที่ทุกเวลา ไม่ต้องเดินทาง</li>
            <li><strong>ลดข้อจำกัดทางภูมิศาสตร์:</strong> สามารถซื้อสินค้าจากต่างประเทศได้ง่ายดาย</li>
            <li><strong>ประหยัดเวลาและค่าใช้จ่าย:</strong> ไม่ต้องเสียเวลาเดินทางไปร้านค้า</li>
            <li><strong>เพิ่มช่องทางการตลาด:</strong> ธุรกิจขนาดเล็กสามารถเข้าถึงลูกค้าได้ทั่วโลก</li>
            <li><strong>ข้อมูลที่แม่นยำ:</strong> สามารถวิเคราะห์พฤติกรรมผู้บริโภคได้อย่างมีประสิทธิภาพ</li>
        </ul>
        
        <div class="thought-question">
            <h4><span class="emoji">🤯</span> รู้หรือไม่?</h4>
            <p>ในปี 2023 มูลค่าตลาด E-commerce ทั่วโลกสูงถึง 6.3 ล้านล้านดอลลาร์สหรัฐ และคาดว่าจะเติบโตขึ้นเรื่อยๆ!</p>
        </div>
        
        <div class="btn-container">
            <button class="btn-secondary" onclick="prevPage()"><span class="emoji">👈</span> ย้อนกลับ</button>
            <button class="btn" onclick="nextPage()">ต่อไป <span class="emoji">👉</span></button>
        </div>
    </div>
    
    <!-- Page 4: Traditional vs Online -->
    <div class="page" id="page4">
        <h2><span class="emoji">🔄</span> ความแตกต่างระหว่างการซื้อขายแบบดั้งเดิมกับออนไลน์</h2>
        <img decoding="async" src="https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Traditional vs Online" class="content-img">
        
        <p>มาดูความแตกต่างระหว่างการซื้อขายแบบดั้งเดิม (Traditional Commerce) กับการซื้อขายออนไลน์ (E-commerce) กันค่ะ</p>
        
        <table style="width:100%; border-collapse: collapse; margin: 20px 0;">
            <tr style="background-color: #6e8efb; color: white;">
                <th style="padding: 12px; text-align: left;">ลักษณะ</th>
                <th style="padding: 12px; text-align: left;">การซื้อขายแบบดั้งเดิม</th>
                <th style="padding: 12px; text-align: left;">E-commerce</th>
            </tr>
            <tr style="background-color: #f8f9fa;">
                <td style="padding: 10px; border: 1px solid #ddd;"><strong>เวลา</strong></td>
                <td style="padding: 10px; border: 1px solid #ddd;">ทำการในช่วงเวลาทำการของร้าน</td>
                <td style="padding: 10px; border: 1px solid #ddd;">ทำการได้ตลอด 24 ชั่วโมง</td>
            </tr>
            <tr style="background-color: white;">
                <td style="padding: 10px; border: 1px solid #ddd;"><strong>สถานที่</strong></td>
                <td style="padding: 10px; border: 1px solid #ddd;">ต้องไปที่ร้านค้าโดยตรง</td>
                <td style="padding: 10px; border: 1px solid #ddd;">ซื้อขายได้จากทุกที่ที่มีอินเทอร์เน็ต</td>
            </tr>
            <tr style="background-color: #f8f9fa;">
                <td style="padding: 10px; border: 1px solid #ddd;"><strong>การติดต่อ</strong></td>
                <td style="padding: 10px; border: 1px solid #ddd;">พบปะผู้ขายโดยตรง</td>
                <td style="padding: 10px; border: 1px solid #ddd;">ติดต่อผ่านช่องทางออนไลน์</td>
            </tr>
            <tr style="background-color: white;">
                <td style="padding: 10px; border: 1px solid #ddd;"><strong>การชำระเงิน</strong></td>
                <td style="padding: 10px; border: 1px solid #ddd;">ใช้เงินสดเป็นหลัก</td>
                <td style="padding: 10px; border: 1px solid #ddd;">ใช้การชำระเงินอิเล็กทรอนิกส์</td>
            </tr>
            <tr style="background-color: #f8f9fa;">
                <td style="padding: 10px; border: 1px solid #ddd;"><strong>การตรวจสอบสินค้า</strong></td>
                <td style="padding: 10px; border: 1px solid #ddd;">ตรวจสอบสินค้าได้ก่อนซื้อ</td>
                <td style="padding: 10px; border: 1px solid #ddd;">ดูจากภาพและคำบรรยายเท่านั้น</td>
            </tr>
            <tr style="background-color: white;">
                <td style="padding: 10px; border: 1px solid #ddd;"><strong>การจัดส่ง</strong></td>
                <td style="padding: 10px; border: 1px solid #ddd;">นำสินค้ากลับได้ทันที</td>
                <td style="padding: 10px; border: 1px solid #ddd;">ต้องรอการจัดส่ง</td>
            </tr>
        </table>
        
        <div class="thought-question">
            <h4><span class="emoji">🧐</span> วิเคราะห์เปรียบเทียบ</h4>
            <p>จากตารางข้างต้น คุณคิดว่าการซื้อขายแบบใดเหมาะสมกับสินค้าประเภทใดบ้าง? เพราะเหตุใด?</p>
        </div>
        
        <h3><span class="emoji">⚖️</span> ข้อดี-ข้อเสียของ E-commerce</h3>
        
        <div style="display: flex; margin: 20px 0; gap: 20px;">
            <div style="flex: 1; background-color: #d4edda; padding: 15px; border-radius: 8px;">
                <h4 style="color: #155724;">ข้อดี 👍</h4>
                <ul style="margin-left: 20px;">
                    <li>สะดวก รวดเร็ว</li>
                    <li>ประหยัดเวลาและค่าใช้จ่าย</li>
                    <li>มีตัวเลือกมากมาย</li>
                    <li>สามารถเปรียบเทียบราคาได้ง่าย</li>
                    <li>เข้าถึงลูกค้าได้ทั่วโลก</li>
                </ul>
            </div>
            <div style="flex: 1; background-color: #f8d7da; padding: 15px; border-radius: 8px;">
                <h4 style="color: #721c24;">ข้อเสีย 👎</h4>
                <ul style="margin-left: 20px;">
                    <li>ไม่สามารถตรวจสอบสินค้าจริงก่อนซื้อ</li>
                    <li>ความเสี่ยงด้านความปลอดภัยของข้อมูล</li>
                    <li>ปัญหาการส่งสินค้าไม่ตรงเวลา</li>
                    <li>สินค้าไม่ตรงตามที่โฆษณา</li>
                    <li>การคืนสินค้ายุ่งยาก</li>
                </ul>
            </div>
        </div>
        
        <div class="btn-container">
            <button class="btn-secondary" onclick="prevPage()"><span class="emoji">👈</span> ย้อนกลับ</button>
            <button class="btn" onclick="nextPage()">ต่อไป <span class="emoji">👉</span></button>
        </div>
    </div>
    
    <!-- Page 5: Examples -->
    <div class="page" id="page5">
        <h2><span class="emoji">🛍️</span> ตัวอย่าง E-commerce ในชีวิตประจำวัน</h2>
        <img decoding="async" src="https://images.pexels.com/photos/5632402/pexels-photo-5632402.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="E-commerce Examples" class="content-img">
        
        <p>E-commerce อยู่รอบตัวเราในชีวิตประจำวันมากกว่าที่คิด! มาดูตัวอย่างกันค่ะ</p>
        
        <h3><span class="emoji">📱</span> ตัวอย่างแพลตฟอร์ม E-commerce</h3>
        <ul style="margin-bottom: 20px;">
            <li><strong>ตลาดกลางออนไลน์:</strong> Shopee, Lazada, JD Central</li>
            <li><strong>บริการอาหาร:</strong> GrabFood, FoodPanda, LINE Man</li>
            <li><strong>บริการเดินทาง:</strong> Agoda, Booking.com, Airbnb</li>
            <li><strong>บริการสตรีมมิ่ง:</strong> Netflix, Spotify, Disney+</li>
            <li><strong>บริการขนส่ง:</strong> Lalamove, Kerry Express</li>
        </ul>
        
        <div class="thought-question">
            <h4><span class="emoji">🤔</span> ลองนึกดู</h4>
            <p>ใน 1 วัน คุณใช้บริการ E-commerce กี่ครั้ง? เริ่มตั้งแต่ตื่นนอนจนเข้านอน</p>
        </div>
        
        <h3><span class="emoji">🔮</span> แนวโน้มของ E-commerce ในอนาคต</h3>
        <p>เทคโนโลยีเหล่านี้จะเปลี่ยนโฉม E-commerce ในอนาคต:</p>
        
        <div style="display: flex; flex-wrap: wrap; gap: 15px; margin: 20px 0;">
            <div style="flex: 1; min-width: 200px; background-color: #e2f0fd; padding: 15px; border-radius: 8px;">
                <h4 style="color: #0d6efd;">AI และ Chatbots</h4>
                <p>ระบบปัญญาประดิษฐ์ช่วยแนะนำสินค้าและตอบคำถามลูกค้าแบบอัตโนมัติ</p>
            </div>
            <div style="flex: 1; min-width: 200px; background-color: #e2f0fd; padding: 15px; border-radius: 8px;">
                <h4 style="color: #0d6efd;">Augmented Reality</h4>
                <p>เทคโนโลยี AR ช่วยให้ลองสินค้าก่อนซื้อ เช่น ลองรองเท้าเสมือนจริง</p>
            </div>
            <div style="flex: 1; min-width: 200px; background-color: #e2f0fd; padding: 15px; border-radius: 8px;">
                <h4 style="color: #0d6efd;">Voice Commerce</h4>
                <p>สั่งซื้อสินค้าผ่านเสียงด้วยอุปกรณ์อัจฉริยะต่างๆ</p>
            </div>
            <div style="flex: 1; min-width: 200px; background-color: #e2f0fd; padding: 15px; border-radius: 8px;">
                <h4 style="color: #0d6efd;">Social Commerce</h4>
                <p>ซื้อขายสินค้าผ่านโซเชียลมีเดียโดยตรง</p>
            </div>
        </div>
        
        <div class="thought-question">
            <h4><span class="emoji">💬</span> แลกเปลี่ยนความคิดเห็น</h4>
            <p>คุณคิดว่าเทคโนโลยีใดจะเปลี่ยนแปลง E-commerce มากที่สุดในอีก 5 ปีข้างหน้า? เพราะเหตุใด?</p>
        </div>
        
        <div class="btn-container">
            <button class="btn-secondary" onclick="prevPage()"><span class="emoji">👈</span> ย้อนกลับ</button>
            <button class="btn" onclick="nextPage()">ต่อไป <span class="emoji">👉</span></button>
        </div>
    </div>
    
    <!-- Page 6: Post-test -->
    <div class="page" id="page6">
        <h2><span class="emoji">📝</span> แบบทดสอบหลังเรียน</h2>
        <img decoding="async" src="https://images.pexels.com/photos/590041/pexels-photo-590041.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Post-test" class="content-img">
        
        <p>แบบทดสอบนี้มีทั้งหมด 10 ข้อ เป็นแบบปรนัยเลือกคำตอบที่ถูกต้องที่สุด</p>
        <p><strong>วัตถุประสงค์:</strong> เพื่อวัดความรู้ความเข้าใจของคุณเกี่ยวกับ E-commerce หลังเรียน</p>
        
        <div class="thought-question">
            <h4><span class="emoji">🎯</span> ข้อแนะนำ</h4>
            <p>พยายามทำความเข้าใจคำถามและเลือกคำตอบที่คิดว่าถูกต้องที่สุดนะคะ 😊</p>
        </div>
        
        <form id="postTestForm">
            <!-- Question 1 -->
            <div class="quiz-question">
                <h3>1. E-commerce แตกต่างจาก Traditional Commerce อย่างไร?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="pq1" id="pq1a" value="a">
                        <label for="pq1a">ต้องใช้เงินสดเท่านั้น</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq1" id="pq1b" value="b">
                        <label for="pq1b">ต้องพบปะผู้ขายโดยตรง</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq1" id="pq1c" value="c">
                        <label for="pq1c">สามารถทำธุรกรรมได้ทุกที่ทุกเวลา</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq1" id="pq1d" value="d">
                        <label for="pq1d">จำกัดเฉพาะสินค้าเท่านั้น</label>
                    </div>
                </div>
                <div class="feedback" id="pfeedback1"></div>
            </div>
            
            <!-- Question 2 -->
            <div class="quiz-question">
                <h3>2. ข้อใดคือประโยชน์หลักของ E-commerce?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="pq2" id="pq2a" value="a">
                        <label for="pq2a">ลดค่าใช้จ่ายในการเดินทาง</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq2" id="pq2b" value="b">
                        <label for="pq2b">ต้องพบปะผู้ขายโดยตรง</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq2" id="pq2c" value="c">
                        <label for="pq2c">ทำการค้าได้เฉพาะในเวลาทำการ</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq2" id="pq2d" value="d">
                        <label for="pq2d">จำกัดเฉพาะพื้นที่ใกล้เคียง</label>
                    </div>
                </div>
                <div class="feedback" id="pfeedback2"></div>
            </div>
            
            <!-- Question 3 -->
            <div class="quiz-question">
                <h3>3. ข้อใดไม่ใช่ตัวอย่างของ E-commerce?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="pq3" id="pq3a" value="a">
                        <label for="pq3a">การซื้อของในตลาดนัด</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq3" id="pq3b" value="b">
                        <label for="pq3b">การสั่งอาหารผ่านแอป Grab</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq3" id="pq3c" value="c">
                        <label for="pq3c">การจองโรงแรมผ่าน Agoda</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq3" id="pq3d" value="d">
                        <label for="pq3d">การซื้อหนังสือจากเว็บไซต์</label>
                    </div>
                </div>
                <div class="feedback" id="pfeedback3"></div>
            </div>
            
            <!-- Question 4 -->
            <div class="quiz-question">
                <h3>4. ข้อใดคือความเสี่ยงของ E-commerce?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="pq4" id="pq4a" value="a">
                        <label for="pq4a">การถูกโจรกรรมข้อมูล</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq4" id="pq4b" value="b">
                        <label for="pq4b">สินค้าไม่ตรงตามที่โฆษณา</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq4" id="pq4c" value="c">
                        <label for="pq4c">ปัญหาการส่งสินค้า</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq4" id="pq4d" value="d">
                        <label for="pq4d">ถูกทุกข้อ</label>
                    </div>
                </div>
                <div class="feedback" id="pfeedback4"></div>
            </div>
            
            <!-- Question 5 -->
            <div class="quiz-question">
                <h3>5. ข้อใดคือรูปแบบของ E-commerce?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="pq5" id="pq5a" value="a">
                        <label for="pq5a">B2B (Business to Business)</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq5" id="pq5b" value="b">
                        <label for="pq5b">B2C (Business to Consumer)</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq5" id="pq5c" value="c">
                        <label for="pq5c">C2C (Consumer to Consumer)</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq5" id="pq5d" value="d">
                        <label for="pq5d">ถูกทุกข้อ</label>
                    </div>
                </div>
                <div class="feedback" id="pfeedback5"></div>
            </div>
            
            <!-- Question 6 -->
            <div class="quiz-question">
                <h3>6. ข้อใดคือปัจจัยที่ทำให้ E-commerce เติบโตอย่างรวดเร็ว?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="pq6" id="pq6a" value="a">
                        <label for="pq6a">การแพร่หลายของสมาร์ทโฟน</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq6" id="pq6b" value="b">
                        <label for="pq6b">การพัฒนาระบบการชำระเงินออนไลน์</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq6" id="pq6c" value="c">
                        <label for="pq6c">การเปลี่ยนแปลงพฤติกรรมผู้บริโภค</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq6" id="pq6d" value="d">
                        <label for="pq6d">ถูกทุกข้อ</label>
                    </div>
                </div>
                <div class="feedback" id="pfeedback6"></div>
            </div>
            
            <!-- Question 7 -->
            <div class="quiz-question">
                <h3>7. ข้อใดคือแพลตฟอร์ม E-commerce ในประเทศไทย?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="pq7" id="pq7a" value="a">
                        <label for="pq7a">Lazada</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq7" id="pq7b" value="b">
                        <label for="pq7b">Shopee</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq7" id="pq7c" value="c">
                        <label for="pq7c">JD Central</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq7" id="pq7d" value="d">
                        <label for="pq7d">ถูกทุกข้อ</label>
                    </div>
                </div>
                <div class="feedback" id="pfeedback7"></div>
            </div>
            
            <!-- Question 8 -->
            <div class="quiz-question">
                <h3>8. การชำระเงินแบบใดที่นิยมใช้ใน E-commerce?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="pq8" id="pq8a" value="a">
                        <label for="pq8a">เงินสดเมื่อรับสินค้า (COD)</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq8" id="pq8b" value="b">
                        <label for="pq8b">บัตรเครดิต/เดบิต</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq8" id="pq8c" value="c">
                        <label for="pq8c">การโอนเงินผ่านธนาคารออนไลน์</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq8" id="pq8d" value="d">
                        <label for="pq8d">ถูกทุกข้อ</label>
                    </div>
                </div>
                <div class="feedback" id="pfeedback8"></div>
            </div>
            
            <!-- Question 9 -->
            <div class="quiz-question">
                <h3>9. ข้อใดคือแนวทางในการซื้อสินค้าออนไลน์อย่างปลอดภัย?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="pq9" id="pq9a" value="a">
                        <label for="pq9a">ตรวจสอบความน่าเชื่อถือของร้านค้า</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq9" id="pq9b" value="b">
                        <label for="pq9b">อ่านรีวิวจากผู้ซื้อก่อน</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq9" id="pq9c" value="c">
                        <label for="pq9c">ใช้ช่องทางการชำระเงินที่ปลอดภัย</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq9" id="pq9d" value="d">
                        <label for="pq9d">ถูกทุกข้อ</label>
                    </div>
                </div>
                <div class="feedback" id="pfeedback9"></div>
            </div>
            
            <!-- Question 10 -->
            <div class="quiz-question">
                <h3>10. เทคโนโลยีใดที่น่าจะมีบทบาทสำคัญใน E-commerce ในอนาคต?</h3>
                <div class="quiz-options">
                    <div class="quiz-option">
                        <input type="radio" name="pq10" id="pq10a" value="a">
                        <label for="pq10a">Augmented Reality (AR)</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq10" id="pq10b" value="b">
                        <label for="pq10b">ปัญญาประดิษฐ์ (AI)</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq10" id="pq10c" value="c">
                        <label for="pq10c">Voice Commerce</label>
                    </div>
                    <div class="quiz-option">
                        <input type="radio" name="pq10" id="pq10d" value="d">
                        <label for="pq10d">ถูกทุกข้อ</label>
                    </div>
                </div>
                <div class="feedback" id="pfeedback10"></div>
            </div>
        </form>
        
        <div class="btn-container">
            <button class="btn-secondary" onclick="prevPage()"><span class="emoji">👈</span> ย้อนกลับ</button>
            <button class="btn" onclick="submitPostTest()">ส่งคำตอบ <span class="emoji">📤</span></button>
        </div>
    </div>
    
    <!-- Page 7: Results -->
    <div class="page" id="page7">
        <h2><span class="emoji">🏆</span> สรุปผลการเรียนรู้</h2>
        <img decoding="async" src="https://images.pexels.com/photos/3184292/pexels-photo-3184292.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Learning Results" class="content-img">
        
        <div class="result-card">
            <h3 class="result-title"><span class="emoji">👤</span> ข้อมูลผู้เรียน</h3>
            <p><strong>ชื่อ-นามสกุล:</strong> <span id="resultName"></span></p>
            <p><strong>ระดับชั้น:</strong> <span id="resultClass"></span></p>
            <p><strong>เลขที่:</strong> <span id="resultNumber"></span></p>
        </div>
        
        <div class="result-card">
            <h3 class="result-title"><span class="emoji">📊</span> ผลการเรียน</h3>
            
            <div class="score-container">
                <div class="score-box pre-test">
                    <h4>คะแนนก่อนเรียน</h4>
                    <div class="score" id="preTestScore">0</div>
                    <p>คะแนนเต็ม 10</p>
                </div>
                
                <div class="score-box post-test">
                    <h4>คะแนนหลังเรียน</h4>
                    <div class="score" id="postTestScore">0</div>
                    <p>คะแนนเต็ม 10</p>
                </div>
            </div>
            
            <div id="improvementContainer" style="text-align: center; margin-top: 20px;">
                <p id="improvementText" class="improvement"></p>
            </div>
        </div>
        
        <div class="result-card">
            <h3 class="result-title"><span class="emoji">🎯</span> สรุปความเข้าใจ</h3>
            <p>จากผลการเรียน แสดงว่าคุณมีความเข้าใจเกี่ยวกับ E-commerce ดังนี้:</p>
            <ul style="margin-left: 20px; margin-top: 10px;">
                <li>ความหมายและความสำคัญของ E-commerce</li>
                <li>ความแตกต่างระหว่างการซื้อขายแบบดั้งเดิมกับออนไลน์</li>
                <li>ตัวอย่าง E-commerce ในชีวิตประจำวัน</li>
                <li>ประโยชน์และความเสี่ยงของ E-commerce</li>
            </ul>
            
            <div style="margin-top: 20px; padding: 15px; background-color: #e2f0fd; border-radius: 8px;">
                <h4 style="color: #0d6efd;"><span class="emoji">💡</span> คำแนะนำเพิ่มเติม</h4>
                <p id="learningFeedback"></p>
            </div>
        </div>
        
        <div class="thought-question">
            <h4><span class="emoji">🤔</span> ลองทบทวน</h4>
            <p>คุณสามารถนำความรู้เกี่ยวกับ E-commerce ไปใช้ในชีวิตประจำวันอย่างไรได้บ้าง?</p>
        </div>
        
        <div class="btn-container">
            <button class="btn-secondary" onclick="prevPage()"><span class="emoji">👈</span> ย้อนกลับ</button>
            <button class="btn" onclick="restartCourse()">เริ่มบทเรียนใหม่ <span class="emoji">🔄</span></button>
        </div>
    </div>
    
    <script>
        // Current page tracking
        let currentPage = 1;
        const totalPages = 7;
        
        // Quiz answers
        const preTestAnswers = {
            q1: 'a', q2: 'c', q3: 'b', q4: 'c', q5: 'd', 
            q6: 'd', q7: 'd', q8: 'c', q9: 'd', q10: 'd'
        };
        
        const postTestAnswers = {
            pq1: 'c', pq2: 'a', pq3: 'a', pq4: 'd', pq5: 'd', 
            pq6: 'd', pq7: 'd', pq8: 'd', pq9: 'd', pq10: 'd'
        };
        
        // Student data
        let studentData = {
            name: '',
            class: '',
            number: '',
            preTestScore: 0,
            postTestScore: 0
        };
        
        // Initialize the course
        function initCourse() {
            updateProgressBar();
        }
        
        // Navigation functions
        function nextPage() {
            // Validate current page before proceeding
            if (currentPage === 1 && !validatePage1()) return;
            
            document.getElementById(`page${currentPage}`).classList.remove('active');
            currentPage++;
            document.getElementById(`page${currentPage}`).classList.add('active');
            updateProgressBar();
            
            // Scroll to top of the page
            window.scrollTo(0, 0);
        }
        
        function prevPage() {
            document.getElementById(`page${currentPage}`).classList.remove('active');
            currentPage--;
            document.getElementById(`page${currentPage}`).classList.add('active');
            updateProgressBar();
            
            // Scroll to top of the page
            window.scrollTo(0, 0);
        }
        
        function updateProgressBar() {
            const progressPercentage = (currentPage / totalPages) * 100;
            document.getElementById('progressBar').style.width = `${progressPercentage}%`;
            document.getElementById('progressText').textContent = `หน้า ${currentPage} จาก ${totalPages}`;
        }
        
        // Page 1 validation
        function validatePage1() {
            const name = document.getElementById('studentName').value.trim();
            const studentClass = document.getElementById('studentClass').value;
            const number = document.getElementById('studentNumber').value;
            
            if (!name || !studentClass || !number) {
                alert('กรุณากรอกข้อมูลส่วนตัวให้ครบถ้วน');
                return false;
            }
            
            // Save student data
            studentData.name = name;
            studentData.class = studentClass;
            studentData.number = number;
            
            return true;
        }
        
        // Pre-test submission
        function submitPreTest() {
            let score = 0;
            
            // Check each question
            for (let i = 1; i <= 10; i++) {
                const selectedOption = document.querySelector(`input[name="q${i}"]:checked`);
                const feedbackElement = document.getElementById(`feedback${i}`);
                
                if (!selectedOption) {
                    alert(`กรุณาตอบคำถามที่ ${i}`);
                    return;
                }
                
                if (selectedOption.value === preTestAnswers[`q${i}`]) {
                    score++;
                    feedbackElement.className = 'feedback correct';
                    feedbackElement.innerHTML = '<strong>ถูกต้อง!</strong> ' + getPreTestExplanation(i);
                    feedbackElement.style.display = 'block';
                } else {
                    feedbackElement.className = 'feedback incorrect';
                    feedbackElement.innerHTML = '<strong>ไม่ถูกต้อง:</strong> ' + getPreTestExplanation(i);
                    feedbackElement.style.display = 'block';
                }
            }
            
            // Save score and proceed
            studentData.preTestScore = score;
            nextPage();
        }
        
        // Post-test submission
        function submitPostTest() {
            let score = 0;
            
            // Check each question
            for (let i = 1; i <= 10; i++) {
                const selectedOption = document.querySelector(`input[name="pq${i}"]:checked`);
                const feedbackElement = document.getElementById(`pfeedback${i}`);
                
                if (!selectedOption) {
                    alert(`กรุณาตอบคำถามที่ ${i}`);
                    return;
                }
                
                if (selectedOption.value === postTestAnswers[`pq${i}`]) {
                    score++;
                    feedbackElement.className = 'feedback correct';
                    feedbackElement.innerHTML = '<strong>ถูกต้อง!</strong> ' + getPostTestExplanation(i);
                    feedbackElement.style.display = 'block';
                } else {
                    feedbackElement.className = 'feedback incorrect';
                    feedbackElement.innerHTML = '<strong>ไม่ถูกต้อง:</strong> ' + getPostTestExplanation(i);
                    feedbackElement.style.display = 'block';
                }
            }
            
            // Save score and proceed to results
            studentData.postTestScore = score;
            showResults();
            nextPage();
        }
        
        // Show results on page 7
        function showResults() {
            // Display student info
            document.getElementById('resultName').textContent = studentData.name;
            document.getElementById('resultClass').textContent = studentData.class;
            document.getElementById('resultNumber').textContent = studentData.number;
            
            // Display scores
            document.getElementById('preTestScore').textContent = studentData.preTestScore;
            document.getElementById('postTestScore').textContent = studentData.postTestScore;
            
            // Calculate improvement
            const improvement = studentData.postTestScore - studentData.preTestScore;
            const improvementElement = document.getElementById('improvementText');
            
            if (improvement > 0) {
                improvementElement.textContent = `พัฒนาขึ้น ${improvement} คะแนน 🎉`;
            } else if (improvement < 0) {
                improvementElement.textContent = `ลดลง ${Math.abs(improvement)} คะแนน 😟`;
            } else {
                improvementElement.textContent = `คะแนนเท่าเดิม 😐`;
            }
            
            // Provide feedback based on post-test score
            const feedbackElement = document.getElementById('learningFeedback');
            
            if (studentData.postTestScore >= 8) {
                feedbackElement.textContent = 'ยอดเยี่ยมมาก! คุณมีความเข้าใจเกี่ยวกับ E-commerce เป็นอย่างดี สามารถนำความรู้นี้ไปประยุกต์ใช้ในชีวิตประจำวันได้เลยค่ะ';
            } else if (studentData.postTestScore >= 5) {
                feedbackElement.textContent = 'ดีมาก! คุณมีความเข้าใจเกี่ยวกับ E-commerce ในระดับดี แต่ยังมีบางจุดที่สามารถศึกษาเพิ่มเติมได้อีกนะคะ';
            } else {
                feedbackElement.textContent = 'คุณอาจต้องการทบทวนเนื้อหาเกี่ยวกับ E-commerce อีกสักหน่อย เพื่อความเข้าใจที่ดียิ่งขึ้นค่ะ';
            }
        }
        
        // Restart the course
        function restartCourse() {
            // Reset form values
            document.getElementById('studentInfoForm').reset();
            document.getElementById('preTestForm').reset();
            document.getElementById('postTestForm').reset();
            
            // Hide all feedback
            for (let i = 1; i <= 10; i++) {
                document.getElementById(`feedback${i}`).style.display = 'none';
                document.getElementById(`pfeedback${i}`).style.display = 'none';
            }
            
            // Reset student data
            studentData = {
                name: '',
                class: '',
                number: '',
                preTestScore: 0,
                postTestScore: 0
            };
            
            // Go back to page 1
            document.getElementById(`page${currentPage}`).classList.remove('active');
            currentPage = 1;
            document.getElementById(`page${currentPage}`).classList.add('active');
            updateProgressBar();
            
            // Scroll to top of the page
            window.scrollTo(0, 0);
        }
        
        // Explanation for pre-test questions
        function getPreTestExplanation(questionNumber) {
            const explanations = {
                1: 'E-commerce คือการซื้อขายสินค้าและบริการผ่านอินเทอร์เน็ต ไม่ใช่การซื้อขายในตลาดนัดหรือการโฆษณาทางทีวี',
                2: 'E-commerce ช่วยลดความจำเป็นในการพบปะผู้ขายโดยตรง ซึ่งเป็นข้อดี ไม่ใช่ข้อเสีย',
                3: 'การสั่งอาหารผ่านแอป Grab เป็นตัวอย่างของ E-commerce ในขณะที่การซื้อผักที่ตลาดสดเป็นการซื้อขายแบบดั้งเดิม',
                4: 'E-commerce แตกต่างจากการซื้อขายแบบดั้งเดิมที่สามารถทำธุรกรรมได้ทุกที่ทุกเวลา โดยไม่จำกัดเวลาและสถานที่',
                5: 'F2F (Face to Face) ไม่ใช่รูปแบบของ E-commerce แต่เป็นรูปแบบการติดต่อแบบพบปะกันโดยตรง',
                6: 'E-commerce มีความเสี่ยงหลายด้าน ทั้งการถูกโจรกรรมข้อมูล สินค้าไม่ตรงตามที่โฆษณา และปัญหาการส่งสินค้า',
                7: 'E-commerce เติบโตอย่างรวดเร็วเนื่องจากปัจจัยหลายอย่าง ทั้งการแพร่หลายของสมาร์ทโฟน การพัฒนาระบบการชำระเงินออนไลน์ และการเปลี่ยนแปลงพฤติกรรมผู้บริโภค',
                8: 'Tesco Lotus เป็นห้างสรรพสินค้าแบบดั้งเดิม ไม่ใช่แพลตฟอร์ม E-commerce',
                9: 'E-commerce นิยมใช้การชำระเงินหลายรูปแบบ ทั้งเงินสดเมื่อรับสินค้า (COD) บัตรเครดิต/เดบิต และการโอนเงินผ่านธนาคารออนไลน์',
                10: 'การซื้อสินค้าออนไลน์อย่างปลอดภัยควรตรวจสอบความน่าเชื่อถือของร้านค้า อ่านรีวิวจากผู้ซื้อก่อน และใช้ช่องทางการชำระเงินที่ปลอดภัย'
            };
            
            return explanations[questionNumber] || '';
        }
        
        // Explanation for post-test questions
        function getPostTestExplanation(questionNumber) {
            const explanations = {
                1: 'E-commerce แตกต่างจากการซื้อขายแบบดั้งเดิมที่สามารถทำธุรกรรมได้ทุกที่ทุกเวลา โดยไม่จำกัดเวลาและสถานที่',
                2: 'ประโยชน์หลักของ E-commerce คือการลดค่าใช้จ่ายในการเดินทาง ไม่ต้องพบปะผู้ขายโดยตรง',
                3: 'การซื้อของในตลาดนัดเป็นการซื้อขายแบบดั้งเดิม ไม่ใช่ E-commerce',
                4: 'E-commerce มีความเสี่ยงหลายด้าน ทั้งการถูกโจรกรรมข้อมูล สินค้าไม่ตรงตามที่โฆษณา และปัญหาการส่งสินค้า',
                5: 'E-commerce มีหลายรูปแบบ ทั้ง B2B, B2C และ C2C',
                6: 'E-commerce เติบโตอย่างรวดเร็วเนื่องจากปัจจัยหลายอย่าง ทั้งการแพร่หลายของสมาร์ทโฟน การพัฒนาระบบการชำระเงินออนไลน์ และการเปลี่ยนแปลงพฤติกรรมผู้บริโภค',
                7: 'Lazada, Shopee และ JD Central ล้วนเป็นแพลตฟอร์ม E-commerce ในประเทศไทย',
                8: 'E-commerce นิยมใช้การชำระเงินหลายรูปแบบ ทั้งเงินสดเมื่อรับสินค้า (COD) บัตรเครดิต/เดบิต และการโอนเงินผ่านธนาคารออนไลน์',
                9: 'การซื้อสินค้าออนไลน์อย่างปลอดภัยควรตรวจสอบความน่าเชื่อถือของร้านค้า อ่านรีวิวจากผู้ซื้อก่อน และใช้ช่องทางการชำระเงินที่ปลอดภัย',
                10: 'เทคโนโลยีหลายอย่างจะเปลี่ยนแปลง E-commerce ในอนาคต ทั้ง AR, AI และ Voice Commerce'
            };
            
            return explanations[questionNumber] || '';
        }
        
        // Initialize the course when the page loads
        window.onload = initCourse;
    </script>
</body>
</html>



<p></p>
<p>The post <a href="https://www.kroochut.com/e-commerce/">บทเรียนออนไลน์ E-commerce คืออะไร?</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>ทำไมเทคโนโลยีถึงเปลี่ยนแปลงตลอดเวลา? 🚀</title>
		<link>https://www.kroochut.com/technology-change-2/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Mon, 09 Jun 2025 12:20:51 +0000</pubDate>
				<category><![CDATA[Information Technology]]></category>
		<category><![CDATA[การประดิษฐ์]]></category>
		<category><![CDATA[การเปลี่ยนแปลงเทคโนโลยี]]></category>
		<category><![CDATA[นวัตกรรม]]></category>
		<category><![CDATA[นักเรียน]]></category>
		<category><![CDATA[ม.1]]></category>
		<category><![CDATA[ม.2]]></category>
		<category><![CDATA[ม.3]]></category>
		<category><![CDATA[วิทยาศาสตร์]]></category>
		<category><![CDATA[อนาคต]]></category>
		<category><![CDATA[เทคโนโลยี]]></category>
		<guid isPermaLink="false">https://www.kroochut.com/?p=677</guid>

					<description><![CDATA[<p>ทำไมเทคโนโลยีถึงเปลี่ยนแปลงตลอดเวลา? 🚀 เข้าใจง่าย ๆ สำหรับนักเรียน ทำไมเทคโนโลยีถึงเปลี่ยนแปลงตลอดเวลา? 🚀 มาค้นหาคำตอบที่น่าสนใจกันเถอะ! ⏱️ ใช้เวลาอ่าน: ประมาณ 10 นาที &#124; 📚 เหมาะสำหรับ: นักเรียน ม.1-3 🤔 เคยสงสัยไหม? ทำไมโทรศัพท์ของเราถึงสามารถทำอะไรได้มากกว่าคอมพิวเตอร์ในอดีต? ทำไมเทคโนโลยีถึงเปลี่ยนแปลงเร็วขนาดนี้? วันนี้เราจะมาหาคำตอบไปด้วยกัน! การพัฒนาของเทคโนโลยีจากอดีตสู่ปัจจุบัน 🔍 สาเหตุหลักของการเปลี่ยนแปลงเทคโนโลยี 1. ความต้องการของมนุษย์ 👥 มนุษย์มีความต้องการที่เพิ่มมากขึ้นเรื่อย ๆ เราต้องการชีวิตที่สะดวกสบาย รวดเร็ว และปลอดภัยมากกว่าเดิม เมื่อไหร่ที่เราเจอปัญหา เราก็จะหาทางแก้ไข และนั่นคือจุดเริ่มต้นของนวัตกรรมใหม่ ๆ เทคโนโลยีเกิดขึ้นเพื่อตอบสนองความต้องการของมนุษย์ 🎯 Fun Fact: รู้ไหมว่าโทรศัพท์มือถือถูกประดิษฐ์ขึ้นเพราะคนต้องการติดต่อสื่อสารแบบเคลื่อนที่ได้! 2. การแข่งขันทางธุรกิจ 💼 บริษัทต่าง ๆ แข่งขันกันเพื่อให้ได้เทคโนโลยีที่ดีที่สุด ใครที่ทำได้ดีกว่า ใครก็จะขายดีกว่า การแข่งขันนี้ทำให้เทคโนโลยีพัฒนาไปอย่างรวดเร็ว 📱 ตัวอย่าง: สมาร์ทโฟน Apple vs Samsung vs Google ทำให้โทรศัพท์พัฒนาไปอย่างรวดเร็ว 🚗 ตัวอย่าง: รถยนต์ Tesla vs BMW vs Mercedes ทำให้รถไฟฟ้าพัฒนาเร็วมาก 3. การค้นพบทางวิทยาศาสตร์ 🔬 เมื่อนักวิทยาศาสตร์ค้นพบสิ่งใหม่ ๆ เราก็สามารถนำมาประยุกต์ใช้ในเทคโนโลยีได้ เช่น การค้นพบไฟฟ้า ทำให้เราได้หลอดไฟ คอมพิวเตอร์ และเครื่องใช้ไฟฟ้าต่าง ๆ การค้นพบทางวิทยาศาสตร์เป็นรากฐานของเทคโนโลยี 4. กฎของมัวร์ (Moore&#8217;s Law) 📈 กอร์ดอน มัวร์ ผู้ร่วมก่อตั้งอินเทล ทำนายไว้ว่า &#8220;จำนวนทรานซิสเตอร์ในชิปจะเพิ่มขึ้นเป็นสองเท่าทุก ๆ 2 ปี&#8221; การทำนายนี้เป็นจริงมานานหลายสิบปี ทำให้คอมพิวเตอร์มีพลังมากขึ้นเรื่อย ๆ 💡 รู้ไหม? ปัจจุบันเทคโนโลยีพัฒนาเร็วขึ้น 2 เท่าทุก ๆ 2 ปี! นี่คือสิ่งที่เรียกว่า &#8220;กฎของมัวร์&#8221; (Moore&#8217;s Law) 📊 ตารางเปรียบเทียบ: อดีต vs ปัจจุบัน ด้าน อดีต (50 ปีที่แล้ว) ปัจจุบัน อนาคต (คาดการณ์) การสื่อสาร 📞 โทรศัพท์บ้าน, จดหมาย สมาร์ทโฟน, อีเมล, LINE VR, AR, การสื่อสารด้วยความคิด การเดินทาง 🚗 รถยนต์เครื่องยนต์ รถไฟฟ้า, รถไฮบริด รถบินได้, รถขับเคลื่อนอัตโนมัติ การศึกษา 📚 หนังสือ, กระดานดำ อินเทอร์เน็ต, แท็บเล็ต AI ครู, การเรียนใน VR การแพทย์ 🏥 เครื่องมือพื้นฐาน เครื่อง MRI, หุ่นยนต์ผ่าตัด การรักษาด้วยยีน, นาโนเทคโนโลยี ⏰ ไทม์ไลน์: จุดเปลี่ยนสำคัญของเทคโนโลยี 1876 📞 โทรศัพท์ Alexander Graham Bell ประดิษฐ์โทรศัพท์ เปลี่ยนวิธีการสื่อสารของมนุษย์ไปตลอดกาล 1969 🌐 อินเทอร์เน็ต ARPANET เกิดขึ้น ซึ่งเป็นต้นกำเนิดของอินเทอร์เน็ตที่เราใช้กันอยู่ทุกวันนี้ 1973 📱 โทรศัพท์มือถือ Motorola สร้างโทรศัพท์มือถือเครื่องแรก หนัก 1.1 กิโลกรัม! 2007 🍎 iPhone Apple เปิดตัว iPhone เปลี่ยนโลกสมาร์ทโฟนไปตลอดกาล 2020 🤖 AI ยุคใหม่ AI เริ่มเข้ามามีบทบาทในชีวิตประจำวันมากขึ้น การพัฒนาเทคโนโลยีตามกาลเวลา 🚀 ปัจจัยที่เร่งการเปลี่ยนแปลงในยุคปัจจุบัน 1. อินเทอร์เน็ตและการแชร์ข้อมูล 🌐 ในอดีต นักวิทยาศาสตร์อาจใช้เวลาหลายปีกว่าจะได้รับข้อมูลจากคนอื่น แต่ตอนนี้เราสามารถแชร์ข้อมูลได้ทันที ทำให้การพัฒนาเทคโนโลยีเร็วขึ้นมาก 2. คอมพิวเตอร์ที่มีประสิทธิภาพสูง 💻 คอมพิวเตอร์ทำให้เราสามารถจำลองและทดสอบสิ่งต่าง ๆ ได้ก่อนที่จะสร้างจริง ทำให้ประหยัดเวลาและต้นทุนในการพัฒนา คอมพิวเตอร์ช่วยเร่งการพัฒนาเทคโนโลยี 3. การลงทุนจากรัฐบาลและเอกชน 💰 เมื่อมีเงินลงทุนมาก ๆ นักพัฒนาก็สามารถทำการทดลองและสร้างสรรค์สิ่งใหม่ ๆ ได้มากขึ้น 4. การมีส่วนร่วมของชุมชนนักพัฒนา 👩‍💻👨‍💻 ปัจจุบันมีชุมชนนักพัฒนาทั่วโลกที่ช่วยกันแก้ปัญหาและสร้างนวัตกรรมใหม่ ๆ ทำให้เทคโนโลยีพัฒนาเร็วขึ้น 🌟 ผลกระทบของการเปลี่ยนแปลงเทคโนโลยี ✅ ผลดี ชีวิตสะดวกสบายขึ้น การสื่อสารรวดเร็วขึ้น การแพทย์ก้าวหน้า การศึกษาง่ายขึ้น สร้างงานใหม่ ๆ มากมาย ❌ ผลเสีย คนติดเทคโนโลยี ปัญหาความเป็นส่วนตัว คนตกงานจากหุ่นยนต์ มลพิษจากขยะอิเล็กทรอนิกส์ ช่องว่างทางดิจิทัล เทคโนโลยีมีผลกระทบทั้งในด้านดีและด้านที่ต้องระวัง 🤔 คำถามชวนคิด 1. ถ้าไม่มีอินเทอร์เน็ต ชีวิตประจำวันของเราจะแตกต่างจากตอนนี้อย่างไร? 2. เทคโนโลยีใดที่เปลี่ยนแปลงชีวิตของคุณมากที่สุด? เพราะอะไร? 3. คุณคิดว่าในอนาคตอีก 50 ปี เทคโนโลยีจะเปลี่ยนแปลงไปอย่างไรบ้าง? 4. เราควรเตรียมตัวอย่างไรให้ทันกับการเปลี่ยนแปลงทางเทคโนโลยี? 5. เทคโนโลยีใดที่คุณอยากให้มีในอนาคต? มันจะช่วยแก้ปัญหาอะไร? 🔮 เทคโนโลยีที่น่าจับตามองในอนาคต 🤖 ปัญญาประดิษฐ์ (AI) AI จะฉลาดขึ้นและช่วยมนุษย์ทำงานได้มากขึ้น 🧬 เทคโนโลยีชีวภาพ การแก้ไขยีนเพื่อรักษาโรคและเพิ่มศักยภาพมนุษย์ 🌍 พลังงานสะอาด เทคโนโลยีพลังงานทดแทนที่จะช่วยโลกของเรา 🚀 การสำรวจอวกาศ การเดินทางไปดาวอังคารและการอยู่อาศัยในอวกาศ ✨ สรุป เทคโนโลยีเปลี่ยนแปลงอย่างรวดเร็วเพราะ 👥 ความต้องการของมนุษย์ 🏆 การแข่งขันทางธุรกิจ 🔬 การค้นพบทางวิทยาศาสตร์ และ 🌐 อินเทอร์เน็ตที่เชื่อมโยงโลก การเปลี่ยนแปลงนี้มีทั้งข้อดีและข้อเสียที่เราต้องเรียนรู้และปรับตัว สุดท้ายนี้ จำไว้ว่า&#8230; เทคโนโลยีเป็นเพียงเครื่องมือ สิ่งสำคัญที่สุดคือ เราจะใช้มันอย่างชาญฉลาดและมีความรับผิดชอบอย่างไร เขียนโดย:kroochut.com ผู้ก่อตั้งกลุ่มครูผู้สอนวิทยาการคำนวณแห่งประเทศไทย เผยแพร่: 9 มิถุนายน 2025 แชร์บน Facebook ทวีต ส่งทาง LINE ↑</p>
<p>The post <a href="https://www.kroochut.com/technology-change-2/">ทำไมเทคโนโลยีถึงเปลี่ยนแปลงตลอดเวลา? 🚀</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ทำไมเทคโนโลยีถึงเปลี่ยนแปลงตลอดเวลา? 🚀 เข้าใจง่าย ๆ สำหรับนักเรียน</title>
    
    <!-- Meta Description -->
    <meta name="description" content="ค้นพบสาเหตุที่ทำให้เทคโนโลยีเปลี่ยนแปลงไปเรื่อย ๆ! บทความสนุกสำหรับนักเรียน ม.1-3 พร้อมตัวอย่างง่าย ๆ ตารางเปรียบเทียบ และคำถามชวนคิด ใช้เวลาอ่านแค่ 10 นาที">
    
    <!-- Meta Tags -->
    <meta name="keywords" content="เทคโนโลยี, การเปลี่ยนแปลงเทคโนโลยี, นักเรียน, ม.1, ม.2, ม.3, วิทยาศาสตร์, นวัตกรรม, การประดิษฐ์, อนาคต">
    <meta name="author" content="TechEdu Thailand">
    <meta name="robots" content="index, follow">
    <meta name="language" content="Thai">
    <meta name="audience" content="students, teenagers">
    <meta name="education-level" content="secondary">
    
    <!-- Open Graph Tags -->
    <meta property="og:title" content="ทำไมเทคโนโลยีถึงเปลี่ยนแปลงตลอดเวลา? � เข้าใจง่าย ๆ สำหรับนักเรียน">
    <meta property="og:description" content="ค้นพบสาเหตุที่ทำให้เทคโนโลยีเปลี่ยนแปลงไปเรื่อย ๆ! บทความสนุกสำหรับนักเรียน ม.1-3 พร้อมตัวอย่างง่าย ๆ">
    <meta property="og:type" content="article">
    <meta property="og:image" content="https://images.pexels.com/photos/256381/pexels-photo-256381.jpeg">
    <meta property="og:url" content="https://www.techeduthailand.com/tech-change">
    <meta property="og:site_name" content="TechEdu Thailand">
    
    <!-- Twitter Card Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="ทำไมเทคโนโลยีถึงเปลี่ยนแปลงตลอดเวลา? 🚀">
    <meta name="twitter:description" content="ค้นพบสาเหตุที่ทำให้เทคโนโลยีเปลี่ยนแปลงไปเรื่อย ๆ! บทความสนุกสำหรับนักเรียน">
    <meta name="twitter:image" content="https://images.pexels.com/photos/256381/pexels-photo-256381.jpeg">
    <meta name="twitter:site" content="@TechEduTH">
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="https://example.com/favicon.png">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://www.techeduthailand.com/tech-change">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.8;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
        }
        
        .container {
            max-width: 1000px;
            margin: 20px auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
            color: white;
            padding: 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .header::before {
            content: '🚀🔬💡🌟';
            position: absolute;
            font-size: 80px;
            opacity: 0.1;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
            50% { transform: translate(-50%, -50%) translateY(-10px); }
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            position: relative;
            z-index: 1;
        }
        
        .header p {
            font-size: 1.3em;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }
        
        .reading-time {
            background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
            color: #2d3436;
            padding: 15px;
            text-align: center;
            font-weight: bold;
            font-size: 1.1em;
        }
        
        .content {
            padding: 40px;
        }
        
        .intro-section {
            background: linear-gradient(135deg, #74b9ff, #0984e3);
            color: white;
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .intro-section h2 {
            font-size: 2em;
            margin-bottom: 15px;
        }
        
        .section {
            margin-bottom: 40px;
            background: #f8f9fa;
            padding: 30px;
            border-radius: 15px;
            border-left: 5px solid #ff6b6b;
        }
        
        .section h2 {
            color: #2d3436;
            font-size: 1.8em;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section h3 {
            color: #636e72;
            font-size: 1.4em;
            margin: 25px 0 15px 0;
            border-bottom: 2px solid #ddd;
            padding-bottom: 10px;
        }
        
        .image-container {
            text-align: center;
            margin: 25px 0;
        }
        
        .image-container img {
            max-width: 100%;
            height: 250px;
            object-fit: cover;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        
        .image-container img:hover {
            transform: scale(1.02);
        }
        
        .image-caption {
            font-style: italic;
            color: #636e72;
            margin-top: 10px;
            font-size: 0.9em;
        }
        
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 25px 0;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .comparison-table th {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 15px;
            text-align: center;
            font-weight: bold;
        }
        
        .comparison-table td {
            padding: 15px;
            text-align: center;
            border-bottom: 1px solid #eee;
        }
        
        .comparison-table tr:nth-child(even) {
            background: #f8f9fa;
        }
        
        .comparison-table tr:hover {
            background: #e3f2fd;
            transform: scale(1.02);
            transition: all 0.3s ease;
        }
        
        .fun-fact {
            background: linear-gradient(135deg, #fd79a8, #fdcb6e);
            color: white;
            padding: 20px;
            border-radius: 15px;
            margin: 25px 0;
            text-align: center;
            font-weight: bold;
            font-size: 1.1em;
        }
        
        .timeline {
            position: relative;
            margin: 30px 0;
        }
        
        .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(to bottom, #ff6b6b, #4ecdc4);
            transform: translateX(-50%);
        }
        
        .timeline-item {
            position: relative;
            margin: 30px 0;
            padding: 20px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            width: 45%;
        }
        
        .timeline-item:nth-child(odd) {
            left: 0;
        }
        
        .timeline-item:nth-child(even) {
            left: 55%;
        }
        
        .timeline-item::before {
            content: '';
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            background: #ff6b6b;
            border-radius: 50%;
            transform: translateY(-50%);
        }
        
        .timeline-item:nth-child(odd)::before {
            right: -35px;
        }
        
        .timeline-item:nth-child(even)::before {
            left: -35px;
        }
        
        .timeline-year {
            font-weight: bold;
            color: #ff6b6b;
            font-size: 1.2em;
            margin-bottom: 10px;
        }
        
        .question-box {
            background: linear-gradient(135deg, #a29bfe, #6c5ce7);
            color: white;
            padding: 25px;
            border-radius: 15px;
            margin: 30px 0;
        }
        
        .question-box h3 {
            margin-bottom: 15px;
            font-size: 1.5em;
        }
        
        .question-list {
            list-style: none;
            padding: 0;
        }
        
        .question-list li {
            margin: 15px 0;
            padding: 15px;
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            font-size: 1.1em;
        }
        
        .highlight-box {
            background: linear-gradient(135deg, #55efc4, #00b894);
            color: white;
            padding: 25px;
            border-radius: 15px;
            margin: 25px 0;
            text-align: center;
        }
        
        .highlight-box h3 {
            margin-bottom: 15px;
            font-size: 1.6em;
        }
        
        .conclusion {
            background: linear-gradient(135deg, #fd79a8, #e84393);
            color: white;
            padding: 30px;
            border-radius: 15px;
            margin-top: 30px;
            text-align: center;
        }
        
        .conclusion h2 {
            margin-bottom: 20px;
            font-size: 2em;
        }
        
        .emoji-large {
            font-size: 2em;
            margin: 0 10px;
        }
        
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 25px 0;
        }
        
        .card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card h4 {
            color: #2d3436;
            margin-bottom: 15px;
            font-size: 1.3em;
        }
        
        .card ul {
            padding-left: 20px;
        }
        
        .card li {
            margin-bottom: 8px;
        }
        
        .interactive-element {
            cursor: pointer;
            position: relative;
            padding-left: 30px;
        }
        
        .interactive-element::before {
            content: '👉';
            position: absolute;
            left: 0;
            transition: transform 0.3s ease;
        }
        
        .interactive-element:hover::before {
            transform: translateX(5px);
        }
        
        .floating-button {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5em;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            cursor: pointer;
            z-index: 100;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .author-box {
            display: flex;
            align-items: center;
            margin: 30px 0;
            padding: 20px;
            background: #f1f3f5;
            border-radius: 15px;
        }
        
        .author-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 20px;
            border: 3px solid #74b9ff;
        }
        
        .author-info h4 {
            color: #2d3436;
            margin-bottom: 5px;
        }
        
        .author-info p {
            color: #636e72;
            font-size: 0.9em;
        }
        
        .social-sharing {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 30px 0;
        }
        
        .social-button {
            padding: 10px 20px;
            border-radius: 50px;
            color: white;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            transition: transform 0.3s ease;
        }
        
        .social-button:hover {
            transform: translateY(-3px);
        }
        
        .facebook {
            background: #3b5998;
        }
        
        .twitter {
            background: #1da1f2;
        }
        
        .line {
            background: #00b900;
        }
        
        @media (max-width: 768px) {
            .container {
                margin: 10px;
                border-radius: 15px;
            }
            
            .header {
                padding: 20px;
            }
            
            .header h1 {
                font-size: 2em;
            }
            
            .content {
                padding: 20px;
            }
            
            .timeline::before {
                left: 30px;
            }
            
            .timeline-item {
                width: calc(100% - 60px);
                left: 60px !important;
            }
            
            .timeline-item::before {
                left: -35px !important;
            }
            
            .card-grid {
                grid-template-columns: 1fr;
            }
            
            .author-box {
                flex-direction: column;
                text-align: center;
            }
            
            .author-avatar {
                margin-right: 0;
                margin-bottom: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>ทำไมเทคโนโลยีถึงเปลี่ยนแปลงตลอดเวลา? 🚀</h1>
            <p>มาค้นหาคำตอบที่น่าสนใจกันเถอะ!</p>
        </div>
        
        <div class="reading-time">
            ⏱️ ใช้เวลาอ่าน: ประมาณ 10 นาที | 📚 เหมาะสำหรับ: นักเรียน ม.1-3
        </div>
        
        <div class="content">
            <div class="intro-section">
                <h2>🤔 เคยสงสัยไหม?</h2>
                <p>ทำไมโทรศัพท์ของเราถึงสามารถทำอะไรได้มากกว่าคอมพิวเตอร์ในอดีต? ทำไมเทคโนโลยีถึงเปลี่ยนแปลงเร็วขนาดนี้? วันนี้เราจะมาหาคำตอบไปด้วยกัน!</p>
            </div>
            
            <div class="image-container">
                <img decoding="async" src="https://images.pexels.com/photos/256381/pexels-photo-256381.jpeg" alt="Evolution of Technology">
                <div class="image-caption">การพัฒนาของเทคโนโลยีจากอดีตสู่ปัจจุบัน</div>
            </div>
            
            <div class="section">
                <h2>🔍 สาเหตุหลักของการเปลี่ยนแปลงเทคโนโลยี</h2>
                
                <h3>1. ความต้องการของมนุษย์ 👥</h3>
                <p>มนุษย์มีความต้องการที่เพิ่มมากขึ้นเรื่อย ๆ เราต้องการชีวิตที่สะดวกสบาย รวดเร็ว และปลอดภัยมากกว่าเดิม เมื่อไหร่ที่เราเจอปัญหา เราก็จะหาทางแก้ไข และนั่นคือจุดเริ่มต้นของนวัตกรรมใหม่ ๆ</p>
                
                <div class="image-container">
                    <img decoding="async" src="https://images.pexels.com/photos/3184306/pexels-photo-3184306.jpeg" alt="Human needs and technology">
                    <div class="image-caption">เทคโนโลยีเกิดขึ้นเพื่อตอบสนองความต้องการของมนุษย์</div>
                </div>
                
                <div class="fun-fact">
                    🎯 <strong>Fun Fact:</strong> รู้ไหมว่าโทรศัพท์มือถือถูกประดิษฐ์ขึ้นเพราะคนต้องการติดต่อสื่อสารแบบเคลื่อนที่ได้!
                </div>
                
                <h3>2. การแข่งขันทางธุรกิจ 💼</h3>
                <p>บริษัทต่าง ๆ แข่งขันกันเพื่อให้ได้เทคโนโลยีที่ดีที่สุด ใครที่ทำได้ดีกว่า ใครก็จะขายดีกว่า การแข่งขันนี้ทำให้เทคโนโลยีพัฒนาไปอย่างรวดเร็ว</p>
                
                <div class="card-grid">
                    <div class="card">
                        <h4>📱 ตัวอย่าง: สมาร์ทโฟน</h4>
                        <p>Apple vs Samsung vs Google ทำให้โทรศัพท์พัฒนาไปอย่างรวดเร็ว</p>
                    </div>
                    <div class="card">
                        <h4>🚗 ตัวอย่าง: รถยนต์</h4>
                        <p>Tesla vs BMW vs Mercedes ทำให้รถไฟฟ้าพัฒนาเร็วมาก</p>
                    </div>
                </div>
                
                <h3>3. การค้นพบทางวิทยาศาสตร์ 🔬</h3>
                <p>เมื่อนักวิทยาศาสตร์ค้นพบสิ่งใหม่ ๆ เราก็สามารถนำมาประยุกต์ใช้ในเทคโนโลยีได้ เช่น การค้นพบไฟฟ้า ทำให้เราได้หลอดไฟ คอมพิวเตอร์ และเครื่องใช้ไฟฟ้าต่าง ๆ</p>
                
                <div class="image-container">
                    <img decoding="async" src="https://images.pexels.com/photos/2280549/pexels-photo-2280549.jpeg" alt="Scientific discovery">
                    <div class="image-caption">การค้นพบทางวิทยาศาสตร์เป็นรากฐานของเทคโนโลยี</div>
                </div>
                
                <h3>4. กฎของมัวร์ (Moore&#8217;s Law) 📈</h3>
                <p>กอร์ดอน มัวร์ ผู้ร่วมก่อตั้งอินเทล ทำนายไว้ว่า &#8220;จำนวนทรานซิสเตอร์ในชิปจะเพิ่มขึ้นเป็นสองเท่าทุก ๆ 2 ปี&#8221; การทำนายนี้เป็นจริงมานานหลายสิบปี ทำให้คอมพิวเตอร์มีพลังมากขึ้นเรื่อย ๆ</p>
                
                <div class="highlight-box">
                    <h3>💡 รู้ไหม?</h3>
                    <p>ปัจจุบันเทคโนโลยีพัฒนาเร็วขึ้น 2 เท่าทุก ๆ 2 ปี! นี่คือสิ่งที่เรียกว่า &#8220;กฎของมัวร์&#8221; (Moore&#8217;s Law)</p>
                </div>
            </div>
            
            <div class="section">
                <h2>📊 ตารางเปรียบเทียบ: อดีต vs ปัจจุบัน</h2>
                
                <table class="comparison-table">
                    <thead>
                        <tr>
                            <th>ด้าน</th>
                            <th>อดีต (50 ปีที่แล้ว)</th>
                            <th>ปัจจุบัน</th>
                            <th>อนาคต (คาดการณ์)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>การสื่อสาร 📞</strong></td>
                            <td>โทรศัพท์บ้าน, จดหมาย</td>
                            <td>สมาร์ทโฟน, อีเมล, LINE</td>
                            <td>VR, AR, การสื่อสารด้วยความคิด</td>
                        </tr>
                        <tr>
                            <td><strong>การเดินทาง 🚗</strong></td>
                            <td>รถยนต์เครื่องยนต์</td>
                            <td>รถไฟฟ้า, รถไฮบริด</td>
                            <td>รถบินได้, รถขับเคลื่อนอัตโนมัติ</td>
                        </tr>
                        <tr>
                            <td><strong>การศึกษา 📚</strong></td>
                            <td>หนังสือ, กระดานดำ</td>
                            <td>อินเทอร์เน็ต, แท็บเล็ต</td>
                            <td>AI ครู, การเรียนใน VR</td>
                        </tr>
                        <tr>
                            <td><strong>การแพทย์ 🏥</strong></td>
                            <td>เครื่องมือพื้นฐาน</td>
                            <td>เครื่อง MRI, หุ่นยนต์ผ่าตัด</td>
                            <td>การรักษาด้วยยีน, นาโนเทคโนโลยี</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="section">
                <h2>⏰ ไทม์ไลน์: จุดเปลี่ยนสำคัญของเทคโนโลยี</h2>
                
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-year">1876</div>
                        <h4>📞 โทรศัพท์</h4>
                        <p>Alexander Graham Bell ประดิษฐ์โทรศัพท์ เปลี่ยนวิธีการสื่อสารของมนุษย์ไปตลอดกาล</p>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-year">1969</div>
                        <h4>🌐 อินเทอร์เน็ต</h4>
                        <p>ARPANET เกิดขึ้น ซึ่งเป็นต้นกำเนิดของอินเทอร์เน็ตที่เราใช้กันอยู่ทุกวันนี้</p>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-year">1973</div>
                        <h4>📱 โทรศัพท์มือถือ</h4>
                        <p>Motorola สร้างโทรศัพท์มือถือเครื่องแรก หนัก 1.1 กิโลกรัม!</p>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-year">2007</div>
                        <h4>🍎 iPhone</h4>
                        <p>Apple เปิดตัว iPhone เปลี่ยนโลกสมาร์ทโฟนไปตลอดกาล</p>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-year">2020</div>
                        <h4>🤖 AI ยุคใหม่</h4>
                        <p>AI เริ่มเข้ามามีบทบาทในชีวิตประจำวันมากขึ้น</p>
                    </div>
                </div>
            </div>
            
            <div class="image-container">
                <img decoding="async" src="https://images.pexels.com/photos/373543/pexels-photo-373543.jpeg" alt="Technology timeline">
                <div class="image-caption">การพัฒนาเทคโนโลยีตามกาลเวลา</div>
            </div>
            
            <div class="section">
                <h2>🚀 ปัจจัยที่เร่งการเปลี่ยนแปลงในยุคปัจจุบัน</h2>
                
                <h3>1. อินเทอร์เน็ตและการแชร์ข้อมูล 🌐</h3>
                <p>ในอดีต นักวิทยาศาสตร์อาจใช้เวลาหลายปีกว่าจะได้รับข้อมูลจากคนอื่น แต่ตอนนี้เราสามารถแชร์ข้อมูลได้ทันที ทำให้การพัฒนาเทคโนโลยีเร็วขึ้นมาก</p>
                
                <h3>2. คอมพิวเตอร์ที่มีประสิทธิภาพสูง 💻</h3>
                <p>คอมพิวเตอร์ทำให้เราสามารถจำลองและทดสอบสิ่งต่าง ๆ ได้ก่อนที่จะสร้างจริง ทำให้ประหยัดเวลาและต้นทุนในการพัฒนา</p>
                
                <div class="image-container">
                    <img decoding="async" src="https://images.pexels.com/photos/1181677/pexels-photo-1181677.jpeg" alt="Computer technology">
                    <div class="image-caption">คอมพิวเตอร์ช่วยเร่งการพัฒนาเทคโนโลยี</div>
                </div>
                
                <h3>3. การลงทุนจากรัฐบาลและเอกชน 💰</h3>
                <p>เมื่อมีเงินลงทุนมาก ๆ นักพัฒนาก็สามารถทำการทดลองและสร้างสรรค์สิ่งใหม่ ๆ ได้มากขึ้น</p>
                
                <div class="interactive-element">
                    <h3>4. การมีส่วนร่วมของชุมชนนักพัฒนา 👩‍💻👨‍💻</h3>
                    <p>ปัจจุบันมีชุมชนนักพัฒนาทั่วโลกที่ช่วยกันแก้ปัญหาและสร้างนวัตกรรมใหม่ ๆ ทำให้เทคโนโลยีพัฒนาเร็วขึ้น</p>
                </div>
            </div>
            
            <div class="section">
                <h2>🌟 ผลกระทบของการเปลี่ยนแปลงเทคโนโลยี</h2>
                
                <div class="card-grid">
                    <div class="card">
                        <h4>✅ ผลดี</h4>
                        <ul>
                            <li>ชีวิตสะดวกสบายขึ้น</li>
                            <li>การสื่อสารรวดเร็วขึ้น</li>
                            <li>การแพทย์ก้าวหน้า</li>
                            <li>การศึกษาง่ายขึ้น</li>
                            <li>สร้างงานใหม่ ๆ มากมาย</li>
                        </ul>
                    </div>
                    <div class="card">
                        <h4>❌ ผลเสีย</h4>
                        <ul>
                            <li>คนติดเทคโนโลยี</li>
                            <li>ปัญหาความเป็นส่วนตัว</li>
                            <li>คนตกงานจากหุ่นยนต์</li>
                            <li>มลพิษจากขยะอิเล็กทรอนิกส์</li>
                            <li>ช่องว่างทางดิจิทัล</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="image-container">
                <img decoding="async" src="https://images.pexels.com/photos/1181263/pexels-photo-1181263.jpeg" alt="Impact of technology">
                <div class="image-caption">เทคโนโลยีมีผลกระทบทั้งในด้านดีและด้านที่ต้องระวัง</div>
            </div>
            
            <div class="question-box">
                <h3>🤔 คำถามชวนคิด</h3>
                <ul class="question-list">
                    <li>1. ถ้าไม่มีอินเทอร์เน็ต ชีวิตประจำวันของเราจะแตกต่างจากตอนนี้อย่างไร?</li>
                    <li>2. เทคโนโลยีใดที่เปลี่ยนแปลงชีวิตของคุณมากที่สุด? เพราะอะไร?</li>
                    <li>3. คุณคิดว่าในอนาคตอีก 50 ปี เทคโนโลยีจะเปลี่ยนแปลงไปอย่างไรบ้าง?</li>
                    <li>4. เราควรเตรียมตัวอย่างไรให้ทันกับการเปลี่ยนแปลงทางเทคโนโลยี?</li>
                    <li>5. เทคโนโลยีใดที่คุณอยากให้มีในอนาคต? มันจะช่วยแก้ปัญหาอะไร?</li>
                </ul>
            </div>
            
            <div class="section">
                <h2>🔮 เทคโนโลยีที่น่าจับตามองในอนาคต</h2>
                
                <div class="card-grid">
                    <div class="card">
                        <h4>🤖 ปัญญาประดิษฐ์ (AI)</h4>
                        <p>AI จะฉลาดขึ้นและช่วยมนุษย์ทำงานได้มากขึ้น</p>
                    </div>
                    <div class="card">
                        <h4>🧬 เทคโนโลยีชีวภาพ</h4>
                        <p>การแก้ไขยีนเพื่อรักษาโรคและเพิ่มศักยภาพมนุษย์</p>
                    </div>
                    <div class="card">
                        <h4>🌍 พลังงานสะอาด</h4>
                        <p>เทคโนโลยีพลังงานทดแทนที่จะช่วยโลกของเรา</p>
                    </div>
                    <div class="card">
                        <h4>🚀 การสำรวจอวกาศ</h4>
                        <p>การเดินทางไปดาวอังคารและการอยู่อาศัยในอวกาศ</p>
                    </div>
                </div>
            </div>
            
            <div class="conclusion">
                <h2>✨ สรุป</h2>
                <p>เทคโนโลยีเปลี่ยนแปลงอย่างรวดเร็วเพราะ <span class="emoji-large">👥</span> ความต้องการของมนุษย์ <span class="emoji-large">🏆</span> การแข่งขันทางธุรกิจ <span class="emoji-large">🔬</span> การค้นพบทางวิทยาศาสตร์ และ <span class="emoji-large">🌐</span> อินเทอร์เน็ตที่เชื่อมโยงโลก</p>
                <p>การเปลี่ยนแปลงนี้มีทั้งข้อดีและข้อเสียที่เราต้องเรียนรู้และปรับตัว</p>
                <p>สุดท้ายนี้ จำไว้ว่า&#8230; <strong>เทคโนโลยีเป็นเพียงเครื่องมือ</strong> สิ่งสำคัญที่สุดคือ <strong>เราจะใช้มันอย่างชาญฉลาดและมีความรับผิดชอบอย่างไร</strong></p>
            </div>
            
            <div class="author-box">
                <img decoding="async" src="https://img2.pic.in.th/pic/500229174_1002588881860821_1415602655099240275_n.md.jpg" alt="Author" class="author-avatar">
                <div class="author-info">
                    <h4>เขียนโดย:kroochut.com</h4>
                    <p><a href="https://www.facebook.com/groups/275583407130693/?locale=th_TH">ผู้ก่อตั้งกลุ่มครูผู้สอนวิทยาการคำนวณแห่งประเทศไทย</a></p>
                    <p>เผยแพร่: 9 มิถุนายน 2025</p>
                </div>
            </div>
            
            <div class="social-sharing">
                <a href="#" class="social-button facebook">
                    <span>แชร์บน Facebook</span>
                </a>
                <a href="#" class="social-button twitter">
                    <span>ทวีต</span>
                </a>
                <a href="#" class="social-button line">
                    <span>ส่งทาง LINE</span>
                </a>
            </div>
        </div>
    </div>
    
    <div class="floating-button" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
        ↑
    </div>
    
    <script>
        // เพิ่มเอฟเฟกต์เมื่อเลื่อนมาอ่านแต่ละส่วน
        document.addEventListener('DOMContentLoaded', function() {
            const sections = document.querySelectorAll('.section, .intro-section, .conclusion');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = 1;
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, {threshold: 0.1});
            
            sections.forEach(section => {
                section.style.opacity = 0;
                section.style.transform = 'translateY(20px)';
                section.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                observer.observe(section);
            });
            
            // เพิ่มการนับจำนวนผู้อ่าน (ตัวอย่างเท่านั้น)
            if (localStorage.getItem('pageView')) {
                let views = parseInt(localStorage.getItem('pageView')) + 1;
                localStorage.setItem('pageView', views.toString());
            } else {
                localStorage.setItem('pageView', '1');
            }
        });
    </script>
</body>
</html>



<p></p>
<p>The post <a href="https://www.kroochut.com/technology-change-2/">ทำไมเทคโนโลยีถึงเปลี่ยนแปลงตลอดเวลา? 🚀</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>🛡️ แบบฝึกหัดอุปกรณ์ป้องกันอันตราย ม.3 วิชาเทคโนโลยี (การออกแบบและเทคโนโลยี)</title>
		<link>https://www.kroochut.com/personal-protective-equipment/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Wed, 28 May 2025 12:34:59 +0000</pubDate>
				<category><![CDATA[การออกแบบและเทคโนโลยี]]></category>
		<category><![CDATA[assessment tool]]></category>
		<category><![CDATA[drag and drop]]></category>
		<category><![CDATA[e-learning]]></category>
		<category><![CDATA[educational game]]></category>
		<category><![CDATA[gamification]]></category>
		<category><![CDATA[interactive quiz]]></category>
		<category><![CDATA[personal protective equipment]]></category>
		<category><![CDATA[PPE equipment]]></category>
		<category><![CDATA[safety equipment]]></category>
		<category><![CDATA[workplace safety]]></category>
		<category><![CDATA[ครูเทคโนโลยี]]></category>
		<category><![CDATA[ความปลอดภัยในการทำงาน]]></category>
		<category><![CDATA[ตรวจคำตอบทันที]]></category>
		<category><![CDATA[ถุงมือนิรภัย]]></category>
		<category><![CDATA[ที่อุดหู]]></category>
		<category><![CDATA[นักเรียนมัธยมต้น]]></category>
		<category><![CDATA[บันทึกคะแนน]]></category>
		<category><![CDATA[ม.3]]></category>
		<category><![CDATA[มัธยมศึกษาปีที่ 3]]></category>
		<category><![CDATA[รองเท้านิรภัย]]></category>
		<category><![CDATA[ระบบสุ่มคำถาม]]></category>
		<category><![CDATA[ลากวาง]]></category>
		<category><![CDATA[วิชาเทคโนโลยี]]></category>
		<category><![CDATA[สื่อการเรียนการสอน]]></category>
		<category><![CDATA[สื่อดิจิทัล]]></category>
		<category><![CDATA[หน้ากากกันฝุ่น]]></category>
		<category><![CDATA[หมวกนิรภัย]]></category>
		<category><![CDATA[อุปกรณ์ป้องกันลำตัว]]></category>
		<category><![CDATA[อุปกรณ์ป้องกันอันตราย]]></category>
		<category><![CDATA[เกมการศึกษา]]></category>
		<category><![CDATA[เสื้อกั๊กสะท้อนแสง]]></category>
		<category><![CDATA[แบบทดสอบออนไลน์]]></category>
		<category><![CDATA[แบบฝึกหัดเทคโนโลยี]]></category>
		<category><![CDATA[แว่นตานิรภัย]]></category>
		<guid isPermaLink="false">https://www.kroochut.com/?p=659</guid>

					<description><![CDATA[<p>แบบฝึกหัดอุปกรณ์ป้องกันอันตราย &#8211; เทคโนโลยี ม.3 🛡️ แบบฝึกหัดอุปกรณ์ป้องกันอันตราย เทคโนโลยี (การออกแบบและเทคโนโลยี) &#8211; ชั้นมัธยมศึกษาปีที่ 3 📝 กรอกข้อมูลนักเรียน 👤 ชื่อ-นามสกุล: 🎓 ชั้น: 🔢 เลขที่: 🚀 เริ่มทำแบบฝึกหัด คะแนน: 0/8 คำถามที่ 1 จับคู่อุปกรณ์ป้องกันกับหน้าที่ที่ถูกต้อง 🔧 อุปกรณ์ป้องกัน 📋 หน้าที่ของอุปกรณ์ ✅ ตรวจคำตอบ ➡️ ข้อถัดไป 🎉 เสร็จสิ้นแบบฝึกหัด! 🔄 เริ่มใหม่</p>
<p>The post <a href="https://www.kroochut.com/personal-protective-equipment/">🛡️ แบบฝึกหัดอุปกรณ์ป้องกันอันตราย ม.3 วิชาเทคโนโลยี (การออกแบบและเทคโนโลยี)</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image aligncenter size-full is-resized"><img fetchpriority="high" decoding="async" width="1015" height="1024" src="https://www.kroochut.com/wp-content/uploads/2025/05/1111-1015x1024-1.png" alt="" class="wp-image-660" style="width:auto;height:600px" srcset="https://www.kroochut.com/wp-content/uploads/2025/05/1111-1015x1024-1.png 1015w, https://www.kroochut.com/wp-content/uploads/2025/05/1111-1015x1024-1-297x300.png 297w, https://www.kroochut.com/wp-content/uploads/2025/05/1111-1015x1024-1-150x150.png 150w, https://www.kroochut.com/wp-content/uploads/2025/05/1111-1015x1024-1-768x775.png 768w" sizes="(max-width: 1015px) 100vw, 1015px" /></figure>



<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="แบบฝึกหัดลากวางอุปกรณ์ป้องกันอันตรายในการทำงาน สำหรับนักเรียน ม.3 วิชาเทคโนโลยี มีระบบสุ่มคำถาม ตรวจคำตอบทันที และบันทึกคะแนน เรียนรู้หมวกนิรภัย แว่นตา รองเท้า ถุงมือ และอุปกรณ์ป้องกันอื่นๆ">
    <meta name="keywords" content="อุปกรณ์ป้องกันอันตราย, แบบฝึกหัดเทคโนโลยี, ม.3, มัธยมศึกษาปีที่ 3, หมวกนิรภัย, แว่นตานิรภัย, รองเท้านิรภัย, ที่อุดหู, เสื้อกั๊กสะท้อนแสง, ถุงมือนิรภัย, หน้ากากกันฝุ่น, อุปกรณ์ป้องกันลำตัว, ลากวาง, drag and drop, เกมการศึกษา, แบบทดสอบออนไลน์, ความปลอดภัยในการทำงาน, การออกแบบและเทคโนโลยี, interactive quiz, educational game, safety equipment, วิชาเทคโนโลยี, ครูเทคโนโลยี, สื่อการเรียนการสอน, นักเรียนมัธยมต้น, workplace safety, PPE equipment, personal protective equipment, สื่อดิจิทัล, e-learning, gamification, ระบบสุ่มคำถาม, ตรวจคำตอบทันที, บันทึกคะแนน, แบบประเมิน, assessment tool">
    <meta name="author" content="ครูเทคโนโลยี">
    <title>แบบฝึกหัดอุปกรณ์ป้องกันอันตราย &#8211; เทคโนโลยี ม.3</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Sarabun', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .student-form {
            padding: 30px;
            background: #f8f9fa;
            border-bottom: 3px solid #e9ecef;
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
            font-size: 1.1em;
        }

        .form-group input {
            padding: 12px 15px;
            border: 2px solid #ddd;
            border-radius: 10px;
            font-size: 1em;
            transition: all 0.3s ease;
        }

        .form-group input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
        }

        .start-btn {
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            border: none;
            padding: 15px 40px;
            font-size: 1.2em;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .start-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }

        .start-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .game-area {
            padding: 40px;
            display: none;
        }

        .score-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #74b9ff, #0984e3);
            color: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .student-info {
            font-size: 1.1em;
        }

        .score {
            font-size: 1.5em;
            font-weight: bold;
        }

        .question-container {
            background: #f8f9fa;
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        .question-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .question-number {
            background: #667eea;
            color: white;
            padding: 10px 20px;
            border-radius: 25px;
            display: inline-block;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .question-text {
            font-size: 1.4em;
            color: #333;
            font-weight: bold;
        }

        .drag-drop-area {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-top: 30px;
        }

        .items-container, .targets-container {
            min-height: 400px;
        }

        .items-container h3, .targets-container h3 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
            font-size: 1.3em;
            padding: 15px;
            background: linear-gradient(135deg, #fdcb6e, #e17055);
            color: white;
            border-radius: 10px;
        }

        .draggable-item {
            background: linear-gradient(135deg, #74b9ff, #0984e3);
            color: white;
            padding: 15px 20px;
            margin: 10px 0;
            border-radius: 12px;
            cursor: grab;
            transition: all 0.3s ease;
            font-size: 1.1em;
            font-weight: 500;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .draggable-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }

        .draggable-item:active {
            cursor: grabbing;
            transform: scale(0.95);
        }

        .drop-zone {
            border: 3px dashed #ddd;
            border-radius: 12px;
            padding: 20px;
            margin: 10px 0;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            font-size: 1.1em;
            color: #666;
            position: relative;
        }

        .drop-zone.drag-over {
            border-color: #667eea;
            background-color: rgba(102, 126, 234, 0.1);
            transform: scale(1.02);
        }

        .drop-zone.filled {
            background: linear-gradient(135deg, #00b894, #00a085);
            color: white;
            border-color: #00b894;
        }

        .drop-zone.incorrect {
            background: linear-gradient(135deg, #e17055, #d63031);
            color: white;
            border-color: #d63031;
        }

        .check-btn, .next-btn, .restart-btn {
            background: linear-gradient(135deg, #fd79a8, #e84393);
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 1.2em;
            border-radius: 25px;
            cursor: pointer;
            margin: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .check-btn:hover, .next-btn:hover, .restart-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }

        .controls {
            text-align: center;
            margin-top: 30px;
        }

        .result-summary {
            display: none;
            background: linear-gradient(135deg, #00b894, #00a085);
            color: white;
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            margin-top: 30px;
        }

        .result-summary h2 {
            font-size: 2.5em;
            margin-bottom: 20px;
        }

        .final-score {
            font-size: 3em;
            font-weight: bold;
            margin: 20px 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .feedback {
            padding: 20px;
            margin: 20px 0;
            border-radius: 10px;
            font-size: 1.2em;
            text-align: center;
            animation: fadeIn 0.5s ease;
        }

        .feedback.correct {
            background: linear-gradient(135deg, #00b894, #00a085);
            color: white;
        }

        .feedback.incorrect {
            background: linear-gradient(135deg, #e17055, #d63031);
            color: white;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e9ecef;
            border-radius: 4px;
            margin: 20px 0;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(135deg, #74b9ff, #0984e3);
            transition: width 0.3s ease;
            border-radius: 4px;
        }

        @media (max-width: 768px) {
            .drag-drop-area {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .header h1 {
                font-size: 2em;
            }
            
            .score-info {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🛡️ แบบฝึกหัดอุปกรณ์ป้องกันอันตราย</h1>
            <p>เทคโนโลยี (การออกแบบและเทคโนโลยี) &#8211; ชั้นมัธยมศึกษาปีที่ 3</p>
        </div>

        <div class="student-form" id="studentForm">
            <h2 style="text-align: center; margin-bottom: 20px; color: #333;">📝 กรอกข้อมูลนักเรียน</h2>
            <div class="form-row">
                <div class="form-group">
                    <label>👤 ชื่อ-นามสกุล:</label>
                    <input type="text" id="studentName" placeholder="กรอกชื่อ-นามสกุล" required>
                </div>
                <div class="form-group">
                    <label>🎓 ชั้น:</label>
                    <input type="text" id="studentClass" placeholder="เช่น ม.3/1" required>
                </div>
                <div class="form-group">
                    <label>🔢 เลขที่:</label>
                    <input type="number" id="studentNumber" placeholder="เลขที่" min="1" required>
                </div>
            </div>
            <div style="text-align: center;">
                <button class="start-btn" onclick="startQuiz()">🚀 เริ่มทำแบบฝึกหัด</button>
            </div>
        </div>

        <div class="game-area" id="gameArea">
            <div class="score-info">
                <div class="student-info" id="studentInfo"></div>
                <div class="score">คะแนน: <span id="currentScore">0</span>/<span id="totalQuestions">8</span></div>
            </div>

            <div class="progress-bar">
                <div class="progress-fill" id="progressFill" style="width: 0%"></div>
            </div>

            <div class="question-container" id="questionContainer">
                <div class="question-header">
                    <div class="question-number" id="questionNumber">คำถามที่ 1</div>
                    <div class="question-text" id="questionText">จับคู่อุปกรณ์ป้องกันกับหน้าที่ที่ถูกต้อง</div>
                </div>

                <div class="drag-drop-area">
                    <div class="items-container">
                        <h3>🔧 อุปกรณ์ป้องกัน</h3>
                        <div id="draggableItems"></div>
                    </div>
                    <div class="targets-container">
                        <h3>📋 หน้าที่ของอุปกรณ์</h3>
                        <div id="dropTargets"></div>
                    </div>
                </div>

                <div class="controls">
                    <button class="check-btn" id="checkBtn" onclick="checkAnswer()">✅ ตรวจคำตอบ</button>
                    <button class="next-btn" id="nextBtn" onclick="nextQuestion()" style="display: none;">➡️ ข้อถัดไป</button>
                </div>

                <div id="feedback"></div>
            </div>

            <div class="result-summary" id="resultSummary">
                <h2>🎉 เสร็จสิ้นแบบฝึกหัด!</h2>
                <div class="final-score" id="finalScore"></div>
                <div id="finalStudentInfo"></div>
                <div id="finalFeedback"></div>
                <button class="restart-btn" onclick="restartQuiz()">🔄 เริ่มใหม่</button>
            </div>
        </div>
    </div>

    <script>
        const safetyEquipment = {
            '🪖 หมวกนิรภัย': 'ป้องกันศีรษะจากสิ่งของตกหล่น การกระแทก และไฟฟ้าช็อต',
            '🥽 แว่นตานิรภัย': 'ป้องกันดวงตาจากฝุ่น สารเคมี แสงจ้า และเศษวัสดุ',
            '👢 รองเท้านิรภัย': 'ป้องกันเท้าจากการทิ่มแทง สิ่งของหนัก และสารเคมี',
            '🔇 ที่อุดหู': 'ป้องกันหูจากเสียงดังเกินไป ลดการสูญเสียการได้ยิน',
            '🦺 เสื้อกั๊กสะท้อนแสง': 'เพิ่มการมองเห็นในที่มืด ป้องกันอุบัติเหตุ',
            '🧤 ถุงมือนิรภัย': 'ป้องกันมือจากสารเคมี ความร้อน และวัตถุมีคม',
            '😷 หน้ากากกันฝุ่น': 'ป้องกันระบบหายใจจากฝุ่น ควัน และอนุภาคอันตราย',
            '🛡️ อุปกรณ์ป้องกันลำตัว': 'ป้องกันลำตัวจากสารเคมี ความร้อน และการกระแทก'
        };

        let currentQuestion = 0;
        let score = 0;
        let questions = [];
        let studentData = {};
        let answeredQuestions = [];

        function shuffleArray(array) {
            const newArray = [...array];
            for (let i = newArray.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
            }
            return newArray;
        }

        function generateQuestions() {
            const equipmentList = Object.keys(safetyEquipment);
            questions = shuffleArray(equipmentList).map(equipment => ({
                equipment: equipment,
                function: safetyEquipment[equipment],
                answered: false
            }));
        }

        function startQuiz() {
            const name = document.getElementById('studentName').value.trim();
            const studentClass = document.getElementById('studentClass').value.trim();
            const number = document.getElementById('studentNumber').value.trim();

            if (!name || !studentClass || !number) {
                alert('⚠️ กรุณากรอกข้อมูลให้ครบถ้วน');
                return;
            }

            studentData = { name, class: studentClass, number };
            
            document.getElementById('studentForm').style.display = 'none';
            document.getElementById('gameArea').style.display = 'block';
            
            document.getElementById('studentInfo').textContent = 
                `👤 ${studentData.name} | 🎓 ${studentData.class} | 🔢 เลขที่ ${studentData.number}`;
            
            generateQuestions();
            currentQuestion = 0;
            score = 0;
            answeredQuestions = [];
            
            document.getElementById('totalQuestions').textContent = questions.length;
            showQuestion();
        }

        function showQuestion() {
            if (currentQuestion >= questions.length) {
                showResult();
                return;
            }

            const question = questions[currentQuestion];
            document.getElementById('questionNumber').textContent = `คำถามที่ ${currentQuestion + 1}`;
            
            // Update progress
            const progress = ((currentQuestion) / questions.length) * 100;
            document.getElementById('progressFill').style.width = progress + '%';

            // Create draggable item
            const itemsContainer = document.getElementById('draggableItems');
            itemsContainer.innerHTML = `
                <div class="draggable-item" draggable="true" data-equipment="${question.equipment}">
                    ${question.equipment}
                </div>
            `;

            // Create drop targets with shuffled options
            const allFunctions = Object.values(safetyEquipment);
            const shuffledFunctions = shuffleArray(allFunctions);
            
            const targetsContainer = document.getElementById('dropTargets');
            targetsContainer.innerHTML = shuffledFunctions.map(func => `
                <div class="drop-zone" data-function="${func}">
                    ${func}
                </div>
            `).join('');

            // Add drag and drop event listeners
            addDragDropListeners();
            
            // Reset buttons and feedback
            document.getElementById('checkBtn').style.display = 'inline-block';
            document.getElementById('nextBtn').style.display = 'none';
            document.getElementById('feedback').innerHTML = '';
            
            // Clear any previous styling
            document.querySelectorAll('.drop-zone').forEach(zone => {
                zone.classList.remove('filled', 'incorrect');
            });
        }

        function addDragDropListeners() {
            const draggableItems = document.querySelectorAll('.draggable-item');
            const dropZones = document.querySelectorAll('.drop-zone');

            draggableItems.forEach(item => {
                item.addEventListener('dragstart', handleDragStart);
                item.addEventListener('dragend', handleDragEnd);
            });

            dropZones.forEach(zone => {
                zone.addEventListener('dragover', handleDragOver);
                zone.addEventListener('drop', handleDrop);
                zone.addEventListener('dragenter', handleDragEnter);
                zone.addEventListener('dragleave', handleDragLeave);
            });
        }

        function handleDragStart(e) {
            e.dataTransfer.setData('text/plain', e.target.dataset.equipment);
            e.target.style.opacity = '0.5';
        }

        function handleDragEnd(e) {
            e.target.style.opacity = '1';
        }

        function handleDragOver(e) {
            e.preventDefault();
        }

        function handleDragEnter(e) {
            e.preventDefault();
            e.target.classList.add('drag-over');
        }

        function handleDragLeave(e) {
            e.target.classList.remove('drag-over');
        }

        function handleDrop(e) {
            e.preventDefault();
            e.target.classList.remove('drag-over');
            
            const equipment = e.dataTransfer.getData('text/plain');
            const dropZone = e.target;
            
            // Clear previous drops
            document.querySelectorAll('.drop-zone').forEach(zone => {
                if (zone.classList.contains('filled')) {
                    zone.classList.remove('filled');
                    zone.innerHTML = zone.dataset.function;
                }
            });
            
            // Add item to drop zone
            dropZone.classList.add('filled');
            dropZone.innerHTML = `
                <div style="display: flex; align-items: center; gap: 10px;">
                    ${equipment} ➡️ ${dropZone.dataset.function}
                </div>
            `;
            
            // Hide draggable item
            document.querySelector(`[data-equipment="${equipment}"]`).style.display = 'none';
        }

        function checkAnswer() {
            const filledZone = document.querySelector('.drop-zone.filled');
            if (!filledZone) {
                alert('⚠️ กรุณาลากอุปกรณ์ไปวางในช่องที่เหมาะสม');
                return;
            }

            const question = questions[currentQuestion];
            const selectedFunction = filledZone.dataset.function;
            const correctFunction = question.function;
            
            const isCorrect = selectedFunction === correctFunction;
            
            if (isCorrect) {
                score++;
                filledZone.classList.add('filled');
                showFeedback('correct', '✅ ถูกต้อง! เยี่ยมมาก!');
            } else {
                filledZone.classList.remove('filled');
                filledZone.classList.add('incorrect');
                showFeedback('incorrect', `❌ ไม่ถูกต้อง คำตอบที่ถูกคือ: ${correctFunction}`);
            }
            
            // Update score display
            document.getElementById('currentScore').textContent = score;
            
            // Record answer
            answeredQuestions.push({
                question: question.equipment,
                correct: isCorrect,
                userAnswer: selectedFunction,
                correctAnswer: correctFunction
            });
            
            // Show next button
            document.getElementById('checkBtn').style.display = 'none';
            document.getElementById('nextBtn').style.display = 'inline-block';
        }

        function showFeedback(type, message) {
            const feedback = document.getElementById('feedback');
            feedback.innerHTML = `<div class="feedback ${type}">${message}</div>`;
        }

        function nextQuestion() {
            currentQuestion++;
            showQuestion();
        }

        function showResult() {
            document.getElementById('questionContainer').style.display = 'none';
            document.getElementById('resultSummary').style.display = 'block';
            
            const percentage = Math.round((score / questions.length) * 100);
            document.getElementById('finalScore').textContent = `${score}/${questions.length} (${percentage}%)`;
            
            document.getElementById('finalStudentInfo').innerHTML = `
                <div style="font-size: 1.3em; margin: 20px 0;">
                    <div>👤 ชื่อ: ${studentData.name}</div>
                    <div>🎓 ชั้น: ${studentData.class}</div>
                    <div>🔢 เลขที่: ${studentData.number}</div>
                </div>
            `;
            
            let feedbackMessage = '';
            if (percentage >= 80) {
                feedbackMessage = '🌟 ยอดเยี่ยม! คุณมีความรู้เรื่องอุปกรณ์ป้องกันอันตรายเป็นอย่างดี';
            } else if (percentage >= 60) {
                feedbackMessage = '👍 ดีมาก! แต่ควรศึกษาเพิ่มเติมในส่วนที่ยังไม่แน่ใจ';
            } else {
                feedbackMessage = '📚 ควรศึกษาเพิ่มเติมเรื่องอุปกรณ์ป้องกันอันตรายให้มากขึ้น';
            }
            
            document.getElementById('finalFeedback').innerHTML = `
                <div style="font-size: 1.2em; margin: 20px 0; padding: 20px; background: rgba(255,255,255,0.2); border-radius: 10px;">
                    ${feedbackMessage}
                </div>
            `;

            // Update progress to 100%
            document.getElementById('progressFill').style.width = '100%';
        }

        function restartQuiz() {
            document.getElementById('resultSummary').style.display = 'none';
            document.getElementById('questionContainer').style.display = 'block';
            document.getElementById('gameArea').style.display = 'none';
            document.getElementById('studentForm').style.display = 'block';
            
            // Reset form
            document.getElementById('studentName').value = '';
            document.getElementById('studentClass').value = '';
            document.getElementById('studentNumber').value = '';
            
            // Reset variables
            currentQuestion = 0;
            score = 0;
            questions = [];
            answeredQuestions = [];
            studentData = {};
        }

        // Initialize
        window.addEventListener('load', () => {
            // Add some initial animation
            document.querySelector('.container').style.animation = 'fadeIn 0.8s ease';
        });
    </script>
</body>
</html>
<p>The post <a href="https://www.kroochut.com/personal-protective-equipment/">🛡️ แบบฝึกหัดอุปกรณ์ป้องกันอันตราย ม.3 วิชาเทคโนโลยี (การออกแบบและเทคโนโลยี)</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
