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

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, #E65100 0%, #F57C00 50%, #FF9800 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #BF360C;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">🗣️ EP.2: บทสนทนาและการรับส่งคิว (Dialogue & Broadcasting)</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FFE0B2; font-weight: bold;">สร้างบทสนทนาที่ลื่นไหล หมดปัญหาตัวละครพูดแทรกกัน!</p>
    </div>

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

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #fff3e0; padding: 20px; border-radius: 12px; margin-top: 25px; border-left: 5px solid #ff9800; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <div style="flex: 1; min-width: 250px; padding-right: 20px;">
                <h3 style="color: #e65100; margin-top: 0;">💬 1. พูดให้จบประโยค (Say for Seconds)</h3>
                <p>บล็อกคำพูดสีม่วงมี 2 แบบ สำหรับการเล่านิทาน เราต้องเลือกใช้บล็อก <b>say [ข้อความ] for (2) seconds</b> เสมอ เพื่อให้กรอบคำพูดแสดงขึ้นมาตามเวลาที่กำหนด แล้วหายไปเมื่อตัวละครพูดจบ (ถ้าใช้บล็อก say เฉยๆ คำพูดจะค้างอยู่บนจอไม่ยอมหายไปครับ)</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);">
                    say [สวัสดีเพื่อน!] for (2) seconds
                </div>
            </div>
        </div>

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #fbe9e7; padding: 20px; border-radius: 12px; margin-top: 20px; border-left: 5px solid #ff5722; 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: #FFBF00; color: #000; padding: 12px 20px; border-radius: 20px; font-weight: bold; display: inline-block; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
                    broadcast [ตาของไดโนเสาร์ ▾]
                </div>
            </div>
            <div style="flex: 1; min-width: 250px; padding-left: 20px;">
                <h3 style="color: #d84315; margin-top: 0;">📤 2. ส่งคิวเมื่อพูดจบ (Broadcast)</h3>
                <p>เมื่อตัวละครแรกพูดจบประโยค เราจะนำบล็อกสีเหลือง <b>broadcast</b> มาต่อท้ายทันที เพื่อส่งสัญญาณกระแสจิตไปบอกตัวละครอีกตัวว่า <i>"ฉันพูดจบแล้วนะ ตาเธอพูดต่อได้เลย!"</i> โดยที่เราตั้งชื่อข้อความให้เข้าใจง่ายๆ ได้เอง</p>
            </div>
        </div>

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #fff3e0; padding: 20px; border-radius: 12px; margin-top: 20px; border-left: 5px solid #ff9800; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <div style="flex: 1; min-width: 250px; padding-right: 20px;">
                <h3 style="color: #e65100; margin-top: 0;">📥 3. รอรับคิวอย่างตั้งใจ (When I receive)</h3>
                <p>ตัวละครที่สอง จะต้องสวมหมวก <b>when I receive</b> รอเอาไว้ เมื่อได้รับสัญญาณชื่อตรงกันปุ๊บ เขาก็จะเริ่มรันบล็อก <b>say</b> เพื่อตอบโต้กลับทันที! วิธีนี้ทำให้บทสนทนาต่อกันเป๊ะ 100% โดยไม่ต้องเดาเวลา</p>
            </div>
            <div style="flex: 1; text-align: center; min-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 5px;">
                <div style="background-color: #FFBF00; 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);">
                    when I receive [ตาของไดโนเสาร์ ▾]
                </div>
                <div style="background-color: #9966FF; color: white; padding: 12px 20px; border-radius: 0 0 20px 20px; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    say [ว่าไงเพื่อน! ไปเที่ยวกันไหม] for (3) seconds
                </div>
            </div>
        </div>

<div style="background-color: #fff9c4; border-left: 6px solid #fbc02d; 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: #f57f17; font-size: 19px;">💡 กฎเหล็กของผู้กำกับ (Pro Tip)</h4>
            <p style="margin: 0; font-size: 16px;"><b>ทำไมเราถึงไม่ควรใช้บล็อก wait (รอ) เพื่อกะเวลา?</b> <br>เพราะถ้าเราแต่งนิทานยาวๆ แล้ววันหนึ่งอยากแก้ไขบทสนทนาประโยคแรกให้สั้นลง เราจะต้องไปนั่งไล่บวกลบคณิตศาสตร์เพื่อแก้ไขเวลาในบล็อก wait ของตัวละครอื่นๆ ใหม่ทั้งหมด! การใช้ <b>broadcast</b> จึงช่วยประหยัดเวลาและทำงานได้ฉลาดกว่ามากครับ</p>
        </div>

