Welcome to ThunkableTH   Click to listen highlighted text! Welcome to ThunkableTH

บทที่ 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

Font Resize
Click to listen highlighted text!