Upload
others
View
11
Download
0
Embed Size (px)
Citation preview
บทท 4 การออกแบบทางกายภาพ
4.1 การออกแบบการแสดงผล
รปท 4.1 แสดงหนาเมนหลก
จากรปท 4.1 เปนหนาจอการแสดงเมนหลก โดยมหวขอหลก 4 ขอ ทางดานซาย คอ 1. หนาแรก 2. สมครสมาชก 3. วธการใชงาน 4. เขาสระบบ ท าการกดเลอกเมนเพอเชอมตอไปหนาเมนทตองการ หรอเอาเมาสไปชทรปภาพเคลอนไหว จะแสดงหวขอของแตละบทเรยนเรยงตามรป จากภาพไดยกตวอยางชไปบทเรยนท 1 และสามารถคลกเขาไปได
67
รปท 4.2 แสดงหนาสมครสมาชก
จากรปท 4.2 หนาจอการสมครสมาชก โดยจะมชองใหกรอกขอมลทงหมด 4 ชอง ชองท 1นบจากดานบน ใหกรอก username ใชในการลอกอนเขาสระบบ ชองท 2 กรอกรหสผานใชในการลอกอน ชองท 3กรอกชอจรง และชองท 4 กรอกนามสกล เพอเกบไวเปนประวตการเขาใชงาน จากนนก กดปม เสรจเรยบรอย
68
รปท 4.3 แสดงหนาลอกอน จากรปท 4.3 หนาจอการลอกอนเขาสระบบ จะมทงหมด 2 ชองเพอใหกรอก ชองท 1
กรอก Usernsme ทไดท าการกรอกไปตอนหนา สมครสมาชก และชองท 2 กรอก Password เชนกน จากนนกดปม Sign in ท าการลอกอนเขาใชงาน
69
รปท 4.4 แสดงหนาแรกแสดงวธการใชงาน จากรปท 4.4 หนาแรกแสดงวธการใชงาน เมอกดเมนวธการใชงานทางดานซาย จะ
ปรากฏหนาตางแบบนขนมา สามารถกดเขาหนา สมครสมาชกและลอกอนในหนานไดเลย และหากอยากรรายละเอยดเพมเตมในการใชงานกกดท รายละเอยดเพมเตม
70
รปท 4.5 แสดงหนาวธการใชงาน
จากรปท 4.5 หนาวธการใช จะบอกวธการใชงานตางๆพรอมมเสยงอธบาย เมอกดปมเลนเสยงพดกจะดงออกมา
71
รปท 4.6 แสดงหนาเมนยอยของแตละบทเรยน 1-5
จากรปท 4.6 หนาเมนยอยของแตละบทเรยนทง 1-5 บทจะเหมอนกน หวขอแรก คอ
Content เนอหาของบทเรยน Exercise แบบฝกหด ถาเอาเมาสไปชจะแสดงขอความใหเหนเหมอนในภาพ
72
รปท 4.7 แสดงหนาบทเรยนบทท 1
จากรปท 4.7 หนาบทเรยนบทท 1 ตวอกษรภาษาองกฤษ จะเปนรปภาพทตรงกบตวอกษรภาษาองกฤษ A-Z และหากเอาเมาสไปชจะ แสดงขอความแลวสามารถฟงเสยงไดโดยกดทปมเลน
73
รปท 4.8 แสดงหนาเมนแบบฝกหดของบทท 1
จากรปท 4.8 หนาเมนยอยแบบฝกหดบทท 1 จะใหเลอก 2 แบบฝกหดจากรปไดเอาเมาสไปชทรปแรกจะแสดงขอความสามารถคลกเขาไปไดเลย
74
รปท 4.9 แสดงหนาแบบฝกหดของบทท 1
จากรปท 4.9 หนาแบบฝกหดบทท 1 จะเปนเกมใหจบคภาพตวอกษรทเหมอนกนโดยเปด
แผนสน าตาลจนครบ หากอยากกลบไปหนาใหกดทรปบาน
75
รปท 4.10 แสดงหนาแบบฝกหดของบทท 1 เกมท 2
จากรปท 4.10 หนาแบบฝกหดบทท 1 เกมท 2 จบคภาพเหมอนโดยเปดแผนสน าตาลจนครบ หากอยากกลบไปหนาใหกดทรปบาน
76
รปท 4.11 แสดงหนาบทเรยนบทท 2
จากรปท 4.11 หนาบทเรยนบทท 2 จะมเนอหาเกยวกบการกลาวทกทาย ภาพและเสยงเปน
องคประกอบ ดานซายและขวาของภาพจะมลกศรใหกดเลอนไปทางซายไปทางขวาเพอเปลยนภาพ ดานขวาของภาพจะมค าบรรยายและแทบเลนเสยงใหกดฟงค าอธบาย หากตองการขามไปดเนอหาอนอกใหกดทรปอมยมสเหลองทถอปายค าวา NEXT จะสามารถเปลยนไปหนาตอไป
77
รปท 4.12 แสดงหนาบทเรยนบทท 2 ตอ จากรปท 4.12 หนาบทเรยนบทท 2 ตอ จะมเนอหาเกยวกบการกลาวทกทาย ภาพและเสยง
เปนองคประกอบ ดานซายและขวาของภาพจะมลกศรใหกดเลอนไปทางซายไปทางขวาเพอเปลยนภาพ ดานขวาของภาพจะมค าบรรยายและแทบเลนเสยงใหกดฟงค าอธบาย
78
รปท 4.13 แสดงหนาเมนแบบฝกหดบทท 2
จากรปท 4.13 หนาเมนแบบฝกหดบทท 2 จะมอยเกมใหเลอกถาเอาเมาสไปชทภาพจะ
แสดงขอความใหเหนสามารถคลกเขาไปได
79
รปท 4.14 แสดงหนาแบบฝกหดบทท 2
จากรปท 4.14 หนาแบบฝกหดบทท 2 จบคค าตอบทถกตองใหลากเสนจากจดสแดงดานซายไปยงจดสด าทางดานขวาทคดวาค าตอบตรงกนพอลากจนครบกกดปม ตรวจค าตอบสเขยว หรอ หากอยากท าใหมใหกดปม ท าใหมอกครง หรอ กลบเมนหลกใหกดทรปบาน
80
รปท 4.15 แสดงหนาแบบฝกหดบทท 2 ตอ
จากรปท 4.15 หนาแบบฝกหดบทท 2 พอท าเสรจครบหมดทง 5 ขอ แลวกดตรวจค าตอบ ก
จะแสดงผลทท าไดวาท าไดกขอจากตวอยาง ท าถก 5 ขอ
81
รปท 4.16 แสดงหนาเมนบทเรยนท 3 จากรปท 4.16 หนาเมนบทเรยนท 3 จะแบงเปน 6 หมวด จะม Number , Classroom ,
Colors , My Body , My Family , Animal จะอยในกรอกสเหลยมสน าเงน สามารถคลกเขาไปไดเลย
82
รปท 4.17 แสดงหนาเมนบทเรยนท 3 หมวด Number
จากรปท 4.17 หนาเมนบทเรยนท 3 หมวด Number ในบทนจะมเนอหาเกยวกบตวเลข 0-
10 เปนภาพเคลอนไหวและมเสยงประกอบโดยกดทปมเลนไดเลย
83
รปท 4.18 แสดงหนาเมนบทเรยนท 3 หมวด Classroom
จากรปท 4.18 หนาเมนบทเรยนท 3 หมวด Classroom ในบทนจะมเนอหาค าศพทเกยวกบ
สงของทอยในหองเรยนจะมาจดสแดง สามารถเอาเมาสไปชแลวจะมขอความและภาพแสดงขนมาใหเหน ตวอยางในภาพไปชท ประต จะมาขอความขนมาและภาพประตเปด โดยภาพประกอบจะเปนภาพเคลอนไหว
84
รปท 4.19 แสดงหนาเมนบทเรยนท 3 หมวด Color
จากรปท 4.19 หนาเมนบทเรยนท 3 หมวด Color ในบทเรยนนจะเปนเนอหาเกยวค าศพท
ของสตางๆ ทอยในกรอบสเหลยมเปนภาพเคลอนไหวพรอมเสยงประกอบภาพเมอกดทปมเลน
85
รปท 4.20 แสดงหนาเมนบทเรยนท 3 หมวด My Body จากรปท 4.20 หนาเมนบทเรยนท 3 หมวด My Body ในบทเรยนนจะเปนเนอหาเกยวกบ
ค าศพทเกยวกบรางกายของเราในสวนตางๆ ตรงภาพจะมลกศรเลอนซายขวา แลวมขอความกบแทบเลนเสยงใหกดฟงค าพดได
86
รปท 4.21 แสดงหนาเมนบทเรยนท 3 หมวด My Family
จากรปท 4.21 หนาเมนบทเรยนท 3 หมวด My Family ในบทเรยนนจะมเนอหาค าศพท
เกยว ครอบครวเปนภาพเคลอนไหวแลวมแทบเสยงค าบรรยายใตภาพ
87
รปท 4.22 แสดงหนาเมนบทเรยนท 3 หมวด Animals
จากรปท 4.22 หนาเมนบทเรยนท 3 หมวด Animals จะมเมนยอยอก 4 หมวด คอ สตวน า,
สตวปา,สตวเลยงในบาน,สตวเลยงในฟารม สามารถคลกไดเลย
88
รปท 4.23 แสดงหนาเมนบทเรยนท 3 หมวด Aquatic Animals จากรปท 4.23 หนาเมนบทเรยนท 3 หมวด Aquatic Animals บทเรยนนจะมเนอหาค าศพท
เกยวกบสตวน า ในกรอบสเหลยมและมแทบเสยงสามารถกดฟงอธบายไดเลย
89
รปท 4.24 แสดงหนาเมนบทเรยนท 3 หมวด Wild Animals
จากรปท 4.24 หนาเมนบทเรยนท 3 หมวด Wild Animals บทเรยนนจะมเนอหาค าศพท
เกยวกบสตวปา ในกรอบสเหลยมและมแทบเสยงสามารถกดฟงอธบายไดเลย
90
รปท 4.25 แสดงหนาเมนบทเรยนท 3 หมวด House Pets
จากรปท 4.25 หนาเมนบทเรยนท 3 หมวด House Pets บทเรยนนจะมเนอหาค าศพท
เกยวกบสตวเลยงในบาน ในกรอบสเหลยมและมแทบเสยงสามารถกดฟงอธบายไดเลย
91
รปท 4.26 แสดงหนาเมนบทเรยนท 3 หมวด Farm Animals จากรปท 4.26 หนาเมนบทเรยนท 3 หมวด Farm Animals บทเรยนนจะมเนอหาค าศพท
เกยวกบสตวเลยงในฟารม ในกรอบสเหลยมและมแทบเสยงสามารถกดฟงอธบายไดเลย
92
รปท 4.27 แสดงหนาเมนแบบฝกหดบทเรยนท 3
จากรปท 4.27 หนาเมนแบบฝกหดบทเรยนท 3 จะม 4 เมนใหเลอกสามารถเลอกไดตามใจ
ชอบไดเลย จะมจบคตวเลข ลากเสนจบค 1-3
93
รปท 4.28 แสดงหนาแบบฝกหดบทเรยนท 3 เกมท 1 จากรปท 4.28 หนานจะแสดงการดตวเลขขนมา 10 ใบ ใหน าการดตวเลขมาใสในชองท
เปนภาษาองกฤษใหถกตองหากใสไมตรงกนจะเดงกลบไปทเดม
94
รปท 4.29 แสดงหนาบทเรยนบทท 4 Article
จากรปท 4.29 หนาบทเรยนบทท 4 Article บทนจะแสดงเนอหาเกยวกบการใช Article พรอมมเสยงอธบาย หากตองการดเนอหาตอไปใหกดท รปลกยม หรอกด ปมถดไปทอยขางขวาบน
95
รปท 4.30 แสดงหนาบทเรยนบทท 4 Article
จากรปท 4.30 หนาบทเรยนบทท 4 Article บทนจะแสดงเนอหาเกยวกบการใช A พรอมม
ภาพประกอบและกดฟงเสยงค าบรรยายได
96
รปท 4.31 แสดงหนาบทเรยนบทท 4 Article จากรปท 4.31 หนาบทเรยนบทท 4 Article บทนจะแสดงเนอหาเกยวกบการใช An พรอมม
ภาพประกอบและกดฟงเสยงค าบรรยายได
97
รปท 4.32 แสดงหนาเมนแบบฝกหดบทเรยนบทท 4
จากรปท 4.32 หนาเมนแบบฝกหดบทเรยนท 4 จะม 1 เมนจากภาพสามารถคลกเขาไปใช
งานไดเลย
98
รปท 4.33 แสดงหนาแบบฝกหดบทท 4
จากรปท 4.33 หนาแบบฝกหดบทท 4 จะมค าถามทงหมด 5 ขอ 4 ตวเลอกใหเลอก ตอบขอทถกตองทสด แลวเลอนลงไปดานจะมปม สงค าตอบ กดแลวจะตรวจค าตอบให และจะแสดงผลทท าไดออกมาอกหนาหนง
99
รปท 4.34 แสดงหนาบทเรยนบทท 5 This/That
จากรปท 4.34 หนาบทเรยนบทท 5 จะเนอหาในการใช THIS ม ขอความ ภาพ และ เสยง ประกอบการสอน
100
รปท 4.35 แสดงหนาบทเรยนบทท 5 This/That
จากรปท 4.35 หนาบทเรยนบทท 5 จะเนอหาในการใช THAT ม ขอความ ภาพ และ เสยง
ประกอบการสอน
101
รปท 4.36 แสดงหนาเมน แบบฝกหดบทเรยนท 5
จากรปท 4.36 หนาเมน แบบฝกหดบทท 5 ม 1 เมนใหเลอกคลกในการเขาไปท าแบบฝกหด
102
รปท 4.37 แสดงหนาแบบฝกหดบทเรยนท 5
จากรปท 4.37 หนาแบบฝกหดบทท 5 ม ค าถามทงหมด 5 ขอใหเลอกแค 2 ตวเลอกคอ This
และ That จากนนเลอนลงมาลางสด จะปมสงค าตอบ กดแลวจะแสดงผลทท าไดออกมาในชอง
103
รปท 4.39 แสดงหนาแบบทดสอบ Final Test จากรปท 4.39 หนาแบบทกสอบ Final Test จะมจ านวน 20 ขอ ม 3 ตวเลอกใหเลอก
แบบทดสอบจะสมค าถามไปเลอยๆ
104
รปท 4.40 แสดงหนาแบบทดสอบ Final Test (ตอ)
จากรปท 4.40 หนาแบบทดสอบ Final Test ดานลางสดจะมปมกด Finish หากท าเสรจเรยบรอยสามารถกดไดเลย
105
รปท 4.41 แสดงหนา Score แสดงผลการทดสอบ
จากรปท 4.41 หนาแสดงผลการทดสอบ จะแสดงผลออกมาเปนเปอรเซนต โชว
Name,Lastname,Question,Score ของแตละUser ทท าแบบทดสอบ คนทท าลาสดจะแสดงอยลางสดเรยงกนลงมา หากตองการกลบหนาหลกใหกดปม HOME สฟา