<?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>Phishing Archives - ครูชัชดอทคอม</title>
	<atom:link href="https://www.kroochut.com/tag/phishing/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.kroochut.com/tag/phishing/</link>
	<description>เว็บไซต์เพื่อการเรียนรู้ของทุกคน</description>
	<lastBuildDate>Wed, 03 Dec 2025 03:59:35 +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>Phishing Archives - ครูชัชดอทคอม</title>
	<link>https://www.kroochut.com/tag/phishing/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>ความสำคัญของข้อมูลส่วนตัว</title>
		<link>https://www.kroochut.com/personal-data-security/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Wed, 03 Dec 2025 03:53:41 +0000</pubDate>
				<category><![CDATA[Information Technology]]></category>
		<category><![CDATA[Cyber Security]]></category>
		<category><![CDATA[Digital Bodyguard]]></category>
		<category><![CDATA[Phishing]]></category>
		<category><![CDATA[การป้องกันข้อมูล]]></category>
		<category><![CDATA[ข้อมูลส่วนตัว]]></category>
		<category><![CDATA[ความปลอดภัย]]></category>
		<category><![CDATA[ภัยคุกคามไซเบอร์]]></category>
		<category><![CDATA[ม.1 คอมพิวเตอร์]]></category>
		<category><![CDATA[รหัสผ่าน]]></category>
		<category><![CDATA[สวมรอย]]></category>
		<guid isPermaLink="false">https://www.kroochut.com/?p=909</guid>

					<description><![CDATA[<p>บทเรียนออนไลน์: ความสำคัญของข้อมูลส่วนตัว วิชาคอมพิวเตอร์ ม.1 เรื่อง: ความสำคัญของข้อมูลส่วนตัว 🛡️ ยินดีต้อนรับสู่บทเรียน &#8220;Digital Bodyguard&#8221; ภารกิจปกป้องตัวตนบนโลกออนไลน์ เริ่มต้นที่นี่! กรุณากรอกชื่อ-นามสกุล ของนักเรียน: เริ่มบทเรียน 🚀 🎓 แบบทดสอบวัดความรู้ ตอบคำถาม 10 ข้อ เพื่อรับใบประกาศนียบัตร (ต้องได้คะแนน 7 ขึ้นไป) 📊 สรุปผลคะแนน 0 / 10 เริ่มใหม่ รับใบประกาศนียบัตร 🏆 🏅 ใบประกาศนียบัตร ขอมอบให้ไว้เพื่อแสดงว่า ชื่อนักเรียน ได้ผ่านการทดสอบเรื่อง &#8220;ความสำคัญของข้อมูลส่วนตัว&#8221; ด้วยคะแนน /10 วิชาคอมพิวเตอร์ มัธยมศึกษาปีที่ 1 *สามารถ Capture หน้าจอนี้เพื่อยืนยันการเรียน* ⬅️ ก่อนหน้า หน้า 1/10 ถัดไป ➡️</p>
<p>The post <a href="https://www.kroochut.com/personal-data-security/">ความสำคัญของข้อมูลส่วนตัว</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>
    <!-- ใช้ Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600;800&#038;display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2563eb;
            --secondary-color: #1e40af;
            --accent-color: #f59e0b;
            --bg-color: #f3f4f6;
            --text-color: #1f2937;
            --success-color: #10b981;
            --error-color: #ef4444;
        }

        * {
            box-sizing: border-box;
            font-family: 'Sarabun', sans-serif;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: var(--bg-color);
            color: var(--text-color);
            display: flex;
            justify-content: center;
            min-height: 100vh;
        }

        /* Container หลัก สำหรับวางใน WordPress */
        #lesson-app {
            width: 100%;
            max-width: 900px;
            background: white;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            border-radius: 1rem;
            overflow: hidden;
            margin: 20px;
            position: relative;
            display: flex;
            flex-direction: column;
        }

        /* Header */
        .app-header {
            background: var(--primary-color);
            color: white;
            padding: 1rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .progress-bar {
            height: 8px;
            background: rgba(255,255,255,0.3);
            border-radius: 4px;
            width: 100%;
            margin-top: 10px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: var(--accent-color);
            width: 0%;
            transition: width 0.3s ease;
        }

        /* Content Area */
        .content-area {
            padding: 2rem;
            flex-grow: 1;
            overflow-y: auto;
            min-height: 500px;
        }

        .slide {
            display: none;
            animation: fadeIn 0.5s ease;
        }

        .slide.active {
            display: block;
        }

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

        h1, h2 {
            color: var(--secondary-color);
            margin-bottom: 1rem;
        }
        
        h1 { font-size: 1.8rem; font-weight: 800; }
        h2 { font-size: 1.5rem; font-weight: 600; }
        p { line-height: 1.7; font-size: 1.1rem; margin-bottom: 1rem; }

        /* Images Grid */
        .image-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin: 20px 0;
        }

        .image-card {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            height: 250px;
        }

        .image-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }

        .image-card:hover img {
            transform: scale(1.05);
        }

        /* Buttons */
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 600;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        .btn-primary:hover { background-color: var(--secondary-color); transform: translateY(-2px); }

        .btn-secondary {
            background-color: #e5e7eb;
            color: var(--text-color);
        }
        .btn-secondary:hover { background-color: #d1d5db; }

        .btn-accent {
            background-color: var(--accent-color);
            color: white;
        }

        .nav-controls {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #e5e7eb;
        }

        /* Input Form */
        .input-group {
            margin-bottom: 20px;
        }
        .input-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        .input-group input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 1rem;
        }
        .input-group input:focus {
            border-color: var(--primary-color);
            outline: none;
        }

        /* Quiz Styles */
        .quiz-option {
            background: white;
            border: 2px solid #e5e7eb;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .quiz-option:hover {
            border-color: var(--primary-color);
            background-color: #f0f9ff;
        }

        /* Certificate */
        #certificate {
            border: 10px solid var(--secondary-color);
            padding: 40px;
            text-align: center;
            background: #fff;
            position: relative;
            display: none; /* Hidden by default */
            margin-top: 20px;
        }
        
        #certificate h1 { color: var(--secondary-color); font-size: 2.5rem; margin-bottom: 10px; }
        #certificate h3 { color: #555; }
        #certificate .cert-name { font-size: 2rem; color: var(--primary-color); font-weight: bold; margin: 20px 0; border-bottom: 2px dashed #ccc; display: inline-block; padding: 0 20px; }
        #certificate .cert-footer { margin-top: 40px; font-size: 0.9rem; color: #888; }
        #certificate .medal { font-size: 4rem; color: var(--accent-color); margin-bottom: 10px; }

        @media (max-width: 600px) {
            .image-grid { grid-template-columns: 1fr; }
            .image-card { height: 200px; }
            #certificate { padding: 20px; }
            #certificate h1 { font-size: 1.8rem; }
        }
    </style>
