Construct 2 : สร้างแบบทดสอบแบบมีกระดาษคำตอบในตัว ตอนที่ 1

สวัสดีครับ วันนี้มีของขวัญมาฝากเนื่องในวันเปิดเทอมของคุณครูครับ เป็นแบบทดสอบแบบ 4 ตัวเลือก มีกระดาษคำตอบในตัว ซึ่งสุ่มแบบทดสอบทุกครั้งที่เปิด จำนวนข้อสอบทั้งหมด 30 ข้อ ลองเข้าไปทดลองทำแบบทดสอบตัวตัวอย่าง ดูก่อนก็ได้ครับ ตามลิงก์นี้เลยครับ >> https://semicon.github.io/quiztemplate/

ถ้าครูท่านใดสนใจอยากทำไว้ใช้บ้าง มาดูวิธีทำกันเลยครับ

1. เปิดโปรเจ็คใหม่ขึ้นมา แล้วกำหนดขนาดของวินโดวน์ และขนาดของเลย์เอาต์ตามที่ต้องการครับ สำหรับในตัวอย่างนี้ใช้ ขนาดความกว้าง  854 พิกเซล และความสูง 480 พิกเซล ครับ

2. เปิดแถบ Layers ขึ้นมา เพิ่มเลเยอร์ และตั้งชื่อดังรูปครับ

3. ที่ เลเยอร์ bg เพิ่ม Sprite ภาพพื้นหลัง ขนาด 854 x 480 ดังรูป เมื่อดำเนินการเสร็จ ให้คลิกที่รูปกุญแจเพื่อล็อคเลเยอร์

4. ที่เลเยอร์ choice เพิ่ม สไปรท์ พื้นหลังของกระดาษคำตอบ ตั้งชื่อว่า bgAnsSheet และตั้งค่าจุด Image points ดังรูป

5. ที่เลเยอร์ choice เพิ่มสไปร์ทปุ่มตัวเลือกของกระดาษคำตอบ ตั้งชื่อว่า choice แล้วตั้งค่าตามรูป

6. คลิกที่ปุ่มตัวเลือก > เพิ่ม Instance variables  จำนวน 2 ตัว ดังนี้

  • choiceName เพื่อเก็บชื่อของปุ่มตัวเลือกแต่ละปุ่ม ซึ่งเป็นตัวแปรประเภท Text ให้ใช้ชื่อว่า a, b, c, d
  • choiceName เพื่อเก็บค่าตำแหน่ง หรือ หมายเลขแถวของปุ่มตัวเลือกแต่ละปุ่ม เป็นตัวแปรประเภท Number

7. ที่เลเยอร์ choice เพิ่ม Text หมายเลขข้อสอบ ตั้งชื่อว่า TextQnumb และคลิกที่ Text > เพิ่ม Instance variables  ดังนี้

  • text_ID เพื่อเก็บค่าตำแหน่ง หรือ หมายเลขของคำถาม ซึ่งเป็นตัวแปรประเภท Number

8. คัดลอก Text และ ปุ่มตัวเลือก วางในตำแหน่งต่างๆ พร้อมทั้งตั้งค่า Instance Variables ดังรูป

9. ที่เลเยอร์ frame เพิ่มสไปร์ท เพื่อทำกรอบของกระดาษคำตอบ ดังรูป

10. ที่เลเยอร์ frame เพิ่มสไปร์ท ทำปุ่มเลื่อนกระดาษคำตอบขึ้นลง 2 ปุ่ม ตั้งชื่อและวางในตำแหน่งดังรูป

11. ที่เลเยอร์ frame เพิ่มสไปร์ท ทำแถบป้องกันการคลิกหรือแตะปุ่มคำถาม คำตอบที่อยู่นอกกรอบ ตั้งชื่อ antiTouch วางด้านบนและด้านล่างดังรูป และให้ตั้งค่า Opacity เป็น 0

12. ที่เลเยอร์ HUD เพิ่ม Text ดังนี้

  • textLogin สำหรับแสดงข้อความต้อนรับ เช่น “คุณเข้าระบบด้วยชื่อ ………………….”
  • textTimer สำหรับแสดงเวลาที่เหลือในการทำแบบทดสอบ(นับถอยหลัง)
  • Q_numb สำหรับแสดงหมายเลขข้อที่กำลังทำแบบทดสอบ
  • textQuiz สำหรับแสดงคำถามและตัวเลือกของแบบทดสอบในข้อนั้นๆ

13. ที่เลเยอร์ choice เพิ่ม Sprite ตั้งชื่อ sendBtn  ทำปุ่มส่งคำตอบ ดังรูป

14. เปิดแถบ Event Sheet ขึ้นมา แล้วเพิ่ม Event และ Action ดังรูป

15. เมื่อคลิก ปุ่ม Run Layout ของโปรแกรม จะได้หน้าจอดังนี้

ยินดีด้วยกับความสำเร็จในขั้นตอนแรก คอยติดตามตอนต่อไปนะครับ