</div>

<div style="background: #fff8e1; border: 2px dashed #e65100; 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: #e65100; margin-top: 0; font-size: 22px; text-align: center;">🎬 ภารกิจผู้กำกับน้อย: จัดคิวให้นักแสดง!</h3>
        <p style="text-align: center; font-size: 16px; margin-bottom: 20px; color: #555;">ให้น้องๆ เพิ่มตัวละครมาอีก 1 ตัว (เช่น หมีเบน) แล้วมาเขียนบทสนทนาต่อจาก EP.1 กันเลย!</p>
        
        <h4 style="color: #bf360c; margin-bottom: 10px; font-size: 18px;">🎯 ภารกิจที่ 1: สั่งให้นักแสดงคนที่ 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 #9966FF; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>1. ให้ตัวละครแรกพูด:</b> คลิกที่ตัวละครแรก (เช่น ไดโนเสาร์) ไปที่กลุ่มคำสั่ง Looks (สีม่วง) ลากบล็อก <code>say [Hello!] for (2) seconds</code> มาต่อท้ายสคริปต์ตั้งต้นจาก EP.1
            </li>
            <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>2. ส่งคิว (Broadcast):</b> ไปที่กลุ่ม Events (สีเหลือง) ลากบล็อก <code>broadcast [message1]</code> มาต่อด้านล่างสุด
            </li>
            <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>3. สร้างข้อความใหม่:</b> คลิกที่คำว่า message1 ในบล็อก แล้วเลือก <b>New message (ข้อความใหม่)</b> พิมพ์ตั้งชื่อคิวว่า <b>"ตาของหมีเบน"</b> แล้วกด OK
            </li>
        </ul>

<h4 style="color: #bf360c; margin-top: 25px; margin-bottom: 10px; font-size: 18px;">🧩 ภารกิจที่ 2: นักแสดงคนที่ 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 #9966FF; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>2. ตอบกลับ:</b> ลากบล็อก <code>say [สวัสดีจ้าไดโนเสาร์!] for (2) seconds</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> ถ้าน้องๆ เห็นไดโนเสาร์พูดก่อน 2 วินาที แล้วพอคำพูดหายไปปุ๊บ หมีเบนก็พูดตอบกลับทันทีแบบไม่ทับซ้อนกัน... แปลว่าน้องๆ เข้าใจเวทมนตร์ Broadcast แล้ว!</p>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #F57C00 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: #FFE0B2;">ทดสอบความเข้าใจเรื่องการจัดลำดับบทสนทนา!</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: การใช้บล็อก "say [ข้อความ]" แบบธรรมดา (ไม่มีคำว่า for 2 seconds) จะส่งผลต่อการเล่านิทานอย่างไร?</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;">ก. ข้อความจะกระพริบแล้วหายไปอย่างรวดเร็วจนอ่านไม่ทัน</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! บล็อก say ธรรมดาจะทำให้ข้อความค้างอยู่บนหน้าจอตลอดเวลาจนกว่าจะมีคำสั่งลบ ซึ่งจะทำให้เกะกะเมื่อเปลี่ยนฉากใหม่ครับ')" 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, 'เสียงพูดจะใช้บล็อกหมวด Sound (สีชมพูบานเย็น) ครับ ไม่ใช่บล็อก Looks')" 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, 'ตัวละครจะยังคงยืนอยู่ที่เดิมครับ ไม่ล่องหน')" 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: #E65100;">ข้อที่ 2: หากต้องการให้ "เสือ" เริ่มพูดโต้ตอบ ทันทีที่ "สิงโต" พูดจบ สิงโตจะต้องใช้บล็อกใดลงท้ายเพื่อส่งสัญญาณ?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'when I receive เป็นบล็อกสำหรับ คนรอรับสัญญาณ (เสือ) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ก. when I receive [ตาของเสือ]</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! สิงโตต้องใช้ broadcast เพื่อส่งกระแสจิตบอกว่าตัวเองพูดจบแล้ว ให้เสือพูดต่อได้เลย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ข. broadcast [ตาของเสือ]</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;">ค. wait (2) seconds</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;">ง. when flag clicked</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 = '#FFF3E0';
        btn.style.borderColor = '#FF9800';
        btn.style.color = '#E65100';
        btn.style.opacity = '1';
        btn.style.fontWeight = 'bold';
        feedback.style.background = '#FFF3E0';
        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>