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

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, #009688 0%, #00796B 50%, #004D40 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #00251A;">
        <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.5: โครงงาน Active Learning</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #E0F2F1; font-weight: bold;">สร้างอัลกอริทึมวาดรูป & ประดิษฐ์บอร์ดเกม!</p>
    </div>

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

<h3 style="color: #00796B; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">📐 1. อัลกอริทึมวาดรูปสี่เหลี่ยม (การทำซ้ำ)</h3>
        <p>ถ้าเราจะสั่งให้คอมพิวเตอร์ลากเส้นวาดรูป "สี่เหลี่ยมจัตุรัส" เราไม่จำเป็นต้องเขียนคำสั่ง "เดินหน้า-เลี้ยวซ้าย" ถึง 4 รอบให้เมื่อยมือครับ เราสามารถใช้ <strong>"เงื่อนไขการทำซ้ำ (Loop)"</strong> มาช่วยย่ออัลกอริทึมให้สั้นลงได้ดังนี้ครับ:</p>
        
        <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
            <div style="background: #E0F2F1; padding: 20px; border-radius: 12px; border: 1px solid #B2DFDB; box-shadow: 0 4px 8px rgba(0,0,0,0.05);">
                <ol style="margin: 0; padding-left: 20px; font-size: 16px; color: #00695C; line-height: 1.8; font-weight: bold;">
                    <li><span style="color: #333; font-weight: normal;">เริ่มต้น (เริ่มโปรแกรม)</span></li>
                    <li><span style="color: #333; font-weight: normal;">รับค่าระยะทางความยาวของเส้น (สมมติให้เดิน 100 ก้าว)</span></li>
                    <li style="color: #D32F2F;"><span style="color: #D32F2F; font-weight: bold;">เริ่มทำซ้ำ 4 ครั้ง (เพราะสี่เหลี่ยมมี 4 ด้าน)</span>
                        <ul style="margin-top: 5px; padding-left: 20px; color: #333; font-weight: normal; list-style-type: disc;">
                            <li>เดินหน้าไปเป็นระยะทาง 100 ก้าว (วาดเส้น)</li>
                            <li>หันซ้ายเป็นมุม 90 องศา (เข้ามุมพอดี)</li>
                        </ul>
                    </li>
                    <li><span style="color: #333; font-weight: normal;">จบการทำงาน (ได้รูปสี่เหลี่ยมจัตุรัสเป๊ะ!)</span></li>
                </ol>
            </div>
        </div>

<h3 style="color: #00796B; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 40px;">🎨 2. โครงงานสู่นวัตกรรม: มาสร้างเกมซูโดกุกัน!</h3>
        <p>หลังจากที่เราฝึกเล่นซูโดกุในมือถือหรือคอมพิวเตอร์ไปแล้ว วันนี้เราจะมาสร้าง <strong>"บอร์ดเกมซูโดกุ"</strong> ของตัวเองแบบ Offline เพื่อเอาไปเล่นกับเพื่อนๆ ในห้องกันครับ!</p>
        
        <div style="background: #FFF3E0; padding: 20px; border-radius: 12px; border: 1px dashed #FF9800; margin-top: 15px;">
            <strong style="color: #E65100; font-size: 18px;">🛠️ สเต็ปการสร้างเกม:</strong>
            <ul style="margin-top: 10px; padding-left: 20px; color: #555; line-height: 1.8; font-size: 15px;">
                <li><strong>ขั้นที่ 1:</strong> จับกลุ่มกับเพื่อน นำกระดาษแข็งมาตีตารางขนาด 9×9 ช่อง (แบ่งเป็นกรอบย่อย 3x3 จำนวน 9 กรอบ)</li>
                <li><strong>ขั้นที่ 2:</strong> สร้าง <strong>"โจทย์ (ปริศนาเริ่มต้น)"</strong> โดยเติมตัวเลข 1-9 ลงไปบางช่อง (อย่าลืมเช็กนะว่าต้องไม่ซ้ำกันในแนวนอน แนวตั้ง และกรอบย่อย)</li>
                <li><strong>ขั้นที่ 3:</strong> นำบอร์ดเกมของเรา ไปแลกเปลี่ยนกับกลุ่มเพื่อนกลุ่มอื่นให้ลองเล่นไขปริศนาดู!</li>
                <li><strong>ขั้นที่ 4:</strong> มาสรุปผลกันว่า เพื่อนๆ ใช้วิธีการใช้เหตุผลแก้ปัญหาอย่างไรเพื่อเอาชนะเกมของเรา?</li>
            </ul>
        </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;">🎓 จบหน่วยที่ 1 อย่างสมบูรณ์แบบ! 🎓</p>
            <p style="margin: 10px 0 0 0; font-size: 16px; color: #333;">ปรบมือให้ตัวเองดังๆ เลยครับ! ตอนนี้นักเรียนทุกคนได้กลายเป็นยอดนักแก้ปัญหา ที่รู้จักการคิดอย่างเป็นระบบ การวาดผังงาน และการหาความสัมพันธ์แล้วครับ นำวิชาเหล่านี้ไปใช้ในชีวิตประจำวันและโลกคอมพิวเตอร์ได้เลย!</p>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #00796B 0%, #004D40 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ สรุปความรู้หน่วยที่ 1</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #E0F2F1;">บททดสอบสุดท้ายของยอดนักแก้ปัญหา!</p>
        </div>
        
        <div style="border: 2px solid #004D40; 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: #00796B;">ข้อที่ 1: หากนักเรียนเขียนโปรแกรมให้ "เดินหน้า 100 ก้าว จากนั้นเลี้ยว 90 องศา" และตั้งค่าให้ <span style="color: red;">ทำซ้ำ 4 รอบ</span> จะได้รูปภาพใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'สามเหลี่ยมมี 3 ด้าน ต้องทำซ้ำ 3 รอบ และใช้มุมเลี้ยว 120 องศาครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. รูปสามเหลี่ยม</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! การหัน 90 องศาคือการเข้ามุมฉาก และการทำซ้ำ 4 รอบคือการวาด 4 ด้าน ผลลัพธ์จึงเป็น รูปสี่เหลี่ยมจัตุรัส ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. รูปสี่เหลี่ยมจัตุรัส</button>
                    <button onclick="checkAnswer(this, false, 'วงกลมต้องหันมุมเล็กๆ (เช่น 1 องศา) และทำซ้ำ 360 รอบครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. รูปวงกลม</button>
                    <button onclick="checkAnswer(this, false, 'หกเหลี่ยมต้องทำซ้ำ 6 รอบ และเลี้ยว 60 องศาครับ')" 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: #00796B;">ข้อที่ 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 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: #00796B;">ข้อที่ 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, false, 'ต้องประมวลผล (คิดคำนวณ) ก่อนถึงจะแสดงผลลัพธ์ได้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. รับข้อมูล -> แสดงผล -> ประมวลผล</button>
                    <button onclick="checkAnswer(this, true, 'สุดยอดที่สุดครับ! ระบบคอมพิวเตอร์เริ่มจาก รับข้อมูล (Input) -> ประมวลผล (Process) -> แสดงผลข้อมูล (Output) เสมอครับ')" 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 = '#E0F2F1';
        btn.style.borderColor = '#009688';
        btn.style.color = '#004D40';
        btn.style.opacity = '1';
        feedback.style.background = '#E0F2F1';
        feedback.style.color = '#004D40';
        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>