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

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, #FF9800 0%, #F57C00 50%, #E65100 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #BF360C;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">📎 หน่วยที่ 3 EP.4: แนบไฟล์ & โซเชียล</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FFF3E0; font-weight: bold;">ส่งงานให้ครู รู้จักแอปสื่อสารยอดฮิต!</p>
    </div>

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

<h3 style="color: #E65100; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">📎 1. สัญลักษณ์ "คลิปหนีบกระดาษ"</h3>
        <p>ในหน้าจอเขียนอีเมล ให้สังเกตที่ด้านล่าง จะมีไอคอนรูป <strong>คลิปหนีบกระดาษ</strong> ซ่อนอยู่ครับ นั่นคือพระเอกของเราในวันนี้!</p>
        
        <div style="background: #FFF3E0; padding: 20px; border-radius: 12px; margin-top: 15px; border: 1px solid #FFE0B2;">
            <strong style="color: #E65100; font-size: 16px;">สเต็ปการแนบไฟล์ง่ายๆ:</strong>
            <ol style="margin-top: 10px; padding-left: 20px; color: #333; line-height: 1.8; font-size: 15px;">
                <li>พิมพ์อีเมลผู้รับ และหัวเรื่องให้เรียบร้อย</li>
                <li>คลิกที่ไอคอนรูป <span style="font-weight: bold; color: #555;">📎 (คลิปหนีบกระดาษ)</span></li>
                <li>หน้าต่างโฟลเดอร์ในคอมพิวเตอร์จะเด้งขึ้นมา ให้นักเรียน <strong>คลิกเลือกไฟล์งาน</strong> ที่ต้องการ (เช่น รูปภาพ หรือไฟล์ Word) แล้วกดปุ่ม <strong>Open (เปิด)</strong></li>
                <li>รอแถบสีน้ำเงินโหลดจนเต็ม (แปลว่าไฟล์เข้าไปอยู่ในจดหมายแล้ว) จากนั้นกดปุ่ม <strong>ส่ง (Send)</strong> ได้เลย!</li>
            </ol>
            <p style="margin: 10px 0 0 0; font-size: 14px; color: #D32F2F;"><em>⚠️ ข้อควรระวัง: เราไม่ควรส่งไฟล์ที่มีขนาดใหญ่เกินไป (เช่น ไฟล์วิดีโอยาวๆ) เพราะผู้ให้บริการอีเมลจะจำกัดขนาดไฟล์ไว้ครับ (เช่น Gmail จำกัดที่ 25 MB)</em></p>
        </div>

<h3 style="color: #E65100; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 40px;">📱 2. โลกของ "สื่อสังคมออนไลน์ (Social Media)"</h3>
        <p>นอกจากอีเมลแล้ว ปัจจุบันเรายังมีช่องทางติดต่อสื่อสารที่รวดเร็วและสนุกกว่าเดิม นั่นคือ <strong>สื่อสังคมออนไลน์</strong> ครับ มาทำความรู้จัก 3 แอปสุดฮิตกัน:</p>
        
        <div style="display: grid; grid-template-columns: 1fr; gap: 15px; margin-top: 15px;">
            <div style="background: #FAFAFA; padding: 15px; border-radius: 12px; border-left: 5px solid #1877F2; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; align-items: center;">
                <div style="font-size: 35px; margin-right: 15px; color: #1877F2;">📘</div>
                <div>
                    <strong style="color: #1565C0; font-size: 16px;">Facebook (เฟซบุ๊ก)</strong>
                    <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">แอปสำหรับโพสต์ข้อความ รูปภาพ วิดีโอ และสร้างกลุ่มเพื่อแลกเปลี่ยนความคิดเห็นกัน (ต้องใช้อีเมลในการสมัครด้วยนะ)</p>
                </div>
            </div>
            
            <div style="background: #FAFAFA; padding: 15px; border-radius: 12px; border-left: 5px solid #00C300; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; align-items: center;">
                <div style="font-size: 35px; margin-right: 15px; color: #00C300;">💬</div>
                <div>
                    <strong style="color: #2E7D32; font-size: 16px;">LINE (ไลน์)</strong>
                    <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">แอปแชตยอดฮิตในไทย! เน้นการส่งข้อความสั้นๆ ส่งสติกเกอร์น่ารักๆ รวมถึงการโทรด้วยเสียงหรือวิดีโอคอลหากันฟรีๆ</p>
                </div>
            </div>

