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

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, #6A1B9A 0%, #4A148C 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #311B92;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #FFF;">🌍 หน่วยที่ 5 EP.5: โลกไร้พรมแดนและโปรเจกต์เครือข่าย</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #E1BEE7; font-weight: bold;">Internet Services & Active Learning</p>
    </div>

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

<h3 style="color: #4A148C; border-left: 5px solid #8E24AA; padding-left: 15px; font-size: 22px; margin-top: 30px;">📍 1. หาบ้านให้เจอ: IP Address และ Domain Name</h3>
        <p>บนโลกอินเทอร์เน็ต คอมพิวเตอร์ทุกเครื่องต้องมี "ที่อยู่" เพื่อให้ส่งข้อมูลหากันได้ถูกต้องครับ:</p>
        
        <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px;">
            <div style="flex: 1; min-width: 250px; background: #F3E5F5; padding: 20px; border-radius: 12px; border: 2px solid #AB47BC;">
                <strong style="color: #6A1B9A; font-size: 18px;">🔢 IP Address (ไอพีแอดเดรส)</strong><br>
                <p style="font-size: 14px; margin-top: 10px;">เปรียบเสมือน <strong>"บ้านเลขที่"</strong> หรือพิกัดของคอมพิวเตอร์บนโลกไซเบอร์ เป็นชุดตัวเลขที่เครื่องคอมพิวเตอร์ใช้คุยกัน (เช่น <code>172.217.16.206</code>) ซึ่งจำยากมากสำหรับมนุษย์เรา</p>
            </div>
            <div style="flex: 1; min-width: 250px; background: #EDE7F6; padding: 20px; border-radius: 12px; border: 2px solid #7E57C2;">
                <strong style="color: #4527A0; font-size: 18px;">🔤 Domain Name (โดเมนเนม)</strong><br>
                <p style="font-size: 14px; margin-top: 10px;">เปรียบเสมือน <strong>"ชื่อที่บันทึกไว้ในสมุดโทรศัพท์"</strong> เป็นการตั้งชื่อเว็บให้เป็นภาษาที่มนุษย์อ่านและจำได้ง่าย (เช่น <code>www.google.com</code>) โดยระบบ DNS (Domain Name System) จะทำหน้าที่แปลงชื่อนี้กลับไปเป็น IP Address ให้คอมพิวเตอร์เข้าใจอีกทีครับ</p>
            </div>
        </div>

<h3 style="color: #4A148C; border-left: 5px solid #8E24AA; padding-left: 15px; font-size: 22px; margin-top: 35px;">🚀 2. บริการยอดฮิตบนโลกอินเทอร์เน็ต</h3>
        <p>อินเทอร์เน็ตไม่ได้มีแค่เอาไว้เข้าเว็บเท่านั้น แต่ยังมีบริการที่ช่วยอำนวยความสะดวกให้เรามากมาย เช่น:</p>
        
        <div style="background: #FAFAFA; padding: 20px; border-radius: 12px; margin-top: 15px; border: 1px solid #E0E0E0;">
            <ul style="margin-top: 0; padding-left: 20px; color: #333;">
                <li style="margin-bottom: 10px;"><strong>🔍 โปรแกรมค้นหาเว็บ (Search Engine):</strong> เช่น Google, Bing, Yahoo ใช้สำหรับค้นหาข้อมูล ข่าวสาร รูปภาพ หรือเว็บไซต์ต่างๆ ทั่วโลกเพียงแค่พิมพ์คำค้นหา (Keyword)</li>
                <li style="margin-bottom: 10px;"><strong>✉️ ไปรษณีย์อิเล็กทรอนิกส์ (E-mail):</strong> เช่น Gmail, Outlook ใช้ส่งข้อความและไฟล์งานหากันอย่างเป็นทางการ (ประกอบด้วย <em>ชื่อผู้ใช้ @ ผู้ให้บริการ</em>)</li>
                <li style="margin-bottom: 0;"><strong>💬 บริการส่งข้อความทันที (Instant Messaging / Chat):</strong> เช่น LINE, Messenger, WhatsApp ใช้สำหรับพูดคุย ส่งรูปภาพ ส่งเสียง หรือวิดีโอคอลแบบเรียลไทม์ ซึ่งปัจจุบันได้รับความนิยมมากที่สุด</li>
            </ul>
        </div>

