วิธีการสร้าง

1. สร้าง Component Image ตั้งชื่อว่า Img
2. Properties ของ Img ตั้งค่า Width เป็น Fill parent ส่วน Height ตั้งเป็น Automatic
3. สร้าง Label ตั้งชื่อว่า AnswerResult ไว้สำหรับแสดงผลลัพธ์ เช่น คำตอบถูกต้อง คำตอบไม่ถูกต้อง
4. กำนหนด Text ใน Properties ของ AnswerResult เป็นว่างเปล่า
5. สร้าง Label ตั้งชื่อว่า Question ไว้สำหรับแสดงคำถาม
6. สร้าง HorizontalArrangement ในหมวดหมู่ของ Layout
7. Properties ของ HorizontalArrangement ที่สร้างในข้อ 5 ตั้งค่า AlignVertical เป็น Center : 2
8. สร้าง Label ตั้งชื่อว่า DisplayScore ไว้สำหรับแสดงคะแนนที่ได้ กำหนด Width เป็น 50 percent
9. สร้าง Button ตั้งชื่อว่า ResetScore ไว้สำหรับรีเซ็ตคะแนน และตั้ง Text เป็น Reset Score
10. นำ DisplayScore และ ResetScore ไปไว้ใน HorizontalArrangement ที่สร้างในข้อที่ 5
11. สร้าง HorizontalArrangement ในหมวดหมู่ของ Layout
12. สร้าง TextBox ตั้งชื่อว่า AnswerBox ไว้สำหรับพิมพ์คำตอบ
13. สร้าง Button ตั้งชื่อว่า SendAnswer ไว้สำหรับส่งคำตอบ กำหนด Text เป็น ส่งคำตอบ
14. สร้าง Button ตั้งชื่อว่า Nextbutton ไว้สำหรับเปลี่ยนข้อเป็นข้อต่อไป กำหนด Text เป็น ข้อต่อไป
15. นำ AnswerBox SendAnswer และ Nextbutton ไปไว้ใน HorizontalArrangement ที่สร้างในข้อที่ 11 และกำหนด Hint ใน Properties ของ AnswerBox เป็น พิมพ์คำตอบ
16. หารูปเพื่อใช้ในการตั้งคำถามและ Upload File เข้า Project ให้เรียบร้อย
17. คลิกที่ปุ่ม Blocks เพื่อเริ่มการกำหนดการทำงานของโปรแกรม
18. สร้างตัวแปรชื่อ QuestionList และกำหนดค่าเป็น Array ด้วยบล็อก make a list
19. กดที่รูปเฟืองและลาก item จากด้านซ้ายของ popup ที่เด้งขึ้นมาไปต่อทางด้านขวาของใน popup ตามจำนวนข้อคำถามที่ต้องการจะสร้าง
20. ทำการกำหนดคำถามโดยใช้บล็อก Text เป็นตัวกำหนด
21. สร้างตัวแปรชื่อ AnswerList และกำหนดค่าเป็น Array ด้วยบล็อก make a list
22. กดที่รูปเฟืองและลาก item จากด้านซ้ายของ popup ที่เด้งขึ้นมาไปต่อทางด้านขวาของใน popup ตามจำนวนข้อคำถามที่ต้องการสร้าง
23. ทำการกำหนดคำตอบโดยใช้บล็อก Text เป็นตัวกำหนด
24. สร้างตัวแปรชื่อ ImgList และกำหนดค่าเป็น Array ด้วยบล็อก make a list
25. กดที่รูปเฟืองและลาก item จากด้านซ้ายของ popup ที่เด้งขึ้นมาไปต่อทางด้านขวาของใน popup ตามจำนวนข้อคำถามที่ต้องการสร้าง
26. ทำการกำหนดรูปที่ใช้ในแสดงพร้อมกับคำถามโดยใช้บล็อก Text เป็นตัวกำหนด
27. ❗ สังเกตว่าค่าของตัวแปรทั้ง 3 ตัว ตำแหน่งใน list(array) จะต้องตรงกันทั้ง คำถาม คำตอบ และ ชื่อไฟล์รูป
28. สร้างตัวแปรชื่อ CurrentQuestion และกำหนดค่าเป็น 1 เพื่อใช้ตรวจสอบว่าปัจจุบันเราอยู่ที่ข้อใด
29. นำบล็อก Screen1.Initialize มากำหนดการทำงานของโปรแกรมเมื่อหน้าจอเริ่มการทำงาน
30. เมื่อหน้าจอเริ่มการทำงานให้คำถามข้อที่ 1 ถูกแสดงผลโดยกำหนดคำถามด้วยบล็อก Set Question.Text to และแสดงรูปภาพประกอบคำถามด้วยบล็อก Set Img.Picture to
31. นำคำถามจากตัวแปร QuestionList มาแสดงผลด้วยการ Select list item และนำรูปจากตัวแปร ImgList มาแสดงผลด้วยการ Select list item ส่วนตำแหน่งของ item ใน list(array) จะอ้างอิงด้วย CurrentQuestion เพราะตำแหน่งข้อที่กำลังแสดงผลและตำแหน่งของ item จะตรงกัน ดังนั้นจะได้ดังรูป
32. เริ่มจากการทำปุ่ม ข้อต่อไป โดยใช้บล็อก when Nextbutton.Click ให้เซ็ตค่าของตัวแปร CurrentQuestion เป็น CurrentQuestion + 1 เพื่อที่จะได้รู้ว่าหลังจากกดปุ่ม ข้อต่อไป ตอนนี้อยู่ข้อที่เท่าไหร่

