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

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, #1976D2 0%, #2196F3 50%, #03A9F4 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.5: นัดหมายออนไลน์</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>"ปฏิทินออนไลน์ (Google Calendar)"</strong> ที่ช่วยจำและช่วยเตือนเพื่อนทุกคนให้เราเองครับ!</p>

<h3 style="color: #1976D2; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">⏰ 1. วิธีสร้างนัดหมายสุดสมาร์ต</h3>
        <p>เราสามารถใช้บัญชีอีเมล <code>@wsst.ac.th</code> ของโรงเรียน เข้าไปใช้งานปฏิทินได้ฟรีๆ ตามสเต็ปนี้เลยครับ:</p>
        
        <div style="background: #FAFAFA; padding: 20px; border-radius: 12px; margin-top: 15px; border: 1px solid #ddd;">
            <ol style="margin: 0; padding-left: 20px; color: #333; line-height: 1.8; font-size: 15px;">
                <li>เข้าเว็บ Google แล้วคลิกที่ไอคอนแอป (จุด 9 จุดมุมขวาบน) เลือกแอป <strong>"ปฏิทิน (Calendar)"</strong> 📅</li>
                <li>คลิกเลือก <strong>"วันที่และเวลา"</strong> ที่เราต้องการนัดเพื่อนบนตารางปฏิทิน</li>
                <li>พิมพ์ <strong>"เพิ่มชื่อ (Title)"</strong> กิจกรรมลงไป (เช่น <em>นัดทำรายงานวิทยาศาสตร์</em>)</li>
                <li><span style="color: #D32F2F; font-weight: bold;">จุดสำคัญ:</span> ในช่อง <strong>"เพิ่มผู้เข้าร่วม (Add guests)"</strong> ให้พิมพ์อีเมลของเพื่อนๆ ที่เราจะนัดลงไปครับ (เช่น <code>friend@wsst.ac.th</code>)</li>
                <li>เสร็จแล้วคลิกปุ่ม <strong>"บันทึก (Save)"</strong> </li>
            </ol>
            <div style="background: #E3F2FD; padding: 15px; border-radius: 8px; margin-top: 15px; font-size: 15px; color: #0D47A1; text-align: center; border: 1px dashed #2196F3;">
                <em>✨ <strong>ความเจ๋งคือ:</strong> ทันทีที่เรากดบันทึก ระบบจะส่งอีเมลบัตรเชิญไปหาเพื่อนทุกคนอัตโนมัติ! และเมื่อถึงวันนัด มือถือของเพื่อนก็จะเด้งเตือนทันที หมดปัญหาเพื่อนลืมนัดแน่นอน!</em>
            </div>
        </div>

<h3 style="color: #1976D2; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 40px;">🚀 2. โครงงานสู่นวัตกรรม (Active Learning)</h3>
        <p>เพื่อเป็นการทดสอบวิชา "การค้นหาข้อมูล" ที่เราเรียนมาทั้งหมด คุณครูมีภารกิจให้นักเรียนจับคู่กันทำโปรเจกต์ <strong>นักสืบเทคโนโลยี</strong> ครับ!</p>
        
        <div style="display: flex; flex-direction: column; gap: 15px; margin-top: 15px;">
            <div style="background: #FFF3E0; padding: 15px; border-radius: 12px; border-left: 5px solid #FF9800; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #E65100; font-size: 16px;">ภารกิจที่ต้องทำ:</strong>
                <ul style="margin-top: 5px; margin-bottom: 0; font-size: 15px; line-height: 1.6;">
                    <li>สืบค้นข้อมูลเทคโนโลยีหรือนวัตกรรมใหม่ๆ ที่นักเรียนสนใจ (อย่าลืมใช้ Keyword เจาะจงนะ!)</li>
                    <li>หาภาพประกอบที่สวยงาม (ระวังเรื่องลิขสิทธิ์และอ้างอิงแหล่งที่มาด้วย)</li>
                    <li>วิเคราะห์ว่าเทคโนโลยีนั้นมี <strong>"ข้อดี"</strong> และ <strong>"ข้อเสีย"</strong> อย่างไร?</li>
                    <li>สรุปว่ามันช่วยให้คุณภาพชีวิตของเราดีขึ้นได้อย่างไร?</li>
                    <li>เตรียมไฟล์นำเสนอ แล้วออกมาพรีเซนต์แลกเปลี่ยนความรู้กับเพื่อนๆ หน้าชั้นเรียนครับ!</li>
                </ul>
            </div>
        </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;">ขอเสียงปรบมือดังๆ ให้ตัวเองเลยครับ! ตอนนี้นักเรียนทุกคนกลายเป็น <strong>"พลเมืองดิจิทัล (Digital Citizen)"</strong> ที่สามารถค้นหาข้อมูลได้อย่างแม่นยำ รู้จักแยกแยะเว็บจริงเว็บปลอม และใช้เครื่องมือออนไลน์ติดต่อสื่อสารทำงานร่วมกับผู้อื่นได้อย่างยอดเยี่ยมแล้วครับ!</p>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #2196F3 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;">🧩 มินิควิซ สรุปความรู้หน่วยที่ 3</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #E3F2FD;">ทดสอบความเป๊ะก่อนปิดคอร์ส!</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: #1976D2;">ข้อที่ 1: แอปพลิเคชันใดของ Google ที่เหมาะสมที่สุดสำหรับการ "สร้างนัดหมายทำงานกลุ่ม" และแจ้งเตือนเพื่อนๆ?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Google Docs เอาไว้พิมพ์รายงานครับ ไม่ได้เอาไว้นัดหมายนะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. Google Docs (เอกสาร)</button>
                    <button onclick="checkAnswer(this, false, 'Google Maps เอาไว้ดูแผนที่นำทางครับผม')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. Google Maps (แผนที่)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! Google Calendar (ปฏิทิน) ถูกออกแบบมาเพื่อจัดการตารางเวลา สร้างนัดหมาย และสามารถดึงอีเมลเพื่อนมาเพื่อส่งการแจ้งเตือนอัตโนมัติได้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. Google Calendar (ปฏิทิน)</button>
                    <button onclick="checkAnswer(this, false, 'Google Translate เอาไว้แปลภาษาครับ ไม่ใช่ปฏิทินน้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. Google Translate (แปลภาษา)</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: #1976D2;">ข้อที่ 2: เมื่อเราใส่อีเมลของเพื่อนในช่อง "เพิ่มผู้เข้าร่วม (Add guests)" บนปฏิทิน แล้วกดบันทึก จะเกิดอะไรขึ้น?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <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;">ค. กิจกรรมนั้นจะถูกโพสต์ลงใน Facebook ของเพื่อนทุกคน</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: #1976D2;">ข้อที่ 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 = '#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>