เล่มสรุปโครงการ กลุ่ม 1

5.67 คลิกท่ี Row14 ดูท่ี Property ด้านขวา Height ใหเ้ ปลี่ยนเป็น Relative Size (e.g. “50%”)
10% (เปลี่ยนเฉพาะ Height) ดังรูปท่ี 5.67

รูปท่ี 5.67
5.68 คลิกที่ Row15 ดูท่ี Property ด้านขวา Height ใหเ้ ปลย่ี นเปน็ Relative Size (e.g. “50%”)

6% (เปล่ียนเฉพาะ Height) ดงั รูปที่ 5.68

รูปท่ี 5.68

5.69 ดทู ี่ Add Components พิมพ์คาํ วา่ video ตรงชอ่ งค้นหา
5.69.1 คลกิ ค้างที่ video แลว้ ลาก
5.69.2 วางต่อ Row14 ตอนวางให้สงั เกตเสน้ สีส้มจะอยู่ใต้ Row14 ดังรปู ที่ 5.69

5.69.2
5.69
5.69.1

รปู ท่ี 5.69
5.70 คลกิ ที่ video1 ดูที่ Property ด้านขวา คลกิ ท่ชี อ่ ง Video คลกิ Upload files ดังรูปที่ 5.70

รปู ท่ี 5.70

5.70.1 คลกิ ท่ี Videoทีช่ ่อื วา่ ไวรัสโคโรนาคอื อะไร Open ดังรูปท่ี 5.70.1

รูปท่ี 5.70.1
5.70.2 จะได้ Videoทชี่ ่อื วา่ ไวรสั โคโรนาคืออะไร เขา้ มา

5.70.2.1 คลิก Play ใหเ้ ป็น true ดังรูปที่ 5.70.2

5.71.2
5.71.2.1

รปู ที่ 5.70.2

5.71 ดทู ่ี Add Components
5.71.1 คลิกคา้ งที่ Button แล้วลาก
5.71.2 วางต่อ Video1 ตอนวางใหส้ งั เกตเสน้ สสี ้มจะอยใู่ ต้ Video1 ดังรปู ที่ 5.71

5.71.2
5.71.1

รูปท่ี 5.71
5.72 คลกิ ที่ Button1 คลิก Rename สัญลกั ษณ์รูปปากกา ดังรปู ที่ 5.72

รปู ท่ี 5.72

5.73 เปล่ยี นช่อื จาก Button1 เปน็ btnbacksc4 Text คลกิ ที่ เพื่อเอาขอ้ ความออก ดงั รปู 5.73

รูป5.73
5.73.1 BackgroundColor เป็น transparent (ไม่มีสีพ้นื หลัง) ดังรูปที่ 5.57.1

รูปท่ี 5.73.1

5.73.2 คลกิ ที่ ชอ่ ง Background Picture คลิกเลือกรปู ภาพ ซา้ ย.png ดงั รูปที่ 5.73.2

รปู ที่ 5.73.2 20%

5.73.3 ดทู ี่ Property ด้านขวาของ btnbacksc4 Height ใหเ้ ปล่ยี นเป็น
Relative Size (e.g. “50%”) 15% Width ให้เปล่ียนเป็น Relative Size (e.g. “50%”)
ดังรูปท่ี 5.73.3

รูปท่ี 5.73.3

5.74 คลิกท่ี Screen4 เพื่อเปลี่ยนสี Background
5.74.1 เปล่ยี น BackgroundColor เป็นสฟี ้า ดังรปู ท่ี 5.74

5.74

5.74.1

รปู ท่ี 5.74
5.75 สามารถ คลิก Live Test เพอ่ื รันดู ผลลพั ธ์ได้ ดงั รูปท่ี 5.75

รูปที่ 5.75
5.76 คลิกที่ เพ่อื เพ่มิ Screen5 และทาํ งานอยู่ท่ี Screen5 ดงั รปู ท่ี 5.76

รูปที่ 5.76
5.77 ดูที่ Add Components พมิ พค์ าํ วา่ Row ตรงช่องคน้ หา

