<?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>เทคโนโลยีดิจิทัล Archives - ครูชัชดอทคอม</title>
	<atom:link href="https://www.kroochut.com/tag/%e0%b9%80%e0%b8%97%e0%b8%84%e0%b9%82%e0%b8%99%e0%b9%82%e0%b8%a5%e0%b8%a2%e0%b8%b5%e0%b8%94%e0%b8%b4%e0%b8%88%e0%b8%b4%e0%b8%97%e0%b8%b1%e0%b8%a5/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.kroochut.com/tag/เทคโนโลยีดิจิทัล/</link>
	<description>เว็บไซต์เพื่อการเรียนรู้ของทุกคน</description>
	<lastBuildDate>Wed, 27 May 2026 14:00:39 +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>เทคโนโลยีดิจิทัล Archives - ครูชัชดอทคอม</title>
	<link>https://www.kroochut.com/tag/เทคโนโลยีดิจิทัล/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>บทเรียนออนไลน์ การเปลี่ยนแปลงของเทคโนโลยี</title>
		<link>https://www.kroochut.com/technochange/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Wed, 27 May 2026 14:00:37 +0000</pubDate>
				<category><![CDATA[การออกแบบและเทคโนโลยี]]></category>
		<category><![CDATA[AI]]></category>
		<category><![CDATA[Artificial Intelligence]]></category>
		<category><![CDATA[Classroom Technology]]></category>
		<category><![CDATA[Cloud Computing]]></category>
		<category><![CDATA[Coding Education]]></category>
		<category><![CDATA[Digital Learning]]></category>
		<category><![CDATA[Digital Technology]]></category>
		<category><![CDATA[e-learning]]></category>
		<category><![CDATA[Educational Technology]]></category>
		<category><![CDATA[Future Classroom]]></category>
		<category><![CDATA[Future Technology]]></category>
		<category><![CDATA[Internet of Things]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[Online Learning]]></category>
		<category><![CDATA[Smart City]]></category>
		<category><![CDATA[Smart Learning]]></category>
		<category><![CDATA[STEM Education]]></category>
		<category><![CDATA[Technology Change]]></category>
		<category><![CDATA[Technology Evolution]]></category>
		<category><![CDATA[WordPress LMS]]></category>
		<category><![CDATA[การศึกษาไทย]]></category>
		<category><![CDATA[การเปลี่ยนแปลงของเทคโนโลยี]]></category>
		<category><![CDATA[การเรียนรู้ออนไลน์]]></category>
		<category><![CDATA[นวัตกรรม]]></category>
		<category><![CDATA[นวัตกรรมดิจิทัล]]></category>
		<category><![CDATA[บทเรียน Interactive]]></category>
		<category><![CDATA[บทเรียนออนไลน์ ม.3]]></category>
		<category><![CDATA[มัธยมศึกษาปีที่ 3]]></category>
		<category><![CDATA[วิชาเทคโนโลยี]]></category>
		<category><![CDATA[วิทยาการคำนวณ]]></category>
		<category><![CDATA[เทคโนโลยี ม.3]]></category>
		<category><![CDATA[เทคโนโลยีดิจิทัล]]></category>
		<category><![CDATA[เทคโนโลยีอนาคต]]></category>
		<category><![CDATA[เทคโนโลยีและนวัตกรรม]]></category>
		<guid isPermaLink="false">https://www.kroochut.com/?p=1068</guid>

					<description><![CDATA[<p>The post <a href="https://www.kroochut.com/technochange/">บทเรียนออนไลน์ การเปลี่ยนแปลงของเทคโนโลยี</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: 0;
  z-index: 9999;
}
</style>

<iframe
  src="https://www.kroochut.com/elearning/m3/technochange/"
  class="fullscreen-iframe"
  loading="lazy"
  allowfullscreen>
</iframe>
<p>The post <a href="https://www.kroochut.com/technochange/">บทเรียนออนไลน์ การเปลี่ยนแปลงของเทคโนโลยี</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>บทเรียนออนไลน์ ระบบเครือข่ายคอมพิวเตอร์เบื้องต้น</title>
		<link>https://www.kroochut.com/basic-computer-network/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Mon, 02 Mar 2026 01:44:07 +0000</pubDate>
				<category><![CDATA[Information Technology]]></category>
		<category><![CDATA[Access Point]]></category>
		<category><![CDATA[Client Server]]></category>
		<category><![CDATA[IP Address]]></category>
		<category><![CDATA[LAN]]></category>
		<category><![CDATA[MAN]]></category>
		<category><![CDATA[Modem]]></category>
		<category><![CDATA[Network Topology]]></category>
		<category><![CDATA[Peer to Peer]]></category>
		<category><![CDATA[Router]]></category>
		<category><![CDATA[Switch]]></category>
		<category><![CDATA[TCP/IP]]></category>
		<category><![CDATA[WAN]]></category>
		<category><![CDATA[การสื่อสารข้อมูล]]></category>
		<category><![CDATA[การเรียนรู้แบบ Interactive]]></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=1034</guid>

					<description><![CDATA[<p>ความรู้พื้นฐานระบบเครือข่ายคอมพิวเตอร์ v2 📓 ระบบเครือข่ายคอมพิวเตอร์ ⭐ 0 pts XP 🎓 Lv.1 🏅 Leaderboard 1. ประเภทเครือข่าย 2. โทโปโลยี 3. มาตรฐาน LAN 4. การทำงาน LAN 5. ไร้สาย 6. อินเทอร์เน็ต 💼 อาชีพ 📝 ข้อสอบ 20 ข้อ 🏆 Certificate of Completion เกียรติบัตรผ่านการศึกษา ความรู้พื้นฐานระบบเครือข่ายคอมพิวเตอร์ มอบให้แก่ ได้สำเร็จการศึกษาหลักสูตร ความรู้พื้นฐานระบบเครือข่ายคอมพิวเตอร์ ผู้สอน 🎓 Network Academy วันที่ออก 🖨️ พิมพ์เกียรติบัตร ✕ ปิด 🏅 Leaderboard 📝 บันทึกคะแนนของคุณ: 💾 บันทึกคะแนน 🌍 ทั้งหมด 📝 ข้อสอบ # ชื่อ คะแนนรวม ระดับ # ชื่อ ข้อสอบ (%) วันที่ ✕ ปิด บทที่ 1 • Network Types ประเภทของระบบเครือข่าย Types of Computer Networks — การแบ่งประเภทตามขนาดพื้นที่ครอบคลุม 🖧 โครงสร้างพื้นฐานเครือข่าย 🏢 เครือข่ายในองค์กร ระบบเครือข่ายคอมพิวเตอร์ (Computer Network) คือการเชื่อมต่อคอมพิวเตอร์และอุปกรณ์ต่างๆ เพื่อแลกเปลี่ยนข้อมูลและใช้ทรัพยากรร่วมกัน แบ่งตามขนาดได้ 4 ประเภทหลัก 1. PAN — Personal Area Network 🔵 ครอบคลุม 1–10 เมตร เชื่อมอุปกรณ์ส่วนตัว เช่น สมาร์ทโฟน, หูฟัง Bluetooth, Smartwatch ใช้เทคโนโลยี Bluetooth, ZigBee 2. LAN — Local Area Network ครอบคลุมภายในอาคาร ระยะ < 1 กม. ความเร็ว 10 Mbps – 10 Gbps เหมาะกับสำนักงาน โรงเรียน 3. MAN — Metropolitan Area Network ครอบคลุมระดับเมือง 10–50 กม. เช่น Cable TV, เครือข่ายธนาคารหลายสาขา 4. WAN — Wide Area Network 🌐 ครอบคลุมระดับประเทศ–ทั่วโลก ตัวอย่างที่ดีที่สุดคืออินเทอร์เน็ต ใช้สายใยแก้วใต้ทะเล ดาวเทียม 📊 ตารางเปรียบเทียบ ประเภท ระยะ ความเร็ว ตัวอย่าง PAN 1–10 ม. ต่ำ Bluetooth LAN < 1 กม. สูง (10M–10G) สำนักงาน MAN 10–50 กม. ปานกลาง Cable TV WAN ทั่วโลก ต่ำ–สูง อินเทอร์เน็ต 💡 เกร็ดความรู้: อินเทอร์เน็ตเชื่อมต่ออุปกรณ์กว่า 20,000 ล้านชิ้นทั่วโลก ✏️ แบบทดสอบ — บทที่ 1 ตอบถูกรับ XP! +20 XP 1. เครือข่ายประเภทใดครอบคลุมพื้นที่กว้างที่สุด? A LAN B MAN C WAN D PAN WAN ครอบคลุมระดับประเทศถึงทั่วโลก +20 XP 2. Bluetooth ใช้ในเครือข่ายประเภทใด? A PAN B LAN C MAN D WAN Bluetooth ใช้ใน PAN เชื่อมต่ออุปกรณ์ส่วนตัวระยะใกล้ ✅❌ ถูกหรือผิด — ประเภทเครือข่าย LAN สามารถครอบคลุมระยะทางได้มากกว่า WAN ✅ ถูก ❌ ผิด สมาร์ทโฟนที่เชื่อมต่อ Bluetooth กับหูฟังเป็นตัวอย่างของ PAN ✅ ถูก ❌ ผิด MAN ย่อมาจาก Municipal Area Network ✅ ถูก ❌ ผิด ← ก่อนหน้า 📄 หน้า 1 / 6 ถัดไป → บทที่ 2 • Network Topology โทโปโลยีระบบเครือข่าย Network Topology — รูปแบบการเชื่อมต่อทางกายภาพและทางตรรกะ โทโปโลยี คือรูปแบบโครงสร้างการเชื่อมต่อ แบ่งเป็น กายภาพ (Physical) และ ตรรกะ (Logical) 🎯 คลิกที่โทโปโลยีแต่ละแบบเพื่อดูรายละเอียด! 🚌 Bus สายแกนกลาง 1 เส้น ราคาถูก แต่สายขาดทั้งระบบหยุด ⭐ Star Hub/Switch ตรงกลาง นิยมที่สุด ดูแลง่าย 💍 Ring วนเป็นวงกลม ใช้ Token ป้องกันการชน 🕸️ Mesh เชื่อมทุกโหนด มีเส้นทางสำรอง เชื่อถือสูงสุด 🌳 Tree ลำดับชั้น ขยายได้ง่าย เหมาะองค์กรใหญ่ 🔀 Hybrid ผสมหลายแบบ ยืดหยุ่นสูงสุด ✅ Star เป็นโทโปโลยีที่นิยมมากที่สุด เพิ่ม/ลดอุปกรณ์ได้โดยไม่รบกวนระบบ 🧩 จับคู่โทโปโลยี คลิกซ้ายแล้วคลิกขวาเพื่อจับคู่ +25XP ต่อคู่ 🚌 สายแกนกลาง 1 เส้น ⭐ Hub/Switch ตรงกลาง 💍 Token วนเป็นวงกลม 🕸️ เชื่อมทุกโหนดหากัน Ring Topology Star Topology Mesh Topology Bus Topology ✅❌ ถูกหรือผิด — โทโปโลยี ถ้าสายแกนกลางของ Bus Topology ขาด เครื่องเดียวจะหยุดทำงาน ✅ ถูก ❌ ผิด Mesh Topology มีความเชื่อถือได้สูงเพราะมีเส้นทางสำรองหลายเส้นทาง ✅ ถูก ❌ ผิด ← ก่อนหน้า 📄 หน้า 2 / 6 ถัดไป → บทที่ 3 • LAN Standards มาตรฐานเครือข่ายแลน IEEE 802 Standards — มาตรฐานกำหนดวิธีรับ-ส่งข้อมูลใน LAN มาตรฐาน LAN ถูกกำหนดโดย IEEE ภายใต้ชุดมาตรฐาน IEEE 802 ครอบคลุมชั้น Physical และ Data Link 📡 IEEE 802.3 — Ethernet →10BASE-T: 10 Mbps →Fast Ethernet: 100 Mbps →Gigabit Ethernet: 1 Gbps →10G Ethernet: 10 Gbps 📶 IEEE 802.11 — Wi-Fi →802.11b: 2.4GHz, 11 Mbps →802.11n (Wi-Fi 4): 600 Mbps →802.11ac (Wi-Fi 5): 3.5 Gbps →802.11ax (Wi-Fi 6): 9.6 Gbps มาตรฐาน สาย ความเร็ว ระยะ 10BASE-T UTP Cat 3 10 Mbps 100 ม. 100BASE-TX UTP Cat 5e 100 Mbps 100 ม. 1000BASE-T UTP Cat 5e/6 1 Gbps 100 ม. 10GBASE-T UTP Cat 6A/7 10 Gbps 100 ม. 🔌 CSMA/CD — Carrier Sense Multiple Access with Collision Detection คือกลไก Ethernet จัดการการส่งข้อมูลพร้อมกัน 📋 แบบทดสอบ — มาตรฐาน LAN +25 XP 1. IEEE 802.11 เป็นมาตรฐานของเครือข่ายใด? A Ethernet มีสาย B Wi-Fi ไร้สาย C Bluetooth D Token Ring IEEE 802.11 คือมาตรฐาน Wi-Fi (Wireless LAN) +25 XP 2. Cat 6A รองรับความเร็วสูงสุดเท่าไหร่? A 100 Mbps B 1 Gbps C 10 Gbps D 100 Gbps Cat 6A รองรับ 10 Gbps ในระยะ 100 เมตร ✅❌ ถูกหรือผิด — มาตรฐาน LAN Fiber Optic (สายใยแก้วนำแสง) สามารถส่งข้อมูลได้ไกลกว่าสาย UTP ✅ ถูก ❌ ผิด CSMA/CD ใช้ใน Wi-Fi เพื่อป้องกันการชนของข้อมูล ✅ ถูก ❌ ผิด ← ก่อนหน้า 📄 หน้า 3 / 6 ถัดไป → บทที่ 4 • LAN Operation ชนิดของการทำงานเครือข่ายแลน LAN Operation Modes — วิธีการจัดการทรัพยากรในเครือข่าย 1. Peer-to-Peer (P2P) 👥 ทุกเครื่องเท่าเทียมกัน ไม่มีเซิร์ฟเวอร์กลาง เหมาะเครือข่ายเล็ก 2–10 เครื่อง ✅ ข้อดี: ราคาถูก ติดตั้งง่าย ⚠️ ข้อเสีย: ดูแลยาก ความปลอดภัยต่ำ PC 1 PC 2 PC 3 PC 4 Peer-to-Peer 2. Client/Server มีเซิร์ฟเวอร์เป็นศูนย์กลาง ให้บริการไฟล์ เครื่องพิมพ์ อีเมล ฐานข้อมูล เหมาะกับองค์กรขนาดกลาง–ใหญ่ อุปกรณ์ Layer หน้าที่ Hub 1 ขยายสัญญาณ Broadcast ทุกพอร์ต Switch 2 ส่งตาม MAC Address ตรงพอร์ต Router 3 เชื่อมเครือข่ายต่างกัน หาเส้นทาง Gateway 4-7 แปลโปรโตคอลต่างชนิด 🎯 Quiz — อุปกรณ์เครือข่าย +25 XP 1. Router ทำงานที่ Layer ใด? A Layer 1 B Layer 2 C Layer 3 D Layer 4 Router ทำงาน Layer 3 ใช้ IP Address ในการส่งข้อมูล +25 XP 2. DHCP Server ทำหน้าที่ใด? A รับ-ส่งอีเมล B แชร์ไฟล์ C แจก IP อัตโนมัติ D แปลงโดเมน DHCP (Dynamic Host Configuration Protocol) แจก IP Address อัตโนมัติ ✅❌ ถูกหรือผิด — การทำงาน LAN Switch ส่งข้อมูลไปยังทุกพอร์ตเหมือน Hub ✅ ถูก ❌ ผิด P2P เหมาะกับองค์กรขนาดใหญ่ที่มีคอมพิวเตอร์มากกว่า 100 เครื่อง ✅ ถูก ❌ ผิด ← ก่อนหน้า 📄 หน้า 4 / 6 ถัดไป → บทที่ 5 • Wireless LAN ระบบแลนไร้สาย Wireless LAN — รับ-ส่งข้อมูลผ่านคลื่นวิทยุแทนสายเคเบิล 📡 Wi-Fi Router 📱 การใช้ Wireless ในชีวิตจริง Generation มาตรฐาน ความถี่ ความเร็วสูงสุด Wi-Fi 4 802.11n 2.4/5 GHz 600 Mbps Wi-Fi 5 802.11ac 5 GHz 3.5 Gbps Wi-Fi 6 802.11ax 2.4/5 GHz 9.6 Gbps Wi-Fi 6E 802.11ax 2.4/5/6 GHz 9.6 Gbps ความปลอดภัย WLAN 🔴WEP — ไม่ปลอดภัย crack ง่าย ไม่ควรใช้ 🟡WPA — ใช้ TKIP ปลอดภัยพอใช้ 🟢WPA2 — AES-CCMP เป็นมาตรฐานปัจจุบัน 🔵WPA3 — ล่าสุด ปลอดภัยที่สุด SAE 📡 Quiz — Wireless LAN +20 XP 1. Wi-Fi 6 ใช้มาตรฐาน IEEE ใด? A 802.11ac B 802.11ax C 802.11n D 802.11g Wi-Fi 6 ใช้ IEEE 802.11ax +20 XP 2. โปรโตคอลความปลอดภัยใดปลอดภัยที่สุด? A WEP B WPA C WPA2 D WPA3 WPA3 เป็นมาตรฐานล่าสุดและปลอดภัยที่สุด ✅❌ ถูกหรือผิด — Wireless ย่านความถี่ 5 GHz มีระยะครอบคลุมไกลกว่า 2.4 GHz ✅ ถูก ❌ ผิด ← ก่อนหน้า 📄 หน้า 5 / 6 ถัดไป → บทที่ 6 • Internet เครือข่ายอินเทอร์เน็ต Internet — เครือข่ายขนาดใหญ่เชื่อมอุปกรณ์กว่า 20 พันล้านชิ้นทั่วโลก อินเทอร์เน็ต = Interconnected Networks เชื่อม LAN/MAN/WAN ผ่าน TCP/IP พัฒนาจาก ARPANET ปี 1969 📦 TCP →แบ่งข้อมูลเป็น Packet →รับประกันครบถ้วน →ใช้กับ HTTP, Email 🌐 IP →IPv4: 32-bit (4.3 พันล้าน) →IPv6: 128-bit (อนาคต) →Routing เส้นทางข้อมูล โปรโตคอล Port ใช้ทำอะไร HTTP 80 เว็บไซต์ทั่วไป HTTPS 443 เว็บไซต์เข้ารหัส FTP 21 โอนไฟล์ SMTP 25 ส่งอีเมล DNS 53 แปลงโดเมน→IP SSH 22 Remote access เข้ารหัส 🌍 Quiz — อินเทอร์เน็ต +25 XP 1. HTTPS ใช้ Port ใด? A 21 B 80 C 443 D 22 HTTPS ใช้ Port 443 มีการเข้ารหัส SSL/TLS +25 XP 2. DNS มีหน้าที่ใด? A เข้ารหัสข้อมูล B แจก IP อัตโนมัติ C แปลงชื่อโดเมนเป็น IP D ส่งอีเมล DNS (Domain Name System) แปลง www.google.com → IP Address ✅❌ ถูกหรือผิด — อินเทอร์เน็ต IPv6 ใช้ 64-bit ทำให้รองรับ Address ได้มากกว่า IPv4 ✅ ถูก ❌ ผิด WWW กับอินเทอร์เน็ตคือสิ่งเดียวกัน ✅ ถูก ❌ ผิด ←
</p>
<p>The post <a href="https://www.kroochut.com/basic-computer-network/">บทเรียนออนไลน์ ระบบเครือข่ายคอมพิวเตอร์เบื้องต้น</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>ความรู้พื้นฐานระบบเครือข่ายคอมพิวเตอร์ v2</title>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&#038;family=Kanit:wght@300;400;600;700&#038;family=Patrick+Hand&#038;display=swap" rel="stylesheet">
<style>
:root{
  --paper:#fef9f0;--paper2:#fff8e7;--ink:#2c1810;--ink-light:#5c3d2e;
  --red:#c0392b;--blue:#1a5276;--blue-light:#2980b9;--green:#1e8449;
  --yellow:#f39c12;--purple:#7d3c98;--orange:#d35400;--pink:#e91e8c;
  --gray:#7f8c8d;--shadow:3px 3px 0 rgba(44,24,16,0.2);--shadow-lg:6px 6px 0 rgba(44,24,16,0.15);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:#c9b89a;font-family:'Kanit',sans-serif;color:var(--ink);min-height:100vh;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(0,0,0,0.05) 27px,rgba(0,0,0,0.05) 28px);}

/* HEADER */
.header{background:var(--paper);border-bottom:4px solid var(--ink);padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;
  box-shadow:0 4px 0 rgba(44,24,16,0.2);flex-wrap:wrap;gap:8px;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(44,24,16,0.08) 27px,rgba(44,24,16,0.08) 28px);}
.header-title{font-family:'Caveat',cursive;font-size:1.5rem;font-weight:700;
  text-decoration:underline wavy var(--red);}
.hdr-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.xp-bar{width:130px;height:16px;background:var(--paper2);border:2px solid var(--ink);overflow:hidden;}
.xp-fill{height:100%;background:repeating-linear-gradient(45deg,var(--yellow),var(--yellow) 8px,var(--orange) 8px,var(--orange) 16px);transition:width .5s;}
.level-badge{font-family:'Caveat',cursive;font-weight:700;font-size:0.95rem;background:var(--ink);color:var(--paper);padding:3px 10px;border:2px solid var(--ink);}
.score-display{font-family:'Caveat',cursive;font-size:1.1rem;color:var(--red);font-weight:700;}
.ldb-btn{font-family:'Caveat',cursive;font-size:0.9rem;font-weight:700;padding:4px 12px;border:2px solid var(--ink);background:var(--paper2);cursor:pointer;transition:all .2s;}
.ldb-btn:hover{background:var(--ink);color:var(--paper);}

/* NAV */
.progress-nav{background:var(--paper2);border-bottom:3px solid var(--ink);padding:8px 16px;display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;}
.nav-btn{font-family:'Caveat',cursive;font-size:0.9rem;font-weight:600;padding:5px 12px;border:2px solid var(--ink);background:var(--paper);cursor:pointer;white-space:nowrap;transition:all .2s;position:relative;}
.nav-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.nav-btn.active{background:var(--ink);color:var(--paper);}
.nav-btn.completed::after{content:"✓";position:absolute;top:-8px;right:-6px;background:var(--green);color:white;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:bold;border:2px solid var(--ink);line-height:13px;text-align:center;}
.nav-btn.exam-btn{background:#fff3cd;border-color:var(--orange);}
.nav-btn.career-btn{background:#e8f5e9;border-color:var(--green);}

/* MAIN */
.main{max-width:1000px;margin:0 auto;padding:24px 16px;}

/* PAGE */
.page{background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow-lg);margin-bottom:24px;position:relative;display:none;padding-left:56px;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(44,24,16,0.1) 27px,rgba(44,24,16,0.1) 28px);}
.page.active{display:block;animation:pageFlip .35s ease;}
@keyframes pageFlip{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
.page::before{content:'';position:absolute;left:46px;top:0;bottom:0;width:2px;background:rgba(192,57,43,0.4);}
.spiral-holes{position:absolute;left:8px;top:0;bottom:0;width:26px;display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:26px;pointer-events:none;}
.hole{width:17px;height:17px;border-radius:50%;background:#c9b89a;border:2.5px solid rgba(44,24,16,0.4);flex-shrink:0;box-shadow:inset 2px 2px 4px rgba(0,0,0,0.15);}
.page-content{padding:24px 24px 24px 16px;}

/* CHAPTER HEADER */
.chapter-header{margin-bottom:20px;padding-bottom:14px;border-bottom:3px solid var(--ink);}
.chapter-num{font-family:'Caveat',cursive;font-size:0.85rem;color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:2px;}
.chapter-title{font-family:'Caveat',cursive;font-size:2rem;font-weight:700;line-height:1.2;margin:4px 0;}
.chapter-title span{background:linear-gradient(180deg,transparent 60%,rgba(243,156,18,0.4) 60%);}
.chapter-desc{font-size:0.85rem;color:var(--ink-light);font-family:'Patrick Hand',cursive;}

/* TEXT ELEMENTS */
.page-text{font-family:'Patrick Hand',cursive;font-size:1rem;line-height:1.85;color:var(--ink);margin:10px 0;}
.page-text strong{font-family:'Caveat',cursive;font-size:1.05rem;font-weight:700;color:var(--blue);}
h3.section-title{font-family:'Caveat',cursive;font-size:1.4rem;font-weight:700;margin:18px 0 8px;padding-left:10px;border-left:5px solid var(--red);}
.highlight-red{background:linear-gradient(180deg,transparent 50%,rgba(192,57,43,0.25) 50%);padding:0 2px;font-weight:600;}
.highlight-blue{background:linear-gradient(180deg,transparent 50%,rgba(41,128,185,0.3) 50%);padding:0 2px;font-weight:600;}
.highlight-yellow{background:linear-gradient(180deg,transparent 50%,rgba(243,156,18,0.4) 50%);padding:0 2px;font-weight:600;}
.highlight-green{background:linear-gradient(180deg,transparent 50%,rgba(30,132,73,0.25) 50%);padding:0 2px;font-weight:600;}

/* STICKY NOTE */
.sticky-note{background:#fff9c4;border:2px solid var(--ink);padding:12px 14px;margin:14px 0;box-shadow:4px 4px 0 rgba(44,24,16,0.15);position:relative;transform:rotate(-0.5deg);font-family:'Caveat',cursive;font-size:1rem;line-height:1.6;}
.sticky-note::before{content:'📌';position:absolute;top:-12px;left:10px;font-size:1.1rem;}
.sticky-note.blue{background:#e3f2fd;}
.sticky-note.green{background:#e8f5e9;}
.sticky-note.pink{background:#fce4ec;}
.sticky-note.orange{background:#fff3e0;}

/* HAND BOX */
.hand-box{border:3px solid var(--ink);padding:14px 18px;margin:14px 0;position:relative;background:var(--paper2);}
.hand-box-title{font-family:'Caveat',cursive;font-size:1.1rem;font-weight:700;color:var(--blue);position:absolute;top:-13px;left:14px;background:var(--paper2);padding:0 8px;border:2px solid var(--ink);}

/* IMG GRID */
.img-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0;}
.img-card{border:3px solid var(--ink);box-shadow:var(--shadow);overflow:hidden;background:var(--ink);}
.img-card img{width:100%;height:170px;object-fit:cover;display:block;filter:sepia(15%) contrast(1.05);}
.img-caption{font-family:'Caveat',cursive;font-size:0.9rem;background:var(--ink);color:var(--paper);padding:5px 10px;text-align:center;}

/* CALLOUT */
.callout{border-left:5px solid var(--blue);padding:10px 14px;background:#e8f4fd;margin:12px 0;font-family:'Patrick Hand',cursive;font-size:0.95rem;line-height:1.6;}
.callout.warning{border-left-color:var(--orange);background:#fef5e7;}
.callout.success{border-left-color:var(--green);background:#eafaf1;}

/* LIST */
.list-item{display:flex;align-items:flex-start;gap:8px;margin:7px 0;font-family:'Patrick Hand',cursive;font-size:0.95rem;line-height:1.7;}
.list-bullet{font-family:'Caveat',cursive;font-weight:700;font-size:1.05rem;color:var(--red);flex-shrink:0;margin-top:2px;}

/* TABLE */
.hand-table{width:100%;border-collapse:collapse;margin:14px 0;font-family:'Patrick Hand',cursive;font-size:0.9rem;}
.hand-table th{font-family:'Caveat',cursive;font-size:0.95rem;font-weight:700;background:var(--ink);color:var(--paper);padding:9px 11px;text-align:left;border:2px solid var(--ink);}
.hand-table td{padding:8px 11px;border:2px solid var(--ink);background:var(--paper);line-height:1.45;}
.hand-table tr:nth-child(even) td{background:var(--paper2);}

/* TAG */
.tag{display:inline-block;font-family:'Caveat',cursive;font-size:0.85rem;font-weight:700;padding:2px 9px;border:2px solid var(--ink);margin:2px;background:var(--paper2);}
.tag.red{border-color:var(--red);color:var(--red);background:#fdedec;}
.tag.blue{border-color:var(--blue);color:var(--blue);background:#ebf5fb;}
.tag.green{border-color:var(--green);color:var(--green);background:#eafaf1;}
.tag.purple{border-color:var(--purple);color:var(--purple);background:#f5eef8;}

/* TWO COL */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0;}
@media(max-width:580px){.two-col{grid-template-columns:1fr;}.img-grid{grid-template-columns:1fr;}}

/* QUIZ */
.quiz-section{background:#fff9e6;border:3px solid var(--ink);padding:18px;margin:20px 0;position:relative;box-shadow:var(--shadow-lg);}
.quiz-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.quiz-icon{font-size:1.6rem;}
.quiz-title{font-family:'Caveat',cursive;font-size:1.3rem;font-weight:700;}
.quiz-subtitle{font-family:'Patrick Hand',cursive;font-size:0.85rem;color:var(--gray);}
.question{margin:14px 0;padding:12px;background:var(--paper);border:2px solid var(--ink);}
.q-text{font-family:'Caveat',cursive;font-size:1.1rem;font-weight:600;margin-bottom:10px;}
.options{display:flex;flex-direction:column;gap:7px;}
.option-btn{font-family:'Patrick Hand',cursive;font-size:0.95rem;padding:9px 12px;border:2px solid var(--ink);background:var(--paper);text-align:left;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:8px;position:relative;}
.option-btn:hover{background:var(--paper2);transform:translateX(3px);}
.option-btn.correct{background:#d5f5e3;border-color:var(--green);}
.option-btn.wrong{background:#fadbd8;border-color:var(--red);}
.option-btn.disabled{pointer-events:none;}
.option-letter{font-family:'Caveat',cursive;font-weight:700;font-size:1rem;width:26px;height:26px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--paper2);}
.quiz-feedback{font-family:'Caveat',cursive;font-size:1rem;padding:8px 12px;border:2px solid var(--ink);margin-top:7px;display:none;}
.quiz-feedback.show{display:block;}
.quiz-feedback.correct{background:#d5f5e3;color:var(--green);}
.quiz-feedback.wrong{background:#fadbd8;color:var(--red);}
.quiz-points{font-family:'Caveat',cursive;font-size:0.85rem;color:var(--yellow);font-weight:700;position:absolute;top:-10px;right:10px;background:var(--ink);padding:2px 7px;border:2px solid var(--ink);}

/* TOPOLOGY */
.topo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:10px 0;}
@media(max-width:580px){.topo-grid{grid-template-columns:repeat(2,1fr);}}
.topo-card{border:2px solid var(--ink);padding:10px;background:var(--paper);text-align:center;cursor:pointer;transition:all .2s;box-shadow:var(--shadow);}
.topo-card:hover{transform:translateY(-3px);box-shadow:5px 5px 0 rgba(44,24,16,0.2);}
.topo-card.selected{background:#e3f2fd;border-color:var(--blue-light);border-width:3px;}
.topo-svg{width:76px;height:76px;margin:0 auto 7px;}
.topo-name{font-family:'Caveat',cursive;font-size:0.95rem;font-weight:700;}
.topo-desc{font-family:'Patrick Hand',cursive;font-size:0.78rem;color:var(--gray);margin-top:4px;line-height:1.35;display:none;}
.topo-card.selected .topo-desc{display:block;color:var(--blue);}

/* MATCHING GAME */
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0;}
@media(max-width:480px){.match-grid{grid-template-columns:1fr;}}
.match-col{display:flex;flex-direction:column;gap:7px;}
.match-item{font-family:'Patrick Hand',cursive;font-size:0.9rem;padding:9px 11px;border:2px solid var(--ink);cursor:pointer;transition:all .2s;background:var(--paper);}
.match-item:hover{transform:scale(1.02);box-shadow:var(--shadow);}
.match-item.selected{background:#e3f2fd;border-color:var(--blue-light);border-width:3px;}
.match-item.matched{background:#d5f5e3;border-color:var(--green);pointer-events:none;}
.match-item.wrong-match{background:#fadbd8;animation:shake .3s ease;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* TRUE/FALSE GAME */
.tf-game{background:var(--paper2);border:3px solid var(--ink);padding:18px;margin:18px 0;box-shadow:var(--shadow);}
.tf-title{font-family:'Caveat',cursive;font-size:1.3rem;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.tf-item{background:var(--paper);border:2px solid var(--ink);padding:12px 14px;margin:8px 0;}
.tf-statement{font-family:'Patrick Hand',cursive;font-size:0.95rem;margin-bottom:10px;line-height:1.6;}
.tf-btns{display:flex;gap:8px;}
.tf-btn{font-family:'Caveat',cursive;font-size:1rem;font-weight:700;padding:8px 20px;border:2px solid var(--ink);cursor:pointer;transition:all .2s;box-shadow:var(--shadow);}
.tf-btn.true-btn{background:#e8f5e9;color:var(--green);}
.tf-btn.false-btn{background:#fce4ec;color:var(--red);}
.tf-btn:hover{transform:translateY(-2px);box-shadow:4px 4px 0 rgba(44,24,16,0.25);}
.tf-btn.selected-correct{background:#d5f5e3;border-color:var(--green);border-width:3px;}
.tf-btn.selected-wrong{background:#fadbd8;border-color:var(--red);border-width:3px;}
.tf-btn.disabled{pointer-events:none;}
.tf-feedback{font-family:'Caveat',cursive;font-size:0.95rem;padding:7px 11px;border:2px solid var(--ink);margin-top:7px;display:none;}
.tf-feedback.show{display:block;}
.tf-feedback.correct{background:#d5f5e3;color:var(--green);}
.tf-feedback.wrong{background:#fadbd8;color:var(--red);}

/* PAGE NAV */
.page-nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding:14px;border-top:3px solid var(--ink);background:var(--paper2);}
.nav-arrow{font-family:'Caveat',cursive;font-size:1rem;font-weight:700;padding:9px 20px;border:2.5px solid var(--ink);background:var(--paper);cursor:pointer;transition:all .2s;box-shadow:var(--shadow);}
.nav-arrow:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px);}
.nav-arrow:disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}
.page-indicator{font-family:'Caveat',cursive;font-size:0.95rem;color:var(--ink-light);}

/* XP POPUP */
.xp-popup{position:fixed;top:70px;right:24px;font-family:'Caveat',cursive;font-size:1.3rem;font-weight:700;padding:9px 18px;background:var(--yellow);border:3px solid var(--ink);box-shadow:var(--shadow-lg);pointer-events:none;z-index:2000;animation:popupAnim 1.5s ease forwards;}
@keyframes popupAnim{0%{opacity:0;transform:translateY(16px) scale(.8)}20%{opacity:1;transform:translateY(0) scale(1.1)}70%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-28px) scale(.9)}}

/* ACHIEVEMENT */
.achievement-popup{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);font-family:'Caveat',cursive;font-size:1rem;font-weight:700;padding:12px 22px;background:var(--ink);color:var(--paper);border:3px solid var(--yellow);box-shadow:var(--shadow-lg);z-index:2000;display:none;text-align:center;animation:slideUp .3s ease;max-width:90vw;}
@keyframes slideUp{from{transform:translateX(-50%) translateY(18px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}

/* CHECK BTN */
.check-btn{font-family:'Caveat',cursive;font-size:1rem;font-weight:700;padding:9px 22px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;transition:all .2s;margin-top:10px;box-shadow:var(--shadow);}
.check-btn:hover{transform:translateY(-2px);box-shadow:4px 4px 0 rgba(44,24,16,.3);}

/* ===== EXAM PAGE ===== */
.exam-container{background:var(--paper);border:3px solid var(--ink);padding:24px;box-shadow:var(--shadow-lg);margin-bottom:24px;}
.exam-header{text-align:center;padding-bottom:18px;border-bottom:3px dashed var(--ink);margin-bottom:20px;}
.exam-title{font-family:'Caveat',cursive;font-size:2rem;font-weight:700;}
.exam-desc{font-family:'Patrick Hand',cursive;font-size:0.95rem;color:var(--gray);margin-top:6px;}
.exam-meta{display:flex;justify-content:center;gap:20px;margin-top:12px;flex-wrap:wrap;}
.exam-meta-item{font-family:'Caveat',cursive;font-size:1rem;font-weight:700;padding:5px 14px;border:2px solid var(--ink);background:var(--paper2);}
.exam-q{background:var(--paper2);border:2px solid var(--ink);padding:14px;margin:12px 0;position:relative;}
.exam-q-num{font-family:'Caveat',cursive;font-size:0.85rem;font-weight:700;color:var(--gray);margin-bottom:6px;}
.exam-q-text{font-family:'Caveat',cursive;font-size:1.05rem;font-weight:600;margin-bottom:10px;}
.exam-opts{display:flex;flex-direction:column;gap:6px;}
.exam-opt{font-family:'Patrick Hand',cursive;font-size:0.9rem;padding:8px 12px;border:2px solid var(--ink);background:var(--paper);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:7px;}
.exam-opt:hover{background:var(--paper2);transform:translateX(3px);}
.exam-opt.selected{background:#e3f2fd;border-color:var(--blue-light);border-width:3px;}
.exam-opt.correct{background:#d5f5e3;border-color:var(--green);}
.exam-opt.wrong{background:#fadbd8;border-color:var(--red);}
.exam-opt.disabled{pointer-events:none;}
.exam-opt-letter{font-family:'Caveat',cursive;font-weight:700;width:24px;height:24px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--paper2);font-size:0.95rem;}
.exam-submit-btn{font-family:'Caveat',cursive;font-size:1.2rem;font-weight:700;padding:12px 32px;border:3px solid var(--ink);background:var(--blue);color:white;cursor:pointer;transition:all .2s;box-shadow:var(--shadow-lg);margin-top:20px;width:100%;}
.exam-submit-btn:hover{transform:translateY(-3px);box-shadow:6px 6px 0 rgba(44,24,16,.25);}
.exam-timer{font-family:'Caveat',cursive;font-size:1.4rem;font-weight:700;color:var(--red);padding:6px 16px;border:2px solid var(--red);background:#fdedec;margin-left:auto;}
.exam-progress-bar{height:8px;background:var(--paper2);border:2px solid var(--ink);margin:10px 0;overflow:hidden;}
.exam-progress-fill{height:100%;background:var(--blue-light);transition:width .3s;}

/* ===== RESULT PAGE ===== */
.result-container{background:var(--paper);border:3px solid var(--ink);padding:28px;text-align:center;box-shadow:var(--shadow-lg);}
.result-score-big{font-family:'Caveat',cursive;font-size:4rem;font-weight:700;color:var(--blue);}
.result-percent{font-family:'Caveat',cursive;font-size:1.8rem;font-weight:700;margin-top:4px;}
.result-pass{color:var(--green);}
.result-fail{color:var(--red);}
.result-breakdown{display:flex;justify-content:center;gap:20px;margin:16px 0;flex-wrap:wrap;}
.result-item{font-family:'Caveat',cursive;font-size:1.1rem;font-weight:700;padding:8px 18px;border:2px solid var(--ink);background:var(--paper2);}
.result-item.pass-item{background:#d5f5e3;border-color:var(--green);}
.result-item.fail-item{background:#fadbd8;border-color:var(--red);}
.retry-btn{font-family:'Caveat',cursive;font-size:1rem;font-weight:700;padding:10px 24px;border:2px solid var(--ink);background:var(--paper);cursor:pointer;transition:all .2s;box-shadow:var(--shadow);margin:6px;}
.retry-btn:hover{background:var(--ink);color:var(--paper);}
.review-section{text-align:left;margin-top:20px;border-top:3px dashed var(--ink);padding-top:16px;}
.review-q{margin:10px 0;padding:12px;border:2px solid var(--ink);background:var(--paper2);}
.review-q.rq-correct{border-color:var(--green);background:#d5f5e3;}
.review-q.rq-wrong{border-color:var(--red);background:#fadbd8;}
.review-q-text{font-family:'Caveat',cursive;font-size:1rem;font-weight:600;margin-bottom:4px;}
.review-q-ans{font-family:'Patrick Hand',cursive;font-size:0.88rem;}

/* ===== CERTIFICATE ===== */
.cert-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(44,24,16,0.8);z-index:3000;align-items:center;justify-content:center;padding:16px;}
.cert-overlay.show{display:flex;}
.cert-box{background:var(--paper);border:8px double var(--ink);padding:40px;max-width:680px;width:100%;text-align:center;position:relative;box-shadow:0 0 0 4px var(--yellow),0 0 0 8px var(--ink);background-image:repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(44,24,16,0.06) 27px,rgba(44,24,16,0.06) 28px);}
.cert-logo{font-size:3rem;margin-bottom:10px;}
.cert-issuer{font-family:'Caveat',cursive;font-size:1rem;font-weight:700;color:var(--gray);letter-spacing:3px;text-transform:uppercase;}
.cert-title{font-family:'Caveat',cursive;font-size:1.6rem;font-weight:700;color:var(--ink);margin:12px 0 4px;text-decoration:underline;}
.cert-subtitle{font-family:'Patrick Hand',cursive;font-size:0.95rem;color:var(--ink-light);margin-bottom:20px;}
.cert-presents{font-family:'Patrick Hand',cursive;font-size:0.9rem;color:var(--gray);}
.cert-name{font-family:'Caveat',cursive;font-size:2.8rem;font-weight:700;color:var(--blue);border-bottom:3px solid var(--ink);padding-bottom:6px;margin:12px 60px;min-height:56px;}
.cert-awarded{font-family:'Patrick Hand',cursive;font-size:0.9rem;margin:16px 0 6px;}
.cert-course{font-family:'Caveat',cursive;font-size:1.3rem;font-weight:700;color:var(--ink);}
.cert-score{font-family:'Caveat',cursive;font-size:1rem;font-weight:700;color:var(--green);margin:8px 0;}
.cert-footer{display:flex;justify-content:space-between;margin-top:24px;padding-top:14px;border-top:2px solid var(--ink);}
.cert-sig{font-family:'Caveat',cursive;font-size:0.85rem;font-weight:700;border-top:2px solid var(--ink);padding-top:6px;min-width:120px;text-align:center;}
.cert-date{font-family:'Patrick Hand',cursive;font-size:0.8rem;color:var(--gray);margin-top:4px;}
.cert-close-btn{font-family:'Caveat',cursive;font-size:1rem;font-weight:700;padding:10px 24px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;margin-top:16px;transition:all .2s;box-shadow:var(--shadow);}
.cert-print-btn{font-family:'Caveat',cursive;font-size:1rem;font-weight:700;padding:10px 24px;border:2px solid var(--yellow);background:var(--yellow);color:var(--ink);cursor:pointer;margin-top:16px;transition:all .2s;box-shadow:var(--shadow);}
.cert-name-input{font-family:'Caveat',cursive;font-size:1.4rem;font-weight:600;border:none;border-bottom:3px solid var(--blue);background:transparent;text-align:center;width:100%;outline:none;color:var(--blue);padding:4px;}

/* ===== LEADERBOARD ===== */
.ldb-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(44,24,16,.8);z-index:3000;align-items:center;justify-content:center;padding:16px;}
.ldb-overlay.show{display:flex;}
.ldb-box{background:var(--paper);border:4px solid var(--ink);padding:24px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);background-image:repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(44,24,16,0.07) 27px,rgba(44,24,16,0.07) 28px);}
.ldb-title{font-family:'Caveat',cursive;font-size:1.8rem;font-weight:700;text-align:center;margin-bottom:16px;padding-bottom:12px;border-bottom:3px solid var(--ink);}
.ldb-table{width:100%;border-collapse:collapse;}
.ldb-table th{font-family:'Caveat',cursive;font-size:1rem;font-weight:700;background:var(--ink);color:var(--paper);padding:8px 10px;text-align:left;border:2px solid var(--ink);}
.ldb-table td{padding:8px 10px;border:2px solid var(--ink);font-family:'Patrick Hand',cursive;font-size:0.9rem;background:var(--paper);}
.ldb-table tr:nth-child(even) td{background:var(--paper2);}
.ldb-table tr.my-row td{background:#fff3cd;font-weight:700;}
.ldb-rank-1 td{background:#fff9c4!important;}
.ldb-rank-2 td{background:#f0f0f0!important;}
.ldb-rank-3 td{background:#fde7c4!important;}
.ldb-name-input{font-family:'Caveat',cursive;font-size:1rem;font-weight:600;padding:8px 12px;border:2px solid var(--ink);background:var(--paper2);width:100%;margin-bottom:8px;outline:none;}
.ldb-submit-btn{font-family:'Caveat',cursive;font-size:1rem;font-weight:700;padding:9px 22px;border:2px solid var(--ink);background:var(--green);color:white;cursor:pointer;transition:all .2s;box-shadow:var(--shadow);}
.ldb-submit-btn:hover{transform:translateY(-2px);}
.ldb-close-btn{font-family:'Caveat',cursive;font-size:0.95rem;font-weight:700;padding:8px 18px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;margin-top:14px;transition:all .2s;}
.ldb-tabs{display:flex;gap:0;margin-bottom:14px;border:2px solid var(--ink);}
.ldb-tab{font-family:'Caveat',cursive;font-size:0.95rem;font-weight:700;padding:7px 16px;background:var(--paper);cursor:pointer;flex:1;text-align:center;border-right:2px solid var(--ink);transition:all .2s;}
.ldb-tab:last-child{border-right:none;}
.ldb-tab.active{background:var(--ink);color:var(--paper);}

/* ===== CAREER PAGE ===== */
.career-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:16px 0;}
@media(max-width:580px){.career-grid{grid-template-columns:1fr;}}
.career-card{border:3px solid var(--ink);padding:16px;background:var(--paper);box-shadow:var(--shadow);cursor:pointer;transition:all .2s;position:relative;}
.career-card:hover{transform:translateY(-3px);box-shadow:6px 6px 0 rgba(44,24,16,.2);}
.career-card.expanded{background:var(--paper2);}
.career-icon{font-size:2rem;margin-bottom:8px;}
.career-title{font-family:'Caveat',cursive;font-size:1.2rem;font-weight:700;color:var(--blue);}
.career-salary{font-family:'Caveat',cursive;font-size:0.9rem;font-weight:700;color:var(--green);margin:3px 0;}
.career-desc{font-family:'Patrick Hand',cursive;font-size:0.88rem;line-height:1.6;margin-top:6px;display:none;}
.career-card.expanded .career-desc{display:block;}
.career-skills{margin-top:8px;display:none;}
.career-card.expanded .career-skills{display:block;}
.career-tag{display:inline-block;font-family:'Caveat',cursive;font-size:0.8rem;font-weight:700;padding:2px 8px;border:1.5px solid var(--ink);margin:2px;background:var(--paper2);}
.career-expand-hint{font-family:'Caveat',cursive;font-size:0.8rem;color:var(--gray);position:absolute;bottom:8px;right:12px;}
.roadmap-section{margin:20px 0;}
.roadmap-step{display:flex;gap:14px;margin:10px 0;align-items:flex-start;}
.roadmap-num{font-family:'Caveat',cursive;font-size:1.4rem;font-weight:700;background:var(--ink);color:var(--paper);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.roadmap-content{font-family:'Patrick Hand',cursive;font-size:0.9rem;line-height:1.65;}
.roadmap-title{font-family:'Caveat',cursive;font-size:1.05rem;font-weight:700;color:var(--blue);margin-bottom:3px;}

/* SOUND VISUAL */
.sound-ripple{position:fixed;pointer-events:none;z-index:9999;width:40px;height:40px;border-radius:50%;border:3px solid var(--green);animation:rippleOut .5s ease forwards;}
@keyframes rippleOut{0%{transform:scale(1);opacity:0.8}100%{transform:scale(3);opacity:0}}

@media print{.header,.progress-nav,.page-nav,.cert-close-btn,.cert-print-btn{display:none!important;}
.cert-box{box-shadow:none;border:4px double var(--ink);}}
</style>
</head>
<body>

<!-- HEADER -->
<div class="header">
  <div class="header-title">📓 ระบบเครือข่ายคอมพิวเตอร์</div>
  <div class="hdr-right">
    <div class="score-display">⭐ <span id="scoreNum">0</span> pts</div>
    <span style="font-family:Caveat;font-size:0.85rem;">XP</span>
    <div class="xp-bar"><div class="xp-fill" id="xpFill"></div></div>
    <div class="level-badge" id="levelBadge">🎓 Lv.1</div>
    <button class="ldb-btn" onclick="openLeaderboard()">🏅 Leaderboard</button>
  </div>
</div>

<!-- PROGRESS NAV -->
<div class="progress-nav">
  <button class="nav-btn active" onclick="goPage(0)" id="navBtn0">1. ประเภทเครือข่าย</button>
  <button class="nav-btn" onclick="goPage(1)" id="navBtn1">2. โทโปโลยี</button>
  <button class="nav-btn" onclick="goPage(2)" id="navBtn2">3. มาตรฐาน LAN</button>
  <button class="nav-btn" onclick="goPage(3)" id="navBtn3">4. การทำงาน LAN</button>
  <button class="nav-btn" onclick="goPage(4)" id="navBtn4">5. ไร้สาย</button>
  <button class="nav-btn" onclick="goPage(5)" id="navBtn5">6. อินเทอร์เน็ต</button>
  <button class="nav-btn career-btn" onclick="goPage(6)" id="navBtn6">💼 อาชีพ</button>
  <button class="nav-btn exam-btn" onclick="goPage(7)" id="navBtn7">📝 ข้อสอบ 20 ข้อ</button>
</div>

<!-- POPUPS -->
<div class="achievement-popup" id="achievementPopup"></div>

<!-- CERTIFICATE OVERLAY -->
<div class="cert-overlay" id="certOverlay">
  <div class="cert-box" id="certBox">
    <div class="cert-logo">🏆</div>
    <div class="cert-issuer">Certificate of Completion</div>
    <div style="border:2px solid var(--ink);margin:8px 40px;"></div>
    <div class="cert-title">เกียรติบัตรผ่านการศึกษา</div>
    <div class="cert-subtitle">ความรู้พื้นฐานระบบเครือข่ายคอมพิวเตอร์</div>
    <div class="cert-presents">มอบให้แก่</div>
    <div class="cert-name" id="certNameDisplay"></div>
    <input class="cert-name-input" id="certNameInput" placeholder="พิมพ์ชื่อของคุณที่นี่..." oninput="updateCertName(this.value)" style="display:none;">
    <div class="cert-awarded">ได้สำเร็จการศึกษาหลักสูตร</div>
    <div class="cert-course">ความรู้พื้นฐานระบบเครือข่ายคอมพิวเตอร์</div>
    <div class="cert-score" id="certScore"></div>
    <div style="border:2px solid var(--ink);margin:14px 40px;"></div>
    <div class="cert-footer">
      <div>
        <div class="cert-sig">ผู้สอน</div>
        <div class="cert-date" id="certDate"></div>
      </div>
      <div style="text-align:center;">
        <div style="font-size:2rem;">🎓</div>
        <div style="font-family:Caveat;font-size:0.8rem;font-weight:700;">Network Academy</div>
      </div>
      <div>
        <div class="cert-sig">วันที่ออก</div>
        <div class="cert-date" id="certDate2"></div>
      </div>
    </div>
    <div style="display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap;">
      <button class="cert-print-btn" onclick="printCert()">🖨️ พิมพ์เกียรติบัตร</button>
      <button class="cert-close-btn" onclick="closeCert()">✕ ปิด</button>
    </div>
  </div>
</div>

<!-- LEADERBOARD OVERLAY -->
<div class="ldb-overlay" id="ldbOverlay">
  <div class="ldb-box">
    <div class="ldb-title">🏅 Leaderboard</div>
    <div id="ldbNameForm" style="margin-bottom:14px;">
      <div style="font-family:Caveat;font-size:1rem;font-weight:700;margin-bottom:6px;">📝 บันทึกคะแนนของคุณ:</div>
      <input class="ldb-name-input" id="ldbNameInput" placeholder="ใส่ชื่อของคุณ..." maxlength="20">
      <button class="ldb-submit-btn" onclick="submitScore()">💾 บันทึกคะแนน</button>
    </div>
    <div class="ldb-tabs">
      <div class="ldb-tab active" onclick="switchLdbTab('all',this)">🌍 ทั้งหมด</div>
      <div class="ldb-tab" onclick="switchLdbTab('exam',this)">📝 ข้อสอบ</div>
    </div>
    <div id="ldbContent">
      <table class="ldb-table" id="ldbTableAll">
        <thead><tr><th>#</th><th>ชื่อ</th><th>คะแนนรวม</th><th>ระดับ</th></tr></thead>
        <tbody id="ldbAllBody"></tbody>
      </table>
      <table class="ldb-table" id="ldbTableExam" style="display:none">
        <thead><tr><th>#</th><th>ชื่อ</th><th>ข้อสอบ (%)</th><th>วันที่</th></tr></thead>
        <tbody id="ldbExamBody"></tbody>
      </table>
    </div>
    <button class="ldb-close-btn" onclick="closeLeaderboard()">✕ ปิด</button>
  </div>
</div>

<div class="main">

<!-- ===== PAGE 1: ประเภทเครือข่าย ===== -->
<div class="page active" id="page0">
  <div class="spiral-holes" id="holes0"></div>
  <div class="page-content">
    <div class="chapter-header">
      <div class="chapter-num">บทที่ 1 • Network Types</div>
      <h2 class="chapter-title"><span>ประเภทของระบบเครือข่าย</span></h2>
      <div class="chapter-desc">Types of Computer Networks — การแบ่งประเภทตามขนาดพื้นที่ครอบคลุม</div>
    </div>
    <div class="img-grid">
      <div class="img-card"><img decoding="async" src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=600&#038;q=80" alt="Network cables"><div class="img-caption">🖧 โครงสร้างพื้นฐานเครือข่าย</div></div>
      <div class="img-card"><img decoding="async" src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?w=600&#038;q=80" alt="Office network"><div class="img-caption">🏢 เครือข่ายในองค์กร</div></div>
    </div>
    <p class="page-text"><strong>ระบบเครือข่ายคอมพิวเตอร์</strong> (Computer Network) คือการเชื่อมต่อคอมพิวเตอร์และอุปกรณ์ต่างๆ เพื่อ<span class="highlight-blue">แลกเปลี่ยนข้อมูล</span>และ<span class="highlight-yellow">ใช้ทรัพยากรร่วมกัน</span> แบ่งตามขนาดได้ 4 ประเภทหลัก</p>
    <h3 class="section-title">1. PAN — Personal Area Network</h3>
    <div class="sticky-note orange">🔵 ครอบคลุม <strong>1–10 เมตร</strong> เชื่อมอุปกรณ์ส่วนตัว เช่น สมาร์ทโฟน, หูฟัง Bluetooth, Smartwatch ใช้เทคโนโลยี Bluetooth, ZigBee</div>
    <h3 class="section-title">2. LAN — Local Area Network</h3>
    <p class="page-text">ครอบคลุม<span class="highlight-red">ภายในอาคาร</span> ระยะ < 1 กม. ความเร็ว 10 Mbps – 10 Gbps เหมาะกับสำนักงาน โรงเรียน</p>
    <h3 class="section-title">3. MAN — Metropolitan Area Network</h3>
    <p class="page-text">ครอบคลุม<span class="highlight-blue">ระดับเมือง</span> 10–50 กม. เช่น Cable TV, เครือข่ายธนาคารหลายสาขา</p>
    <h3 class="section-title">4. WAN — Wide Area Network</h3>
    <div class="sticky-note blue">🌐 ครอบคลุม<strong>ระดับประเทศ–ทั่วโลก</strong> ตัวอย่างที่ดีที่สุดคืออินเทอร์เน็ต ใช้สายใยแก้วใต้ทะเล ดาวเทียม</div>
    <div class="hand-box" style="margin-top:18px;"><div class="hand-box-title">📊 ตารางเปรียบเทียบ</div><br>
    <table class="hand-table">
      <tr><th>ประเภท</th><th>ระยะ</th><th>ความเร็ว</th><th>ตัวอย่าง</th></tr>
      <tr><td><span class="tag purple">PAN</span></td><td>1–10 ม.</td><td>ต่ำ</td><td>Bluetooth</td></tr>
      <tr><td><span class="tag blue">LAN</span></td><td>< 1 กม.</td><td>สูง (10M–10G)</td><td>สำนักงาน</td></tr>
      <tr><td><span class="tag green">MAN</span></td><td>10–50 กม.</td><td>ปานกลาง</td><td>Cable TV</td></tr>
      <tr><td><span class="tag red">WAN</span></td><td>ทั่วโลก</td><td>ต่ำ–สูง</td><td>อินเทอร์เน็ต</td></tr>
    </table></div>
    <div class="callout">💡 <strong>เกร็ดความรู้:</strong> อินเทอร์เน็ตเชื่อมต่ออุปกรณ์กว่า <strong>20,000 ล้านชิ้น</strong>ทั่วโลก</div>

    <!-- QUIZ -->
    <div class="quiz-section">
      <div class="quiz-header"><div class="quiz-icon">✏️</div><div><div class="quiz-title">แบบทดสอบ — บทที่ 1</div><div class="quiz-subtitle">ตอบถูกรับ XP!</div></div></div>
      <div class="question">
        <div class="quiz-points">+20 XP</div>
        <div class="q-text">1. เครือข่ายประเภทใดครอบคลุมพื้นที่กว้างที่สุด?</div>
        <div class="options">
          <button class="option-btn" onclick="answerQ(this,false,'q1',0)"><span class="option-letter">A</span> LAN</button>
          <button class="option-btn" onclick="answerQ(this,false,'q1',0)"><span class="option-letter">B</span> MAN</button>
          <button class="option-btn" onclick="answerQ(this,true,'q1',0)"><span class="option-letter">C</span> WAN</button>
          <button class="option-btn" onclick="answerQ(this,false,'q1',0)"><span class="option-letter">D</span> PAN</button>
        </div>
        <div class="quiz-feedback" id="q1_0">WAN ครอบคลุมระดับประเทศถึงทั่วโลก</div>
      </div>
      <div class="question">
        <div class="quiz-points">+20 XP</div>
        <div class="q-text">2. Bluetooth ใช้ในเครือข่ายประเภทใด?</div>
        <div class="options">
          <button class="option-btn" onclick="answerQ(this,true,'q1',1)"><span class="option-letter">A</span> PAN</button>
          <button class="option-btn" onclick="answerQ(this,false,'q1',1)"><span class="option-letter">B</span> LAN</button>
          <button class="option-btn" onclick="answerQ(this,false,'q1',1)"><span class="option-letter">C</span> MAN</button>
          <button class="option-btn" onclick="answerQ(this,false,'q1',1)"><span class="option-letter">D</span> WAN</button>
        </div>
        <div class="quiz-feedback" id="q1_1">Bluetooth ใช้ใน PAN เชื่อมต่ออุปกรณ์ส่วนตัวระยะใกล้</div>
      </div>
    </div>

    <!-- TRUE/FALSE -->
    <div class="tf-game">
      <div class="tf-title">✅❌ ถูกหรือผิด — ประเภทเครือข่าย</div>
      <div class="tf-item">
        <div class="tf-statement">LAN สามารถครอบคลุมระยะทางได้มากกว่า WAN</div>
        <div class="tf-btns">
          <button class="tf-btn true-btn" onclick="answerTF(this,false,'tf1_0','LAN ครอบคลุมแค่ภายในอาคาร ส่วน WAN ครอบคลุมทั่วโลก')">✅ ถูก</button>
          <button class="tf-btn false-btn" onclick="answerTF(this,true,'tf1_0','LAN ครอบคลุมแค่ภายในอาคาร ส่วน WAN ครอบคลุมทั่วโลก')">❌ ผิด</button>
        </div>
        <div class="tf-feedback" id="tf1_0"></div>
      </div>
      <div class="tf-item">
        <div class="tf-statement">สมาร์ทโฟนที่เชื่อมต่อ Bluetooth กับหูฟังเป็นตัวอย่างของ PAN</div>
        <div class="tf-btns">
          <button class="tf-btn true-btn" onclick="answerTF(this,true,'tf1_1','PAN ใช้ Bluetooth เชื่อมต่ออุปกรณ์ส่วนตัวระยะใกล้')">✅ ถูก</button>
          <button class="tf-btn false-btn" onclick="answerTF(this,false,'tf1_1','PAN ใช้ Bluetooth เชื่อมต่ออุปกรณ์ส่วนตัวระยะใกล้')">❌ ผิด</button>
        </div>
        <div class="tf-feedback" id="tf1_1"></div>
      </div>
      <div class="tf-item">
        <div class="tf-statement">MAN ย่อมาจาก Municipal Area Network</div>
        <div class="tf-btns">
          <button class="tf-btn true-btn" onclick="answerTF(this,false,'tf1_2','MAN ย่อมาจาก Metropolitan Area Network ไม่ใช่ Municipal')">✅ ถูก</button>
          <button class="tf-btn false-btn" onclick="answerTF(this,true,'tf1_2','MAN ย่อมาจาก Metropolitan Area Network ไม่ใช่ Municipal')">❌ ผิด</button>
        </div>
        <div class="tf-feedback" id="tf1_2"></div>
      </div>
    </div>

    <div class="page-nav">
      <button class="nav-arrow" disabled>← ก่อนหน้า</button>
      <div class="page-indicator">📄 หน้า 1 / 6</div>
      <button class="nav-arrow" onclick="goPage(1)">ถัดไป →</button>
    </div>
  </div>
</div>

<!-- ===== PAGE 2: โทโปโลยี ===== -->
<div class="page" id="page1">
  <div class="spiral-holes" id="holes1"></div>
  <div class="page-content">
    <div class="chapter-header">
      <div class="chapter-num">บทที่ 2 • Network Topology</div>
      <h2 class="chapter-title"><span>โทโปโลยีระบบเครือข่าย</span></h2>
      <div class="chapter-desc">Network Topology — รูปแบบการเชื่อมต่อทางกายภาพและทางตรรกะ</div>
    </div>
    <p class="page-text"><strong>โทโปโลยี</strong> คือรูปแบบ<span class="highlight-blue">โครงสร้างการเชื่อมต่อ</span> แบ่งเป็น กายภาพ (Physical) และ ตรรกะ (Logical)</p>
    <div class="sticky-note">🎯 คลิกที่โทโปโลยีแต่ละแบบเพื่อดูรายละเอียด!</div>
    <div class="topo-grid">
      <div class="topo-card" onclick="selectTopo(this)">
        <svg class="topo-svg" viewBox="0 0 80 80"><line x1="10" y1="40" x2="70" y2="40" stroke="#2c1810" stroke-width="3" stroke-linecap="round"/><circle cx="20" cy="30" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><circle cx="40" cy="30" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><circle cx="60" cy="30" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><line x1="20" y1="38" x2="20" y2="32" stroke="#2c1810" stroke-width="2"/><line x1="40" y1="38" x2="40" y2="32" stroke="#2c1810" stroke-width="2"/><line x1="60" y1="38" x2="60" y2="32" stroke="#2c1810" stroke-width="2"/><rect x="8" y="37" width="6" height="6" fill="#c0392b"/><rect x="66" y="37" width="6" height="6" fill="#c0392b"/></svg>
        <div class="topo-name">🚌 Bus</div>
        <div class="topo-desc">สายแกนกลาง 1 เส้น ราคาถูก แต่สายขาดทั้งระบบหยุด</div>
      </div>
      <div class="topo-card" onclick="selectTopo(this)">
        <svg class="topo-svg" viewBox="0 0 80 80"><rect x="33" y="33" width="14" height="14" fill="#f39c12" stroke="#2c1810" stroke-width="2"/><circle cx="15" cy="15" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><circle cx="40" cy="10" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><circle cx="65" cy="15" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><circle cx="15" cy="65" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><circle cx="65" cy="65" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><line x1="23" y1="23" x2="33" y2="33" stroke="#2c1810" stroke-width="2"/><line x1="40" y1="18" x2="40" y2="33" stroke="#2c1810" stroke-width="2"/><line x1="57" y1="23" x2="47" y2="33" stroke="#2c1810" stroke-width="2"/><line x1="23" y1="57" x2="33" y2="47" stroke="#2c1810" stroke-width="2"/><line x1="57" y1="57" x2="47" y2="47" stroke="#2c1810" stroke-width="2"/></svg>
        <div class="topo-name">⭐ Star</div>
        <div class="topo-desc">Hub/Switch ตรงกลาง นิยมที่สุด ดูแลง่าย</div>
      </div>
      <div class="topo-card" onclick="selectTopo(this)">
        <svg class="topo-svg" viewBox="0 0 80 80"><circle cx="40" cy="40" r="28" fill="none" stroke="#2c1810" stroke-width="2.5"/><circle cx="40" cy="12" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><circle cx="68" cy="40" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><circle cx="40" cy="68" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><circle cx="12" cy="40" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/></svg>
        <div class="topo-name">💍 Ring</div>
        <div class="topo-desc">วนเป็นวงกลม ใช้ Token ป้องกันการชน</div>
      </div>
      <div class="topo-card" onclick="selectTopo(this)">
        <svg class="topo-svg" viewBox="0 0 80 80"><line x1="15" y1="15" x2="65" y2="15" stroke="#2c1810" stroke-width="1.5"/><line x1="15" y1="15" x2="15" y2="65" stroke="#2c1810" stroke-width="1.5"/><line x1="65" y1="15" x2="65" y2="65" stroke="#2c1810" stroke-width="1.5"/><line x1="15" y1="65" x2="65" y2="65" stroke="#2c1810" stroke-width="1.5"/><line x1="15" y1="15" x2="65" y2="65" stroke="#2c1810" stroke-width="1.5"/><line x1="65" y1="15" x2="15" y2="65" stroke="#2c1810" stroke-width="1.5"/><circle cx="15" cy="15" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><circle cx="65" cy="15" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><circle cx="15" cy="65" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><circle cx="65" cy="65" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><circle cx="40" cy="40" r="8" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/></svg>
        <div class="topo-name">🕸️ Mesh</div>
        <div class="topo-desc">เชื่อมทุกโหนด มีเส้นทางสำรอง เชื่อถือสูงสุด</div>
      </div>
      <div class="topo-card" onclick="selectTopo(this)">
        <svg class="topo-svg" viewBox="0 0 80 80"><circle cx="40" cy="10" r="8" fill="#f39c12" stroke="#2c1810" stroke-width="2.5"/><line x1="40" y1="18" x2="20" y2="38" stroke="#2c1810" stroke-width="2"/><line x1="40" y1="18" x2="60" y2="38" stroke="#2c1810" stroke-width="2"/><circle cx="20" cy="40" r="7" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><circle cx="60" cy="40" r="7" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><line x1="13" y1="47" x2="10" y2="62" stroke="#2c1810" stroke-width="2"/><line x1="20" y1="47" x2="20" y2="62" stroke="#2c1810" stroke-width="2"/><line x1="27" y1="47" x2="30" y2="62" stroke="#2c1810" stroke-width="2"/><line x1="53" y1="47" x2="50" y2="62" stroke="#2c1810" stroke-width="2"/><line x1="60" y1="47" x2="60" y2="62" stroke="#2c1810" stroke-width="2"/><line x1="67" y1="47" x2="70" y2="62" stroke="#2c1810" stroke-width="2"/><circle cx="10" cy="64" r="5" fill="#fef9f0" stroke="#2c1810" stroke-width="2"/><circle cx="20" cy="64" r="5" fill="#fef9f0" stroke="#2c1810" stroke-width="2"/><circle cx="30" cy="64" r="5" fill="#fef9f0" stroke="#2c1810" stroke-width="2"/><circle cx="50" cy="64" r="5" fill="#fef9f0" stroke="#2c1810" stroke-width="2"/><circle cx="60" cy="64" r="5" fill="#fef9f0" stroke="#2c1810" stroke-width="2"/><circle cx="70" cy="64" r="5" fill="#fef9f0" stroke="#2c1810" stroke-width="2"/></svg>
        <div class="topo-name">🌳 Tree</div>
        <div class="topo-desc">ลำดับชั้น ขยายได้ง่าย เหมาะองค์กรใหญ่</div>
      </div>
      <div class="topo-card" onclick="selectTopo(this)">
        <svg class="topo-svg" viewBox="0 0 80 80"><circle cx="20" cy="40" r="6" fill="#f39c12" stroke="#2c1810" stroke-width="2"/><line x1="26" y1="40" x2="54" y2="40" stroke="#2c1810" stroke-width="2"/><line x1="10" y1="15" x2="20" y2="34" stroke="#2c1810" stroke-width="2"/><line x1="20" y1="34" x2="30" y2="15" stroke="#2c1810" stroke-width="2"/><circle cx="10" cy="12" r="6" fill="#fef9f0" stroke="#2c1810" stroke-width="2"/><circle cx="30" cy="12" r="6" fill="#fef9f0" stroke="#2c1810" stroke-width="2"/><rect x="54" y="34" width="12" height="12" fill="#f39c12" stroke="#2c1810" stroke-width="2"/><line x1="66" y1="40" x2="72" y2="25" stroke="#2c1810" stroke-width="2"/><line x1="66" y1="40" x2="72" y2="40" stroke="#2c1810" stroke-width="2"/><line x1="66" y1="40" x2="72" y2="55" stroke="#2c1810" stroke-width="2"/><circle cx="72" cy="25" r="5" fill="#fef9f0" stroke="#2c1810" stroke-width="2"/><circle cx="72" cy="40" r="5" fill="#fef9f0" stroke="#2c1810" stroke-width="2"/><circle cx="72" cy="55" r="5" fill="#fef9f0" stroke="#2c1810" stroke-width="2"/></svg>
        <div class="topo-name">🔀 Hybrid</div>
        <div class="topo-desc">ผสมหลายแบบ ยืดหยุ่นสูงสุด</div>
      </div>
    </div>
    <div class="callout success">✅ Star เป็นโทโปโลยีที่นิยมมากที่สุด เพิ่ม/ลดอุปกรณ์ได้โดยไม่รบกวนระบบ</div>

    <!-- MATCHING -->
    <div class="quiz-section">
      <div class="quiz-header"><div class="quiz-icon">🧩</div><div><div class="quiz-title">จับคู่โทโปโลยี</div><div class="quiz-subtitle">คลิกซ้ายแล้วคลิกขวาเพื่อจับคู่ +25XP ต่อคู่</div></div></div>
      <div class="match-grid">
        <div class="match-col" id="matchLeft2">
          <div class="match-item" data-match="a" onclick="matchSelect(this,'left2')">🚌 สายแกนกลาง 1 เส้น</div>
          <div class="match-item" data-match="b" onclick="matchSelect(this,'left2')">⭐ Hub/Switch ตรงกลาง</div>
          <div class="match-item" data-match="c" onclick="matchSelect(this,'left2')">💍 Token วนเป็นวงกลม</div>
          <div class="match-item" data-match="d" onclick="matchSelect(this,'left2')">🕸️ เชื่อมทุกโหนดหากัน</div>
        </div>
        <div class="match-col" id="matchRight2">
          <div class="match-item" data-match="c" onclick="matchSelect(this,'right2')">Ring Topology</div>
          <div class="match-item" data-match="b" onclick="matchSelect(this,'right2')">Star Topology</div>
          <div class="match-item" data-match="d" onclick="matchSelect(this,'right2')">Mesh Topology</div>
          <div class="match-item" data-match="a" onclick="matchSelect(this,'right2')">Bus Topology</div>
        </div>
      </div>
      <div id="matchScore2" style="font-family:Caveat;font-size:1.1rem;font-weight:700;color:var(--green);margin-top:8px;"></div>
    </div>

    <!-- T/F -->
    <div class="tf-game">
      <div class="tf-title">✅❌ ถูกหรือผิด — โทโปโลยี</div>
      <div class="tf-item">
        <div class="tf-statement">ถ้าสายแกนกลางของ Bus Topology ขาด เครื่องเดียวจะหยุดทำงาน</div>
        <div class="tf-btns">
          <button class="tf-btn true-btn" onclick="answerTF(this,false,'tf2_0','สายแกนกลาง Bus ขาดทั้งระบบหยุดทำงาน ไม่ใช่แค่เครื่องเดียว')">✅ ถูก</button>
          <button class="tf-btn false-btn" onclick="answerTF(this,true,'tf2_0','สายแกนกลาง Bus ขาดทั้งระบบหยุดทำงาน ไม่ใช่แค่เครื่องเดียว')">❌ ผิด</button>
        </div>
        <div class="tf-feedback" id="tf2_0"></div>
      </div>
      <div class="tf-item">
        <div class="tf-statement">Mesh Topology มีความเชื่อถือได้สูงเพราะมีเส้นทางสำรองหลายเส้นทาง</div>
        <div class="tf-btns">
          <button class="tf-btn true-btn" onclick="answerTF(this,true,'tf2_1','Mesh เชื่อมทุกโหนดหากัน มีเส้นทางสำรองมาก จึงเชื่อถือได้สูงสุด')">✅ ถูก</button>
          <button class="tf-btn false-btn" onclick="answerTF(this,false,'tf2_1','Mesh เชื่อมทุกโหนดหากัน มีเส้นทางสำรองมาก จึงเชื่อถือได้สูงสุด')">❌ ผิด</button>
        </div>
        <div class="tf-feedback" id="tf2_1"></div>
      </div>
    </div>

    <div class="page-nav">
      <button class="nav-arrow" onclick="goPage(0)">← ก่อนหน้า</button>
      <div class="page-indicator">📄 หน้า 2 / 6</div>
      <button class="nav-arrow" onclick="goPage(2)">ถัดไป →</button>
    </div>
  </div>
</div>

<!-- ===== PAGE 3: มาตรฐาน LAN ===== -->
<div class="page" id="page2">
  <div class="spiral-holes" id="holes2"></div>
  <div class="page-content">
    <div class="chapter-header">
      <div class="chapter-num">บทที่ 3 • LAN Standards</div>
      <h2 class="chapter-title"><span>มาตรฐานเครือข่ายแลน</span></h2>
      <div class="chapter-desc">IEEE 802 Standards — มาตรฐานกำหนดวิธีรับ-ส่งข้อมูลใน LAN</div>
    </div>
    <p class="page-text">มาตรฐาน LAN ถูกกำหนดโดย <strong>IEEE</strong> ภายใต้ชุดมาตรฐาน <span class="highlight-red">IEEE 802</span> ครอบคลุมชั้น Physical และ Data Link</p>
    <div class="two-col">
      <div class="hand-box" style="margin:0;"><div class="hand-box-title">📡 IEEE 802.3 — Ethernet</div><br>
        <div class="list-item"><span class="list-bullet">→</span><span>10BASE-T: <strong>10 Mbps</strong></span></div>
        <div class="list-item"><span class="list-bullet">→</span><span>Fast Ethernet: <strong>100 Mbps</strong></span></div>
        <div class="list-item"><span class="list-bullet">→</span><span>Gigabit Ethernet: <strong>1 Gbps</strong></span></div>
        <div class="list-item"><span class="list-bullet">→</span><span>10G Ethernet: <strong>10 Gbps</strong></span></div>
      </div>
      <div class="hand-box" style="margin:0;"><div class="hand-box-title">📶 IEEE 802.11 — Wi-Fi</div><br>
        <div class="list-item"><span class="list-bullet">→</span><span>802.11b: 2.4GHz, 11 Mbps</span></div>
        <div class="list-item"><span class="list-bullet">→</span><span>802.11n (Wi-Fi 4): 600 Mbps</span></div>
        <div class="list-item"><span class="list-bullet">→</span><span>802.11ac (Wi-Fi 5): 3.5 Gbps</span></div>
        <div class="list-item"><span class="list-bullet">→</span><span>802.11ax (Wi-Fi 6): 9.6 Gbps</span></div>
      </div>
    </div>
    <table class="hand-table">
      <tr><th>มาตรฐาน</th><th>สาย</th><th>ความเร็ว</th><th>ระยะ</th></tr>
      <tr><td>10BASE-T</td><td>UTP Cat 3</td><td>10 Mbps</td><td>100 ม.</td></tr>
      <tr><td>100BASE-TX</td><td>UTP Cat 5e</td><td>100 Mbps</td><td>100 ม.</td></tr>
      <tr><td>1000BASE-T</td><td>UTP Cat 5e/6</td><td>1 Gbps</td><td>100 ม.</td></tr>
      <tr><td>10GBASE-T</td><td>UTP Cat 6A/7</td><td>10 Gbps</td><td>100 ม.</td></tr>
    </table>
    <div class="sticky-note pink">🔌 <strong>CSMA/CD</strong> — Carrier Sense Multiple Access with Collision Detection คือกลไก Ethernet จัดการการส่งข้อมูลพร้อมกัน</div>

    <div class="quiz-section">
      <div class="quiz-header"><div class="quiz-icon">📋</div><div><div class="quiz-title">แบบทดสอบ — มาตรฐาน LAN</div></div></div>
      <div class="question">
        <div class="quiz-points">+25 XP</div>
        <div class="q-text">1. IEEE 802.11 เป็นมาตรฐานของเครือข่ายใด?</div>
        <div class="options">
          <button class="option-btn" onclick="answerQ(this,false,'q3',0)"><span class="option-letter">A</span> Ethernet มีสาย</button>
          <button class="option-btn" onclick="answerQ(this,true,'q3',0)"><span class="option-letter">B</span> Wi-Fi ไร้สาย</button>
          <button class="option-btn" onclick="answerQ(this,false,'q3',0)"><span class="option-letter">C</span> Bluetooth</button>
          <button class="option-btn" onclick="answerQ(this,false,'q3',0)"><span class="option-letter">D</span> Token Ring</button>
        </div>
        <div class="quiz-feedback" id="q3_0">IEEE 802.11 คือมาตรฐาน Wi-Fi (Wireless LAN)</div>
      </div>
      <div class="question">
        <div class="quiz-points">+25 XP</div>
        <div class="q-text">2. Cat 6A รองรับความเร็วสูงสุดเท่าไหร่?</div>
        <div class="options">
          <button class="option-btn" onclick="answerQ(this,false,'q3',1)"><span class="option-letter">A</span> 100 Mbps</button>
          <button class="option-btn" onclick="answerQ(this,false,'q3',1)"><span class="option-letter">B</span> 1 Gbps</button>
          <button class="option-btn" onclick="answerQ(this,true,'q3',1)"><span class="option-letter">C</span> 10 Gbps</button>
          <button class="option-btn" onclick="answerQ(this,false,'q3',1)"><span class="option-letter">D</span> 100 Gbps</button>
        </div>
        <div class="quiz-feedback" id="q3_1">Cat 6A รองรับ 10 Gbps ในระยะ 100 เมตร</div>
      </div>
    </div>

    <div class="tf-game">
      <div class="tf-title">✅❌ ถูกหรือผิด — มาตรฐาน LAN</div>
      <div class="tf-item">
        <div class="tf-statement">Fiber Optic (สายใยแก้วนำแสง) สามารถส่งข้อมูลได้ไกลกว่าสาย UTP</div>
        <div class="tf-btns">
          <button class="tf-btn true-btn" onclick="answerTF(this,true,'tf3_0','Fiber Optic ส่งได้ไกลหลายกิโลเมตรและรองรับความเร็วสูงกว่า UTP')">✅ ถูก</button>
          <button class="tf-btn false-btn" onclick="answerTF(this,false,'tf3_0','Fiber Optic ส่งได้ไกลหลายกิโลเมตรและรองรับความเร็วสูงกว่า UTP')">❌ ผิด</button>
        </div>
        <div class="tf-feedback" id="tf3_0"></div>
      </div>
      <div class="tf-item">
        <div class="tf-statement">CSMA/CD ใช้ใน Wi-Fi เพื่อป้องกันการชนของข้อมูล</div>
        <div class="tf-btns">
          <button class="tf-btn true-btn" onclick="answerTF(this,false,'tf3_1','CSMA/CD ใช้ใน Ethernet มีสาย ส่วน Wi-Fi ใช้ CSMA/CA แทน')">✅ ถูก</button>
          <button class="tf-btn false-btn" onclick="answerTF(this,true,'tf3_1','CSMA/CD ใช้ใน Ethernet มีสาย ส่วน Wi-Fi ใช้ CSMA/CA แทน')">❌ ผิด</button>
        </div>
        <div class="tf-feedback" id="tf3_1"></div>
      </div>
    </div>

    <div class="page-nav">
      <button class="nav-arrow" onclick="goPage(1)">← ก่อนหน้า</button>
      <div class="page-indicator">📄 หน้า 3 / 6</div>
      <button class="nav-arrow" onclick="goPage(3)">ถัดไป →</button>
    </div>
  </div>
</div>

<!-- ===== PAGE 4: ชนิดการทำงาน LAN ===== -->
<div class="page" id="page3">
  <div class="spiral-holes" id="holes3"></div>
  <div class="page-content">
    <div class="chapter-header">
      <div class="chapter-num">บทที่ 4 • LAN Operation</div>
      <h2 class="chapter-title"><span>ชนิดของการทำงานเครือข่ายแลน</span></h2>
      <div class="chapter-desc">LAN Operation Modes — วิธีการจัดการทรัพยากรในเครือข่าย</div>
    </div>
    <h3 class="section-title">1. Peer-to-Peer (P2P)</h3>
    <div class="two-col">
      <div>
        <div class="sticky-note green" style="transform:rotate(0.5deg)">👥 ทุกเครื่องเท่าเทียมกัน ไม่มีเซิร์ฟเวอร์กลาง เหมาะเครือข่ายเล็ก 2–10 เครื่อง</div>
        <div class="callout success">✅ <strong>ข้อดี:</strong> ราคาถูก ติดตั้งง่าย</div>
        <div class="callout warning">⚠️ <strong>ข้อเสีย:</strong> ดูแลยาก ความปลอดภัยต่ำ</div>
      </div>
      <div>
        <svg viewBox="0 0 200 160" width="100%" style="border:2px solid var(--ink);background:var(--paper2);">
          <circle cx="40" cy="40" r="20" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><text x="40" y="45" text-anchor="middle" font-family="Caveat" font-size="12" fill="#2c1810">PC 1</text>
          <circle cx="160" cy="40" r="20" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><text x="160" y="45" text-anchor="middle" font-family="Caveat" font-size="12" fill="#2c1810">PC 2</text>
          <circle cx="40" cy="120" r="20" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><text x="40" y="125" text-anchor="middle" font-family="Caveat" font-size="12" fill="#2c1810">PC 3</text>
          <circle cx="160" cy="120" r="20" fill="#fef9f0" stroke="#2c1810" stroke-width="2.5"/><text x="160" y="125" text-anchor="middle" font-family="Caveat" font-size="12" fill="#2c1810">PC 4</text>
          <line x1="60" y1="40" x2="140" y2="40" stroke="#2c1810" stroke-width="2" stroke-dasharray="4,3"/>
          <line x1="40" y1="60" x2="40" y2="100" stroke="#2c1810" stroke-width="2" stroke-dasharray="4,3"/>
          <line x1="60" y1="120" x2="140" y2="120" stroke="#2c1810" stroke-width="2" stroke-dasharray="4,3"/>
          <line x1="160" y1="60" x2="160" y2="100" stroke="#2c1810" stroke-width="2" stroke-dasharray="4,3"/>
          <text x="100" y="85" text-anchor="middle" font-family="Caveat" font-size="11" fill="#c0392b">Peer-to-Peer</text>
        </svg>
      </div>
    </div>
    <h3 class="section-title">2. Client/Server</h3>
    <p class="page-text">มี<strong>เซิร์ฟเวอร์</strong>เป็นศูนย์กลาง ให้บริการ<span class="highlight-red">ไฟล์ เครื่องพิมพ์ อีเมล ฐานข้อมูล</span> เหมาะกับองค์กรขนาดกลาง–ใหญ่</p>
    <table class="hand-table">
      <tr><th>อุปกรณ์</th><th>Layer</th><th>หน้าที่</th></tr>
      <tr><td>Hub</td><td>1</td><td>ขยายสัญญาณ Broadcast ทุกพอร์ต</td></tr>
      <tr><td>Switch</td><td>2</td><td>ส่งตาม MAC Address ตรงพอร์ต</td></tr>
      <tr><td>Router</td><td>3</td><td>เชื่อมเครือข่ายต่างกัน หาเส้นทาง</td></tr>
      <tr><td>Gateway</td><td>4-7</td><td>แปลโปรโตคอลต่างชนิด</td></tr>
    </table>

    <div class="quiz-section">
      <div class="quiz-header"><div class="quiz-icon">🎯</div><div><div class="quiz-title">Quiz — อุปกรณ์เครือข่าย</div></div></div>
      <div class="question">
        <div class="quiz-points">+25 XP</div>
        <div class="q-text">1. Router ทำงานที่ Layer ใด?</div>
        <div class="options">
          <button class="option-btn" onclick="answerQ(this,false,'q4',0)"><span class="option-letter">A</span> Layer 1</button>
          <button class="option-btn" onclick="answerQ(this,false,'q4',0)"><span class="option-letter">B</span> Layer 2</button>
          <button class="option-btn" onclick="answerQ(this,true,'q4',0)"><span class="option-letter">C</span> Layer 3</button>
          <button class="option-btn" onclick="answerQ(this,false,'q4',0)"><span class="option-letter">D</span> Layer 4</button>
        </div>
        <div class="quiz-feedback" id="q4_0">Router ทำงาน Layer 3 ใช้ IP Address ในการส่งข้อมูล</div>
      </div>
      <div class="question">
        <div class="quiz-points">+25 XP</div>
        <div class="q-text">2. DHCP Server ทำหน้าที่ใด?</div>
        <div class="options">
          <button class="option-btn" onclick="answerQ(this,false,'q4',1)"><span class="option-letter">A</span> รับ-ส่งอีเมล</button>
          <button class="option-btn" onclick="answerQ(this,false,'q4',1)"><span class="option-letter">B</span> แชร์ไฟล์</button>
          <button class="option-btn" onclick="answerQ(this,true,'q4',1)"><span class="option-letter">C</span> แจก IP อัตโนมัติ</button>
          <button class="option-btn" onclick="answerQ(this,false,'q4',1)"><span class="option-letter">D</span> แปลงโดเมน</button>
        </div>
        <div class="quiz-feedback" id="q4_1">DHCP (Dynamic Host Configuration Protocol) แจก IP Address อัตโนมัติ</div>
      </div>
    </div>

    <div class="tf-game">
      <div class="tf-title">✅❌ ถูกหรือผิด — การทำงาน LAN</div>
      <div class="tf-item">
        <div class="tf-statement">Switch ส่งข้อมูลไปยังทุกพอร์ตเหมือน Hub</div>
        <div class="tf-btns">
          <button class="tf-btn true-btn" onclick="answerTF(this,false,'tf4_0','Switch ส่งข้อมูลตาม MAC Address ไปยังพอร์ตปลายทางเท่านั้น ต่างจาก Hub')">✅ ถูก</button>
          <button class="tf-btn false-btn" onclick="answerTF(this,true,'tf4_0','Switch ส่งข้อมูลตาม MAC Address ไปยังพอร์ตปลายทางเท่านั้น ต่างจาก Hub')">❌ ผิด</button>
        </div>
        <div class="tf-feedback" id="tf4_0"></div>
      </div>
      <div class="tf-item">
        <div class="tf-statement">P2P เหมาะกับองค์กรขนาดใหญ่ที่มีคอมพิวเตอร์มากกว่า 100 เครื่อง</div>
        <div class="tf-btns">
          <button class="tf-btn true-btn" onclick="answerTF(this,false,'tf4_1','P2P เหมาะกับเครือข่ายเล็ก 2-10 เครื่อง องค์กรใหญ่ควรใช้ Client/Server')">✅ ถูก</button>
          <button class="tf-btn false-btn" onclick="answerTF(this,true,'tf4_1','P2P เหมาะกับเครือข่ายเล็ก 2-10 เครื่อง องค์กรใหญ่ควรใช้ Client/Server')">❌ ผิด</button>
        </div>
        <div class="tf-feedback" id="tf4_1"></div>
      </div>
    </div>

    <div class="page-nav">
      <button class="nav-arrow" onclick="goPage(2)">← ก่อนหน้า</button>
      <div class="page-indicator">📄 หน้า 4 / 6</div>
      <button class="nav-arrow" onclick="goPage(4)">ถัดไป →</button>
    </div>
  </div>
</div>

<!-- ===== PAGE 5: Wireless ===== -->
<div class="page" id="page4">
  <div class="spiral-holes" id="holes4"></div>
  <div class="page-content">
    <div class="chapter-header">
      <div class="chapter-num">บทที่ 5 • Wireless LAN</div>
      <h2 class="chapter-title"><span>ระบบแลนไร้สาย</span></h2>
      <div class="chapter-desc">Wireless LAN — รับ-ส่งข้อมูลผ่านคลื่นวิทยุแทนสายเคเบิล</div>
    </div>
    <div class="img-grid">
      <div class="img-card"><img decoding="async" src="https://images.unsplash.com/photo-1606904825846-647eb07f5be2?w=600&#038;q=80" alt="router"><div class="img-caption">📡 Wi-Fi Router</div></div>
      <div class="img-card"><img decoding="async" src="https://images.unsplash.com/photo-1521791136064-7986c2920216?w=600&#038;q=80" alt="wifi users"><div class="img-caption">📱 การใช้ Wireless ในชีวิตจริง</div></div>
    </div>
    <table class="hand-table">
      <tr><th>Generation</th><th>มาตรฐาน</th><th>ความถี่</th><th>ความเร็วสูงสุด</th></tr>
      <tr><td>Wi-Fi 4</td><td>802.11n</td><td>2.4/5 GHz</td><td>600 Mbps</td></tr>
      <tr><td><span class="highlight-yellow">Wi-Fi 5</span></td><td>802.11ac</td><td>5 GHz</td><td>3.5 Gbps</td></tr>
      <tr><td><span class="highlight-red">Wi-Fi 6</span></td><td>802.11ax</td><td>2.4/5 GHz</td><td>9.6 Gbps</td></tr>
      <tr><td><span class="highlight-red">Wi-Fi 6E</span></td><td>802.11ax</td><td>2.4/5/6 GHz</td><td>9.6 Gbps</td></tr>
    </table>
    <h3 class="section-title">ความปลอดภัย WLAN</h3>
    <div class="list-item"><span class="list-bullet">🔴</span><span><strong>WEP</strong> — ไม่ปลอดภัย crack ง่าย ไม่ควรใช้</span></div>
    <div class="list-item"><span class="list-bullet">🟡</span><span><strong>WPA</strong> — ใช้ TKIP ปลอดภัยพอใช้</span></div>
    <div class="list-item"><span class="list-bullet">🟢</span><span><strong>WPA2</strong> — AES-CCMP เป็นมาตรฐานปัจจุบัน</span></div>
    <div class="list-item"><span class="list-bullet">🔵</span><span><strong>WPA3</strong> — ล่าสุด ปลอดภัยที่สุด SAE</span></div>

    <div class="quiz-section">
      <div class="quiz-header"><div class="quiz-icon">📡</div><div><div class="quiz-title">Quiz — Wireless LAN</div></div></div>
      <div class="question">
        <div class="quiz-points">+20 XP</div>
        <div class="q-text">1. Wi-Fi 6 ใช้มาตรฐาน IEEE ใด?</div>
        <div class="options">
          <button class="option-btn" onclick="answerQ(this,false,'q5',0)"><span class="option-letter">A</span> 802.11ac</button>
          <button class="option-btn" onclick="answerQ(this,true,'q5',0)"><span class="option-letter">B</span> 802.11ax</button>
          <button class="option-btn" onclick="answerQ(this,false,'q5',0)"><span class="option-letter">C</span> 802.11n</button>
          <button class="option-btn" onclick="answerQ(this,false,'q5',0)"><span class="option-letter">D</span> 802.11g</button>
        </div>
        <div class="quiz-feedback" id="q5_0">Wi-Fi 6 ใช้ IEEE 802.11ax</div>
      </div>
      <div class="question">
        <div class="quiz-points">+20 XP</div>
        <div class="q-text">2. โปรโตคอลความปลอดภัยใดปลอดภัยที่สุด?</div>
        <div class="options">
          <button class="option-btn" onclick="answerQ(this,false,'q5',1)"><span class="option-letter">A</span> WEP</button>
          <button class="option-btn" onclick="answerQ(this,false,'q5',1)"><span class="option-letter">B</span> WPA</button>
          <button class="option-btn" onclick="answerQ(this,false,'q5',1)"><span class="option-letter">C</span> WPA2</button>
          <button class="option-btn" onclick="answerQ(this,true,'q5',1)"><span class="option-letter">D</span> WPA3</button>
        </div>
        <div class="quiz-feedback" id="q5_1">WPA3 เป็นมาตรฐานล่าสุดและปลอดภัยที่สุด</div>
      </div>
    </div>

    <div class="tf-game">
      <div class="tf-title">✅❌ ถูกหรือผิด — Wireless</div>
      <div class="tf-item">
        <div class="tf-statement">ย่านความถี่ 5 GHz มีระยะครอบคลุมไกลกว่า 2.4 GHz</div>
        <div class="tf-btns">
          <button class="tf-btn true-btn" onclick="answerTF(this,false,'tf5_0','2.4 GHz มีระยะไกลกว่าและทะลุกำแพงได้ดีกว่า ส่วน 5 GHz เร็วกว่าแต่ระยะสั้นกว่า')">✅ ถูก</button>
          <button class="tf-btn false-btn" onclick="answerTF(this,true,'tf5_0','2.4 GHz มีระยะไกลกว่าและทะลุกำแพงได้ดีกว่า ส่วน 5 GHz เร็วกว่าแต่ระยะสั้นกว่า')">❌ ผิด</button>
        </div>
        <div class="tf-feedback" id="tf5_0"></div>
      </div>
    </div>

    <div class="page-nav">
      <button class="nav-arrow" onclick="goPage(3)">← ก่อนหน้า</button>
      <div class="page-indicator">📄 หน้า 5 / 6</div>
      <button class="nav-arrow" onclick="goPage(5)">ถัดไป →</button>
    </div>
  </div>
</div>

<!-- ===== PAGE 6: อินเทอร์เน็ต ===== -->
<div class="page" id="page5">
  <div class="spiral-holes" id="holes5"></div>
  <div class="page-content">
    <div class="chapter-header">
      <div class="chapter-num">บทที่ 6 • Internet</div>
      <h2 class="chapter-title"><span>เครือข่ายอินเทอร์เน็ต</span></h2>
      <div class="chapter-desc">Internet — เครือข่ายขนาดใหญ่เชื่อมอุปกรณ์กว่า 20 พันล้านชิ้นทั่วโลก</div>
    </div>
    <p class="page-text"><strong>อินเทอร์เน็ต</strong> = Interconnected Networks เชื่อม LAN/MAN/WAN ผ่าน <strong>TCP/IP</strong> พัฒนาจาก ARPANET ปี 1969</p>
    <div class="two-col">
      <div class="hand-box" style="margin:0;"><div class="hand-box-title">📦 TCP</div><br>
        <div class="list-item"><span class="list-bullet">→</span><span>แบ่งข้อมูลเป็น Packet</span></div>
        <div class="list-item"><span class="list-bullet">→</span><span>รับประกันครบถ้วน</span></div>
        <div class="list-item"><span class="list-bullet">→</span><span>ใช้กับ HTTP, Email</span></div>
      </div>
      <div class="hand-box" style="margin:0;"><div class="hand-box-title">🌐 IP</div><br>
        <div class="list-item"><span class="list-bullet">→</span><span>IPv4: 32-bit (4.3 พันล้าน)</span></div>
        <div class="list-item"><span class="list-bullet">→</span><span>IPv6: 128-bit (อนาคต)</span></div>
        <div class="list-item"><span class="list-bullet">→</span><span>Routing เส้นทางข้อมูล</span></div>
      </div>
    </div>
    <table class="hand-table">
      <tr><th>โปรโตคอล</th><th>Port</th><th>ใช้ทำอะไร</th></tr>
      <tr><td><span class="tag blue">HTTP</span></td><td>80</td><td>เว็บไซต์ทั่วไป</td></tr>
      <tr><td><span class="tag green">HTTPS</span></td><td>443</td><td>เว็บไซต์เข้ารหัส</td></tr>
      <tr><td><span class="tag purple">FTP</span></td><td>21</td><td>โอนไฟล์</td></tr>
      <tr><td><span class="tag red">SMTP</span></td><td>25</td><td>ส่งอีเมล</td></tr>
      <tr><td><span class="tag blue">DNS</span></td><td>53</td><td>แปลงโดเมน→IP</td></tr>
      <tr><td><span class="tag green">SSH</span></td><td>22</td><td>Remote access เข้ารหัส</td></tr>
    </table>

    <div class="quiz-section">
      <div class="quiz-header"><div class="quiz-icon">🌍</div><div><div class="quiz-title">Quiz — อินเทอร์เน็ต</div></div></div>
      <div class="question">
        <div class="quiz-points">+25 XP</div>
        <div class="q-text">1. HTTPS ใช้ Port ใด?</div>
        <div class="options">
          <button class="option-btn" onclick="answerQ(this,false,'q6',0)"><span class="option-letter">A</span> 21</button>
          <button class="option-btn" onclick="answerQ(this,false,'q6',0)"><span class="option-letter">B</span> 80</button>
          <button class="option-btn" onclick="answerQ(this,true,'q6',0)"><span class="option-letter">C</span> 443</button>
          <button class="option-btn" onclick="answerQ(this,false,'q6',0)"><span class="option-letter">D</span> 22</button>
        </div>
        <div class="quiz-feedback" id="q6_0">HTTPS ใช้ Port 443 มีการเข้ารหัส SSL/TLS</div>
      </div>
      <div class="question">
        <div class="quiz-points">+25 XP</div>
        <div class="q-text">2. DNS มีหน้าที่ใด?</div>
        <div class="options">
          <button class="option-btn" onclick="answerQ(this,false,'q6',1)"><span class="option-letter">A</span> เข้ารหัสข้อมูล</button>
          <button class="option-btn" onclick="answerQ(this,false,'q6',1)"><span class="option-letter">B</span> แจก IP อัตโนมัติ</button>
          <button class="option-btn" onclick="answerQ(this,true,'q6',1)"><span class="option-letter">C</span> แปลงชื่อโดเมนเป็น IP</button>
          <button class="option-btn" onclick="answerQ(this,false,'q6',1)"><span class="option-letter">D</span> ส่งอีเมล</button>
        </div>
        <div class="quiz-feedback" id="q6_1">DNS (Domain Name System) แปลง www.google.com → IP Address</div>
      </div>
    </div>

    <div class="tf-game">
      <div class="tf-title">✅❌ ถูกหรือผิด — อินเทอร์เน็ต</div>
      <div class="tf-item">
        <div class="tf-statement">IPv6 ใช้ 64-bit ทำให้รองรับ Address ได้มากกว่า IPv4</div>
        <div class="tf-btns">
          <button class="tf-btn true-btn" onclick="answerTF(this,false,'tf6_0','IPv6 ใช้ 128-bit ไม่ใช่ 64-bit จึงรองรับ Address ได้มากมายมหาศาล')">✅ ถูก</button>
          <button class="tf-btn false-btn" onclick="answerTF(this,true,'tf6_0','IPv6 ใช้ 128-bit ไม่ใช่ 64-bit จึงรองรับ Address ได้มากมายมหาศาล')">❌ ผิด</button>
        </div>
        <div class="tf-feedback" id="tf6_0"></div>
      </div>
      <div class="tf-item">
        <div class="tf-statement">WWW กับอินเทอร์เน็ตคือสิ่งเดียวกัน</div>
        <div class="tf-btns">
          <button class="tf-btn true-btn" onclick="answerTF(this,false,'tf6_1','อินเทอร์เน็ตคือโครงสร้างพื้นฐาน ส่วน WWW เป็นแค่หนึ่งในบริการบนอินเทอร์เน็ต')">✅ ถูก</button>
          <button class="tf-btn false-btn" onclick="answerTF(this,true,'tf6_1','อินเทอร์เน็ตคือโครงสร้างพื้นฐาน ส่วน WWW เป็นแค่หนึ่งในบริการบนอินเทอร์เน็ต')">❌ ผิด</button>
        </div>
        <div class="tf-feedback" id="tf6_1"></div>
      </div>
    </div>

    <div class="page-nav">
      <button class="nav-arrow" onclick="goPage(4)">← ก่อนหน้า</button>
      <div class="page-indicator">📄 หน้า 6 / 6</div>
      <button class="nav-arrow" onclick="goPage(6)" style="background:var(--green);color:white;border-color:var(--green);">💼 อาชีพ →</button>
    </div>
  </div>
</div>

<!-- ===== PAGE 7: CAREER ===== -->
<div class="page" id="page6">
  <div class="spiral-holes" id="holes6"></div>
  <div class="page-content">
    <div class="chapter-header">
      <div class="chapter-num">💼 Career Guide</div>
      <h2 class="chapter-title"><span>อาชีพด้านระบบเครือข่าย</span></h2>
      <div class="chapter-desc">Network Career Paths — เส้นทางอาชีพในสายงานระบบเครือข่ายคอมพิวเตอร์</div>
    </div>
    <p class="page-text">ระบบเครือข่ายคอมพิวเตอร์เป็นรากฐานของเทคโนโลยีสมัยใหม่ ทำให้มีความต้องการบุคลากรสูงมากทั้งในไทยและต่างประเทศ <span class="highlight-yellow">คลิกที่บัตรอาชีพ</span>เพื่อดูรายละเอียด!</p>

    <div class="career-grid">
      <div class="career-card" onclick="toggleCareer(this)">
        <div class="career-icon">🖧</div>
        <div class="career-title">Network Engineer</div>
        <div class="career-salary">💰 35,000–120,000 บาท/เดือน</div>
        <div class="career-desc">วิศวกรเครือข่าย ออกแบบ ติดตั้ง และดูแลระบบเครือข่ายขององค์กร ตั้งแต่ LAN ภายในออฟฟิศไปจนถึง WAN ระหว่างสาขาทั่วประเทศ ต้องมีความรู้ด้าน Cisco, Routing Protocols, VLAN, Firewall</div>
        <div class="career-skills">
          <span class="career-tag">Cisco CCNA/CCNP</span>
          <span class="career-tag">Routing &#038; Switching</span>
          <span class="career-tag">VLAN/VPN</span>
          <span class="career-tag">Firewall</span>
          <span class="career-tag">BGP/OSPF</span>
        </div>
        <div class="career-expand-hint">👆 คลิกเพื่อขยาย</div>
      </div>
      <div class="career-card" onclick="toggleCareer(this)">
        <div class="career-icon">🔐</div>
        <div class="career-title">Network Security Engineer</div>
        <div class="career-salary">💰 50,000–150,000 บาท/เดือน</div>
        <div class="career-desc">วิศวกรความปลอดภัยเครือข่าย ป้องกันการโจมตีทางไซเบอร์ ออกแบบระบบ Firewall, IDS/IPS, ตรวจสอบภัยคุกคาม วิเคราะห์ Log และรับมือกับ Incident ต้องมี Mindset แบบ Hacker เพื่อคิดแบบผู้โจมตี</div>
        <div class="career-skills">
          <span class="career-tag">CISSP / CEH</span>
          <span class="career-tag">Penetration Testing</span>
          <span class="career-tag">SIEM</span>
          <span class="career-tag">Firewall/IPS</span>
          <span class="career-tag">Threat Analysis</span>
        </div>
        <div class="career-expand-hint">👆 คลิกเพื่อขยาย</div>
      </div>
      <div class="career-card" onclick="toggleCareer(this)">
        <div class="career-icon">☁️</div>
        <div class="career-title">Cloud Network Architect</div>
        <div class="career-salary">💰 80,000–200,000 บาท/เดือน</div>
        <div class="career-desc">สถาปนิกเครือข่ายบนคลาวด์ ออกแบบโครงสร้างเครือข่ายบน AWS, Azure, GCP ทำงานกับ Virtual Network, Load Balancer, CDN ความต้องการสูงมากเนื่องจากองค์กรย้ายสู่ Cloud</div>
        <div class="career-skills">
          <span class="career-tag">AWS/Azure/GCP</span>
          <span class="career-tag">Kubernetes</span>
          <span class="career-tag">Terraform</span>
          <span class="career-tag">SD-WAN</span>
          <span class="career-tag">DevNetOps</span>
        </div>
        <div class="career-expand-hint">👆 คลิกเพื่อขยาย</div>
      </div>
      <div class="career-card" onclick="toggleCareer(this)">
        <div class="career-icon">📡</div>
        <div class="career-title">Wireless Network Specialist</div>
        <div class="career-salary">💰 35,000–100,000 บาท/เดือน</div>
        <div class="career-desc">ผู้เชี่ยวชาญเครือข่ายไร้สาย ออกแบบและติดตั้งระบบ Wi-Fi ในอาคารขนาดใหญ่ โรงแรม สนามบิน ดูแล 4G/5G Private Network และ IoT Connectivity</div>
        <div class="career-skills">
          <span class="career-tag">Wi-Fi 6/6E</span>
          <span class="career-tag">RF Planning</span>
          <span class="career-tag">5G/LTE</span>
          <span class="career-tag">IoT</span>
          <span class="career-tag">CWNA</span>
        </div>
        <div class="career-expand-hint">👆 คลิกเพื่อขยาย</div>
      </div>
      <div class="career-card" onclick="toggleCareer(this)">
        <div class="career-icon">🖥️</div>
        <div class="career-title">NOC Engineer</div>
        <div class="career-salary">💰 25,000–70,000 บาท/เดือน</div>
        <div class="career-desc">Network Operations Center Engineer ดูแลและ Monitor ระบบเครือข่ายตลอด 24 ชั่วโมง แก้ปัญหาเครือข่ายล่มในระยะเวลาอันสั้น เหมาะสำหรับผู้เริ่มต้นในสายงาน</div>
        <div class="career-skills">
          <span class="career-tag">Network Monitoring</span>
          <span class="career-tag">Troubleshooting</span>
          <span class="career-tag">ITIL</span>
          <span class="career-tag">Nagios/Zabbix</span>
        </div>
        <div class="career-expand-hint">👆 คลิกเพื่อขยาย</div>
      </div>
      <div class="career-card" onclick="toggleCareer(this)">
        <div class="career-icon">🤖</div>
        <div class="career-title">Network Automation Engineer</div>
        <div class="career-salary">💰 60,000–160,000 บาท/เดือน</div>
        <div class="career-desc">วิศวกรระบบเครือข่ายอัตโนมัติ เขียนโค้ดเพื่อ Automate การจัดการเครือข่าย ใช้ Python, Ansible, Terraform สร้าง Infrastructure as Code ทักษะที่ขาดแคลนมากในปัจจุบัน</div>
        <div class="career-skills">
          <span class="career-tag">Python</span>
          <span class="career-tag">Ansible</span>
          <span class="career-tag">Terraform</span>
          <span class="career-tag">REST API</span>
          <span class="career-tag">Git/CI-CD</span>
        </div>
        <div class="career-expand-hint">👆 คลิกเพื่อขยาย</div>
      </div>
    </div>

    <div class="roadmap-section">
      <h3 class="section-title">🗺️ เส้นทางเรียนสู่อาชีพ</h3>
      <div class="roadmap-step">
        <div class="roadmap-num">1</div>
        <div class="roadmap-content">
          <div class="roadmap-title">📚 พื้นฐาน (6–12 เดือน)</div>
          CompTIA A+, Network+, CCNA — เรียนรู้ TCP/IP, Routing, Switching, Wi-Fi พื้นฐาน
        </div>
      </div>
      <div class="roadmap-step">
        <div class="roadmap-num">2</div>
        <div class="roadmap-content">
          <div class="roadmap-title">🎯 เลือกทางเฉพาะทาง (1–2 ปี)</div>
          Security → CCNP Security, CEH | Cloud → AWS/Azure Cert | Wireless → CWNA
        </div>
      </div>
      <div class="roadmap-step">
        <div class="roadmap-num">3</div>
        <div class="roadmap-content">
          <div class="roadmap-title">💼 ประสบการณ์จริง (2–5 ปี)</div>
          ทำงาน NOC → Network Engineer → Senior/Lead → Architect
        </div>
      </div>
      <div class="roadmap-step">
        <div class="roadmap-num">4</div>
        <div class="roadmap-content">
          <div class="roadmap-title">🏆 ระดับสูง (5+ ปี)</div>
          CCIE, CISSP, Cloud Solutions Architect — รายได้ 100,000+ บาท/เดือน
        </div>
      </div>
    </div>

    <div class="callout success">🌏 <strong>ตลาดงานในไทย:</strong> ปี 2024-2025 ความต้องการบุคลากร Network Security และ Cloud Network Engineer เติบโตกว่า 40% YoY ตามการเติบโตของ Digital Economy และ 5G</div>

    <div class="page-nav">
      <button class="nav-arrow" onclick="goPage(5)">← บทที่ 6</button>
      <div class="page-indicator">💼 Career Guide</div>
      <button class="nav-arrow" onclick="goPage(7)" style="background:var(--orange);color:white;border-color:var(--orange);">📝 ทำข้อสอบ →</button>
    </div>
  </div>
</div>

<!-- ===== PAGE 8: EXAM ===== -->
<div class="page" id="page7">
  <div class="spiral-holes" id="holes7"></div>
  <div class="page-content">
    <div id="examStart">
      <div class="exam-container">
        <div class="exam-header">
          <div class="exam-title">📝 แบบทดสอบท้ายบท</div>
          <div class="exam-desc">ความรู้พื้นฐานระบบเครือข่ายคอมพิวเตอร์</div>
          <div class="exam-meta">
            <div class="exam-meta-item">📋 20 ข้อ</div>
            <div class="exam-meta-item">⏱️ 20 นาที</div>
            <div class="exam-meta-item">🎯 ผ่านเมื่อได้ 70%</div>
          </div>
        </div>
        <div class="sticky-note" style="transform:none;">
          📌 ข้อสอบจะ<strong>สลับลำดับข้อและตัวเลือก</strong>ทุกครั้งที่เปิด ผ่าน 14/20 ข้อ (70%) รับ<strong>เกียรติบัตร</strong>!
        </div>
        <button class="exam-submit-btn" onclick="startExam()">🚀 เริ่มทำข้อสอบ</button>
      </div>
    </div>
    <div id="examBody" style="display:none;"></div>
    <div id="examResult" style="display:none;"></div>
  </div>
</div>

</div><!-- end main -->

<script>
// ===== AUDIO =====
const AudioCtx = window.AudioContext || window.webkitAudioContext;
let audioCtx;
function getAudio(){if(!audioCtx)audioCtx=new AudioCtx();return audioCtx;}
function playBeep(freq,dur,type='sine',vol=0.3){
  try{const ctx=getAudio();const o=ctx.createOscillator();const g=ctx.createGain();
  o.connect(g);g.connect(ctx.destination);o.type=type;o.frequency.value=freq;
  g.gain.setValueAtTime(vol,ctx.currentTime);g.gain.exponentialRampToValueAtTime(0.001,ctx.currentTime+dur);
  o.start(ctx.currentTime);o.stop(ctx.currentTime+dur);}catch(e){}}
function playCorrect(){playBeep(520,0.1,'sine');setTimeout(()=>playBeep(660,0.1,'sine'),100);setTimeout(()=>playBeep(800,0.2,'sine'),200);}
function playWrong(){playBeep(220,0.15,'sawtooth',0.2);setTimeout(()=>playBeep(180,0.2,'sawtooth',0.15),150);}
function playClick(){playBeep(440,0.05,'square',0.1);}
function playLevelUp(){[500,600,700,800,900].forEach((f,i)=>setTimeout(()=>playBeep(f,0.12,'sine',0.25),i*80));}
function playComplete(){[400,500,600,700,600,700,800].forEach((f,i)=>setTimeout(()=>playBeep(f,0.1,'sine',0.2),i*70));}

// ===== STATE =====
let score=0,xp=0,level=1,currentPage=0;
let completedPages=new Set();
let quizAnswered={};
let matchSelected={};
let matchScores={};
let tfAnswered={};

// ===== LEADERBOARD DATA =====
function getLdb(){try{return JSON.parse(localStorage.getItem('net_ldb')||'[]');}catch(e){return[];}}
function saveLdb(d){try{localStorage.setItem('net_ldb',JSON.stringify(d));}catch(e){}}
function getMyName(){try{return localStorage.getItem('net_myname')||'';}catch(e){return '';}}
function saveMyName(n){try{localStorage.setItem('net_myname',n);}catch(e){}}
function getExamLdb(){try{return JSON.parse(localStorage.getItem('net_exam_ldb')||'[]');}catch(e){return[];}}
function saveExamLdb(d){try{localStorage.setItem('net_exam_ldb',JSON.stringify(d));}catch(e){}}

// ===== INIT =====
function init(){
  for(let i=0;i<8;i++){
    const c=document.getElementById('holes'+i);
    if(c){for(let j=0;j<16;j++){const h=document.createElement('div');h.className='hole';c.appendChild(h);}}
  }
  const n=getMyName();
  if(n){
    const inp=document.getElementById('ldbNameInput');
    if(inp)inp.value=n;
  }
}

// ===== NAV =====
function goPage(idx){
  playClick();
  document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
  document.querySelectorAll('.nav-btn').forEach(b=>b.classList.remove('active'));
  document.getElementById('page'+idx).classList.add('active');
  document.getElementById('navBtn'+idx).classList.add('active');
  currentPage=idx;
  window.scrollTo({top:0,behavior:'smooth'});
}

// ===== SOUND RIPPLE =====
function showRipple(x,y,color){
  const r=document.createElement('div');
  r.className='sound-ripple';
  r.style.left=(x-20)+'px';r.style.top=(y-20)+'px';
  r.style.borderColor=color;
  document.body.appendChild(r);
  setTimeout(()=>r.remove(),550);
}

// ===== QUIZ =====
function answerQ(btn,isCorrect,quizId,qIdx){
  const key=quizId+'_'+qIdx;
  if(quizAnswered[key])return;
  quizAnswered[key]=true;
  const rect=btn.getBoundingClientRect();
  const options=btn.closest('.options').querySelectorAll('.option-btn');
  options.forEach(o=>o.classList.add('disabled'));
  if(isCorrect){
    btn.classList.add('correct');
    playCorrect();
    showRipple(rect.left+rect.width/2,rect.top+rect.height/2,'#1e8449');
  } else {
    btn.classList.add('wrong');
    playWrong();
    showRipple(rect.left+rect.width/2,rect.top+rect.height/2,'#c0392b');
    options.forEach(o=>{if(o.onclick&&o.onclick.toString().includes('true'))o.classList.add('correct');});
  }
  const fb=document.getElementById(quizId+'_'+qIdx);
  if(fb){
    fb.classList.add('show');
    if(isCorrect){fb.classList.add('correct');fb.innerHTML='✅ '+fb.textContent;}
    else{fb.classList.add('wrong');fb.innerHTML='❌ ไม่ถูกต้อง — '+fb.textContent;}
  }
  const pts=isCorrect?(parseInt(btn.closest('.question').querySelector('.quiz-points').textContent)||20):5;
  addScore(pts,isCorrect);
}

// ===== TRUE/FALSE =====
function answerTF(btn,isCorrect,id,explanation){
  if(tfAnswered[id])return;
  tfAnswered[id]=true;
  const rect=btn.getBoundingClientRect();
  const allBtns=btn.closest('.tf-btns').querySelectorAll('.tf-btn');
  allBtns.forEach(b=>b.classList.add('disabled'));
  if(isCorrect){
    btn.classList.add('selected-correct');
    playCorrect();
    showRipple(rect.left+rect.width/2,rect.top+rect.height/2,'#1e8449');
    addScore(15,true);
  } else {
    btn.classList.add('selected-wrong');
    playWrong();
    showRipple(rect.left+rect.width/2,rect.top+rect.height/2,'#c0392b');
    addScore(5,false);
  }
  const fb=document.getElementById(id);
  if(fb){
    fb.classList.add('show');
    if(isCorrect){fb.classList.add('correct');fb.innerHTML='✅ '+explanation;}
    else{fb.classList.add('wrong');fb.innerHTML='❌ '+explanation;}
  }
}

// ===== MATCH =====
function matchSelect(item,side){
  if(item.classList.contains('matched'))return;
  playClick();
  const prefix=side.replace(/left|right/,'');
  const leftId='matchLeft'+prefix.replace('left','').replace('right','');
  const rightId='matchRight'+prefix.replace('left','').replace('right','');
  // Figure out side
  const isLeft=side.startsWith('left');
  const leftCol=item.closest('[id^="matchLeft"]');
  const rightCol=item.closest('[id^="matchRight"]');
  if(isLeft){
    leftCol.querySelectorAll('.match-item:not(.matched)').forEach(i=>i.classList.remove('selected'));
  } else {
    rightCol.querySelectorAll('.match-item:not(.matched)').forEach(i=>i.classList.remove('selected'));
  }
  item.classList.add('selected');
  if(!matchSelected[prefix])matchSelected[prefix]={left:null,right:null};
  if(isLeft)matchSelected[prefix].left=item;
  else matchSelected[prefix].right=item;
  const sel=matchSelected[prefix];
  if(sel.left&&sel.right){
    if(sel.left.dataset.match===sel.right.dataset.match){
      sel.left.classList.add('matched');sel.right.classList.add('matched');
      sel.left.classList.remove('selected');sel.right.classList.remove('selected');
      if(!matchScores[prefix])matchScores[prefix]=0;
      matchScores[prefix]++;
      playCorrect();
      addScore(25,true);
      const ms=document.getElementById('matchScore'+prefix);
      if(ms)ms.textContent='✅ จับคู่ถูก '+matchScores[prefix]+'/4';
      if(matchScores[prefix]===4){showAchievement('🌟 จับคู่ครบหมดแล้ว! ยอดเยี่ยม!');}
    } else {
      playWrong();
      const l=sel.left,r=sel.right;
      l.classList.add('wrong-match');r.classList.add('wrong-match');
      setTimeout(()=>{l.classList.remove('wrong-match','selected');r.classList.remove('wrong-match','selected');},500);
    }
    matchSelected[prefix]={left:null,right:null};
  }
}

// ===== TOPO =====
function selectTopo(card){
  playClick();
  document.querySelectorAll('.topo-card').forEach(c=>c.classList.remove('selected'));
  card.classList.add('selected');
  addScore(5,true);
}

// ===== CAREER =====
function toggleCareer(card){
  playClick();
  card.classList.toggle('expanded');
}

// ===== SCORE =====
function addScore(pts,correct){
  score+=pts;
  xp+=pts;
  document.getElementById('scoreNum').textContent=score;
  const xpMax=level*200;
  const xpPct=Math.min((xp/xpMax)*100,100);
  document.getElementById('xpFill').style.width=xpPct+'%';
  if(correct)showXPPopup('+'+pts+' XP! 🎉');
  if(xp>=xpMax){
    level++;xp=0;
    document.getElementById('xpFill').style.width='0%';
    const icons=['🎓','📚','💡','🔬','🏆','👑','🌟'];
    document.getElementById('levelBadge').textContent=(icons[level-1]||'🌟')+' Lv.'+level;
    playLevelUp();
    showAchievement('🎉 Level Up! ขึ้นเป็น Level '+level+'!');
  }
  markPageDone(currentPage);
}

function markPageDone(i){
  completedPages.add(i);
  const b=document.getElementById('navBtn'+i);
  if(b&&!b.classList.contains('completed'))b.classList.add('completed');
}

function showXPPopup(text){
  const p=document.createElement('div');p.className='xp-popup';p.textContent=text;
  document.body.appendChild(p);setTimeout(()=>p.remove(),1600);
}

function showAchievement(text){
  const el=document.getElementById('achievementPopup');
  el.textContent=text;el.style.display='block';
  setTimeout(()=>{el.style.display='none';},3500);
}

// ===== EXAM =====
const EXAM_QUESTIONS=[
  {q:'ประเภทเครือข่ายใดมีพื้นที่ครอบคลุมกว้างที่สุด?',opts:['PAN','LAN','MAN','WAN'],ans:3,exp:'WAN ครอบคลุมระดับประเทศถึงทั่วโลก'},
  {q:'IEEE 802.3 เป็นมาตรฐานของเครือข่ายประเภทใด?',opts:['Wi-Fi','Ethernet','Bluetooth','WiMAX'],ans:1,exp:'IEEE 802.3 คือมาตรฐาน Ethernet (มีสาย)'},
  {q:'โทโปโลยีแบบใดนิยมใช้มากที่สุดในปัจจุบัน?',opts:['Bus','Ring','Star','Mesh'],ans:2,exp:'Star ใช้ Switch/Hub ตรงกลาง ดูแลง่าย นิยมมากสุด'},
  {q:'CSMA/CD ย่อมาจากอะไร?',opts:['Carrier Signal Medium Access/Collision Detection','Carrier Sense Multiple Access/Collision Detection','Common Signal Multiple Access/Collision Detection','Channel Sense Multiple Access/Collision Detection'],ans:1,exp:'CSMA/CD = Carrier Sense Multiple Access with Collision Detection'},
  {q:'HTTP ทำงานบน Port ใด?',opts:['21','25','80','443'],ans:2,exp:'HTTP ใช้ Port 80, HTTPS ใช้ Port 443'},
  {q:'Wi-Fi 6 ใช้มาตรฐาน IEEE ใด?',opts:['802.11b','802.11n','802.11ac','802.11ax'],ans:3,exp:'Wi-Fi 6 ใช้ 802.11ax'},
  {q:'Bluetooth เป็นเทคโนโลยีที่ใช้ใน Network ประเภทใด?',opts:['LAN','WAN','PAN','MAN'],ans:2,exp:'Bluetooth ใช้ใน PAN (Personal Area Network)'},
  {q:'Router ทำงานที่ OSI Layer ใด?',opts:['Layer 1','Layer 2','Layer 3','Layer 4'],ans:2,exp:'Router ทำงาน Layer 3 (Network Layer) ใช้ IP Address'},
  {q:'DNS Server มีหน้าที่ใด?',opts:['แจก IP อัตโนมัติ','แปลงโดเมนเป็น IP','ส่งอีเมล','เข้ารหัสข้อมูล'],ans:1,exp:'DNS แปลง www.google.com → IP Address'},
  {q:'WPA3 แตกต่างจาก WPA2 อย่างไร?',opts:['เร็วกว่า','ปลอดภัยกว่าด้วย SAE','ใช้ความถี่สูงกว่า','รองรับอุปกรณ์มากกว่า'],ans:1,exp:'WPA3 ใช้ SAE (Simultaneous Authentication of Equals) ปลอดภัยกว่า'},
  {q:'สาย UTP Cat ใดรองรับ 10 Gbps?',opts:['Cat 3','Cat 5','Cat 5e','Cat 6A'],ans:3,exp:'Cat 6A รองรับ 10 Gbps ในระยะ 100 เมตร'},
  {q:'IPv6 ใช้กี่ bit?',opts:['32','64','128','256'],ans:2,exp:'IPv6 ใช้ 128-bit'},
  {q:'DHCP ย่อมาจากอะไร?',opts:['Dynamic Host Configuration Protocol','Domain Host Control Protocol','Dynamic Host Control Protocol','Domain Host Configuration Protocol'],ans:0,exp:'DHCP = Dynamic Host Configuration Protocol'},
  {q:'โทโปโลยีแบบใดที่สายแกนกลางขาดแล้วทั้งระบบหยุดทำงาน?',opts:['Star','Ring','Mesh','Bus'],ans:3,exp:'Bus Topology มีสายแกนกลาง 1 เส้น ถ้าขาดทั้งระบบหยุด'},
  {q:'MAN ครอบคลุมระยะทางประมาณเท่าไหร่?',opts:['< 1 กม.','1-10 กม.','10-50 กม.','> 1000 กม.'],ans:2,exp:'MAN ครอบคลุม 10-50 กิโลเมตร ระดับเมือง'},
  {q:'IEEE 802.11ac ตรงกับ Wi-Fi Generation ใด?',opts:['Wi-Fi 4','Wi-Fi 5','Wi-Fi 6','Wi-Fi 7'],ans:1,exp:'802.11ac = Wi-Fi 5 ทำงานย่าน 5 GHz'},
  {q:'โปรโตคอล FTP ใช้ Port ใด?',opts:['21','22','25','53'],ans:0,exp:'FTP ใช้ Port 21 สำหรับโอนไฟล์'},
  {q:'Switch แตกต่างจาก Hub อย่างไร?',opts:['Switch ส่งทุกพอร์ต Hub ส่งเฉพาะพอร์ต','Switch ส่งเฉพาะพอร์ตปลายทาง Hub ส่งทุกพอร์ต','Switch ช้ากว่า Hub','Switch และ Hub ทำงานเหมือนกัน'],ans:1,exp:'Switch ส่งตาม MAC Address ไปพอร์ตที่ถูกต้อง ไม่กระจายทั้งหมดแบบ Hub'},
  {q:'WWW คืออะไรในบริบทของอินเทอร์เน็ต?',opts:['เป็นสิ่งเดียวกับอินเทอร์เน็ต','บริการหนึ่งบนอินเทอร์เน็ตที่เข้าถึงผ่านเบราว์เซอร์','โปรโตคอลหลักของอินเทอร์เน็ต','ชนิดของสายเคเบิล'],ans:1,exp:'WWW เป็นบริการบนอินเทอร์เน็ต อินเทอร์เน็ตคือโครงสร้างพื้นฐาน'},
  {q:'ย่านความถี่ใดของ Wi-Fi มีระยะครอบคลุมไกลกว่า?',opts:['5 GHz','6 GHz','2.4 GHz','ทุกย่านเท่ากัน'],ans:2,exp:'2.4 GHz มีระยะไกลกว่าและทะลุกำแพงได้ดีกว่า'},
];

let examQuestions=[];
let examAnswers={};
let examSubmitted=false;
let examTimer=null;
let examTimeLeft=1200;

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

function startExam(){
  playClick();
  document.getElementById('examStart').style.display='none';
  examAnswers={};examSubmitted=false;examTimeLeft=1200;
  examQuestions=shuffleArr(EXAM_QUESTIONS).map(q=>{
    const letters=['A','B','C','D'];
    const idxArr=[0,1,2,3];
    const shuffled=shuffleArr(idxArr);
    const newOpts=shuffled.map(i=>q.opts[i]);
    const newAns=shuffled.indexOf(q.ans);
    return{...q,opts:newOpts,ans:newAns,exp:q.exp};
  });
  renderExam();
  startTimer();
}

function renderExam(){
  const body=document.getElementById('examBody');
  body.style.display='block';
  let html='<div class="exam-container"><div class="exam-header"><div class="exam-title">📝 แบบทดสอบท้ายบท</div>';
  html+='<div style="display:flex;align-items:center;gap:10px;justify-content:center;margin-top:10px;">';
  html+='<div class="exam-timer" id="examTimerDisplay">⏱️ 20:00</div></div>';
  html+='<div class="exam-progress-bar"><div class="exam-progress-fill" id="examPBar" style="width:0%"></div></div></div>';
  examQuestions.forEach((q,i)=>{
    const letters=['A','B','C','D'];
    html+=`<div class="exam-q" id="examQ${i}">
      <div class="exam-q-num">ข้อที่ ${i+1} / 20</div>
      <div class="exam-q-text">${q.q}</div>
      <div class="exam-opts">`;
    q.opts.forEach((opt,j)=>{
      html+=`<button class="exam-opt" id="eopt_${i}_${j}" onclick="selectExamOpt(${i},${j})">
        <span class="exam-opt-letter">${letters[j]}</span>${opt}</button>`;
    });
    html+=`</div></div>`;
  });
  html+=`<button class="exam-submit-btn" onclick="submitExam()">📤 ส่งข้อสอบ</button></div>`;
  body.innerHTML=html;
}

function startTimer(){
  clearInterval(examTimer);
  examTimer=setInterval(()=>{
    examTimeLeft--;
    const m=Math.floor(examTimeLeft/60);
    const s=examTimeLeft%60;
    const el=document.getElementById('examTimerDisplay');
    if(el){
      el.textContent=`⏱️ ${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
      if(examTimeLeft<=60)el.style.color='var(--red)';
    }
    if(examTimeLeft<=0){clearInterval(examTimer);submitExam();}
  },1000);
}

function selectExamOpt(qi,oi){
  if(examSubmitted)return;
  playClick();
  document.querySelectorAll(`[id^="eopt_${qi}_"]`).forEach(b=>b.classList.remove('selected'));
  document.getElementById(`eopt_${qi}_${oi}`).classList.add('selected');
  examAnswers[qi]=oi;
  // update progress
  const answered=Object.keys(examAnswers).length;
  const pb=document.getElementById('examPBar');
  if(pb)pb.style.width=(answered/20*100)+'%';
}

function submitExam(){
  if(examSubmitted)return;
  clearInterval(examTimer);
  examSubmitted=true;
  playComplete();
  let correct=0;
  const results=examQuestions.map((q,i)=>{
    const userAns=examAnswers[i];
    const isCorrect=(userAns===q.ans);
    if(isCorrect)correct++;
    // Color options
    const opts=document.querySelectorAll(`[id^="eopt_${i}_"]`);
    opts.forEach(b=>b.classList.add('disabled'));
    const correctBtn=document.getElementById(`eopt_${i}_${q.ans}`);
    if(correctBtn)correctBtn.classList.add('correct');
    if(userAns!==undefined&&userAns!==q.ans){
      const wrongBtn=document.getElementById(`eopt_${i}_${userAns}`);
      if(wrongBtn)wrongBtn.classList.add('wrong');
    }
    return{q:q.q,correctOpt:q.opts[q.ans],userOpt:userAns!==undefined?q.opts[userAns]:'-',isCorrect,exp:q.exp};
  });
  const pct=Math.round(correct/20*100);
  const passed=pct>=70;
  const pts=correct*5;
  addScore(pts,true);
  // Save to exam leaderboard
  const myName=getMyName()||'ไม่ระบุ';
  const examRec={name:myName,correct,pct,date:new Date().toLocaleDateString('th-TH')};
  const exLdb=getExamLdb();
  exLdb.push(examRec);
  exLdb.sort((a,b)=>b.pct-a.pct);
  saveExamLdb(exLdb.slice(0,50));
  renderResult(correct,pct,passed,pts,results);
}

function renderResult(correct,pct,passed,pts,results){
  document.getElementById('examBody').style.display='none';
  const rd=document.getElementById('examResult');
  rd.style.display='block';
  let html=`<div class="result-container">
    <div style="font-size:3rem;margin-bottom:8px;">${passed?'🏆':'📚'}</div>
    <div class="result-score-big">${correct}/20</div>
    <div class="result-percent ${passed?'result-pass':'result-fail'}">${pct}% — ${passed?'🎉 ผ่าน!':'❌ ยังไม่ผ่าน'}</div>
    <div class="result-breakdown">
      <div class="result-item pass-item">✅ ถูก: ${correct} ข้อ</div>
      <div class="result-item fail-item">❌ ผิด: ${20-correct} ข้อ</div>
      <div class="result-item">+${pts} XP รับ</div>
    </div>`;
  if(passed){
    html+=`<div class="sticky-note" style="transform:none;text-align:center;">🎓 ยินดีด้วย! คุณผ่านการทดสอบ รับเกียรติบัตรได้เลย!</div>
    <button class="retry-btn" style="background:var(--yellow);border-color:var(--orange);" onclick="showCert(${pct})">🏆 รับเกียรติบัตร</button>`;
  }
  html+=`<button class="retry-btn" onclick="retryExam()">🔄 ทำใหม่</button>
  <button class="retry-btn" onclick="openLeaderboard()">🏅 Leaderboard</button>`;
  html+=`<div class="review-section"><div style="font-family:Caveat;font-size:1.3rem;font-weight:700;margin-bottom:12px;">📋 เฉลยข้อสอบ</div>`;
  results.forEach((r,i)=>{
    html+=`<div class="review-q ${r.isCorrect?'rq-correct':'rq-wrong'}">
      <div class="review-q-text">${i+1}. ${r.q}</div>
      <div class="review-q-ans">
        ${r.isCorrect?'✅':'❌'} คำตอบของคุณ: ${r.userOpt}<br>
        ${r.isCorrect?'':'✅ คำตอบที่ถูก: '+r.correctOpt+'<br>'}
        💡 ${r.exp}
      </div>
    </div>`;
  });
  html+=`</div></div>`;
  rd.innerHTML=html;
}

function retryExam(){
  document.getElementById('examResult').style.display='none';
  document.getElementById('examStart').style.display='block';
  examSubmitted=false;clearInterval(examTimer);
}

// ===== CERTIFICATE =====
function showCert(pct){
  playComplete();
  const now=new Date();
  const dateStr=now.toLocaleDateString('th-TH',{year:'numeric',month:'long',day:'numeric'});
  document.getElementById('certDate').textContent='ลงชื่อ..............';
  document.getElementById('certDate2').textContent=dateStr;
  document.getElementById('certScore').textContent=`คะแนน ${pct}% (ผ่านเกณฑ์ 70%)`;
  const storedName=getMyName();
  const nameDisplay=document.getElementById('certNameDisplay');
  const nameInput=document.getElementById('certNameInput');
  if(storedName){
    nameDisplay.textContent=storedName;
    nameDisplay.style.display='block';
    nameInput.style.display='none';
  } else {
    nameDisplay.textContent='';
    nameDisplay.style.display='none';
    nameInput.style.display='block';
    nameInput.focus();
  }
  document.getElementById('certOverlay').classList.add('show');
}

function updateCertName(val){
  const nd=document.getElementById('certNameDisplay');
  nd.textContent=val||'';
  nd.style.display='block';
  if(val)saveMyName(val);
}

function closeCert(){document.getElementById('certOverlay').classList.remove('show');}
function printCert(){
  const n=document.getElementById('certNameInput').value||document.getElementById('certNameDisplay').textContent;
  if(n)saveMyName(n);
  window.print();
}

// ===== LEADERBOARD =====
function openLeaderboard(){
  playClick();
  const ldb=getLdb();
  const myName=getMyName();
  if(myName){const inp=document.getElementById('ldbNameInput');if(inp)inp.value=myName;}
  renderLdbAll();
  renderLdbExam();
  document.getElementById('ldbOverlay').classList.add('show');
}

function closeLeaderboard(){playClick();document.getElementById('ldbOverlay').classList.remove('show');}

function submitScore(){
  const inp=document.getElementById('ldbNameInput');
  const name=inp.value.trim();
  if(!name){inp.style.borderColor='var(--red)';return;}
  saveMyName(name);
  const ldb=getLdb();
  const existing=ldb.findIndex(r=>r.name===name);
  const rec={name,score,level,date:new Date().toLocaleDateString('th-TH')};
  if(existing>=0){if(ldb[existing].score<score)ldb[existing]=rec;}
  else ldb.push(rec);
  ldb.sort((a,b)=>b.score-a.score);
  saveLdb(ldb.slice(0,50));
  renderLdbAll();
  showAchievement('✅ บันทึกคะแนนสำเร็จ! ชื่อ: '+name);
  playCorrect();
}

function renderLdbAll(){
  const ldb=getLdb();
  const myName=getMyName();
  const medals=['🥇','🥈','🥉'];
  let html='';
  if(ldb.length===0){html='<tr><td colspan="4" style="text-align:center;font-family:Caveat;padding:20px;">ยังไม่มีข้อมูล</td></tr>';}
  ldb.forEach((r,i)=>{
    const isMe=r.name===myName;
    const cls=i===0?'ldb-rank-1':i===1?'ldb-rank-2':i===2?'ldb-rank-3':'';
    html+=`<tr class="${cls}${isMe?' my-row':''}">
      <td>${medals[i]||i+1}</td>
      <td>${r.name}${isMe?' 👤':''}</td>
      <td>${r.score} pts</td>
      <td>Lv.${r.level}</td>
    </tr>`;
  });
  document.getElementById('ldbAllBody').innerHTML=html;
}

function renderLdbExam(){
  const ldb=getExamLdb();
  const medals=['🥇','🥈','🥉'];
  let html='';
  if(ldb.length===0){html='<tr><td colspan="4" style="text-align:center;font-family:Caveat;padding:20px;">ยังไม่มีผล</td></tr>';}
  ldb.slice(0,20).forEach((r,i)=>{
    const cls=i===0?'ldb-rank-1':i===1?'ldb-rank-2':i===2?'ldb-rank-3':'';
    html+=`<tr class="${cls}"><td>${medals[i]||i+1}</td><td>${r.name}</td><td>${r.pct}% (${r.correct}/20)</td><td>${r.date}</td></tr>`;
  });
  document.getElementById('ldbExamBody').innerHTML=html;
}

function switchLdbTab(tab,btn){
  playClick();
  document.querySelectorAll('.ldb-tab').forEach(t=>t.classList.remove('active'));
  btn.classList.add('active');
  if(tab==='all'){
    document.getElementById('ldbTableAll').style.display='';
    document.getElementById('ldbTableExam').style.display='none';
  } else {
    document.getElementById('ldbTableAll').style.display='none';
    document.getElementById('ldbTableExam').style.display='';
  }
}

// ===== BOOT =====
init();
</script>
</body>
</html>
<p>The post <a href="https://www.kroochut.com/basic-computer-network/">บทเรียนออนไลน์ ระบบเครือข่ายคอมพิวเตอร์เบื้องต้น</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/digital-world/</link>
					<comments>https://www.kroochut.com/digital-world/#respond</comments>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Wed, 14 May 2025 06:21:40 +0000</pubDate>
				<category><![CDATA[Information Technology]]></category>
		<category><![CDATA[digital literacy]]></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=624</guid>

					<description><![CDATA[<p>🌐 โลกดิจิทัลคืออะไร? ทำไมต้องรู้จักมัน ภาพจาก Pexels &#8211; การเชื่อมต่อของมนุษย์ในยุคดิจิทัล เมื่อโลกทั้งใบถูกเชื่อมโยงด้วยเทคโนโลยี โลกดิจิทัล จึงไม่ใช่เพียงคำศัพท์เฉพาะทางอีกต่อไป แต่เป็น “สภาพแวดล้อมใหม่” ที่เราทุกคนอยู่ร่วมกัน ทั้งในห้องเรียน ในที่ทำงาน และแม้กระทั่งในครอบครัว 📱 โลกดิจิทัลคืออะไร? โลกดิจิทัล (Digital World) คือสภาพแวดล้อมที่สร้างขึ้นจากเทคโนโลยี เช่น อินเทอร์เน็ต อุปกรณ์อัจฉริยะ โซเชียลมีเดีย ปัญญาประดิษฐ์ ฯลฯ ซึ่งมีผลต่อวิธีคิด วิธีใช้ชีวิต และวิธีสื่อสารของผู้คน 🖥️ ใช้คอมพิวเตอร์และสมาร์ตโฟนในการเรียนและทำงาน 🛒 สั่งอาหารและซื้อของออนไลน์ 📲 สื่อสารกันแบบเรียลไทม์ผ่านแอปแชต 🧠 ค้นหาความรู้ใหม่ ๆ ได้ในทันที 📉 ตัวอย่างการใช้เทคโนโลยีแบบผิด ๆ ⏰ ใช้เวลากับหน้าจอเกินวันละ 8 ชั่วโมง โดยไม่พักสายตา 📵 เล่นเกมหรือดูวิดีโอระหว่างเรียนหรือทำงาน 💬 โพสต์ข้อความที่ทำร้ายจิตใจผู้อื่นบนโซเชียล 🔐 ไม่ระวังการแชร์ข้อมูลส่วนตัว ทำให้เกิดการถูกหลอกลวง สถิติจากกรมสุขภาพจิต (2566): พบว่า 35% ของวัยรุ่นไทยมีภาวะ “ติดหน้าจอ” และมีความเครียดสะสมจากการใช้อุปกรณ์ดิจิทัลมากเกินไป ✅ ตัวอย่างการใช้เทคโนโลยีเพื่อเรียนรู้และทำงาน 📚 ใช้ YouTube และแอปเรียนรู้เช่น Khan Academy, Coursera เพื่อเสริมความรู้ 📖 อ่านหนังสือผ่าน E-book หรือห้องสมุดออนไลน์ 💻 ใช้แอปอย่าง Notion หรือ Google Docs ในการวางแผนการเรียนและทำงานร่วมกัน 🧑‍🏫 นักเรียนและครูใช้ Google Classroom และ Microsoft Teams สำหรับเรียนออนไลน์ รายงานจาก UNESCO ปี 2023: ระบบการเรียนรู้แบบออนไลน์ช่วยเพิ่มการเข้าถึงการศึกษาให้กับเยาวชนกว่า 500 ล้านคนทั่วโลก 🔎 ทำไมเราต้องเข้าใจโลกดิจิทัล? เพราะโลกดิจิทัลไม่ใช่เพียงเครื่องมือ แต่เป็นส่วนหนึ่งของชีวิต การเข้าใจมันทำให้เรา: 🧠 คิดวิเคราะห์ข้อมูลอย่างมีวิจารณญาณ 🛡️ ใช้เทคโนโลยีอย่างปลอดภัย 💬 สื่อสารอย่างมีมารยาท 👩‍💼 เตรียมพร้อมเข้าสู่การทำงานในโลกยุคใหม่ ❓ คำถามท้าทายผู้อ่าน คุณเคยลองเช็กไหมว่า&#8230; เวลาทั้งวันของคุณ หมดไปกับ “การใช้เทคโนโลยีเพื่อสร้างสรรค์” หรือแค่ “การเสพเนื้อหาแบบไม่รู้ตัว”? 💡 แนวทางการใช้เทคโนโลยีอย่างฉลาด Digital Literacy: เรียนรู้การใช้เทคโนโลยีและสื่ออย่างเข้าใจ Digital Mindfulness: ใช้อย่างมีสติและกำหนดเวลา Digital Safety: ปกป้องข้อมูลส่วนตัวและระวังภัยไซเบอร์ ภาพจาก Pexels &#8211; เทคโนโลยีควรเป็นสะพาน ไม่ใช่กำแพง ✅ สรุปส่งท้าย โลกดิจิทัลคือโลกใหม่ที่เปิดโอกาสมหาศาล ทั้งในการเรียน การทำงาน และการสื่อสาร แต่โอกาสนั้นจะกลายเป็นความเสี่ยง หากเราใช้อย่างไม่รู้เท่าทัน จงเป็น “เจ้าของเทคโนโลยี” ไม่ใช่ “ทาสของมัน” การรู้จักโลกดิจิทัลให้ดีคือการสร้างอนาคตที่มั่นคง ปลอดภัย และมีความสุข แหล่งอ้างอิง: &#8211; กรมสุขภาพจิต (2566) “พฤติกรรมเสี่ยงจากการใช้เทคโนโลยีในวัยรุ่น” &#8211; UNESCO (2023). “Digital learning report”. Retrieved from https://unesdoc.unesco.org &#8211; ETDA (2023) รายงานพฤติกรรมการใช้อินเทอร์เน็ตของคนไทย. https://www.etda.or.th</p>
<p>The post <a href="https://www.kroochut.com/digital-world/">🌐 โลกดิจิทัลคืออะไร? ทำไมต้องรู้จักมัน</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<article>
  <h1>🌐 โลกดิจิทัลคืออะไร? ทำไมต้องรู้จักมัน</h1>

  <figure>
    <img decoding="async" src="https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg" alt="การใช้เทคโนโลยีในชีวิตประจำวัน" style="width:100%; height:auto; border-radius: 8px;">
    <figcaption style="font-size: 0.9em; color: #666;">ภาพจาก Pexels &#8211; การเชื่อมต่อของมนุษย์ในยุคดิจิทัล</figcaption>
  </figure>

  <p>เมื่อโลกทั้งใบถูกเชื่อมโยงด้วยเทคโนโลยี <strong>โลกดิจิทัล</strong> จึงไม่ใช่เพียงคำศัพท์เฉพาะทางอีกต่อไป แต่เป็น “สภาพแวดล้อมใหม่” ที่เราทุกคนอยู่ร่วมกัน ทั้งในห้องเรียน ในที่ทำงาน และแม้กระทั่งในครอบครัว</p>

  <h2>📱 โลกดิจิทัลคืออะไร?</h2>
  <p><strong>โลกดิจิทัล (Digital World)</strong> คือสภาพแวดล้อมที่สร้างขึ้นจากเทคโนโลยี เช่น อินเทอร์เน็ต อุปกรณ์อัจฉริยะ โซเชียลมีเดีย ปัญญาประดิษฐ์ ฯลฯ ซึ่งมีผลต่อวิธีคิด วิธีใช้ชีวิต และวิธีสื่อสารของผู้คน</p>

  <ul>
    <li>🖥️ ใช้คอมพิวเตอร์และสมาร์ตโฟนในการเรียนและทำงาน</li>
    <li>🛒 สั่งอาหารและซื้อของออนไลน์</li>
    <li>📲 สื่อสารกันแบบเรียลไทม์ผ่านแอปแชต</li>
    <li>🧠 ค้นหาความรู้ใหม่ ๆ ได้ในทันที</li>
  </ul>

  <h2>📉 ตัวอย่างการใช้เทคโนโลยีแบบผิด ๆ</h2>
  <ul>
    <li>⏰ ใช้เวลากับหน้าจอเกินวันละ 8 ชั่วโมง โดยไม่พักสายตา</li>
    <li>📵 เล่นเกมหรือดูวิดีโอระหว่างเรียนหรือทำงาน</li>
    <li>💬 โพสต์ข้อความที่ทำร้ายจิตใจผู้อื่นบนโซเชียล</li>
    <li>🔐 ไม่ระวังการแชร์ข้อมูลส่วนตัว ทำให้เกิดการถูกหลอกลวง</li>
  </ul>

  <p style="background-color:#ffe0e0; padding:1em; border-left:5px solid red;">
    <strong>สถิติจากกรมสุขภาพจิต (2566):</strong> พบว่า 35% ของวัยรุ่นไทยมีภาวะ “ติดหน้าจอ” และมีความเครียดสะสมจากการใช้อุปกรณ์ดิจิทัลมากเกินไป
  </p>

  <h2>✅ ตัวอย่างการใช้เทคโนโลยีเพื่อเรียนรู้และทำงาน</h2>
  <ul>
    <li>📚 ใช้ YouTube และแอปเรียนรู้เช่น Khan Academy, Coursera เพื่อเสริมความรู้</li>
    <li>📖 อ่านหนังสือผ่าน E-book หรือห้องสมุดออนไลน์</li>
    <li>💻 ใช้แอปอย่าง Notion หรือ Google Docs ในการวางแผนการเรียนและทำงานร่วมกัน</li>
    <li>🧑‍🏫 นักเรียนและครูใช้ Google Classroom และ Microsoft Teams สำหรับเรียนออนไลน์</li>
  </ul>

  <p style="background-color:#e0f7fa; padding:1em; border-left:5px solid #007BFF;">
    <strong>รายงานจาก UNESCO ปี 2023:</strong> ระบบการเรียนรู้แบบออนไลน์ช่วยเพิ่มการเข้าถึงการศึกษาให้กับเยาวชนกว่า 500 ล้านคนทั่วโลก
  </p>

  <h2>🔎 ทำไมเราต้องเข้าใจโลกดิจิทัล?</h2>
  <p>เพราะโลกดิจิทัลไม่ใช่เพียงเครื่องมือ แต่เป็นส่วนหนึ่งของชีวิต การเข้าใจมันทำให้เรา:</p>
  <ul>
    <li>🧠 คิดวิเคราะห์ข้อมูลอย่างมีวิจารณญาณ</li>
    <li>🛡️ ใช้เทคโนโลยีอย่างปลอดภัย</li>
    <li>💬 สื่อสารอย่างมีมารยาท</li>
    <li>👩‍💼 เตรียมพร้อมเข้าสู่การทำงานในโลกยุคใหม่</li>
  </ul>

  <h2>❓ คำถามท้าทายผู้อ่าน</h2>
  <blockquote style="background-color: #f1f1f1; padding: 1em; border-left: 5px solid #0099cc; font-style: italic;">
    <p><strong>คุณเคยลองเช็กไหมว่า&#8230;</strong><br>
    เวลาทั้งวันของคุณ หมดไปกับ “การใช้เทคโนโลยีเพื่อสร้างสรรค์” หรือแค่ “การเสพเนื้อหาแบบไม่รู้ตัว”?</p>
  </blockquote>

  <h2>💡 แนวทางการใช้เทคโนโลยีอย่างฉลาด</h2>
  <ol>
    <li><strong>Digital Literacy:</strong> เรียนรู้การใช้เทคโนโลยีและสื่ออย่างเข้าใจ</li>
    <li><strong>Digital Mindfulness:</strong> ใช้อย่างมีสติและกำหนดเวลา</li>
    <li><strong>Digital Safety:</strong> ปกป้องข้อมูลส่วนตัวและระวังภัยไซเบอร์</li>
  </ol>

  <figure>
    <img decoding="async" src="https://images.pexels.com/photos/8927685/pexels-photo-8927685.jpeg" alt="ครอบครัวกับเทคโนโลยี" style="width:100%; height:auto; border-radius: 8px;">
    <figcaption style="font-size: 0.9em; color: #666;">ภาพจาก Pexels &#8211; เทคโนโลยีควรเป็นสะพาน ไม่ใช่กำแพง</figcaption>
  </figure>

  <h2>✅ สรุปส่งท้าย</h2>
  <p>โลกดิจิทัลคือโลกใหม่ที่เปิดโอกาสมหาศาล ทั้งในการเรียน การทำงาน และการสื่อสาร แต่โอกาสนั้นจะกลายเป็นความเสี่ยง หากเราใช้อย่างไม่รู้เท่าทัน</p>
  <p><strong>จงเป็น “เจ้าของเทคโนโลยี” ไม่ใช่ “ทาสของมัน”</strong><br>
  การรู้จักโลกดิจิทัลให้ดีคือการสร้างอนาคตที่มั่นคง ปลอดภัย และมีความสุข</p>

  <hr>
  <p style="font-size: 0.9em; color: gray;">
    แหล่งอ้างอิง:<br>
    &#8211; กรมสุขภาพจิต (2566) “พฤติกรรมเสี่ยงจากการใช้เทคโนโลยีในวัยรุ่น”<br>
    &#8211; UNESCO (2023). “Digital learning report”. Retrieved from https://unesdoc.unesco.org<br>
    &#8211; ETDA (2023) รายงานพฤติกรรมการใช้อินเทอร์เน็ตของคนไทย. https://www.etda.or.th
  </p>
</article>

<p>The post <a href="https://www.kroochut.com/digital-world/">🌐 โลกดิจิทัลคืออะไร? ทำไมต้องรู้จักมัน</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.kroochut.com/digital-world/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
