แก้ไขบทเรียน

Back

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

ประเภทบทเรียน

ประเภทบทเรียนย่อย

Title

Description

Keyword

Detail

<div class="lesson-container" style="font-family: 'Sarabun', 'Prompt', sans-serif; line-height: 1.6; color: #333; max-width: 900px; margin: auto; background: #ffffff; padding: 20px; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
    
    <div style="background: linear-gradient(135deg, #E53935 0%, #D32F2F 50%, #B71C1C 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #7F0000;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">🛡️ หน่วยที่ 4 EP.3: รู้ทันภัยไซเบอร์</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FFCDD2; font-weight: bold;">พลเมืองดิจิทัลยุคใหม่ ใช้งานปลอดภัย 100%!</p>
    </div>

<div style="margin-bottom: 40px;">
        
        <p style="font-size: 18px;">โลกอินเทอร์เน็ตมีประโยชน์มากมายมหาศาลครับ แต่ในขณะเดียวกันก็มี "คนไม่หวังดี" หรือมิจฉาชีพแฝงตัวอยู่เยอะมาก ดังนั้นการจะเป็นพลเมืองดิจิทัลที่เก่งกาจ เราต้องรู้จักวิธีป้องกันตัวเองครับ!</p>

<h3 style="color: #D32F2F; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🤝 1. กฎเหล็กมารยาทออนไลน์</h3>
        <p>ก่อนที่เราจะไปจับผู้ร้าย เราต้องเป็นผู้ใช้งานที่น่ารักก่อนครับ นี่คือกฎสำคัญที่นักเรียนต้องจำให้ขึ้นใจ:</p>
        
        <div style="background: #FAFAFA; padding: 20px; border-radius: 12px; margin-top: 15px; border: 1px solid #ddd;">
            <ul style="margin: 0; padding-left: 20px; color: #333; line-height: 1.8; font-size: 15px;">
                <li>💬 ใช้คำสุภาพ ไม่บูลลี่ (Bully) หรือล้อเลียนผู้อื่น</li>
                <li>🛑 <strong>ไม่บอกข้อมูลส่วนตัว</strong> (เช่น รหัสผ่าน, ที่อยู่, เบอร์โทร) ให้คนแปลกหน้า</li>
                <li>📸 ไม่นำรูปหรือข้อมูลของคนอื่นมาโพสต์โดยไม่ขออนุญาต</li>
                <li>❌ ไม่สร้างหรือแชร์ <strong>"ข่าวปลอม (Fake News)"</strong></li>
                <li>🔒 เมื่อใช้งานคอมพิวเตอร์สาธารณะเสร็จ ต้อง <strong>ออกจากระบบ (Log out)</strong> ทุกครั้ง!</li>
            </ul>
        </div>

<h3 style="color: #D32F2F; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 40px;">👾 2. โฉมหน้าเหล่าร้ายในโลกไซเบอร์</h3>
        <p>มาทำความรู้จักกับศัตรูตัวฉกาจในโลกอินเทอร์เน็ตกันครับ จะได้ไม่ตกเป็นเหยื่อ:</p>
        
        <div style="display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 15px;">
            <div style="background: #FFEBEE; padding: 15px; border-radius: 12px; border-left: 5px solid #D32F2F; display: flex; align-items: center;">
                <div style="font-size: 35px; margin-right: 15px;">🎣</div>
                <div>
                    <strong style="color: #B71C1C; font-size: 16px;">ฟิชชิง (Phishing)</strong>
                    <p style="margin: 0; font-size: 14px;">การหลอกลวงโดยสร้าง "หน้าเว็บปลอม" ที่หน้าตาเหมือนเว็บธนาคารหรือเกมเป๊ะๆ เพื่อหลอกให้เราพิมพ์รหัสผ่านลงไป</p>
                </div>
            </div>

<div style="background: #FFF3E0; padding: 15px; border-radius: 12px; border-left: 5px solid #FF9800; display: flex; align-items: center;">
                <div style="font-size: 35px; margin-right: 15px;">💸</div>
                <div>
                    <strong style="color: #E65100; font-size: 16px;">แรนซัมแวร์ (Ransomware)</strong>
                    <p style="margin: 0; font-size: 14px;">หรือไวรัสเรียกค่าไถ่ มันจะล็อกไฟล์ในคอมพิวเตอร์ของเราเปิดไม่ได้ และบังคับให้เราโอนเงินไปให้ถึงจะปลดล็อกให้</p>
                </div>
            </div>

