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

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, #00695C 0%, #00897B 50%, #26A69A 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #004D40;">
        <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: เสียงประกาศและคิวการแสดง (Broadcast)</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #B2DFDB; font-weight: bold;">สร้างระบบสื่อสารหลังเวที เพื่อเริ่มเกมอย่างพร้อมเพรียง!</p>
    </div>

<div style="margin-bottom: 30px;">
        
        <p style="font-size: 18px; padding: 0 10px;">ใน EP ที่แล้วเราให้ยานอวกาศโชว์ตัว และให้ศัตรูซ่อนตัวตอนเริ่มเกมไปแล้ว แต่ศัตรูจะรู้ได้ยังไงล่ะว่า <b>"เกมเริ่มแล้ว ให้ออกมาได้เลย!"</b>? คำตอบคือเราต้องใช้ระบบ <b>ส่งสัญญาณ (Broadcast)</b> ซึ่งเปรียบเสมือนผู้กำกับที่คอยตะโกนบอกคิวนักแสดงหลังเวทีนั่นเองครับ!</p>

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #E0F2F1; padding: 20px; border-radius: 12px; margin-top: 25px; border-left: 5px solid #00897B; 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;">📣 1. ฝ่ายส่งสัญญาณ (Broadcast)</h3>
                <p>บล็อกสีเหลือง <b>broadcast [...]</b> ทำหน้าที่ส่งข้อความที่มองไม่เห็นกระจายไปทั่วทั้งเกม เพื่อบอกให้ตัวละครอื่นๆ รู้ว่าถึงเวลาต้องทำตามคิวแล้ว (เราสามารถตั้งชื่อข้อความได้เอง เช่น "เริ่มภารกิจ")</p>
            </div>
            <div style="flex: 1; text-align: center; min-width: 200px;">
                <div style="background-color: #FFAB19; color: black; padding: 12px 20px; border-radius: 20px; font-weight: bold; display: inline-block; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: 2px solid #E69500;">
                    broadcast [เริ่มภารกิจ ▾]
                </div>
            </div>
        </div>

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #E8F5E9; padding: 20px; border-radius: 12px; margin-top: 20px; border-left: 5px solid #43A047; 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: #FFAB19; color: black; padding: 12px 20px; border-radius: 20px; font-weight: bold; display: inline-block; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: 2px solid #E69500; border-top-left-radius: 10px; border-top-right-radius: 10px;">
                    when I receive [เริ่มภารกิจ ▾]
                </div>
            </div>
            <div style="flex: 1; min-width: 250px; padding-left: 20px;">
                <h3 style="color: #2E7D32; margin-top: 0;">📡 2. ฝ่ายรับสัญญาณ (When I receive)</h3>
                <p>บล็อก <b>when I receive [...]</b> เป็นบล็อกหัวโค้ด (เหมือนธงเขียว) จะรอฟังอย่างเงียบๆ และจะเริ่มทำงานคำสั่งที่อยู่ข้างใต้ทันที เมื่อได้ยินข้อความที่ตรงกับที่ตั้งไว้!</p>
            </div>
        </div>

</div>

