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

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, #9C27B0 0%, #7B1FA2 50%, #4A148C 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #311B92;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">🎬 EP.1: จัดฉากและเตรียมตัวแสดง (Scene & Setup)</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #E1BEE7; font-weight: bold;">พื้นฐานสำคัญ! เซ็ตอัปเวทีให้พร้อมก่อนเริ่มเล่านิทาน</p>
    </div>

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

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #f3e5f5; padding: 20px; border-radius: 12px; margin-top: 25px; border-left: 5px solid #9c27b0; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <div style="flex: 1; min-width: 250px; padding-right: 20px;">
                <h3 style="color: #7b1fa2; margin-top: 0;">🖼️ 1. กำหนดฉากเริ่มต้น (Switch Backdrop)</h3>
                <p>ถ้าตอนจบนิทานของเราอยู่ที่ "ภูเขาไฟ" เมื่อมีคนกดเล่นใหม่ ฉากอาจจะค้างอยู่ที่ภูเขาไฟตั้งแต่เริ่มเรื่อง! ดังนั้นเราต้องใช้บล็อก <b>switch backdrop to</b> เพื่อบังคับให้เวทีกลับมาเริ่มต้นที่ฉากแรก (เช่น ทะเลทราย) เสมอครับ</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);">
                    switch backdrop to [Desert ▾]
                </div>
            </div>
        </div>

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #e3f2fd; padding: 20px; border-radius: 12px; margin-top: 20px; border-left: 5px solid #2196f3; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <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);">
                    go to x: (-150) y: (-50)
                </div>
            </div>
            <div style="flex: 1; min-width: 250px; padding-left: 20px;">
                <h3 style="color: #1976d2; margin-top: 0;">📍 2. มาร์คจุดยืนนักแสดง (Go to X: Y:)</h3>
                <p>ถ้านิทานของเรามีการเดินไปมา เมื่อกดเล่นใหม่ ตัวละครจะยืนค้างอยู่จุดสุดท้ายที่เดินไปถึง! เราจึงต้องใช้บล็อกสีฟ้า <b>go to x: y:</b> เพื่อจับตัวละครมาวางตรงจุดเริ่มต้นทุกครั้งก่อนเริ่มแสดง</p>
            </div>
        </div>

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #f3e5f5; padding: 20px; border-radius: 12px; margin-top: 20px; border-left: 5px solid #9c27b0; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <div style="flex: 1; min-width: 250px; padding-right: 20px;">
                <h3 style="color: #7b1fa2; margin-top: 0;">👻 3. การแสดงตัว (Show / Hide)</h3>
                <p>นักแสดงบางคนยังไม่ถึงคิวออกโรงในฉากแรก เราต้องสั่งให้เขาซ่อนตัวด้วยบล็อก <b>hide</b> ไว้ก่อน และตัวละครที่เป็นตัวเอกของฉากแรก ต้องใส่บล็อก <b>show</b> ไว้เสมอ ป้องกันการล่องหนหายไปจากเวทีครับ</p>
            </div>
            <div style="flex: 1; text-align: center; min-width: 200px; display: flex; justify-content: center; gap: 10px;">
                <div style="background-color: #9966FF; color: white; padding: 12px 20px; border-radius: 20px; font-weight: bold; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
                    show
                </div>
                <div style="background-color: #9966FF; color: white; padding: 12px 20px; border-radius: 20px; font-weight: bold; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
                    hide
                </div>
            </div>
        </div>

<div style="background-color: #fff8e1; border-left: 6px solid #ffc107; 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: #ff8f00; font-size: 19px;">💡 กฎเหล็กของผู้กำกับ (Pro Tip)</h4>
            <p style="margin: 0; font-size: 16px;">เพื่อป้องกันบั๊กหรือข้อผิดพลาดเวลาคนดูกดเล่นนิทานซ้ำ ให้นำบล็อก <b>switch backdrop, go to x:y:, และ show/hide</b> ไปต่อเรียงกันไว้ใต้บล็อก <code>when [Flag] clicked</code> เสมอ เพื่อสร้าง <b>"สคริปต์ตั้งต้น"</b> ครับ!</p>
        </div>

</div>

<div style="background: #f4f6f9; border: 2px dashed #3f51b5; 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: #3f51b5; margin-top: 0; font-size: 22px; text-align: center;">🎬 ภารกิจผู้กำกับน้อย: ลงมือจัดฉากใน Scratch!</h3>
        <p style="text-align: center; font-size: 16px; margin-bottom: 20px; color: #555;">อ่านเนื้อหาจบแล้ว มาลองเปิดโปรแกรม Scratch แล้วทำตาม 4 ขั้นตอนเวทมนตร์นี้กันเลย!</p>
        
        <h4 style="color: #303f9f; margin-bottom: 10px; font-size: 18px;">🎯 ภารกิจที่ 1: เตรียมตัวเป็นผู้กำกับ (เข้าสู่ระบบ)</h4>
        <ol style="margin-top: 0; font-size: 16px; padding-left: 25px; color: #333;">
            <li style="margin-bottom: 8px;">เปิดเว็บไซต์ Scratch แล้วกด <b>สร้าง (Create)</b></li>
            <li style="margin-bottom: 8px;">ลบแมวส้มทิ้งไปก่อน! ไปที่ปุ่ม <b>เลือกฉากหลัง (Choose a Backdrop)</b> ด้านขวาล่าง แล้วเลือกฉากที่ชอบมา 2 ฉาก (เช่น ทะเลทราย และ ภูเขาไฟ)</li>
            <li style="margin-bottom: 8px;">ไปที่ปุ่ม <b>เลือกตัวละคร (Choose a Sprite)</b> แล้วเลือกนักแสดงมา 1 ตัว (เช่น ไดโนเสาร์)</li>
        </ol>