5.77.1 คลิกค้างที่ Rowแลว้ ลาก
5.77.2 ใส่ใน Screen5 ตอนวางครง้ั แรกให้สงั เกตเสน้ สสี ้มจะอยดู่ า้ นหัวของ Screen5 และให้วางตอ่
ลงมาเรื่อย ๆ ใหค้ รบ 2 Row ดงั รปู ท่ี 5.77

5.77.2
5.77
5.77.1

รูปท่ี 5.77
5.78 คลกิ ท่ี Row16 ดูที่ Property ด้านขวา Height ใหเ้ ปล่ียนเปน็ Relative Size (e.g. “50%”)

10% (เปลีย่ นเฉพาะ Height) ดงั รปู ท่ี 5.78

รูปท่ี 5.78
5.79 คลิกท่ี Row17 ดทู ี่ Property ดา้ นขวา Height ใหเ้ ปลี่ยนเปน็ Relative Size (e.g. “50%”)

6% (เปลย่ี นเฉพาะ Height) ดังรปู ที่ 5.79

รูปที่ 5.79
5.80 ดูท่ี Add Components พมิ พ์คําวา่ video ตรงชอ่ งคน้ หา

5.80.1 คลกิ ค้างที่ video แล้วลาก
5.80.2 วางต่อ Row16 ตอนวางใหส้ ังเกตเสน้ สีสม้ จะอยู่ใต้ Row16 ดังรปู ที่ 5.80

5.80.2

5.80
5.80.1

รปู ท่ี 5.80

5.81 คลกิ ท่ี video2 ดูที่ Property ดา้ นขวา คลิกท่ีชอ่ ง Video คลกิ Upload files ดงั รูปท่ี 5.81

รูปที่ 5.81 Open ดงั รูปที่ 5.70.1
5.81.1 คลกิ ท่ี Videoทช่ี ือ่ วา่ โรคโควิด 19 คอื อะไร

รปู ที่ 5.81.1

5.81.2 จะได้ Videoท่ีชอื่ ว่า โรคโควิด 19 คืออะไร เข้ามา
5.81.2.1 คลกิ Play ใหเ้ ป็น true ดังรูปที่ 5.81.2

5.81.2
5.81.2.1

รปู ท่ี 5.81.2
5.82 ดทู ่ี Add Components

5.82.1 คลกิ ค้างที่ Button แล้วลาก
5.82.2 วางต่อ Video2 ตอนวางใหส้ งั เกตเส้นสีส้มจะอยใู่ ต้ Video2 ดงั รปู ท่ี 5.82

5.82.2

5.82.1

รปู ท่ี 5.82

5.83 คลิกที่ Button1 คลิก Rename สญั ลกั ษณ์รปู ปากกา ดังรปู ท่ี 5.83

รปู ท่ี 5.83
5.84 เปลย่ี นชือ่ จาก Button1 เปน็ btnbacksc5 Text คลิกท่ี เพ่อื เอาข้อความออก ดงั รูปท่ี 5.84

รูปที่ 5.84

5.84.1 BackgroundColor เป็น transparent (ไม่มสี ีพนื้ หลัง) ดงั รปู ที่ 5.84.1

รูปที่ 5.84.1
5.84.2 คลกิ ท่ี ชอ่ ง Background Picture คลิกเลอื กรูปภาพ ซ้าย.png ดงั รูปที่ 5.84.2

รูปที่ 5.84.2

5.84.3 ดูท่ี Property ด้านขวาของ btnbacksc5 Height ให้เปลี่ยนเป็น 20%
Relative Size (e.g. “50%”) 15% Width ใหเ้ ปลยี่ นเปน็ Relative Size (e.g. “50%”)
ดังรปู ท่ี 5.84.3

รูปที่ 5.84.3
5.85 คลิกท่ี Screen5 เพ่ือเปลย่ี นสี Background

5.85.1 เปลยี่ น BackgroundColor เปน็ สฟี า้ ดังรูปท่ี 5.85

5.85

5.85.1

รูปท่ี 5.85

