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

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, #00897B 0%, #009688 50%, #26A69A 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #004D40;">
        <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.2: มารยาทชาวเน็ต</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #E0F2F1; font-weight: bold;">ท่อง 5 กฎเหล็ก เป็นเด็กดีบนโลกไซเบอร์!</p>
    </div>

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

<h3 style="color: #00796B; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">📜 5 กฎเหล็กไซเบอร์ที่ต้องจำให้ขึ้นใจ</h3>
        
        <div style="display: flex; flex-direction: column; gap: 15px; margin-top: 15px;">
            <div style="background: #FAFAFA; padding: 15px; border-radius: 12px; border-left: 5px solid #2196F3; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #1565C0; font-size: 16px;">💬 1. สื่อสารด้วยความสุภาพ</strong>
                <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">ไม่ใช้คำหยาบคาย ไม่พิมพ์ด่าทอ หรือล้อเลียนปมด้อยให้เพื่อนเสียใจ (Cyberbullying)</p>
            </div>
            
            <div style="background: #FAFAFA; padding: 15px; border-radius: 12px; border-left: 5px solid #FF9800; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #E65100; font-size: 16px;">🚫 2. ไม่สร้างความเดือดร้อนรำคาญ</strong>
                <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">ไม่ส่งข้อความขยะ (Spam) ไม่ส่งจดหมายลูกโซ่ และไม่กดส่งคำเชิญเล่นเกมไปกวนเพื่อนบ่อยๆ ครับ</p>
            </div>

<div style="background: #FAFAFA; padding: 15px; border-radius: 12px; border-left: 5px solid #F44336; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #C62828; font-size: 16px;">🤫 3. ไม่ส่งต่อความลับของผู้อื่น</strong>
                <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">ข้อมูลส่วนตัวของเพื่อน เช่น เบอร์โทรศัพท์ ที่อยู่ หรือรูปภาพน่าอาย ห้ามนำไปแชร์ต่อเด็ดขาด!</p>
            </div>

<div style="background: #FAFAFA; padding: 15px; border-radius: 12px; border-left: 5px solid #9C27B0; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #7B1FA2; font-size: 16px;">🕵️ 4. ไม่แอบดูข้อมูลของคนอื่น</strong>
                <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">การแอบเปิดดูแชทในมือถือ หรือแอบเปิดไฟล์งานของเพื่อนโดยไม่ได้รับอนุญาต ถือเป็นการเสียมารยาทอย่างรุนแรงครับ</p>
            </div>

<div style="background: #FAFAFA; padding: 15px; border-radius: 12px; border-left: 5px solid #4CAF50; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #2E7D32; font-size: 16px;">🔒 5. ไม่สวมรอย & ต้อง Log out เสมอ</strong>
                <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">ห้ามนำบัญชีของคนอื่นมาใช้ และเมื่อเราใช้คอมพิวเตอร์ของโรงเรียนเสร็จแล้ว <strong>ต้องกดออกจากระบบ (Log out) ทุกครั้ง</strong> ป้องกันคนอื่นมาแกล้งโพสต์ข้อความสวมรอยเป็นเราครับ</p>
            </div>
        </div>

<h3 style="color: #00796B; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 40px;">⚖️ ลองคิดดูสิ: สิ่งใดควรทำ สิ่งใดไม่ควรทำ?</h3>
        
        <div style="background: #E8F5E9; padding: 20px; border-radius: 12px; border: 1px solid #A5D6A7; margin-top: 15px;">
            <p style="margin: 0 0 10px 0; font-size: 16px; color: #1B5E20;"><strong>สถานการณ์ A:</strong> เพื่อนลืม Log out ออกจากระบบเฟซบุ๊กที่เครื่องคอมพิวเตอร์ในห้องสมุด เราจึงกดออกจากระบบแทนเพื่อนให้</p>
            <p style="margin: 0; font-size: 15px; color: #2E7D32;">✅ <strong>ควรทำ:</strong> เพราะเป็นการช่วยปกป้องข้อมูลของเพื่อนไม่ให้คนอื่นมาแอบใช้ครับ ถือเป็นฮีโร่ไซเบอร์เลย!</p>
        </div>

<div style="background: #FFEBEE; padding: 20px; border-radius: 12px; border: 1px solid #EF9A9A; margin-top: 15px;">
            <p style="margin: 0 0 10px 0; font-size: 16px; color: #B71C1C;"><strong>สถานการณ์ B:</strong> รวบรวมรหัสผ่านของเพื่อนทุกคน แล้วจดใส่กระดาษแปะไว้หน้าห้อง เผื่อเพื่อนลืมจะได้มาดู</p>
            <p style="margin: 0; font-size: 15px; color: #C62828;">❌ <strong>ไม่ควรทำ:</strong> หวังดีแต่ผิดวิธีครับ! รหัสผ่าน (Password) คือความลับสุดยอด ห้ามจดรวมกันและห้ามให้คนอื่นเห็นเด็ดขาดครับ</p>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #009688 0%, #004D40 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ ทบทวนความรู้ EP.2</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #E0F2F1;">ทดสอบวิชามารยาทชาวเน็ต!</p>
        </div>
        
        <div style="border: 2px solid #004D40; 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: #00796B;">ข้อที่ 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, true, 'ถูกต้องครับ! การส่งคำเชิญเล่นเกม หรือส่งจดหมายลูกโซ่ซ้ำๆ ไปหาคนอื่นบ่อยๆ ถือเป็นการสร้างความรำคาญ (Spam) ซึ่งผิดมารยาทชาวเน็ตครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ส่งคำเชิญชวนให้เล่นเกมไปหาเพื่อนๆ ทุกคนในห้อง วันละ 10 ครั้ง</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: 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: #00796B;">ข้อที่ 2: หากนักเรียนเห็นเพื่อนแอบเปิดดูกระเป๋าและอ่านสมุดจดรหัสผ่านของคนอื่น นักเรียนควรทำอย่างไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'ไม่ได้เด็ดขาดครับ! การทำแบบนี้คือการร่วมกันละเมิดสิทธิผู้อื่นและทำผิดกฎเหล็กข้อ 4 ครับ')" 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 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: #00796B;">ข้อที่ 3: ข้อใดคือเหตุผลสำคัญที่สุด ที่เราต้อง "ล็อกเอาต์ (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, false, 'คอมพิวเตอร์จะไม่ทำงานเร็วขึ้นเพียงเพราะเราล็อกเอาต์ครับผม')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เพื่อให้คอมพิวเตอร์เครื่องนั้นสามารถทำงานได้เร็วขึ้น</button>
                    <button onclick="checkAnswer(this, true, 'ยอดเยี่ยมที่สุดครับ! ถ้าเราลืม 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, 'ไวรัสป้องกันได้ด้วยโปรแกรมสแกนไวรัส และการไม่เข้าเว็บเสี่ยงครับ')" 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 = '#E0F2F1';
        btn.style.borderColor = '#009688';
        btn.style.color = '#004D40';
        btn.style.opacity = '1';
        feedback.style.background = '#E0F2F1';
        feedback.style.color = '#004D40';
        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>