Grade 7 Web Development Test

HTML, CSS, and beginner JavaScript. 40 marks, plus 3 bonus.

Answer every question, then press Check my answers. You can also check one question at a time as you go.

Some questions are marked for you. The written ones cannot be — nothing can fairly grade a paragraph — so those show you the answer and a checklist, and you mark yourself against it.

Marks: 40
Time: about 45 minutes
Paper version: Print or hand in

Section B: CSS and Structure

B1.What is the job of CSS?
2 marks
B2.Match each CSS piece to what it means. One mark for each correct row.
4 marks
- a)the space inside an element, around its content
- b)sets the colour behind an element
- c)targets every <h1> on the page
- d)targets only elements with class="wonder-title"
background-color
h1 { }
padding
.wonder-title
B3.This line goes in the <head> to connect a stylesheet. What is the missing word?
2 marks
```
<link rel="stylesheet" ________="index.css">
```

B4_1.In the rule below, what is part (1) called?

1 mark

body { background-color: lightblue; }
 ↑              ↑
(1)            (2)

B4_2.And what is part (2) called?
1 mark

Section C: Read the JavaScript

Write exactly what each program prints, in order. One line of output per console.log.

C1.What does this print?

2 marks

let score = 8;
score = score + 2;
console.log(score);

C2.What does this print?

2 marks

let animals = ["lemur", "orangutan", "snake"];
console.log(animals[0]);
console.log(animals.length);

C3.What does this print?

3 marks

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

C4.What does this print?

3 marks

let total = 0;
for (let i = 1; i <= 3; i++) {
  total = total + i;
}
console.log(total);

C5.What does this print?

2 marks

let age = 11;
if (age >= 13) {
  console.log("teen");
} else {
  console.log("kid");
}

C6.In the Zoo Webpage, a fact is chosen like this. Why does the code use Math.floor?
2 marks
```
let i = Math.floor(Math.random() * facts.length);
```

Section D: Fix and Write

D1.Each row of this table should have the same number of cells, but one row is broken so the table looks crooked. Which row is wrong, and how do you fix it?
3 marks
```
<table>
  <tr> <th>Animal</th> <th>Home</th> </tr>
  <tr> <td>Penguin</td> </tr>
</table>
```
D2.Write the HTML for a heading that says My Favourite Animals, followed by a bullet list of any three animals.
5 marks
BONUS.Bonus. Write a loop that prints the numbers 1 to 10, one per line.
3 marks

0 of 22 answered

Teacher's versionHow to use this test, and the full marking guide.

This page marks itself, which means the answers are in it. Anyone who opens the browser tools can read them. That is fine for practice and for a student checking their own work, and it is what makes the feedback possible.

For a test that is actually being graded, use the paper version. It holds no answers, and the student downloads a text file to hand in. The marking guide is deliberately not published here: this site is public, so keep your copy as a local file and grade from it there.

The written questions are marked by the student against a checklist. That is deliberate: no program grades a paragraph fairly, and reading the model answer closely enough to tick the boxes teaches more than a number would.

Section A: HTML Basics

Section B: CSS and Structure

Section C: Read the JavaScript

Section D: Fix and Write