<?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>คะแนน XP Archives - ครูชัชดอทคอม</title>
	<atom:link href="https://www.kroochut.com/tag/%e0%b8%84%e0%b8%b0%e0%b9%81%e0%b8%99%e0%b8%99-xp/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.kroochut.com/tag/คะแนน-xp/</link>
	<description>เว็บไซต์เพื่อการเรียนรู้ของทุกคน</description>
	<lastBuildDate>Wed, 25 Jun 2025 13:03:40 +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>คะแนน XP Archives - ครูชัชดอทคอม</title>
	<link>https://www.kroochut.com/tag/คะแนน-xp/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>🛒บทเรียนออนไลน์การเป็นผู้บริโภคออนไลน์ที่ชาญฉลาด 🏪</title>
		<link>https://www.kroochut.com/smart-shopping/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Wed, 25 Jun 2025 13:03:39 +0000</pubDate>
				<category><![CDATA[Information Technology]]></category>
		<category><![CDATA[Constructivism]]></category>
		<category><![CDATA[e-learning]]></category>
		<category><![CDATA[gamification]]></category>
		<category><![CDATA[Inquiry-based learning]]></category>
		<category><![CDATA[Project-based learning]]></category>
		<category><![CDATA[กิจกรรมลากวาง]]></category>
		<category><![CDATA[คะแนน XP]]></category>
		<category><![CDATA[นักเรียนมัธยม]]></category>
		<category><![CDATA[บทเรียนออนไลน์]]></category>
		<category><![CDATA[ม.1]]></category>
		<category><![CDATA[ม.2]]></category>
		<category><![CDATA[ม.3]]></category>
		<category><![CDATA[แบบทดสอบออนไลน์]]></category>
		<category><![CDATA[โรงเรียนหนองจอกพิทยานุสรณ์]]></category>
		<guid isPermaLink="false">https://www.kroochut.com/?p=774</guid>

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

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