<div style="background: #FAFAFA; padding: 15px; border-radius: 12px; border-left: 5px solid #E1306C; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; align-items: center;">
                <div style="font-size: 35px; margin-right: 15px; color: #E1306C;">📸</div>
                <div>
                    <strong style="color: #C2185B; font-size: 16px;">Instagram (อินสตาแกรม)</strong>
                    <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">แอปสำหรับคนรักการถ่ายภาพ! เน้นการแชร์รูปภาพสวยๆ และวิดีโอสั้นๆ (Story) พร้อมฟิลเตอร์แต่งรูปมากมาย</p>
                </div>
            </div>
        </div>

<h3 style="color: #E65100; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 40px;">🛡️ 3. เล่นโซเชียลอย่างไรให้ปลอดภัย?</h3>
        <p>ถึงแอปเหล่านี้จะสนุก แต่ก็มีคนแปลกหน้าอยู่เยอะครับ กฎเหล็กที่นักเรียนต้องจำไว้คือ <strong>"ห้ามเปิดเผยข้อมูลส่วนตัว"</strong> (เช่น เบอร์โทร, รหัสผ่าน, ที่อยู่บ้าน, เลขบัตรประชาชน) ลงบนโซเชียลเด็ดขาด และอย่าแชตกับคนที่ไม่รู้จักนะครับ!</p>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #F57C00 0%, #BF360C 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ ทบทวนความรู้ EP.4</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #FFF3E0;">ทดสอบความเข้าใจเรื่องการแนบไฟล์และโซเชียล!</p>
        </div>
        
        <div style="border: 2px solid #BF360C; 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: #E65100;">ข้อที่ 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, 'ถูกต้องครับ! สัญลักษณ์รูป คลิปหนีบกระดาษ (Attachment) มีไว้สำหรับการแนบไฟล์ต่างๆ เช่น รูปภาพ เอกสาร หรือวิดีโอ ไปพร้อมกับอีเมลครับ')" 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: #E65100;">ข้อที่ 2: แอปพลิเคชันใด ที่มีจุดเด่นในการเน้นส่งข้อความสั้นๆ โทรหากันได้ฟรี และมีสติกเกอร์น่ารักๆ ให้ส่งหากัน?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Google Chrome คือโปรแกรมสำหรับเปิดเว็บไซต์ (เว็บเบราว์เซอร์) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. Google Chrome</button>
                    <button onclick="checkAnswer(this, false, 'Facebook เน้นการโพสต์ข้อความยาวๆ รูปภาพ และสร้างกลุ่มครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. Facebook (เฟซบุ๊ก)</button>
                    <button onclick="checkAnswer(this, false, 'Instagram เน้นการลงรูปถ่ายสวยๆ และวิดีโอสั้นๆ ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. Instagram (อินสตาแกรม)</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! LINE คือแอปแชตยอดฮิตที่มีจุดเด่นเรื่องการส่งสติกเกอร์น่ารักๆ และสามารถโทรหากันผ่านอินเทอร์เน็ตได้ฟรีครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. LINE (ไลน์)</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: #E65100;">ข้อที่ 3: ข้อมูลใดต่อไปนี้ ที่นักเรียน <span style="text-decoration: underline;">ไม่ควร</span> นำไปโพสต์ลงในสื่อสังคมออนไลน์ (Social Media) อย่างเด็ดขาด?</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;">ก. รหัสผ่าน (Password) ของอีเมล หรือรหัสผ่านเกมออนไลน์</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, 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 = '#FFF3E0';
        btn.style.borderColor = '#FF9800';
        btn.style.color = '#E65100';
        btn.style.opacity = '1';
        feedback.style.background = '#FFF3E0';
        feedback.style.color = '#E65100';
        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>