Construct 2 : สร้างแบบทดสอบโดยใช้ฐานข้อมูลออนไลน์ด้วย Google Spreadsheet

Google Spreadsheet มีความสามารถคล้ายกับฐานข้อมูล MySQL และฐานข้อมูลออนไลน์อื่นๆ มีความง่ายต่อการจัดการฐานข้อมูล เพียงคุณมีความรู้ด้านการประมวลผลข้อมูล และใช้โปรแกรม MS Excel ได้ คุณก็สามารถสร้างฐานข้อมูลจาก Google Spreadsheet ได้แล้ว ซึ่งข้อดีของ Google Spreadsheet คือ

  •  สามารถเข้าถึงได้จากทุกที่ไม่ว่าจะเป็นคอมพิวเตอร์หรือสมาร์ทโฟน (ดาวน์โหลด Google Spreadsheet app บน PlayStation)
  • ไม่ต้องเสียค่าเช่าโฮสติ้ง
  • ไม่ต้องกังวลเรื่องแบนด์วิธเกิน
  • สามารถกำหนดสิทธิ์สำหรับเขตข้อมูลและแผ่นงาน
  • โหลดข้อมูลเร็วกว่าฐานข้อมูลบนโฮสต์
  • มีประวัติการใช้ข้อมูลสามารถเรียกคืนข้อมูลก่อนหรือหลังการเปลี่ยนแปลง

ในบทความนี้เราจะมาเรียนรู้การใช้ Construct 2 สร้างเกมร่วมกับฐานข้อมูลออนไลน์ Google Spreadsheet ก่อนอื่นคุณต้องดาวน์โหลดและติดตั้ง plugin csv ไว้ใน Construct 2 เสียก่อน เมื่อติดตั้งเรียบร้อยแล้ว ก็ดำเนินสร้างแบบทดสอบตามขั้นตอนดังต่อไปนี้

1.  คลิกลิงก์ Google Spreadsheet จากนั้นสร้างสเปรดชีตใหม่

2.  การกรอกข้อมูล ข้อมูลในบรรทัดที่1 และคอลัมน์ A ใช้สำหรับอ้างอิงในการเรียกข้อมูลจากฐานข้อมูล
        -> บรรทัดที่ 1 ในคอลัมน์ A    ปล่อยว่างไม่ต้องกรอกข้อมูล ในคอลัมน์ B ถึง G ให้กรอกข้อมูล “question” , “choice1” , “choice2” , “choice3” , “choice4” , “answer” ตามลำดับ
-> บรรทัดที่ 2 ในคอลัมน์ A    ให้กรอก q1  ในคอลัมน์ B  ให้กรอก คำถามหรือโจทย์ข้อที่1 ในคอลัมน์ C  ให้กรอก ตัวเลือกที่ 1 ในคอลัมน์ D ให้กรอก ตัวเลือกที่ 2 ในคอลัมน์ E ให้กรอก ตัวเลือกที่ 3  ในคอลัมน์ F ให้กรอก ตัวเลือกที่ 4 ในคอลัมน์ G  ให้กรอก คำตอบที่ถูกต้อง หรือ เฉลย
-> บรรทัดที่ 3  ในคอลัมน์ A    ให้กรอก q2 ในคอลัมน์ B ถึง G  ดำเนินการเช่นเดียวกับบรรทัดที่ 2
-> ทำเช่นนี้ไปเรื่อยๆ จนถึง ข้อสุดท้ายของข้อสอบ ดังรูป

หมายเหตุ เพื่อป้องกันข้อผิดพลาดในการตรวจคำตอบ ให้คัดลอกข้อตัวเลือกที่เป็นข้อถูก ไปใส่ในชอ่งเฉลยคำตอบ(คอลัมน์ G)

3. เมื่อป้อนข้อมูลเสร็จเรียบร้อย คลิกเมนู ไฟล์ > เผยแพร่ทางเว็บ… > เลือกรูปแบบ .csv และคลิกเผยแพร่  จากนั้นบันทึกลิงก์เก็บไว้


