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

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 15px rgba(0,0,0,0.08);">
    
    <div style="background: linear-gradient(135deg, #FBC02D 0%, #F57C00 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #FFEB3B;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #FFFFFF;">🐱 หน่วยที่ 4: โครงงานแอนิเมชันและเกมด้วย Scratch</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FFFFFF; font-weight: bold;">EP.5 ตะลุยโจทย์และโปรเจกต์ Active Learning</p>
    </div>

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

<h3 style="color: #E65100; border-left: 5px solid #FBC02D; padding-left: 15px; font-size: 22px; margin-top: 30px;">🕵️‍♂️ 1. นักสืบโค้ด: ทำไมต้องตั้งค่าเริ่มต้น?</h3>
        <p>เวลาเราสร้างเกมหรือแอนิเมชัน เมื่อผู้เล่นกดปุ่มธงเขียว <span style="background-color: #ffbf00; color: white; padding: 2px 8px; border-radius: 4px; font-weight: bold;">🚩</span> สิ่งแรกที่โปรแกรมเมอร์ที่ดีต้องทำคือ <strong>"การตั้งค่าเริ่มต้น (Initialization)"</strong> เช่น:</p>
        
        <div style="background-color: #fffde7; padding: 20px; border-radius: 10px; border-left: 5px solid #FBC02D; margin: 20px 0; line-height: 2.2;">
            <span style="background-color: #4c97ff; color: white; padding: 6px 12px; border-radius: 5px; font-weight: bold; font-family: 'Arial', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">go to x: 0 y: 0</span> <em style="color: #666; font-size: 14px; margin-left: 10px;">(ให้ตัวละครกลับมาอยู่ตรงกลางจอก่อนเสมอ)</em><br>
            <span style="background-color: #ff8c1a; color: white; padding: 6px 12px; border-radius: 5px; font-weight: bold; font-family: 'Arial', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">set [score v] to 0</span> <em style="color: #666; font-size: 14px; margin-left: 10px;">(ล้างคะแนนเก่าทิ้งให้เป็น 0)</em>
        </div>
        <p style="margin: 0; color: #D32F2F; font-style: italic;">💡 ถ้าไม่ทำแบบนี้ เวลาเล่นเกมรอบใหม่ ตัวละครอาจจะไปติดอยู่ขอบจอ หรือคะแนนอาจจะค้างจากรอบที่แล้ว ทำให้เกมพังได้!</p>

<h3 style="color: #E65100; border-left: 5px solid #FBC02D; padding-left: 15px; font-size: 22px; margin-top: 30px;">🧮 2. ไขปริศนาการวนซ้ำ (Loop & Condition)</h3>
        <p>พิจารณาโค้ดตัวอย่างนี้ หากเรากำหนดตัวแปรให้เป็นตัวนับรอบ:</p>
        
        <div style="background-color: #fffde7; padding: 20px; border-radius: 10px; border-left: 5px solid #FBC02D; margin: 20px 0; line-height: 2.2;">
            <span style="background-color: #ff8c1a; color: white; padding: 6px 12px; border-radius: 5px; font-weight: bold; font-family: 'Arial', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">set [count v] to 0</span><br>
            <span style="background-color: #ffab19; color: white; padding: 6px 12px; border-radius: 5px; font-weight: bold; font-family: 'Arial', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">repeat until <span style="background-color: #59c059; padding: 2px 8px; border-radius: 10px; margin-left: 5px;">(count) > 3</span></span><br>
            <span style="background-color: rgba(0,0,0,0.05); border-left: 3px dashed #FBC02D; padding: 2px 10px; margin-left: 20px; border-radius: 4px;">
                <span style="background-color: #ff8c1a; color: white; padding: 6px 12px; border-radius: 5px; font-weight: bold; font-family: 'Arial', sans-serif; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">change [count v] by 1</span>
            </span>
        </div>
        <p style="margin-bottom: 0;">โปรแกรมจะทำงานเมื่อ count เป็น 0, 1, 2, และ 3 (รวมทั้งหมด <strong>4 รอบ</strong>) และจะหยุดทำเมื่อ count เปลี่ยนเป็น 4 (เพราะ 4 > 3 เป็นจริง) การนับรอบถือเป็นเทคนิคสำคัญในการควบคุมเกมเลยนะ!</p>