<div style="background: #E8F5E9; padding: 15px; border-radius: 12px; border-left: 5px solid #4CAF50; display: flex; align-items: center;">
                <div style="font-size: 35px; margin-right: 15px;">🐴</div>
                <div>
                    <strong style="color: #1B5E20; font-size: 16px;">ม้าโทรจัน (Trojan)</strong>
                    <p style="margin: 0; font-size: 14px;">โปรแกรมที่แกล้งทำตัวเป็นของฟรีหรือเกมสนุกๆ แต่พอดาวน์โหลดมาติดตั้งปุ๊บ มันจะขโมยข้อมูลในเครื่องเราทันที!</p>
                </div>
            </div>
        </div>

<h3 style="color: #D32F2F; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 40px;">🛡️ 3. เกราะป้องกันภัย: ระบบ 2FA</h3>
        <p>การตั้งรหัสผ่านยาวๆ อย่างเดียวอาจไม่พอครับ ปัจจุบันเรามีเทคโนโลยีที่เรียกว่า <strong>2FA (Two-Factor Authentication) หรือ การยืนยันตัวตนสองขั้นตอน</strong></p>
        
        <div style="background: #E3F2FD; padding: 20px; border-radius: 12px; margin-top: 15px; border: 1px dashed #1E88E5;">
            <p style="margin: 0; font-size: 15px; color: #0D47A1; font-weight: bold;">📱 2FA ทำงานอย่างไร?</p>
            <p style="margin: 5px 0 0 0; font-size: 15px; color: #333;">เมื่อเราพิมพ์รหัสผ่านถูกต้องแล้ว ระบบจะยังไม่ให้เราเข้าทันทีครับ แต่จะส่ง <strong>รหัส OTP (ตัวเลข 6 หลัก)</strong> มาที่เบอร์โทรศัพท์มือถือของเราอีกชั้นหนึ่ง! แบบนี้ถึงแฮกเกอร์จะรู้รหัสผ่านของเรา แต่ถ้าไม่มีมือถือของเรา ก็เข้าแฮกบัญชีไม่ได้แน่นอนครับ!</p>
        </div>

