Web Development Coursework

Part A - Web Site

The coursework rationale is:

LO1 Utilise a text editor to create several linked HTML documents, following certain style guidelines and satisfying a simple specification;

LO2 Identify and apply how to separate the structure, behaviour and presentation of web documents;

LO3 Incorporate and develop JavaScript to create interactive documents;

LO4 Work in a group, with each individual having a distinct role and tasks, to produce a common Web site

Coursework Description

Part A

This Web site should include:

1. (Student 1 - Presentation Page) A presentation page with title and the name of everyone in the group. After 4 seconds, a second page will be displayed (Main Web page).
2. (Student 2 - Main Page) Your Main page should be designed so that the user can access several parts of the site. The links on your main page should look like buttons and have a hover effect. This should be created using CSS.
3. (Student 2 - Query Form) Your site should contain a form to send a query related to your web site content (for example, if it is possible to send products abroad, costs for P&P for the USA, allergens etc.) The form should be set up to email the contents of the form to yourselves, but this will take 2 steps, see details below. This form should include:

o input fields for users to enter their details (name, email address)

o a textarea to enter their query detail

o a way to select the theme of the query (using radio buttons or select). There must be a minimum of 3 subjects to choose from.

o a ‘view query’ button. When this button is clicked, check, using JavaScript, that the user has filled-in the compulsory fields - 'name', 'email address', 'query subject' and 'query details'. Do NOT use HTML5 validation for this part. If some fields are missing, use a popup message (alert) to let the user know which fields are missing.

o If all the required fields are filled in, the name, email address, query subject, and the query detail from the form should be displayed on the page (using innerHTML) in a summary that will include all these details (the name, email address, query subject and the query details).

o For example, if the user entered "John" for their name, [email protected] for their email address, and the subject of the query was ‘delivery’ and they entered ‘How

much to send to the USA’ as the text of their query detail, when they press the check button, the form disappears and the display on the page should say something like:

With two new buttons: Edit and Send.

o When the user presses edit, the displayed details disappear and this is replaced with the initial form which reappears with the information filled in. If they press send, the displayed details disappear also and the form is sent by email.

o personal details;

o at least 3 different products to choose from;

o quantity of items for each product;

o automatically provide the total price of the bill as products are selected by the user (using an event listener such as change on the quantity and product value).

o Use JavaScript validation to check that the user has filled-in the following compulsory fields - personal details, product and number of items. Do NOT use HTML5 validation for this part. If some fields are missing, use a popup message (alert) to let the user know which fields are missing.

Part B - Multiple-Choice Quiz

Your site should contain an interactive multiple-choice quiz about the subject you are developing on your Web site. Radio buttons should be used for the quiz responses and should make use of the function getRadioValue() shown in the lecture notes. Once the quiz has been completed, it gives the user a mark on how he/she performed. This should be time limited for one minute. When the quiz is finished (or time is up) the results should also display the summary of the user performance (which answers were correct or incorrect, and how long it took to complete the quiz). The user will get 2 marks for each correct answer, and -1 for each wrong answer. The quiz should consist of 10 questions. The background colour of the page should change according to the awarded mark.

Create a page that allows the user to view images. This page contains 5 thumbnail images, and 2 pull-down menus (to select the page background colour and the page text colour) and an area to display a larger image and associated description of that image. When the user selects a thumbnail image, the corresponding large image and the description of that image should display in the defined location on the form. You must use either the mouseover event listener or radio buttons with the getRadioValue() function shown in class to select the thumbnail.

One page should contain four pictures of the members of the group. When the user moves the mouse over one picture, the details of that member  should be displayed in an area on the page (for example, you could use a div below the pictures). The details should include the name and role that that student took for the coursework.

Consistency of style should be ensured using

o a unique external style sheet file main page and navigation(Student 2)

o used throughout the web site (all students)

For each page that an individual group member produces there should be a link to a short ‘Page Editor’ web page containing your name, role and a list of the tasks completed. This page is external to the group website and therefore on this occasion does not need to follow the design of the main website.

11. (All students) Each page should include your title logo at the top, and a link to the page editor (the person who wrote the page) at the bottom of the page.
12. (All students) Ensure one page is long enough to use anchors within the page. Any page longer than the screen size should have links to various parts of the text at the top of the page.

State what tasks you carried out in the project.

State what you enjoyed and did not enjoy about teamwork.

State what you learnt about teamwork.

State what skills you gained/learnt from undertaking the project.

State any strengths about yourself that emerged whilst undertaking the project.

State any weaknesses about yourself that emerged whilst undertaking the project.

State how you would do things better if you were to undertake the project again.