Description
Question 1. Consider the following train timetable:
| Wollongong – Kiama, leaving in 5 min | |
| 08:54 | Wollongong Station, Platform 2 |
| 08:56 | Coniston Station, Platform 2 |
| 09:01 | Unanderra Station, Platform 1 |
| 09:07 | Dapto Station, Platform 2 |
| 09:15 | Albion Park Station, Platform 2 |
| 09:21 | Oak Flats Station, Platform 1 |
| 09:25 | Shellharbour Junction, Platform 2 |
| 09:29 | Minnamurra Station, Platform 1 |
| 09:34 | Bombo Station, Platform 1 |
| 09:38 | Kiama Station, Platform 2 |
Write an XML document Question1.xml that represents the above train timetable which uses the stylesheet Question1.xsl and produce the following output:
Wollongong – Kiama, due: 5 min
- Wollongong Station, 08:54, P2
- Coniston Station, 08:56, P2
- Unanderra Station, 09:01, P1
- Dapto Station, 09:07, P2
- Albion Park Station, 09:15, P2
- Oak Flats Station, 09:21, P1
- Shellharbour Junction, 09:25, P2
- Minnamurra Station, 09:29, P1
- Bombo Station, 09:34, P1
- Kiama Station, 09:38, P2
Question 2. Write a JSON document Question2.json that represents the above train timetable.
Question 3. Create a web page Question3.html that looks like the following:
The web page should allow the user to enter student full name, student number, subject code, subject title in text fields , and should allow the user to enter the declaration in the text area .
The web page should display a button “JSON stringify”. When the user clicks the button, do the following tasks:
- Create a Javascript object that contains all the information that the user has entered.
- Translate the object into JSON string with indentation.
- Display the JSON string in the text area .
Question 4. Download the JSON file Question4.json from Moodle with the following content:
{
“studentRefNumber”: “BGX8P21R5”,
“testResult”: [
{
“questionNumber”: 1,
“content”: “Read a table to solve a problem”,
“topic”: “Chance & Data”,
“correctAnswer”: “C”,
“yourAnswer”: “C”,
“difficultyLevel”: 1
},
{
“questionNumber”: 2,
“content”: “Calculate the perimeter of a shape”,
“topic”: “Measures & Units”,
“correctAnswer”: “B”,
“yourAnswer”: “B”,
“difficultyLevel”: 2
},
{
“questionNumber”: 3,
“content”: “Solve a word problem involving speed of a vehicle”,
“topic”: “Algebra & Patterns”,
“correctAnswer”: “C”,
“yourAnswer”: “A”,
“difficultyLevel”: 2
},
{
“questionNumber”: 4,
“content”: “Solve a word problem involving multiple additions”,
“topic”: “Algebra & Patterns”,
“correctAnswer”: “C”,
“yourAnswer”: “C”,
“difficultyLevel”: 3
},
{
“questionNumber”: 5,
“content”: “Identify a shape reflected about a given axis”,
“topic”: “Space & Geometry”,
“correctAnswer”: “A”,
“yourAnswer”: “D”,
“difficultyLevel”: 5
},
{
“questionNumber”: 6,
“content”: “Solve a complex problem involving time”,
“topic”: “Measures & Units”,
“correctAnswer”: “D”,
“yourAnswer”: “A”,
“difficultyLevel”: 3
},
{
“questionNumber”: 7,
“content”: “Solve a complex problem involving fractions”,
“topic”: “Number & Arithmetic”,
“correctAnswer”: “B”,
“yourAnswer”: “B”,
“difficultyLevel”: 4
},
{
“questionNumber”: 8,
“content”: “Solve a complex equation involving two variables”,
“topic”: “Number & Arithmetic”,
“correctAnswer”: “C”,
“yourAnswer”: “B”,
“difficultyLevel”: 5
},
{
“questionNumber”: 9,
“content”: “Identify an object shown from a different position”,
“topic”: “Space & Geometry”,
“correctAnswer”: “B”,
“yourAnswer”: “B”,
“difficultyLevel”: 4
},
{
“questionNumber”: 10,
“content”: “Translate data table into a graph”,
“topic”: “Chance & Data”,
“correctAnswer”: “A”,
“yourAnswer”: “A”,
“difficultyLevel”: 1
}
]
}
Create a web page Question4.html .
On the web page, display a button “Get Test Result”.
When the user clicks this button, use an AJAX call to get the JSON file, parse the JSON into a Javascript object, and then display the Javascript object on the web page as follows:
Important implementation requirements:
- Difficulty level must be displayed using the star. The HTML Entity code for the star is 11088
- Correct answer must be displayed using the green tick. The HTML Entity code for the tick is 10003
- Question number with incorrect answer must be displayed in a grey background
- All alignment must be exactly as the above example
The score message must be displayed correctly above the result table.
