Hong Kong Examination and Assessment Authority
Hong Kong Certificate of education Examination 2010
Computer and information Technology Paper 3 (Course Work)
School: Hong Kong Taoist Association Tang Hin Memorial Secondary School
0
Content
Objectives .................................................................................................................................. 3
Analysis ...................................................................................................................................... 5
1.
Web authoring tools..................................................................................................... 5
2.
Animation ..................................................................................................................... 7
3.
Common features of learning packages ....................................................................... 8
-
Login function .......................................................................................................... 8
-
Different Version of the Platform ............................................................................ 9
-
E-Homework ............................................................................................................ 9
-
Entertainment ........................................................................................................ 10
-
Learning Processes ................................................................................................. 10
-
Reference ............................................................................................................... 11
Design ...................................................................................................................................... 12
1.
Collecting Information ................................................................................................ 12
2.
User Interface ............................................................................................................. 12
3.
Image Editing Software .............................................................................................. 12
4.
Multimedia Elements ................................................................................................. 13
5.
File Structure .............................................................................................................. 15
6.
Web Page Layout ........................................................................................................ 17
7.
The Color Scheme of the Platform ............................................................................. 17
8.
The Navigation Bar ..................................................................................................... 18
9.
The Layout of Homepages .......................................................................................... 19
10.
The Layout of the Assignment ............................................................................... 19
11.
The Layout of Games ............................................................................................. 21
12.
The Layout of Useful Links ..................................................................................... 22
13.
The Layout of Profile Editing .................................................................................. 23
Implementation ....................................................................................................................... 24
1
1.
The Login Function ..................................................................................................... 24
2.
The CSS menu ............................................................................................................. 29
3.
Homepages ................................................................................................................. 31
4.
The Form of Editing Profile ......................................................................................... 32
5.
Multimedia ................................................................................................................. 35
6.
Games ......................................................................................................................... 36
7.
Assignment ................................................................................................................. 38
8.
Useful Links................................................................................................................. 42
9.
The Chat room --- JavaScript ...................................................................................... 43
Testing and Evaluation ............................................................................................................ 44
1.
Checking Broken Links ................................................................................................ 44
2.
Checking Browser ....................................................................................................... 45
3.
The Loading time ........................................................................................................ 46
4.
Meet the Original Requirement ................................................................................. 47
4.1 The Login function ..................................................................................................... 47
4.2 The Menu................................................................................................................... 47
4.3 Assignment ................................................................................................................ 47
4.4 Games ........................................................................................................................ 47
4.4 Lesson Materials ........................................................................................................ 48
4.5 Quiz and Exam ........................................................................................................... 48
4.6 Chat room .................................................................................................................. 48
Conclusion and Discussion ...................................................................................................... 49
1. Improvement ................................................................................................................... 49
2. Learning Process .............................................................................................................. 49
3. Creativity ......................................................................................................................... 50
Reference ................................................................................................................................ 51
2
Objectives
Nowadays, many students are using computer to finish their homework or they may
search the information from the Internet. The entire above are related to E-learning.
E-learning is type of Technology supported education or learning where the medium
of instruction is through computer technology, particularly involving digital technology.
Students can use an E-learning package to evaluate learning progress. An E-learning
package consists of different multimedia such as text, graphics, audios, videos and
animations. These elements can make learning become more dynamic and interactive.
Students must enjoy learning at their own way through using this kind of E-learning
package and have a greater improvement in their own academic result.
I am going to design a proposal about E-learning package of General Studies for
primary school. The aim of designing an E-learning package is to help primary
students know more and conclude what they have learned. Inside E-learning package,
there should be contained lesson notes, lesson videos, games, homework, chat room
and some additional information for learning. Moreover, interactive questionnaires
and quizzes can be put on the package. Students can do the quizzes and quick
responses are given. It can increase the efficiency and reduce the time of teachers to
check and mark the quizzes. Also, some dangerous experiment can be made into a
video and put on the package. So, students can prevent the danger and learn from
the experiment.
Comparing to traditional classroom settings, students need to bring a lot of heavy
textbooks to school. Textbooks contain only text and images. Students always think
that it is really boring to read the textbooks. On the lesson, teacher may just use
textbook and blackboard to teach. There is less interactive. Student need to go to
school every day. If they are sick, they will miss the lessons on that day. It is hard for
them to follow the progress. These are the reason why many school will change to use
E-learning packages over than traditional classroom settings.
Using E-learning packages have many benefits. First of all, it can reduce the
environmental impact. People can do travel and learn at the sometime. This is
because it takes place in a virtual environment. E-learning is also environmentally
friendly. It allows some reduction of paper usage because paper notes and paper
assessments are replaced by virtual notes and online assessments. Second,
education can have a higher quality. Instructors of the highest educational level can
share their knowledge across Internet. It allows different people to study the
3
knowledge. Third, there is no region restricted. If someone lives in United States, he
or she can also read the knowledge came from China. Students can learn everywhere
with an internet connection, a projector, a computer. Information becomes more
accessible. Forth, it is more economical. People can use minimum cost to read the
information because this can drastically reduce the cost of higher education, making
it much more affordable. Fifth, E-learning is self-paced. It is convenient and flexibly to
learner. They are not bound to a specific day or time to physically attend classes.
The only disadvantage of E-learning is learner need to require a computer system to
access. However, most people have their own personal computer at home. They can
also make use of the public computer such as using the computer in the public
libraries. Government also provides subsidies for the poor families and they can buy
a computer. Therefore, this disadvantage is not significant on the whole. E-learning is
a good way for student to learn and improve the past teaching methods. Student can
learn more and gain more. Also, teachers can teach more easily and have more time
to prepare other teaching sources.
To create a successful E-learning package, what I need to do first is to set the theme.
A web site has to focus on a topic so that ideas and information can be developed
around it. The theme of my package is E-learning of General Studies. The target
audiences of the package are teachers and students. Having decided on the main
theme, I need to collect the relevant information from various sources such as books,
magazines and the Internet. Finally, I am going to organize the information I collected.
Arranging the information and put them in the suitable places. When the package is
nearly finished, I need to double check it and update the information regularly. So, a
successful E-learning package can be established.
4
Analysis
1. Web authoring tools
The simplest way to establish a web site is to use web authoring tools. Web authoring
tools includes designing the file structure of the web site and the layout of the web
pages. It can be divided into four categories, including text editors, HTML editors,
web-based authoring and integrated web authoring tools. Different tools have its
advantages and disadvantages.
Text Editor
A text editor is a type of program used for editing plain text files. It is the most
primitive web authoring tools. If using text editors to create an E-learning
package, it is flexible in modifying web pages. However, it is not user-friendly.
Reasonable HTML knowledge is required. Also there is no site and links
management functions. Therefore, it is not suitable to use text editors to
establish an E-learning package.
HTML Editor
HTML editor is also a choice to create the E-learning package. It offers great
functionality and control over HTML codes, such as tool palettes, HTML tags
coloration and etc. Also, many HTML editors work not only with HTML, but also
related technologies such as CSS, XML and JavaScript. The difficulties of construct
E-learning package with HTML editor are users who need to require some
HTML knowledge and none of site and links management functions.
Web-based Authoring Tool
Using web-based authoring tools is more user-friendly than text editor and
HTML editor. HTML knowledge is no need. Many famous portals such as Yahoo!
provide fee accounts and storage space for users to create web site and the web
pages are usually hosted on in the web server’s directory. The disadvantages of
using web-based authoring tools are to download and install certain browser
plug-ins. The flexibility in modifying web pages is low too. It is not attractive
enough to use web-based authoring tool to construct an E-learning package.
Integrated Web Authoring Tool
Integrated web authoring tool is the most suitable choice to establish an
5
E-learning package. Dreamweaver and Microsoft FrontPage are the example of
the integrated web authoring tools. All these programs provide a What You See Is
What You Get (WYSIWYG) environment to develop the web pages. It allows
comprehensive web authoring functions such as web site management and
dynamic web page editing. They are also suitable for those users who do not have
any programming experiences.
The follow table is the summary of four categories:
Text Editor
User-friendliness
HTML
HTML Editor
Web-based
Integrated Web
Authoring Tool
Authoring Tool
Low
Low
Higher
The highest
Required
Required some
None
None
High
High
Low
High
None
None
Some
Full Set
knowledge
Flexibility in
modifying web
pages
Site and links
management
functions

