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

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, #1565C0 0%, #1976D2 50%, #2196F3 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #0D47A1;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">🕹️ EP.4: ควบคุมดั่งใจนึก (Keyboard Control)</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #BBDEFB; font-weight: bold;">เปลี่ยนคีย์บอร์ดให้เป็นจอยสติ๊ก บังคับยานหลบอุกกาบาต!</p>
    </div>

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

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #E3F2FD; padding: 20px; border-radius: 12px; margin-top: 25px; border-left: 5px solid #2196F3; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <div style="flex: 1; min-width: 250px; padding-right: 20px;">
                <h3 style="color: #1565C0; margin-top: 0;">🗺️ 1. รู้จักแผนที่อวกาศ (แกน X และ แกน Y)</h3>
                <p>หน้าจอของ Scratch แบ่งทิศทางออกเป็น 2 เส้นทางหลักๆ ครับ: <br>
                ↔️ <b>แกน X (แนวนอน):</b> ใช้บล็อก <code>change x by ...</code> ถ้าใส่เลขบวกยานจะไปทางขวา ถ้าใส่เลขลบ (-) ยานจะไปทางซ้าย<br>
                ↕️ <b>แกน Y (แนวตั้ง):</b> ใช้บล็อก <code>change y by ...</code> ถ้าใส่เลขบวกยานจะบินขึ้น ถ้าใส่เลขลบ (-) ยานจะบินลง</p>
            </div>
            <div style="flex: 1; text-align: center; min-width: 200px; display: flex; flex-direction: column; gap: 10px;">
                <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);">
                    change x by (10) <span style="font-size: 12px; opacity: 0.8;">(ไปขวา)</span>
                </div>
                <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);">
                    change y by (10) <span style="font-size: 12px; opacity: 0.8;">(บินขึ้น)</span>
                </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 #FF9800; 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: 5px;">
                <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;">
                    if < <span style="color: #fff; background-color: #5CB1D6; padding: 2px 8px; border-radius: 10px; border: 1px solid #3393B8;">key [up arrow] pressed?</span> > then
                </div>
                <div style="background-color: #4C97FF; color: white; padding: 10px 20px; border-radius: 0 0 10px 10px; font-weight: bold; border-left: 2px solid #E69500; border-right: 2px solid #E69500; border-bottom: 2px solid #E69500; width: calc(100% - 44px);">
                    change y by (10)
                </div>
            </div>
            <div style="flex: 1; min-width: 250px; padding-left: 20px;">
                <h3 style="color: #E65100; margin-top: 0;">🤔 2. สร้างเงื่อนไข (If - Then)</h3>
                <p>เราต้องสอนให้คอมพิวเตอร์รู้จักคิด โดยใช้บล็อกสีเหลืองทอง <b>if...then (ถ้า...แล้ว)</b> มาครอบคำสั่งเคลื่อนที่ไว้ แปลกติกาได้ว่า <i>"<u>ถ้า</u> ผู้เล่นกดปุ่มลูกศรชี้ขึ้น (Up Arrow) <u>แล้ว</u> ให้ยานอวกาศขยับไปตามแกน Y 10 ก้าว"</i></p>
            </div>
        </div>

<div style="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);">
            <h3 style="color: #7B1FA2; margin-top: 0;">✨ 3. เคล็ดลับสร้างเกมแบบ Pro Gamer!</h3>
            <p style="margin-bottom: 0;">ถ้าน้องๆ อยากให้ยานอวกาศบินได้ลื่นไหล ไม่กระตุก และบินเฉียงๆ ได้! เราจะต้องเอาบล็อกเงื่อนไข <b>if...then</b> ทั้ง 4 ทิศทาง ไปใส่ไว้ใน <b>forever (วนซ้ำตลอดกาล)</b> เสมอครับ เพื่อให้คอมพิวเตอร์คอยจ้องจับตาดูนิ้วของเราบนคีย์บอร์ดตลอดเวลาแบบไม่กระพริบตาเลย!</p>
        </div>

</div>

<div style="background: #FAFAFA; border: 2px dashed #2196F3; 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: #1565C0; margin-top: 0; font-size: 22px; text-align: center; border-bottom: 2px dashed #90CAF9; padding-bottom: 15px;">🎮 ภารกิจนักสร้างเกม: ติดตั้งพวงมาลัยให้ยานอวกาศ!</h3>
        <p style="text-align: center; font-size: 16px; margin-bottom: 25px; color: #555;"><b>คลิกที่ตัวละครยานอวกาศ (Rocketship)</b> แล้วมาต่อบล็อกชุดใหม่แยกออกมาอีก 1 ก้อนกันเลย! พยายามคิดเองก่อนกดดูเฉลยนะ</p>
        
        <h4 style="color: #0D47A1; 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>when I receive [เริ่มภารกิจ]</code> มาวางเป็นหัวบล็อกก้อนใหม่<br>
                <b>2. จ้องจับตาดูคีย์บอร์ด:</b> ลากบล็อก <code>forever</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/a8baa56554f96369ab93e4f3bb068c2220260920111433.png">
                    </div>
                </details>
            </li>
        </ul>

