Content scoped for a double period · see teacher notes for what to compress
Learning intentions
I can answer exam-style questions drawing on content from across the whole WDD unit (WDD1-15).
I can answer mixed-topic questions spanning analysis, design, HTML/CSS, JavaScript, testing and evaluation.
Success criteria
I can answer a single connected scenario's questions across several WDD lessons at once, not just one at a time.
I can identify which strand a question is testing, even when it is not explicitly named.
I can produce a specific, prioritised revision plan ahead of WDD17 and the January prelim.
Warm up - the shape of Section 2
Answer all three questions, then check your answers.
WU1
How many marks is Section 2 of the question paper worth in total?
WU2
In Section 2 of the question paper, what choice does a pupil make?
Section 1 (SDD + CS) is compulsory for all pupils.
Correct. Section 2 offers a choice between DDD and WDD.
Mark allocations are fixed by the exam, not chosen by the pupil.
Exam timing is not a pupil choice.
WU3
How many lessons make up the full WDD unit (WDD1-17)?
Key vocabulary - one term per strand
Functional requirement
Analysis (WDD1) - a specific statement of what a website must let its users do.
Site map
Structure (WDD2) - a diagram showing a site's pages and levels before any page content exists.
Descendant selector
CSS (WDD6/10) - a selector like nav a that targets an element at any depth inside a given ancestor.
Margin collapse
CSS (WDD8) - adjacent vertical margins between block elements take the larger value, not the sum.
camelCase
JavaScript (WDD13) - the naming style hyphenated CSS properties must be converted to, e.g. backgroundColor.
Orphan page
Testing (WDD14) - a page with no link pointing to it from anywhere else on the site.
Fitness for purpose
Evaluation (WDD15) - whether the finished website meets its functional requirements.
Mixed-topic questions, not one lesson at a time
Why past paper questions rarely test one lesson in isolation
Section 2 of the question paper (25 marks, WDD or DDD - a pupil's choice) draws on the whole WDD spec together, not one lesson at a time. A single scenario might describe a client's requirements, ask for part of a site's structure, ask a CSS or JavaScript question about a specific feature, and then ask for testing or evaluation evidence about the very same website - exactly the kind of connected, multi-part question this lesson practises.
What this lesson is for
This is not a new-content lesson - every fact used below has already been taught somewhere in WDD1-15. Its purpose is retrieval and connection: practising the skill of recognising which WDD strand a question is really testing, even when the question does not name the lesson directly, and combining several strands within a single connected scenario the way a real exam question does.
Worked examples - exam-style questions with marking schemes
Example 1 - A connected scenario across analysis, structure and CSS (7 marks)
1
Scenario: A local theatre wants a website letting visitors browse upcoming shows and book tickets online.
2
(a) State two functional requirements this site must meet. (2 marks) Model answer: visitors must be able to view a list of upcoming shows; visitors must be able to submit a ticket booking with a chosen date and number of seats.
3
(b) The site has a home page, three second-level pages (Shows, Booking, Contact), and Shows has two further sub-pages. How many levels does the site structure have? (2 marks) Model answer: three levels - the home page, the second level (Shows/Booking/Contact), and a third level below Shows.
✓
(c) Write a descendant selector that styles only links inside the site's navigation bar. (3 marks - 1 for correct selector shape, 2 for correct elements) Model answer: nav a - a descendant selector separates the two selectors with a space, targeting <a> elements at any depth inside <nav>.
Example 2 - Box model and margin collapse calculation (5 marks)
1
(a) A box has content width 220px, padding 15px on left and right, and a 3px border on left and right. State its visible width, not counting margin. (3 marks) Model answer: 220 + 30 (15px padding x2) + 6 (3px border x2) = 256px.
✓
(b) Box A has margin-bottom: 25px. Box B sits directly below in normal flow with margin-top: 10px. State the visible gap between them. (2 marks) Model answer: vertical margins between stacked block elements collapse to the larger value - the larger of 25 and 10 is 25px, not 35px.
Example 3 - JavaScript, testing and evaluation together (8 marks)
1
(a) This code is meant to change a background colour but causes an error: box.style.background-color = 'red'; Identify the bug and state the corrected line. (2 marks) Model answer: the hyphen is read as subtraction in JavaScript; the corrected line is box.style.backgroundColor = 'red';.
2
(b) Write one persona and one matching scenario for the theatre website's booking feature. (2 marks) Model answer: Persona - "A parent booking four tickets for a Saturday matinee." Scenario - "Choose a show, select four seats for Saturday, and complete the booking."
3
(c) Testing found the Contact page has no link pointing to it from anywhere on the site. Name this fault. (1 mark) Model answer: an orphan page.
✓
(d) The booking form saves every booking correctly, but the submit button is unreadable on a phone screen. Evaluate this against both WDD criteria. (3 marks) Model answer: fitness for purpose is met, since the booking is saved correctly as required; usability is not fully met, since the unreadable button on a phone screen is a genuine usability problem found through device testing.
Now you try
A form field accepts a number of tickets from 1 to 8. Suggest one normal, one extreme and one erroneous test value, and state which category each belongs to.
Normal: 4 tickets. Extreme: exactly 1 or exactly 8 tickets (the boundary values). Erroneous: 0 tickets, 9 tickets, or non-numeric input.
Common mistakes
Treating a mixed-topic question as several unrelated mini-questions. As the worked examples show, a single scenario's parts often connect to the same website, rather than testing unrelated facts in isolation.
Answering only the part of a question that feels familiar. A multi-part question awards marks for each part separately - skipping an unfamiliar-looking part still loses those specific marks.
Forgetting exact terminology under exam pressure. "Descendant selector," "margin collapse," "orphan page" and "fitness for purpose" are all specific, markable terms - vaguer wording risks losing marks even with the right idea.
Assuming Section 2 only tests the most recently taught lessons. A real exam question is just as likely to draw on WDD1 as on WDD15 - revision should reflect that same breadth.
Exam tip
Read a multi-part scenario question all the way through before answering any part - later parts often make clear exactly what an earlier part is really asking for. Use precise vocabulary throughout (descendant selector, margin collapse, camelCase, orphan page, persona/scenario/test case, fitness for purpose/usability) rather than a general description of the right idea, since exact terms are what mark schemes look for.
Task Set A - Mixed past-paper-style questions
Task Set A - Mixed past-paper-style questions
Questions draw on content from across WDD1-15. Work through all questions, then check your answers.
Question 1 - WDD1, analysis (1 mark)
Functional requirements are stated in terms of what the user must be able to ______ on the site.
Question 2 - WDD2, structure (1 mark)
What is the name of the top page in a website's structure?
Question 3 - WDD3, wireframes (1 mark)
Name one thing that should NOT appear on a wireframe.
Question 4 - WDD4, semantic HTML (1 mark)
Which semantic element is used for a page's main navigation links?
section groups related content, not navigation specifically.
footer holds closing content such as copyright information.
Correct.
header can contain navigation but is not itself the navigation element.
Question 5 - WDD5, forms (1 mark)
Which HTML attribute enforces a presence check on a form field?
Question 6 - WDD7/8, box model (2 marks)
A box has content width 150px and a 10px border on left and right (no padding). State its visible width in pixels.
Question 7 - WDD9, height and width (1 mark)
A parent element is 600px wide. Its child has width: 50%. What is the child's rendered width?
This is the parent's full width, not 50% of it.
Correct - 50% of 600px is 300px.
This treats 50% as a fixed pixel value, not a percentage of the parent.
This is true for percentage HEIGHT, not percentage width, which only needs the parent's width.
Question 8 - WDD13, JavaScript (1 mark)
What is the correct JavaScript camelCase property name for the CSS property font-size?
A toggle function's first click does not show a hidden element as expected. Explain the most likely cause, referencing what element.style.display is before any JavaScript has run.
Model answer
Question 10 - WDD14/15, testing and evaluation (4 marks)
The theatre site's booking form correctly saves every valid booking, but usability testing found several users could not tell the navigation bar's links were clickable. Write a full evaluation covering both WDD criteria, with evidence.
Model answer
Task Set B - Extension
Task Set B - Extension
Longer written practice and revision planning - no auto-check.
Extension 1
Design one further mixed-topic past-paper-style question of your own, combining at least three different WDD lessons, and briefly describe what each part would test.
Model answer
Extension 2
Using your own results from Task Set A, write a specific, strand-by-strand revision plan for WDD ahead of WDD17 and the January prelim.
Model answer
Extension 3
Which earlier WDD lesson(s) most closely resemble what the Assignment's WDD task will require, and why would reviewing those specifically be good assignment preparation?
Model answer
File this in OneNote under: Higher Computing Science > Web Design & Development > WDD16
Teacher notes - Shift+T to toggle
Timing risk: this lesson is scoped for a double period but is scheduled on a single (Tue 15 Dec 2026, per WDD.md §2a/§4 - one of the four flagged "too short" mismatches, along with WDD4, WDD7 and WDD10). Do not try to cover everything in class.
Suggested compressed timing (single period, ~50 min): 5 min warm up, 20 min Examples 1-3 worked through together as a class (these model full multi-part exam answers, so are worth prioritising over independent Task Set A time), remaining time on Task Set A questions 1-8 only. Push questions 9-10 and all of Task Set B to independent/homework time, directly feeding into WDD17's revision planning.
No new facts are introduced anywhere in this lesson - every fact reused (box model/margin collapse arithmetic, camelCase conversions, orphan page/persona/evaluation content) was already verified in its original lesson (WDD7/8/9/12/13/14/15), consistent with SDD21's approach to its own past-paper-practice lesson.
Follows the SDD21 pattern per WDD.md's instruction ("no spec, Scholar, or Chris equivalent needed - follow the SDD21/SDD22 pattern already proven on this site") - mixed, connected-scenario questions here in WDD16, then a genuine one-question-per-strand coverage-map test in WDD17.