5.86 สามารถ คลกิ Live Test เพื่อรนั ดู ผลลพั ธ์ได้ ดังรปู ท่ี 5.86
รูปที่ 5.86

5.87 คลกิ ที่ เพ่ือเพม่ิ Screen6 และทํางานอยทู่ ี่ Screen6 ดงั รูปที่ 5.87

รูปที่ 5.87
5.88 ดูท่ี Add Components พมิ พค์ าํ ว่า Row ตรงช่องค้นหา

5.88.1 คลกิ ค้างท่ี Rowแล้วลาก
5.88.2 ใสใ่ น Screen6 ตอนวางคร้งั แรกให้สังเกตเสน้ สีส้มจะอย่ดู ้านหัวของ Screen6 และให้วางตอ่
ลงมาเรื่อย ๆ ใหค้ รบ 2 Row ดงั รูปท่ี 5.88

5.88.2
5.88
5.88.1

รปู ท่ี 5.88

5.89 คลกิ ที่ Row18 ดูที่ Property ดา้ นขวา Height ให้เปล่ยี นเปน็ Relative Size (e.g. “50%”)
10% (เปลี่ยนเฉพาะ Height) ดงั รูปที่ 5.89

รปู ท่ี 5.89
5.90 คลิกที่ Row19 ดทู ่ี Property ดา้ นขวา Height ให้เปล่ยี นเปน็ Relative Size (e.g. “50%”)

6% (เปลย่ี นเฉพาะ Height) ดงั รปู ท่ี 5.90

รปู ท่ี 5.90
5.91 ดทู ่ี Add Components พมิ พ์คําว่า video ตรงช่องคน้ หา

5.91.1 คลกิ คา้ งที่ video แลว้ ลาก
5.91.2 วางตอ่ Row18 ตอนวางให้สังเกตเสน้ สสี ม้ จะอย่ใู ต้ Row18 ดังรปู ที่ 5.91

5.91.2
5.91
5.91.1

รูปท่ี 5.91
5.92 คลกิ ท่ี video3 ดทู ี่ Property ด้านขวา คลิกที่ชอ่ ง Video คลิก Upload files ดังรปู ที่ 5.92

รูปที่ 5.92

5.92.1 คลกิ ท่ี Videoทีช่ ือ่ วา่ อาการของโรคโควดิ 19 คอื อะไร Open ดังรูปที่ 5.92.1

รูปที่ 5.92.1
5.92.2 จะได้ Videoทชี่ ่อื ว่า อาการของโรคโควดิ 19 คืออะไรเข้ามา

5.92.2.1 คลิก Play ใหเ้ ป็น true ดงั รูปที่ 5.92.2

5.92.2
5.92.2.1

รูปที่ 5.92.2

5.93 ดทู ่ี Add Components
5.93.1 คลิกคา้ งที่ Button แลว้ ลาก
5.93.2 วางต่อ Video3 ตอนวางใหส้ งั เกตเส้นสสี ม้ จะอยู่ใต้ Video3 ดังรปู ที่ 5.93

5.93.2

5.93.1

รปู ท่ี 5.93
5.94 คลกิ ที่ Button1 คลกิ Rename สญั ลกั ษณ์รปู ปากกา ดังรูปที่ 5.94

รูปท่ี 5.94

5.95 เปลี่ยนช่อื จาก Button1 เปน็ btnbacksc6 Text คลิกที่ เพ่อื เอาข้อความออก ดงั รูปท่ี 5.95

รปู ท่ี 5.95
5.95.1 BackgroundColor เป็น transparent (ไมม่ สี ีพ้นื หลงั ) ดังรปู ท่ี 5.95.1

รูปท่ี 5.95.1

5.95.2 คลกิ ที่ ชอ่ ง Background Picture คลกิ เลือกรปู ภาพ ซา้ ย.png ดงั รูปที่ 5.95.2

รูปที่ 5.95.2