<h3 style="color: #E65100; border-left: 5px solid #FBC02D; padding-left: 15px; font-size: 22px; margin-top: 40px;">🚀 3. โครงงานสู่นวัตกรรม (Innovation Project)</h3>
        <div style="background-color: #E8F5E9; border: 2px dashed #4CAF50; padding: 30px; border-radius: 15px; margin-top: 20px; text-align: center;">
            <h3 style="color: #2E7D32; margin-top: 0; font-size: 24px;">🌟 ถึงเวลาปล่อยของ! 🌟</h3>
            <p style="font-size: 16px; color: #333;"><strong>ภารกิจ:</strong> ให้นักเรียนจับกลุ่ม 3-4 คน ช่วยกันระดมสมองออกแบบ <strong>"โปรแกรมเล่าเรื่องนิทาน"</strong> หรือ <strong>"มินิเกมโต้ตอบ"</strong></p>
            <ul style="text-align: left; display: inline-block; margin: 10px 0; line-height: 1.8; color: #2E7D32; font-weight: bold;">
                <li>✅ มีการเปลี่ยนท่าทางตัวละคร (Costume) หรือเคลื่อนที่ (Motion)</li>
                <li>✅ มีเสียงประกอบ (Sound) ให้เข้ากับบรรยากาศ</li>
                <li>✅ มีการใช้ตัวแปร (Variable) หรือการถาม-ตอบรับข้อมูล (Ask & Answer)</li>
            </ul>
            <p style="margin-top: 15px; color: #1B5E20; font-weight: bold;">เตรียมผลงานให้พร้อม แล้วมานำเสนอความเจ๋งให้เพื่อนๆ ดูหน้าเว็บไซต์ Smartyquizkids.com กันเลย!</p>
        </div>
        
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #E67E22; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFFFFF;">✍️ มินิควิซ ประเมินตนเองก่อนทำโปรเจกต์</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #FFF3E0;">ทบทวนความรู้รวมยอด Scratch! (ไม่เก็บคะแนน)</p>
        </div>
        
        <div style="border: 2px solid #E67E22; 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: #E67E22;">ข้อที่ 1: เหตุใดเราจึงควรใส่บล็อก "go to x: ... y: ..." ไว้ต่อจากบล็อกธงเขียว เสมอในการสร้างแอนิเมชัน?</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, 'อันนั้นต้องใช้บล็อก switch backdrop จ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เพื่อเปลี่ยนฉากหลังให้เป็นสีขาว</button>
                    <button onclick="checkAnswer(this, false, 'การเปลี่ยนชุดต้องใช้ next costume จ้า')" 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: #E67E22;">ข้อที่ 2: หากนักเรียนตั้งค่าตัวแปร count เป็น 0 แล้วใช้คำสั่ง "repeat until (count > 2)" โดยภายในลูปมีการเพิ่มค่าทีละ 1 ลูปนี้จะวนกี่รอบ?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'น้อยไปจ้า ลองนับตอนที่เป็น 0, 1, 2 ดูนะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. 2 รอบ</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! มันจะทำงานตอนที่ count เป็น 0, เป็น 1 และเป็น 2 (รวม 3 รอบ) และจะหยุดเมื่อ count กลายเป็น 3 (เพราะ 3 > 2 เป็นจริง)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. 3 รอบ</button>
                    <button onclick="checkAnswer(this, false, 'มากไปนิดนึงจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. 4 รอบ</button>
                    <button onclick="checkAnswer(this, false, 'ลูปมีเงื่อนไขหยุดอยู่ จึงไม่ทำงานตลอดกาลจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. วนไม่รู้จบ (Infinity)</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: #E67E22;">ข้อที่ 3: หากต้องการให้ผลงานนิทานมีอรรถรสมากขึ้น การใส่ "เสียงบรรยาย" หรือ "ดนตรีประกอบ" ต้องเลือกใช้กลุ่มบล็อกสีใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! กลุ่มบล็อก Sound สำหรับจัดการเสียงทั้งหมดจะใช้สีชมพูอมม่วง (Magenta)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. สีชมพูอมม่วง (Sound)</button>
                    <button onclick="checkAnswer(this, false, 'นี่คือหมวดรูปลักษณ์ (พูดข้อความ เปลี่ยนชุด) จ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. สีม่วง (Looks)</button>
                    <button onclick="checkAnswer(this, false, 'นี่คือหมวดการเคลื่อนที่จ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. สีฟ้า (Motion)</button>
                    <button onclick="checkAnswer(this, false, 'นี่คือหมวดรับรู้/ถามตอบจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. สีฟ้าอ่อน (Sensing)</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: #E67E22;">ข้อที่ 4: จุดประสงค์สำคัญที่สุดของกิจกรรม "โครงงานสู่นวัตกรรม (Active Learning)" คืออะไร?</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, 'โครงงานในวิชานี้เน้นการเขียนโปรแกรม Scratch จ้า ไม่ใช่แค่พิมพ์รายงาน')" 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 = '#FFF8E1';
        btn.style.borderColor = '#FBC02D';
        btn.style.color = '#E65100';
        btn.style.opacity = '1';
        feedback.style.background = '#FFF8E1';
        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>