Table 1`
In the above comparison, I will choose to use integrated web authoring tool because
the benefits of this tool is more convenient to the users. I can use it to construct an
attractive appearance of the E-learning web pages and it is easy to organize the web
wages. It provides some supportive functions include table and frame creation,
hyperlink checking and updating. Therefore, integrated web authoring tool can help
me to create a successful E-learning package.
Dreamweaver is the software which I am going to use. With the comparison of
Microsoft FrontPage, Microsoft FrontPage is not functionally. It just provides some
simple functions to establish the web pages. It is hard to create an attractive web site.
It is just suitable for those who are not familiar to use integrated web authoring tool.
The reason of choosing Dreamweaver is that it can provide a comfortable
environment for me to create an E-learning package. Also it provides different
interfaces for the user to view such as code interface and design interface. And there
are many buttons. Users do not need to know much HTML knowledge. Each button
represents one function of HTML tag. For an example, this button
(Fig. 1`)
6
represents the HTML tag, Table. The software also has a lot of web authoring functions.
It is more convenient for user to click the button and create a web page. Comparing
to Notepad (Text Editor), object can be moved anywhere in Dreamweaver but it is
difficult to set the situation of the object in Notepad with using HTML tags only. The
software also provides an animation function such as layers and timeline. The users of
the E-learning packages are the primary students. The package needs to contain some
games or animation and the need of an interactive appearance to attract the primary
students. If the packages can be attractive and dynamic, the students are more willing
to use it and learn from it. On the contrary, if the web pages are full of text and not
enough picture or some dynamic functions, student will feel boring and they will use
textbooks over E-learning packages. When the web site is finished and uploaded,
Dreamweaver also provides site and links management and help user to manage the
web site with different functions.
2. Animation
Inside the packages, animations are needed. Animation is the simulation of the
movement of figure objects, which are created by displaying a series of pictorial
frames sequentially. GIF format and Flash movies are the examples of the animation.
However, the differences of GIF format and Flash movies are large.
GIF format
An animation in Graphics Interchange Format (GIF) contains one or more
images presented in a specified order. When displayed in a browser or some
presentation software, the images stored in the GIF file will be displayed in the
specified order to produce an animation. As GIF is a type of bitmaps, the size of
an animated GIF file is usually quite large. Sound and interactivity are not
supported in GIF animation. When the GIF animation is enlarged, there is loss in
quality. Animated GIFs are easy to create and therefore they are suitable for
designing simple buttons and banners on web pages
Flash Movies
Flash movies are vector graphics which requires less storage space than bitmaps
animation. The file size of a Flash movie is not large so that the movie can be
downloaded and played quickly in a browser. The animation file produced is
known as Shockwave File (SWF) which can be played in Flash Player. Flash
animation does not store every individual frame of the animated object, tween
frames are created between key frames instead. Flash also supports interactivity,
7
sounds and a scripting language called Action Script. It has become a standard for
web animation, interactive games and quizzes. Flash movies are suitable for
presenting complicated animations involving multimedia and interactivity.
The following tables are the comparison of animated GIF and Flash Movies:
Flash Movies
Nature of animation
Animated GIFs
Vector Graphics
Bitmaps
Small
Large
Magnify without loss of quality
Yes
No
Multimedia and interactivity support
Yes
No
Streaming support
Yes
No
Browser plug-in required
Yes
No
Much more versatile
Rather simple
File size
Editing software