<div style="background: linear-gradient(135deg, #FFD54F 0%, #FFCA28 100%); padding: 25px; border-radius: 15px; margin-top: 35px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
            <p style="margin: 0; font-size: 24px; color: #D84315; font-weight: bold;">🎉 จบหลักสูตรวิทยาการคำนวณ ป.5 🎉</p>
            <p style="margin: 10px 0 0 0; font-size: 16px; color: #333;">ขอแสดงความยินดีกับนักเรียนทุกคนครับ! จากการคิดอย่างเป็นระบบ เขียนโปรแกรมวาดรูป สร้างเครื่องคิดเลข ค้นหาข้อมูล สร้างแบบฟอร์ม จนมาถึงการรับมือกับภัยไซเบอร์ วันนี้นักเรียนพร้อมที่จะนำความรู้ทั้งหมดไปใช้สร้างสรรค์สิ่งดีๆ ให้กับโลกใบนี้แล้วครับ!</p>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ สรุปความรู้ EP.3</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #FFCDD2;">บททดสอบสุดยอดหน่วยคุ้มกันไซเบอร์!</p>
        </div>
        
        <div style="border: 2px solid #B71C1C; border-top: none; padding: 25px; border-radius: 0 0 12px 12px; background: #fafafa;">
            
            <div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #D32F2F;">ข้อที่ 1: การหลอกลวงแบบ "ฟิชชิง (Phishing)" มีลักษณะการทำงานอย่างไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'นั่นคือการส่งอีเมลขยะ หรือ สแปม (Spam) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ส่งอีเมลโฆษณาขายสินค้ามาให้เราจำนวนมากๆ</button>
                    <button onclick="checkAnswer(this, false, 'นั่นคือ ไวรัสเรียกค่าไถ่ หรือ แรนซัมแวร์ (Ransomware) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ล็อกไฟล์ในคอมพิวเตอร์แล้วเรียกเก็บเงินค่าไถ่</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! ฟิชชิง คือการส่งลิงก์ปลอมที่หน้าตาเหมือนเว็บจริงมาให้ เพื่อหลอกตกปลา (ตกข้อมูล) ให้เราหลงเชื่อและพิมพ์รหัสผ่านส่งไปให้มิจฉาชีพครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. สร้างหน้าเว็บไซต์ปลอมขึ้นมาเพื่อหลอกให้เรากรอกรหัสผ่านหรือข้อมูลส่วนตัว</button>
                    <button onclick="checkAnswer(this, false, 'การขโมยรูปไปใช้ ถือเป็นการละเมิดลิขสิทธิ์ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. แอบขโมยรูปโปรไฟล์ของเราไปตั้งเป็นรูปของตัวเอง</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #D32F2F;">ข้อที่ 2: "ม้าโทรจัน (Trojan)" เป็นมัลแวร์ที่อันตรายมาก เพราะอะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! ม้าโทรจัน จะใช้วิธีหลอกล่อว่าตัวมันเป็นโปรแกรมที่มีประโยชน์ (เช่น เกมฟรี โปรแกรมแต่งรูป) แต่พอเราโหลดมาติดตั้ง มันกลับแอบเปิดประตูหลังให้แฮกเกอร์เข้ามาขโมยข้อมูลครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. มันหลอกว่าเป็นโปรแกรมที่มีประโยชน์ เพื่อให้เราโหลดมาติดตั้งแล้วแอบขโมยข้อมูล</button>
                    <button onclick="checkAnswer(this, false, 'มัลแวร์ที่กระจายตัวผ่านเครือข่ายเองได้ เรียกว่า เวิร์ม (Worm) หรือหนอนคอมพิวเตอร์ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. มันสามารถคัดลอกตัวเองและแพร่กระจายผ่านสาย LAN ได้เองอย่างรวดเร็ว</button>
                    <button onclick="checkAnswer(this, false, 'การทายรหัสผ่าน ไม่ใช่ลักษณะของม้าโทรจันครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. มันจะสุ่มเดารหัสผ่านคอมพิวเตอร์ของเราไปเรื่อยๆ จนกว่าจะถูก</button>
                    <button onclick="checkAnswer(this, false, 'ไวรัสคอมพิวเตอร์ไม่สามารถทำให้เครื่องระเบิดได้ครับผม ^^')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. มันทำให้หน้าจอคอมพิวเตอร์ร้อนจัดจนเกิดการระเบิด</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 0; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #D32F2F;">ข้อที่ 3: ระบบ 2FA (Two-Factor Authentication) ช่วยเพิ่มความปลอดภัยให้บัญชีของเราอย่างไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'เราต้องจำรหัสผ่านเองให้ได้ครับ ระบบไม่เปลี่ยนให้เองนะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ช่วยเปลี่ยนรหัสผ่านให้เราใหม่ทุกๆ วัน</button>
                    <button onclick="checkAnswer(this, true, 'สุดยอดที่สุดครับ! ระบบ 2FA จะขอการยืนยันตัวตนชั้นที่ 2 (เช่น รหัส OTP ทาง SMS) หลังจากใส่รหัสผ่านถูกแล้ว ทำให้แฮกเกอร์ขโมยบัญชีเราไปไม่ได้ครับ!')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ช่วยเพิ่มด่านตรวจอีกชั้นหนึ่ง โดยต้องใช้รหัส OTP จากโทรศัพท์มือถือของเราด้วย</button>
                    <button onclick="checkAnswer(this, false, '2FA ช่วยป้องกันบัญชี ไม่ได้ป้องกันไวรัสในคอมพิวเตอร์ครับ อันนั้นต้องใช้โปรแกรม Antivirus')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ช่วยสแกนและลบไวรัสออกจากคอมพิวเตอร์ให้โดยอัตโนมัติ</button>
                    <button onclick="checkAnswer(this, false, '2FA ไม่ได้ช่วยให้เน็ตเร็วขึ้นครับผม')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ช่วยให้เราเชื่อมต่ออินเทอร์เน็ตได้เร็วขึ้นเป็น 2 เท่า</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

</div>
    </div>

</div>

buttons.forEach(b => {
        b.disabled = true;
        b.style.opacity = '0.6';
    });

feedback.style.display = 'block';
    feedback.style.padding = '12px';
    feedback.style.borderRadius = '8px';
    feedback.style.marginTop = '15px';

if(isCorrect) {
        btn.style.background = '#FFEBEE';
        btn.style.borderColor = '#D32F2F';
        btn.style.color = '#B71C1C';
        btn.style.opacity = '1';
        feedback.style.background = '#FFEBEE';
        feedback.style.color = '#B71C1C';
        feedback.innerHTML = "✅ ถูกต้องครับ! " + msg;
    } else {
        btn.style.background = '#FFF3E0';
        btn.style.borderColor = '#E65100';
        btn.style.color = '#BF360C';
        btn.style.opacity = '1';
        feedback.style.background = '#FFF3E0';
        feedback.style.color = '#BF360C';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>