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

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, #FBC02D 0%, #F9A825 50%, #F57F17 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #E65100;">
        <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.2: ภารกิจผึ้งน้อยหาน้ำหวาน</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FFFDE7; font-weight: bold;">รู้จักพลังของ "คำสั่งวนซ้ำ" (Loop)!</p>
    </div>

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

<h3 style="color: #E65100; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🌸 1. ภารกิจ: พาผึ้งไปหาดอกไม้</h3>
        <p>สมมติว่าเจ้าผึ้งน้อยต้องเดินไปข้างหน้า 5 ก้าว เพื่อไปเก็บน้ำหวานที่ดอกไม้ ถ้าเราเขียนโปรแกรมแบบปกติ เราต้องวางบล็อก <span style="background: #E1F5FE; padding: 2px 6px; border-radius: 4px; color: #0288D1;">ไปข้างหน้า</span> ถึง 5 อันต่อกันเลยนะ!</p>
        
        <div style="background: #FFF8E1; padding: 15px; border-radius: 12px; border: 1px solid #FFE082; margin: 15px 0; text-align: center;">
            <p style="font-weight: bold; color: #D84315; margin-bottom: 10px;">เปรียบเทียบความแตกต่าง:</p>
            <div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 10px;">
                <div style="background: white; padding: 10px; border-radius: 8px; border: 1px solid #ddd; min-width: 150px;">
                    <p style="font-size: 14px; margin: 0 0 5px 0;"><strong>แบบธรรมดา (ยาว)</strong></p>
                    <div style="font-size: 13px; text-align: left; padding-left: 10px;">
                        🚶 ไปข้างหน้า<br>🚶 ไปข้างหน้า<br>🚶 ไปข้างหน้า<br>🚶 ไปข้างหน้า<br>🚶 ไปข้างหน้า
                    </div>
                </div>
                <div style="background: #F3E5F5; padding: 10px; border-radius: 8px; border: 1px solid #CE93D8; min-width: 150px;">
                    <p style="font-size: 14px; margin: 0 0 5px 0;"><strong>แบบใช้ Loop (สั้น!)</strong></p>
                    <div style="font-size: 13px; text-align: left; padding-left: 10px; border-left: 4px solid #9C27B0;">
                        🔄 <strong>ทำซ้ำ 5 ครั้ง</strong><br>
                            🚶 ไปข้างหน้า
                    </div>
                </div>
            </div>
        </div>

<h3 style="color: #E65100; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">🧩 2. การใช้งานบล็อก "ทำซ้ำ" ใน Code.org</h3>
        <p>นักเรียนสามารถทำตามขั้นตอนในหนังสือหน้า 104-105 ได้เลยครับ โดยมีเคล็ดลับการลากบล็อกดังนี้:</p>
        <ul style="margin-top: 0; font-size: 15px; line-height: 1.8;">
            <li>1️⃣ ลากบล็อกสีชมพูที่เขียนว่า <strong>"ทำซ้ำ... ครั้ง"</strong> มาวาง</li>
            <li>2️⃣ พิมพ์ตัวเลขจำนวนครั้งที่ต้องการลงในช่องว่าง</li>
            <li>3️⃣ นำคำสั่งที่ต้องการให้ทำซ้ำ (เช่น ไปข้างหน้า หรือ เก็บน้ำหวาน) <strong>ใส่เข้าไปข้างใน</strong> ปากของบล็อกทำซ้ำ</li>
        </ul>