4. สรา้งโปรเจ็คใน Construct 2 ประกอบด้วย 3 Layout  คือ Start, Game, End และ 3 Event Sheet คือ eventStart, eventGame, eventEnd

5. เพิ่มอ็อบเจ็กต์ใหม่ และจัดวางวัตถุต่างๆ ดังรูป

        – Layout Start

– Layout Game

– Layout End

6. เพิ่มอ็อบเจ็กต์ใหม่ ได้แก่  Ajax, Csv, Mouse, Array และ Function

7. เปิด Event Sheet “eventGame”
-> เพิ่ม Global variable ชนิด Number ได้แก่ score = 0, timer = 10 (ตามเวลาที่ต้องการ), maxQuestion = 20 (ตามจำนวนข้อสอบทั้งหมด)
-> เพิ่ม Global variable ชนิด Text ได้แก่ correctAnswer

 

        -> ในบรรทัดแรก เพิ่ม Event เลือก System > On start of layout
-> เพิ่ม Action  เลือก Array > Set size > Width = maxQuestion, Hieht= 1, Depth=1
-> เพิ่ม Action  เลือก TextScore > Set text > score
-> เพิ่ม Action  เลือก TextQ , choice1, choice2, choice3, choice4 > Set text > “” (ว่าง)
-> เพิ่ม Action  เลือก AJAX > Request URL > tag = “loadData”, URL = กรอก URL ที่คัดลอกจาก Google Spreadsheet เก็บไว้ก่อนหน้านี้
-> ในบรรทัดที่สอง เพิ่ม Sub Event  เลือก Array > For each element > Axes = X
-> เพิ่ม Action  เลือก Array > Set at X > X=Array.CurX, Value = Array.CurX+1

 

8. บรรทัดถัดไปเพิ่ม Event เลือก AJAX > On any completed เพิ่ม action > CSV  > Load table >AJAX.LastData

9. กำหนดให้ Text แสดงเนื้อหาทั้งหมด ตาราง โดยมีโครงสร้างเป็น  “Expression: At (Column, Row)” เป็นค่าเริ่มต้น เช่น CSV.At (“Column”, “Row”) แต่ในบทความนี้ ได้สร้างตัวแปร ชื่อ numberQ ไว้สำหรับเก็บค่าตัวเลขที่ดึงจาก Array เพื่อใช้แสดงเนื้อหาของเรกคอร์ดในฟิลด์ question, choice1, choice2, choice3, choice4, และ answer โดยกล่องข้อความ TextQ , choice1, choice2, choice3, choice4 ให้ Set text ดังนี้
-> CSV.At(“question”,”q”&Array.At(numberQ))
-> CSV.At(“choice1”,”q”&Array.At(numberQ))
-> CSV.At(“choice2”,”q”&Array.At(numberQ))
-> CSV.At(“choice3”,”q”&Array.At(numberQ))
-> CSV.At(“choice4”,”q”&Array.At(numberQ))
-> Set  correctAnswer เป็น CSV.At(“answer”,”q”&Array.At(numberQ))

10. กำหนดเหตุการณ์เมื่อคลิกเมาส์เลือกคำตอบ ด้วย Mouse > On object clicked

11. เพิ่มฟังก์ชั่นตรวจคำตอบ เมื่อตอบถูกได้ 1 คะแนน และเรียกข้อสอบข้อต่อไป ถ้าตอบผิด ให้เรียกข้อสอบข้อต่อไปเลย

12. เพิ่มตัวควบคุมเวลาในการทำแบบทดสอบแต่ละข้อ

13. เปิด Event Sheet “eventStart”  เพิ่ม Event และ Action ตามรูปได้เลยครับ

14. เปิด Event Sheet “eventEnd”  เพิ่ม Event และ Action ตามรูปได้เลยครับ

15. เสร็จสิ้นการสร้างสรรค์ ถึงตรงนี้คุณสามารถทดลองเกมได้เลย

ดาวน์โหลดไฟล์ตัวอย่างได้ที่ > capx file