Introduction to Web Technology Assignment 3

CSIT128: Introduction to Web Technology
Assignment 3 (Group of 2/3 students)
Your assignment must be submitted to Moodle before the deadline. Create a folder and named it
as A3-Tx-UOWID1,UOWID2,UOWID3(Name1,Name2,name3). In this folder you should have one MS
Words report and all your sources. The sources can be in separate files. Submit it via the Assignment
Submission tab in moodle. Only 1 submission per group. Part of the evaluation include the ability to
follow these instructions.
You need to demonstrate your work for this assignment. You may be asked questions during the
demo about your code. Part of the evaluation include the ability to answer the question.
Assignment question: Using HTML, CSS, Javascript, XML, XSD, XSL and XLST to develop the content as
shown below. There are 3 parts. Use relative link. All source codes need to follow proper
programming style and convention to enhance its readability. Your report must include the
screenshot of your webpage and the explanation of all your codes.
Part 1:
A table reflecting the following information. The format must be as shown below.
CSIT128: Assignment 3 Tutorial Group x
Student Number /
Name / Email
1234567 John Ah Dog johnad@gmail.com
SCIT, University of Wollongong
CSIT128: Introduction to Web Technology
Part 2:
This part is a game that the user can play. The game starts with the following screen in a table
structure as shown below.
Assignment 3 Part 2: Game
Player name <textbox for a name>
Time: 0 seconds
Score: 0 points
The target option: <list box with all options>
The difficulty level: <radio button
low,medium,high>
<Start Game Button> <Stop Game Button>
<1st option> <2nd option> <3rd option>
Player listing:
• Tan ah dog
• Lim ah cat
• …..
This is a game to test the player’s ability to translate the visual perception to an action via hand
movement. Before the game, player will input his/her own name (i.e. must be unique and, cannot be
empty and will be displayed at the last row of the table), select a target option which can be a digit
or any character and the difficulty level.
After the player press the start game button, the system will randomly generate 10 options. The
options have 5 digits between 0 and 9 and 5 characters between A-Z (i.e. inclusive of both ends). The
option selected by the player needs to be included as 1 of the 10 options. Your system will randomly
pick and display any 3 options and display them in the box as shown above. The option is refreshed
every 1, 2 or 3 seconds depending on the difficulty level (i.e. low is 3, medium is 2 and high is 1). The
three options must be unique. You cannot have repeating option to display at the same time. For
example, “A 5 A” where A is repeated twice is not allowed.
The game has a current score, it will initialise to zero when you click on the start game button. The
player will gain 2 points for every correct click (i.e. same as the target option) and attract a -1 points
for every invalid click. It is possible to have negative score. Repeating click per display will not be
counted. Only 1 click is allowed between a new option is displayed and before the next option is
shown. The score is updated real time during the game, and it is shown at the upper right corner of
the table. The time of the game is also shown at the same location as the score. It will start to
increment from zero at every 1 sec when the start game button is clicked and continue until the stop
game button is clicked.
The font size, foreground and background colours must be similar to what is shown above with
minor variation. When the player clicks on the “Stop Game” button, the game is stopped. The screen
must remain the same with the chosen option, the difficulty level, the time, the score and the last 3
randomly generated options. When you click on the “start game” again, it will reset the time and
score to 0 and restart the entire process again as described above.
SCIT, University of Wollongong
CSIT128: Introduction to Web Technology
Part 3:
On Moodle site, under Assignment 3 section, download the file A3.xml and study it carefully. Using
the content of A3.xml , create the following files.
• edited A3.xml file to use the stylesheet S3.xsl
• a S3.xsd file describing the structure of A3.xml
• a stylesheet file S3.xsl.
The output using the style sheet file should look like the following:
Singapore weather [27/10/2020 02:45 PM]
Date Weather data Highest Lowest
Jan 20
• 16/01/20, from 25.2°C to 30.2°C, Considerable clouds
• 20/01/20, from 30.1°C to 33.6°C, Partly Sunny
• 25/01/20, from 32.4°C to 35.4°C, Sunny
35.4°C 25.2°C
Feb 20
• 10/02/20, from 26.6°C to 30.5°C, Considerable clouds
• 16/02/20, from 23.1°C to 28.2°C, Cloudy with a
thunderstorm
• 28/01/20, from 30.6°C to 32.3°C, Sunny
32.3°C 23.1°C
Apr 20
• 13/04/20, from 24.9°C to 28.3°C, Raining with flooding at
some areas
• 26/04/20, from 30.1°C to 29.7°C, Partly Sunny
30.1°C 24.9°C
*Note: this is only a sample. The content of your output is different from this.
Please note that:
• The background colour for the first row and each subsequence rows are as shown above.
Different colour for alternate rows.
• The title and the first column are in bold.
• The weather data for each month is grouped in a single row showing the date, highest and
lowest temperatures and the comment for that day. The row will also reflect the highest and
the lowest temperatures for the month with the corresponding picture based on a code as
shown above. All the weather data must be displayed in ascending order from earliest date
to the latest date. The temperature is from lowest to highest with the degree Celsius
symbol.
• You have to use the images from the A3 Resources folder (base on the “Code” element in
the xml file)
• Use blue for “cloudy”, green for “thunderstorm” and “rain” and orange for “sunny” and
“partly sunny” weather as shown above.