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

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, #42A5F5 0%, #1E88E5 50%, #1565C0 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #0D47A1;">
        <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.1: ตะลุยโลกอินเทอร์เน็ต</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #E3F2FD; font-weight: bold;">เชื่อมต่อเครือข่าย เปิดประตูสู่เว็บเบราว์เซอร์!</p>
    </div>

<div style="margin-bottom: 40px;">
        
        <p style="font-size: 18px;">สมัยก่อนคอมพิวเตอร์จะทำงานได้แค่เครื่องใครเครื่องมันครับ แต่เดี๋ยวนี้คอมพิวเตอร์สามารถ "คุยกัน" ได้ทั่วโลกผ่านสิ่งที่เรียกว่า <strong>เครือข่ายอินเทอร์เน็ต (Internet)</strong> ซึ่งมาจากคำว่า <em>Interconnected</em> (การเชื่อมต่อระหว่างกัน) + <em>Network</em> (เครือข่าย) ครับ!</p>

<h3 style="color: #1E88E5; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🔌 1. เราเชื่อมต่ออินเทอร์เน็ตได้อย่างไร?</h3>
        <p>การจะเอาคอมพิวเตอร์หรือมือถือของเราไปต่อกับโลกอินเทอร์เน็ต ทำได้ 2 วิธีหลักๆ ครับ:</p>
        
        <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 #4CAF50; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; align-items: center;">
                <div style="font-size: 35px; margin-right: 15px;">🔌</div>
                <div>
                    <strong style="color: #2E7D32; font-size: 16px;">เชื่อมต่อแบบมีสาย (Wired)</strong>
                    <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">ใช้ <strong>สาย LAN</strong> เสียบเข้ากับคอมพิวเตอร์ ข้อดีคือรับส่งข้อมูลได้ <em>เร็วและเสถียรมากๆ</em> ไม่ค่อยหลุดครับ</p>
                </div>
            </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); display: flex; align-items: center;">
                <div style="font-size: 35px; margin-right: 15px;">📶</div>
                <div>
                    <strong style="color: #E65100; font-size: 16px;">เชื่อมต่อแบบไร้สาย (Wireless)</strong>
                    <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">ใช้สัญญาณ <strong>Wi-Fi</strong> หรือ <strong>เครือข่ายมือถือ (4G/5G)</strong> ข้อดีคือ <em>สะดวกสบาย</em> เดินถือไปเล่นที่ไหนก็ได้ครับ</p>
                </div>
            </div>
        </div>

<h3 style="color: #1E88E5; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 40px;">🌟 2. ประโยชน์ 7 ด้านของอินเทอร์เน็ต</h3>
        <p>พอเราต่อเน็ตได้แล้ว เราสามารถทำอะไรได้บ้าง? มาดูกันเลย:</p>
        
        <div style="background: #E3F2FD; padding: 20px; border-radius: 12px; margin-top: 15px; border: 1px solid #90CAF9;">
            <ul style="margin: 0; padding-left: 20px; color: #1565C0; font-weight: bold; line-height: 1.8; font-size: 15px;">
                <li><span style="color: #333; font-weight: normal;">🔍 1. ค้นคว้าข้อมูลทำการบ้านได้รวดเร็ว</span></li>
                <li><span style="color: #333; font-weight: normal;">🎓 2. เป็นแหล่งเรียนรู้ออนไลน์ (เช่น ดูวิดีโอสอนหนังสือ)</span></li>
                <li><span style="color: #333; font-weight: normal;">💬 3. ติดต่อสื่อสาร พิมพ์แชต หรือวิดีโอคอลหาเพื่อน</span></li>
                <li><span style="color: #333; font-weight: normal;">📢 4. เผยแพร่ผลงานของตัวเอง (เช่น โพสต์รูปวาด)</span></li>
                <li><span style="color: #333; font-weight: normal;">🎮 5. เป็นแหล่งบันเทิง ฟังเพลง ดูหนัง เล่นเกม</span></li>
                <li><span style="color: #333; font-weight: normal;">🛒 6. สั่งซื้อสินค้าออนไลน์ ส่งตรงถึงหน้าบ้าน</span></li>
                <li><span style="color: #333; font-weight: normal;">🤝 7. แลกเปลี่ยนความรู้ในกระดานสนทนากับคนอื่น</span></li>
            </ul>
        </div>

