Learning intentions
- Apply WDD knowledge to SQA-style questions across the full unit
- Practise answering questions at the correct level of detail for the marks available
- Identify which WDD topics need more revision
Success criteria
- Complete all 10 practice questions under timed conditions
- Check model answers and identify gaps in knowledge
- Know which WDD topics need more revision before the exam
Read each question carefully. Note the marks in brackets — give one point per mark. For code questions, write real, runnable HTML, CSS, or JavaScript. For evaluation questions, always give a judgement (meets / does not meet) plus evidence from the described site. For file format questions, name the format AND explain why it is suitable (lossy vs lossless, file size effect).
WDD topics checklist
Use this to identify which topics to revise. Tick off any you feel confident in.
- Correct syntax is required — partial marks may be awarded for correct intent with minor errors
- You must use real HTML elements, not just keywords — writing "use an anchor tag" is not enough; write
<a href="page.html">Link</a> - CSS values must be syntactically correct —
color: blueis correct;color = blueis not - For JavaScript, property names must be camelCase and values must be in quotes
- Path questions: include the complete relative path —
../images/logo.png, not justlogo.png
All 10 questions are self-marked. Attempt each question before revealing the model answer. Time yourself — aim for approximately 10 minutes per question.
Q1. A website is being designed for a local charity that delivers meals to elderly people. State two functional requirements of the website. 2 marks
Topic: WDD1 — Analysis and site structure
— A page listing the services the charity provides
— Contact details or a contact form so users can get in touch
— Information about how to volunteer or donate
— The charity's location and address
— Links to partner organisations or resources
— Opening times or delivery schedules
Functional requirements must be specific, testable features of the site. Vague statements like "it should be easy to use" are not functional requirements — that is a usability consideration.
Q2. Describe two conventions used when creating a wireframe for a webpage. 2 marks
Topic: WDD2 — Wireframes and prototyping
— Images are represented by a box with a diagonal cross (X-box) rather than the actual image
— Text content is shown as horizontal lines rather than real words
— Sections are labelled (e.g. "Header", "Nav", "Main content", "Footer") to show their purpose
— No real colours are used — wireframes are black, white, and grey (low-fidelity)
— The layout is consistent across multiple pages to show the overall site structure
Wireframes show layout and structure, not final visual design. Colour, font choices, and real content come later in the design process.
Q3. A website includes a high-quality photograph of a forest. Explain why JPEG would be a more suitable format than PNG for this image. 2 marks
Topic: WDD3 — File formats and compression
Photographs contain many colours and gradients where the compression-related quality loss is not noticeable to the human eye — so the file size benefit outweighs the minor quality reduction (1 mark).
PNG uses lossless compression (no quality loss) but produces larger file sizes. PNG is better suited to images with sharp edges, text, or transparency — such as logos — not photographs.
Q4. A webpage contains the following HTML. Identify two errors. 2 marks
Topic: WDD4 — HTML: semantic elements and structure
<body> <h1>Welcome</p> <img src="logo.png"> </Body>
</p> is used as the closing tag for the heading. The correct closing tag is </h1> — the closing tag must match the opening tag (1 mark).Error 2:
</Body> uses a capital B. HTML tags must be lowercase — the correct closing tag is </body> (1 mark).Also accept as a valid second error: the
<img> element has no alt attribute — all images should have alt text for accessibility.
Q5. A website has the folder structure shown below. The file pages/about.html contains a link to index.html and displays an image from images/logo.png. Write the correct relative path for each. 3 marks
Topic: WDD5 — HTML: links, media and addressing
root/
index.html
pages/
about.html
images/
logo.png
index.html from pages/about.html:../index.html (1 mark)Relative path to
logo.png from pages/about.html:../images/logo.png (1 mark for ../ + 1 mark for images/logo.png)Explanation:
../ means "go up one folder level." Since about.html is inside the pages/ folder, we must go up one level to reach root/, then navigate to index.html or into images/.
Q6. Describe the four layers of the CSS box model, starting from the innermost layer. 3 marks
Topic: WDD6 — CSS: selectors, properties, box model
1. Content — the actual content of the element: text, images, or other elements (1 mark)
2. Padding — transparent space between the content and the border; increases the clickable/visible area without adding a visible boundary
3. Border — a visible line that surrounds the padding and content; can be styled with colour, width, and style (1 mark)
4. Margin — transparent space outside the border; creates space between the element and its neighbours (1 mark)
Any 3 correctly named and described layers = 3 marks. All 4 correct for maximum marks.
Q7. A <p> element is affected by three CSS rules: an element rule sets color: blue; a class rule sets color: red; and the element has an inline style color: green. State which colour is displayed and explain why. 2 marks
Topic: WDD8 — CSS: external stylesheets and cascade
Inline styles have the highest specificity in CSS and override both element rules and class rules. The cascade order from highest to lowest priority is: inline styles > class rules > element rules (1 mark).
This means the inline
color: green takes precedence over the class rule (color: red) and the element rule (color: blue), regardless of the order they appear in the stylesheet.
Q8. A webpage contains the code shown below. Describe what happens when the user moves the mouse over the button. 2 marks
Topic: WDD10 — JavaScript: events and mouse handling
<button onmouseover="changeColour()">Hover me</button>
<div id="banner">Welcome to our site</div>
<script>
function changeColour() {
document.getElementById("banner").style.backgroundColor = "yellow";
}
</script>
onmouseover event fires and calls the changeColour() function (1 mark).The function finds the element with
id="banner" using document.getElementById("banner") and changes its background colour to yellow (1 mark).The div containing "Welcome to our site" now has a yellow background. This change happens immediately without reloading the page. The colour remains yellow when the mouse moves away (there is no
onmouseout event to revert it).
Q9. A pupil tests their website only in Google Chrome before publishing it. Explain why this is not sufficient testing. 2 marks
Topic: WDD11 — Testing: browsers, accessibility and usability
A site that appears correct in Chrome may have a broken layout or missing functionality in other browsers — and these errors would go undetected if only Chrome is tested. All major browsers should be tested before publishing (1 mark).
Additionally, many users access websites from mobile browsers (on phones and tablets) which should also be tested for responsive behaviour.
Q10. Evaluate a website for a school sports club against fitness for purpose and readability. Use the context provided. 4 marks
Topic: WDD12 — Evaluation
Readability (2 marks): The site meets the readability criterion (1 mark). The code uses meaningful ids and class names that clearly describe each element's purpose, and consistent indentation makes the HTML structure easy to follow (1 mark).
Pattern to follow: judgement (meets / does not meet) + evidence from the context description = 2 marks per criterion.
- Mark allocation = points required. A question worth 2 marks needs two distinct points. "It is better" is never a complete answer.
- Code questions require actual code. Write real HTML, CSS, or JavaScript — not a description of what it would say. Partial credit may be given for correct intent with minor errors.
- Evaluation answers need: judgement + evidence. "The site meets fitness for purpose because [specific evidence]." Without evidence, a judgement alone is worth 0.
- File format questions need two parts: name the format AND explain why — lossy vs lossless, effect on file size, and suitability for the type of image.
- Path questions: count the folder levels. One
../per level up. Check whether you are going into a subfolder or up to a parent folder.