บทที่ 10 การสร้างเกมตอบคำถาม (QUIZ)

ขั้นตอนที่ 1 Create New App ตั้งชื่อ New Project Name ว่า Quiz จากนั้นกด Create

ขั้นตอนที่ 2 เปลี่ยนชื่อ Screen1 เป็น Main และใส่สีพื้นหลัง BackgroundColor

ขั้นตอนที่ 3 ไปที่ User Interface แล้วลาก Label กับ Button ใส่หน้าจอ และทำการเปลี่ยน Text Label1 > Quiz Animal , Text Button1 > START และทำการกำหนดกับตกแต่ง Text Color , Font Size , BackgroundColor , Border ฯลฯ ตามความต้องการ

ขั้นตอนที่ 4 ไปที่ Image > Image ลากใส่ที่หน้าจอ ทำการอัปโหลดรูป (หน้าปก Quiz) ตามความเหมาะสมและต้องการ

ขั้นตอนที่ 5 ให้กด + ตรงข้าง ๆ Main เพื่อเพิ่ม Screen และทำการเปลี่ยนชื่อ Screen เป็น Quiz พร้อมกับใส่สีพื้นหลัง BackgroundColor

ขั้นตอนที่ 6 ไปที่ User Interface > Label ลากใส่ที่หน้าจอ และทำการกำหนดตกแต่ง Font Size , Color ตามที่ต้องการ

ขั้นตอนที่ 7 ไปที่ Layout > Row ลากใส่ที่หน้าจอ และไปที่ Image > Image ลากใส่ที่หน้าจอ พร้อมกับทำการกำหนด Height และ Width ตามความเหมาะสม

ขั้นตอนที่ 8 ไปที่ User Interface > Button ลากใส่ที่หน้าจอ และทำการกำหนดและตกแต่ง Font Size , BackgroundColor , Width ตามที่ต้องการ

ขั้นตอนที่ 9 ให้ทำการ Duplicate Button เพิ่มขึ้นมาอีก 3 อัน

ขั้นตอนที่ 10 ให้กด + ตรงข้าง ๆ Quiz เพื่อเพิ่ม Screen และทำการเปลี่ยนชื่อ Screen เป็น End พร้อมกับใส่สีพื้นหลัง BackgroundColor

ขั้นตอนที่ 11 ไปที่ User Interface แล้วลาก Label กับ Button ใส่หน้าจอ จากนั้นทำการแก้ไข Text Button2 > RESTART และทำการกำหนดกับตกแต่ง Text Color , Font Size , BackgroundColor , Border ฯลฯ ตามความต้องการ

ขั้นตอนที่ 12 กลับไปที่หน้า Main ให้ไปที่ Sensors > Time ลากใส่ที่หน้าจอ

ขั้นตอนที่ 13 ไปที่ Background Picture > Upload files ทำการเลือกรูปที่เตรียมไว้ทั้งหมดและกด Open พออัปโหลดรูปทั้งหมดเสร็จให้ไปที่ X ข้าง ๆ ชื่อรูปเพื่อลบชื่อออก

ขั้นตอนที่ 14 ต่อไปเป็นการต่อบล็อก เพื่อทำให้ปุ่ม START กดทำงานไปหน้าต่อไป (Quiz) ได้ ให้ไปที่ Button1 > when Button1 Click do ลากใส่ที่หน้าจอ และไปที่ Control > navigate to ลากมาต่อข้างล่างบล็อก when Button1 Click do และเปลี่ยนจาก Main เป็น Quiz

ขั้นตอนที่ 15 ต่อไปเป็นการสร้างตัวแปรคำถาม คะแนน และรูปภาพ ให้ไปที่ Variables > initialize app variable name to ลากใส่ที่หน้าจอจำนวน 3 อัน และเปลี่ยนจากคำว่า name เป็น QuizNum , Score , Picture ตามลำดับ และไปที่ Math > 0 , Lists > list 1 2 3 นำ 0 มาต่อที่บล็อก initialize app variable QuizNum to , initialize app variable Score to และนำบล็อก Lists > list 1 2 3 มาต่อข้างบล็อก initialize app variable Picture to

ขั้นตอนที่ 16 ทำการลบ 1 2 3 ข้างหลัง list ออก และไปที่รูปฟันเฟือง ลาก item ต่อเพิ่มอีก 2 อัน แล้วไปที่ Text > ” ” ลากมาทั้งหมด 5 อันมาต่อข้างหลังบล็อก list ต่อไปให้กลับไปที่หน้า Design แล้วกดดูชื่อรูปภาพทั้งหมด ให้เราจำชื่อภาพทั้งหมด (จำทั้งชื่อและนามสกุลของภาพให้หมด ห้ามผิดหรือตกหล่น เอาให้ครบ) ในช่อง ” ” ให้ทำการใส่ชื่อและนามสกุลของภาพทั้งหมด

ขั้นตอนที่ 17 ต่อไปให้ไปที่ Functions > to do something เพื่อโหลดคำถามขึ้นมา นำมาลากใส่ที่หน้าจอ แล้วเปลี่ยนจากคำว่า do something เป็น Load_Quiz แล้วไปที่ Variables > change app QuizNum by 1 นำมาลากต่อข้างล่างบล็อก to Load_Quiz แล้วไปที่ Control > if do นำมาลากต่อข้างล่างบล็อก change app QuizNum by 1 แล้วไปที่ Logic > > ลากใส่ต่อข้างบล็อก if แล้วไปที่ Variables > app QuizNum ลากใส่ช่องแรกของบล็อก > แล้วไปที่ Math > 0 ลากใส่ช่องที่สองของบล็อก > แล้วไปที่ Control > navigate to ลากใส่ข้างบล็อก do และเปลี่ยน Main เป็น End

ขั้นตอนที่ 18 ต่อไปเป็นการสร้างตัวแปรตัวเลือกทั้ง 4 ตัวเลือก โดยให้ไปคลิกที่ชุดบล็อก initialize app variable Picture to ต่อไปคลิกขวาเลือก Duplicate ก๊อปปี้ขึ้นมาชุดนึง แล้วเปลี่ยนจากคำว่า Picture เป็น ChoiceA

ขั้นตอนที่ 19 ให้คลิกที่ชุดบล็อก initialize app variable ChoiceA to แล้วคลิกขวาเลือก Duplicate ทำการก๊อปปี้ขึ้นมาอีก 3 ชุด แล้วทำการเปลี่ยนจาก ChoiceA เป็น ChoiceB , ChoiceC และ ChoiceD ตามลำดับ

ขั้นตอนที่ 20 ต่อไปให้ไปที่ Image2 > from Image2 set Picture to ลากใส่ข้างล่างบล็อก if do แล้วไปที่ Lists > in list list “a” get # 1 ลากใส่ต่อข้างบล็อก from Image2 set Picture to ให้ทำการลบ list “a” ออก แล้วไปที่ Variables > app Picture และ app QuizNum ลากใส่ที่หน้าจอ โดยที่เอา app Picture ใส่ช่องแรกของบล็อก in list get # และเอา app QuizNum ใส่ช่องที่สองของบล็อก in list get #

ขั้นตอนที่ 21 ต่อไปให้ไปที่ A > from A set Text to ลากใส่ต่อข้างล่างบล็อก from Image2 set Picture to แล้วให้ไปคลิกที่บล็อก in list คลิกขวาเลือก Duplicate จะได้บล็อกก๊อปปี้มานำมาลากใส่ต่อข้างบล็อก from Image2 set Picture to และเปลี่ยนจากคำว่า app Picture เป็น app ChoiceA