Grade 7 Web Development Test

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

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

Some questions are marked for you. The written ones are not. No program grades a paragraph fairly. So each written question shows you the answer and a checklist. You mark yourself against that checklist.

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, so 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. Keeping the answers here is what makes the feedback possible.

For a test you are really grading, use the paper version. It holds no answers. The student downloads a text file to hand in. This site is public, so it does not publish the marking guide. Keep your copy as a local file and grade from that.

The student marks the written questions against a checklist. That is on purpose. No program grades a paragraph fairly. To tick the boxes, the student has to read the model answer closely. That 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