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

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, #E91E63 0%, #D81B60 50%, #880E4F 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #4A148C;">
        <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.3: เจาะลึกรูปภาพ & ทำรายงาน</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #F8BBD0; font-weight: bold;">หารูปเป๊ะ เข้าใจสิทธิ์ พิมพ์งานโปร!</p>
    </div>

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

<h3 style="color: #D81B60; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🎨 1. ฟิลเตอร์วิเศษในปุ่ม "เครื่องมือ (Tools)"</h3>
        <p>เมื่อเรากดค้นหารูปภาพ ให้สังเกตปุ่มที่เขียนว่า <strong>"เครื่องมือ"</strong> หรือ <strong>"Tools"</strong> ครับ พอกดปุ๊บ จะมีเมนูซ่อนอยู่โผล่ขึ้นมาให้เรากรองภาพได้แบบละเอียดสุดๆ:</p>
        
        <div style="background: #FCE4EC; padding: 15px; border-radius: 12px; margin-top: 15px; border: 1px solid #F8BBD0;">
            <ul style="margin: 0; padding-left: 20px; color: #880E4F; line-height: 1.8; font-size: 15px;">
                <li>📏 <strong>ขนาด (Size):</strong> เลือกรูปใหญ่ๆ (Large) ภาพจะได้ไม่แตกเวลาเอาไปใส่รายงาน</li>
                <li>🌈 <strong>สี (Color):</strong> เลือกภาพ ขาว-ดำ, สีเฉพาะเจาะจง หรือ <strong>"โปร่งใส (Transparent)"</strong> (อันนี้ดีมาก! เอาไว้หารูปที่ไม่มีพื้นหลัง เอาไปแปะทับรูปอื่นได้เนียนๆ เลย)</li>
                <li>🖌️ <strong>ประเภท (Type):</strong> เลือกภาพวาดลายเส้น (Line Drawing) เอาไประบายสีต่อ หรือคลิปอาร์ต (Clip Art) เป็นตัวการ์ตูนน่ารักๆ ก็ได้</li>
            </ul>
        </div>

<h3 style="color: #D81B60; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 40px;">🔍 2. Raster vs Vector ต่างกันยังไง?</h3>
        <p>รูปภาพในคอมพิวเตอร์หลักๆ มี 2 ประเภทครับ ลองจำความต่างง่ายๆ แบบนี้:</p>
        <div style="display: grid; grid-template-columns: 1fr 1fr; 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. Raster (หรือ Bitmap)</strong>
                <p style="margin-top: 5px; margin-bottom: 0; font-size: 14px;">คือภาพที่เกิดจากจุดสี่เหลี่ยมเล็กๆ (พิกเซล) มาเรียงต่อกัน <em>ข้อเสียคือ ถ้าเราซูมหรือขยายภาพมากๆ ภาพจะ "แตก" เป็นเม็ดๆ ครับ</em> (เช่น ไฟล์ .JPG, .PNG)</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;">2. Vector</strong>
                <p style="margin-top: 5px; margin-bottom: 0; font-size: 14px;">คือภาพที่สร้างจากการคำนวณทางคณิตศาสตร์ <em>ข้อดีคือ ไม่ว่าจะซูมหรือขยายใหญ่เป็นบิลบอร์ด ภาพก็ "ไม่แตก" และคมชัดเสมอครับ!</em></p>
            </div>
        </div>

<h3 style="color: #D81B60; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 40px;">⚖️ 3. สิทธิ์ในการใช้งาน (Usage Rights)</h3>
        <p>อันนี้สำคัญมากครับ! รูปภาพบนอินเทอร์เน็ต <strong>มีเจ้าของ</strong> เราไม่สามารถเอาไปใช้ทำมาค้าขายได้ตามใจชอบ ก่อนเอาไปใช้ เราต้องเช็กที่ปุ่มเครื่องมือ แล้วเลือก <strong>สิทธิ์ในการใช้งาน (Usage Rights)</strong> เสมอ โดยปกติเราควรเลือก <strong>Creative Commons licenses</strong> ซึ่งแปลว่าเจ้าของอนุญาตให้เราเอาไปใช้เพื่อการศึกษาหรือดัดแปลงได้ฟรีครับ!</p>

<h3 style="color: #D81B60; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 40px;">📝 4. ประกอบร่างรายงานผ่านพอร์ทัลโรงเรียน</h3>
        <p>ได้รูปครบ ได้เนื้อหาครบ ถึงเวลาทำรายงาน! เพื่อความเป็นมืออาชีพและรักษาข้อมูลให้ปลอดภัย นักเรียนต้องทำตามสเต็ปนี้ทุกครั้งครับ:</p>
        
        <div style="background: #E8F5E9; padding: 20px; border-radius: 12px; border: 1px dashed #4CAF50; margin-top: 15px;">
            <ol style="margin: 0; padding-left: 20px; color: #1B5E20; font-size: 15px; font-weight: bold; line-height: 1.8;">
                <li>เข้าสู่เว็บไซต์ศูนย์กลางของโรงเรียน: <a href="https://wsst.ac.th/inventory.html" target="_blank" style="color: #D32F2F;">https://wsst.ac.th/inventory.html</a></li>
                <li>เลือกเครื่องมือพิมพ์รายงานตามถนัด:
                    <ul style="color: #333; font-weight: normal; margin-top: 5px;">
                        <li>👉 <strong>ทีม Google Docs:</strong> คลิก Sign-in Google แล้วใช้อีเมล <code style="color: #1976D2;">@wsst.ac.th</code></li>
                        <li>👉 <strong>ทีม Word Online:</strong> คลิก Sign-in Microsoft แล้วใช้อีเมล <code style="color: #E65100;">@ms.wsst.ac.th</code></li>
                    </ul>
                </li>
                <li>สร้างเอกสารใหม่ นำข้อมูลที่ค้นหาได้มาเรียบเรียง แทรกรุปภาพ และ <strong>อย่าลืมเขียนอ้างอิงที่มาของเว็บไซต์</strong> ด้วยนะครับ!</li>
            </ol>
        </div>