อาจจะอ่านแล้วงงๆหน่อยนะครับ เพราะผมก็อธิบายไม่ถูกเหมือนกัน5555

33. ต่อจากข้อ 32 ที่เซ็ตค่าในตัวแปรใหม่ ทำเหมือนตอนหน้าจอเริ่มต้นการทำงาน ก็คือ นำคำถามพร้อมรูปภาพมาแสดงผล จะได้ดังนี้
34. ทำให้คำถามวนไปเลื่อยๆด้วยการใช้ if else วิธีการทำก็คือ ใช้ if ตรวจสอบว่า CurrentQuestion(ข้อปัจจุบัน) เป็นข้อที่ 3 (ข้อสุดท้าย) รึป่าว ถ้าใช่(เงื่อนไขถูกต้องหรือเป็นจริง) ให้เซ็ตค่าใน CurrentQuestion ไปเป็น 1 เพื่อที่จะได้กลับไปข้อ 1 แต่ถ้าไม่ใช่(เงื่อนไขไม่ถูต้องหรือไม่เป็นจริง) ให้ นำค่า CurrentQuestion มา +1 เพื่อจะได้เป็นข้อต่อไป จะได้ดังนี้

อันนี้บางคนจะงงกัน คือรูปข้างบนนี้ทำต่อจากข้อที่ 33 นะ ไม่ใช่สร้างบล็อก when Nextbutton.Click ใหม่นะ

35. การตรวจคำตอบก็ใช้ if else ในการตรวจเช่นกัน วิธีการทำก็คือ สร้างบล็อก when SendAnswer.Click แล้วนำ if else มาใส่ รูปแบบการทำงานคือ เมื่อคลิกปุ่ม ส่งคำตอบ(SendAnswer) จะตรวจสอบก่อนว่า ถ้าคำตอบที่พิมพ์ตอบ ตรงกับ คำตอบที่ถูกกำหนดไว้(เงื่อนไขถูกต้องหรือเป็นจริง) จะแสดงข้อความว่า คำตอบถูกต้อง แต่ถ้าคำตอบที่พิมพ์ตอบไม่ตรงกับคำตอบที่กำหนดไว้(เงื่อนไขไม่ถูกต้อง หรือ ไม่เป็นจริง) จะแสดงข้อความว่า คำตอบไม่ถูกต้อง จะได้ดังนี้