<div style="background: #FAFAFA; border: 2px dashed #00897B; 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: #00695C; margin-top: 0; font-size: 22px; text-align: center; border-bottom: 2px dashed #80CBC4; padding-bottom: 15px;">🎮 ภารกิจนักสร้างเกม: วางระบบสื่อสารหลังเวที!</h3>
        <p style="text-align: center; font-size: 16px; margin-bottom: 25px; color: #555;">ลองหาบล็อกด้วยตัวเองก่อนนะ ถ้าไม่แน่ใจ ค่อยกดดูตัวช่วยภาพโค้ดที่ซ่อนอยู่ครับ</p>
        
        <h4 style="color: #004D40; 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: 12px; border-left: 4px solid #FFC107; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>1.</b> ต่อจากโค้ดเดิมใน EP.1 ให้นำบล็อกสีม่วง <code>say [Hello!] for (2) seconds</code> มาต่อท้าย<br>
                <b>2.</b> เปลี่ยนข้อความว่า <i>"เก็บดาวให้ครบ 10 ดวง ระวังอุกกาบาตล่ะ!"</i> และแก้เวลาเป็น <b>3 วินาที</b><br>
                <b>3.</b> ไปที่หมวด Events (สีเหลือง) นำบล็อก <code>broadcast [message1]</code> มาต่อท้ายสุด<br>
                <b>4.</b> กดที่คำว่า message1 เลือก New message แล้วพิมพ์ชื่อข้อความใหม่ว่า <b>"เริ่มภารกิจ"</b>
                
                
                <details style="margin-top: 15px; background: #F8F9FA; border-radius: 6px; padding: 10px; border: 1px dashed #BDBDBD;">
                    <summary style="cursor: pointer; color: #1565C0; font-weight: bold; outline: none; padding-left: 5px;">
                        👀 นึกภาพไม่ออกใช่ไหม? คลิกดูหน้าตาบล็อกของยานอวกาศตรงนี้เลย!
                    </summary>
                    <div style="margin-top: 15px; text-align: center;">
                        
                      <img src=" https://smartyquizkids.com/assets/images/smn/a8baa56554f96369ab93e4f3bb068c2220260920110031.png">
                        <p style="font-size: 13px; color: #7f8c8d; margin-top: 10px;"><i>สังเกตนะว่าบล็อก broadcast จะต้องอยู่ล่างสุดเสมอ!</i></p>
                    </div>
                </details>
            </li>
        </ul>

<h4 style="color: #004D40; 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: 12px; border-left: 4px solid #4CAF50; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>1.</b> ไปที่ตัวละคร <b>อุกกาบาต</b> นำบล็อกหัวอันใหม่ <code>when I receive [เริ่มภารกิจ]</code> มาวาง (แยกเป็นอีกก้อนเลยนะ ห้ามต่อกับธงเขียวอันเดิม!)<br>
                <b>2.</b> นำบล็อก <code>show</code> สีม่วง มาต่อข้างใต้ เพื่อให้มันปรากฏตัวเมื่อได้ยินสัญญาณ<br>
                <b>3.</b> ไปที่ตัวละคร <b>ดวงดาว</b> และทำโค้ดชุด when I receive... แบบเดียวกันเป๊ะเลยครับ!

<details style="margin-top: 15px; background: #F8F9FA; border-radius: 6px; padding: 10px; border: 1px dashed #BDBDBD;">
                    <summary style="cursor: pointer; color: #1565C0; font-weight: bold; outline: none; padding-left: 5px;">
                        👀 คลิกดูหน้าตาบล็อกคำสั่งของอุกกาบาตและดวงดาว!
                    </summary>
                    <div style="margin-top: 15px; text-align: center;">
                        
                     <img src=" https://smartyquizkids.com/assets/images/smn/2723d092b63885e0d7c260cc007e8b9d20260920110229.png">
                    </div>
                </details>
            </li>
        </ul>

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

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #00897B 0%, #00695C 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>
        </div>
        
        <div style="border: 2px solid #00695C; border-top: none; padding: 25px; border-radius: 0 0 12px 12px; background: #fafafa;">
            
            <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: #00695C;">ข้อที่ 1: ถ้าเรานำบล็อก broadcast [เริ่มภารกิจ] ไปวาง "สลับที่" ให้อยู่เหนือบล็อก say (พูด) จะเกิดอะไรขึ้น?</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, 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, 'ถูกต้อง! การทำงานของ Scratch เรียงจากบนลงล่าง ถ้า broadcast ทำงานก่อน อุกกาบาตก็จะโผล่ออกมาทันทีขณะที่ยานเพิ่งเริ่มพูดกติกา ทำให้ผู้เล่นหลบไม่ทันครับ')" 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>
    </div>

</div>

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

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 = '#E0F2F1';
        btn.style.borderColor = '#00897B';
        btn.style.color = '#004D40';
        btn.style.opacity = '1';
        btn.style.fontWeight = 'bold';
        feedback.style.background = '#E0F2F1';
        feedback.style.color = '#004D40';
        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>