research-system.siam.eduresearch-system.siam.edu/images/coop/web_based_instruction_english_for... ·...

บทท 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 สฟา