1. your web site. This form should include:

1. (Student 1) 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) 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 1) Use JavaScript to create the functionality to increase / decrease the font size
used on the website. The basic functionality should include two buttons – a button to make
the font size smaller and a button to make the font size larger (half allocated marks).
Advanced functionality will allow for the font size to increase in steps up and down (full
allocated marks).
4. (Student 2) Your site should contain a form to send comments about your web site. This
form should include:
o input fields for users to enter their details (name, email address)
o a field to enter comments
o a way to rate your web site (using radio buttons or select)
o Use JavaScript validation to check that the user has filled-in the compulsory fields –
‘name’ and ‘rating’. Do NOT use HTML5 validation for this part.
o If the name and ratings are filled-in, the user should get an HTML popup window
with the summary including the name, any comments and rating given on the
For example, if the user entered “John” for their name, rated the site as “good” and
entered “Very informative website”, the popup window should say something like:
“Dear John, Thank you very much for your feedback. You have rated our site
as Good and your comment was Very informative website.”
5. (Student 1) 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 number of items for each product
o automatically provide the total price of the bill.
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.
o If the compulsory fields are filled-in, when the ‘place order’ button is clicked, the
user should get a popup window with the summary of the order. For example, the
text in the popup window could be something like: “Dear John, you have ordered 2
T-shirts size M at a cost of £20 each and a pair of trainers at a cost of £50. Your
total bill is £90.”
6. (Student 4) Your site should contain a sitemap. The sitemap should have navigation links to
the appropriate part of the group website. Additionally, in your individual report you
should include a diagram of the information architecture of the group website and discuss
the structure used.
7. (Student 3) Your site should contain an interactive multiple choice quiz about the subject
you are developing on your Web site. Once the quiz has been completed, it gives the user a
mark on how he/she performed. This should be time limited. When the quiz is finished
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.
8. (Student 4) Create a page that allows the user to view images. This page contains a form, 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 may use
onMouseOver or radio buttons to select the thumbnail.
9. (Student 3) Your main 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).
10. 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)
11. (All students) Your site should contain a link to a CV for each member of your group.
o This should be a complete CV (written in html) similar to one you would present to
a potential employer. Your CV should have your picture at the top right hand-side
corner. This page is external to the group website and therefore on this occasion
does not need to follow the design of the main website.
12. (All students) 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) 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 could
make a link to the CV of the person who created that page).
14. (All students) Feel free to use additional JavaScript to add interactivity and increase ease of
Part B
User Experience – Details To be confirmed.
You will have to give a compulsory live demo of your Web site in your tutorial class (see schedule).
Each student should submit an individual report to Blackboard by 11.59PM ON 20 March 2018.
Show your group name on your report. The report should include:
• Main body of report
o Workload – How the workload was shared (group member responsible for student
1, student 2, student 3 and student 4 tasks).
o Discussion – Code that you have developed should be documented in your report to
explain the approach that was taken, difficulties encountered and how these were
solved. Include information on how the site was developed. Each decision you had
to make (e.g. subject, style, architecture, and any other relevant information)
should be documented.
o Screen shots – only include screen shots for the web pages you developed for your
part of the coursework.
o Include how the pages that you have developed comply with the Janet regulations
of publishing pages on the Web.
o User Experience – Details To be confirmed.
• Appendices
o Code – A copy of your code. Only include code for the HTML, CSS and JavaScript
content that you developed for your part of the coursework. Ensure that these are
readable (no screen shots of your code please). The code that you have developed
should be commented (using inline HTML, CSS or JavaScript comments). Code that
you have used or adapted from external sources should be referenced as
o Your completed individual statement.
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 comp


I'm William!

Would you like to get a custom essay? How about receiving a customized one?

Check it out