Construct 2 : สร้างแบบทดสอบโดยดึงข้อมูลจากอาเรย์ 2 มิติ (2D-Arrays)

สวัสดีครับ บทความนี้เราจะมาเรียนรู้การทำแบบทดสอบแบบ 2 ตัวเลือก หรือที่เรียกว่าข้อสอบแบบถูก-ผิด โดยการใช้ข้อมูลที่เก็บไว้ในอาเรย์แบบ 2 มิติ

          อาเรย์ (Array) เป็นชุดของตัวแปรที่แสดงอยู่ในรูปของลำดับ ใช้สำหรับเก็บค่าของข้อมูลที่อยูในกลุ่มเดียวกัน อาเรย์จะแตกต่างจากตัวแปรอื่น คือ ตัวแปรอื่นจะถูกเก็บอยู่ในหน่วยความจำในแต่ละตำแหน่งที่ไม่ต่อเนื่องกัน ส่วนตัวแปรอาเรย์ จะถูกเก็บอยู่ในหน่วยความจำในแต่ละตำแหน่งที่ต่อเนื่องกัน ซึ่งจะมีขนาดเล็กหรือใหญ่ ก็ขึ้นอยู่กับจำนวนมิติและจำนวนสมาชิกที่กำหนด ซึ่งโครงสร้างของอาเรย์ 2 มิติ ที่เรานำมาใช้ทำข้อสอบในครั้งนี้เป็นดังนี้

**** ศึกษาเพิ่มได้ที่ https://www.scirra.com/tutorials/…

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

1. สร้างโปรเจ็คใหม่ขึ้นมากำหนดขนาดของวินโดว์และเลย์เอาต์ตามต้องการ

2. เพิ่ม Sprite Background ลงบนหน้าเลย์เอ้า

3. สร้าง Sprite ปุ่มถูก ตั้งชื่อ trueBtn ประกอบด้วย 2 เฟรม จากนั้นตั้งคุณสมบัติดังนี้

4. สร้าง Sprite ปุ่มผิด ตั้งชื่อ falseBtn ประกอบด้วย 2 เฟรม จากนั้นตั้งคุณสมบัติดังนี้

5. เพิ่ม Instance Variables ชื่อ index ให้กับ Sprite ปุ่มถูกและ ปุ่มผิด ดังนี้

6. คัดลอกปุ่มทั้งสองวางในตำแหน่งดังรูป และทำการแก้ไขตัวแปรภายใน(Instance Variables)ของแต่ละปุ่มดังรูป เพื่อใช้สำหรับอ้างอิงตำแหน่งของปุ่มที่ผู้เล่นเลือก และตำแหน่ง X ใน ArrayData

7. เพิ่มออบเจ็ค Text 1 – Text 10 จัดวางดังรูป

8. เพิ่ม Sprite ปุ่มส่งคำตอบ ตั้งชื่อ sendBtn และ Text ชื่อ TextScore วางไว้ในตำแหน่งดังรูป

9. เพิ่ม Array ตั้งชื่อว่า ArrayData และ Touch  ลงบนเลย์เอาต์

10. เปิดแถบ Event Sheet เพิ่ม Event และ Action ดังนี้

Click Open full size image

การทำงานแต่ละ Event

  • Event 1 เมื่อเริ่มต้นเลย์เอาต์จะทำการโหลดข้อมูลจาก JSON ไปเก็บไว้ใน ArrayData โดยมีโครงสร้างแต่ละข้อดังนี้
    [[“”ข้อความคำถาม””],[ตัวเลขเฉลย],[ตัวเลขตัวเลือกที่เลือก]]

    • ข้อความคำถามจะเป็นคำถามแบบเป็นจริงหรือเป็นเท็จ (ถูก – ผิด)
    • ตัวเลขเฉลย ถ้าข้อความเป็นจริง จะใช้หมายเลข 1 และถ้าข้อความเป็นเท็จ จะใช้หมายเลข 2
    • ตัวเลขของตัวเลือกที่เลือก จะตั้งค่าเริ่มต้นไว้ที่ 0
      – เมื่อผู้เล่นคลิกเลือกปุ่มถูก จะเปลี่ยนค่าเป็น 1
      – เมื่อผู้เล่นคลิกเลือกปุ่มผิด จะเปลี่ยนค่าเป็น 2

และ ตั้งค่าให้ Text1 – Text10 แสดงค่าจาก ArrayData.At(x,y)

  • Event 2 ให้ TextScore แสดงผล คะแนน จากตัวแปร score
  • Event 3 เมื่อแตะปุ่ม ผิด ปุ่มผิดจะเปลี่ยนเป็น เฟรม 1 และนำค่า 2 (ปุ่มผิด) ไปเก็บไว้ใน ArrayData
  • Event 4 ให้ ปุ่มถูกที่มีค่าตัวแปร index เท่ากับ ค่าตัวแปร index ของปุ่มผิด เปลี่ยนเป็นเฟรม 0
  • Event 5 เมื่อแตะปุ่ม ถูก ปุ่มถูกจะเปลี่ยนเป็น เฟรม 1 และนำค่า 1 (ปุ่มถูก) ไปเก็บไว้ใน ArrayData
  • Event 6 ให้ ปุ่มผิดที่มีค่าตัวแปร index เท่ากับ ค่าตัวแปร index ของปุ่มถูก เปลี่ยนเป็นเฟรม 0
  • Event 7 -9 เมื่อแตะปุ่มตรวจคำตอบ จะทำการเช็คคำตอบด้วยการทำซ้ำ 0-9 (for) ตามลำดับ โดยตรวจสอบข้อมูลใน ArrayData เรียงลำดับ 0 – 9 ระหว่างแถวที่2 (Y1) และ แถวที่3 (Y2) ถ้าเท่ากัน จะเพิ่ม score ให้ข้อละ 1

จากตัวอย่างนี้ท่านสามารถนำไปประยุกต์ใช้ในการสร้างงานต่างๆ ได้อย่างมากมาย ขอให้สนุกกับการสร้างงานกันนะครับ