Your task is to develop the client-side interface for a "quiz" service running on turing.
This will be an interactive quiz, much like the one on Moodle.
Assignment 2 Overview
The Assignment has 4 major components:
1) Image animation
2) Form validation
3) User registration
4) Quiz service
You will be provided with the following HTML, CSS, JS, and image files:
assignment2
| a2.html
+---css
| reset.css
| style.css
| your_custom.css
+---img
| correct.png
| deer.jpg
| hedgehog.jpg
| incorrect.png
| leopard.jpg
+---js
| animate.js
| quiz.js
| validate.js
File Overview
- a2.html: Contains starter HTML code for the Assignment. Familiarize yourself with
the elements, IDs, and classes used in this file (see Figure 1) and adapt as required.
- reset.css: Browser CSS reset – you must include this as the first script in your load
order. Do not edit this file.
- style.css: Starter CSS for the current site layout. You may edit this file as required. - your_custom.css: Contains the class rules required for some of the Assignment
tasks. You can add custom CSS rules to this file, if you find you need them. Note this
CSS file should be loaded last, so it can be used to override existing rules.
- animate.js: All animation code should be put here.
- quiz.js: All quiz code should be put here.
- validate.js: All form validation and submission code should be put here.
Figure 1: A simplified view of the Assignment 2 DOM.
CSS Classes
There are 3 CSS classes that you with need to use to complete the assignment:
1) hidden: sets the display property to none
2) invisible: sets the visibility property to hidden
3) error: sets the background-color property to red
A) Animation using JavaScript / jQuery
You are required to implement a THREE animation effects in JavaScript (HINT: jQuery is very
good for this). You should display 3 image sliders positioned horizontally across the screen,
collapsing to vertical stacking for small screens. Each slider should display three (3) images
in turn (each image is displayed one at a time, with an animation effect between
transitions). The type of animation must be different for each slider, and at least one
animation must be a custom animation. The 3 images to display are deer.jpg, hedgehog.jpg,
and leopard.jpg:
+---img
| deer.jpg
| hedgehog.jpg
| leopard.jpg
B) Form Validation
You must validate the form data before sending it to the server. The HTML form has the id
registration. The server is insecure, and only checks that the required fields are not
empty. You must use JavaScript to validate the form data before it is sent via a POST
request to the server.
POST Parameter Description Validation requirements
name Name of the user • MUST not be empty
• MUST be between 2 and 100 characters long
• MUST only contain characters a-z (upper and lower
case), - (hyphen), or ' (apostrophe)
age Age in years • MUST not be empty
• MUST be an integer value between 13-130
email Email address • MUST not be empty
• MUST be validated using either:
o The provided Regular Expression (See last page)
o An appropriate regex found online (must be
credited with the URL at which you found it)
phone Phone number
(optional)
•
•
OPTIONAL: This field may be empty
MUST be exactly 10 characters long
COSC260 Web Programming Assignment 2
• MUST only contain digits (no letters or symbols)
• MUST start with '04'
If there is a problem with user input, an error message must be displayed for each problem.
All errors must be displayed in the #user_info HTML element (HINT: use the provided
classes to show and hide this element). The error class must also be applied to the error
messages.
C) User Registration
http://turing.une.edu.au/~jbisho23/assignment2/register.php
You will need to register your user by using the HTML form with the id registration. The
form must be validated as described in B). If the form passes validation, then it should be
sent on to the server using an AJAX request. All requests MUST be made using AJAX.
The registration service takes four (4) parameters as POST data which must be validated.
Three (3) are required (name, age, email), and one (1) is optional (phone). The table below
shows the responses, and errors, returned by the server. If there is an error, the body of the
response will contain a JSON object with an error attribute which holds a description of the
error, as described below: use this for debugging.
Parameters Response Example JSON response HTTP
Status
All POST parameters supplied New user ID {
"user_id":3887
}
200
No POST data Error
message
{
"error": "No POST data
received"
}
400
Invalid or missing POST data Error
message
{
"error": "Missing [x]
parameter"
}
400 Incorrect request type Error
message
{
"error": "Only POST
requests allowed"
}
405
The ID returned by the server (in the user_id attribute of the JSON object) must be
displayed in the
element with the id user_id. If there is a user_id in this element,
we can assume the user is now logged in (Note: refreshing the page will make the user have
to register again - this is fine for this assignment).
Once the user is ‘logged in’, the registration form should be hidden, and the quiz form
should be displayed: you must use CSS classes to achieve this.
D) AJAX Quiz Service
http://turing.une.edu.au/~jbisho23/assignment2/quiz.php
This is the main application you will be interfacing with when building your quiz. It can be
accessed either by GET or POST requests.
• When no request parameters are provided, this service provides a list of question
ID's which must then be used to request the individual question data.
• Providing only the q= parameter with a valid question ID will return a JSON object
containing data for that question (id, question text, and 4 answers).
• Providing both q= with a valid question ID, and a= with a choice selection [a,b,c,d]
will cause the service to check the question and provide a Boolean 'correct' field in
the resulting JSON.
quiz.php provides multiple-choice questions with available answers, one of which is correct,
and can check user-provided answers for correctness. When a request is made to this URL, a JSON object will be returned. If an error occurs or an
invalid request is received, an error attribute will be present in the JSON.
You're encouraged to experiment with manually using the service before writing AJAX calls.
Hint: "REST Easy" is a Firefox and Chrome plugin which can help with this
Depending on the input parameters, the service will return one of four (4) JSON structures:
Parameters Response Example HTTP
Status
None List of valid question
ID’s
{
"questions": [
12350,
78358
]
}
200 OK
Invalid Question
e.g.
q=222
Error message
{
"error": "Unknown Question"
}
400 Bad
Request
q=