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

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, #E64A19 0%, #FF5722 50%, #FF8A65 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #BF360C;">
        <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.5: นำเสนอผลงานสุดปัง</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FBE9E7; font-weight: bold;">ด้วย Microsoft PowerPoint (Office 365)</p>
    </div>

<div style="margin-bottom: 40px;">
        
        <p style="font-size: 18px;">เมื่อเรามีข้อมูลครบ และมีรูปภาพสวยๆ พร้อมแล้ว ขั้นตอนสุดท้ายคือการนำข้อมูลมา "โชว์" ให้เพื่อนๆ และคุณครูดูครับ โปรแกรมที่เกิดมาเพื่อหน้าที่นี้โดยเฉพาะก็คือ <strong>Microsoft PowerPoint (ไมโครซอฟต์ พาวเวอร์พอยต์)</strong> ครับ!</p>

<h3 style="color: #BF360C; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🌐 1. เปิดสไลด์ใหม่ผ่าน Office 365</h3>
        <p>นักเรียนสามารถเปิดใช้งานได้ง่ายๆ ด้วยบัญชีของโรงเรียนเลยครับ:</p>
        
        <div style="background: #FBE9E7; padding: 15px; border-radius: 12px; border: 1px solid #FFAB91; margin-top: 15px;">
            <ul style="margin-top: 0; padding-left: 20px; color: #D84315; margin-bottom: 0; line-height: 1.8; font-size: 15px;">
                <li>เข้าไปที่เว็บไซต์ <strong>Office.com</strong> แล้วล็อกอินด้วยอีเมลโรงเรียน</li>
                <li>มองหาไอคอน <strong>ตัว P สีส้มแดง</strong> แล้วคลิกเลย!</li>
                <li>เลือก <strong>"งานนำเสนอเปล่า (Blank Presentation)"</strong> เพื่อเปิดหน้ากระดาษสไลด์แผ่นแรกของเราขึ้นมา (และอย่าลืมว่าระบบจะ <em>AutoSave เซฟงานให้อัตโนมัติลง OneDrive</em> นะครับ!)</li>
            </ul>
        </div>

<h3 style="color: #BF360C; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">🎨 2. พิมพ์ข้อความและแต่งสีสัน</h3>
        <p>ในหน้าสไลด์ จะมีกรอบสี่เหลี่ยมเตรียมไว้ให้เราพิมพ์ข้อความครับ เราเรียกว่า "กล่องข้อความ (Text Box)"</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 #FF5722; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <strong style="color: #D84315; font-size: 16px;">สเต็ปการตกแต่ง:</strong>
                <ol style="margin-top: 5px; margin-bottom: 0; padding-left: 20px; font-size: 15px;">
                    <li>คลิกในกล่องที่เขียนว่า "คลิกเพื่อเพิ่มชื่อเรื่อง" แล้วพิมพ์คำว่า <strong>ผลไม้ของฉัน</strong></li>
                    <li>ใช้เมาส์ <strong>ลากคลุมดำ (ปาดทึบ)</strong> ข้อความที่พิมพ์ไป</li>
                    <li>ไปที่เมนู <strong>หน้าแรก (Home)</strong> แล้วเปลี่ยนสีตัวอักษร หรือปรับขนาดให้ใหญ่เบิ้มๆ ได้ตามใจชอบเลยครับ!</li>
                </ol>
            </div>
        </div>

<h3 style="color: #BF360C; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">🖼️ 3. แทรกรูปภาพให้สไลด์ดูมีชีวิต!</h3>
        <p>สไลด์ที่ดีต้องมีภาพประกอบครับ วิธีการแทรกรูปภาพจะคล้ายกับโปรแกรม Word เลย:</p>
        
        <div style="background: #FFF8E1; padding: 20px; border-radius: 12px; border: 1px solid #FFE082; margin-top: 15px;">
            <ul style="margin-top: 0; padding-left: 20px; color: #F57F17; margin-bottom: 0; line-height: 1.8; font-size: 15px;">
                <li>ไปที่เมนู <strong>แทรก (Insert)</strong> 👉 เลือก <strong>รูปภาพ (Pictures)</strong></li>
                <li>เลือก <strong>อุปกรณ์นี้ (This Device)</strong> แล้วคลิกเลือกรูปผลไม้ที่เราเคยดาวน์โหลดเก็บไว้</li>
                <li>เมื่อรูปโผล่ขึ้นมาบนสไลด์ นักเรียนสามารถ <strong>คลิกที่มุมรูปภาพแล้วลาก</strong> เพื่อย่อ/ขยายขนาด หรือคลิกตรงกลางรูปภาพเพื่อย้ายตำแหน่งให้อยู่ตรงกลางสไลด์ได้ครับ</li>
            </ul>
        </div>

