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

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, #E53935 0%, #D32F2F 50%, #B71C1C 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #7F0000;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">📦 EP.5: กล่องวิเศษความจำดี (Variables & Game Over)</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FFCDD2; font-weight: bold;">สร้างระบบนับคะแนน พลังชีวิต และจุดจบของภารกิจ!</p>
    </div>

<div style="margin-bottom: 30px;">
        
        <p style="font-size: 18px; padding: 0 10px;">ยานอวกาศของเราบินได้แล้ว! แต่เอ๊ะ... บินชนดาวก็ไม่มีอะไรเกิดขึ้น บินชนอุกกาบาตก็ไม่เป็นไร แบบนี้ก็ไม่สนุกสิ! วันนี้เราจะมาสร้าง <b>"ตัวแปร" (Variable)</b> ซึ่งเปรียบเสมือนกล่องวิเศษที่ใช้จดจำ <b>คะแนน (Score)</b> และ <b>พลังชีวิต (HP)</b> ของเรากันครับ</p>

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #FFEBEE; padding: 20px; border-radius: 12px; margin-top: 25px; border-left: 5px solid #F44336; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <div style="flex: 1; min-width: 250px; padding-right: 20px;">
                <h3 style="color: #C62828; margin-top: 0;">🧮 1. กล่องวิเศษ (Make a Variable)</h3>
                <p>ในหมวดสีส้มเข้ม (Variables) เราสามารถกดปุ่ม <b>Make a Variable</b> เพื่อตั้งชื่อกล่องความจำของเราได้ เช่น สร้างกล่องชื่อ <b>Score</b> ไว้เก็บคะแนน และกล่องชื่อ <b>HP</b> ไว้เก็บหัวใจพลังชีวิตครับ</p>
            </div>
            <div style="flex: 1; text-align: center; min-width: 200px; display: flex; flex-direction: column; gap: 10px;">
                <div style="background-color: #FF8C1A; color: white; padding: 10px 20px; border-radius: 20px; font-weight: bold; display: inline-block; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
                    set [Score ▾] to (0) <span style="font-size: 12px; opacity: 0.8;">(ตั้งค่าเริ่มต้น)</span>
                </div>
                <div style="background-color: #FF8C1A; color: white; padding: 10px 20px; border-radius: 20px; font-weight: bold; display: inline-block; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
                    change [Score ▾] by (1) <span style="font-size: 12px; opacity: 0.8;">(เพิ่มทีละ 1)</span>
                </div>
            </div>
        </div>

<div style="display: flex; flex-wrap: wrap; align-items: center; background: #E3F2FD; padding: 20px; border-radius: 12px; margin-top: 20px; border-left: 5px solid #2196F3; 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;">touching [Rocketship ▾]?</span> > then
                </div>
                <div style="background-color: #FF8C1A; 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 [Score ▾] by (1)
                </div>
            </div>
            <div style="flex: 1; min-width: 250px; padding-left: 20px;">
                <h3 style="color: #1565C0; margin-top: 0;">💥 2. ระบบสัมผัส (Touching)</h3>
                <p>เราจะรู้ได้ยังไงว่าเก็บดาวได้แล้ว? ให้ใช้บล็อกเงื่อนไข if คู่กับเซนเซอร์สีฟ้า <b>touching</b> ครับ แปลได้ว่า <i>"ถ้าดาวดวงนี้ แตะโดน ยานอวกาศ... ให้เพิ่มคะแนน 1 แต้ม"</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. จุดจบของเกม (Game Over)</h3>
                <p>ถ้า HP ของเราลดลงจนเหลือ 0 เกมจะต้องจบลง! เราจะใช้บล็อกเงื่อนไขตรวจสอบว่า HP = 0 หรือไม่ ถ้าใช่ เราจะสั่งให้ทุกอย่างในเกมหยุดนิ่งด้วยบล็อกสีเหลืองทอง <b>stop [all]</b> ครับ</p>
            </div>
            <div style="flex: 1; text-align: center; min-width: 200px;">
                <div style="background-color: #FFAB19; 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); border: 2px solid #E69500;">
                    stop [all ▾]
                </div>
            </div>
        </div>

</div>

<div style="background: #FAFAFA; border: 2px solid #D32F2F; 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: #B71C1C; margin-top: 0; font-size: 22px; text-align: center; border-bottom: 2px dashed #EF9A9A; padding-bottom: 15px;">🎮 ภารกิจนักสร้างเกม: เสกระบบคะแนนและ Game Over!</h3>
        <p style="text-align: center; font-size: 16px; margin-bottom: 25px; color: #555;">มาเริ่มสร้างกล่องวิเศษเพื่อจำคะแนนกันก่อนเลย!</p>

