Exercise: A Trivia Night Page

Build the page for a pizzeria's trivia night, with answers that open on a click, house rules in a popover, the date in a time element and a quote from last month's winners, and let the tests and the validator check it.

Apprentice · HTML · Updated

Slice of Heaven Pizza, a neighborhood pizzeria, runs a trivia night every Thursday, and the owner wants a page for it: one that players can open on their phones to check the date, read the house rules and, after the game, tap each question to see if they got it right. You have all the words in a text file. Your job is to give each piece the element that says what it is, with no JavaScript at all, and to finish with a page the validator calls clean.

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 wherever you keep your practice projects. Open the folder in VS Code.

The folder holds:

  • index.html: the page's skeleton, with a list of what it needs in a comment. This is the file you finish. It already has two mistakes in it.
  • questions.txt: every word the page needs: the date, the house rules, the scoring, last month's winners, and ten questions in three rounds (movies, science and geography), each with its answer.
  • style.css, a ready-made stylesheet, and images/, the pizzeria's logo. They're ready to use. The stylesheet styles elements by what they are, so the page picks up its look as you use the right ones.
  • page.test.js and package.json: the tests and the tools they use. You don't need to change these.

What to do

Each question in questions.txt is a Q: line followed by its A: line:

ROUND 2: SCIENCE
Q: Which planet is known as the Red Planet?
A: Mars
  1. Fix the two mistakes. Paste the page into the validator, or run the tests (below) and read the last one. Fix both before you start, so every later message is about your own work.
  2. The date. Put Thursday, November 12, 2026, at 7 p.m. in a <time> element, with a datetime value a calendar could read.
  3. The house rules. Put them in an element with the popover attribute, and add a button that opens it.
  4. The scoring. Mark the keys to press with <kbd>, and the rule players mustn't miss with <mark>.
  5. Last month's winners. Put the captain's words in a <blockquote>.
  6. The three rounds. Give each round a <section> with an <h2>. Every question goes in the <summary> of its own <details>, and its answer goes inside that <details>, after the summary, so it stays hidden until it's clicked.

Open the page with Live Server as you go. Click the questions, open the rules, press Esc, and try the whole page with only the keyboard: Tab to move, Enter to open.

Check your work

Open VS Code's terminal (Terminal > New Terminal). Type this once, to download the two tools the tests use:

npm install

Then, every time you want to check your page:

npm test

At first six of the seven tests fail. That's expected: each part of the page you finish turns its test green. A failing test's message says what it looked for and what to add, such as 8 of 10 answers are hidden. Put these inside a <details>, after its <summary>: Ottawa, Africa.

The last test runs a validator on your page. When everything passes, check it with the W3C Nu HTML Checker too: paste all of index.html into https://validator.w3.org/nu/ with Check by set to text input, and press Check.

Hints

  • The validator's line numbers are your map. One of the two starting mistakes is a picture, and the other is a tag that closes something that was never opened. Validating Your Page shows both.
  • Keep the answers' words the same as in questions.txt: the tests look for them inside your <details> elements.
  • The id joins a button to its popover. The button's popovertarget and the popover's id must match letter for letter. Popovers and Dialogs shows the pattern.
  • A datetime value has a set shape: year, month and day with hyphens, a capital T, then the time on a 24-hour clock. Quotes, Dates, Code and More has a table of them.
  • Want one answer open at a time in each round? Give the round's <details> the same name, as in Details and Summary: Show and Hide. The tests don't ask for it, but players will like it.

When you're done

Every test passes. Each line also ends with how long the test took, which is different on every computer:

✔ 1) language and title: the page says its language and has a title
✔ 2) answers: every answer is hidden in a details element, after its summary
✔ 3) house rules: a button opens the house rules in a popover
✔ 4) date: the game's date is in a time element with a valid datetime
✔ 5) winner's quote: last month's winner is quoted in a blockquote
✔ 6) scoring: the scoring rules use kbd for keys and mark for what matters
✔ 7) validator: the validator finds no errors
ℹ tests 7
ℹ suites 0
ℹ pass 7
ℹ fail 0
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0

And the W3C checker says The document validates according to the specified schema(s).

Now look back at your page: it has a pop-up, ten sections that open and close and a date a calendar can read, and not one line of JavaScript. Which of those would you have guessed, before this chapter, needed a programmer?

So what

You built an interactive page the way professionals try to: the browser's own elements first, and a clean validator report before it goes online. The same pieces turn up on FAQ pages, help centers, quiz sites and event pages everywhere.

What's next

The Module 2 mini-capstone: A Recipe Site. Put the whole module to work on a site worth sharing: a home page and three recipe pages, your own family favorites or the starter's (Grandma's Banana Bread, Weeknight Chili, Lemon Garlic Pasta). Each recipe is an <article> with an ingredient list, numbered steps, a nutrition table with a caption and header cells, prep and cook times in <time>, the cook's tips folded into <details>, and a "Print this recipe" note in a popover. Every page passes the validator with no errors, and the site goes online so you can send it to the family.

Module 3: Forms. So far your pages are things people read. Next they become things people use: forms that take a pizza order, sign someone up and send an application, with the right box for every answer and checks the browser makes before anything is sent.

Key terms

Related