Exercise: A Game High-Score Board

Build the Galaxy Blasters arcade's high-score board from plain-text data, with a countdown list, a scores table with a caption, header cells and a totals row, and a description list, and let the tests check its structure.

Apprentice · HTML · Updated October 30, 2026

Every game with a leaderboard, from an arcade cabinet to an online game with millions of players, shows its scores the same way underneath: lists and tables. The Galaxy Blasters Arcade has this week's scores in a plain text file, and it wants them on its website: a top-10 countdown, a table of the top five players' scores on each level, and a guide to the game's power-ups. You'll turn the text into HTML, and tests will check each part as you build it.

Get the exercise code

In the Exercise box beside the lesson, choose Get the starter on GitHub to open its GitHub repository. Click Code, then Download ZIP, and unzip it into your practice folder.

The folder holds:

index.html: the page you'll finish. Its header, footer and three empty sections are ready, with a comment in each section saying what goes there.
scores.txt: the data to mark up, as plain text: the top 10, the level scores with their caption and totals, and the power-ups.
style.css: the arcade's neon look, already linked from index.html. It styles plain HTML elements, so your lists and table look right as soon as they're in place. You don't need to change it.
page.test.js and package.json: the tests that check your page, and the two tools they use. You don't need to change these.

Open the folder in VS Code.

What to do

Each section of index.html starts with a heading and a comment, like this one for the first part:

<section>
    <h2>The top 10 countdown</h2>
    <!--
        1. The top 10, as a countdown.
           An ordered list that starts with 10th place (BLIPBOB) and ends with the winner (PIXELPAM),
           numbered from 10 down to 1. Each item is a player and their score, such as: PIXELPAM: 98,450
           The places and scores are in scores.txt, part 1.
    -->
</section>

Write your HTML under each comment, and leave the comments in place or delete them, as you like.

The top 10 countdown. An ordered list of the ten players, from 10th place to 1st, numbered 10 down to 1, so the winner comes last, like a countdown show.
The scores table. The level scores for the top five, with the caption from scores.txt. It has three parts: a head with the column labels (Player, Level 1, Level 2, Level 3, Total), a body with a row for each player, and a foot with the totals row. Every header cell says what it labels with scope.
The power-ups. Each of the six power-ups with what it does. Mega Bomb has two descriptions.

Copy the words and numbers from scores.txt exactly as they are, commas and capital letters included: the tests look for them.

Check your work

Right-click index.html and choose Open with Live Server to see the page as you build it.

To run the tests, open VS Code's terminal (Terminal > New Terminal). The first time, type:

npm install

Then, whenever you want to check your work:

npm test

At first, eight of the ten tests fail. That's expected: the page has nothing in its sections yet. Each part you finish turns its tests green. A failing test's message says what it looked for, for example The <tbody> needs one row per player: 5 rows. It has 3. The last test runs an HTML checker over your page and lists any mistakes with their line numbers.

Hints

One part at a time. Finish the countdown and run npm test before you start the table. With small steps, a mistake can only be in the part you wrote last.
Which list counts down? The ten players go in from 10th place to 1st. One attribute makes the browser number them from 10 down; Ordered and Unordered Lists shows it.
Sketch the table first. On paper, draw the table's rows and mark which cells are labels. Every row has five cells, including the totals row. Tables for Data has the building blocks.
Labels in two directions. A label at the top of a column and a label at the start of a row point different ways. Table Headers, Sections and Spanning Cells shows how to say which.
Two descriptions, one name. A power-up with two descriptions keeps one name and gets two descriptions after it; Description Lists has an example.

When you're done

Every test is green:

✔ the page says its language and has a title (0.969ms)
✔ the top 10 is an ordered list of 10 players (2.5548ms)
✔ the top 10 counts down, from 10th place to the winner (1.2019ms)
✔ the scores table has a caption (1.1562ms)
✔ the table has a head, a body and a foot (2.516ms)
✔ every header cell says what it labels with scope (2.577ms)
✔ the table body has a row for each of the five players (1.4643ms)
✔ the totals row is in the foot (0.6793ms)
✔ the power-ups are a description list (1.5446ms)
✔ the page passes the HTML checker (102.5201ms)
ℹ tests 10
ℹ suites 0
ℹ pass 10
ℹ fail 0
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0
ℹ duration_ms 1236.5438

In the browser, the countdown runs from 10 to 1 with PIXELPAM in gold at the bottom, the table shows its caption, labels and totals, and each power-up sits above what it does. The times in brackets will be different on your computer.

Now look back at your page. Say STARFOX99 plays again and scores 32,000 on Level 3, so their best total becomes 92,300. How many places in your HTML would change? Find each one before you read on: STARFOX99's Level 3 and Total cells, the Level 3 and grand totals in the foot, and STARFOX99's line in the countdown. The same number living in several places is why real leaderboards are built from data by a program, which is where JavaScript comes in.

The finished high-score board: a neon countdown from 10 to 1 ending with the winner, a scores table with a caption and a totals row, and the list of power-ups

So what

Leaderboards, price lists, order summaries and help pages are all built from these same pieces. Choosing the right list or table, with its labels in place, is what makes the data readable for everyone, and what you'll do on almost every real page you build.