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
Majo
Many Issues
Minor Issue(s)
Majo
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.
Inco
ectly 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
Majo
Many Issues
Minor Issue(s)
Majo
Many Issues
Minor Issue(s)
2.0
0.25
0.5
1.0 ~ 1.25
1.5 ~ 1.75
Inco
ectly implementing any input elements (including radio buttons) will be considered a Major Issue.
Inco
ectly 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 Guide Student Number:
Task 3
No Attempt
Not Functioning/Not Rendering
Functioning/Rendering
No Problems
0
Majo
Many Issues
Minor Issue(s)
Majo
Many Issues
Minor Issue(s)
2.0
0.25
0.5
1.0 ~ 1.25
1.5 ~ 1.75
Inco
ectly 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
Majo
Many Issues
Minor Issue(s)
Majo
Many Issues
Minor Issue(s)
2.0
0.25
0.5
1.0 ~ 1.25
1.5 ~ 1.75
Inco
ectly implementing any input elements (including radio buttons) will be considered a Major Issue.
1 or more problems with the storage
etrieval 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 Guide Student Number:
Task 5
No Attempt
Not Functioning/Not Rendering
Functioning/Rendering
No Problems
0
Majo
Many Issues
Minor Issue(s)
Majo
Many Issues
Minor Issue(s)
2.0
0.25
0.5
1.0 ~ 1.25
1.5 ~ 1.75
Inco
ectly implementing any input elements will be considered a Major Issue.
1 or more problems with validation will be considered a Major Issue.
Inco
ectly 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
Majo
Many Issues
Minor Issue(s)
Majo
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 a
ay will be considered a Major Issue.
Inco
ectly creating or appending DOM nodes will be considered a Major Issue.
Inco
ectly 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 Guide Student 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. a
ays, 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
owser. Please test your work with this
owser 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)
Colou
#009900
Colou
#ff0000
Font Family
courie
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 a
ay 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 cu
ent 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