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

Back

รูปสินค้า (850 x 600 / .jpg , .png) *

ประเภทบทเรียน

ประเภทบทเรียนย่อย

Title

Description

Keyword

Detail

<div style="font-family: 'Sarabun', sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.05);">
    <h2 style="color: #d35400; border-bottom: 2px solid #e67e22; padding-bottom: 10px;">ภารกิจที่ 4: เสกข้อความลงหน้าจอ (Input & Output)</h2>
    <p><strong>🎯 ภารกิจ:</strong> เขียนโค้ดให้แอปนำข้อความที่เราพิมพ์ ไปเก็บลงในหน่วยความจำ และแสดงผลออกมาให้เห็นบนหน้าจอทันที</p>
    <p><strong>💡 แนวคิด:</strong> การทำงานพื้นฐานของโปรแกรมคือ รับข้อมูล (Input) ➡️ ประมวลผลเก็บลงความจำ (Process) ➡️ แสดงผลออกทางหน้าจอ (Output)</p>

<h3 style="color: #d35400;">1. ดักจับเหตุการณ์ "เมื่อกดปุ่มบันทึก"</h3>
    <div style="background-color: #fdf2e9; border-left: 5px solid #d35400; padding: 15px; margin-bottom: 20px;">
        <b>สร้างปุ่มสั่งการทำงาน:</b><br><br>
        1. ไปที่เมนูซ้ายมือ (ช่อง Blocks) คลิกที่ <b>btn_Save</b><br>
        2. ลากบล็อกสีเหลืองอันบนสุดที่ชื่อว่า <b>when btn_Save.Click do</b> มาวางบนพื้นที่ว่าง<br>
        <i>👉 บล็อกนี้คือประตูด่านแรก โค้ดที่อยู่ข้างในจะทำงานก็ต่อเมื่อเราเอานิ้วแตะปุ่ม "บันทึกการบ้าน" เท่านั้น</i>
    </div>

<h3 style="color: #34495e;">2. นำข้อความไปจดลงในสมุด (Add items to list)</h3>
    <div style="background-color: #2c3e50; color: #ecf0f1; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
        <span style="color: #e74c3c; font-weight: bold;">STEP 2</span><br>
          1. ไปที่หมวด <span style="color: #3498db; font-weight: bold;">Lists (สีฟ้า)</span> ลากบล็อก <b>add items to list</b> มาใส่ในบล็อกสีเหลือง (ให้โดนงับไว้)<br>
          2. <b>ช่อง list:</b> เอาเมาส์ไปชี้ตรงคำว่า <i>HomeworkList</i> (ที่บล็อกสีส้มอันเก่า) แล้วลาก <b>get global HomeworkList</b> มาต่อ<br>
          3. <b>ช่อง item:</b> คลิกที่ <b>txt_Input</b> (ซ้ายมือ) เลื่อนหาบล็อกสีเขียวอ่อน <b>txt_Input.Text</b> แล้วลากมาต่อท้าย<br>
    </div>

<h3 style="color: #e83e8c;">3. สั่งให้โชว์รายการบนหน้าจอ (Update ListView)</h3>
    <div style="background-color: #fce4ec; border-left: 5px solid #e83e8c; padding: 15px; margin-bottom: 20px;">
        <b>ดึงสมุดความจำมาแผ่ให้ดูบนกระดาน:</b><br><br>
        1. คลิกที่ <b>lvw_Homework</b> (ซ้ายมือ)<br>
        2. ลากบล็อกสีเขียวเข้ม <b>set lvw_Homework.Elements to</b> มาต่อไว้ด้านล่าง (แต่อยู่ในกรอบสีเหลือง)<br>
        3. เอาเมาส์ไปชี้คำว่า <i>HomeworkList</i> อีกครั้ง แล้วลาก <b>get global HomeworkList</b> มาต่อที่ด้านหลัง<br>
    </div>

<h3 style="color: #27ae60;">4. เคลียร์ช่องพิมพ์ให้สะอาด (UX Bonus)</h3>
    <div style="background-color: #eafaf1; border-left: 5px solid #27ae60; padding: 15px; margin-bottom: 20px;">
        <b>ลบข้อความเก่าทิ้ง เพื่อรอพิมพ์การบ้านข้อต่อไป:</b><br><br>
        1. คลิกที่ <b>txt_Input</b> ลากบล็อก <b>set txt_Input.Text to</b> มาต่อล่างสุด<br>
        2. ไปที่หมวด <span style="color: #e84393; font-weight: bold;">Text (สีชมพู)</span> ลากบล็อกข้อความว่าง <b>" "</b> (อันบนสุด) มาต่อด้านหลัง<br><br>
        <i>📱 <b>ถึงเวลาทดสอบ!</b> ให้นักเรียนเชื่อมต่อ MIT AI2 Companion แล้วลองพิมพ์การบ้านกดยืนยันดูได้เลยครับ ข้อความจะไปเด้งโชว์ด้านล่างทันที!</i>
    </div>
</div>