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

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 15px rgba(0,0,0,0.08);">
    
    <div style="background: linear-gradient(135deg, #4A148C 0%, #AD1457 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #FFC107;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #FFEB3B;">🛡️ หน่วยที่ 6: ข้อมูลส่วนตัวปลอดภัย ไม่ละเมิดลิขสิทธิ์</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FFFFFF; font-weight: bold;">EP.2 เอาตัวรอดในโลกออนไลน์: ใช้เน็ตสาธารณะให้ปลอดภัย!</p>
    </div>

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

<h3 style="color: #4A148C; border-left: 5px solid #E91E63; padding-left: 15px; font-size: 22px; margin-top: 30px;">🚪 1. กฎเหล็ก: ใช้เสร็จต้อง Log out เสมอ!</h3>
        <p>การกดเครื่องหมายกากบาท (X) ปิดหน้าต่างโปรแกรม ไม่ได้แปลว่าเราออกจากระบบแล้ว! เมื่อเราล็อกอินเข้าสู่ระบบใดๆ (เช่น Facebook, Gmail) ในเครื่องสาธารณะ <strong>ต้องกดปุ่ม Log out (ลงชื่อออก) ทุกครั้ง</strong> ก่อนลุกจากที่นั่ง เพื่อป้องกันไม่ให้คนต่อไปที่มาใช้เครื่องสามารถสวมรอยเป็นเราได้</p>

<h3 style="color: #4A148C; border-left: 5px solid #E91E63; padding-left: 15px; font-size: 22px; margin-top: 35px;">🧹 2. กวาดล้าง "ร่องรอยดิจิทัล" (Digital Footprint)</h3>
        <p>เมื่อเราเข้าเว็บไซต์ บราวเซอร์ (เช่น Chrome) จะแอบจำข้อมูลของเราไว้เพื่อความสะดวกในครั้งต่อไป เราเรียกข้อมูลพวกนี้ว่า <strong>Cookies (คุกกี้)</strong> และ <strong>History (ประวัติการเข้าชม)</strong> หากใช้เครื่องส่วนรวม เราต้องเข้าไปกด <code>Clear browsing data</code> (ล้างข้อมูลการท่องเว็บ) เสมอครับ</p>
        
        <div style="background: #FCE4EC; padding: 20px; border-radius: 10px; border-left: 5px solid #C2185B; margin-bottom: 20px;">
            <strong style="color: #880E4F; font-size: 18px;">❌ สิ่งที่ห้ามทำเด็ดขาด!</strong>
            <ul style="margin: 10px 0 0 0; padding-left: 20px; line-height: 1.8; font-size: 16px; color: #4A148C;">
                <li>อย่ากดปุ่ม <strong>"Save Password (บันทึกรหัสผ่าน)"</strong> เมื่อใช้คอมพิวเตอร์สาธารณะ</li>
                <li>หลีกเลี่ยงการทำธุรกรรมทางการเงิน (เช่น โอนเงิน) เมื่อเชื่อมต่อ <strong>Wi-Fi สาธารณะฟรี</strong> เพราะแฮกเกอร์อาจดักจับข้อมูลกลางทางได้</li>
            </ul>
        </div>