</head>
<body>

<div id="lesson-app">
    <!-- Header -->
    <div class="app-header">
        <div>
            <span style="font-weight: 800; font-size: 1.2rem;">วิชาคอมพิวเตอร์ ม.1</span>
            <div style="font-size: 0.9rem; opacity: 0.9;">เรื่อง: ความสำคัญของข้อมูลส่วนตัว</div>
        </div>
        <div id="user-display" style="font-weight: bold; display:none;"></div>
    </div>
    <div class="progress-bar"><div class="progress-fill" id="progress"></div></div>

    <!-- Content Area -->
    <div class="content-area">
        
        <!-- Welcome Screen -->
        <div id="welcome-screen" class="slide active">
            <div style="text-align: center; padding: 2rem;">
                <div style="font-size: 4rem; margin-bottom: 20px;">🛡️</div>
                <h1>ยินดีต้อนรับสู่บทเรียน &#8220;Digital Bodyguard&#8221;</h1>
                <p>ภารกิจปกป้องตัวตนบนโลกออนไลน์ เริ่มต้นที่นี่!</p>
                
                <div class="image-grid">
                    <div class="image-card"><img decoding="async" src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&#038;fit=crop&#038;w=800&#038;q=80" alt="Digital Security"></div>
                    <div class="image-card"><img decoding="async" src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&#038;fit=crop&#038;w=800&#038;q=80" alt="Students learning"></div>
                </div>

                <div class="input-group" style="max-width: 400px; margin: 30px auto;">
                    <label for="student-name">กรุณากรอกชื่อ-นามสกุล ของนักเรียน:</label>
                    <input type="text" id="student-name" placeholder="เช่น ด.ช. รักเรียน เพียรศึกษา">
                </div>
                
                <button class="btn btn-primary" onclick="startLesson()">เริ่มบทเรียน 🚀</button>
            </div>
        </div>

        <!-- Lesson Slides Container -->
        <div id="lesson-container"></div>

        <!-- Quiz Container -->
        <div id="quiz-container" class="slide">
            <div style="text-align: center; margin-bottom: 30px;">
                <h2>🎓 แบบทดสอบวัดความรู้</h2>
                <p>ตอบคำถาม 10 ข้อ เพื่อรับใบประกาศนียบัตร (ต้องได้คะแนน 7 ขึ้นไป)</p>
            </div>
            <div id="quiz-question-area"></div>
        </div>

        <!-- Result Screen -->
        <div id="result-screen" class="slide" style="text-align: center;">
            <div style="font-size: 4rem; margin-bottom: 20px;">📊</div>
            <h2>สรุปผลคะแนน</h2>
            <div style="font-size: 3rem; font-weight: bold; color: var(--primary-color); margin: 20px 0;">
                <span id="final-score">0</span> / 10
            </div>
            <div id="result-message" style="font-size: 1.2rem; margin-bottom: 30px;"></div>
            
            <button class="btn btn-secondary" onclick="restartLesson()">เริ่มใหม่</button>
            <button id="cert-btn" class="btn btn-accent" style="display:none;" onclick="showCertificate()">รับใบประกาศนียบัตร 🏆</button>

            <!-- Certificate Area -->
            <div id="certificate">
                <div class="medal">🏅</div>
                <h1>ใบประกาศนียบัตร</h1>
                <h3>ขอมอบให้ไว้เพื่อแสดงว่า</h3>
                <div class="cert-name" id="cert-name-display">ชื่อนักเรียน</div>
                <p>ได้ผ่านการทดสอบเรื่อง &#8220;ความสำคัญของข้อมูลส่วนตัว&#8221;</p>
                <p>ด้วยคะแนน <span id="cert-score"></span>/10</p>
                <div class="cert-footer">
                    วิชาคอมพิวเตอร์ มัธยมศึกษาปีที่ 1<br>
                    <small>*สามารถ Capture หน้าจอนี้เพื่อยืนยันการเรียน*</small>
                </div>
            </div>
        </div>

    </div>

    <!-- Navigation Footer (Hidden on Welcome/Result) -->
    <div class="content-area" style="padding-top: 0; min-height: auto;">
        <div id="nav-footer" class="nav-controls" style="display: none;">
            <button class="btn btn-secondary" onclick="prevSlide()">⬅️ ก่อนหน้า</button>
            <span id="page-indicator" style="align-self: center; color: #666;">หน้า 1/10</span>
            <button class="btn btn-primary" onclick="nextSlide()">ถัดไป ➡️</button>
        </div>
    </div>
