Capstone: Build a Quiz App From Scratch

You can build a second web page from a blank file.

That claim is different from finishing the profile track. The profile had a starter at every step. This page does not. You decide the structure, the layout, and how the script is wired. The sandbox below starts nearly empty on purpose.

What to build

Build a small quiz app. It is not part of your profile page. It is a new page with its own job.

When it works, a visitor sees at least three questions on the page. Each question offers more than one choice as buttons. When they click a choice, your script checks that answer right away. Compare the clicked text to the correct answer. If it matches, add one to a running score. The page shows how many they got right out of how many questions you asked. The total comes from your questions array's length, not a number you typed by hand. Once a question has been picked, right or wrong, later clicks on it must not change the score.

One question object looks like this shape (use your own wording and choices):

{
  question: "Which tag starts a paragraph?",
  choices: ["<p>", "<h1>", "<div>"],
  answer: "<p>",
}

You may copy the document frame from your own profile page: the doctype, html, head, body, title, and the <link> to styles.css. Real developers reuse a working frame. From scratch here means a new app with no lesson steps, not a memory test on the skeleton.

How to know you are done

Run your page and check these outcomes yourself. Scroll the preview if a score line or a later question sits below the fold.

At least three questions appear, each with more than one choice button.
Click one choice on a question. The score line updates from that click (a correct pick raises the count; a wrong pick leaves it unchanged for that question).
Click another choice on that same question. The score does not change again. Once picked, that question is locked.
After you have answered every question once, the page shows how many were right out of how many questions. That number matches a hand count for your question bank.
Change the bank: add a question, or change an answer string. Run again. The score still matches your data, including the new length.
Exact text matters: the value you store as the correct answer must match the choice button's text exactly, including capital letters and spaces. A stray space makes a right pick score wrong, with no error message. If a question never scores when you are sure you clicked the right choice, check that the answer field matches that choice's text exactly.

Optional stretch (not required): a Try again control that clears the score line and lets the visitor pick again. The app is finished without this. Add it only if you want the extra composition.

When you get stuck

These point back to earlier lessons by name. They do not re-teach the ideas.

Document frame and title: document-skeleton and headings
Stylesheet link and styles.css: external-stylesheet
Colours, type, spacing, centered column: colors, typography, box-model, and page-layout
Buttons that look like controls: display-block-inline (and flex-container / flex-alignment if you use a row)
Landmarks if you want them: semantic-structure
Variables and a script at the end of body: js-first-steps
Finding elements and writing text onto the page: dom-selection
Functions: functions
Click handlers on buttons: dom-events
Comparing with if and ===: if-else
Arrays and .length: arrays
Rendering a list with for…of, createElement, classList, and append: loops
A click handler wired inside that loop so each button remembers its own item: loops
Objects with labeled fields you read with a dot: objects
Reading a value at check time (if you use a form submit instead of a click): form-feedback
A running total with let score = 0, if inside a loop, and score = score + 1: accumulation

Checking on click keeps the compare next to the event, like handlers you already wrote. A let flag declared inside the question loop (set when they pick) stops a second click from counting again. That flag is closed over by that question's handlers the same way each skill card's click remembered its own skill in loops.

Build it here

YOUR QUIZ APP · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

RUN TO SEE YOUR PAGE

You now have two finished pages: the profile the track built with you, and a quiz you built without the rails. That is the end of Web Fundamentals.