Table 2`
I will choose Flash Movies to create the games and quizzes because the file size of this
program will not be too large and the loading time will not be so long. Also, the quality
of the games and quizzes is higher.
Games and quizzes will be more attractive. It supports streaming. Students can watch
the animation without waiting too much time. The only disadvantage is that browser
plug-in required. Students need to download the plug-in software. However, many
computers have installed the plug-in software. Users do not need to buy or download.
3. Common features of learning packages
There are two examples of learning packages. They are 21st Century Modern
Mathematics Student’s Web and Primary Longman Elect. The links of them are
http://pmaths.moderneducation.com.hk/edu_platform/login/student/primary/mathsIII
_eng/flash.jsp and http://plet.ilongman.com/index.php .I will use these two learning
packages to identify their common features.
-
Login function
First, these two platforms are all need to login. If you do not have the login name and
password, you cannot use the platforms and their resource. Therefore, the platforms
8
are restricted the users. When you have login the platform, it will only show your
forms’ resources. For example, you are primary one student. The platform will only
show you the resources of primary one; it will not show the resources of other forms.
The platform also restricted the resources of users.

Fig. 2`

Fig. 3`
- Different Version of the Platform
In the above two learning packages, they all have the teacher’s version and student’s
version. The teacher’s version is for the teacher to login-in and teachers can assign the
homework. Teacher can also check the learning processes of their students. Teachers
can also use the resources provided by the learning platform. These kinds of resources
are always related to the learning syllabus and it is can be some supplementary
exercise for the students. They can choose do them or not to do.

-
Fig. 4`

Fig. 5`
E-Homework
In the two platforms, they both provide E-Homework or some online assignment for
the students to do. Students can do the homework online. Also, there are some extra
assignments for the students to do if they have space time.
9

-
Fig. 6`

Fig. 7`
Entertainment
The follow shows that the both platforms have a game room. They don’t want
students to only just study on lesson or through the textbooks. So they also design
some fun games for student to play. Games can raise the interest of students of
studying. Also, student can learn more from playing these games and they relax by
playing games.

-
Fig. 8`

Fig. 9`
Learning Processes
These two platforms all show students their learning processes. Students can check
their learning processes. If students have poor performance in one syllabus, they can
do more exercise on that syllabus. Teachers can also check the students’ performance.
10

-
Fig. 10`

Fig. 11`
Reference
In the platforms, there are some resources for student to be reference. Students can
learn more knowledge by using reference.

Fig. 12`

Fig. 13`
11
Design
1. Collecting Information
To build up the content of this learning package platform, information should be
collected first. There are many ways to collect information. I selected to collect
information from Internet. Use the search engine like Yahoo! and Google to search for
information about ‘E-learning Platforms’. Also, I surf many web sites for information
that suits my need.
2. User Interface
After collecting sufficient information, I started to decide which user interface I will
use. First, I choose to use the HTML editor --- Windows Notepad but soon I gave it
up. The reason is that it is not user-friendly and hard to set up the layout. Then, I
choose to use the integrated web authoring tools. Microsoft FrontPage is one of the
integrated web authoring tools. But it is still not suitable for creating the e-learning
platform. The functions of Microsoft FrontPage are simple and just can create some
basic functions of the web site.
Finally, I selected Macromedia Dreamweaver to be my user interface. Macromedia
Dreamweaver is a graphical user interface. Graphical user interface (GUI) is a type of
a user interface allows people to interact with programs in more ways than typing.
This makes the program much easier to use.
Also, Dreamweaver is an integrated platform for creating, establishing and managing
web sites. It is very popular as it supports highly flexible page layout designs. It has
strong supportive functions for creating dynamic web sites with updated web server
technologies. Therefore, it has the highest user-friendliness.
3. Image Editing Software
There are many photos and images need to be edited in the platform. Therefore,
image editing software is widely used in this project. The image editing software has
many functions such as the brightness, the graphical resolution and the color. Also, we
can use the image editing software to create a new image too. There are two image
editing software which are popular and common. They are Paint and Adobe Fireworks.
12
Paint
The functions are simple but the software has been installed in the windows. Many
people know how to use it. It is common software. It does not required high
knowledge of editing images. However, the functions are too simple. This cannot
satisfy what we want. We cannot add some special effects on the pictures and it also
hard to create a new picture by just using Paint
Adobe Firework
It has many functions and is suitable for editing some complex images and also creates
a good picture. It is also common software. It can also add some special effects on the
pictures. However, it requires a standard of knowledge. Although there are many
functions, it needs time to familiar and some of the function is not so important.
I need to choose the image editing software based on what I really want and how the
pictures should be edited. Not just based on the features of that software.
4. Multimedia Elements
A successful and attractive web site needs enough multimedia elements. In my
e-learning platform, there are a number of elements. Text, Graphics and Audio are in
the platform.
- Text is the most essential elements in a web site. People publish their written
information on their web pages using the Hypertext Markup Language (HTML). It is
the basic elements to present the idea or the content in my web site. In my web site, I
use different font to present different meaning.
Also, there are two font typefaces. Font typefaces are either ‘serif’ or ‘sans serif’. A
serif is a line or a curve, for decorative purpose, extending from the stroke end of a
character. A sans serif is no decoration at the stroke end.

Fig. 14`