อธิบายนิดนึง ก็คือเมื่อปุ่มส่งคำตอบถูกคลิกหรือถูกกดเนีย ก็จะเริ่มตรวจสอบว่าคำตอบถูกต้องมั้ยด้วยการไปดึงข้อความที่อยู่ในช่องตอบคำถามก็คือตัว AnswerBox.Text มาตรวจสอบกับค่าใน list(array) ที่เป็นคำตอบของข้อนั้น ก็คือ select มาจาก AnswerList index คือตำแหน่ง ตำแหน่งก็คือข้อที่เรากำลังทำอยู่ จะรู้ได้ไงว่าข้อที่เราทำอยู่คือข้อไหนก็รู้ได้จาก CurrentQuestion เพราะ เรากำหนดค่าในตัวแปร CurrentQuestion ตามหมายเลขข้อที่เรากำลังทำอยู่ ก็ตรวจสอบ ถ้าคำตอบที่พิมพ์ตรงกับคำตอบที่ select มา ก็ให้กำหนด Text ที่ AnswerResult ว่า คำตอบถูกต้อง แต่ถ้าไม่ตรงกันก็กำหนดให้ Text ที่ AnswerResult ว่า คำตอบไม่ถูกต้อง

36. สังเกตได้ว่าเมื่อส่งคำตอบและทำการเปลี่ยนข้อ ข้อความที่แสดงผลของคำตอบทั้ง ตอบถูก และ ตอบผิด ยังคงแสดงผลอยู่ดังนั้นให้ไปที่ Nextbutton.Click แล้วเพิ่ม Set AnswerResult.Text เป็น Text ว่างเปล่า
37. สร้างตัวแปรชื่อ Score และกำหนดค่าของตัวแปรเป็น 0 ตัวแปรนี้ไว้ใช้สำหรับเก็บคะแนน
38. เมื่อหน้าจอเริ่มต้นทำงานให้กำหนด Text ที่ DisplayScore เป็น คะแนน : 0

ข้อที่ 38 ให้ทำต่อจากบล็อกเดิมที่มีนะ ไม่ใช่ให้สร้างใหม่ หลายคนผิดกันบ่อย ย้ำอีกครั้ง บล็อกสีเหลือง ไม่สามารถซ้ำกันได้ event ไม่สามารถซ้ำกันได้ อธิบายโค้ด ก็คือเมื่อหน้าจอเริ่มต้นการทำงาน ให้กำหนด Text ที่ Label DisplayScore เนียเป็น คะแนน : 0 ส่วน join คือการนำข้อความมาต่อกันให้เป็นข้อความ

39. เมื่อตอบถูกให้เพิ่มคะแนน 1 คะแนน ดังนั้น ให้ไปที่ when SendAnswer.Click ต่อจาก set AnswerResult.Text ให้เพิ่มคำสั่งสำหรับกำหนดค่าของตัวแปรใหม่ และทำการนำค่า Score มา +1 เข้าไปเพื่อเพิ่มคะแนนเมื่อตอบถูก และ เพิ่ม Set DisplayScore.Text ให้เหมือนกับตอนหน้าจอถูกโหลดด้วย คะแนนจะได้อัพเดทและแสดงผลคะแนนใหม่ที่ได้ หลังจากกดส่งคำตอบ

เหตุผลที่ Set DisplayScore.Text แค่ตอนเงื่อนไขถูกต้อง หรือ คำตอบถูกก็เพราะ ต้องการจะอัพเดทคะแนนเมื่อคะแนนมีการเปลี่ยนแปลงเท่านั้น ดังนั้นไม่จำเป็นจะต้องอัพเดทหรือแสดงผลคะแนนใหม่ในการเปลี่ยนข้อ หรือ เมื่อคำตอบผิด

40. เสร็จสิ้นขั้นตอนในการสร้างแอพถามตอบแบบง่ายๆ ด้วย MIT App Inventor