top of page

4.10 การสร้างเกมตอบคำถาม (QUIZ)

             สิ่งที่ต้องเตรียม: 1.ภาพหน้าหลัก 1ภาพ

                                    2.ภาพที่ใช้ตั้งคำถาม 5 ภาพ

t6.3.png

              ขั้นตอนที่ 1 Create New App ตั้งชื่อ New Project Name ว่า Quiz แล้วไปเอาเครื่องหมายถูกที่ช่อง Try it out ออก แล้วจากนั้นกด Create

a1.png

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

a2.png

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

a3.png
a4.1.png
a4.2.png
a4.3.png

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

b4.1.png
b4.2.png
b4.3.png

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

a5.png
a5.2.png
a5.3.png

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

a6.1.png

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

a7.1.png
a7.2.png

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

a8.png

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

a9.3.png

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

a10.1.png
a10.2.png

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

a11.png

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

a12.png

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

a13.1.png
a13.2.png

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

a14.1.png
a14.2.png

                ขั้นตอนที่ 15 ต่อไปเป็นการสร้างตัวแปรคำถาม คะแนน และรูปภาพ ให้ไปที่หน้าQuiz จากนั้นไปที่ 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

s15.3.png
s15.1.png
s15.2.png

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

s16.2.png
s16.1.png
s16.3.png
s16.4.png

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

s17.1.png
s17.2.png
s17.3.png
s17.4.png
s17.7.png
s17.5.png
s17.6.png

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

s18.1.png
s18.2.png

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

s19.3.png
s19.1.png
s19.2.png

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

s20.3.png
s20.2.png
s20.1.png

                 ขั้นตอนที่ 21 กลับไปที่หน้า Design จากนั้นไปเปลี่ยนชื่อปุ่มคำตอบในหน้า Quiz ให้เป็น A,B,C และD ตามลำดับ  จากนั้นปรับปุ่มทุกปุ่ม โดยไปที่ width = Fill container 

s21.1.png
s21.2.png

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

s22.1.png
s22.2.png

                     ขั้นตอนที่ 23 ต่อไปให้ไปที่ variable >app variable QuizNum ไปใส่ในช่องสอง ทั้งสองบล็อก  จากนั้นทำการ Duplicate บล็อก set A 's to in list app variable Choice A get # 1  แล้วนำมาต่อล่างจากบล็อกที่ Duplicate มา  แล้วเปลี่ยน A เป็น B และเปลี่ยน app variable Choice A เป็น app variable Choice B แล้วDuplicate ต่อจนครบ A-D

t2.1.png
t2.2.png
t2.4.png

                     ขั้นตอนที่ 24   จากนั้นในบล็อก initialize app variable ChoiceA to list .. ในบล็อกที่ใส่ข้อความ ให้ใส่ชื่อของภาพที่เอามาใช้ภาพแรกทั้งหมด แล้วจากนั้นไปเปลี่ยนในบล็อกinitialize app variable ChoiceB to list แล้วใส่ชื่อภาพต่อไปและบล็อกอื่นทั้งA-D จนครบ

s24.1.png
t1.png

                     ขั้นตอนที่ 25  จากนั้นไปที่บล็อก to load_Quiz ในบล็อก if app variable QuizNum > 0  ให้เปลี่ยนจาก 0 ไปเป็น 5

s25.png

                     ขั้นตอนที่ 26  ไปทำการ Duplicate บล็อก initialize app variable ChoiceA to list มาแล้วจากนั้นเปลี่ยน ChoiceA เป็น Answer แล้วลบบล็อก "  " ออก แล้วไปที่ Math แล้วไปเอาบล็อก
"  " ไปต่อท้ายบล็อก initialize app variable Answer to list ...  ให้ครบทั้ง 5 บล็อก แล้วใส่เลข 1-5

s26.1.png
s26.2.png
s26.3.png

                     ขั้นตอนที่ 27  ต่อไปให้ไปที่ Timer 1 แล้วไปลาก when Timer 1 Fires do มาวาง แล้วเลื่อนไปเอาบล็อก set Timer1 's Enabled to มาใส่ช่อง do  ต่อจากนั้นไปที่ Functions แล้วเอาบล็อก Load_Quiz มาต่อล่างจาก set Timer1 's Enabled to 

s27.1.png
s27.2.png
s27.3.png

                     ขั้นตอนที่ 28  ให้ไปที่ Quiz ลากบล้อก when Quiz opens do มาวาง จากนั้นไปที่ Variable แล้วเอาบล็อก set Variable QuizNum มาใส่ถัดจาก do จำนวน2บล็อก แล้วในบล็อกset Variable QuizNum อันที่2 ให้เปลี่ยนจากset Variable QuizNum เป็น set Variable Score  ต่อจากนั้นไปที่

