Reference no: EM132650016

CSC2406 Web Technology Assignment - University of Southern Queensland, Australia

Introduction - The Australian Census questionnaire asks questions about each Australian household and the individuals residing in the household on a specific night of the year.

The Australian Bureau of Statistics (ABS) is wanting to shift the Australian Census questionnaire completely on line - discarding all paper copies. To test if it is feasible and whether it is preferred to paper forms the ABS would like a small example Census form. You are to design and implement the example census form.

The questionnaire is in three parts:

The first part of a census form consists of questions for each person spending the census night in the dwelling

The second part of a census form consists of questions about the dwelling the people are spending census night in.

The additional third part is to get feedback on the experience of filling out the census form online.

Assignment Tasks - The census questionnaire must consist of one (1) form only.

The entire assignment should consist one

(1) HTML/XHTML page, plus the linked JavaScript, CSS, Image, Font, etc files. The census questionnaire must not be displayed fully, but be broken into a minimum of three sections, only one section at a time being displayed. Each person's section should be displayed as a separate page.

JavaScript is to be used to progressively display parts of the form as the user fills out the questionnaire.

Progress through the sections of the form must be displayed to the user. Parts of the form must be dynamic depending on the answer from the user. For example, the page of questions for each person, the correct number of these pages must be dynamically inserted based on the number of people in the dwelling. (Not just a large number uncovered, but the correct number dynamically inserted into the DOM).

The HTML5 template element can be used. Questions that have a Yes/No response, where depending on the response, there may be follow-up questions (See electric vehicle question above) these questions can be uncovered rather than inserted into the DOM (as the number of questions is already known)

Each section must be validated before progressing to the next section. This will require JavaScript to validate the form, not HTML5. (Note: Ideally each input element should be validated as the user progresses to the next element but that would require far more coding than validating each section-too much work for this assignment.)

If a question in the section does not validate, that question must be flagged for the user to correct before proceeding. The JavaScript alert() function is not to be used to convey any information to the user.

All feedback must be an integral part of the page and be dynamically displayed as required.

The questionnaire must be usable on small and large viewports. The input elements must be usable on mobile devices. Each section should have a help option that pops up help information for that section - information to guide the user in filling out the form. The popup must be an element on the page that is toggled between display:none; and display:block; The help information must be properly formatted HTML/XHTML and styled - not just text.

The minimum input element types to be used in the form are: text, tel, email, checkbox, radio, date, button, submit. Also the elements select, textarea, and datalist. This is the minimum list, others should also be used for good design. The DOM must be manipulated directly using either, JavaScript, jQuery, or a combination of both. If jQuery is used it must be jquery-3.5.1.min.js which can be downloaded from the course Web site. No other jQuery extension library or framework is to be used.

When the form's submit button is pressed the sent data will be re flected back in a well formatted XHTML page. This can be used to check the sent data.

All HTML, CSS, JavaScript must be your own work. Images may be downloaded from the Internet as long as suitable attribution is incorporated unobtrusively into the page (see Assignment 1).

The page must be properly formatted using CSS so that it looks like a page that belongs to a valid site. Feel free to re-use ideas and code from Assignment 1.

You're expected to treat HTML, CSS, and JavaScript as you would for any programming language. As such, pay attention to your coding style, e.g., your code should:

Be simple and elegant,

Be documented, e.g., comments at top of each document and on major sections, Use meaningful names (class names, variable and function names.)

Have an appropriate code layout, e.g., consistent indentation and use of white space in all source files, strive for modularity, for reuse and visibility.

Attachment:- Web Technology Assignment File.rar