</div>

<script>
    // --- Data Configuration ---
    const lessonData = [
        {
            title: "1. ใครคือ 'คุณ' บนโลกอินเทอร์เน็ต?",
            content: "ในโลกความจริง เรามีหน้าตาและเสียง แต่ในโลกอินเทอร์เน็ต เรามีสิ่งที่เรียกว่า <b>'ข้อมูลส่วนตัว'</b> ข้อมูลเหล่านี้คือตัวแทนของเราที่ระบบคอมพิวเตอร์รู้จัก วันนี้เราจะมาเรียนรู้วิธีเป็น 'ผู้พิทักษ์' ข้อมูลของตัวเองกัน!",
            images: [
                "https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExbGhqZG04bTZydmVycno4eXp4NXNmZGU5ajFmZGt1cjR0b2FtbXhnZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/iAKXyzgLVtKsU/giphy.gif", // Cyber identity
                "https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExcjY3YTF3Z2diMTVsazVhcmVieXA4emRmMmlpZWVlc254enJhM3AyZiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/T5nP7Nwu5FzMc/giphy.gif"  // User profile
            ]
        },
        {
            title: "2. ข้อมูลส่วนตัวคืออะไร?",
            content: "ข้อมูลส่วนตัว คือ สิ่งที่บอกว่า 'เราเป็นใคร' และใช้ยืนยันตัวตนได้ดีที่สุด ในชีวิตจริงเรามี <b>บัตรประชาชน, ทะเบียนบ้าน, หนังสือเดินทาง หรือบัตรเครดิต</b> เราเก็บสิ่งเหล่านี้ไว้ในที่ปลอดภัยเสมอ เพราะถ้าหายไป คนร้ายอาจนำไปสวมรอยได้",
            images: [
                "https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExOG54bjhwcHpjcmQ5NjRiOTd5MWx5YWU5Mm81bzFtYWR2YnlqMnRieSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Fh9jhYLDLo87u/giphy.gif", // ID Card/Passport
                "https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExcWFraTk5N2p4ZGlmZWV4NXdueXdwcnJtOWc5bXU4b2o2NXNhcWRoYiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/jv6DIneawn5AW7ZUrq/giphy.gif"  // Wallet
            ]
        },
        {
            title: "3. จากกระดาษสู่ดิจิทัล",
            content: "ปัจจุบันคอมพิวเตอร์ช่วยให้เราส่งข้อมูลหากันทั่วโลก มีข้อมูลมหาศาลวิ่งบนอินเทอร์เน็ต แต่ข้อมูลเหล่านี้ต้องมีการ <b>'คัดกรอง'</b> ระบบจะจัดการว่าใครควรเห็นข้อมูลไหน เพื่อความเป็นส่วนตัวของเรา",
            images: [
                "https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExNDdkNnV5ZzE2ZWo1d2tnanY2ZmVxeGx2Y2NlMnl1OWNqNWpxemthMiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3o6gbchrcNIt4Ma8Tu/giphy.gif", // Network
                "https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMHVqdXgxbzdvc2d3ZGdsZHQ4YzBsb3RmNnJ2d2t2ZDcwczZ4amFuYyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Sk3KytuxDQJQ4/giphy.gif"  // Server
            ]
        },
        {
            title: "4. กุญแจเข้าบ้านในโลกออนไลน์",
            content: "บนอินเทอร์เน็ต เราใช้ <b>'บัญชีผู้ใช้ (Username)' และ 'รหัสผ่าน (Password)'</b> แทนบัตรประชาชน นอกจากนี้ยังมี เลขบัตรเครดิต หรือวันเดือนปีเกิด ที่ใช้ยืนยันตัวตน สิ่งเหล่านี้สำคัญเท่ากับตัวเราในโลกจริง",
            images: [
                "https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExZTFxcWw2YnFmbXRsZG9odGZ0eGp2Zm5mdHRhd2kwMXF4YzZzeHlibSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/t0virGpgSlp4mkfiXq/giphy.gif", // Login screen
                "https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExczAxZWd3ZGxhYnl3czd3YzRoMnFyODl5dWU2YmcxNHpwOXl4dnljcSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/PbMdZc61lcD47mZRJo/giphy.gif"  // Password lock
            ]
        },
        {
            title: "5. ความเสี่ยงจากผู้ไม่หวังดี",
            content: "หากข้อมูลหลุดออกไป อาจถูกสวมรอยไปทำผิดกฎหมาย ถูกขโมยเงิน หรือถูกนำข้อมูลไปขาย ผู้ไม่หวังดี (Hacker) จ้องจะขโมยข้อมูลเราไปใช้ประโยชน์ในทางที่ผิดเสมอ",
            images: [
                "https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExY2o2YzRrMHB4Z3Nwd2Q1dnlsanFwcndvZWZ2aGdiNW1oN3E3eWxyaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/YQitE4YNQNahy/giphy.gif", // Hacker hoodie
                "https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExbHQ0YmFveDRtZXU1ZTd6ODl3ZGN2NWVzejdqdnBmMWl0bjE2NG02YiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/m3lszq64i1k2s/giphy.gif"  // Data theft
            ]
        },
        {
            title: "6. ฮีโร่คนแรกคือ 'ตัวคุณเอง'",
            content: "แม้เว็บไซต์จะมีระบบป้องกันดีแค่ไหน แต่ <b>'ด่านแรก'</b> ของการป้องกันคือ <b>เจ้าของข้อมูล</b> เราต้องใช้งานด้วยความรอบคอบ เพราะถ้าเราเผลอบอกรหัสผ่านให้คนอื่น ระบบป้องกันไหนก็ช่วยไม่ได้",
            images: [
                "https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMHJlMHVoazA4c2NlazJ0Y25qMXRobXl2eTU2MzR2NHc1MmpzNHM2eSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/UP0PH4rVDu46bFISEp/giphy.gif", // Friends looking at phone
                "https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExeWxjdWloYWEyaXYybWF3NTRsbGc4cGc2Nm5hNnU5Mmw2c2E5MmU1OSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/uxSGIgmKSaRBBj1fTf/giphy.gif"  // Person using laptop securely
            ]
        },
        {
            title: "7. สิ่งที่ควรทำ และ ไม่ควรทำ (Do & Don't)",
            content: "✅ <b>ควรทำ:</b> ตั้งรหัสผ่านให้ยาก, Logout ทุกครั้งเมื่อใช้เครื่องสาธารณะ<br>❌ <b>ไม่ควรทำ:</b> บอกรหัสผ่านเพื่อน, โพสต์รูปบัตรประชาชนลงโซเชียล, กรอกข้อมูลในเว็บที่ไม่น่าเชื่อถือ",
            images: [
                "https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExY3E3cm1lNHNkbmJhempvc3A4ODBxaHkzdnd3eDQ1NXg1N2hwZHNqcSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/loXfQtPqLxGmbLs9h2/giphy.gif", // Strong Password
                "https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExczhnYjltc201NzBoNnZhN2tjNTRnNTEybng4cThwbXphc3k3emNsNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/7zkeN8oEWiJ61WEJTE/giphy.gif"  // Caution sign
            ]
        },
        {
            title: "8. กรณีศึกษา: เว็บไซต์ปลอม",
            content: "ระวังเว็บที่บอกว่า 'แจกไอเทมฟรี! แค่กรอกรหัสผ่าน' นี่คือกลลวงแบบ <b>Phishing</b> เพื่อหลอกเอาข้อมูลเราไป ถ้าเจอแบบนี้ให้ปิดเว็บไซต์ทันที จำไว้ว่า 'ของฟรีไม่มีในโลก(ออนไลน์)'",
            images: [
                "https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExMGR0Y3c2ZncxOXl1Y2p3encwZ3o2YWlmdmJ4d3h5anRxdHpkZGJmaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XAxVOaTzgZE3K/giphy.gif", // Cyber crime
                "https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExbzRwcHplem4xaGdjdmpzcmJqY29xMjAyeWh5eXNqY3B4Z2I1eDE5ZiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/TIUzDChxd7h4c/giphy.gif"  // Gamer computer
            ]
        },
        {
            title: "9. ข้อมูลส่วนตัว = สมบัติล้ำค่า",
            content: "ข้อมูลส่วนตัวมีค่าเหมือนกุญแจเซฟ การไม่ตระหนักถึงการปกป้อง = เปิดประตูบ้านทิ้งไว้ให้โจร ผลเสียที่เกิดขึ้นอาจตามแก้ได้ยากในระยะยาว เสียทั้งทรัพย์สินและชื่อเสียง",
            images: [
                "https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmtrcm93Mjh0cXcyeWF5bzAzNjJ4NThrbHUzNzlnNzVhdnZvNWppYiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/lXiRm5H49zYmHr3i0/giphy.gif", // Treasure/Value
                "https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExYWhpYmwyczM1cmN1M2puaG1rcXI3bGJseW5hZjZwNHkwc3ltY242MSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/zpiguq0YcbiPKzyum0/giphy.gif"  // Protect Plan
            ]
        },
        {
            title: "10. สรุปบทเรียน",
            content: "ยินดีด้วย! คุณพร้อมจะเป็น Digital Bodyguard แล้ว จำไว้เสมอว่า: <b>1.ข้อมูลใช้ยืนยันตัวตน 2.มีคนจ้องขโมยตลอดเวลา 3.เราคือผู้พิทักษ์คนแรก</b> ... ถ้าพร้อมแล้ว ไปทำแบบทดสอบกันเลย!",
            images: [
                "https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExdzdrNWp5eHc1ZWpnN2x4c2loOTNyZWkxdHB1bWN6NXNxdzdqMGs4MiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/PPEB8xdEkyeW8FUPgM/giphy.gif", // Success
                "https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExeHNpemxzcmJwbnhsaTNpZG9veWc3ZWhnY3E0ZXJ1ZmRnMmtzdWU0ZiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/fl7vjvsFcOtUzqiFPF/giphy.gif"  // Certificate/Diploma concept
            ]
        }
    ];

    const quizData = [
        // แก้ไขโดยการใส่ ' ' ครอบคีย์ทั้งหมด (q, choices, ans) เพื่อป้องกัน Syntax Error
        { 'q': "1. ข้อมูลส่วนตัวมีความสำคัญอย่างไร?", 'choices': ["ใช้แลกของรางวัล", "ใช้ยืนยันตัวตนของเจ้าของ", "ใช้เพื่อความบันเทิง", "ใช้หาเพื่อนใหม่"], 'ans': 1 },
        { 'q': "2. ข้อใด 'ไม่ใช่' ข้อมูลส่วนตัว?", 'choices': ["รหัสผ่าน (Password)", "เลขบัตรประชาชน", "สภาพอากาศวันนี้", "เลขหลังบัตรเครดิต"], 'ans': 2 },
        { 'q': "3. เราควรดูแลข้อมูลส่วนตัวบนอินเทอร์เน็ตเหมือนกับสิ่งใด?", 'choices': ["ใบปลิวแจกฟรี", "หนังสือพิมพ์เก่า", "กระเป๋าสตางค์และกุญแจบ้าน", "ถุงขนม"], 'ans': 2 },
        { 'q': "4. สิ่งใดใช้ยืนยันตัวตนในการเข้าสู่ระบบเว็บไซต์?", 'choices': ["Username และ Password", "ชื่อเล่นและสีที่ชอบ", "ความสูงและน้ำหนัก", "ยี่ห้อโทรศัพท์"], 'ans': 0 },
        { 'q': "5. ใครคือคนแรกที่มีหน้าที่ปกป้องข้อมูลส่วนตัวของเรา?", 'choices': ["ตำรวจไซเบอร์", "เจ้าของเว็บไซต์", "เพื่อนสนิท", "ตัวเราเอง"], 'ans': 3 },
        { 'q': "6. หากข้อมูลส่วนตัวหลุดไปอยู่ในมือมิจฉาชีพ อาจเกิดผลเสียอย่างไร?", 'choices': ["เน็ตเร็วขึ้น", "ถูกสวมรอยไปทำผิดกฎหมาย", "ได้เพื่อนเพิ่มขึ้น", "คอมพิวเตอร์ทำงานดีขึ้น"], 'ans': 1 },
        { 'q': "7. พฤติกรรมใด 'เสี่ยง' ต่อความปลอดภัยของข้อมูลมากที่สุด?", 'choices': ["เปลี่ยนรหัสผ่านทุก 3 เดือน", "ไม่บอกรหัสผ่านให้ใครรู้", "ใช้รหัสผ่านเดียวกับทุกเว็บไซต์", "ออกจากระบบเมื่อใช้เครื่องสาธารณะ"], 'ans': 2 },
        { 'q': "8. หากเจอเว็บที่บอกว่า 'แจกไอเทมเกมฟรี แค่กรอกเลขบัตรประชาชน' ควรทำอย่างไร?", 'choices': ["รีบกรอกทันที", "ส่งต่อให้เพื่อน", "ปิดเว็บไซต์ทันที ไม่กรอกข้อมูล", "ลองกรอกเลขมั่วๆ"], 'ans': 2 },
        { 'q': "9. ทำไมเราต้อง Logout (ออกจากระบบ) เมื่อใช้คอมพิวเตอร์สาธารณะ?", 'choices': ["เพื่อประหยัดไฟ", "ป้องกันผู้อื่นเข้าสวมรอยใช้บัญชีเรา", "เป็นมารยาทที่ดี", "เพื่อให้เครื่องทำงานเร็วขึ้น"], 'ans': 1 },
        { 'q': "10. ข้อใดเป็นการตั้งรหัสผ่านที่ปลอดภัย?", 'choices': ["123456", "เบอร์โทรศัพท์ตัวเอง", "ชื่อตัวเองตามด้วยวันเกิด", "ตัวอักษรผสมตัวเลขและสัญลักษณ์ที่คาดเดายาก"], 'ans': 3 }
    ];

    // --- Variables ---
    let currentSlide = 0;
    let userName = "";
    let score = 0;
    let quizCurrent = 0;

    // ** IMPORTANT: Replace this with your deployed Google Apps Script URL **
    const GOOGLE_SHEET_URL = "https://script.google.com/macros/s/AKfycbwJ-a4z_qchMnitZVEnitmMm5z6KX2_3joBjGu4ciyx6BrPCS6EdYqwlUeAJHhNnDTCxQ/exec"; 

    // --- Utility Functions ---

    /**
     * Fisher-Yates shuffle algorithm
     * @param {Array} array 
     */
    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
    }

    // Custom Modal/Message Box (since alert() is forbidden)
    function showCustomMessage(title, message, type) {
        const existingModal = document.getElementById('custom-modal');
        if (existingModal) existingModal.remove();

        const modal = document.createElement('div');
        modal.id = 'custom-modal';
        modal.style.cssText = `
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; 
            z-index: 1000;
        `;
        const card = document.createElement('div');
        card.style.cssText = `
            background: white; padding: 25px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
            max-width: 90%; width: 400px; text-align: center; font-family: 'Sarabun', sans-serif;
        `;
        const color = type === 'success' ? 'var(--success-color)' : type === 'error' ? 'var(--error-color)' : 'var(--accent-color)';
        
        card.innerHTML = `
            <h3 style="color: ${color}; margin-top:0; font-size:1.5rem;">${title}</h3>
            <p style="margin-bottom: 20px;">${message}</p>
            <button class="btn btn-primary" onclick="this.parentNode.parentNode.remove()">ปิด</button>
        `;
        modal.appendChild(card);
        document.body.appendChild(modal);
    }


    // --- Sound Effects (Web Audio API) ---
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

    function playTone(freq, type, duration) {
        if(audioCtx.state === 'suspended') audioCtx.resume();
        const osc = audioCtx.createOscillator();
        const gainNode = audioCtx.createGain();
        osc.type = type;
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        gainNode.gain.setValueAtTime(0.1, audioCtx.currentTime);
        gainNode.gain.exponentialRampToValueAtTime(0.00001, audioCtx.currentTime + duration);
        osc.connect(gainNode);
        gainNode.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + duration);
    }

    function playClick() { playTone(600, 'sine', 0.1); }
    function playCorrect() { playTone(800, 'sine', 0.1); setTimeout(() => playTone(1200, 'sine', 0.3), 100); }
    function playWrong() { playTone(300, 'sawtooth', 0.2); setTimeout(() => playTone(200, 'sawtooth', 0.3), 200); }
    function playWin() { 
        [400, 500, 600, 800].forEach((freq, i) => setTimeout(() => playTone(freq, 'square', 0.2), i*150)); 
    }

    // --- App Logic ---

    function initLesson() {
        const container = document.getElementById('lesson-container');
        lessonData.forEach((slide, index) => {
            const div = document.createElement('div');
            div.className = 'slide';
            div.id = `slide-${index}`;
            div.innerHTML = `
                <h2>${slide.title}</h2>
                <p>${slide.content}</p>
                <div class="image-grid">
                    <div class="image-card"><img decoding="async" src="${slide.images[0]}" loading="lazy"></div>
                    <div class="image-card"><img decoding="async" src="${slide.images[1]}" loading="lazy"></div>
                </div>
            `;
            container.appendChild(div);
        });
    }

    function startLesson() {
        const nameInput = document.getElementById('student-name');
        if (nameInput.value.trim() === "") {
            showCustomMessage("แจ้งเตือน", "กรุณากรอกชื่อก่อนเริ่มเรียนครับ", 'warning');
            return;
        }
        userName = nameInput.value;
        document.getElementById('user-display').innerText = `ผู้เรียน: ${userName}`;
        document.getElementById('user-display').style.display = 'block';
        
        playClick();
        document.getElementById('welcome-screen').classList.remove('active');
        document.getElementById('nav-footer').style.display = 'flex';
        showSlide(0);
    }

    function showSlide(index) {
        const slides = document.querySelectorAll('#lesson-container .slide');
        slides.forEach(s => s.classList.remove('active'));
        
        if (index < lessonData.length) {
            slides[index].classList.add('active');
            currentSlide = index;
            updateProgress();
        } else {
            // End of lesson, start quiz
            document.getElementById('nav-footer').style.display = 'none';
            startQuiz();
        }
    }

    function nextSlide() {
        playClick();
        showSlide(currentSlide + 1);
    }

    function prevSlide() {
        playClick();
        if (currentSlide > 0) {
            showSlide(currentSlide - 1);
        }
    }

    function updateProgress() {
        const percent = ((currentSlide + 1) / (lessonData.length + 1)) * 100; // +1 for quiz
        document.getElementById('progress').style.width = `${percent}%`;
        document.getElementById('page-indicator').innerText = `หน้า ${currentSlide + 1}/${lessonData.length}`;
    }

    // --- Google Sheet Integration ---

    // Function to save score to Google Sheet
    function saveScoreToSheet(name, finalScore) {
        if (GOOGLE_SHEET_URL.includes("YOUR_GOOGLE_APPS_SCRIPT_WEB_APP_URL_HERE")) {
            console.warn("Skipping Google Sheets save: GOOGLE_SHEET_URL is not set.");
            showCustomMessage("แจ้งเตือน", "ไม่สามารถบันทึกคะแนนได้: กรุณาตั้งค่า GOOGLE_SHEET_URL ในโค้ด. (ดูคำแนะนำด้านล่าง)", 'warning');
            return;
        }

        const data = {
            name: name,
            score: finalScore,
            timestamp: new Date().toLocaleString('th-TH', { timeZone: 'Asia/Bangkok' })
        };
        
        // Use exponential backoff for retries (Max 3 attempts)
        async function attemptSave(attempt = 1) {
            try {
                console.log(`Attempting to save score (Attempt ${attempt}):`, data);
                const response = await fetch(GOOGLE_SHEET_URL, {
                    method: 'POST',
                    mode: 'no-cors', // Essential for Google Apps Script
                    cache: 'no-cache',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                });
                // Since we use 'no-cors', we can't check response status directly,
                // but if fetch resolves without error, we assume submission was sent.
                console.log("Score submission initiated (Check Google Sheet).");
                showCustomMessage("บันทึกสำเร็จ", "บันทึกคะแนนของคุณลงในระบบเรียบร้อยแล้ว.", 'success');

            } catch (error) {
                console.error('Error saving score to Google Sheet:', error);
                if (attempt < 3) {
                    const delay = Math.pow(2, attempt) * 1000; // 2s, 4s, 8s
                    setTimeout(() => attemptSave(attempt + 1), delay);
                } else {
                    showCustomMessage("เกิดข้อผิดพลาด", "ไม่สามารถเชื่อมต่อเพื่อบันทึกคะแนนได้ กรุณาลองใหม่อีกครั้ง.", 'error');
                }
            }
        }
        attemptSave();
    }


    // --- Quiz Logic ---

    function startQuiz() {
        document.getElementById('quiz-container').classList.add('active');
        quizCurrent = 0;
        score = 0;
        shuffleArray(quizData); // Shuffle the questions
        renderQuestion();
    }

    function renderQuestion() {
        if (quizCurrent >= quizData.length) {
            showResult();
            return;
        }

        const q = quizData[quizCurrent];
        const area = document.getElementById('quiz-question-area');
        
        // Prepare choices for shuffling
        let shuffledChoices = q.choices.map((choice, index) => ({
            text: choice,
            originalIndex: index
        }));
        
        shuffleArray(shuffledChoices);

        // Store the shuffled choices array temporarily on the object for checkAnswer to reference
        q.shuffledChoices = shuffledChoices; 

        area.innerHTML = `
            <div style="font-size: 1.2rem; font-weight: bold; margin-bottom: 15px;">
                ${q.q.replace(/^[0-9]+\.\s*/, '')} <!-- Remove question number from display -->
            </div>
            ${shuffledChoices.map((c, i) => `
                <div class="quiz-option" data-shuffled-index="${i}" onclick="checkAnswer(${i}, this)">${c.text}</div>
            `).join('')}
        `;
        document.getElementById('progress').style.width = `95%`; // Near end
    }

    function checkAnswer(shuffledIndex, element) {
        // Prevent double click
        const options = document.querySelectorAll('.quiz-option');
        options.forEach(o => o.onclick = null);

        const currentQ = quizData[quizCurrent];
        const correctOriginalIndex = currentQ.ans; 
        const shuffledChoices = currentQ.shuffledChoices;
        
        // Find the original index of the selected choice
        const selectedOriginalIndex = shuffledChoices[shuffledIndex].originalIndex;

        // Find the shuffled index of the correct choice to highlight it
        const correctShuffledIndex = shuffledChoices.findIndex(c => c.originalIndex === correctOriginalIndex);

        if (selectedOriginalIndex === correctOriginalIndex) {
            playCorrect();
            element.style.backgroundColor = '#d1fae5'; // Light green for selected correct
            element.style.borderColor = 'var(--success-color)';
            score++;
        } else {
            playWrong();
            element.style.backgroundColor = '#fee2e2'; // Light red for selected wrong
            element.style.borderColor = 'var(--error-color)';
            
            // Highlight the correct one
            const correctElement = document.querySelector(`.quiz-option[data-shuffled-index="${correctShuffledIndex}"]`);
            if (correctElement) {
                correctElement.style.backgroundColor = '#ccfbf1'; // A lighter, distinct green
            }
        }

        setTimeout(() => {
            quizCurrent++;
            renderQuestion();
        }, 1200);
    }

    function showResult() {
        document.getElementById('quiz-container').classList.remove('active');
        document.getElementById('result-screen').classList.add('active');
        document.getElementById('progress').style.width = `100%`;
        
        const finalScoreElem = document.getElementById('final-score');
        finalScoreElem.innerText = score;

        const msgElem = document.getElementById('result-message');
        const certBtn = document.getElementById('cert-btn');

        if (score >= 7) {
            playWin();
            msgElem.innerHTML = "<span style='color:green; font-weight:bold;'>ยอดเยี่ยม! คุณสอบผ่านเกณฑ์</span><br>คุณมีความรู้เรื่องความปลอดภัยข้อมูลดีเยี่ยม";
            certBtn.style.display = 'inline-block';
        } else {
            msgElem.innerHTML = "<span style='color:red; font-weight:bold;'>เสียใจด้วย คุณยังไม่ผ่านเกณฑ์</span><br>ลองทบทวนบทเรียนแล้วสอบใหม่นะ";
            certBtn.style.display = 'none';
        }
        
        // Save score after showing result
        saveScoreToSheet(userName, score);
    }

    function restartLesson() {
        playClick();
        currentSlide = 0;
        document.getElementById('result-screen').classList.remove('active');
        document.getElementById('certificate').style.display = 'none';
        document.getElementById('nav-footer').style.display = 'flex';
        showSlide(0);
    }

    function showCertificate() {
        playClick();
        const cert = document.getElementById('certificate');
        cert.style.display = 'block';
        document.getElementById('cert-name-display').innerText = userName;
        document.getElementById('cert-score').innerText = score;
        cert.scrollIntoView({ behavior: 'smooth' });
    }

    // Initialize
    initLesson();

</script>

<div id="gsp_data_html" data-g_version="3.20.1" data-w_id="8ee335ae8ad86099f21d5aed437a1c00" data-s_enc="" data-h_enc="" data-hh_enc="" data-lazy_load="1" data-reload_session="0" data-gt-w="gsp_clgtranslate_wrapper" data-vv_index="15" data-ref=""></div>
</body>
</html>
<div class="gsp_post_data" 
	            data-post_type="post" 
	            data-cat="information-technology" 
	            data-modified="120"
	            data-created="1764734021"
	            data-title="ความสำคัญของข้อมูลส่วนตัว" 
	            data-home="https://www.kroochut.com"></div><p>The post <a href="https://www.kroochut.com/personal-data-security/">ความสำคัญของข้อมูลส่วนตัว</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
