Visualisation component: text and graphics

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which title best tells viewers what a chart shows?

A Average weekly screen time of Year 10 students, 2024

B Chart 1

2. What is the job of a subtitle in a visualisation?

A Add detail to the title, such as the data source or time period

B Replace the title so it can be left out

3. A caption sits beside a chart and says: 'Sales dropped after the shop closed on Sundays.' What does the caption do?

A Changes the data values in the chart

B Explains what the data means

4. Which is an annotation?

A A border drawn around the whole page

B A short note with an arrow pointing to a spike in the line chart

5. A visualisation shows a large '72%' with the words 'of students bring a laptop to school'. What is the large number called?

A A key figure callout

B An axis label

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1<h1>Year 11 Canteen Sales</h1>		AThe image has no alt text, so it cannot be explained to viewers who cannot see it. It also has no caption saying what it adds.
2<p class="caption">Sales peak on Fridays.</p>		B<h2>Survey of 120 students, Term 2</h2>
3A key figure callout makes one important number stand out in large text		CA caption that explains what viewers should notice in the data
4A subtitle sits under the title and adds extra detail such as the date range or data source		D<span class="big">82%</span> passed
5<h1>Chart</h1>		EThe title is too vague. It does not say what data is shown, who it is about or when, so viewers cannot tell what the chart shows.
6<img src="logo.png">		FA title that tells viewers what the whole visualisation is about

Definitions

Text and graphics

Fill in the Blanks

Complete each line of code by filling in the missing parts.

<h1>Weekly Screen Time</h1> <__>Year 10 students, 2024</h2>

<figure><img src="bar.png" alt="Chart"> <__________>Source: ABS, 2023</figcaption> </figure>

.key-figure { _________: 48px; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A <h1>Pet Adoptions 2024</h1>

B <h2>Monthly totals</h2>

C <p>Source: RSPCA data<p>

Question 2

A <div class="callout">

B <span class="big">42%</span>

C <p>walk to school</div>

D </div>

Question 3

A <h1 Daily Steps</h1>

B <h2>Week of 3 June</h2>

C <img src="steps.png" alt="Steps">

Question 4

A <figure>

B <img src="map.png" alt="Map">

C <figcaption>Fires</figcaption>

D </figcaption>

Question 5

A .big-number {

B font-size: 32px;

C color: #1a3c6e;

D font-weight bold;

E }

Answer Key

Visualisation component: text and graphics

Section A: Quick Questions

A — Average weekly screen time of Year 10 students, 2024

A — Add detail to the title, such as the data source or time period

B — Explains what the data means

B — A short note with an arrow pointing to a spike in the line chart

A — A key figure callout

Section B: Match the Pairs

<h1>Year 11 Canteen Sales</h1> → A title that tells viewers what the whole visualisation is about

<p class="caption">Sales peak on Fridays.</p> → A caption that explains what viewers should notice in the data

A key figure callout makes one important number stand out in large text → <span class="big">82%</span> passed

A subtitle sits under the title and adds extra detail such as the date range or data source → <h2>Survey of 120 students, Term 2</h2>

<h1>Chart</h1> → The title is too vague. It does not say what data is shown, who it is about or when, so viewers cannot tell what the chart shows.

<img src="logo.png"> → The image has no alt text, so it cannot be explained to viewers who cannot see it. It also has no caption saying what it adds.

Section C: Definitions

Text and graphics — Titles, headings, captions and key figures (text) plus shapes, pictures and icons (graphics) that frame and explain the data so viewers know what it shows and what matters.

Section D: Fill in the Blanks

<h1>Weekly Screen Time</h1>
<h2>Year 10 students, 2024</h2>

<figure><img src="bar.png" alt="Chart">
<figcaption>Source: ABS, 2023</figcaption>
</figure>

.key-figure {
  font-size: 48px;
}

<svg width="200" height="100">
  <circle cx="50" cy="40" r="20"/>
</svg>

<img src="icon.png" alt="Graph icon">

Section E: Spot the Error

C — The source note (a caption-style text) is not closed properly. The closing tag needs a slash: </p>.

C — The label under the key figure opens with <p> but closes with </div>. It should end with </p>.

A — The opening title tag is missing its closing bracket. It should be <h1>Daily Steps</h1> so the title displays properly.

D — The figcaption was already closed on line 3. The last line must close the figure element with </figure>.

D — A CSS property needs a colon between the name and value. It should be font-weight: bold; so the key figure stands out.