<h4 style="color: #0D47A1; margin-top: 25px; margin-bottom: 10px; font-size: 18px;">🕹️ ขั้นที่ 2: ใส่เกียร์ 4 ทิศทาง (ใส่ไว้ "ข้างใน" forever)</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>ทิศขึ้น (UP):</b> ลาก <code>if < > then</code> มาวางข้างใน forever<br>
                ใส่บล็อกสีฟ้าอ่อน <code>key [up arrow ▾] pressed?</code> ลงในช่องหกเหลี่ยม<br>
                ใส่บล็อกสีฟ้าเข้ม <code>change y by (10)</code> ไว้ข้างใน if
            </li>
            <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>ทิศลง (DOWN):</b> ทำเหมือนเดิม นำ if มาต่อใต้บล็อก if อันแรก (ระวังอย่าใส่ซ้อนกันนะ!)<br>
                เลือก <code>key [down arrow ▾] pressed?</code> และใช้คำสั่ง <code>change y by (-10)</code> <span style="color: red; font-weight:bold;">(อย่าลืมใส่เครื่องหมายลบ!)</span>
            </li>
            <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>ทิศขวา และ ซ้าย:</b> นำ if มาต่อด้านล่างสุดให้ครบ 4 ทิศ เปลี่ยนเซนเซอร์เป็น <code>right arrow</code> และ <code>left arrow</code><br>
                รอบนี้ต้องเปลี่ยนไปใช้แนวราบ คือคำสั่ง <code>change x by (10)</code> สำหรับขวา และ <code>change x by (-10)</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;">
                        👀 เช็คความชัวร์! คลิกดูหน้าตาบล็อกพวงมาลัย 4 ทิศทางตรงนี้
                    </summary>
                    <div style="margin-top: 15px; text-align: center;">
                        
                        <img src=" https://smartyquizkids.com/assets/images/smn/7f6ffaa6bb0b408017b62254211691b520260920112005.png">
                        <p style="font-size: 13px; color: #7f8c8d; margin-top: 10px;"><i>ระวังอย่าเอาบล็อก if ไปซ้อนไว้ข้างใน if อีกอันนะ! มันต้องเรียงต่อกัน 4 ก้อนครับ</i></p>
                    </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 วินาทีจบปุ๊บ... ลองเอานิ้วกดปุ่มลูกศร ขึ้น ลง ซ้าย ขวา บนคีย์บอร์ดดูเลย! <br>
            ถ้ายานอวกาศบินโฉบเฉี่ยวไปมาได้อย่างอิสระ (ลองกด เฉียงๆ เช่น ขวาพร้อมขึ้น ดูสิ!) แปลว่าระบบควบคุมยานสมบูรณ์แบบครับ!</p>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ สรุปความรู้ EP.4</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #BBDEFB;">ทดสอบใบขับขี่ยานอวกาศของน้องๆ!</p>
        </div>
        
        <div style="border: 2px solid #1565C0; 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: #1565C0;">ข้อที่ 1: ถ้าน้องๆ ต้องการบังคับยานอวกาศให้ "ถอยหลังลงมาด้านล่าง" จะต้องใช้บล็อกคำสั่งใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'change x ใช้สำหรับเดินหน้า-ถอยหลัง ซ้ายขวา แนวนอนครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ก. change x by (-10)</button>
                    <button onclick="checkAnswer(this, false, 'change y ที่เป็นเลขบวก จะทำให้ยานบินขึ้นข้างบนครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ข. change y by (10)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! แกน Y คือแนวตั้ง และถ้าต้องการให้ลงด้านล่าง ต้องใส่เครื่องหมายลบ (-) หน้าตัวเลขด้วยครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ค. change y by (-10)</button>
                    <button onclick="checkAnswer(this, false, 'บล็อก set จะเป็นการวาร์ปตัวละครไปที่จุดนั้นเลยทันทีครับ ไม่ใช่การค่อยๆ ขยับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ง. set y to (-10)</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: #1565C0;">ข้อที่ 2: เหตุผลสำคัญที่สุดที่เราต้องเอาบล็อกเงื่อนไข "if...then" ทั้ง 4 ทิศทาง ไปใส่ไว้ในบล็อก "forever" คืออะไร?</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;">ก. เพื่อให้โปรแกรมตรวจสอบการกดปุ่มแค่ครั้งเดียวตอนเริ่มเกม</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! การใส่ forever จะทำให้คอมพิวเตอร์สแกนการกดปุ่มของเราตลอดเวลาทุกๆ เสี้ยววินาที ทำให้เกมตอบสนองไว และบังคับได้ลื่นไหลครับ')" 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, 'forever ไม่ได้เพิ่มความเร็วครับ ความเร็วอยู่ที่ตัวเลขในบล็อก change 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;">ค. เพื่อให้ยานอวกาศเคลื่อนที่ได้เร็วขึ้นกว่าปกติ</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>
    </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 = '#E3F2FD';
        btn.style.borderColor = '#2196F3';
        btn.style.color = '#0D47A1';
        btn.style.opacity = '1';
        btn.style.fontWeight = 'bold';
        feedback.style.background = '#E3F2FD';
        feedback.style.color = '#0D47A1';
        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>