Assignment 4  - Solved

Assignment specification: 

There are 4 assignment questions. 

 Question 1. (2%) 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. (2%) Write a JSON document Question2.json​ that​ represents the above train timetable. 

 

             

Question 3. (2%). 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: 

 

1.      Create a Javascript object​      that contains all the information that the user has entered.​    

 

2.      Translate the object into JSON string with indentation.​      

 

3.      Display the JSON string in the text area​       .​ 

 

 

 

             

Question 4. (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: 

1.      Difficulty level must be displayed using the star. The HTML Entity code for the star is 11088 

2.      Correct answer must be displayed using the green tick. The HTML Entity code for the tick is 10003 

3.      Question number with incorrect answer must be displayed in a grey background 

4.      All alignment must be exactly as the above example 

5.      The score message must be displayed correctly above​           the result table.​