![Page 1: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/1.jpg)
บทท 4 การออกแบบทางกายภาพ
4.1 การออกแบบการแสดงผล
รปท 4.1 แสดงหนาเมนหลก
จากรปท 4.1 เปนหนาจอการแสดงเมนหลก โดยมหวขอหลก 4 ขอ ทางดานซาย คอ 1. หนาแรก 2. สมครสมาชก 3. วธการใชงาน 4. เขาสระบบ ท าการกดเลอกเมนเพอเชอมตอไปหนาเมนทตองการ หรอเอาเมาสไปชทรปภาพเคลอนไหว จะแสดงหวขอของแตละบทเรยนเรยงตามรป จากภาพไดยกตวอยางชไปบทเรยนท 1 และสามารถคลกเขาไปได
![Page 2: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/2.jpg)
67
รปท 4.2 แสดงหนาสมครสมาชก
จากรปท 4.2 หนาจอการสมครสมาชก โดยจะมชองใหกรอกขอมลทงหมด 4 ชอง ชองท 1นบจากดานบน ใหกรอก username ใชในการลอกอนเขาสระบบ ชองท 2 กรอกรหสผานใชในการลอกอน ชองท 3กรอกชอจรง และชองท 4 กรอกนามสกล เพอเกบไวเปนประวตการเขาใชงาน จากนนก กดปม เสรจเรยบรอย
![Page 3: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/3.jpg)
68
รปท 4.3 แสดงหนาลอกอน จากรปท 4.3 หนาจอการลอกอนเขาสระบบ จะมทงหมด 2 ชองเพอใหกรอก ชองท 1
กรอก Usernsme ทไดท าการกรอกไปตอนหนา สมครสมาชก และชองท 2 กรอก Password เชนกน จากนนกดปม Sign in ท าการลอกอนเขาใชงาน
![Page 4: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/4.jpg)
69
รปท 4.4 แสดงหนาแรกแสดงวธการใชงาน จากรปท 4.4 หนาแรกแสดงวธการใชงาน เมอกดเมนวธการใชงานทางดานซาย จะ
ปรากฏหนาตางแบบนขนมา สามารถกดเขาหนา สมครสมาชกและลอกอนในหนานไดเลย และหากอยากรรายละเอยดเพมเตมในการใชงานกกดท รายละเอยดเพมเตม
![Page 5: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/5.jpg)
70
รปท 4.5 แสดงหนาวธการใชงาน
จากรปท 4.5 หนาวธการใช จะบอกวธการใชงานตางๆพรอมมเสยงอธบาย เมอกดปมเลนเสยงพดกจะดงออกมา
![Page 6: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/6.jpg)
71
รปท 4.6 แสดงหนาเมนยอยของแตละบทเรยน 1-5
จากรปท 4.6 หนาเมนยอยของแตละบทเรยนทง 1-5 บทจะเหมอนกน หวขอแรก คอ
Content เนอหาของบทเรยน Exercise แบบฝกหด ถาเอาเมาสไปชจะแสดงขอความใหเหนเหมอนในภาพ
![Page 7: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/7.jpg)
72
รปท 4.7 แสดงหนาบทเรยนบทท 1
จากรปท 4.7 หนาบทเรยนบทท 1 ตวอกษรภาษาองกฤษ จะเปนรปภาพทตรงกบตวอกษรภาษาองกฤษ A-Z และหากเอาเมาสไปชจะ แสดงขอความแลวสามารถฟงเสยงไดโดยกดทปมเลน
![Page 8: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/8.jpg)
73
รปท 4.8 แสดงหนาเมนแบบฝกหดของบทท 1
จากรปท 4.8 หนาเมนยอยแบบฝกหดบทท 1 จะใหเลอก 2 แบบฝกหดจากรปไดเอาเมาสไปชทรปแรกจะแสดงขอความสามารถคลกเขาไปไดเลย
![Page 9: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/9.jpg)
74
รปท 4.9 แสดงหนาแบบฝกหดของบทท 1
จากรปท 4.9 หนาแบบฝกหดบทท 1 จะเปนเกมใหจบคภาพตวอกษรทเหมอนกนโดยเปด
แผนสน าตาลจนครบ หากอยากกลบไปหนาใหกดทรปบาน
![Page 10: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/10.jpg)
75
รปท 4.10 แสดงหนาแบบฝกหดของบทท 1 เกมท 2
จากรปท 4.10 หนาแบบฝกหดบทท 1 เกมท 2 จบคภาพเหมอนโดยเปดแผนสน าตาลจนครบ หากอยากกลบไปหนาใหกดทรปบาน
![Page 11: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/11.jpg)
76
รปท 4.11 แสดงหนาบทเรยนบทท 2
จากรปท 4.11 หนาบทเรยนบทท 2 จะมเนอหาเกยวกบการกลาวทกทาย ภาพและเสยงเปน
องคประกอบ ดานซายและขวาของภาพจะมลกศรใหกดเลอนไปทางซายไปทางขวาเพอเปลยนภาพ ดานขวาของภาพจะมค าบรรยายและแทบเลนเสยงใหกดฟงค าอธบาย หากตองการขามไปดเนอหาอนอกใหกดทรปอมยมสเหลองทถอปายค าวา NEXT จะสามารถเปลยนไปหนาตอไป
![Page 12: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/12.jpg)
77
รปท 4.12 แสดงหนาบทเรยนบทท 2 ตอ จากรปท 4.12 หนาบทเรยนบทท 2 ตอ จะมเนอหาเกยวกบการกลาวทกทาย ภาพและเสยง
เปนองคประกอบ ดานซายและขวาของภาพจะมลกศรใหกดเลอนไปทางซายไปทางขวาเพอเปลยนภาพ ดานขวาของภาพจะมค าบรรยายและแทบเลนเสยงใหกดฟงค าอธบาย
![Page 13: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/13.jpg)
78
รปท 4.13 แสดงหนาเมนแบบฝกหดบทท 2
จากรปท 4.13 หนาเมนแบบฝกหดบทท 2 จะมอยเกมใหเลอกถาเอาเมาสไปชทภาพจะ
แสดงขอความใหเหนสามารถคลกเขาไปได
![Page 14: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/14.jpg)
79
รปท 4.14 แสดงหนาแบบฝกหดบทท 2
จากรปท 4.14 หนาแบบฝกหดบทท 2 จบคค าตอบทถกตองใหลากเสนจากจดสแดงดานซายไปยงจดสด าทางดานขวาทคดวาค าตอบตรงกนพอลากจนครบกกดปม ตรวจค าตอบสเขยว หรอ หากอยากท าใหมใหกดปม ท าใหมอกครง หรอ กลบเมนหลกใหกดทรปบาน
![Page 15: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/15.jpg)
80
รปท 4.15 แสดงหนาแบบฝกหดบทท 2 ตอ
จากรปท 4.15 หนาแบบฝกหดบทท 2 พอท าเสรจครบหมดทง 5 ขอ แลวกดตรวจค าตอบ ก
จะแสดงผลทท าไดวาท าไดกขอจากตวอยาง ท าถก 5 ขอ
![Page 16: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/16.jpg)
81
รปท 4.16 แสดงหนาเมนบทเรยนท 3 จากรปท 4.16 หนาเมนบทเรยนท 3 จะแบงเปน 6 หมวด จะม Number , Classroom ,
Colors , My Body , My Family , Animal จะอยในกรอกสเหลยมสน าเงน สามารถคลกเขาไปไดเลย
![Page 17: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/17.jpg)
82
รปท 4.17 แสดงหนาเมนบทเรยนท 3 หมวด Number
จากรปท 4.17 หนาเมนบทเรยนท 3 หมวด Number ในบทนจะมเนอหาเกยวกบตวเลข 0-
10 เปนภาพเคลอนไหวและมเสยงประกอบโดยกดทปมเลนไดเลย
![Page 18: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/18.jpg)
83
รปท 4.18 แสดงหนาเมนบทเรยนท 3 หมวด Classroom
จากรปท 4.18 หนาเมนบทเรยนท 3 หมวด Classroom ในบทนจะมเนอหาค าศพทเกยวกบ
สงของทอยในหองเรยนจะมาจดสแดง สามารถเอาเมาสไปชแลวจะมขอความและภาพแสดงขนมาใหเหน ตวอยางในภาพไปชท ประต จะมาขอความขนมาและภาพประตเปด โดยภาพประกอบจะเปนภาพเคลอนไหว
![Page 19: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/19.jpg)
84
รปท 4.19 แสดงหนาเมนบทเรยนท 3 หมวด Color
จากรปท 4.19 หนาเมนบทเรยนท 3 หมวด Color ในบทเรยนนจะเปนเนอหาเกยวค าศพท
ของสตางๆ ทอยในกรอบสเหลยมเปนภาพเคลอนไหวพรอมเสยงประกอบภาพเมอกดทปมเลน
![Page 20: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/20.jpg)
85
รปท 4.20 แสดงหนาเมนบทเรยนท 3 หมวด My Body จากรปท 4.20 หนาเมนบทเรยนท 3 หมวด My Body ในบทเรยนนจะเปนเนอหาเกยวกบ
ค าศพทเกยวกบรางกายของเราในสวนตางๆ ตรงภาพจะมลกศรเลอนซายขวา แลวมขอความกบแทบเลนเสยงใหกดฟงค าพดได
![Page 21: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/21.jpg)
86
รปท 4.21 แสดงหนาเมนบทเรยนท 3 หมวด My Family
จากรปท 4.21 หนาเมนบทเรยนท 3 หมวด My Family ในบทเรยนนจะมเนอหาค าศพท
เกยว ครอบครวเปนภาพเคลอนไหวแลวมแทบเสยงค าบรรยายใตภาพ
![Page 22: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/22.jpg)
87
รปท 4.22 แสดงหนาเมนบทเรยนท 3 หมวด Animals
จากรปท 4.22 หนาเมนบทเรยนท 3 หมวด Animals จะมเมนยอยอก 4 หมวด คอ สตวน า,
สตวปา,สตวเลยงในบาน,สตวเลยงในฟารม สามารถคลกไดเลย
![Page 23: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/23.jpg)
88
รปท 4.23 แสดงหนาเมนบทเรยนท 3 หมวด Aquatic Animals จากรปท 4.23 หนาเมนบทเรยนท 3 หมวด Aquatic Animals บทเรยนนจะมเนอหาค าศพท
เกยวกบสตวน า ในกรอบสเหลยมและมแทบเสยงสามารถกดฟงอธบายไดเลย
![Page 24: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/24.jpg)
89
รปท 4.24 แสดงหนาเมนบทเรยนท 3 หมวด Wild Animals
จากรปท 4.24 หนาเมนบทเรยนท 3 หมวด Wild Animals บทเรยนนจะมเนอหาค าศพท
เกยวกบสตวปา ในกรอบสเหลยมและมแทบเสยงสามารถกดฟงอธบายไดเลย
![Page 25: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/25.jpg)
90
รปท 4.25 แสดงหนาเมนบทเรยนท 3 หมวด House Pets
จากรปท 4.25 หนาเมนบทเรยนท 3 หมวด House Pets บทเรยนนจะมเนอหาค าศพท
เกยวกบสตวเลยงในบาน ในกรอบสเหลยมและมแทบเสยงสามารถกดฟงอธบายไดเลย
![Page 26: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/26.jpg)
91
รปท 4.26 แสดงหนาเมนบทเรยนท 3 หมวด Farm Animals จากรปท 4.26 หนาเมนบทเรยนท 3 หมวด Farm Animals บทเรยนนจะมเนอหาค าศพท
เกยวกบสตวเลยงในฟารม ในกรอบสเหลยมและมแทบเสยงสามารถกดฟงอธบายไดเลย
![Page 27: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/27.jpg)
92
รปท 4.27 แสดงหนาเมนแบบฝกหดบทเรยนท 3
จากรปท 4.27 หนาเมนแบบฝกหดบทเรยนท 3 จะม 4 เมนใหเลอกสามารถเลอกไดตามใจ
ชอบไดเลย จะมจบคตวเลข ลากเสนจบค 1-3
![Page 28: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/28.jpg)
93
รปท 4.28 แสดงหนาแบบฝกหดบทเรยนท 3 เกมท 1 จากรปท 4.28 หนานจะแสดงการดตวเลขขนมา 10 ใบ ใหน าการดตวเลขมาใสในชองท
เปนภาษาองกฤษใหถกตองหากใสไมตรงกนจะเดงกลบไปทเดม
![Page 29: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/29.jpg)
94
รปท 4.29 แสดงหนาบทเรยนบทท 4 Article
จากรปท 4.29 หนาบทเรยนบทท 4 Article บทนจะแสดงเนอหาเกยวกบการใช Article พรอมมเสยงอธบาย หากตองการดเนอหาตอไปใหกดท รปลกยม หรอกด ปมถดไปทอยขางขวาบน
![Page 30: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/30.jpg)
95
รปท 4.30 แสดงหนาบทเรยนบทท 4 Article
จากรปท 4.30 หนาบทเรยนบทท 4 Article บทนจะแสดงเนอหาเกยวกบการใช A พรอมม
ภาพประกอบและกดฟงเสยงค าบรรยายได
![Page 31: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/31.jpg)
96
รปท 4.31 แสดงหนาบทเรยนบทท 4 Article จากรปท 4.31 หนาบทเรยนบทท 4 Article บทนจะแสดงเนอหาเกยวกบการใช An พรอมม
ภาพประกอบและกดฟงเสยงค าบรรยายได
![Page 32: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/32.jpg)
97
รปท 4.32 แสดงหนาเมนแบบฝกหดบทเรยนบทท 4
จากรปท 4.32 หนาเมนแบบฝกหดบทเรยนท 4 จะม 1 เมนจากภาพสามารถคลกเขาไปใช
งานไดเลย
![Page 33: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/33.jpg)
98
รปท 4.33 แสดงหนาแบบฝกหดบทท 4
จากรปท 4.33 หนาแบบฝกหดบทท 4 จะมค าถามทงหมด 5 ขอ 4 ตวเลอกใหเลอก ตอบขอทถกตองทสด แลวเลอนลงไปดานจะมปม สงค าตอบ กดแลวจะตรวจค าตอบให และจะแสดงผลทท าไดออกมาอกหนาหนง
![Page 34: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/34.jpg)
99
รปท 4.34 แสดงหนาบทเรยนบทท 5 This/That
จากรปท 4.34 หนาบทเรยนบทท 5 จะเนอหาในการใช THIS ม ขอความ ภาพ และ เสยง ประกอบการสอน
![Page 35: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/35.jpg)
100
รปท 4.35 แสดงหนาบทเรยนบทท 5 This/That
จากรปท 4.35 หนาบทเรยนบทท 5 จะเนอหาในการใช THAT ม ขอความ ภาพ และ เสยง
ประกอบการสอน
![Page 36: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/36.jpg)
101
รปท 4.36 แสดงหนาเมน แบบฝกหดบทเรยนท 5
จากรปท 4.36 หนาเมน แบบฝกหดบทท 5 ม 1 เมนใหเลอกคลกในการเขาไปท าแบบฝกหด
![Page 37: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/37.jpg)
102
รปท 4.37 แสดงหนาแบบฝกหดบทเรยนท 5
จากรปท 4.37 หนาแบบฝกหดบทท 5 ม ค าถามทงหมด 5 ขอใหเลอกแค 2 ตวเลอกคอ This
และ That จากนนเลอนลงมาลางสด จะปมสงค าตอบ กดแลวจะแสดงผลทท าไดออกมาในชอง
![Page 38: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/38.jpg)
103
รปท 4.39 แสดงหนาแบบทดสอบ Final Test จากรปท 4.39 หนาแบบทกสอบ Final Test จะมจ านวน 20 ขอ ม 3 ตวเลอกใหเลอก
แบบทดสอบจะสมค าถามไปเลอยๆ
![Page 39: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/39.jpg)
104
รปท 4.40 แสดงหนาแบบทดสอบ Final Test (ตอ)
จากรปท 4.40 หนาแบบทดสอบ Final Test ดานลางสดจะมปมกด Finish หากท าเสรจเรยบรอยสามารถกดไดเลย
![Page 40: research-system.siam.eduresearch-system.siam.edu/images/coop/Web_Based_Instruction_English_For... · รูปที่ 4.33 แสดงหน้าแบบฝึกหัดบทที่](https://reader033.vdocuments.net/reader033/viewer/2022041612/5e385157eba8ef312f6ae823/html5/thumbnails/40.jpg)
105
รปท 4.41 แสดงหนา Score แสดงผลการทดสอบ
จากรปท 4.41 หนาแสดงผลการทดสอบ จะแสดงผลออกมาเปนเปอรเซนต โชว
Name,Lastname,Question,Score ของแตละUser ทท าแบบทดสอบ คนทท าลาสดจะแสดงอยลางสดเรยงกนลงมา หากตองการกลบหนาหลกใหกดปม HOME สฟา