Aims
The aim of this assignment is to introduce you to some of the practical skills required to create functional, standards-compliant web pages using XHTML, CSS and JavaScript.
Objectives
To gain experience developing a website.
To use XHTML and CSS to structure and format a web page which adheres to a (provided) specification.
To use JavaScript to validate data supplied in a web form and process the input prior to submitting it to a remote server.
Getting started
This assignment is in two parts, read through all of the specification carefully before starting.
Download the following files from the resource collection (Blackboard) for these tasks:
braille-XHTML.html braille-XHTML.png braille-CSS.png braille-QUIZ.html
CSC8004: Web Technologies
CSC8004: Web Technologies Assignment
© Newcastle University and JISC Netskills 2018 1
CSC8004: Web Technologies
Part 1: Using CSS
Instructions
Add valid CSS to braille-XHTML.html in order to present the document as shown in the resource file:
braille-CSS.png
Save your finished document and submit it to NESS as:
braille-CSS.html
All your CSS must be contained inside a single external file, linked to braille- CSS.html and called:
braille-CSS.css
Comments should be included in your style sheet to explain the basic functionality of each rule and (if you found inspiration elsewhere) the source of your CSS code.
Hints
Redundant or extraneous mark-up will cost you marks. Think “lean and clean”. If you find yourself asking, “have I put too many tags in here?”… then you probably have 😉
You will need to add some additional XHTML to bsl-XHTML.html in order to provide framework for your CSS. You should just need
The final page layout and functionality should appear and behave identically in recent versions of Firefox, Google Chrome and Internet Explorer. Your page will be tested in all three on a Windows platform. For the purposes of this exercise, other browser types do not have to be explicitly catered for. Media content of your page does not need to show on Internet Explorer, since the browser recently stopped to support Flash.
The screen shot bsl-CSS.png is taken from a browser window set at approximately 1900 pixels wide. You can make measurements off it if you wish, however this may not help you much beyond relative proportions for margins, borders etc. You will find some other sizing clues in the assets collection. You do not have to pixel perfect to pass.
2 © Newcastle University and JISC Netskills 2018
Validation is a simple yes/no check and you will know when you submit your work whether it will pass or fail. It is not a trick question… everything in this document can be presented as XHTML 1.0 Strict/CSS2.1 if you take the time to find out how.
Assets & Resources
Additional image assets, which may be useful for Part 1, can be found at:
https://internal.cs.ncl.ac.uk/modules/2018-19/csc8004/braille/
Marking Criteria
Core features
The main (white) content block should be centred in the browser window and flexible between widths of 510 and 960 pixels. It should not expand/shrink beyond those limits.
Use CSS to provide the layout for each of the main content sections. Pay particular attention to the use of background images, floats and CSS positioning. Make sure you correctly display the all images and media shown in braille- CSS.png as well as the whitespace around them. Again, use absolute URLs for the images you include.
The sign grids (letters and numbers) should dynamically adjust to fill the width available to them within the flexible content limits i.e.
CSC8004: Web Technologies
Narrow and wide page sign display
Colours and typography
6 marks
You should be resourceful enough to find out the correct hexadecimal codes for the colours used in the final version. Do so… and use them correctly.
© Newcastle University and JISC Netskills 2018 3
CSC8004: Web Technologies
The core typeface in use is Palatino Linotype, with Lucida Sans Unicode for the headings. A little research should enable you to build simple font stacks to implement them correctly using CSS.
2 marks
Navigation bar
The navigation menu should be presented, as shown in braille-CSS.png, using CSS only. You must use CSS to move the navigation bar – you cannot re-order the XHTML (see below). In addition, you should change the background colour of the menu items when the user moves the move over them e.g.
Colour change occurs when user moves over the Classification menu item
3 marks
Underlying framework
If the CSS is removed from braille-CSS.html, the underlying page must still look identical to the reference example shown in the resource file braille-XHTML.png
This means you must not re-order the supplied content.
Validation
2 marks
Your finished style-sheet braille-CSS.css must validate with no errors or warnings when checked against CSS level 2.1 or level 3 at:
http://jigsaw.w3.org/css-validator/
Your finished document braille-CSS.html must contain a suitable, full DTD and validate automatically as either XHTML1.0 Strict or HTML5 when checked by file upload at:
http://validator.w3.org
Total available for Part 1: 17 marks
4 marks
4 © Newcastle University and JISC Netskills 2018
CSC8004: Web Technologies
Part 2: Client-side Scripting
Instructions
This part uses the following file from the resource area for these tasks: braille-QUIZ.html
This is a basic XHTML form which presents a short quiz about Braille. View this file in a text editor and note that it links to a single external JavaScript source file called:
validate-QUIZ.js
At the moment that file doesn’t exist – your primary task is to create it, according to the criteria given below.
You will not be able to edit braille-QUIZ.html in any way – all you will be submitting is your new JavaScript source file.
Also notice that braille-QUIZ.html also links to a CSS style sheet called: braille-QUIZ.css
This is a CSS style sheet that you can create as a secondary objective for this assignment. See the specification for details.
Hints
All the functionality provided by your JavaScript must be triggered by the function called validate()
The final return value from validate() will determine whether the form submits to the PHP script or not. The event handler and call to this function is already in braille-QUIZ.html
The action for the form is set to automatically submit to a PHP script which simply returns the values to the screen so you can check they arrived safely. Make sure that the input from the form and the score show up on that page
The CSS you use in Part 2 does not need to fully replicate that of from Part 1! For a start you cannot make any changes to the XHTML, so you will have to use what you have learned about CSS selectors to apply your style rules. The goal is to make the quiz look consistent with the main bsl information page – not identical. At the very least the colours and fonts should be pretty easy…
© Newcastle University and JISC Netskills 2018 5
CSC8004: Web Technologies
Marking Criteria
Input checking
Your JavaScript should check all four questions and ensure that the user provides
a name and has selected at least one response for each before continuing:
If any questions have not been answered, display an alert to the user telling
them which question(s) they still need to complete.
The incomplete question(s) for this attempt should be highlighted in yellow in the page
Include functionality to ensure the user only selected 2 options for question 2
The form should not submit to the server (in order to allow the user to return
and complete it)
The user should not be alerted about their score at this point
Answer scoring
6 marks
When all the questions have been attempted, your JavaScript should also mark the quiz as follows:
Award 1 point for each correct answer (so there will be a max of 5)
Accept only the correct spelling for question 4, but allow for the fact that the
user could type it in any case (upper lower or mixed).
Display an alert to the user telling them how many they scored (out of the maximum of 5) and that their answers and score will be sent to the server.
Make sure you know the correct answers!
Submit score
5 marks
Finally when all the validation is complete and passed, your JavaScript should allow the browser to submit the form results and score to the PHP script on the server.
3 marks
Errors
Your final JavaScript should run error free in recent versions of Firefox, Google Chrome and Internet Explorer (8+).
6 © Newcastle University and JISC Netskills 2018
Style
Create braille-QUIZ.css and add rules to give the quiz a look and feel which is consistent with braille-CSS.html. There’s not many marks available for this, so don’t spend too much time on it!
Total available for Part 2: 18 marks
© Newcastle University and JISC Netskills 2018 7
CSC8004: Web Technologies
2 marks
2 marks
CSC8004: Web Technologies
Submission
You will need to submit all the file(s) for this assignment to NESS as follows:
File
Description
braille-CSS.html Your edited version of braille-XHTML.html, containing all the style and structural
information for the final presentation, as per the specification provided.
braille-CSS.css The single external CSS style sheet document containing the formatting rules which apply to
braille-CSS.html
validate-QUIZ.js Your JavaScript code which, when linked to a reference copy of braille-QUIZ.html will provide
the client-side as specified in the assignment.
braille-QUIZ.css
The single external CSS style sheet document containing the formatting rules which apply to braille-QUIZ.html
Your JavaScript and CSS files must include comments explaining each step as you understand them. You must also include the source (e.g. URL) of any external script snippets you have found to help you.
The due date for this assignment is 16:00 on Friday 10th May 2019
Remember your submission is timed when it finishes not when it starts, so allow time before the deadline to submit your files.
Marks Returned
You will get a mark out of 35 for this assignment, which breaks down as follows: Total available for Part 1: 17 marks
Total available for Part 2: 18 marks
Total: 35 marks
Percentage of total module mark: 35%
8
University and JISC Netskills 2018
© Newcastle