5.95.3 ดทู ่ี Property ดา้ นขวาของ btnbacksc6 Height ใหเ้ ปลย่ี นเป็น 20%
Relative Size (e.g. “50%”) 15% Width ให้เปลีย่ นเปน็ Relative Size (e.g. “50%”)
ดังรูปท่ี 5.95.3

รูปที่ 5.95.3

5.96 คลิกท่ี Screen6 เพื่อเปลี่ยนสี Background
5.96.1 เปล่ยี น BackgroundColor เป็นสฟี ้า ดังรปู ท่ี 5.96

5.96

5.96.1

รปู ท่ี 5.96
5.97 สามารถ คลิก Live Test เพอ่ื รันดู ผลลพั ธ์ได้ ดงั รูปท่ี 5.97

รปู ท่ี 5.97
5.98 คลิกที่ เพือ่ เพ่มิ Screen7 และทํางานอยู่ท่ี Screen7 ดังรปู ท่ี 5.98

รูปที่ 5.98
5.99 ดูที่ Add Components พิมพ์คาํ ว่า Row ตรงช่องคน้ หา

5.99.1 คลกิ คา้ งท่ี Rowแลว้ ลาก
5.99.2 วางใน Screen7 ตอนวางคร้ังแรกใหส้ ังเกตเส้นสสี ม้ จะอย่ดู ้านหวั ของ Screen7 และใหว้ าง
ต่อลงมาเรอ่ื ย ๆ ให้ครบ 2 Row ดังรูปท่ี 5.99

5.99.2
5.99
5.99.1

รปู ที่ 5.99
5.100 คลิกที่ Row20 ดทู ่ี Property ดา้ นขวา Height ให้เปล่ียนเปน็ Relative Size (e.g. “50%”)

10% (เปล่ียนเฉพาะ Height) ดังรปู ท่ี 5.100

รูปท่ี 5.100
5.101 คลกิ ที่ Row21 ดูที่ Property ดา้ นขวา Height ให้เปลยี่ นเปน็ Relative Size (e.g. “50%”)

6% (เปล่ียนเฉพาะ Height) ดงั รูปที่ 5.101

รปู ท่ี 5.101
5.102 ดูที่ Add Components พมิ พค์ าํ ว่า video ตรงช่องค้นหา

5.102.1 คลิกค้างที่ video แลว้ ลาก
5.102.2 วางตอ่ Row20 ตอนวางให้สงั เกตเส้นสีส้มจะอยู่ใต้ Row20 ดังรูปท่ี 5.102

5.102.2

5.102
5.102.1

รปู ท่ี 5.102

5.103 คลิกท่ี video4 ดูที่ Property ดา้ นขวา คลิกทชี่ ่อง Video คลิก Upload files ดังรปู ท่ี
5.103

รปู ท่ี 5.103 Open ดงั รปู ท่ี 5.103.1
5.103.1 คลิกท่ี Videoทีช่ ่อื วา่ โรคโควิด 19 แพรร่ ะบาดได้อย่างไร

รูปที่ 5.103.1

5.103.2 จะได้ Videoท่ชี อ่ื วา่ โรคโควดิ 19 แพร่ระบาดได้อย่างไร เข้ามา
5.103.2.1 คลิก Play ให้เปน็ true ดงั รปู ท่ี 5.103.2

5.103.2
5.103.2.1

รปู ท่ี 5.103.2
5.104 ดทู ี่ Add Components

5.104.1 คลกิ ค้างท่ี Button แล้วลาก
5.104.2 วางตอ่ Video4 ตอนวางให้สงั เกตเส้นสสี ้มจะอยู่ใต้ Video4 ดงั รูปท่ี 5.104

5.82.2

5.82.1

รูปท่ี 5.104

5.105 คลกิ ท่ี Button1 คลกิ Rename สัญลกั ษณ์รปู ปากกา ดงั รปู ที่ 5.105

รปู ที่ 5.105
5.106 เปล่ยี นช่ือจาก Button1 เป็น btnbacksc7 Text คลกิ ท่ี เพอ่ื เอาข้อความออก ดงั รปู ท่ี 5.106

รูปที่ 5.106