<h4 style="color: #C62828; margin-bottom: 10px; font-size: 18px;">📦 ขั้นที่ 1: สร้างกล่องวิเศษ (Make a Variable)</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 #FF8C1A; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>1.</b> ไปที่หมวดโค้ดสีส้มเข้ม <code>Variables</code> (ตัวแปร)<br>
                <b>2.</b> คลิกที่ปุ่ม <code>Make a Variable</code> (สร้างตัวแปร)<br>
                <b>3.</b> พิมพ์ชื่อกล่องแรกว่า <b>Score</b> แล้วกด OK<br>
                <b>4.</b> ทำซ้ำอีกครั้ง พิมพ์ชื่อกล่องที่สองว่า <b>HP</b> แล้วกด OK
                
                
                <details style="margin-top: 15px; background: #F8F9FA; border-radius: 6px; padding: 10px; border: 1px dashed #BDBDBD;">
                    <summary style="cursor: pointer; color: #C62828; 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/a2557a7b2e94197ff767970b6704169720260920112920.png">
                        <p style="font-size: 13px; color: #7f8c8d; margin-top: 10px;"><i>อย่าลืมติ๊กถูก ✔️ หน้าชื่อตัวแปร เพื่อให้มันไปโชว์ที่หน้าจอเกมของเราด้วยนะ!</i></p>
                    </div>
                </details>
            </li>
        </ul>
        
        <h4 style="color: #C62828; 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 #FF8C1A; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                นำบล็อก <code>set [Score] to (0)</code> และ <code>set [HP] to (3)</code> ไปต่อไว้ <b>"ใต้ธงเขียว"</b> ของยานอวกาศ (เพื่อรีเซ็ตคะแนนและให้พลังชีวิต 3 ดวง ทุกครั้งที่เริ่มเกมใหม่)
                
                
                <details style="margin-top: 15px; background: #F8F9FA; border-radius: 6px; padding: 10px; border: 1px dashed #BDBDBD;">
                    <summary style="cursor: pointer; color: #C62828; 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/a4a042cf4fd6bfb47701cbc8a1653ada20260920113308.png">
                        <p style="font-size: 13px; color: #7f8c8d; margin-top: 10px;"><i>ต่อกันใต้บล็อก when ⛳ clicked แบบนี้เลยนะ</i></p>
                    </div>
                </details>
            </li>
        </ul>

<h4 style="color: #C62828; margin-top: 25px; margin-bottom: 10px; font-size: 18px;">⭐ ขั้นที่ 3: ระบบเก็บดาวได้คะแนน (คลิกที่ตัวละครดาว)</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 #5CB1D6; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>1.</b> ไปที่โค้ดของดวงดาว ลาก <code>if < > then</code> ไปใส่ไว้ <b>"ข้างใน forever"</b> <br>
                <b>2.</b> ใส่เซนเซอร์สีฟ้า <code>touching [Rocketship]?</code> ลงในช่องหกเหลี่ยมของ if<br>
                <b>3.</b> ใส่บล็อกสีส้ม <code>change [Score] by (1)</code> ไว้ข้างใน if เพื่อบวกคะแนน<br>
                <b>4.</b> <b>ทริคพิเศษ:</b> ใส่บล็อก <code>go to [random position]</code> ต่อท้ายเข้าไปด้วย เพื่อให้ดาววาร์ปหนีทันทีที่ถูกชน (คะแนนจะได้ไม่เด้งรัวๆ!)
                
                
                <details style="margin-top: 15px; background: #F8F9FA; border-radius: 6px; padding: 10px; border: 1px dashed #BDBDBD;">
                    <summary style="cursor: pointer; color: #C62828; 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/2b44928ae11fb9384c4cf38708677c4820260920113852.png">
                    </div>
                </details>
            </li>
        </ul>

