Assignment 4 (Specification) - DPIT128/UCIT128 Assignment 4 Specification - DPIT128/UCIT128 Introduction to Web Technology (Autumn 2021) Assignment 4 (15%) due by Friday 7th of May 2021 at 11:55 PM...

HTML css and JavaScript


Assignment 4 (Specification) - DPIT128/UCIT128 Assignment 4 Specification - DPIT128/UCIT128 Introduction to Web Technology (Autumn 2021) Assignment 4 (15%) due by Friday 7th of May 2021 at 11:55 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 be altered by the user · A label element must be used with the text description for the “Enter a number…” field. · An arial-16px font along with a line height of 23px should be applied to the abovementioned label. · The user’s input must be collected within an input element that: 1. Contains a width of 150px 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 5px, a margin of 10px and an autofocus attribute · A button labelled “Start” must be included and styled as follows: 1. Contains a width of 100px and a padding of 10px 2. Shows a matching border and colouration (see “Design Resources”) 3. Includes a border radius of 5px · The following actions must occur when the “Start” button is clicked: 1. The user’s input is validated If the input is valid: 2. Three unique random numbers between 1 and 10 (inclusive) are generated 3. Each number is displayed within one of the three input elements (1 number per element) 4. A check is performed to see if the user’s input matches any of the unique random numbers 5. The image is altered to indicate the result (see Figure 2 and Figure 3; see “Design Resources”) 6. An audio file is played if a match is found (see “Design Resources”) If the input is invalid: 2. The image is altered to indicate the result (see Figure 4; see “Design Resources”) 3. No subsequent actions are taken · A “pointer” CSS cursor effect must be applied to all label elements and interface buttons. Design Resources: Initial Image https://mywebspace.net.au/UOWC128/assignment_4/images/initial_state.png Win Image https://mywebspace.net.au/UOWC128/assignment_4/images/win_state.png Loss Image https://mywebspace.net.au/UOWC128/assignment_4/images/loss_state.png Error Image https://mywebspace.net.au/UOWC128/assignment_4/images/error_state.png Audio File https://mywebspace.net.au/UOWC128/assignment_4/audio/applause.mp3 input Element For Random Values For User Input Border Effect 1px dotted #ffa500 1px dotted #0080ff Background Colour #fff9ef #ecf2f4 Foreground Colour #ffa500 #0080ff Border Effect (button) 1px dotted #008000 Background Colour (button) #ecf4f2 Foreground Colour (button) #008000 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_TASK3.html”. · This will be the third of 6 separate files that you must submit for this assignment. This task is worth 2 marks. Task 4: 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. · The container for the select and input elements must: 1. Show a matching border and background colour (see “Design Resources”) 2. Contain a border radius effect with a shorthand value of 40px 10px 3. Apply an arial-14px font displayed with a left alignment 4. Be set to a width of 360px and contain a matching shadow effect (see “Design Resources”) 5. Include padding to reflect the proportions shown in the above illustration · The select element within the container should: 1. List the six specified colour names (see Figure 1) and their corresponding hexadecimal values 2. Utilise option groups to categorise “Pastel” colours and “Primary” colours 3. Be set to a width of 150px and inherit both the font family and font size of its parent element · The input elements within the container must: 1. Contain the correct type attribute values to match the above illustration 2. Be grouped where appropriate to ensure proper functionality · Default values should be specified for all select and input elements (see “Design Resources”). · A label element must be used for each text description included within the container. · The “Introduction to Web Technology” text should: 1.