5.106.1 BackgroundColor เปน็ transparent (ไมม่ สี พี ืน้ หลงั ) ดังรูปที่ 5.106.1

รปู ที่ 5.106.1
5.102.2 คลิกที่ ชอ่ ง Background Picture คลกิ เลือกรูปภาพ ซา้ ย.png ดังรูปท่ี 5.102.2

รปู ท่ี 5.102.2

5.102.3 ดทู ่ี Property ด้านขวาของ btnbacksc7 Height ให้เปล่ียนเป็น 20%
Relative Size (e.g. “50%”) 15% Width ให้เปลี่ยนเป็น Relative Size (e.g. “50%”)
ดังรปู ที่ 5.102.3

รปู ที่ 5.102.3
5.104 คลิกที่ Screen7 เพือ่ เปลย่ี นสี Background

5.104.1 เปล่ยี น BackgroundColor เป็นสฟี ้า ดังรปู ที่ 5.104

5.104

5.104.1

รปู ที่ 5.104

5.105 สามารถ คลกิ Live Test เพื่อรนั ดู ผลลพั ธไ์ ด้ ดังรูปที่ 5.105
รูปท่ี 5.105

5.106 คลกิ ท่ี เพ่อื เพ่ิม Screen8 และทํางานอยูท่ ี่ Screen8 ดงั รปู ที่ 5.106

5.107 คลิกท่ีช่อง Background Picture รปู ที่ 5.106
แลว้ คลกิ ที่ Upload files ดังรปู ท่ี 5.107

รูปท่ี 5.107

5.107.1 คลิกรปู BGการรบั มอื โควิด Open ดงั รปู ที่ 5.107.1

รปู ที่ 5.107.1
5.108 จะไดร้ ูป BGการรับมือโควิด เข้ามาใน Background Picture ของ Screen8 ดงั รปู ท่ี 5.108

รูปที่ 5.108

5.109 คลิกลาก Button มาใสใ่ น Screen8 เปล่ยี นชอ่ื Buttonเปน็ Btnback8 Text เอา
ขอ้ ความออก BackgroundColor เลือก ไมม่ สี ีพ้ืนหลงั Background Picture เลอื กเป็น ซ้าย.png
ดังรปู ที่ 5.109

รูปท่ี 5.109
5.110 Height ให้เปล่ยี นเปน็ Relative Size (e.g. “50%”) 10% Width ใหเ้ ปลย่ี นเป็น Relative
Size (e.g. “50%”) 15% Margin bottom -470 ดงั รปู ท่ี 5.110

รปู ที่ 5.110

5.111 คลกิ ท่ี เพ่อื เพ่ิม Screen9 และทํางานอยูท่ ี่ Screen9 ดงั รปู ที่ 5.111

5.112 คลิกท่ีช่อง Background Picture รปู ที่ 5.111
แลว้ คลกิ ที่ Upload files ดังรปู ท่ี 5.112

รูปท่ี 5.112

5.112.1 คลกิ รปู BGสาระน่ารู้ Open ดังรปู ท่ี 5.112.1

รปู ที่ 5.112.1
5.113 จะไดร้ ูป BGสาระนา่ รู้ เขา้ มาใน Background Picture ของ Screen9 ดังรูปท่ี 5.113

รูปที่ 5.113

5.114 คลิกลาก Button มาใสใ่ น Screen9 เปล่ยี นชอ่ื Buttonเปน็ Btnback9 Text เอา
ขอ้ ความออก BackgroundColor เลือก ไมม่ สี ีพ้ืนหลงั Background Picture เลอื กเป็น ซ้าย.png
ดังรปู ที่ 5.114

รูปท่ี 5.114
5.115 Height ให้เปล่ยี นเปน็ Relative Size (e.g. “50%”) 10% Width ใหเ้ ปลย่ี นเป็น Relative
Size (e.g. “50%”) 15% Margin bottom -470 ดงั รปู ท่ี 5.115

รปู ที่ 5.115

5.116 คลกิ ท่ี เพ่อื เพ่มิ Screen10 และทํางานอยู่ที่ Screen10 ดังรูปที่ 5.116

