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

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, #00B0FF 0%, #0288D1 50%, #01579B 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #01437A;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">🕵️‍♂️ หน่วยที่ 1 EP.1: นักแก้ปัญหาตัวจิ๋ว</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #E1F5FE; font-weight: bold;">คิดเป็นสเต็ป วาดผังงานชีวิตประจำวัน!</p>
    </div>

<div style="margin-bottom: 40px;">
        
        <p style="font-size: 18px;">ในแต่ละวันนักเรียน ป.5 อย่างเราเคยเจอปัญหาไหมครับ? เช่น <strong>ทรงผมไม่เรียบร้อย, ไอศกรีมละลายเลอะมือ, หรือกระเป๋านักเรียนหนักเกินไป</strong> ปัญหาเหล่านี้ทำให้เราต้องหาวิธี <strong>"แก้ปัญหา (Problem Solving)"</strong> เพื่อให้เราใช้ชีวิตได้ง่ายและมีความสุขขึ้นครับ!</p>

<h3 style="color: #0288D1; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🧠 1. วิธีแก้ปัญหาของคนเก่ง</h3>
        <p>เมื่อเจอปัญหา เราสามารถใช้ "เหตุผล" มาช่วยคิดหาวิธีแก้ได้หลายแบบเลยครับ เช่น:</p>
        
        <div style="display: flex; flex-direction: column; gap: 15px; margin-top: 15px;">
            <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;">🧩 การลองผิดลองถูก</strong>
                <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">ใช้กับปัญหาที่ไม่ซับซ้อน เช่น การต่อจิกซอว์ หรือการเล่นเกมย้ายก้านไม้ขีดไฟ ลองขยับไปเรื่อยๆ จนกว่าจะสำเร็จ</p>
            </div>
            
            <div style="background: #FAFAFA; 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>
                <p style="margin-top: 5px; margin-bottom: 0; font-size: 15px;">ถ้ามีข้อมูลเยอะๆ ให้เราค่อยๆ "ตัดสิ่งที่ไม่เกี่ยวข้องออกไปทีละข้อ" จนกว่าจะเหลือคำตอบที่ถูกต้องที่สุด (มักใช้ตารางมาช่วยแยกแยะข้อมูล)</p>
            </div>
        </div>

<h3 style="color: #0288D1; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 40px;">📐 2. รู้จักสัญลักษณ์ "ผังงาน (Flowchart)" ที่ถูกต้อง</h3>
        <p>การจะแก้ปัญหาให้ไม่พลาด เราควร <strong>"วางแผน"</strong> โดยการวาดออกมาเป็นลำดับขั้นตอนครับ เราเรียกสิ่งนี้ว่า <strong>ผังงาน</strong> ซึ่งมีสัญลักษณ์สากลที่นักเขียนโปรแกรมทุกคนต้องใช้ให้ถูกต้อง ดังนี้ครับ:</p>
        
        <div style="display: flex; flex-direction: column; gap: 15px; margin-top: 15px;">
            
            <div style="background: #E1F5FE; padding: 15px; border-radius: 10px; border: 2px solid #81D4FA; display: flex; align-items: center; overflow: hidden;">
                <div style="width: 100px; height: 45px; background-color: #FFCDD2; border: 3px solid #E53935; border-radius: 25px; flex-shrink: 0; margin-right: 20px; display: flex; align-items: center; justify-content: center;"></div>
                <div>
                    <strong style="color: #01579B; font-size: 18px;">แคปซูล (Terminator)</strong><br>
                    <span style="font-size: 15px;">ใช้บอกจุด <strong>"เริ่มต้น"</strong> และ <strong>"จบ"</strong> ของการทำงานเสมอ</span>
                </div>
            </div>

<div style="background: #E1F5FE; padding: 15px; border-radius: 10px; border: 2px solid #81D4FA; display: flex; align-items: center; overflow: hidden;">
                <div style="width: 100px; height: 50px; background-color: #FFF9C4; border: 3px solid #FBC02D; flex-shrink: 0; margin-right: 20px;"></div>
                <div>
                    <strong style="color: #01579B; font-size: 18px;">สี่เหลี่ยมผืนผ้า (Process)</strong><br>
                    <span style="font-size: 15px;">ใช้บอก <strong>"การกระทำ หรือ การทำงาน"</strong> (เช่น อาบน้ำ, ซักผ้า)</span>
                </div>
            </div>

