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

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, #2E7D32 0%, #43A047 50%, #4CAF50 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #1B5E20;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">🏃‍♂️ EP.3: เติมชีวิตด้วยท่าทาง (Animation & Movement)</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #C8E6C9; font-weight: bold;">เปลี่ยนตัวละครที่ยืนนิ่ง ให้มีชีวิตชีวาเหมือนการ์ตูนแอนิเมชัน!</p>
    </div>

<div style="margin-bottom: 30px;">
        
        <p style="font-size: 18px; padding: 0 10px;">ถ้านิทานของเรามีแต่นักแสดงยืนคุยกันนิ่งๆ เป็นรูปปั้นคงจะน่าเบื่อแย่เลย วันนี้เราจะมารับบทเป็น <b>"แอนิเมเตอร์"</b> (Animator) สั่งให้ตัวละครขยับแขนขา และเดินไปมาบนฉากได้อย่างนุ่มนวลและเป็นธรรมชาติครับ</p>

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #E8F5E9; padding: 20px; border-radius: 12px; margin-top: 25px; border-left: 5px solid #4CAF50; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <div style="flex: 1; min-width: 250px; padding-right: 20px;">
                <h3 style="color: #2E7D32; margin-top: 0;">🎭 1. มายากลสลับร่าง (Next Costume)</h3>
                <p>รู้หรือไม่? ตัวละคร 1 ตัวใน Scratch มักจะมีหลายท่าทางซ่อนอยู่ในแท็บ Costumes หากเรานำบล็อก <b>next costume (ชุดถัดไป)</b> หมวดสีม่วง มาต่อกัน ตัวละครจะสลับท่าทางไปมาเหมือนภาพเคลื่อนไหว (Flipbook) เลยครับ</p>
            </div>
            <div style="flex: 1; text-align: center; min-width: 200px;">
                <div style="background-color: #9966FF; color: white; padding: 12px 20px; border-radius: 20px; font-weight: bold; display: inline-block; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
                    next costume
                </div>
            </div>
        </div>

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #F1F8E9; padding: 20px; border-radius: 12px; margin-top: 20px; border-left: 5px solid #8BC34A; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <div style="flex: 1; text-align: center; min-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 5px;">
                <div style="background-color: #FFAB19; color: #000; padding: 12px 20px; border-radius: 20px 20px 0 0; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    repeat (10)
                </div>
                <div style="background-color: #9966FF; color: white; padding: 10px 20px; border-radius: 0; font-weight: bold; width: 80%;">
                    next costume
                </div>
                <div style="background-color: #FFAB19; color: #000; padding: 10px 20px; border-radius: 0 0 20px 20px; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.1); width: 80%;">
                    wait (0.1) seconds
                </div>
            </div>
            <div style="flex: 1; min-width: 250px; padding-left: 20px;">
                <h3 style="color: #33691E; margin-top: 0;">🔄 2. เวทมนตร์แห่งการวนซ้ำ (Repeat & Wait)</h3>
                <p>ถ้าเราต้องเรียงบล็อกเปลี่ยนชุด 100 อัน สคริปต์คงยาวทะลุจอ! ให้เราใช้บล็อก <b>repeat (ทำซ้ำ)</b> มาครอบเอาไว้แทน แต่ระวังนะ! ต้องใส่บล็อก <b>wait (รอ)</b> เข้าไปหน่วงเวลาสัก 0.1 วินาทีด้วย ไม่อย่างนั้นตัวละครจะขยับเร็วเกินไปจนมองไม่ทันครับ</p>
            </div>
        </div>

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #E0F2F1; padding: 20px; border-radius: 12px; margin-top: 20px; border-left: 5px solid #009688; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <div style="flex: 1; min-width: 250px; padding-right: 20px;">
                <h3 style="color: #00695C; margin-top: 0;">🛹 3. สไลด์ไปสู่จุดหมาย (Glide)</h3>
                <p>ในการเล่านิทาน การใช้คำสั่ง go to หรือ move อาจจะทำให้ตัวละครดูเหมือน "วาร์ป" หรือกระตุกเกินไป ลองเปลี่ยนมาใช้คำสั่งหมวดสีฟ้า <b>glide (1) secs to x:( ) y:( )</b> ตัวละครจะค่อยๆ ลอยสไลด์ไปยังจุดหมายอย่างนุ่มนวลตามเวลาที่เรากำหนดครับ</p>
            </div>
            <div style="flex: 1; text-align: center; min-width: 200px;">
                <div style="background-color: #4C97FF; color: white; padding: 12px 20px; border-radius: 20px; font-weight: bold; display: inline-block; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
                    glide (2) secs to x: (100) y: (-50)
                </div>
            </div>
        </div>

