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...

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. Be declared as a h1 element with a width of 525px and a height of 50px
2. Contain a border radius effect with a shorthand value of 10px 40px
3. Apply a calibri font along with a matching horizontal and vertical text alignment
4. Include padding to reflect the proportions shown in the above illustration
5. Display styling that matches the values set in each select and input element
· The following actions must occur when the HTML document is loaded:
1. All values recorded in localStorage are retrieved
2. All elements within the container are set to the retrieved values
3. All retrieved values are applied to the “Introduction to Web Technology” text
Note: Apply the default for any style value that is not available from local storage
· The following actions should occur when any select or input values are changed:
1. The updated values are recorded in localStorage
2. The updated values are applied to the “Introduction to Web Technology” text (see Figure 2)
Design Resources:
Border Effect (container)
1px dotted #a8a8a8
Background Colour (container)
#f8f8f8
Shadow Effect (container)
5px 5px 5px #808080
Default Styling Values
Background Colour
#ffe5e5
Box Shadow Depth 1
0
Foreground Colour
#000000
Border Style Value
dotted
1 The “Box Shadow Depth” range should allow a minimum value of 0 and a maximum value of 7.
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_TASK4.html”.
· This will be the fourth of 6 separate files that you must submit for this assignment.
This task is worth 2 marks.
Task 5: 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 sub-heading text must be displayed within a h3 element.
· The containers for each label and non-button input element should:
1. Be declared as div elements with a CSS display value of inline-block
2. Show a matching border and background colour (see “Design Resources”)
3. Contain a margin and padding value set to 10px
· The label element within each container must:
1. Be displayed with a bold 22px courier font styling
2. Show a matching foreground colour (see “Design Resources”)
3. Include suitable padding to reflect the proportions shown in the above illustration
· The input element within each container should:
1. Be declared as a type="text" variant with a height and width of 75px
2. Contain an arial-40px font and bold styling
3. Show a matching border, colouration (see “Design Resources”) and alignment
4. Contain a maxlength attribute to limit user input to a maximum of two (2) characters
· An autofocus attribute must also be used to pass focus to the first input element.
· 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 background colour (see “Design Resources”)
· The following actions must occur when the “Start” button is clicked:
1. The user’s input is validated
If the input is valid (see Figure 1):
2. The user’s input is inserted into an array and sorted appropriately
3. A “Quantitative Summary” is generated and displayed within a predefined div element
If the input is invalid (see Figure 2):
2. Appropriate feedback is presented to the user within a predefined div element
3. No subsequent actions are taken
· The “Quantitative Summary” heading should be contained within a h3 element.
· The associated table must show a matching border and colouration (see “Design Resources”).
· The first column of the “Quantitative Summary” table should be composed of th elements.
· All average and median values must be rounded to two (2) decimal places.
· A “pointer” CSS cursor effect must be applied to all label elements and interface buttons.
Design Resources:
Border Effect (container)
1px dotted #a8a8a8
Background Colour (container)
#dbdbdb
Foreground Colour (label)
#76797a
Border Effect (input)
1px dotted #468499
Background Colour (input)
#ecf2f4
Foreground Colour (input)
#2f3030
Background Colour (button)
#ecf2f4
“Quantitative Summary” Table
Border Effect
1px dotted #468499
Foreground Colour (th)
#525455
Background Colour (th)
#ecf2f4
Foreground Colour (td)
#2f3030
Please Note:
· You should use the same “Error Image” provided in Task 3 to present validation feedback to the user.
· Save your completed file as “A4_TASK5.html”.
· This will be the fifth of 6 separate files that you must submit for this assignment.
This task is worth 2 marks.
Task 6: 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 sub-heading text must be displayed within a h3 element.
· 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 background colour and CSS cursor effect (see “Design Resources”)
· The following actions must occur when the “Start” button is clicked:
1. A total of six (6) JavaScript objects should be created and stored within an array
- The first object must contain the headings for each table column (see Figure 2)
- The remaining objects should contain the table records (one record per object)
2. The entire ‘Subject’ table (see Figure 2) must be recreated using JavaScript DOM Nodes
3. A suitable variable must be used to sum the credit points for each subject
4. The completed table should be appended to a predefined div element
5. The credit point total should then be appended to the same predefined div element
· The div element should be styled with a calibri-18px font.
· The ‘Subject’ table must use th and td elements where appropriate.
· The table should show a matching border, alignment and background colour (see “Design Resources”).
· :nth-child()must be used to shade even and odd table rows (see “Design Resources”).
· The credit point total should be displayed within a h4 element.
Design Resources:
Background Colour (button)
#ecf2f4
Cursor Effect (button)
pointer
‘Subject’ Table
Border Effect
1px solid #91adb7
:nth-child(even)
#f5f8f9
Background Colour (th)
#abc7d1
:nth-child(odd)
#e3ecef
Please Note:
· Save your completed file as “A4_TASK6.html”.
· This will complete the set of 6 separate files that you must submit for this assignment.
This task is worth 2 marks.
The following applies to all relevant components of your submission:
Additional Marking Criteria
Available Marks
All documents validate without issue(s) using the W3C validation services
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
- THIS IS THE END OF THE ASSIGNMENT -
Version 2.3 by Jason Rodriguez
-
May 16, 2021

Submit New Assignment

Copy and Paste Your Assignment Here