Assignment 4 (Marking Guide; Unlocked) DPIT128/UCIT128: Assignment 4 Marking Guide Student Number: Task 1 No Attempt Not Functioning/Not Rendering Functioning/Rendering No Problems 0 Major/Many Issues...

Following isthe assignment


Assignment 4 (Marking Guide; Unlocked) DPIT128/UCIT128: Assignment 4 Marking GuideStudent Number: Task 1 No Attempt Not Functioning/Not Rendering Functioning/Rendering No Problems 0 Major/Many Issues Minor Issue(s) Major/Many Issues Minor Issue(s) 2.0 0.25 0.5 1.0 ~ 1.25 1.5 ~ 1.75 Not using absolute URLs where required will be considered a Major Issue. Omitting 1 or more of the specified event attributes will be considered a Major Issue. Incorrectly implementing 1 or more of the specified style parameters 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) 2.0 0.25 0.5 1.0 ~ 1.25 1.5 ~ 1.75 Incorrectly implementing any input elements (including radio buttons) will be considered a Major Issue. Incorrectly implementing the reverse direction or enable/disable functionality will be considered a Major Issue. JavaScript timer stacking will be considered a Major Issue. 3 or more minor issues will be considered as Many Issues. DPIT128/UCIT128: Assignment 4 Marking GuideStudent Number: Task 3 No Attempt Not Functioning/Not Rendering Functioning/Rendering No Problems 0 Major/Many Issues Minor Issue(s) Major/Many Issues Minor Issue(s) 2.0 0.25 0.5 1.0 ~ 1.25 1.5 ~ 1.75 Incorrectly implementing any input elements or state/status imagery will be considered a Major Issue. 1 or more problems with validation or randomisation (e.g. duplicate values) will be considered a Major Issue. 1 or more problems with audio playback 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) 2.0 0.25 0.5 1.0 ~ 1.25 1.5 ~ 1.75 Incorrectly implementing any input elements (including radio buttons) will be considered a Major Issue. 1 or more problems with the storage/retrieval of localStorage values will be considered a Major Issue. Omitting any of the specified default styling values will be considered a Major Issue. 3 or more minor issues will be considered as Many Issues. DPIT128/UCIT128: Assignment 4 Marking GuideStudent Number: Task 5 No Attempt Not Functioning/Not Rendering Functioning/Rendering No Problems 0 Major/Many Issues Minor Issue(s) Major/Many Issues Minor Issue(s) 2.0 0.25 0.5 1.0 ~ 1.25 1.5 ~ 1.75 Incorrectly implementing any input elements will be considered a Major Issue. 1 or more problems with validation will be considered a Major Issue. Incorrectly calculating output values will be considered a Major Issue. 3 or more minor issues will be considered as Many Issues. Task 6 No Attempt Not Functioning/Not Rendering Functioning/Rendering No Problems 0 Major/Many Issues Minor Issue(s) Major/Many Issues Minor Issue(s) 2.0 0.25 0.5 1.0 ~ 1.25 1.5 ~ 1.75 1 or more problems with the object array will be considered a Major Issue. Incorrectly creating or appending DOM nodes will be considered a Major Issue. Incorrectly calculating the credit point total will be considered a Major Issue. 3 or more minor issues will be considered as Many Issues. DPIT128/UCIT128: Assignment 4 Marking GuideStudent Number: Additional Marking Criteria Marks All documents validate without issue(s) using the W3C HTML & CSS validators 1.0 All scripts function without issue(s) in Google Chrome Developer Tools 1.0 All code is neat and suitably indented (2 Spaces Only) 0.5 Documents contain explanatory commenting where appropriate 0.5 Task 1 Task 2 Task 3 Task 4 Task 5 Task 6 Additional Criteria Total Mark Rounded to nearest .25 increment |_| Late Submission: % Revised Mark (based on Total Mark above) Rounded up to nearest .25 increment Version 2.1 by Jason Rodriguez Assignment 4 (Specification) - DPIT128/UCIT128 Assignment 4 Specification - DPIT128/UCIT128 Introduction to Web Technology (Spring 2020) Assignment 4 (15%) due by Friday 4th of September 2020 at 11:59 PM Learning Outcomes · Ability to incorporate JavaScript code into CSS enhanced HTML documents · Experience using a variety of JavaScript features (i.e. arrays, objects, timers, randomisation, local storage etc) · Ability to utilise the various control structures available in JavaScript to perform decisions and repetitions Submission Instructions You will need to submit a total of 6 files using the “Assignment 4” 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 A4_TASK1.html 2 A4_TASK2.html 3 A4_TASK3.html 4 A4_TASK4.html 5 A4_TASK5.html 6 A4_TASK6.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 Weeks 10 & 11. 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 6 tasks in this assignment. Task 1: Create the HTML and CSS code needed to reproduce the following web application interface. Extend your code by including the JavaScript functionality listed in “Design Requirements”. You must use the same layout and inclusions as shown below. Design Requirements: · The heading text should be displayed within a h2 element. · All images must have their border specified within the same CSS ruleset (see “Design Resources”). · The above ruleset should also adjust the width of each img element to 110px. · A border radius effect with a shorthand value of 5px 15px must be applied to each image. · The text featured directly beneath the images should be displayed within a h3 element. · The input element that follows must have its alignment set by a ruleset with an ‘attribute’ selector. · The abovementioned ruleset should also adjust the width of the input element to 500px. · A placeholder attribute must be included where appropriate. · Double-clicking the first image should display a JavaScript prompt (see Figure 1). · The value entered into the prompt must then be displayed within a JavaScript alert (see Figure 2). · Moving the mouse over the second image should alter the text contained within the h3 element. · The altered text must match the output displayed within the “Final State” image (see Figure 3). · Scrolling the mouse wheel over the third image should display a text value inside the input element. · The text value must also match the output shown within the “Final State” image (see Figure 3). Design Resources: HTML5 Image https://mywebspace.net.au/UOWC128/assignment_4/images/html_5.png CSS3 Image https://mywebspace.net.au/UOWC128/assignment_4/images/css_3.png JS Image https://mywebspace.net.au/UOWC128/assignment_4/images/java_script.png Border Effect 1px dotted #808080 Element Style Parameters (h3) Element Style Parameters (input) Colour #009900 Colour #ff0000 Font Family courier Font Family arial Text Shadow 3px 3px 3px #a6a6a6 Font Style italic Please Note: · HTML tables must not be used to layout this application interface. · Save your completed file as “A4_TASK1.html”. · This will be the first of 6 separate files that you must submit for this assignment. This task is worth 2 marks. Task 2: Create the HTML and CSS code needed to reproduce this web application interface (see Figure 1). Extend your code by including the JavaScript functionality listed in “Design Requirements”. You must use the same layout and inclusions as shown within the interface imagery. Design Requirements: · The heading text should be displayed within a h2 element. · The image must have a width of 200px and a rounding effect set to 100px. · A matching CSS shadow effect should also be applied (see “Design Resources”). · The three CSS declarations mentioned above must be placed within the same ruleset. · A label element should be used with the text description for each radio button and checkbox. · The radio buttons must be grouped with the first/topmost selected by default. · The checkbox for “Reverse Direction” should be unchecked by default. · The following actions must occur when the “Start” button is clicked: 1. Any existing/active JavaScript timers should be stopped 2. A single JavaScript timer must be created and activated 3. All radio buttons should be disabled to prevent any changes while the timer is active · The timer must update the clock image using the interval specified by the selected radio button. · The clock images should be shown in the order listed below (see “Design Resources”). · The display order of these images must be reversed whenever the checkbox is checked. · The following actions should occur when the “Stop” button is clicked: 1. Any existing/active JavaScript timers must be stopped 2. All radio buttons should be enabled to allow the selection of a new interval · A “pointer” CSS cursor effect must be applied to all label elements and interface buttons. · Matching background colours should be applied where appropriate (see “Design Resources”). · A suitable border and arial font must also be included (see “Design Resources”). · An array should be used to store the various image paths within your JavaScript code. Design Resources: Shadow Effect 5px 5px 5px 5px #888888 Background 1 #f8f8f8 Background 2 #bfbfbf Border Effect 1px dotted #808080 Clock Image 1 https://mywebspace.net.au/UOWC128/assignment_4/images/clock_state_1.png Clock Image 2 https://mywebspace.net.au/UOWC128/assignment_4/images/clock_state_2.png Clock Image 3 https://mywebspace.net.au/UOWC128/assignment_4/images/clock_state_3.png Clock Image 4 https://mywebspace.net.au/UOWC128/assignment_4/images/clock_state_4.png Please Note: · Your solution must use more than one user-defined JavaScript function. · HTML tables should not be used to layout this application interface. · Save your completed file as “A4_TASK2.html”. · This will be the second of 6 separate files that you must submit for this assignment. This task is worth 2 marks. Task 3: Create the HTML and CSS code needed to reproduce this web application interface (see Figure 1). Extend your code by including the JavaScript functionality listed in “Design Requirements”. You must use the same layout and inclusions as shown within the interface imagery. Design Requirements: · The heading text should be displayed within a h2 element. · An image must be used to show the current state/status of the game (see “Design Resources”). · The three input elements featured directly beneath the image should: 1. Contain a width of 110px and height of 80px along with a font size of 50px 2. Show a matching border, colouration (see “Design Resources”), alignment and bold styling 3. Include a border radius of 25px and a margin of 20px 4. Be set to read only so that any displayed values cannot