<div style="background-color: #E8F5E9; border-left: 6px solid #2E7D32; padding: 20px; margin-top: 30px; border-radius: 0 12px 12px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <h4 style="margin: 0 0 10px 0; color: #1B5E20; font-size: 19px;">💡 กฎเหล็กของผู้กำกับ (Pro Tip)</h4>
            <p style="margin: 0; font-size: 16px;">ถ้าอยากให้ตัวละคร <b>"ขยับขาเดินไปพร้อมๆ กับเคลื่อนที่สไลด์ไปข้างหน้า"</b> น้องๆ ต้องเขียนคำสั่ง 2 ชุดแยกกัน แล้วใช้เสาอากาศ <code>when I receive</code> ชื่อเดียวกัน เพื่อสั่งให้สคริปต์เปลี่ยนชุด (Animation) และสคริปต์สไลด์ (Glide) ทำงานพร้อมกันแบบคู่ขนานครับ!</p>
        </div>

</div>

<div style="background: #F1F8E9; border: 2px dashed #4CAF50; padding: 25px; border-radius: 12px; margin-top: 35px; margin-bottom: 40px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
        <h3 style="color: #2E7D32; margin-top: 0; font-size: 22px; text-align: center;">🎬 ภารกิจผู้กำกับน้อย: ใส่ชีวิตให้การเดินทาง!</h3>
        <p style="text-align: center; font-size: 16px; margin-bottom: 20px; color: #555;">จาก EP.2 หลังจากหมีเบนพูดจบ เราจะให้หมีเบนชวนไดโนเสาร์เดินไปพร้อมกัน มาลุยกันเลย!</p>
        
        <h4 style="color: #1B5E20; margin-bottom: 10px; font-size: 18px;">🎯 ภารกิจที่ 1: ส่งคิว "ออกเดินทาง"</h4>
        <ul style="list-style-type: none; padding-left: 0; font-size: 16px; color: #333;">
            <li style="background: white; padding: 15px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid #FFBF00; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>1. ให้หมีเบนส่งคิว:</b> ไปที่ตัวละครหมีเบน ต่อจากบล็อกคำพูดใน EP.2 ให้ลากบล็อก <code>broadcast [ข้อความใหม่]</code> มาต่อท้าย ตั้งชื่อข้อความว่า <b>"ออกเดินทาง"</b>
            </li>
        </ul>

<h4 style="color: #1B5E20; margin-top: 25px; margin-bottom: 10px; font-size: 18px;">🧩 ภารกิจที่ 2: ไดโนเสาร์ขยับขา (ทำแอนิเมชัน)</h4>
        <ul style="list-style-type: none; padding-left: 0; font-size: 16px; color: #333;">
            <li style="background: white; padding: 15px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid #FFBF00; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>1. สร้างเสาอากาศใหม่:</b> ไปที่ตัวละครไดโนเสาร์ ลากบล็อก <code>when I receive [ออกเดินทาง]</code> มาวางในพื้นที่ว่างๆ (แยกเป็นก้อนใหม่)
            </li>
            <li style="background: white; padding: 15px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid #FFAB19; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>2. ร่ายมนต์วนซ้ำ:</b> ลากบล็อก <code>repeat (10)</code> มาต่อใต้เสาอากาศ
            </li>
            <li style="background: white; padding: 15px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid #9966FF; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>3. สลับชุดและหน่วงเวลา:</b> นำบล็อก <code>next costume</code> และ <code>wait (0.1) seconds</code> ไปใส่ไว้ <b>"ข้างใน"</b> บล็อก repeat (เหมือนยัดไส้แซนด์วิช)
            </li>
        </ul>

<h4 style="color: #1B5E20; margin-top: 25px; margin-bottom: 10px; font-size: 18px;">🚀 ภารกิจที่ 3: ไดโนเสาร์สไลด์ตัว (เดินไปข้างหน้า)</h4>
        <ul style="list-style-type: none; padding-left: 0; font-size: 16px; color: #333;">
            <li style="background: white; padding: 15px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid #FFBF00; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>1. รับคิวคู่ขนาน:</b> ลากบล็อก <code>when I receive [ออกเดินทาง]</code> มาวางแยกอีก 1 ก้อน (ไดโนเสาร์จะมีเสาอากาศชื่อเดียวกัน 2 เสาแล้วนะ!)
            </li>
            <li style="background: white; padding: 15px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid #4C97FF; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>2. สไลด์ไปจุดหมาย:</b> ใช้เมาส์ลากตัวไดโนเสาร์ขยับไปข้างหน้าในจุดที่ต้องการ แล้วลากบล็อก <code>glide (1) secs to x:( ) y:( )</code> มาต่อใต้เสาอากาศอันที่สอง
            </li>
        </ul>