<div style="background: #E1F5FE; padding: 15px; border-radius: 10px; border: 2px solid #81D4FA; display: flex; align-items: center; overflow: hidden;">
                <div style="width: 70px; height: 70px; background-color: #C8E6C9; border: 3px solid #4CAF50; transform: rotate(45deg); flex-shrink: 0; margin: 10px 35px 10px 15px;"></div>
                <div>
                    <strong style="color: #01579B; font-size: 18px;">ข้าวหลามตัด (Decision)</strong><br>
                    <span style="font-size: 15px;">ใช้เมื่อมี <strong>"การตัดสินใจ หรือ มีเงื่อนไข"</strong> (เช่น ฝนตกไหม? -> มีทางแยก จริง/เท็จ)</span>
                </div>
            </div>

<div style="background: #E1F5FE; padding: 15px; border-radius: 10px; border: 2px solid #81D4FA; display: flex; align-items: center; overflow: hidden;">
                <div style="width: 100px; text-align: center; flex-shrink: 0; margin-right: 20px;">
                    <span style="font-size: 40px; color: #1976D2; line-height: 1;">⬇️</span>
                </div>
                <div>
                    <strong style="color: #01579B; font-size: 18px;">ลูกศร (Arrow)</strong><br>
                    <span style="font-size: 15px;">ใช้บอก <strong>"ทิศทาง"</strong> ของขั้นตอนการทำงาน</span>
                </div>
            </div>

</div>

<h3 style="color: #0288D1; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 40px;">🌧️ 3. ตัวอย่าง: ผังงานการซักผ้าในวันหยุด</h3>
        <p>สมมติว่านักเรียนจะซักผ้า แต่ต้องดูสภาพอากาศด้วย เราจะเขียนผังงานได้แบบนี้ครับ:</p>
        
        <div style="background: #FFF8E1; padding: 20px; border-radius: 12px; margin-top: 15px; border: 1px dashed #FFB300; text-align: center;">
            <p style="margin: 0; font-weight: bold; color: #E65100;">(เริ่มต้น) ⬇️</p>
            <p style="margin: 5px 0; color: #333;">👉 ตรวจสอบเงื่อนไข: <strong>"ฝนตกหรือไม่?"</strong> (ใช้สัญลักษณ์ข้าวหลามตัด) 👈</p>
            <p style="margin: 5px 0; color: #2E7D32;">ถ้า <strong>จริง</strong> ➡️ ทำการบ้าน ➡️ ทำความสะอาดบ้าน ➡️ <strong>(จบ)</strong></p>
            <p style="margin: 5px 0; color: #C62828;">ถ้า <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, #0288D1 0%, #01579B 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: #E1F5FE;">ทดสอบความเป็นนักแก้ปัญหา!</p>
        </div>
        
        <div style="border: 2px solid #01579B; 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: #0288D1;">ข้อที่ 1: หากนักเรียนต้องการเขียนจุด "เริ่มต้น" และ "จบ" ของผังงาน จะต้องใช้สัญลักษณ์รูปทรงใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'สี่เหลี่ยมผืนผ้า เอาไว้ใช้กับขั้นตอนการกระทำ หรือ Process ครับ')" 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, 'เยี่ยมมากครับ! รูปทรงแคปซูล (Terminator) ใช้สำหรับเป็นจุด เริ่มต้น และ จบ ของผังงานเสมอครับ')" 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: 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: #0288D1;">ข้อที่ 2: "ฝนตกหรือไม่?" เป็นขั้นตอนที่ต้องมีการตัดสินใจและมีทางแยก (จริง/เท็จ) ควรใช้สัญลักษณ์ใดในผังงาน?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! ข้าวหลามตัด (Decision) คือสัญลักษณ์สำหรับการตั้งคำถามเงื่อนไข ซึ่งจะมีลูกศรแยกออกไป 2 ทางเสมอ (เช่น จริง และ เท็จ) ครับ')" 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>
                    <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: #0288D1;">ข้อที่ 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, 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 = '#E1F5FE';
        btn.style.borderColor = '#0288D1';
        btn.style.color = '#01579B';
        btn.style.opacity = '1';
        feedback.style.background = '#E1F5FE';
        feedback.style.color = '#01579B';
        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>