Fig. 15`
13
Serif creates a visual effect that there seems a line running along the base of the text.
It can increase readability. Sans serif gives a cleaner, plainer and thus a more modern
look. In my platform, I use sans serif because it looks more modern, students will like
to read. Also, it looks clean and student will be more willing to read the text.
- Graphics can transmit as much information as text does. Also, students can
remember pictures better than remember a lot of text. In the platform, graphics are
the additional information. They are used to modify the text.
There are mainly two groups of graphic file formats. They are bitmaps and vector
graphics respectively. Bitmaps are graphics stored as a rectangular grid of pixels, with
each pixel given a color value. Vector graphics are composed of objects made of line,
fills and arcs. And the component objects are stored in the form of mathematical
formulate. Here are the version of bitmap and vector graphic

Fig. 16`
When enlarge the vector graphics, no zigzags appear on the edge. However, there are
zigzags appear on the edge of the bitmaps graphics. The image quality is high of vector
graphics but low in the bitmaps graphics.
In my platform, I choose to use JPEG or JPG format. It is one of the bitmaps graphics.
Although its quality is low by comparing to vector version, I still choose it. This is
because the file size is smaller if I use the JPG format. The graphics are too
complicated; it will waste too much space to save it. Therefore, JPEG format is my final
choices.
- Audio can draw the students’ attention of presentation. So, I use audio to present
the learning materials. I have uploaded some audio that students can listen the audio
and read follow it or use the audio to be listening practices.
The formats of the audios are all MP3 format. It is a popular standard for lossy audio
compression. It also supports small file size and high sound quality. By these benefits,
14
MP3 format is the best choice of saving the audio. In addition, MP3 supports streaming,
a technology that you can listen during downloading. Students will not need to wait a
long time.
- Animation can make web pages more vivid and attractive. So, the games in my
web pages are all animation. Students will enjoy playing them because the games are
attractive and interactive.
I will choose Flash Movies (SWF) to be the format of games as I mentioned in the
Analysis part. Flash Movies requires less storage space than bitmaps animation. The file
size of a Flash movie is not large so that movie can be downloaded and played quickly
in a browser. Students can use less time to wait and play the games smoothly.

Fig. 17`

Fig. 18`
There are many interactive elements in the platforms. They can make students have
fun and like surfing the platform. First is the online quiz. Teachers and students can use
the online quiz functions to create a quiz or answer the quiz respectively. Second is
the practice exercise. Teacher can upload some extra exercise for students, so
students can read or do it at home. Third, there is a chat room. After schools or at
home, teachers and students are also can communicate by using the chat room.
Students can ask questions can teachers can give response quickly.
5. File Structure
The file structure should be designed after deciding the content of the platforms. The
platforms divided into two versions. They are student’s version and teacher’s version
respectively. Here will show their file structure:
15
Index
Home
Assignment
Game
Useful Link
Reading
Bedroom(swf)
Online Quiz
Reading (lv 13)
Grammar
Clothes(swf)
Olnline Exam
Oral Practice
(lv 1-3)
Chatroom
Listening (lv
1-3)
Writing

Learning
material
Quiz & Exam
Flow chart 1 `
The Index is the top-level web page of the site. There are seven web pages at the
second level and ten web pages at the third level. In the above file structure, the index
is be regarded as the parent page (A parent page has at least one web page below it in
the file structure.) of all the web pages or child page (A child page is a web page which
is linked to a parent page above It.) below it.
Index
Home
Assignment
1C
Reading(Cre
ate New)
Grammar(Cr
eate New)
Game
Quiz & Exam
Learning
Material
Quiz(upload)
Reading (lv
1-3)(Edit)
Exam(uploa
d)
Oral Practice
(lv 1-3)(Edit)
Useful Link
Chatroom
Listening(lv
1-3)(Edit)
Writing(Crea
te New)

Flow chart 2`
The Index is the top-level web page of the teacher’s version. There are seven web
pages at the second level, five web pages at the third level and three web pages at the
fourth level. In the above file structure, the Index is being regarded as the parent page
of all the web pages or child pages below it.
16
6. Web Page Layout
The layout of a web page is the arrangement of different multimedia elements on the
page. Here is the layout of my platforms:
Header
Menu
Menu
Student’s /
Teacher’s Account
Content
Calendar

