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

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, #2E7D32 0%, #43A047 50%, #66BB6A 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #1B5E20;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">🏆 หน่วยที่ 5 EP.3: โครงงาน Active Learning</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #E8F5E9; font-weight: bold;">สร้างสไลด์รณรงค์ "พลเมืองดิจิทัลตัวจิ๋ว"</p>
    </div>

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

<h3 style="color: #2E7D32; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🖥️ ภารกิจหลัก: นักออกแบบสไลด์รณรงค์</h3>
        <p>ให้นักเรียนจับกลุ่ม 3-4 คน ล็อกอินเข้าใช้งาน <strong>Office 365</strong> ของโรงเรียน แล้วช่วยกันสร้างงานนำเสนอในหัวข้อ <strong>"ท่องเน็ตปลอดภัย สไตล์ ป.3"</strong> กลุ่มละ 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 #4CAF50; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #2E7D32; font-size: 16px;">สไลด์ที่ 1: ชื่อเรื่องและสมาชิก</strong><br>
                <span style="font-size: 15px;">พิมพ์ชื่อหัวข้อรณรงค์เก๋ๆ และชื่อ-นามสกุล ของนักสืบไซเบอร์ในกลุ่มทุกคน</span>
            </div>
            
            <div style="background: #FAFAFA; padding: 15px; border-radius: 8px; border-left: 5px solid #81C784; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #2E7D32; font-size: 16px;">สไลด์ที่ 2: กฎเหล็กของเรา (เนื้อหา)</strong><br>
                <span style="font-size: 15px;">เลือก <strong>"กฎเหล็ก 1 ข้อ"</strong> จาก 5 ข้อที่เรียนไป (เช่น การไม่บอกรหัสผ่าน) มาเขียนแนะนำเพื่อนๆ พร้อมหารูปภาพประกอบสวยๆ จาก Google มาใส่ (อย่าลืมอ้างอิงที่มาด้วยนะ!)</span>
            </div>

<div style="background: #FAFAFA; padding: 15px; border-radius: 8px; border-left: 5px solid #A5D6A7; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #2E7D32; font-size: 16px;">สไลด์ที่ 3: คำคมสอนใจ</strong><br>
                <span style="font-size: 15px;">ช่วยกันคิดคำคมสั้นๆ ให้เพื่อนจำง่าย เช่น <em>"รหัสผ่านคือความลับ ห้ามบอกใครนะจ๊ะ"</em> หรือ <em>"เจอคนแปลกหน้าทักมา ให้รีบหาคุณครู"</em></span>
            </div>
        </div>

<h3 style="color: #2E7D32; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">🚀 ขั้นตอนการนำเสนอ (Presentation)</h3>
        <p>เมื่อทำเสร็จแล้ว ให้นักเรียนตรวจสอบความถูกต้อง (Debugging) ให้เรียบร้อย แล้วกดปุ่ม <strong>นำเสนอสไลด์</strong> เพื่อโชว์ผลงานให้คุณครูและเพื่อนๆ ดู พร้อมอธิบายสั้นๆ ว่าทำไมเราถึงเลือกกฎข้อนี้มาแนะนำครับ</p>

<div style="background: #FFF3E0; padding: 20px; border-radius: 12px; border: 1px dashed #FF9800; margin-top: 25px; text-align: center;">
            <p style="margin: 0; font-size: 16px; color: #E65100; font-weight: bold;">🎉 เยี่ยมมากพลเมืองดิจิทัลตัวจิ๋ว! 🎉</p>
            <p style="margin: 5px 0 0 0; font-size: 15px; color: #333;">นักเรียนได้เรียนรู้ครบทุกอย่าง ตั้งแต่อัลกอริทึม การเขียนโค้ด การค้นหาข้อมูล ไปจนถึงการใช้เทคโนโลยีอย่างปลอดภัยแล้วครับ! ขอให้สนุกกับการท่องโลกอินเทอร์เน็ตที่กว้างใหญ่ต่อไปนะครับ!</p>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ สรุปความรู้หน่วยที่ 5</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #C8E6C9;">ทดสอบความพร้อมก่อนจบวิชาวิทยาการคำนวณ!</p>
        </div>
        
        <div style="border: 2px solid #1B5E20; 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: #2E7D32;">ข้อที่ 1: การใช้ PowerPoint บน Office 365 ช่วยให้นักเรียนทำงานกลุ่ม "รณรงค์ความปลอดภัย" ได้สะดวกขึ้นอย่างไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'สุดยอดครับ! ระบบคลาวด์ช่วยให้เราทำงานร่วมกันได้จากคอมพิวเตอร์หลายเครื่อง และงานยังบันทึกอัตโนมัติบน OneDrive อีกด้วยครับ')" 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, 'โปรแกรม PowerPoint ไม่สามารถกำจัดไวรัสในเครื่องได้ครับ')" 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: 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: #2E7D32;">ข้อที่ 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;">ค. เพื่อใช้สไลด์ประจานเพื่อนที่เคยทำผิดกฎอินเทอร์เน็ต</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 = '#E8F5E9';
        btn.style.borderColor = '#4CAF50';
        btn.style.color = '#1B5E20';
        btn.style.opacity = '1';
        feedback.style.background = '#E8F5E9';
        feedback.style.color = '#2E7D32';
        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>
<div style="background-color: #f8f9fa; border: 1px solid #e9ecef; border-left: 5px solid #0d6efd; padding: 20px; margin-top: 50px; margin-bottom: 20px; border-radius: 8px; font-family: 'Sarabun', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
    <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <span style="font-size: 1.5em; margin-right: 10px;">💡</span>
        <strong style="color: #0d6efd; font-size: 1.2em;">พบข้อผิดพลาดหรือมีข้อเสนอแนะ?</strong>
    </div>
    <p style="color: #495057; font-size: 1em; margin-bottom: 15px; line-height: 1.6;">
        หากนักเรียนหรือคุณครูพบจุดที่ควรแก้ไขในบทเรียน/แบบทดสอบนี้ หรือมีข้อเสนอแนะเพิ่มเติม สามารถแจ้งครูพิสิฐเพื่อนำไปปรับปรุงเนื้อหาให้สมบูรณ์ยิ่งขึ้นได้เลยครับ <br>
        <span style="font-size: 0.9em; color: #6c757d;">(ขอบคุณที่ร่วมเป็นส่วนหนึ่งในการพัฒนาการเรียนรู้ไปด้วยกันครับ)</span>
    </p>
    <a href="mailto:tpisit@wsst.ac.th?subject=แจ้งข้อเสนอแนะ/ข้อผิดพลาด บทเรียน SmartyQuizKids" style="display: inline-block; background-color: #0d6efd; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-size: 1em; font-weight: bold;">
        ✉️ ส่งอีเมลแจ้งครูพิสิฐ
    </a>
</div>