<h3 style="color: #E65100; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 35px;">🐝 3. วิเคราะห์ปัญหา: เก็บน้ำหวาน 3 หยด</h3>
        <p>ถ้าที่ดอกไม้มีน้ำหวานอยู่ 3 หยด อัลกอริทึมที่ถูกต้องคือ:</p>
        <div style="background: #E8F5E9; padding: 15px; border-radius: 8px; margin-top: 15px; font-size: 15px; color: #2E7D32; border-left: 5px solid #4CAF50;">
            เมื่อเดินไปถึงดอกไม้แล้ว 👉 ให้ใช้คำสั่ง <strong>วนซ้ำ 3 ครั้ง</strong> 👉 ข้างในใส่บล็อก <strong>"เก็บน้ำหวาน"</strong> เพียงเท่านี้เจ้าผึ้งก็จะได้น้ำหวานครบถ้วนโดยที่เราไม่ต้องวางบล็อกเก็บน้ำหวาน 3 อันครับ!
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #F9A825 0%, #E65100 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ ทบทวนความรู้ EP.2</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #FFFDE7;">ทดสอบสมองประลองโค้ดดิ้ง!</p>
        </div>
        
        <div style="border: 2px solid #E65100; 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: #E65100;">ข้อที่ 1: ประโยชน์ที่สำคัญที่สุดของการใช้บล็อกคำสั่ง "ทำซ้ำ (Repeat/Loop)" คืออะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Loop ไม่ได้เปลี่ยนสีหน้าจอครับ หน้าที่นั้นเป็นของบล็อกชุดตกแต่งนะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ทำให้หน้าจอคอมพิวเตอร์มีสีสันสวยงามขึ้น</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! การใช้ Loop จะช่วยลดจำนวนบล็อกคำสั่งที่ซ้ำๆ กัน ทำให้โปรแกรมสั้นลง เป็นระเบียบ และแก้ไขง่ายครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ช่วยให้เขียนโปรแกรมได้สั้นลงและลดการวางบล็อกคำสั่งที่ซ้ำกัน</button>
                    <button onclick="checkAnswer(this, false, 'ไม่เกี่ยวกัันครับ ความเร็วเน็ตขึ้นอยู่กับสัญญาณ Wi-Fi นะครับ ^^')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ทำให้ความเร็วของอินเทอร์เน็ตเพิ่มขึ้นเป็น 2 เท่า</button>
                    <button onclick="checkAnswer(this, false, 'Loop ไม่ได้ช่วยเรื่องพิกเซลครับ พิกเซลคือหน่วยวัดระยะทางนะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ทำให้ตัวละครมีขนาดใหญ่ขึ้น 100 พิกเซล</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: #E65100;">ข้อที่ 2: หากต้องการสั่งให้ผึ้งเดินไปข้างหน้า 5 ก้าว นักเรียนควรวางคำสั่งอย่างไรในบล็อกทำซ้ำ?</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;">ก. ทำซ้ำ 5 ครั้ง [หันซ้าย]</button>
                    <button onclick="checkAnswer(this, false, 'แบบนี้ผึ้งจะแค่เก็บน้ำหวานอยู่ที่เดิม 5 รอบ ไม่ได้เดินไปไหนครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ทำซ้ำ 5 ครั้ง [เก็บน้ำหวาน]</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! การใส่คำสั่ง ไปข้างหน้า ไว้ในบล็อก ทำซ้ำ 5 ครั้ง จะได้ผลลัพธ์เท่ากับการวางบล็อกเดิน 5 อันต่อกันเลยครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ทำซ้ำ 5 ครั้ง [ไปข้างหน้า]</button>
                    <button onclick="checkAnswer(this, false, 'การใส่เลข 1 จะทำให้ผึ้งเดินแค่ก้าวเดียวครับ ไม่ถึงดอกไม้นะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ทำซ้ำ 1 ครั้ง [ไปข้างหน้า]</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: #E65100;">ข้อที่ 3: ถ้าโปรแกรมเมอร์เผลอใส่เลข 0 ลงในช่องวนซ้ำ จะเกิดอะไรขึ้นกับตัวละคร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ยอดเยี่ยมครับ! เลข 0 หมายถึงไม่มีการทำงาน ดังนั้นคอมพิวเตอร์จะข้ามคำสั่งข้างในบล็อกนั้นไปเลย ตัวละครจึงจะยืนนิ่งอยู่ที่เดิมครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ตัวละครจะไม่เคลื่อนที่หรือทำคำสั่งใดๆ ในบล็อกนั้นเลย</button>
                    <button onclick="checkAnswer(this, false, 'การเดินไปเรื่อยๆ ไม่มีวันหยุดเรียกว่า Infinite Loop ครับ ไม่ได้เกิดจากเลข 0')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ตัวละครจะเดินไปข้างหน้าเรื่อยๆ ไม่มีวันหยุด</button>
                    <button onclick="checkAnswer(this, false, 'เลข 0 ไม่ได้สั่งให้ตัวละครหายตัวไปครับผม ^^')" 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 = '#FFF9C4';
        btn.style.borderColor = '#FBC02D';
        btn.style.color = '#E65100';
        btn.style.opacity = '1';
        feedback.style.background = '#FFF9C4';
        feedback.style.color = '#E65100';
        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>