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=