Layout 1 `
In the above homepage design, the top area is called the header. The header includes
the title of this platform. Then, under the header is the menu. It contains links to the
other web pages. The links are in form of text. When a link is clicked, the
corresponding web page will load and display.
7. The Color Scheme of the Platform
Color scheme is designed to complement the purpose of web sites. An appropriate
color scheme is one that matched the content of a web site and gives it a
distinguishable style.
The main color of the platform is green and blue. The target users of the platforms are
teachers and students. Teachers and students always need to focus on the books.
This will hurt their eyes. If the platform is using green color, it will not hurt the eyes so
much. The text of the platform is mainly white and blue. In the cooler wheel green and
blue are on the same side. So there are analogous colors. They give less contrast and
can create a relaxing atmosphere. Teachers and students have a lot of stress. Therefore,
using this kind of colors can let them relax.
17
COOL COLOUR
WARM COLOUR
WARM COLOUR

Fig. 19`
8. The Navigation Bar
There are different kinds of Navigation Bar, such as vertical one, drop-down one ,
horizontal one and etc.. I think the horizontal navigation bar is suitable for my
platform. Also teachers and students are easy to see the bar. If I use the vertical one,
the design will be as follow:
Header
Student’s /
Teacher’s
Account
Menu
Content
Calendar
The content area will be reduced and also same as the student’s / teacher’s account
and calendar.
So I will design the horizontal one.
Home
Assignment
Game
Quiz
Exam
Learning Materials
Useful Links
Chat room
This is the first version of the horizontal navigation bar. But there the bar is too long
18
and it is Therefore, I combine Quiz and Exam into one page and the bar can be
shorter.
Home
Assignment
Game
Quiz & Exam
Learning Materials
Useful Links
Chat room
This is the second version of the horizontal navigation bar. I have combined the button
of quiz and exam.
9. The Layout of Homepages
The main page of a web site is called the homepage, which is the first web page of the
site to be displayed to web surfers. It contains some of the content of the platform.
Or it may show the basic information of the platform.
Header
Menu
Welcome!
Student’s /
Teacher’s
Account
What’s News?
Calendar
There will have the welcome message first. “What’s News?” will have the message
posted by teacher or some reminder. It is just the same of that of the teacher’s
version.
10. The Layout of the Assignment
The Assignment layout will also have two versions. This is because there are some
differences of the student’s version and teacher’s version. For example, teachers may
teach many classes and so it needs to classify the assignments into different classes.
The platform will be more easy to use by teachers.
19
Student’s Version
Header
Menu
Student’s /
Reading
Teacher’s
Account
Grammar
Calendar
Writing
There are three categories. They are reading, grammar and writing.
Teacher’s Version
This is the first page of the assignment. If you have 3 classes, there will show you as
follow:
Header
Menu
Class
Student’s /
Teacher’s
Class
Account
Class
Calendar
20
This is the second page of the assignment It is similar to the student’s version. There
are three categories also.
Header
Menu
Student’s /
Reading
Teacher’s
Account
Grammar
Calendar
Writing
The layout of Quiz & Exam and Learning Materials are just similar to the layout of
assignment.
11. The Layout of Games
Student’s Version
Header
Menu
Game 1
Game 2
Student’s /
Teacher’s
Account
Game 3
Game 4
Calendar
The Games will be order in the table. It will also contain descriptions and pictures of
games.
21
Teacher’s Version
Header
Menu
Student’s /
Game 1
Teacher’s
Account
Game 2
Calendar
Game 3
Teacher need to upload or delete the games. Therefore, games need to order in row.
It is easy for teachers to use.
12. The Layout of Useful Links
Student’s Version
Header
Menu
The useful links:
Student’s /
1.
Teacher’s
2.
Account
3.
4.
Calendar
5.
6.
22
Teacher’s Version
Header
Menu
The useful links:
Student’s /
1.
Teacher’s
2.
Account
3.
4.
Calendar
5.Upload area
13. The Layout of Profile Editing
The above is the design of the profile. The teacher’s version is just the same.
Login ID
Old Password
New Password
E-mail
Date of Birth
Name
Nick name
Gender
Upload Photo
23
Implementation
1. The Login Function
PHP (Hypertext Preprocessor) is an open-source, cross-platform and server-side
programming language. Its codes can be embedded within HTML codes. PHP scripts
are processed by the server before they are sent to browser.
Login function of the platform is using PHP. PHP is a server-side scripting language. It
scripts are executed on sever. Here is the PHP code:
<?php
/*********************************/
$Username1 = 'ctm001'; // Set your password
here
$Username2 = 'S09001'; // Set your password
First, I create a PHP file and set up the
usernames and passwords.
“$Username1” and “$Password1” are for
the teacher.
“$Username2” and “Password2” are for
the student.
here
$Password1 = 'teacher'; // Set your password
here
$Password2 = 'student'; // Set your password
here
/*********************************/
if (isset($_POST['submit_pwd'])){
$usernm = isset($_POST['usernm']) ?
$_POST['usernm'] : '';
$pass = isset($_POST['passwd']) ?
$_POST['passwd'] : '';
if (($pass != $Password1) && ($pass !=
$Password2)) {
showForm("Wrong password");
exit();
}
else
{
if (($usernm == $Username1) &
($pass == $Password1))
If someone click the submit button of the
form. The following information will be
taken from the form.
Set up the variables: “$usernm” is the
value of the “usernm” text field button.
And, “$pass” is the value of the “passwd”
text field button.
If the input value of “passwd” text field is
not equal to password 1 or password 2,
the form will show out “Wrong
password” and exit the progamme.
Or, the input value of “usernm” text field
matches the username1 and that of
24
{
“passwd” text field matches the password
header( 'Location:
1. It will go to the homepage of the
platform of teacher’s version.
(thomepage.html)
http://student.tanghin.edu.hk/~S050082/thomepa
ge.html' ) ;
}
else if (($usernm == $Username2) &
($pass == $Password2))
{
header( 'Location:
http://student.tanghin.edu.hk/~S050082/homepag
Or, the input value of “usernm” text field
matches the username2 and that of
“passwd” text field matched the
password2. It will go to the homepage of
the platform of student’s version.
(homepage.html)
e.html' ) ;
Or, there is not input but have already
clicked the submit button, it will exit the
}
programme.
}
} else {
showForm() ;
exit();
}
The function of the PHP starts when the
form is showed.
function showForm($error="LOGIN"){
?>
<div class="caption">
</div>
<form action="<?php echo
$_SERVER['PHP_SELF']; ?>" method="post"
This is part is for HTML.
Put a form in the index page.
The form will send the submitted
information to the PHP part.
name="pwd">
<div align="center">
<table align="center">
<tr>
<td class =" style22 style32">Login
This is the first row. It shows “Login ID:”
ID:</td>
<td><Input name="usernm"
type="text" class="text" value="S09001" /></td>
</tr>
This is the second row. It shows 1st text
field for input the username.
<tr>
<td class="style31">Password:</td>
<td><Input name="passwd"
This is the third row. It shows “Password”.
25
type="password" class="text" value="student"
This is the fourth row. It shows 2nd text
/></td>
field for input the password.
</tr>
<tr>
<td align="center"><Input
class="text" type="submit" name="submit_pwd"
value="Login" /></td>
This is the fifth row. It shows a submit
button.
</tr>
Here is the sample:
</table>
</div>
Login ID:
</form>
(named as “usernm”)
Password:
(named as “passwd”)
End of the PHP code. The whole program
is over.
<?php
}
?>
Student’s Version
First, input your username (e.g. S09001) and password (e.g. student).
Then, click the “Login” button.

Fig. 20`
26
If the username and the password are correct, then the result will be as following:

Fig. 21`
If the username and the password are incorrect, the result will be as following:

Fig. 22`
Also, if you don’t input the login ID and password, and click inside the homepage or
other pages directly, the result will be as follow:

Fig. 23`
27
Teacher’s Version
First, input the username and password.
Then, click the “Login” button.

Fig. 24`
If the username and password is correct, the result will be as following:

Fig. 25`
If the username and password is incorrect, the result will be as following:

Fig. 26`
28
Just like the student’s version, if you directly click into other pages without inputting
login ID and password, the result will be as follow:

Fig.27`
This Login function can prevent non-members to sign in and use the platform.
2. The CSS menu
I have inserted a CSS menu into each web pages of the platform. The CSS menu
contains links to the child page or back to the homepage. This menu uses a unified
transparent tab instead. What this means is that you can in fact change the menu and menu
hover colors just by changing the two color values inside the CSS code. It is easy to use.
Here is the CSS menu code.
<p><div><div id="ddcolortabs">
This part is put in HTML.
<ul>
<li id="current"><a href="" title="Home"><span
id="current">Home</span></a></li>
<li><a
“Current “means that you are now in this
page. This menu just acts as a point form.
The 1st point is:
href="http://student.tanghin.edu.hk/~S050082/ass
ignments.html"
title="assignment"><span>Assignment</span></
links to the Homepage.
The 2nd point is:
a></li>
links to the Assignment
<li ><a
href="http://student.tanghin.edu.hk/~S050082/ga
mes.html"
page.
The 3rd point is:
title="Games"><span>Game</span></a></li>
<li><a
href="http://student.tanghin.edu.hk/~S050082/qui
links to the Game page.
The 4th point is:
29
zandexam.html" title="QE"><span>Quiz &amp;
links to the Quiz and
Exam</span></a></li>
<li><a
href="http://student.tanghin.edu.hk/~S050082/lea
Exam page.
The 5th point is:
rningmaterials.html" title="LM"><span>Learning
links to the
MateriaL</span></a></li>
<li><a
href="http://student.tanghin.edu.hk/~S050082/us
Learning Material page.
The 6th point is:
efullinks.html" title="UL"><span>Useful
links to the Useful Link
Link</span></a></li>
<li><a
page.
href="http://student.tanghin.edu.hk/~S050082/for
The 7th point is:
um.html"
links to the Chat room
title="Forums"><span>Chatroom</span></a></l
page.
This is the end of the HTML part.
i>
</ul>
</div>
Student’s version
The CSS menu is shown as follow:

Fig. 28`
30
Teacher’s version
This CSS menu is just similar to the student’s one. However, I changed the color form
green to red and the shape for easy to distinct. The CSS menu is shown as follow:

Fig. 29`

Fig. 30`
3. Homepages
Student’s Version
In the student’s homepage, student can see the Welcome Message, the profile, the
News and the Calendar. They can go to other pages by clicking menu.
31
Teacher’s Version

Fig. 31`
This is the homepage of the teacher’s version. Also, it contains the Welcome Messages,
the News, the profile and calendar. Teacher can go to other pages by clicking the
menu.
4. The Form of Editing Profile
Forms are widely used in my platforms, such as quizzes, profile and assignment. An
HTML fill-out form contains input fields for surfers to enter information into a web
page.
Here are the HTML codes of a form for editing profile:
<form>
define a form
<table width="336" border="0" align="center">
<tr><td width="101"><span class="style24">Login
ID </span></td>
<td width="10"><span
class="style24">:</span></td>
<td width="211"><span
class="style24">S09001</span></td></tr>
<tr><td height="44"><span class="style24">Old
Password</span></td>
<td><span class="style24">:</span></td>
<td><p><label>
<input type="password" name="textfield" />
</label></p></td>
</tr>
This is a text field. It provides space for
inputting characters and numbers to a
form. The text field is specified by the
value “password” in the type attribute.
32
<tr>
<td><span class="style24">New Password
</span></td>
<td><span class="style24">:</span></td>
<td>
<p><label>
<input type="password" name="textfield2" />
</label></p>
</td></tr>
<tr><td><span class="style24">E-mail</span></td>
<td><span class="style24">: </span></td>
<td><span class="style24">
S09001@englishlearning.edu.hk
</span></td>
</tr>
<tr>
<td><span class="style24">Date of Birth
</span></td>
<td><span class="style24">:</span></td>
<td><span
class="style24">2003-01-01</span></td>
</tr>
<tr>
<td><span class="style24">Name </span></td>
<td><span class="style24">:</span></td>
<td><span class="style24">Lau Yee Suen
</span></td>
</tr>
<tr>
<td height="38"><span class="style24">Nickname
</span></td>
<td><span class="style24">:</span></td>
<td>
<p>
<label>
<input type="text" name="textfield3" />
</label>
</p></td></tr>
33
<tr>
<td><span class="style24">Gender</span></td>
<td><span class="style24">:</span></td>
<td><span class="style24">Female</span></td>
</tr>
<tr>
<td><span class="style24">Upload Photo</span>
</td>
<td><span class="style24">:</span></td>
<td><label for="file"></label>
It is used to upload the photo.
<input type="file" name="file" id="file" />
<br />
</td>
</tr>
<input type="submit" name="Submit"
value="Submit" />
It is a submit button.
<input name="Reset" type="reset" id="Reset"
value="Reset" />
It is a reset button.
</table>
End of the table
End of the form
</form>
Here are the whole from:
Student’s version

Fig. 32`
34
Teacher’s version

Fig. 33`
5. Multimedia
Images are widely used in presentation of the platforms. It needs to add images and
graphics in to the web page. Also the images should be compressed as to reduce the
time for retrieving and displaying web pages. The <IMG> tag defines a web page image.
I add an image (e.g.
Fig. 34`) into the platform. The following is the HTML code:
<IMG src="comments_bullet.gif" width="19" height="20" />
source of the image
name of the image
width of the image
height of the image
Audio and animation can enrich the content of web pages and make the page layout
more attractive. However, these multimedia files require more storage space than
others. The file should be compressed in order to reduce the file size.
The <EMBED> tags allow different kinds of files, such as audio and Flash animation, to
be embedded into an HTML document. The following is the HTML code:
<embed src="A Whole New World.mp3" width="307" height="26" autostart="False" border="1"> </embed>
source of the file
name of the file
the outlook of the plug-in control
35
6. Games
Student’s Version

Fig. 34`
Students can click the games which they like and then there will be a new window
came out. For instance, if you click the “Clothes Games”, then a new window will be
come out. It will be shown as follow:

Fig. 35`
Teacher’s Version
Teacher can upload and delete the games, therefore the interface of teacher version is
different from that of the students’ one.
36

Fig. 36`
If you want to delete the game “Prepositions of Place Games” and click the “Cancel”,
the games will be deleted. It will be shown as follow:

Fig. 37`
“Preposition of Place Games” has been deleted. If you want to upload a new game,
just need to click the “Browser” button, and then select the “Submit” button. It will be
shown as follow
37

Fig. 38`

Fig. 39`
7. Assignment
Student’s Version
It is similar to my design; I have divided the assignment part into three categories --Reading, Grammar and Writing

Fig. 40`
If you click the “Do It Now!” button of Grammar, it will be shown:
38

Fig. 41`
In this assignment, student can select the answers. After finishing the assignment,
student can click the “Submit” button; the assignment will be handed in.
The Code of menu
A menu or list is a drop-down box with several choices. A menu allows us to select
only one choice but a list allows us to select more than one choice. Both menu and
list are suitable for questions with several possible answers. I choose to use a menu
rather than a list because using list will waste many space.
<form>
First, set up a form.
1. We
<select name="select">
<option>don't think</option>
A menu is defined by the <select> tags and
each choice is defined by the <option> tags.
<option>aren't thinking</option>
</select>
that you should buy this dress.</p>
<p class="style3 style21">
2. At the moment, he
<select name="select2">
<option>is learning </option>
<option>learns</option>
</select>
German for his job.</p>
<p class="style3 style21"> 3. We usually
<select name="select3">
<option>take</option>
<option>are taking</option>
</select>
a taxi to go to work. </p>
39
…
</form>
Teacher’s Version

Fig. 42`
This page is shown teacher which class they teach.

Fig. 43`
Teacher can select “Add a new one!” or “Cancel” the assignment.
The “reading” assignment has been deleted, it will be shown:

Fig. 44`
Or “Add a new one!” it will be shown:
40

Fig. 45`
The “grammar” assignment has been deleted, it will be shown:

Fig. 46`
Or “Add a new one!” it will be shown:

Fig. 47`
41
The “writing” assignment has been deleted, it will be shown:

Fig. 48`
Or “Add a new one!” it will be shown:

Fig. 49`

Fig. 50`
8. Useful Links
Student’s Version
The useful web sites are listed. It is easy for student to surf the useful web sites. They
do not to find in the Internet.
Teacher’s Version
Actually, the teacher’s version is just like the student’s version. But one more function
is added.
42

Fig. 51`
Teacher can add the new web site links.
9. The Chat room --- JavaScript
JavaScript is used in my platform. It is a popular client-side scripting language. It is used
to improve web page design, validate data submitted in forms, and detect a visitor’s
browser as well as to create cookies in the visitor’s computer. JavaScript can be
embedded in HTML codes or stored in a separate file.
The following is the HTML code of inserting the JavaScript:
<script type="text/javascript" src="freecodenew.js"></script>
The script type
The source of the file

Fig. 52`
Students and teachers can use the chat room, and chat. Students can ask teachers
question through the chat room. This make the platform become more interactive.
43
Testing and Evaluation
1. Checking Broken Links
After finishing the whole web site, what I need to do is to check whether there are
any broken links. It is because the broken links will hinder the accessibility of the
platform. Also, it may lead the visitor cannot visit the whole platform; they can read all
the information. This may be misleading the students. Therefore, no broken links is the
expected result. I use the W3C Link Checker to check whether there are or no
broken links.
After checking the broken links, the result is shown as follow:

Fig. 53`
There are no broken links.
Then I use the other dead link check to check the web site again. To confirm there are
no broken links.
44

Fig. 54`
There are no broken links.
2. Checking Browser
The viewing area of a web page in the browser is always smaller than the browser
window. Therefore, we need to fix the size of the web page or adjust the size of the
web page.
The viewing area in Internet Explorer and other browsers are different.

Fig. 55`
45
The above shows the web site in the Internet Explore. The viewing area is only 781 X
419 pixels. The size of web site is suitable for Internet Explore. The web site is not too
large and also not too small.

Fig. 56`
The above shows the web site in the Firefox. It cannot show the bolded font. However,
the size of web site does not have a big different to the Internet Explore.
3. The Loading time
Then, I check the loading time of the web site. Large file size will have long loading
time. If the loading time of the web site is too long, the visitors do not want to use the
platform. They do not want to waste too much time for loading the platform.
I use the Pingdom Tools (http://tools.pingdom.com/fpt/) to check the loading time.

Fig. 57`
46
This bar chart shows you the loading times of different links such as the images.

Fig. 58`
The total loading time of the platform is 12.7 seconds. I think the total loading times
cannot exceed 20 seconds. Therefore, it is quite quick to load the time.
4. Meet the Original Requirement
4.1 The Login function
The login function in the platform can meet the original requirement because the
function can allow the different users to login and also different type of users can go
to different homepages. Therefore, the login function is the successful one.
4.2 The Menu
The menu function can allows users go to different pages in each pages of the
platform. Therefore, students and teachers do not need to go to the homepage or find
the links of other pages. It is so convenient and can meet the requirement.
4.3 Assignment
There is E-homework in my platform. Also, I have designed the interfaces for the
teachers to upload. In the teacher’s version; teacher can add some new homework,
into the platform. So, I can also achieve the purpose of the idea.
4.4 Games
There are also some games in the platform. Students and teacher can relax by playing
the games. They will not feel boring that just using the platform for learning only. It can
47
meet the idea.
4.4 Lesson Materials
I forgot to add the lesson materials into the menu and also the menu does not have
enough space. But lesson materials is not so important, teachers can send the
materials through E-mailing. Although it is not a big problem, I still cannot meet the
requirement of the objective.
4.5 Quiz and Exam
There are online quiz and exam in the platform. But teachers cannot give the quick
response to the students. It is failed to achieve the idea as I mentioned.
4.6 Chat room
I have put a chat room in the platform successfully. Teachers and students can have
connection in the platform. When students are absent or have some question want to
ask, they can use this chat room to find the teachers. It can meet the idea as I have
mentioned.
48
Conclusion and Discussion
1. Improvement
I think my platform is not well-designed. First I should improve my header, it is so
simple. A simple header can attract many visitors. Students may feel boring and dull of
the bad-designed header. If I can make a banner, it is better rather than just a simple
and few words in the header. Banner is a compound of pictures and text. If the banner
is colorful and attractive, it may increase more visitors.
Second, the font size of the text is small. It can be bigger. If the text is too small,
students and teachers may fell hard to watch the text. It may also destroy the vision.
The font size is larger. Students and teachers may feel easy to watch the content.
Therefore, it is better for me to adjust the font size of the text.
Third, the color of the text and background is not too matched. It the color of the
text is not strong enough, the background color will cover the text. In my platform,
the text color is not strong enough although we can still see the text. What I need to
improve is to adjust the color and select a stronger color.
Forth, there are not enough server programs in the platform. More server program
can make the platform more interactive. The platform can become a dynamic web site
also. More users can use the platform because a large database is used. Web sites
developers can save more information in the database and share the information to
the visitors.
Finally, the calendar function can be also improved. The calendar is the poorest design
in the platform because I cannot find a suitable calendar for the platform. Therefore, I
just design a table and put the days and months into the table. It is not convenient; I
need to correct the calendar every month. If auto updated calendar can be installed in
the platform, it is better.
2. Learning Process
First, I have learnt how to write a simple PHP scripts. And embed the PHP scripts into
a HTML file. It is not too hard to learn how to write PHP. I have learnt the properties
of server programming. Using this program can have more interactive with the server.
All these can make a web site become more dynamic. In the platform, the login
function is written by PHP. I have learnt some skills of writing PHP through this
project.
49
Second, I learnt how to use CSS to set up the format of the text, layout, and more.
CSS stands for Cascading Style Sheet. It is use to display the HTML elements. It is
saved as a single file. It can save a lot of work. Also, using CSS is easy to change the
style of the font.
Third, I knew more about JavaScript through this project. JavaScript is a client-side
program. It can improve the web page design. Also, I learnt how to explain and use the
JavaScript in my platform. It makes my platform become more interactive and
interesting. Chat room in my platform is the example of using JavaScript.
Forth, I learnt how to create a basic learning platform and enrich the knowledge of
HTML. I knew that it is not easy to create a whole platform and make the platform
become multi-functional, attractive and interactive. Also, I learn how to add and
embed others scripts into the HTML file.
Finally, I improve my skills on using image editing software. This is because there are
many photos and images need to edit in both report and the web site. I learnt how to
make a transparent picture. I am more familiar to the functions of the image editing
software.
3. Creativity
I have created the icons of the teachers and students. The icon is like cartoon. This is
platform is for primary students. Using cartoon can make the platform have more fun.
Also, if students and teachers do not like the icon, they can upload photos which they
like. If they like, they can edit their profile also.
Also, in the platform, there are some learning materials. Students can do or not. They
can choose. Also, I use a new method for them to practice their listening and oral. I
put some poem on the platform. They can read follow the poems and learn more
vocabulary. For listening, they can learn the skills through listen the songs.
Teachers can create the practice directly on the platform. They do not need to upload
and students do not need to download the practices. It is more convenient for the
teachers to create the assignment directly. It is save some time because the time of
teachers are valuable.
50
Reference
1.
Computer and Information Technology for HKCEE --- Module D Multimedia
Production Book 1, Henry C H HA, Published by Longman Hong Kong
Education
2.
Computer and Information Technology for HKCEE --- Module D Web
Authoring Book 2, Henry C H HA, Published by Longman Hong Kong Education
3.
http://pmaths.moderneducation.com.hk/edu_platform/login/student/primar
y/mathsIII_eng/flash.jsp, 21st Century Modern Mathematics Student’s Web
4.
http://plet.ilongman.com/index.php, Primary Longman Elect
5.
http://en.wikipedia.org/wiki/Web_authoring_software, HTML Editor
6.
http://en.wikipedia.org/wiki/Animation, Animation
51