<h3 style="color: #4A148C; border-left: 5px solid #8E24AA; padding-left: 15px; font-size: 22px; margin-top: 35px;">🛠️ 3. Active Learning: โปรเจกต์วิศวกรเครือข่าย</h3>
        <p>หลังจากที่เราเรียนรู้ตั้งแต่เรื่ององค์ประกอบ สื่อกลาง โปรโตคอล ประเภทเครือข่าย และอินเทอร์เน็ต มาครบทั้ง 5 EP แล้ว ถึงเวลาประยุกต์ใช้ความรู้ครับ!</p>
        
        <div style="background: #E8F5E9; padding: 20px; border-radius: 12px; border-left: 6px solid #4CAF50; margin-top: 15px;">
            <p style="margin: 0 0 10px 0; font-weight: bold; color: #2E7D32;">🎯 ภารกิจสำหรับนักเรียน (ลองคิดตามดูนะ!):</p>
            <p style="font-size: 14px; margin: 0;">สมมติว่านักเรียนกำลังจะเปิดร้านกาแฟเล็กๆ (Cafe) ที่มีบริการ Free Wi-Fi ให้ลูกค้า และมีคอมพิวเตอร์สำหรับพนักงานรับออเดอร์ นักเรียนจะออกแบบเครือข่ายนี้อย่างไร?</p>
            <ul style="font-size: 14px; margin-top: 10px; margin-bottom: 0;">
                <li><strong>ประเภทเครือข่าย:</strong> ใช้ <strong>LAN</strong> เพราะอยู่ในพื้นที่อาคารเดียวกัน</li>
                <li><strong>สื่อกลาง:</strong> ใช้สาย <strong>LAN (UTP)</strong> เชื่อมต่อคอมฯ พนักงานให้เสถียร และใช้ <strong>Wi-Fi</strong> (คลื่นวิทยุ) กระจายสัญญาณให้ลูกค้า</li>
                <li><strong>รูปร่างเครือข่าย (Topology):</strong> ใช้แบบ <strong>ดาว (Star)</strong> โดยมี Router ตรงกลางเป็นตัวกระจายสัญญาณ</li>
            </ul>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #6A1B9A; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">✍️ มินิควิซ ทบทวนความรู้ EP.5</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #F3E5F5;">บททดสอบสุดท้ายเพื่อก้าวสู่การเป็นพลเมืองดิจิทัลที่เข้าใจระบบเครือข่าย!</p>
        </div>
        
        <div style="border: 2px solid #6A1B9A; 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: เหตุใดมนุษย์จึงพัฒนาระบบ Domain Name (โดเมนเนม) ขึ้นมาใช้งานควบคู่กับ IP Address ?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'การป้องกันไวรัสเป็นหน้าที่ของโปรแกรม Antivirus ครับ ไม่เกี่ยวกับ Domain Name')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เพื่อป้องกันไวรัสคอมพิวเตอร์เข้าสู่เว็บไซต์</button>
                    <button onclick="checkAnswer(this, false, 'IP Address ทำให้คอมพิวเตอร์ทำงานได้เร็วอยู่แล้ว Domain Name เป็นตัวช่วยฝั่งมนุษย์ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เพื่อให้คอมพิวเตอร์ประมวลผลข้อมูลได้รวดเร็วยิ่งขึ้น</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องที่สุดครับ! IP Address เป็นตัวเลขที่จดจำยาก ระบบโดเมนเนมจึงตั้งเป็นตัวอักษรหรือคำที่มีความหมายเพื่อให้มนุษย์จดจำและเข้าใช้งานได้ง่ายครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เพื่อให้มนุษย์จดจำชื่อเว็บไซต์ได้ง่ายกว่าการจำชุดตัวเลข IP Address</button>
                    <button onclick="checkAnswer(this, false, 'ไม่เกี่ยวข้องกันครับ Domain Name ไม่ได้ช่วยประหยัดค่าอินเทอร์เน็ตครับ')" 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, 'อีเมลใช้สำหรับส่งจดหมายหรือข้อความหาบุคคลเฉพาะเจาะจงครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. E-mail (อีเมล)</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! Search Engine (เช่น Google) คือเครื่องมือสำหรับค้นหาข้อมูลทุกประเภทบนโลกอินเทอร์เน็ตอย่างรวดเร็วและครอบคลุมที่สุดครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. Search Engine (โปรแกรมค้นหาเว็บ)</button>
                    <button onclick="checkAnswer(this, false, 'Chat หรือโปรแกรมแชต เอาไว้พูดคุยสื่อสารกับคนรู้จัก ไม่เหมาะกับการหาข้อมูลรายงานครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. Instant Messaging (โปรแกรมแชต)</button>
                    <button onclick="checkAnswer(this, false, 'FTP คือโปรโตคอลสำหรับอัปโหลด/ดาวน์โหลดไฟล์ ไม่ใช่บริการสำหรับการค้นหาข้อมูลข่าวสารครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. FTP (การโอนย้ายไฟล์)</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;">ข้อที่ 3: (สถานการณ์ประยุกต์) หากโรงเรียนต้องการขยายสัญญาณ Wi-Fi ให้ครอบคลุมไปถึงสนามฟุตบอลที่อยู่ห่างจากตัวอาคารเรียน อุปกรณ์หรือสื่อกลางประเภทใดที่ตอบโจทย์ภารกิจนี้ได้ดีที่สุด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'สายแลน (UTP) มีข้อจำกัดเรื่องระยะทาง ไม่เหมาะกับการลากสายยาวๆ ไปกลางแจ้งครับ')" 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;">ข. เปลี่ยนมาใช้สัญญาณอินฟราเรด (Infrared)</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, 'ถูกต้องครับ! การติดตั้ง Access Point เพิ่ม (ซึ่งปล่อยคลื่นวิทยุ/Wi-Fi) ตามจุดต่างๆ จะช่วยขยายระยะเครือข่าย LAN แบบไร้สายให้กว้างขึ้นได้อย่างมีประสิทธิภาพครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ติดตั้งตัวกระจายสัญญาณ (Access Point) คลื่นวิทยุเพิ่มเติม</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 = '#F3E5F5';
        btn.style.borderColor = '#6A1B9A';
        btn.style.color = '#4A148C';
        btn.style.opacity = '1';
        feedback.style.background = '#F3E5F5';
        feedback.style.color = '#6A1B9A';
        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>