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

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, #283593 0%, #3F51B5 50%, #5C6BC0 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #1A237E;">
        <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: เตรียมความพร้อม (Initialization)</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #C5CAE9; font-weight: bold;">ตั้งค่าจุดเริ่มต้นให้ยานอวกาศและศัตรูของเรา!</p>
    </div>

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

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #E8EAF6; padding: 20px; border-radius: 12px; margin-top: 25px; border-left: 5px solid #3F51B5; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <div style="flex: 1; min-width: 250px; padding-right: 20px;">
                <h3 style="color: #283593; margin-top: 0;">📍 1. จุดเริ่มต้น (Go to X: Y:)</h3>
                <p>บนหน้าจอ Scratch จะมีเส้นสมมติคือ แกน X (แนวนอน) และ แกน Y (แนวตั้ง) เราจะใช้บล็อกสีฟ้า <b>go 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);">
                    go to x: (0) y: (-120)
                </div>
            </div>
        </div>

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #EDE7F6; padding: 20px; border-radius: 12px; margin-top: 20px; border-left: 5px solid #673AB7; 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: 10px;">
                <div style="background-color: #9966FF; color: white; padding: 12px 20px; border-radius: 20px; font-weight: bold; box-shadow: 0 2px 4px 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 2px 4px rgba(0,0,0,0.1);">
                    hide (ซ่อน)
                </div>
            </div>
            <div style="flex: 1; min-width: 250px; padding-left: 20px;">
                <h3 style="color: #4527A0; margin-top: 0;">👻 2. คาถาล่องหน (Show / Hide)</h3>
                <p>ในตอนเริ่มเกม ยานอวกาศของเราจะต้องโชว์ตัวให้เห็น (ใช้บล็อก <b>show</b>) แต่พวกอุกกาบาตและดาวรางวัล จะต้องแอบซ่อนตัวไว้ก่อน (ใช้บล็อก <b>hide</b>) รอจนกว่าเกมจะเริ่มจริงๆ ค่อยโผล่ออกมาครับ</p>
            </div>
        </div>

</div>

<div style="background: #FAFAFA; 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: #283593; margin-top: 0; font-size: 22px; text-align: center; border-bottom: 2px dashed #9FA8DA; padding-bottom: 15px;">🎮 ภารกิจนักสร้างเกม: จัดเตรียมเวทีอวกาศ!</h3>
        <p style="text-align: center; font-size: 16px; margin-bottom: 25px; color: #555;">ให้เวลาคิดและลองหาบล็อกด้วยตัวเองก่อนนะ ถ้าหาไม่เจอจริงๆ ค่อยกดปุ่ม <b>"ดูตัวช่วย"</b> ด้านล่างของแต่ละข้อนะครับ!</p>
        
        <h4 style="color: #1A237E; 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 #FFBF00; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>1.</b> นำบล็อก <code>when ⛳ clicked</code> มาวางเป็นจุดเริ่มต้น<br>
                <b>2.</b> นำบล็อก <code>go to x: (0) y: (-120)</code> มาต่อข้างใต้ (เพื่อให้ยานอยู่ตรงกลางล่างของจอ)<br>
                <b>3.</b> ตามด้วยบล็อก <code>show</code> เพื่อให้ยานปรากฏตัวเสมอเมื่อกดธงเขียว
                
                
                <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/e00da03b685a0dd18fb6a08af0923de020260920104709.png">
                    </div>
                </details>
            </li>
        </ul>

<h4 style="color: #1A237E; 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 #9966FF; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>1.</b> ไปที่ตัวละคร <b>อุกกาบาต</b> นำบล็อก <code>when ⛳ clicked</code> มาวาง<br>
                <b>2.</b> ต่อด้วยบล็อก <code>hide</code> เพื่อซ่อนมันไว้ก่อนตอนเริ่มเกม<br>
                <b>3.</b> ไปที่ตัวละคร <b>ดวงดาว</b> และทำโค้ดแบบเดียวกันเป๊ะเลยครับ!

<details style="margin-top: 15px; background: #F8F9FA; border-radius: 6px; padding: 10px; border: 1px dashed #BDBDBD;" open="">
                    <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/9dcb88e0137649590b755372b040afad20260920105229.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>
            ยานอวกาศเด้งกลับมาอยู่ตรงกลางล่างของจอ และอุกกาบาตหายวับไปหรือเปล่า? ถ้าใช่... เตรียมลุย EP ต่อไปได้เลย!</p>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #3F51B5 0%, #283593 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>
        </div>
        
        <div style="border: 2px solid #283593; 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: #283593;">ข้อที่ 1: ทำไมเราถึงต้องใส่บล็อก "go to x: y:" ไว้ตอนเริ่มเกมเสมอ?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'ความเร็วของยานอยู่ที่บล็อกเคลื่อนที่ (เช่น change x) ไม่ใช่บล็อก 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;">ก. เพื่อให้ยานอวกาศเคลื่อนที่ได้เร็วขึ้น</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, 'การเปลี่ยนชุดตัวละคร ต้องใช้บล็อก next costume ครับ')" 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 = '#E8EAF6';
        btn.style.borderColor = '#3F51B5';
        btn.style.color = '#1A237E';
        btn.style.opacity = '1';
        btn.style.fontWeight = 'bold';
        feedback.style.background = '#E8EAF6';
        feedback.style.color = '#1A237E';
        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>