<h3 style="color: #1E88E5; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 40px;">🧭 3. ยานพาหนะท่องเว็บ: "เว็บเบราว์เซอร์"</h3>
        <p>เราไม่สามารถเปิดอินเทอร์เน็ตขึ้นมาลอยๆ ได้ เราต้องใช้โปรแกรมที่เรียกว่า <strong>"เว็บเบราว์เซอร์ (Web Browser)"</strong> เป็นเหมือนรถยนต์พาเราไปตามเว็บไซต์ต่างๆ ครับ โปรแกรมที่ฮิตๆ เช่น <strong>Google Chrome, Microsoft Edge, Safari</strong></p>

<div style="background: #FFF8E1; padding: 20px; border-radius: 12px; border: 1px dashed #FFC107; margin-top: 15px; text-align: center;">
            <strong style="color: #E65100; font-size: 18px;">💡 สเต็ปการเปิดเว็บไซต์ง่ายๆ:</strong>
            <p style="margin: 10px 0 0 0; font-size: 15px; color: #555; text-align: left;">
                1. ดับเบิลคลิกที่ไอคอนโปรแกรมเบราว์เซอร์ (เช่น Google Chrome)<br>
                2. นำเมาส์ไปคลิกที่ <strong>"แถบที่อยู่ (Address bar)"</strong> ด้านบนสุดของจอ<br>
                3. พิมพ์ชื่อเว็บไซต์ลงไป เช่น <strong>www.google.co.th</strong> แล้วกดปุ่ม <strong>Enter</strong> บนคีย์บอร์ด<br>
                4. รอแป๊บเดียว! หน้าเว็บไซต์ก็จะโหลดขึ้นมาให้เราใช้งานแล้วครับ
            </p>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #1E88E5 0%, #0D47A1 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: #BBDEFB;">ทดสอบความพร้อมก่อนออกท่องเน็ต!</p>
        </div>
        
        <div style="border: 2px solid #0D47A1; 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: #1565C0;">ข้อที่ 1: "อินเทอร์เน็ต (Internet)" มีความหมายตรงกับข้อใดมากที่สุด?</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, 'สายไฟคืออุปกรณ์เชื่อมต่อครับ แต่มันยังมีแบบไร้สาย (Wi-Fi) ด้วยนะ')" 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: #1565C0;">ข้อที่ 2: โปรแกรมในข้อใด ทำหน้าที่เป็น "เว็บเบราว์เซอร์ (Web Browser)" สำหรับเปิดเข้าเว็บไซต์?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Microsoft Word เอาไว้พิมพ์รายงานและเอกสารครับผม')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. Microsoft Word</button>
                    <button onclick="checkAnswer(this, false, 'Adobe Photoshop เอาไว้ตัดต่อและตกแต่งรูปภาพครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. Adobe Photoshop</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! 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, 'Scratch เป็นโปรแกรมสำหรับฝึกเขียนโค้ดและสร้างแอนิเมชันครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. Scratch</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: #1565C0;">ข้อที่ 3: เมื่อเราเปิดโปรแกรมเว็บเบราว์เซอร์ขึ้นมาแล้ว เราต้องพิมพ์ชื่อเว็บไซต์ลงในตำแหน่งใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'สุดยอดครับ! เราต้องคลิกที่ แถบที่อยู่ (Address bar) ที่อยู่ด้านบนสุดของโปรแกรม แล้วพิมพ์ชื่อเว็บ (เช่น www.google.com) ลงไปครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. พิมพ์ลงใน "แถบที่อยู่ (Address bar)" ด้านบนสุดของโปรแกรม</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;">ค. พิมพ์ลงในปุ่มกากบาท (X) สีแดงมุมขวาบน</button>
                    <button onclick="checkAnswer(this, false, 'Taskbar คือแถบด้านล่างสุดของ Windows ครับ ไม่ใช่ส่วนของโปรแกรมเบราว์เซอร์')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. พิมพ์ลงบนแถบ Taskbar ด้านล่างสุดของหน้าจอคอมพิวเตอร์</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 = '#E3F2FD';
        btn.style.borderColor = '#1E88E5';
        btn.style.color = '#0D47A1';
        btn.style.opacity = '1';
        feedback.style.background = '#E3F2FD';
        feedback.style.color = '#0D47A1';
        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>