<div style="background: #E8F5E9; border: 1px solid #c8e6c9; padding: 15px; border-radius: 8px; margin-top: 20px;">
            <h4 style="color: #2e7d32; margin-top: 0; margin-bottom: 5px; font-size: 17px;">✅ เช็คลิสต์ทดสอบความสำเร็จ (Test & Debug)</h4>
            <p style="margin: 0; font-size: 15px;">กด <b>ปุ่มธงเขียว</b> เลย! ลองดูสิว่า ไดโนเสาร์กับหมีคุยกันจบปุ๊บ ไดโนเสาร์ของเราขยับขาและสไลด์ตัวไปข้างหน้าพร้อมๆ กันหรือเปล่า? ถ้าใช่... ขอต้อนรับน้องๆ เข้าสู่การเป็นแอนิเมเตอร์มือโปร!</p>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ สรุปความรู้ EP.3</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #C8E6C9;">มาทดสอบความเป็นแอนิเมเตอร์ในตัวน้องๆ กันเถอะ!</p>
        </div>
        
        <div style="border: 2px solid #2E7D32; 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: #2E7D32;">ข้อที่ 1: การสร้างแอนิเมชันให้ตัวละครขยับท่าทางอย่างต่อเนื่อง (เช่น วิ่งขยับแขนขา) ควรใช้บล็อกใดทำงานคู่กัน?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'บล็อก say ใช้สำหรับขึ้นกรอบคำพูดสนทนาครับ ไม่ได้เปลี่ยนท่าทาง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ก. next costume ทำงานคู่กับ say</button>
                    <button onclick="checkAnswer(this, true, 'ยอดเยี่ยมครับ! การนำ next costume ไปใส่ไว้ในบล็อก repeat (ทำซ้ำ) จะทำให้เกิดภาพแอนิเมชันเคลื่อนไหวอย่างต่อเนื่อง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ข. next costume ทำงานคู่กับ repeat</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; font-family: inherit; font-size: 16px;">ค. switch backdrop ทำงานคู่กับ glide</button>
                    <button onclick="checkAnswer(this, false, 'show กับ hide แค่ทำให้ตัวละครโผล่ๆ หายๆ (กระพริบ) ครับ ไม่ใช่การขยับท่าทาง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ง. show ทำงานคู่กับ hide</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: #2E7D32;">ข้อที่ 2: หากต้องการให้นางฟ้าบินจากจุด A ไปจุด B อย่างนุ่มนวลเหมือนในภาพยนตร์ ไม่ให้ดูเหมือนการวาร์ป ควรใช้คำสั่งใด?</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; font-family: inherit; font-size: 16px;">ก. go to x: ( ) y: ( )</button>
                    <button onclick="checkAnswer(this, false, 'บล็อกนี้ทำให้นางฟ้าหมุนติ้วๆ อยู่กับที่ครับ ไม่ได้เคลื่อนที่ไปไหน')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ข. turn 15 degrees</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องเป๊ะ! บล็อก glide จะช่วยเกลี่ยระยะทางและเวลา ทำให้นางฟ้าค่อยๆ สไลด์ไปสู่จุดหมายอย่างสมูทที่สุดครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ค. glide ( ) secs to x: ( ) y: ( )</button>
                    <button onclick="checkAnswer(this, false, 'คำสั่งนี้จะขยับไปแค่ทีละนิด ต้องกดซ้ำๆ หรือใส่ลูป ซึ่งอาจทำให้การเคลื่อนที่ดูกระตุกได้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ง. move 10 steps</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

</div>
    </div>

</div>

<script>
function checkAnswer(btn, isCorrect, msg) {
    const parent = btn.parentElement;
    const feedback = parent.nextElementSibling;
    const buttons = parent.querySelectorAll('button');

// Disable all buttons in this question after click
    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 = '#E8F5E9';
        btn.style.borderColor = '#4CAF50';
        btn.style.color = '#2E7D32';
        btn.style.opacity = '1';
        btn.style.fontWeight = 'bold';
        feedback.style.background = '#E8F5E9';
        feedback.style.color = '#2E7D32';
        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>