讲解 CSIT128: Introduction to Web Technology讲解 留学生Java程序

CSIT128: Introduction to Web Technology

Assignment 2 (Group)

Your assignment must be submitted to Moodle before the deadline. Create a folder and named it as A2-GxTyy-UOWID1,UOWID2(Name1,Name2) where “x” stands for your tutorial group number     and “yy” is the team number. For example, A2-G2T05 stands for team 05 in tutorial group 2. 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 maybe 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.

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.

The player will pick a target alphabet from a list box showing A to Z. The initial value of score is zero and it must be shown as “0” in the box.

When the player clicks on the “Start Game” button, in every 1 seconds, three random alphabets will be generated and flashing on the screen (e.g. A X W) at the position as shown above. The three alphabets must not repeat at the sametime (i.e. can’t have repeating alphabets – e.g. A X A). After starting a game, you can’t change the chosen alphabet.

To play the game, the player must click on the randomly generated alphabet that was chosen earlier to win 4 points. If the player clicks on the wrong alphabet, 2 points are deducted. Therefore, the game score can become negative if the player clicks on many wrong alphabets. For example, if the   chosen alphabet is “X” and the randomly generated alphabets are “A”, “X” and “W”, clicking on the 2nd alphabet “X” will gain 4 points. Clicking on the alphabet “W” will result in losing 2 points. The current score is displayed on the top right corner of the table. It must be updated in real-time as the player plays the game.

Try to have the font size, foreground and background colours as close as possible to what are shown above.

When the player clicks on the “Stop Game” button, the game is stopped. The screen must remain the same with the chosen alphabet, the current score and the last 3 random alphabets unchanged. When you click on “start” game again, it will reset the score to 0 and start the random alphabet generation again. You can also change the chosen alphabet to a new alphabet.

Part 3:

On Moodle site, under Assignment 2 section, download the file A2.xml and study it carefully. Using the content of A2.xml , create the following files.

•    edited A2.xml file to use the stylesheet S2.xsl

•    a S2.xsd file describing the structure of A2.xml

•    astylesheet file S2.xsl.

The styling and format should look like the following, but the actual weather data is different. You should see different cells being filled up.

Please note that:

•    The background colour for the first row and first column is green. The text for the 1st  row is bold. All table cell contents are centralised.

•    All the forecasts must be displayed in descending order from latest date to the earliest date.

•    The temperature is from highest to lowest with the degree Celsius symbol.

•    You have to use the images from the A2 Resources folder (base on the “overallCode” element in the xml file)

•    Use blue for “cloudy” and “rain”, green for “thunderstorm”, red for “sunny” and orange for “partly sunny” weather.