หน่วยที่ 3 EP.5: ยกระดับแอปพลิเคชันด้วยตัวแปรและลิสต์ (Quiz App)

By Admin
4
9 เม.ย. 2569

หน่วยที่ 3 EP.5: ยกระดับแอปพลิเคชันด้วยตัวแปรและลิสต์ (Quiz App)

ปิดท้ายหน่วยการเรียนรู้ด้วยการสร้างแอปพลิเคชันสุดล้ำ! ก้าวข้ามขีดจำกัดเดิมๆ ด้วยการสร้าง "แอปตอบคำถาม (Quiz App)" เรียนรู้เทคนิคการเก็บข้อมูลหลายๆ ชุดด้วย รายการ (List) และการใช้ ตัวแปร (Variable) ในการจดจำตำแหน่งข้อ พร้อมจุดประกายไอเดียนำความรู้ไปสร้างโครงงานแอปพลิเคชันเพื่อโปรโมตสินค้า OTOP ของชุมชน

🏆 หน่วยที่ 3 EP.5: ยกระดับแอปพลิเคชันด้วยตัวแปรและลิสต์

Advanced App: Quiz Test & Variables

ที่ผ่านมาเราสร้างแอปที่มีแค่หน้าเดียวและคิดเลขแบบง่ายๆ ไปแล้ว แต่ถ้าเราอยากสร้าง "แอปพลิเคชันตอบคำถาม (Quiz App)" ที่มีคำถาม 10 ข้อ มีรูปภาพเปลี่ยนไปเรื่อยๆ... เราจะสร้างหน้าจอถึง 10 หน้าเลยหรือเปล่า? คำตอบคือ ไม่ต้องครับ! เราสามารถใช้หน้าจอเดียว แล้วให้โปรแกรม "ดึงข้อมูล" มาเปลี่ยนเอาเองได้ ด้วยพลังของ ตัวแปร (Variable) และ รายการ (List) ครับ

📦 1. รู้จักกับ List และ Variable

เพื่อทำแอปตอบคำถาม เราต้องรู้จักเครื่องมือจัดระเบียบข้อมูล 2 ตัวนี้ก่อนครับ:

📚 List (รายการ)

เปรียบเสมือน "ตู้ลิ้นชัก" ที่ใช้เก็บข้อมูลหลายๆ อันไว้ในชื่อเดียว เช่น ลิ้นชักเก็บคำถาม (คำถามข้อ 1, 2, 3...) ลิ้นชักเก็บรูปภาพ และลิ้นชักเก็บคำตอบที่ถูกต้อง (ใช้บล็อก make a list สีฟ้าอ่อน)

🔢 Variable (ตัวแปร)

เปรียบเสมือน "กล่องความจำ" ที่ปรับเปลี่ยนค่าได้ตลอดเวลา ในแอปนี้เราจะสร้างตัวแปรชื่อ index เพื่อจำว่า "ตอนนี้ผู้เล่นอยู่ข้อที่เท่าไหร่แล้ว" (ใช้บล็อก initialize global... สีส้ม)

🎨 2. การออกแบบหน้าจอ (UI Design)

ในหน้า Designer เราจะต้องอัปโหลดรูปภาพเตรียมไว้ในช่อง Media ก่อน จากนั้นจัดหน้าจอแบบเรียบง่าย ดังนี้ครับ:

Image: สำหรับแสดงรูปภาพคำถาม (ตั้งชื่อว่า QuizImage)
Label: สำหรับแสดงข้อความคำถาม (ตั้งชื่อว่า QuizLabel)
TextBox: สำหรับให้ผู้ใช้พิมพ์คำตอบ
HorizontalArrangement: วางปุ่ม 2 ปุ่มเรียงกัน คือปุ่ม "ส่งคำตอบ (Answer)" และปุ่ม "ข้อถัดไป (Next)"

🧠 3. หัวใจสำคัญของการต่อบล็อก (Blocks Logic)

การเขียนสมองให้แอปนี้ค่อนข้างซับซ้อน แต่สนุกมากครับ! มี 3 เหตุการณ์หลักที่เราต้องดักจับ (Event Handling):

ตอนเปิดแอป (when Screen1.Initialize): สั่งให้ดึงรูปและคำถามใน "ลิ้นชักช่องที่ 1 (index=1)" มาโชว์เป็นข้อแรกเสมอ
ตอนกดปุ่มส่งคำตอบ (when AnswerButton.Click): ใช้บล็อกเงื่อนไข if...then...else
✅ ถ้า (if): คำตอบใน TextBox = ข้อมูลในลิ้นชักคำตอบช่องปัจจุบัน (index) -> ให้แจ้งเตือนว่า "ถูกต้อง!"
❌ มิฉะนั้น (else): ให้แจ้งเตือนว่า "ผิดครับ ลองใหม่นะ"
ตอนกดปุ่มข้อถัดไป (when NextButton.Click): สั่งให้ตัวแปร index บวก 1 (เพื่อเปลี่ยนเป็นข้อ 2) แล้วตรวจสอบว่าเกินจำนวนข้อทั้งหมดหรือยัง ถ้ายังไม่เกินก็ดึงรูปและคำถามข้อต่อไปมาโชว์

🌟 4. โครงงานสู่นวัตกรรม (OTOP App)

เมื่อนักเรียนสามารถสร้างแอปที่มีหลายหน้า มีฐานข้อมูล (List) และมีการคำนวณได้แล้ว นักเรียนสามารถนำความรู้นี้ไปต่อยอดเป็น "โครงงานวิทยาการคำนวณ" ได้อย่างสวยงามครับ เช่น การเปลี่ยนแอปคำถาม ให้เป็น แอปพลิเคชันแคตตาล็อกสินค้า OTOP ประจำชุมชน โดยใช้ Image แสดงรูปสินค้า และใช้ List เก็บรายละเอียดและราคาสินค้า ซึ่งถือเป็นการใช้เทคโนโลยีเพื่อสร้างมูลค่าเพิ่มให้ชุมชนอย่างแท้จริงครับ!

✍️ มินิควิซ ทบทวนความรู้ EP.5

ทดสอบความเข้าใจเรื่องตัวแปร ลิสต์ และโครงงานนวัตกรรม

ข้อที่ 1: ในแอปพลิเคชันตอบคำถาม ตัวแปร (Variable) ที่ชื่อว่า global index มีหน้าที่สำคัญอย่างไร?

ข้อที่ 2: หากนักเรียนต้องการเก็บชุดคำถามจำนวน 10 ข้อเอาไว้ในชื่อตัวแปรเดียว เพื่อความเป็นระเบียบ นักเรียนควรเลือกใช้บล็อกคำสั่งใดใน MIT App Inventor?

ข้อที่ 3: บล็อกเหตุการณ์ที่ชื่อว่า when Screen1.Initialize do... มีประโยชน์อย่างไรในการเขียนแอปพลิเคชัน?

ข้อที่ 4: หากเราต้องการตรวจสอบเงื่อนไขว่า "คำตอบที่ผู้ใช้พิมพ์มา ตรงกับคำตอบที่ถูกต้องหรือไม่" เราจำเป็นต้องใช้บล็อกคำสั่งใด?

ข้อที่ 5: ตามแนวทางการทำโครงงานนวัตกรรม การนำความรู้การสร้างแอปพลิเคชันจาก MIT App Inventor ไปประยุกต์ใช้เพื่อ "โปรโมตและขายสินค้า OTOP ของชุมชน" สะท้อนให้เห็นถึงทักษะใดมากที่สุด?

แชร์ :