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

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, #D81B60 0%, #E91E63 50%, #F06292 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #AD1457;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">🖼️ หน่วยที่ 4 EP.2: ค้นหาและเซฟรูปภาพอย่างถูกวิธี</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FCE4EC; font-weight: bold;">หาข้อมูล จัดตาราง และบันทึกรูปภาพ!</p>
    </div>

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

<h3 style="color: #D81B60; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🥗 1. ค้นหาข้อมูลและจัดหมวดหมู่ลงตาราง</h3>
        <p>สมมติว่าคุณครูสั่งรายงานเรื่อง <strong>"อาหาร 5 หมู่"</strong> เราสามารถใช้ Google ค้นหาข้อมูลได้เลย เมื่อได้ข้อมูลมาแล้ว การนำมาจัดเรียงใส่ "ตาราง" จะทำให้รายงานของเราอ่านง่ายขึ้นมากครับ:</p>
        
        <div style="background: #FCE4EC; padding: 15px; border-radius: 12px; border: 1px solid #F8BBD0; margin-top: 15px; display: flex; justify-content: center;">
            <table style="width: 80%; border-collapse: collapse; background: white; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <thead>
                    <tr style="background: #D81B60; color: white;">
                        <th style="padding: 10px; border: 1px solid #F06292;">หมู่ที่</th>
                        <th style="padding: 10px; border: 1px solid #F06292;">ชื่อหมู่สารอาหาร</th>
                        <th style="padding: 10px; border: 1px solid #F06292;">ตัวอย่างอาหาร</th>
                    </tr>
                </thead>
                <tbody style="color: #333; font-size: 15px;">
                    <tr>
                        <td style="padding: 8px; border: 1px solid #F8BBD0;">1</td>
                        <td style="padding: 8px; border: 1px solid #F8BBD0;">โปรตีน</td>
                        <td style="padding: 8px; border: 1px solid #F8BBD0;">เนื้อสัตว์ นม ไข่</td>
                    </tr>
                    <tr style="background: #FAFAFA;">
                        <td style="padding: 8px; border: 1px solid #F8BBD0;">2</td>
                        <td style="padding: 8px; border: 1px solid #F8BBD0;">คาร์โบไฮเดรต</td>
                        <td style="padding: 8px; border: 1px solid #F8BBD0;">ข้าว แป้ง เผือก มัน</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px; border: 1px solid #F8BBD0;">...</td>
                        <td style="padding: 8px; border: 1px solid #F8BBD0;">...</td>
                        <td style="padding: 8px; border: 1px solid #F8BBD0;">...</td>
                    </tr>
                </tbody>
            </table>
        </div>

<h3 style="color: #D81B60; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">🖱️ 2. สเต็ปการเซฟรูปภาพลงคอมพิวเตอร์</h3>
        <p>รายงานจะสวยงามได้ต้องมีภาพประกอบครับ! ถ้านักเรียนเจอภาพที่ถูกใจใน Google แล้ว ให้ทำตาม 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 #E91E63; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #C2185B; font-size: 16px;">สเต็ปที่ 1: คลิกขวาที่รูปภาพ</strong><br>
                <span style="font-size: 15px;">นำเมาส์ไปชี้ที่รูปภาพที่ต้องการ แล้วกด <strong>คลิกขวา (Right-Click)</strong> จะมีเมนูยาวๆ โผล่ขึ้นมาครับ</span>
            </div>
            
            <div style="background: #FAFAFA; padding: 15px; border-radius: 8px; border-left: 5px solid #D81B60; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #AD1457; font-size: 16px;">สเต็ปที่ 2: เลือก "บันทึกรูปภาพเป็น..." (Save image as...)</strong><br>
                <span style="font-size: 15px;">หาคำว่า <span style="background: #eee; padding: 2px 6px; border-radius: 4px;">บันทึกรูปภาพเป็น...</span> แล้วคลิกซ้าย 1 ครั้ง โปรแกรมจะถามว่าเราอยากเอารูปไปเก็บไว้ที่ไหน</span>
            </div>