<h3 style="color: #D84315; border-left: 5px solid #4CAF50; padding-left: 15px; font-size: 22px; margin-top: 40px;">👩‍🍳 4. โครงงาน Active Learning: เมนูอาหารที่ฉันชอบ!</h3>
        
        <div style="background: linear-gradient(135deg, #FFFFFF 0%, #FFF3E0 100%); border: 2px dashed #FF9800; padding: 25px; border-radius: 15px; margin-top: 20px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
            <h3 style="color: #E65100; margin-top: 0; font-size: 22px;">🍳 ภารกิจ: ออกแบบป้ายเมนูอาหารสุดน่ากิน!</h3>
            <p style="font-size: 16px; color: #333; text-align: left;">ให้นักเรียนจับคู่กับเพื่อน แล้วเดินไป <strong>"สำรวจและสอบถาม"</strong> เพื่อนๆ ในห้องว่า <em>"เมนูอาหารที่ชอบที่สุดคืออะไร?"</em> เมื่อจดข้อมูลได้แล้ว ให้นำมาจัดทำเป็นสไลด์นำเสนอด้วย PowerPoint!</p>
            <ul style="text-align: left; margin-top: 10px; color: #D84315; font-size: 15px; font-weight: bold;">
                <li>สไลด์ต้องมีชื่อเมนูอาหาร</li>
                <li>มีรูปภาพอาหารที่ค้นหาจากอินเทอร์เน็ต (อย่าลืมอ้างอิงเว็บไซต์ด้วยนะ)</li>
                <li>มีตัวเลขบอกว่า "มีเพื่อนชอบเมนูนี้กี่คน?"</li>
            </ul>
            <p style="margin-top: 15px; color: #BF360C; font-weight: bold; font-size: 16px;">ทำเสร็จแล้วอย่าลืมกดปุ่ม "นำเสนอสไลด์" โชว์ผลงานให้เพื่อนๆ ดูหน้าชั้นเรียนนะครับ!</p>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #E64A19 0%, #BF360C 100%); 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: #FBE9E7;">ทดสอบความพร้อมก่อนไปพรีเซนต์งานหน้าห้อง!</p>
        </div>
        
        <div style="border: 2px solid #BF360C; 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: #D84315;">ข้อที่ 1: โปรแกรม Microsoft PowerPoint มีจุดเด่นในเรื่องใดมากที่สุด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'การคำนวณตัวเลขและสร้างกราฟตาราง เป็นหน้าที่หลักของ Excel ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. การคำนวณตัวเลขและสร้างกราฟตารางจำนวนมาก</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! PowerPoint ออกแบบมาเพื่อสร้าง " สไลด์นำเสนอ"="" ที่สามารถใส่ตัวหนังสือรูปภาพและจัดหน้าจอให้สวยงามเพื่อโชว์ให้คนอื่นดูครับ')"="" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. การสร้างสไลด์นำเสนอข้อมูล ที่ผสมผสานตัวอักษรและรูปภาพให้สวยงาม</button>
                    <button onclick="checkAnswer(this, false, 'การวาดรูปศิลปะ เหมาะกับโปรแกรม Paint มากกว่าครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. การวาดรูปศิลปะด้วยแปรงพู่กันสีน้ำ</button>
                    <button onclick="checkAnswer(this, false, 'การพิมพ์รายงานที่มีหลายๆ สิบหน้า เหมาะกับการใช้ Word มากกว่าครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. การพิมพ์รายงานแบบเรียงความยาวๆ 50 หน้า</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: #D84315;">ข้อที่ 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;">ก. เมนู หน้าแรก (Home)</button>
                    <button onclick="checkAnswer(this, false, 'เมนูออกแบบ เอาไว้เปลี่ยนพื้นหลังหรือธีมของสไลด์ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เมนู ออกแบบ (Design)</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! จำไว้เลยว่าถ้าอยากเพิ่มอะไรใหม่ๆ เข้ามาในสไลด์ (รูปภาพ, วิดีโอ, รูปร่าง) ต้องไปที่เมนู " แทรก="" (insert)"="" เสมอครับ')"="" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เมนู แทรก (Insert)</button>
                    <button onclick="checkAnswer(this, false, 'เมนูมุมมอง เอาไว้ปรับขนาดการมองเห็นหน้าจอครับ ไม่ได้เอาไว้เพิ่มรูปภาพ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. เมนู มุมมอง (View)</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: #D84315;">ข้อที่ 3: ข้อใดคือความสะดวกสบายในการทำโครงงานด้วย "PowerPoint บน Office 365" ของโรงเรียน?</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, 'สุดยอดครับ! ระบบ Office 365 จะช่วย AutoSave งานของเราลงบนก้อนเมฆ (OneDrive) ตลอดเวลา ทำให้เราสามารถกลับไปเปิดสไลด์ทำต่อที่คอมพิวเตอร์ที่บ้านได้เลย โดยไม่ต้องพึ่งแฟลชไดร์ฟครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. งานจะถูกบันทึกอัตโนมัติบน OneDrive ทำให้ไฟล์ไม่หาย และสามารถกลับไปทำต่อที่บ้านได้</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 = '#FBE9E7';
        btn.style.borderColor = '#D84315';
        btn.style.color = '#BF360C';
        btn.style.opacity = '1';
        feedback.style.background = '#FBE9E7';
        feedback.style.color = '#BF360C';
        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>