Answer To: Assignment 5 (Specification) - DPIT128/UCIT128 Assignment 5 Specification - DPIT128/UCIT128...
Rushendra answered on Jun 03 2021
js-Table/a5.json
{
"topic": "Formula 1 Racing",
"subject": "Top 10 Driver Statistics",
"source": "https://en.wikipedia.org/wiki/List_of_Formula_One_Grand_Prix_winners#By_driver",
"driverStats": [{
"name": "Lewis Hamilton",
"rank": "1",
"wins": 95,
"starts": 266,
"source": "https://en.wikipedia.org/wiki/Lewis_Hamilton"
},
{
"name": "Michael Schumacher",
"rank": "2",
"wins": 91,
"starts": 306,
"source": "https://en.wikipedia.org/wiki/Michael_Schumacher"
},
{
"name": "Sebastian Vettel",
"rank": "3",
"wins": 53,
"starts": 257,
"source": "https://en.wikipedia.org/wiki/Sebastian_Vettel"
},
{
"name": "Alain Prost",
"rank": "4",
"wins": 51,
"starts": 199,
"source": "https://en.wikipedia.org/wiki/Alain_Prost"
},
{
"name": "Ayrton Senna",
"rank": "5",
"wins": 41,
"starts": 161,
"source": "https://en.wikipedia.org/wiki/Ayrton_Senna"
},
{
"name": "Fernando Alonso",
"rank": "6",
"wins": 32,
"starts": 311,
"source": "https://en.wikipedia.org/wiki/Fernando_Alonso"
},
{
"name": "Nigel Mansell",
"rank": "7",
"wins": 31,
"starts": 187,
"source": "https://en.wikipedia.org/wiki/Nigel_Mansell"
},
{
"name": "Jackie Stewart",
"rank": "8",
"wins": 27,
"starts": 99,
"source": "https://en.wikipedia.org/wiki/Jackie_Stewart"
},
{
"name": "Jim Clark",
"rank": "=9",
"wins": 25,
"starts": 72,
"source": "https://en.wikipedia.org/wiki/Jim_Clark"
},
{
"name": "Niki Lauda",
"rank": "=9",
"wins": 25,
"starts": 171,
"source": "https://en.wikipedia.org/wiki/Niki_Lauda"
}
]
}
js-Table/a5.xml
Novotel Wollongong Northbeach
4
3123
8.1
Sage Hotel Wollongong
4
3802
7.8
Adina Apartment Hotel Wollongong
4
1046
8.7
Quality Suites Pioneer Sands
4
656
8.6
Mantra Wollongong
4
1052
7.6
The Belmore All-Suites Hotel
3
1214
8.8
Boat Harbour Motel
3
869
8.0
Solonon Inn Wollongong
3
731
7.3
Best Western City Sands
4
1219
8.3
Flinders Motel
3
701
7.4
js-Table/assignment-5-specification-2-b1difi5m-gsbwaciu.docx
- DPIT128/UCIT128 Assignment 5 Specification -
DPIT128/UCIT128
Introduction to Web Technology (Autumn 2021)
Assignment 5 (15%) due by Friday 21st of May 2021 at 11:55 PM
Learning Outcomes
· Ability to incorporate AJAX scripting into CSS enhanced HTML documents
· Experience working directly with the structure and content of XML and JSON files
· Ability to reference and navigate XML data structures via AJAX scripts
· Ability to reference, navigate and sort JSON data structures via AJAX scripts
· Ability to utilise specific JavaScript control structures to accomplish the above
Submission Instructions
You will need to submit a total of 4 files using the “Assignment 5” submission facility on Moodle. Please see the table below for an overview of the files (including their names and extensions) that are required for each task.
Task
Files Required
1
A5_TASK1.xml
2
A5_TASK2.html
3
A5_TASK3.json
4
A5_TASK4.html
The assessor will be using the Google Chrome browser. Please test your work with this browser prior to submission.
This assignment is scheduled to be marked in the laboratory during Week 12. Marks will be deducted if you cannot answer the questions asked about your solution by the assessor.
Please be aware of the following:
1. Late submissions will incur an awarded mark deduction of 10% for each day late.
2. Submissions more than 3 days late will not be marked (a zero will be automatically awarded).
3. If you need an extension, please apply for academic consideration before the assignment due date/time. The UOW College Academic Consideration Policy can be found at the following URL:
https://www.uowcollege.edu.au/about/governance/policies-procedures/
4. Plagiarism is treated seriously. If we suspect that work has been copied, ALL students involved are likely to be awarded a mark of zero for the assignment.
There are 4 tasks in this assignment.
Task 1: Download and extend the A5.xml file available on Moodle (also available here) to include all the information provided in the following table. The first hotel has already been inserted to demonstrate the structure that should be used for each record.
Hotel Name
Stars
Reviews
Score
Novotel Wollongong Northbeach
4
3123
8.1
Sage Hotel Wollongong
4
3802
7.8
Adina Apartment Hotel Wollongong
4
1046
8.7
Quality Suites Pioneer Sands
4
656
8.6
Mantra Wollongong
4
1052
7.6
The Belmore All-Suite Hotel
3
1214
8.8
Boat Harbour Motel
3
869
8.0
Solomon Inn Wollongong
3
731
7.3
Best Western City Sands
4
1219
8.3
Flinders Motel
3
701
7.4
Information obtained from Hotels Combined on the 25th of February 2021.
Please Note:
· Save your completed file as “A5_TASK1.xml”.
· This will be the first of 4 separate files that you must submit for this assignment.
· Check that your XML is well-formed by using the validation service available at the following URL:
https://www.xmlvalidation.com
This task is worth 1.5 marks.
Task 2: Create the HTML and CSS code needed to reproduce the following web application interface. Extend your code by including the JavaScript & AJAX functionality listed in “Design Requirements”. You must use the same layout and inclusions as shown below.
Figure 1: Initial State
Figure 2: Final State
Design Requirements:
· The heading text should be displayed within a h2 element.
· The button must have a width value of 100px and a padding value of 10px.
· A background colour for the button should also be specified (see “Design Resources”).
· The following actions must occur when the “Start” button is clicked:
1. An AJAX script is called to access and read the “A5_TASK1.xml” file
2. A for loop is used to populate a table with the collected XML data
3. A switch statement is used to display a suitable “Star Rating” image (see “Design Resources”)
4. An if/else if/else structure is used to set the “Overall Score” background colour
· The table heading text must be displayed within a caption element.
· The caption should have a font size of 21px and a matching bold style.
· The caption must also have a top padding value of 30px and a bottom padding value of 10px.
· All hyperlinks should display their destination in a new window/tab.
· The table must utilise th and td elements with a padding value of 10px and a font size of...