Assignment 5 (Specification) - DPIT128 Assignment 5 Specification - DPIT128: Introduction to Web Technology (Spring 2022) Assignment 5 (15%) due by Friday 9th of September 2022 at 11:55 PM Learning...

DPIT128 Assignment 5


Assignment 5 (Specification) - DPIT128 Assignment 5 Specification - DPIT128: Introduction to Web Technology (Spring 2022) Assignment 5 (15%) due by Friday 9th of September 2022 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 Assignments are marked using the Google Chrome browser. Check all work in this same browser prior to submission. 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. Please apply for academic consideration if you need an extension. 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 entire assessment. 5. This assignment is scheduled to be marked during Week 12. 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. Name Stars Reviews Score Four Seasons Hotel Sydney 5 2879 9.2 Shangri-La Hotel Sydney 5 3278 8.7 Hilton Sydney 5 1761 8.4 Meriton Suites Kent Street 4 6482 8.9 Pier One Sydney Harbour (AC) 5 1552 8.7 West Hotel Sydney (CC) 4 1072 9.2 Hyatt Regency Sydney 5 1864 8.3 Travelodge Hotel Sydney Wynyard 4 1968 7.7 Park Hyatt Sydney 5 652 9.2 Meriton Suites World Tower 5 2846 9.1 Information obtained from Trivago on the 15th of June 2022. 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 an 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 (as shown in “Figure 2”) 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 should be displayed within a caption element. · The caption must have a font size of 21px and a matching bold style. · The caption should also have a top padding value of 30px and a bottom padding value of 10px. · All hyperlinks must display their destination in a new window/tab. · The table should utilise th and td elements with a padding value of 10px and a font size of 20px. · A background colour for all th elements must be applied (see “Design Resources”). · The table should have a matching border, field alignment and centred position on the page. · All “Total Reviews” and “Overall Score” values must be presented as shown. · An :nth-child() pseudo-class should be used to shade even table rows (see “Design Resources”). · The text shown beneath the table must be displayed within an h3 element. · The date should be presented in an Australian format (specifically as DD/MM/YYYY). · The decision conditions and hexadecimal colour values are provided in the table below. Score < 8.5="" 8.5="" ≤="" score="">< 9.0="" otherwise="" #ff9999="" #ffdb99="" #99cc99="" design="" resources:="" 1="" star="" image="" https://mywebspace.net.au/uowc128/assignment_5/images/1_star.png="" 2="" star="" image="" https://mywebspace.net.au/uowc128/assignment_5/images/2_stars.png="" 3="" star="" image="" https://mywebspace.net.au/uowc128/assignment_5/images/3_stars.png="" 4="" star="" image="" https://mywebspace.net.au/uowc128/assignment_5/images/4_stars.png="" 5="" star="" image="" https://mywebspace.net.au/uowc128/assignment_5/images/5_stars.png="" background="" (button)="" #ecf2f4="" background="" (th)="" #b9b9b9="" background="" (:nth-child)="" #e0e0e0="" border="" effect="" 1px="" solid="" #808080="" please="" note:="" ·="" you="" must="" use="" all="" of="" the="" attribute="" values="" contained="" within="" the="" xml="" file.="" ·="" save="" your="" completed="" file="" as="" “a5_task2.html”.="" ·="" this="" will="" be="" the="" second="" of="" 4="" separate="" files="" that="" you="" must="" submit="" for="" this="" assignment.="" this="" task="" is="" worth="" 4.5="" marks.="" task="" 3:="" download="" and="" extend="" the="" “a5.json”="" file="" available="" on="" moodle="" (also="" available="" here)="" to="" include="" all="" the="" information="" provided="" in="" the="" following="" table.="" the="" first="" two="" riders="" have="" already="" been="" placed="" in="" the="" json="" file="" to="" demonstrate="" the="" structure="" that="" should="" be="" used="" for="" each="" record.="" titles="" name="" starts="" wins="" link="" 8="" giacomo="" agostini="" 223="" 122="" https://en.wikipedia.org/wiki/giacomo_agostini="" 7="" valentino="" rossi="" 372="" 89="" https://en.wikipedia.org/wiki/valentino_rossi="" 6="" marc="" marquez="" 148="" 59="" https://en.wikipedia.org/wiki/marc_marquez="" 5="" mick="" doohan="" 137="" 54="" https://en.wikipedia.org/wiki/mick_doohan="" 4="" geoff="" duke="" 89="" 33="" https://en.wikipedia.org/wiki/geoff_duke="" 4="" john="" surtees="" 51="" 38="" https://en.wikipedia.org/wiki/john_surtees="" 4="" mike="" hailwood="" 152="" 76="" https://en.wikipedia.org/wiki/mike_hailwood="" 4="" eddie="" lawson="" 127="" 31="" https://en.wikipedia.org/wiki/eddie_lawson="" 3="" kenny="" roberts="" 60="" 24="" https://en.wikipedia.org/wiki/kenny_roberts="" 3="" wayne="" rainey="" 95="" 24="" https://en.wikipedia.org/wiki/wayne_rainey="" information="" obtained="" from="" wikipedia="" on="" the="" 15th="" of="" june="" 2022.="" please="" note:="" ·="" save="" your="" completed="" file="" as="" “a5_task3.json”.="" ·="" this="" will="" be="" the="" third="" of="" 4="" separate="" files="" that="" you="" must="" submit="" for="" this="" assignment.="" ·="" check="" that="" your="" json="" code="" is="" well-formed="" by="" using="" the="" validation="" service="" available="" at="" the="" following="" url:="" https://jsonlint.com="" this="" task="" is="" worth="" 1.5="" marks.="" task="" 4:="" 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="" 3:="" initial="" state="" figure="" 4:="" final="" state="" design="" requirements:="" ·="" the="" heading="" text="" should="" be="" displayed="" within="" an="" 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,="" read="" and="" parse="" the="" “a5_task3.json”="" file="" 2.="" an="" additional="" property="" is="" created="" for="" each="" rider="" object="" to="" store="" the="" calculated="" total="" losses="" 3.="" an="" additional="" property="" is="" created="" for="" each="" rider="" object="" to="" store="" the="" calculated="" win="" percentage="" 4.="" the="" updated="" array="" of="" rider="" objects="" is="" sorted="" based="" on="" the="" win="" percentage="" value="" 5.="" a="" for="" loop="" is="" used="" to="" populate="" a="" table="" with="" the="" finalised="" information="" (as="" shown="" in="" “figure="" 4”)="" 6.="" an="" if/else="" if/else="" structure="" is="" used="" to="" set="" the="" “win="" percentage”="" background="" colour="" ·="" the="" table="" heading="" text="" should="" be="" displayed="" within="" a="" caption="" element.="" ·="" the="" caption="" must="" have="" a="" font="" size="" of="" 21px="" and="" a="" matching="" bold="" style.="" ·="" the="" caption="" should="" also="" have="" a="" top="" padding="" value="" of="" 30px="" and="" a="" bottom="" padding="" value="" of="" 10px.="" ·="" all="" hyperlinks="" must="" display="" their="" destination="" in="" a="" new="" window/tab.="" ·="" the="" table="" should="" utilise="" th="" and="" td="" elements="" with="" a="" padding="" value="" of="" 10px="" and="" a="" font="" size="" of="" 20px.="" ·="" a="" background="" colour="" for="" all="" th="" elements="" must="" be="" applied="" (see="" “design="" resources”).="" ·="" the="" table="" should="" have="" a="" matching="" border,="" field="" alignment="" and="" centred="" position="" on="" the="" page.="" ·="" all="" “win="" percentage”="" values="" must="" be="" presented="" as="" shown.="" ·="" an="" :nth-child()="" pseudo-class="" should="" be="" used="" to="" shade="" even="" table="" rows="" (see="" “design="" resources”).="" ·="" the="" text="" shown="" beneath="" the="" table="" must="" be="" displayed="" within="" an="" h3="" element.="" ·="" the="" decision="" conditions="" and="" hexadecimal="" colour="" values="" are="" provided="" in="" the="" table="" below.="" percentage="">< 30="" 30="" ≤="" percentage="">< 50 otherwise #ff9999 #ffdb99 #99cc99 design resources: background (button) #ecf2f4 background (th) #b9b9b9 background (:nth-child) #e0e0e0 border effect 1px solid #808080 please note: · you must use all of the property values contained within the json file. · save your completed file as “a5_task4.html”. · this will complete the set of 4 separate files that you must submit for this assignment. this task is worth 4.5 marks. the following applies to all relevant components of your submission: additional marking criteria available marks all documents validate without issue(s) using specified validation services 1.0 all scripts function without issue(s) in google developer tools 1.0 all code is neat and suitably indented (2 spaces only) 0.5 documents contain explanatory commenting where appropriate 0.5 - this is the end of the assignment - version 2.0 by jason rodriguez - assignment 5 (marking guide; unlocked) dpit128: assignment 5 marking guidestudent number: task 1 no attempt not completed completed no problems 0 major/many issues minor issue(s) major/many issues minor issue(s) 1.5 0.25 0.5 0.75 ~ 1.0 1.25 omitting any elements, attributes or values will be considered a major issue. 3 or more minor issues will be considered as many issues. task 2 no attempt not functioning/not rendering functioning/rendering no problems 0 major/many issues minor issue(s) major/many issues minor issue(s) 4.5 0.25 ~ 1.0 2.0 2.25 ~ 3.5 4.0 not using the required for, switch or if/else if/else structures will be considered a major issue. omitting 1 or more “star rating” images or “overall score” background colours will be considered a major issue. not using all xml values, omitting the thousand-million separator or localised (australian) date will be considered a major issue. 3 or more minor issues will be considered as many issues. dpit128: assignment 5 marking guidestudent number: task 3 no attempt not completed completed no problems 0 major/many issues minor issue(s) major/many issues minor issue(s) 1.5 0.25 0.5 0.75 ~ 1.0 1.25 omitting any properties or values will be considered a major issue. 3 or more minor issues will be considered as many issues. task 4 no attempt not functioning/not rendering functioning/rendering no problems 0 major/many issues minor issue(s) major/many issues minor issue(s) 4.5 0.25 ~ 1.0 2.0 2 50="" otherwise="" #ff9999="" #ffdb99="" #99cc99="" design="" resources:="" background="" (button)="" #ecf2f4="" background="" (th)="" #b9b9b9="" background="" (:nth-child)="" #e0e0e0="" border="" effect="" 1px="" solid="" #808080="" please="" note:="" ·="" you="" must="" use="" all="" of="" the="" property="" values="" contained="" within="" the="" json="" file.="" ·="" save="" your="" completed="" file="" as="" “a5_task4.html”.="" ·="" this="" will="" complete="" the="" set="" of="" 4="" separate="" files="" that="" you="" must="" submit="" for="" this="" assignment.="" this="" task="" is="" worth="" 4.5="" marks.="" the="" following="" applies="" to="" all="" relevant="" components="" of="" your="" submission:="" additional="" marking="" criteria="" available="" marks="" all="" documents="" validate="" without="" issue(s)="" using="" specified="" validation="" services="" 1.0="" all="" scripts="" function="" without="" issue(s)="" in="" google="" developer="" tools="" 1.0="" all="" code="" is="" neat="" and="" suitably="" indented="" (2="" spaces="" only)="" 0.5="" documents="" contain="" explanatory="" commenting="" where="" appropriate="" 0.5="" -="" this="" is="" the="" end="" of="" the="" assignment="" -="" version="" 2.0="" by="" jason="" rodriguez="" -="" assignment="" 5="" (marking="" guide;="" unlocked)="" dpit128:="" assignment="" 5="" marking="" guide="" student="" number:="" task="" 1="" no="" attempt="" not="" completed="" completed="" no="" problems="" 0="" major/many="" issues="" minor="" issue(s)="" major/many="" issues="" minor="" issue(s)="" 1.5="" 0.25="" 0.5="" 0.75="" ~="" 1.0="" 1.25="" omitting="" any="" elements,="" attributes="" or="" values="" will="" be="" considered="" a="" major="" issue.="" 3="" or="" more="" minor="" issues="" will="" be="" considered="" as="" many="" issues.="" task="" 2="" no="" attempt="" not="" functioning/not="" rendering="" functioning/rendering="" no="" problems="" 0="" major/many="" issues="" minor="" issue(s)="" major/many="" issues="" minor="" issue(s)="" 4.5="" 0.25="" ~="" 1.0="" 2.0="" 2.25="" ~="" 3.5="" 4.0="" not="" using="" the="" required="" for,="" switch="" or="" if/else="" if/else="" structures="" will="" be="" considered="" a="" major="" issue.="" omitting="" 1="" or="" more="" “star="" rating”="" images="" or="" “overall="" score”="" background="" colours="" will="" be="" considered="" a="" major="" issue.="" not="" using="" all="" xml="" values,="" omitting="" the="" thousand-million="" separator="" or="" localised="" (australian)="" date="" will="" be="" considered="" a="" major="" issue.="" 3="" or="" more="" minor="" issues="" will="" be="" considered="" as="" many="" issues.="" dpit128:="" assignment="" 5="" marking="" guide="" student="" number:="" task="" 3="" no="" attempt="" not="" completed="" completed="" no="" problems="" 0="" major/many="" issues="" minor="" issue(s)="" major/many="" issues="" minor="" issue(s)="" 1.5="" 0.25="" 0.5="" 0.75="" ~="" 1.0="" 1.25="" omitting="" any="" properties="" or="" values="" will="" be="" considered="" a="" major="" issue.="" 3="" or="" more="" minor="" issues="" will="" be="" considered="" as="" many="" issues.="" task="" 4="" no="" attempt="" not="" functioning/not="" rendering="" functioning/rendering="" no="" problems="" 0="" major/many="" issues="" minor="" issue(s)="" major/many="" issues="" minor="" issue(s)="" 4.5="" 0.25="" ~="" 1.0="" 2.0="">