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

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, #D84315 0%, #E64A19 50%, #F4511E 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.3: แอนิเมชันและการเคลื่อนที่ (Movement)</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FFCCBC; font-weight: bold;">เติมชีวิตให้ของรางวัลและศัตรู ให้เคลื่อนไหวได้ดั่งเวทมนตร์!</p>
    </div>

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

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #FBE9E7; padding: 20px; border-radius: 12px; margin-top: 25px; border-left: 5px solid #E64A19; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <div style="flex: 1; min-width: 250px; padding-right: 20px;">
                <h3 style="color: #D84315; margin-top: 0;">🚀 1. ลอยละล่อง (Glide)</h3>
                <p>เราจะไม่ใช้คำสั่งวาร์ป (go to) แบบ EP.1 แล้วครับ แต่เราจะใช้บล็อก <b>glide (1) secs to [random position]</b> เพื่อให้ตัวละครค่อยๆ "ร่อน" หรือ "ลอย" ไปยังตำแหน่งแบบสุ่ม (Random) โดยใช้เวลาเดินทาง 1 วินาที ภาพที่ได้จะดูนุ่มนวลสมจริงมาก!</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 (1) secs to [random position ▾]
                </div>
            </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 #FF8F00; 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;">
                <div style="background-color: #FFAB19; color: #000; padding: 10px 20px; border-radius: 10px 10px 0 0; font-weight: bold; border: 2px solid #E69500; border-bottom: none; width: 120px;">
                    forever
                </div>
                <div style="background-color: #FFF3E0; padding: 20px; border-radius: 0 0 10px 10px; border-left: 2px solid #E69500; border-right: 2px solid #E69500; border-bottom: 2px solid #E69500; width: 120px;">
                    
                </div>
            </div>
            <div style="flex: 1; min-width: 250px; padding-left: 20px;">
                <h3 style="color: #E65100; margin-top: 0;">🔁 2. พลังแห่งการทำซ้ำ (Forever)</h3>
                <p>ถ้าเราใส่คำสั่งลอย (glide) แค่บล็อกเดียว มันก็จะลอยไปแค่ครั้งเดียวแล้วหยุดนิ่งเลยครับ! ดังนั้นเราต้องเอาบล็อกสีเหลืองทอง <b>forever</b> มา "ครอบ" คำสั่งเคลื่อนที่เอาไว้ เพื่อให้มันลอยไปลอยมาแบบไม่มีวันหยุดนั่นเอง</p>
            </div>
        </div>

</div>

<div style="background: #FAFAFA; border: 2px dashed #E64A19; 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: #D84315; margin-top: 0; font-size: 22px; text-align: center; border-bottom: 2px dashed #FFAB91; padding-bottom: 15px;">🎮 ภารกิจนักสร้างเกม: ปลุกชีพศัตรูและของรางวัล!</h3>
        <p style="text-align: center; font-size: 16px; margin-bottom: 25px; color: #555;">มาทำให้หินและดาวบินทั่วอวกาศกันเถอะ ถ้าประกอบบล็อกไม่ถูก ลองกดดูตัวช่วยด้านล่างนะ!</p>
        
        <h4 style="color: #BF360C; 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 #FFAB19; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>1.</b> นำบล็อก <code>forever</code> (วนซ้ำตลอดกาล) ไปต่อใต้บล็อก <code>show</code> ที่เราทำไว้ใน EP.2<br>
                <b>2.</b> นำบล็อกสีฟ้า <code>glide (1) secs to [random position]</code> ไป <b>"ใส่ไว้ข้างใน"</b> บล็อก forever<br>
                <b>3.</b> เพิ่มลูกเล่นการหมุนตัว โดยเอาบล็อก <code>turn ↻ (15) degrees</code> ไปต่อใต้บล็อก glide (ยังอยู่ข้างใน forever นะ)
                
                
                <details style="margin-top: 15px; background: #F8F9FA; border-radius: 6px; padding: 10px; border: 1px dashed #BDBDBD;">
                    <summary style="cursor: pointer; color: #E64A19; 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/bd686fd640be98efaae0091fa301e61320260920110940.png">
                        <p style="font-size: 13px; color: #7f8c8d; margin-top: 10px;"><i>ตรวจดูให้ดีนะว่าบล็อกสีฟ้าทั้ง 2 อัน ถูก "อม" ไว้ในปากของ forever หรือยัง!</i></p>
                    </div>
                </details>
            </li>
        </ul>