<div style="background: linear-gradient(135deg, #FFD54F 0%, #FFCA28 100%); padding: 25px; border-radius: 15px; margin-top: 35px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
            <p style="margin: 0; font-size: 24px; color: #D84315; font-weight: bold;">🎓 ปิดจบหน่วยที่ 3 อย่างสมบูรณ์! 🎓</p>
            <p style="margin: 10px 0 0 0; font-size: 16px; color: #333;">ขอแสดงความยินดีกับเซียนข้อมูล ป.6 ทุกคนครับ! ตอนนี้นักเรียนมีทักษะในการใช้ Search Engine หาข้อมูลได้แม่นยำ หารูปภาพได้ตรงใจ เข้าใจเรื่องลิขสิทธิ์ และใช้งานระบบคลาวด์ของโรงเรียนได้คล่องแคล่วแล้ว พร้อมลุยทุกรายงานแล้วครับ!</p>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #D81B60 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.3</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #F8BBD0;">บททดสอบสุดยอดเซียนข้อมูล!</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: หากนักเรียนต้องการค้นหารูปภาพ "นกแก้ว" เพื่อนำมาวางซ้อนทับบนพื้นหลังสีรุ้งโดยไม่ให้มีกรอบสีขาวติดมาด้วย ควรตั้งค่าการค้นหา "สี (Color)" เป็นแบบใด?</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;">ก. ขาว-ดำ (Black and white)</button>
                    <button onclick="checkAnswer(this, false, 'ภาพสีรุ้งก็จะทำให้พื้นหลังของนกมีสีรุ้งติดมา ทับกับพื้นหลังของเราพอดีครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ทุกสี (Any color)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! การเลือกสีแบบ โปร่งใส (Transparent) จะทำให้เราได้รูปภาพที่ไม่มีพื้นหลัง (ทะลุเห็นข้างหลังได้) เหมาะกับการนำไปแปะทับรูปอื่นมากๆ ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. โปร่งใส (Transparent)</button>
                    <button onclick="checkAnswer(this, false, 'ถ้าเลือกสีแดง เราอาจจะได้นกแก้วสีแดง แต่ยังมีพื้นหลังสีขาวติดมาอยู่ดีครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. สีแดง (Red)</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: ข้อดีที่โดดเด่นที่สุดของรูปภาพประเภท Vector คืออะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Raster หรือ Bitmap ต่างหากครับที่เก็บภาพเหมือนภาพถ่ายจากกล้อง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เก็บรายละเอียดแสงเงาได้เหมือนภาพถ่ายจากกล้องดิจิทัล 100%</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! ภาพ Vector สร้างขึ้นจากสมการคณิตศาสตร์ ทำให้ไม่ว่าจะขยายภาพให้ใหญ่ขนาดไหน ภาพก็ยังคมชัดและไม่แตกเป็นเม็ดพิกเซลครับ')" 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, 'ไม่เกี่ยวข้องกันครับ ไฟล์ Vector ไม่ได้เป็นภาพ 3 มิติเสมอไป')" 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: #D81B60;">ข้อที่ 3: หลังจากเข้าสู่ระบบที่พอร์ทัล https://wsst.ac.th/inventory.html แล้ว หากนักเรียนต้องการใช้โปรแกรม "Word Online" ในการพิมพ์รายงาน ต้องเลือกใช้อีเมลบัญชีใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'บัญชี @wsst.ac.th ใช้สำหรับบริการของ Google (เช่น Google Docs, Google Classroom) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เข้าสู่ระบบด้วย Google ใช้อีเมลลงท้ายด้วย @wsst.ac.th</button>
                    <button onclick="checkAnswer(this, true, 'สุดยอดครับ! Word Online เป็นบริการของฝั่ง Microsoft ดังนั้นนักเรียนต้องเลือก Sign-in Microsoft และใช้อีเมลที่ลงท้ายด้วย @ms.wsst.ac.th ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เข้าสู่ระบบด้วย Microsoft ใช้อีเมลลงท้ายด้วย @ms.wsst.ac.th</button>
                    <button onclick="checkAnswer(this, false, 'โรงเรียนไม่ได้ใช้ @gmail.com ในระบบส่วนกลางครับ และเราควรใช้บัญชีโรงเรียนในการทำงานเพื่อความปลอดภัย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เข้าสู่ระบบด้วยบัญชีส่วนตัว ใช้อีเมลลงท้ายด้วย @gmail.com</button>
                    <button onclick="checkAnswer(this, false, 'บัญชี @moe.go.th เป็นบัญชีของกระทรวง ไม่ใช่บัญชีส่วนตัวของนักเรียนที่โรงเรียนสร้างให้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. เข้าสู่ระบบด้วยบัญชีของครูผู้สอน ใช้อีเมลลงท้ายด้วย @moe.go.th</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 = '#880E4F';
        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>