html website

University of Westminster Department of Computer Science

Web Design and Development Assignment Specification (2020/21) Module leader Anne-Gaelle Colom & Wendy Purdy

Unit Group Coursework – Website Design and Development

Weighting: 50%

Qualifying mark 30%

Description Group Coursework

Learning Outcomes Covered in this Assignment:

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.

Handed Out: 17 February 2021

Due Date CWK Deadline: 23 March 2021 at 13:00 pm

In addition, you are required to give the university server URLs for your coursework tasks to your group members responsible for the main page and the diagram by 9 March. Note this could be a URL link to an empty page that will be developed at a later point.

Expected deliverables Please submit via Blackboard:  Individual Report;  the URLs to your individual tasks on the university server;  your individual web pages (plus CSS and JavaScript pages if

separate).

You will also be required to attend an online group demo with your module seminar tutor.

Method of Submission: Submitted via Blackboard.

 Your individual report submitted as a single PDF or Word document;

 URLs to your individual work on the university server in a text file;

 your individual web pages (HTML/CSS/JavaScript). Blackboard will require that you zip your html files into one folder to upload.

Type of Feedback and Due

Date:

Written feedback and marks 15 working days (3 weeks) after the submission deadline.

All marks will remain provisional until formally agreed by an Assessment Board.

Assessment regulations

Refer to section 4 of the “How you study” guide for undergraduate students for a clarification of how you are assessed, penalties and late submissions, what constitutes plagiarism etc.

Penalty for Late Submission

If you submit your coursework late but within 24 hours or one working day of the specified deadline, 10 marks will be deducted from the final mark, as a penalty for late submission, except for work which obtains a mark in the range 40 – 49%, in which case the mark will be capped at the pass mark (40%). If you submit your coursework more than 24 hours or more than one working day after the specified deadline you will be given a mark of zero for the work in question unless a claim of Mitigating Circumstances has been submitted and accepted as valid.

It is recognised that on occasion, illness or a personal crisis can mean that you fail to submit a piece of work on time. In such cases you must inform the Campus Office in writing on a mitigating circumstances form, giving the reason for your late or non-submission. You must provide relevant documentary evidence with the form. This information will be reported to the relevant Assessment Board that will decide whether the mark of zero shall stand. For more detailed information regarding University Assessment Regulations, please refer to the following website:http://www.westminster.ac.uk/study/current-students/resources/academic-regulations

Coursework Description Work in groups of 3 or 4 students (all group members should be from the same Web Design and Development computer seminar group). Prepare a Web site about a subject of your choice (please see at the bottom of the page for a list of possible subjects). Ensure that your site complies with the Janet regulations on publications of web pages.

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:

Name: John Email: [email protected] Subject: delivery Details: How much to send to the USA. 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.

4. (Student 1 - Buy products) Your site should contain a form to allow people to buy products related to the topic of your web site, i.e. if your topic is football, you could be selling football shirts, accessories, etc. This should include:

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.

o If the compulsory fields are filled-in, when the 'place order' button is clicked, the user should get be able to view a summary of their order on the page, which will look like an invoice. For example:

Name: John Smith Email: [email protected] Invoice Details -------------------------- Product: T-Shirts (Size M) Quantity: 2 Price: £20

Product: Trainers (Size 40) Quantity: 1 Price: £50

Total Bill: £90

5. (Student 4 – Diagram SVG) Your site should contain a sitemap. The sitemap should have navigation links to the appropriate part of the group website and should be developed in SVG.

6. (Student 3 - 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.

7. (Student 4 - Thumbnail images) 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.

8. (Student 3 - Student details) 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 (e.g. John Smith, Student 1).

9. Consistency of style should be ensured using

a. a unique external style sheet file main page and navigation(Student 2) b. used throughout the web site (all students)

10. (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. (E.g., here you should make a link the ‘page developer’ web page created for part 10.

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.

13. (All students) Feel free to use additional JavaScript to add interactivity and increase ease of navigation.

All pages should be validated with no errors. However, warnings are acceptable.

You should submit your web pages to your area on the university server and the pages should link together.

 It is your responsibility to give the URLs to your web pages on the university server to the group members responsible for the main page and the diagram by 9 March to enable them to complete their work. The URL could be link to an empty page that is will be developed at a later point.

Demonstration You will have to give a compulsory live online demo of your Web site in your computer seminar class (see schedule).

Report Each student should submit an individual report to Blackboard. YOU MUST USE THE REPORT TEMPLATE which can be found on Blackboard.

Important - Each student should only complete the tasks allocated for one student (i.e., either student 1, student 2, student 3 or student 4). You will not receive marks for completing tasks allocated to another student. The workload for each group must be as follows:

Task Student 1 Student 2 Student 3 Student 4

1 - Presentation Page *

2 - Main Page *

3 - Query Form *

4 - Buy products *

5 - Diagram (SVG) *

6 - Quiz *

7 - Thumbnail images *

8 - Student details *

9a - External CSS (created) *

9b - External CSS (9a reused) * * * *

10 - Page Editor * * * *

11 - Logo/Page Editor * * * *

12 - Anchors * * * *

13 - Additional Interactivity * * * *

Pages validated with no errors * * * *

Uploaded to University Server * * * *

Demo during seminar * * * *

Subtotal (53 marks)

Report (27 marks) * * * *

Tutorial Tests (20 marks) * * * *

Possible subjects include:

 Sports  Music  Tourism  Art  Entertainment  Education  Science

Individual Statement

Student Name: Student Id: 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.

Additional general or project specific comments:

Student Signature: Date: