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

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, #00838F 0%, #00ACC1 50%, #4DD0E1 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #006064;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">⚖️ หน่วยที่ 5 EP.1: ดาบสองคมของโลกดิจิทัล</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #E0F7FA; font-weight: bold;">รู้ทันประโยชน์และผลกระทบของเทคโนโลยี!</p>
    </div>

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

<h3 style="color: #00838F; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🌟 1. ด้านดี: ประโยชน์ของเทคโนโลยี</h3>
        <p>เทคโนโลยีถูกสร้างขึ้นมาเพื่อตอบสนองความต้องการของมนุษย์ ทำให้เราทำงานได้ <strong>"สะดวกและรวดเร็วขึ้น"</strong> เช่น:</p>
        
        <div style="background: #E0F7FA; padding: 15px; border-radius: 12px; border: 1px solid #B2EBF2; margin-top: 15px;">
            <ul style="margin-top: 0; padding-left: 20px; color: #006064; margin-bottom: 0; line-height: 1.8; font-size: 15px;">
                <li>ใช้ค้นหาข้อมูลทำรายงานได้อย่างรวดเร็ว โดยไม่ต้องเดินทางไปห้องสมุด</li>
                <li>ใช้ติดต่อสื่อสาร พูดคุยแบบเห็นหน้า (Video Call) กับเพื่อนที่อยู่ไกลกันได้</li>
                <li>ใช้ถ่ายภาพและแบ่งปันเรื่องราวดีๆ ให้คนอื่นดูได้ทันที</li>
            </ul>
        </div>

<h3 style="color: #00838F; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">⚠️ 2. ด้านร้าย: ผลกระทบจากการใช้งานที่ไม่เหมาะสม</h3>
        <p>ถึงจะเก่งแค่ไหน แต่ถ้าเราใช้งาน <em>"มากเกินไป"</em> หรือ <em>"ใช้ผิดวิธี"</em> ก็จะเกิดผลกระทบหลักๆ 3 ด้าน ดังนี้ครับ:</p>
        
        <div style="display: flex; flex-direction: column; gap: 15px; margin-top: 15px;">
            <div style="background: #FAFAFA; padding: 15px; border-radius: 8px; border-left: 5px solid #FF9800; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #E65100; font-size: 18px;">📚 ผลกระทบด้านการเรียน</strong><br>
                <span style="font-size: 15px;">ถ้าเราเล่นเกมหรือดูคลิปจนไม่ยอมแบ่งเวลา จะทำให้เราลืมทำการบ้าน และเรียนไม่รู้เรื่อง นอกจากนี้ข้อมูลบนเน็ตบางอย่างอาจเป็น <strong>"ข้อมูลปลอม"</strong> ถ้าเราเชื่อทันทีโดยไม่ตรวจสอบ ก็อาจจะได้ความรู้ที่ผิดๆ ไปครับ</span>
            </div>
            
            <div style="background: #FAFAFA; padding: 15px; border-radius: 8px; border-left: 5px solid #E91E63; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #C2185B; font-size: 18px;">👀 ผลกระทบด้านสุขภาพ</strong><br>
                <span style="font-size: 15px;">การจ้องหน้าจอคอมพิวเตอร์หรือสมาร์ตโฟนเป็นเวลานานๆ จะทำให้เรา <strong>"ปวดตา หรือ สายตาสั้น"</strong> และการนั่งผิดท่าเป็นเวลานานก็จะทำให้ปวดหลังปวดคอได้ครับ (ต้องพักสายตาบ่อยๆ นะ!)</span>
            </div>

<div style="background: #FAFAFA; padding: 15px; border-radius: 8px; border-left: 5px solid #9C27B0; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #7B1FA2; font-size: 18px;">🕵️ ผลกระทบด้านสังคม</strong><br>
                <span style="font-size: 15px;">การที่เราคุยกับคนอื่นผ่านเน็ตได้ง่ายๆ ทำให้มีคนไม่หวังดี หรือที่เรียกว่า <strong>"มิจฉาชีพ"</strong> แฝงตัวเข้ามาหลอกลวง ขโมยข้อมูลส่วนตัว หรือหลอกให้เราโอนเงินให้ได้ครับ</span>
            </div>
        </div>