5.117 คลิกที่ช่อง Background Picture รูปที่ 5.116
แลว้ คลิกที่ Upload files ดงั รปู ที่ 5.117

รูปท่ี 5.117

5.117.1 คลกิ รูป BGคมู่ อื Open ดงั รปู ท่ี 5.117.1

รูปที่ 5.117.1
5.118 จะไดร้ ูป BGคู่มือ เขา้ มาใน Background Picture ของ Screen10 ดงั รูปที่ 5.118

รูปที่ 5.118

5.119 คลกิ ลาก Button มาใสใ่ น Screen10 เปลยี่ นช่อื Buttonเป็น Btnback10 Text เอา
ข้อความออก BackgroundColor เลอื ก ไม่มีสีพืน้ หลัง Background Picture เลอื กเปน็ ซา้ ย.png
ดังรปู ท่ี 5.119

รปู ท่ี 5.119
5.120 Height ใหเ้ ปลย่ี นเปน็ Relative Size (e.g. “50%”) 10% Width ใหเ้ ปลยี่ นเป็น Relative
Size (e.g. “50%”) 15% Margin bottom -470 ดังรูปที่ 5.120

รปู ท่ี 5.12

6.วิธีการใส่ Code ในโปรแกรม Thunkable
6.1 คลิกที่ Screen1 คลิกท่ี Blocks เพอ่ื ใส่ Code ท่ี Screen1 ให้เชื่อมต่อไปยงั หนา้ Screen2
ดงั รปู ที่ 6.1

รปู ที่ 6.1
6.2 จะปรากฏ พ้นื ทกี่ ารทาํ งาน (State) เพอื่ ใหใ้ ส่ Code ดงั รปู ที่ 6.2

รปู ท่ี 6.2

6.3 คลิกท่ี Let's go คลิกคา้ งท่ี when Lest’s go Click do แล้วลากวางลงบน State ดงั รูปที่ 6.3
รปู ที่ 6.3

6.4 คลิกท่ี Control คลิกคา้ งท่ี Navigate to Screen1 แล้วลากวางตอ่ จาก when Lest’s go Click
do ดังรูปที่6.4

รูปที่ 6.4

6.5 คลิกท่ี Navigate to Screen1 เปลี่ยนเป็น Screen2 ให้สังเกตเครื่องหมายจะอย่ทู ่หี น้า Screen ท่ีได้
ทาํ การเลือก ดงั รปู ที่ 6.5

รปู ที่ 6.5

6.6 ทําเหมอื นขัน้ ตอนข้างตน้ ทผี่ ่านมา คลิกที่ btnHome เลอื ก when btnHome Click do คลิก
ที่ Control เลือก Navigate to Screen1 (ไม่ต้องเปลย่ี น Screen) ดงั รูปที่ 6.6

รูปที่ 6.6
6.7 คลกิ ที่ btnmanual เลอื ก when btnmanual Click do คลิกท่ี Control

เลอื ก Navigate to Screen1 เปลย่ี นเป็น Screen10 ดงั รปู ท่ี 6.7

รูปท่ี 6.7
6.8 คลิกท่ี Screen2 คลิกท่ี Blocks เพือ่ ใส่ Code ที่ Screen2 ใหเ้ ชือ่ มต่อไปยงั หน้า Screen3 และ
Screen8 ดงั รปู ท่ี 6.8

รปู ท่ี 6.8
6.9 จะปรากฏ พ้นื ท่กี ารทาํ งาน (State) เพื่อใหใ้ ส่ Code ดังรูปท่ี 6.9

รูปที่ 6.9

6.10 คลกิ ท่ี btnCOVID คลกิ คา้ งท่ี when btnCOVID Click do แลว้ ลากวางลงบน State
ดงั รูปท่ี 6.10

รูปที่ 6.10

06.11 คลิกที่ Control คลกิ ค้างท่ี Navigate to Screen1 แล้วลากวางตอ่ จาก when btnCOVID Click
do ดังรูปท6ี่ .11

รูปที่ 6.11