s28.0.png
s28.1.png
s28.2.png

                     ขั้นตอนที่ 29  ในบล็อก when timer1 's fires do ให้ไป Duplicate บล็อก set Timer1 's Enabled to และ Load_Quiz ต่อล่างจากบล็อก set Variable Score ในบล็อก when Quiz opens do

s29.2.png

                     ขั้นตอนที่ 30   ต่อไปให้ไปที่ A เอาบล็อก whe A click do  มาวาง จากนั้นไปที่ control เอาบล็อก if do มาวางถัดจาก  do  แล้วจากนั้นไปที่ logic > .....=...... เอามาวางถัดจาก if แล้วไปที่ list > in list list "a" get # 1 มาวางในช่องแรกของบล็อก .....=...... แล้วลบบล็อก list "a" ออก

s30.1.png
s30.2.png
s30.3.png
s30.5.png

                     ขั้นตอนที่ 31  จากนั้นไปที่ Variable > app variable Answer มาใส่ในช่องบล็อกที่เพิ่งลบไป จากนั้นเอาบล็อก app variable QuizNum มาใส่ในช่อง 1 จากนั้นไปที่ Math นำบล็อก 0 มาใสหลังเครื่องหมาย = แล้วเปลี่ยนเป็นเลข 1

s31.2.png
s31.3.png

                     ขั้นตอนที่ 32  ไปที่ A > set A 's Blackground Color to มาต่อที่ do แล้วเปลี่ยนสีตามต้องการ จากนั้นไปกดที่เฟืองแล้วเอาบล็อก else ไปต่อล่างจาก if เพื่อเพิ่มช่อง else แล้วDuplicate บล็อก set A 's Blackground Color to มาต่อท้าย else แล้วทำการเปลี่ยนสีตามต้องการ  แล้วไปที่ Variable > change app variable QuizNum มาใส่บนบล็อก set A 's Blackground Color to แล้วเปลี่ยน change app variable QuizNum เป็น change app variable Score

s32.1.png
s32.2.png
s32.3.png
s32.5.png
d1.png

                     ขั้นตอนที่ 33  ต่อไปให้ไปที่ Timer1 > set Timer1 's Enabled to true ลากมาใส่ล่างจากบล็อก if else  แล้วจากนั้นทำการ Duplicate บล็อก when A Click do ทั้งบล็อก แล้วเปลี่ยน A เป็น B ทั้งหมดที่อยู่ในบล็อกนี้ แล้วในช่อง in list app variable Answer get # app variable QuizNum = 1 เปลี่ยน 1 เป็น 2  จากนั้นทำDuplicate บล็อกต่อจนครบ A-D และเลขที่เปลี่ยนเพิ่มทีละ1

d2.png
c2.png
d3.png

                     ขั้นตอนที่ 34  ต่อไปให้ไปที่หน้า End จากนั้นไปที่ Button6 เอาบล็อก when Button6 click do มาวาง เสร็จแล้วไปที่ Control > navigate to Main มาวางต่อจาก do 

s34.1.png
s34.2.png

                     ขั้นตอนที่ 35  ไปที่ End > when End opens do ลากไปวาง จากนั้นไปที่ Label3 >set Label3's Text to มาใส่ถัดจาก do แล้วไปที่ variable > app variable Score มาใส่ถัดจากset Label3's Text to

s35.1.png
s35.2.png
s35.3.png

                     ขั้นตอนที่ 36  เข้าไปหน้า Quiz ในส่วน Block ให้เรามาดูในส่วนของ to Load_Quiz จากนั้นให้ไปที่ Label 2 >set Label2's blackground color to ลากต่อล่างจาก set D Text to แก้ Label2 เป็น A-D ตามลำดับ 

t3.1.png

                     จากนั้นไปที่ Variable > set Label2's Text to ไปวางล่าง set D's blackground color to จากนั้นไปที่ Text > join "Hello" ลากต่อหลังset Label2's Text to  ต่อไปกดที่เฟือง แล้วลาก item ไปต่อเพิ่ม1 บล็อก จากนั้นลบบล็อก hello ออก เปลี่ยน world เป็น / 

t3.2.png
t3.3.png
t3.4.png
t3.5.png

                     ขั้นตอนที่ 37  ไปที่ variable > app variable QuizNum ลากมาต่อบล็อก join จากนั้นไปที่ list > length of เอามาต่อบล็อกล่างจาก " / " แล้วลบบล็อก list "a" ออก แล้วไปที่ variable> 

t4.1.png
t4.2.png
t4.3.png

                     ขั้นตอนที่ 37  กลับไปหน้า Design ไปคลิก time อยู่ล่างสุดของหน้า เสร็จแล้วไปตั้งค่าintevel เป็น 2 seconds และไปเปิดปุ่ม Enable เป็นอันว่า เสร็จสิ้น

t5.1.png
t6.1.png
t6.2.png
bottom of page