<h4 style="color: #303f9f; margin-top: 25px; margin-bottom: 10px; font-size: 18px;">🧩 ภารกิจที่ 2: สร้าง "คาถาตั้งต้น" (สคริปต์เริ่มต้น)</h4>
        <p style="margin-top: 0; font-size: 16px;">คลิกที่ตัวละครที่น้องๆ เลือกไว้ แล้วลากบล็อกคำสั่งมาต่อกันตามลำดับนี้เลย:</p>
        <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 #f1c40f; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>1. หมวกผู้กำกับ (กลุ่ม Events สีเหลือง):</b> ลากบล็อก <code>when ⛳ (ธงเขียว) clicked</code> มาวางเป็นอันดับแรกสุด นี่คือปุ่มกดเริ่มถ่ายทำ!
            </li>
            <li style="background: white; padding: 15px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid #9b59b6; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>2. ล็อกฉากแรก (กลุ่ม Looks สีม่วง):</b> ลากบล็อก <code>switch backdrop to [ชื่อฉากแรก]</code> มาต่อใต้ธงเขียว (กดเล่นกี่ครั้ง นิทานก็จะเริ่มที่ฉากนี้เสมอ!)
            </li>
            <li style="background: white; padding: 15px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid #3498db; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>3. สูตรลับมาร์คจุดยืน (กลุ่ม Motion สีฟ้า):</b> 
                <span style="color: #e74c3c; font-weight: bold;">[ทริคสำคัญ ห้ามพลาด!]</span> อย่าเพิ่งรีบลากบล็อก! ให้น้องๆ ใช้เมาส์ <b>"ลากตัวละครไปวางตรงจุดที่อยากให้ยืน"</b> บนเวทีก่อน แล้วตัวเลขในบล็อก <code>go to x: ( ) y: ( )</code> ที่อยู่ด้านซ้ายจะเปลี่ยนให้ตรงเป๊ะอัตโนมัติ! จากนั้นค่อยลากบล็อกออกมาต่อ (สบายเลย ไม่ต้องพิมพ์เลขเอง!)
            </li>
            <li style="background: white; padding: 15px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid #9b59b6; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>4. สั่งให้โชว์ตัว (กลุ่ม Looks สีม่วง):</b> ลากบล็อก <code>show</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;">เมื่อต่อบล็อกทั้ง 4 เสร็จแล้ว ลองใช้เมาส์ลากตัวละครไปทิ้งไว้มุมอื่นของจอ แล้วกดเปลี่ยนฉากหลังเล่นๆ ดู จากนั้น <b>กดปุ่มธงเขียว!</b> ถ้าตัวละครวาร์ปกลับมายืนที่เดิม และฉากหลังเปลี่ยนกลับมาเป็นฉากแรกได้เป๊ะ... แปลว่าภารกิจผู้กำกับสำเร็จแล้ว!</p>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #7B1FA2 0%, #4A148C 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ สรุปความรู้ EP.1</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #E1BEE7;">มาทดสอบความเป็นผู้กำกับในตัวน้องๆ กันเถอะ!</p>
        </div>
        
        <div style="border: 2px solid #4A148C; 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: #4A148C;">ข้อที่ 1: หากนักเรียน "ไม่ใส่" บล็อก switch backdrop ไว้ตอนเริ่มต้นโปรแกรม จะเกิดผลเสียอย่างไรเมื่อกดธงเขียวเล่นนิทานรอบที่ 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; font-family: inherit; font-size: 16px;">ก. โปรแกรมจะแจ้งเตือน Error และเล่นไม่ได้</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! หากไม่รีเซ็ตฉากแรกไว้ นิทานรอบใหม่จะแสดงฉากตอนจบของรอบที่แล้วค้างไว้ ทำให้เสียอรรถรสในการชมครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ข. นิทานจะเริ่มเล่นโดยใช้ภาพฉากหลังจากตอนจบของรอบที่แล้ว</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;">ค. ตัวละครทั้งหมดจะล่องหนหายไปจากจอ</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;">ง. ฉากจะถูกสุ่มเปลี่ยนไปเรื่อยๆ มั่วๆ</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: #4A148C;">ข้อที่ 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; font-family: inherit; font-size: 16px;">ก. move 10 steps</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;">ข. point in direction 90</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;">ค. if on edge, bounce</button>
                    <button onclick="checkAnswer(this, true, 'เก่งมากครับ! บล็อก go to x: y: จะช่วยดึงตัวละครกลับมาอยู่ที่พิกัดที่เราตั้งไว้เป๊ะๆ ไม่ว่าจะเดินเตลิดไปไหนก็ตาม')" 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>
                </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 = '#F3E5F5';
        btn.style.borderColor = '#9C27B0';
        btn.style.color = '#4A148C';
        btn.style.opacity = '1';
        btn.style.fontWeight = 'bold';
        feedback.style.background = '#F3E5F5';
        feedback.style.color = '#4A148C';
        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>