<h3 style="color: #4A148C; border-left: 5px solid #E91E63; padding-left: 15px; font-size: 22px; margin-top: 35px;">📜 3. อย่าเพิ่งกด "I Agree" ถ้ายังไม่ได้อ่าน!</h3>
        <p>เวลาเราจะติดตั้งแอปพลิเคชันหรือสมัครเกมใหม่ มักจะมีหน้าต่างเงื่อนไขยาวๆ (Terms of Service) เด้งขึ้นมา หลายคนเลือกที่จะกด <strong>"I Agree (ฉันยอมรับ)"</strong> ไปเลยโดยไม่อ่าน!</p>
        <p><em>💡 รู้หรือไม่? การกดยอมรับนั้น อาจหมายความว่าเรากำลัง <strong>อนุญาตให้แอปพลิเคชันเข้าถึงรายชื่อผู้ติดต่อ รูปภาพ หรือตำแหน่งที่ตั้ง (Location)</strong> ของเรา ซึ่งหากเป็นแอปที่ไม่น่าเชื่อถือ ข้อมูลเหล่านี้อาจถูกนำไปขายหรือใช้ในทางที่ผิดได้ครับ!</em></p>
        
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #880E4F; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFC107;">✍️ มินิควิซ ทบทวนความรู้ (EP.2)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #F8BBD0;">มาทดสอบสัญชาตญาณการเอาตัวรอดในโลกไซเบอร์กันเถอะ!</p>
        </div>
        
        <div style="border: 2px solid #880E4F; 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: #4A148C;">ข้อที่ 1: ทำไมเราจึงต้องกดปุ่ม Log out (ลงชื่อออก) จากอีเมลหรือโซเชียลมีเดียทุกครั้งหลังใช้งานคอมพิวเตอร์ของโรงเรียน?</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, 'ถูกต้อง! การลงชื่อออกจะปิดการเชื่อมต่อบัญชีของเรา ทำให้คนที่มาใช้เครื่องต่อไม่สามารถเข้ามาสวมรอยหรือขโมยข้อมูลได้')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เพื่อป้องกันไม่ให้บุคคลอื่นเข้าถึงบัญชีและสวมรอยเป็นตัวเรา</button>
                    <button onclick="checkAnswer(this, false, 'ไวรัสป้องกันไม่ได้ด้วยการ Log out จ้า ต้องใช้แอนตี้ไวรัส')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เพื่อป้องกันไม่ให้ไวรัสคอมพิวเตอร์เข้าสู่บัญชีของเรา</button>
                    <button onclick="checkAnswer(this, false, 'การ Log out ไม่ได้ลบแอปน้า แค่บอกระบบว่าเราเลิกใช้งานแล้ว')" 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: #4A148C;">ข้อที่ 2: สิ่งใดต่อไปนี้เปรียบเสมือน "ร่องรอยดิจิทัล" ที่เราทิ้งไว้เมื่อเข้าชมเว็บไซต์ต่างๆ ซึ่งควรลบทิ้งเมื่อใช้เครื่องสาธารณะ?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Mouse และ Keyboard เป็นฮาร์ดแวร์จับต้องได้จ้า ไม่ใช่ร่องรอยในโปรแกรม')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เมาส์ (Mouse) และ คีย์บอร์ด (Keyboard)</button>
                    <button onclick="checkAnswer(this, false, 'ไอคอนคือรูปภาพสัญลักษณ์บนหน้าจอจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ไอคอน (Icon) บนหน้าจอ Desktop</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมาก! ประวัติการเข้าชมและคุกกี้ จะจดจำว่าเราไปเว็บไหนมาบ้าง หรือจำรหัสผ่านบางส่วนไว้ เราจึงควรลบออกเสมอ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ประวัติการเข้าชม (History) และ คุกกี้ (Cookies)</button>
                    <button onclick="checkAnswer(this, false, 'โปรแกรมแอนตี้ไวรัสเอาไว้ป้องกันไวรัสจ้า ไม่ใช่สิ่งที่ต้องลบ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. โปรแกรมแอนตี้ไวรัส (Anti-Virus)</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: #4A148C;">ข้อที่ 3: เมื่อต้องเชื่อมต่อ Wi-Fi สาธารณะฟรี (เช่น ในร้านกาแฟ) เพื่อความปลอดภัยสูงสุด นักเรียน <strong>ไม่ควร</strong> ทำกิจกรรมใด?</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, false, 'ดูวิดีโอได้จ้า ไม่ได้ส่งข้อมูลสำคัญอะไร')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ดูวิดีโอตลกๆ บน YouTube</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, true, 'ถูกต้องที่สุด! Wi-Fi ฟรีอาจถูกแฮกเกอร์เจาะระบบเพื่อดักจับข้อมูลรหัสผ่านและข้อมูลทางการเงินของเราได้ จึงควรใช้ 4G/5G ส่วนตัวดีกว่า')" 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: #4A148C;">ข้อที่ 4: ก่อนจะติดตั้งแอปพลิเคชันใหม่ๆ ที่มีข้อความเงื่อนไขยาวๆ ให้อ่านและมีปุ่ม "I Agree (ฉันยอมรับ)" นักเรียนควรทำอย่างไร?</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, 'เยี่ยมมาก! เราควรอ่านให้แน่ใจว่าแอปนั้นไม่ได้ขอสิทธิ์เข้าถึงข้อมูลส่วนตัวเกินความจำเป็น เช่น แอปไฟฉายแต่ขอเข้าถึงรายชื่อเบอร์โทร')" 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>
                    <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>
    </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 = '#FCE4EC';
        btn.style.borderColor = '#C2185B';
        btn.style.color = '#880E4F';
        btn.style.opacity = '1';
        feedback.style.background = '#FCE4EC';
        feedback.style.color = '#880E4F';
        feedback.innerHTML = "✅ ถูกต้องครับ! " + msg;
    } else {
        btn.style.background = '#FFEBEE';
        btn.style.borderColor = '#C62828';
        btn.style.color = '#B71C1C';
        btn.style.opacity = '1';
        feedback.style.background = '#FFEBEE';
        feedback.style.color = '#B71C1C';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>
<div style="background-color: #f8f9fa; border: 1px solid #e9ecef; border-left: 5px solid #0d6efd; padding: 20px; margin-top: 50px; margin-bottom: 20px; border-radius: 8px; font-family: 'Sarabun', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
    <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <span style="font-size: 1.5em; margin-right: 10px;">💡</span>
        <strong style="color: #0d6efd; font-size: 1.2em;">พบข้อผิดพลาดหรือมีข้อเสนอแนะ?</strong>
    </div>
    <p style="color: #495057; font-size: 1em; margin-bottom: 15px; line-height: 1.6;">
        หากนักเรียนหรือคุณครูพบจุดที่ควรแก้ไขในบทเรียน/แบบทดสอบนี้ หรือมีข้อเสนอแนะเพิ่มเติม สามารถแจ้งครูพิสิฐเพื่อนำไปปรับปรุงเนื้อหาให้สมบูรณ์ยิ่งขึ้นได้เลยครับ <br>
        <span style="font-size: 0.9em; color: #6c757d;">(ขอบคุณที่ร่วมเป็นส่วนหนึ่งในการพัฒนาการเรียนรู้ไปด้วยกันครับ)</span>
    </p>
    <a href="mailto:tpisit@wsst.ac.th?subject=แจ้งข้อเสนอแนะ/ข้อผิดพลาด บทเรียน SmartyQuizKids" style="display: inline-block; background-color: #0d6efd; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-size: 1em; font-weight: bold;">
        ✉️ ส่งอีเมลแจ้งครูพิสิฐ
    </a>
</div>