<div style="background: #FAFAFA; padding: 15px; border-radius: 8px; border-left: 5px solid #880E4F; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #880E4F; font-size: 16px;">สเต็ปที่ 3: ตั้งชื่อและกดบันทึก (Save)</strong><br>
                <span style="font-size: 15px;">เลือกโฟลเดอร์ที่หาง่ายๆ (เช่น Pictures หรือ Desktop) พิมพ์ชื่อรูปภาพกันลืม แล้วกดปุ่ม <strong>Save (บันทึก)</strong> ได้เลย!</span>
            </div>
        </div>

<h3 style="color: #D81B60; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">⚠️ 3. เกร็ดความรู้: เรื่องของ "ลิขสิทธิ์"</h3>
        
        <div style="background: #FFF3E0; padding: 15px; border-radius: 8px; margin-top: 15px; font-size: 15px; color: #E65100; border: 1px dashed #FF9800;">
            <p style="margin: 0;">ภาพทุกภาพที่เราค้นเจอใน Google <strong>ไม่ใช่ภาพฟรีทั้งหมดนะครับ!</strong> บางภาพมีเจ้าของ (มีลิขสิทธิ์) การนำมาใช้ทำรายงานส่งครูสามารถทำได้ แต่เราควร <strong>"อ้างอิงแหล่งที่มา"</strong> (บอกว่าเอามาจากเว็บไหน) เสมอ เพื่อเป็นการให้เกียรติเจ้าของภาพครับ</p>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #AD1457 0%, #880E4F 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: #FCE4EC;">ทดสอบฝีมือการเซฟรูปภาพกันหน่อย!</p>
        </div>
        
        <div style="border: 2px solid #880E4F; 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: #D81B60;">ข้อที่ 1: หากนักเรียนต้องการดาวน์โหลดรูปภาพจากเว็บไซต์มาเก็บไว้ในคอมพิวเตอร์ ต้องใช้คำสั่งใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'คัดลอกรูปภาพ (Copy) จะแค่ก๊อปปี้ไปวางชั่วคราวครับ ไม่ได้เซฟเป็นไฟล์ลงเครื่อง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. คลิกขวา เลือก "คัดลอกรูปภาพ (Copy image)"</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! คำสั่ง บันทึกรูปภาพเป็น... (Save image as...) คือคำสั่งสำหรับดาวน์โหลดรูปภาพมาเก็บเป็นไฟล์ในเครื่องของเราครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. คลิกขวา เลือก "บันทึกรูปภาพเป็น... (Save image as...)"</button>
                    <button onclick="checkAnswer(this, false, 'เปิดรูปภาพในแท็บใหม่ แค่เปิดดูรูปใหญ่ขึ้นครับ ไม่ได้เซฟลงเครื่อง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. คลิกขวา เลือก "เปิดรูปภาพในแท็บใหม่ (Open image in new tab)"</button>
                    <button onclick="checkAnswer(this, false, 'ลบรูปภาพ ทำไม่ได้นะครับ เราไม่ใช่เจ้าของเว็บน้า ^^')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. คลิกขวา เลือก "ลบรูปภาพ (Delete image)"</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: #D81B60;">ข้อที่ 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;">ก. ช่วยป้องกันไวรัสคอมพิวเตอร์ได้</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;">ค. ทำให้เรามีข้อมูลเพิ่มขึ้นเป็น 2 เท่า</button>
                    <button onclick="checkAnswer(this, false, 'ไม่เกี่ยวกับการทำภาพเคลื่อนไหวครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ทำให้ข้อมูลกลายเป็นภาพเคลื่อนไหว (Animation)</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: #D81B60;">ข้อที่ 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, 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>
                </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 = '#FCE4EC';
        btn.style.borderColor = '#D81B60';
        btn.style.color = '#880E4F';
        btn.style.opacity = '1';
        feedback.style.background = '#FCE4EC';
        feedback.style.color = '#C2185B';
        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>