<h3 style="color: #00838F; border-left: 5px solid #4CAF50; padding-left: 15px; font-size: 22px; margin-top: 35px;">🛡️ 3. คาถาป้องกันตัวเบื้องต้น!</h3>
        
        <div style="background: #E8F5E9; padding: 15px; border-radius: 8px; margin-top: 15px; font-size: 16px; color: #1B5E20; border: 1px dashed #4CAF50; text-align: center; font-weight: bold;">
            <p style="margin: 0;">หากมี "คนแปลกหน้า" ทักมาคุยด้วยในอินเทอร์เน็ต หรือมีข้อความแปลกๆ ส่งมาขอดูรูป หรือขอข้อมูลส่วนตัว...<br> <span style="color: #D32F2F; font-size: 18px;">ห้ามคุยต่อเด็ดขาด! และต้องรีบนำเรื่องนี้ไปบอก "ผู้ปกครอง หรือ คุณครู" ทันทีนะครับ!</span></p>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #0097A6 0%, #006064 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ ทบทวนความรู้ EP.1</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #E0F7FA;">มาทดสอบการเป็นพลเมืองดิจิทัลที่รู้เท่าทันกันเถอะ!</p>
        </div>
        
        <div style="border: 2px solid #006064; 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: #00838F;">ข้อที่ 1: พฤติกรรมใดต่อไปนี้ ส่งผลกระทบต่อ "ด้านสุขภาพ" จากการใช้เทคโนโลยีมากที่สุด?</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;">ข. การพูดคุยและส่งรูปภาพส่วนตัวให้กับคนแปลกหน้า</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! การจ้องหน้าจอนานๆ โดยไม่พักสายตา จะทำให้เกิดอาการปวดตา อ่อนล้า และอาจทำให้สายตาสั้นได้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. การจ้องหน้าจอแท็บเล็ตเพื่อเล่นเกมติดต่อกันเป็นเวลา 5 ชั่วโมง</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: #00838F;">ข้อที่ 2: "มิจฉาชีพ" ในโลกอินเทอร์เน็ต มักจะใช้ช่องทางใดในการเข้ามาหลอกลวงนักเรียน?</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;">ก. ผ่านโปรแกรมวาดภาพ Paint</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! มิจฉาชีพมักจะใช้ช่องทางการสื่อสารทางสังคม (Social Media) เช่น แชทในเกม ไลน์ หรือเฟซบุ๊ก ปลอมตัวมาตีสนิทและหลอกลวงเราครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ผ่านช่องทางการติดต่อสื่อสารและแชทพูดคุยบนอินเทอร์เน็ต</button>
                    <button onclick="checkAnswer(this, false, 'ตารางคำนวณ Excel ไม่ใช่ช่องทางที่มิจฉาชีพใช้ติดต่อเราโดยตรงครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ผ่านโปรแกรมสร้างตารางคำนวณ Excel</button>
                    <button onclick="checkAnswer(this, false, 'สายแลนเป็นแค่อุปกรณ์เชื่อมต่ออินเทอร์เน็ตครับ มิจฉาชีพไม่ได้มุดออกมาจากสายไฟนะ ^^')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ผ่านการดึงสายแลน (LAN) ออกจากคอมพิวเตอร์</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: #00838F;">ข้อที่ 3: ถ้านักเรียนกำลังเล่นเกมออนไลน์ แล้วมี "คนแปลกหน้า" ทักแชทมาขอทราบ "ชื่อโรงเรียนและที่อยู่บ้าน" นักเรียนควรทำอย่างไร?</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;">ข. แต่งเรื่องโกหกบอกที่อยู่ปลอมๆ ไปเพื่อให้เขาสบายใจ</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, 'ยอดเยี่ยมที่สุดครับ! นี่คือวิธีที่ปลอดภัยที่สุด ห้ามคุยต่อ และต้องรีบนำเรื่องนี้ไปบอกผู้ใหญ่ให้ช่วยจัดการทันทีครับ')" 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 = '#E0F7FA';
        btn.style.borderColor = '#00ACC1';
        btn.style.color = '#006064';
        btn.style.opacity = '1';
        feedback.style.background = '#E0F7FA';
        feedback.style.color = '#006064';
        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>