<h4 style="color: #C62828; margin-top: 25px; margin-bottom: 10px; font-size: 18px;">☄️ ขั้นที่ 4: ระบบพลังลดและ Game Over (คลิกที่อุกกาบาต)</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 #F44336; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>1.</b> ไปที่อุกกาบาต ใส่ <code>if <touching [rocketship]?=""> then</touching></code> ไว้ข้างใน forever เหมือนกัน<br>
                <b>2.</b> ใส่บล็อก <code>change [HP] by (-1)</code> <span style="color: red; font-weight:bold;">(ใส่เลขลบเพื่อลดพลัง!)</span> และ <code>go to [random position]</code> ไว้ข้างใน if<br>
            </li>
            <li style="background: #FFEBEE; padding: 15px; border-radius: 8px; margin-bottom: 12px; border-left: 4px solid #B71C1C; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                <b>3. สร้างจุดจบเกม:</b> เอา <code>if < > then</code> อันใหม่มาต่อด้านล่าง (ต่อกันนะ ห้ามซ้อน!)<br>
                <b>4.</b> ใส่บล็อกสีเขียว <code>( ) = (50)</code> ลงไป เปลี่ยนเงื่อนไขเป็น <b>(HP) = (0)</b><br>
                <b>5.</b> ใส่บล็อก <code>stop [all]</code> ไว้ข้างใน เพื่อหยุดทุกอย่างเมื่อพลังหมด!
                
                
                <details style="margin-top: 15px; background: #F8F9FA; border-radius: 6px; padding: 10px; border: 1px dashed #BDBDBD;">
                    <summary style="cursor: pointer; color: #C62828; font-weight: bold; outline: none; padding-left: 5px;">
                        👀 เช็คความชัวร์! ดูหน้าตาบล็อกลดพลังและ Game Over
                    </summary>
                    <div style="margin-top: 15px; text-align: center;">
                        
                        <img src=" https://smartyquizkids.com/assets/images/smn/cfecdb276f634854f3ef915e2e980c3120260920114535.png">
                        <p style="font-size: 13px; color: #7f8c8d; margin-top: 10px;"><i>สังเกตนะว่าบล็อก if ทั้งสองอันเรียงต่อกัน ไม่ได้กลืนกินกันอยู่!</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;">✅ ขั้นที่ 5: เช็คลิสต์ทดสอบความสำเร็จ (Test & Debug)</h4>
            <p style="margin: 0; font-size: 15px; line-height: 1.6;">มากด <b>ธงเขียว</b> ทดสอบเกมของเรากันเถอะ!<br>
            1. ลองบังคับยานไปชนดาว คะแนน (Score) เพิ่มขึ้นทีละ 1 ใช่ไหม?<br>
            2. ลองบินไปชนอุกกาบาต พลังชีวิต (HP) ลดลงทีละ 1 ใช่ไหม?<br>
            3. ยอมสละยาน! ชนอุกกาบาตจน HP เหลือ 0... เกมหยุดนิ่งทุกอย่างเลยใช่ไหม? ถ้าใช่ ภารกิจสำเร็จ 100%!</p>
        </div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">🧩 มินิควิซ สรุปความรู้ EP.5</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #FFCDD2;">ทดสอบระบบความจำของนักสร้างเกม!</p>
        </div>
        
        <div style="border: 2px solid #B71C1C; 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: #C62828;">ข้อที่ 1: ถ้าน้องๆ ลืมใส่บล็อก "set Score to 0" ไว้ใต้ปุ่มธงเขียว จะเกิดผลเสียอย่างไร?</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, true, 'ถูกต้องครับ! หากไม่รีเซ็ตค่าเริ่มต้น เมื่อกดเล่นเกมรอบใหม่ คะแนนก็จะบวกต่อจากรอบที่แล้ว (เช่น เริ่มเกมใหม่แต่คะแนนเริ่มที่ 500) แบบนี้โกงเกินไปครับ!')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ข. เมื่อกดเล่นเกมรอบใหม่ คะแนนจะนับต่อจากตาที่แล้ว ไม่กลับมาเริ่มต้นที่ 0</button>
                    <button onclick="checkAnswer(this, false, 'ถ้าเราชนดาว บล็อก change score จะยังทำงานครับ แต่คะแนนจะไม่อยู่ที่ 0')" 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: #C62828;">ข้อที่ 2: บล็อก "change [HP] by ( )" ถ้าน้องๆ ต้องการให้พลังชีวิต "ลดลง" น้องๆ ต้องพิมพ์ตัวเลขในช่องว่างอย่างไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'พิมพ์เลข 1 เฉยๆ คือการบวกเพิ่มครับ (พลังเพิ่มขึ้น)')" 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>
                    <button onclick="checkAnswer(this, false, 'เลข 0 คือไม่เพิ่มและไม่ลดครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; font-family: inherit; font-size: 16px;">ข. พิมพ์เลข 0</button>
                    <button onclick="checkAnswer(this, true, 'เก่งมากครับ! การใส่เครื่องหมายลบ (-) หน้าตัวเลข จะทำให้บล็อก change ทำงานเป็นการ หักลบ (พลังลดลง) นั่นเอง')" 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>
                    <button onclick="checkAnswer(this, false, 'ไม่จำเป็นครับ บล็อก change สามารถตั้งค่าให้ลดลงได้ ไม่ต้องใช้บล็อก 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 เท่านั้น</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 = '#FFEBEE';
        btn.style.borderColor = '#F44336';
        btn.style.color = '#B71C1C';
        btn.style.opacity = '1';
        btn.style.fontWeight = 'bold';
        feedback.style.background = '#FFEBEE';
        feedback.style.color = '#B71C1C';
        feedback.innerHTML = "✅ ถูกต้องครับ! " + msg;
    } else {
        btn.style.background = '#F5F5F5';
        btn.style.borderColor = '#9E9E9E';
        btn.style.color = '#616161';
        btn.style.opacity = '1';
        feedback.style.background = '#F5F5F5';
        feedback.style.color = '#616161';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>