<h4 style="color: #BF360C; 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 #4C97FF; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>1.</b> ไปที่ตัวละคร <b>ดวงดาว</b><br>
                <b>2.</b> เขียนโค้ดชุด <code>forever</code> ➔ <code>glide</code> ➔ <code>turn</code> แบบเดียวกับอุกกาบาตเป๊ะๆ เลยครับ!
            </li>
        </ul>

<div style="background: #FBE9E7; border: 1px solid #FFCCBC; padding: 15px; border-radius: 8px; margin-top: 25px;">
            <h4 style="color: #D84315; 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 วินาทีจบปุ๊บ ทั้งอุกกาบาตและดวงดาว จะต้องเด้งขึ้นมา แล้วร่อนไปร่อนมาทั่วจอพร้อมกับหมุนตัวติ้วๆ แบบไม่ยอมหยุด! ถ้าเป็นแบบนี้... ถือว่าสอบผ่าน EP.3 ครับ!</p>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #E64A19 0%, #D84315 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>
        </div>
        
        <div style="border: 2px solid #D84315; 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: #D84315;">ข้อที่ 1: บล็อกคำสั่ง "glide (1) secs to [random position]" แตกต่างจากบล็อก "go to [random position]" อย่างไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! glide คือการลอยไปอย่างสมูทๆ โดยใช้เวลาตามที่กำหนด ส่วน go to คือการวาร์ปไปโผล่ที่ตำแหน่งใหม่แบบทันทีทันใดครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ก. glide จะค่อยๆ ลอยไป (เป็นภาพเคลื่อนไหว) แต่ go to จะวาร์ปหายตัวไปโผล่ที่ใหม่ทันที</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;">ข. glide จะทำให้ตัวละครทะลุขอบจอได้ แต่ go to ทะลุไม่ได้</button>
                    <button onclick="checkAnswer(this, false, 'สลับกันแล้วครับ! go to ต่างหากที่วาร์ปทันที ส่วน 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 คือการวาร์ปหายตัวทันที ส่วน go to คือการค่อยๆ ลอยไป</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: #D84315;">ข้อที่ 2: ถ้าน้องๆ ลืมเอาบล็อก "forever" มาครอบบล็อกเคลื่อนที่ (glide) จะเกิดผลลัพธ์แบบไหน?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'ถ้าไม่มี forever โปรแกรมจะไม่วนซ้ำ ทำให้มันลอยไปแค่จุดเดียวแล้วหยุดทำงานครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ก. อุกกาบาตจะลอยไปลอยมาเร็วขึ้นกว่าเดิม 2 เท่า</button>
                    <button onclick="checkAnswer(this, false, 'บล็อก glide ไม่ได้ทำให้โปรแกรม error ครับ แค่มันจะทำงานตามจำนวนรอบที่มี')" 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, 'เยี่ยมมากครับ! เพราะบล็อก glide ถูกสั่งงานแค่ครั้งเดียว มันจึงลอยไปที่จุดสุ่มแค่จุดเดียว แล้วก็หยุดนิ่งไปตลอดกาลเลยครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ค. อุกกาบาตจะลอยไปที่ตำแหน่งสุ่มแค่ 1 ครั้ง แล้วหยุดนิ่งอยู่ตรงนั้นไม่ไปไหนอีกเลย</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 = '#FBE9E7';
        btn.style.borderColor = '#D84315';
        btn.style.color = '#BF360C';
        btn.style.opacity = '1';
        btn.style.fontWeight = 'bold';
        feedback.style.background = '#FBE9E7';
        feedback.style.color = '#BF360C';
        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>