Project: Build an interactive knowledge quiz

Outcome

Build a quiz that presents at least eight questions, records one answer for each question, explains the result, and lets the user try again. The interaction goal stays the same for both supported levels. Your current course level determines how you organize state, rendering, data, and automated verification.

What you will practice

Model a multi-step interaction with explicit question, answer, progress, and result states.
Provide accessible feedback without relying on color or timing alone.
Verify normal, incomplete, restart, and invalid-data paths for the selected implementation.

Project brief

Choose one adult learning or professional topic, such as web accessibility, HTML semantics, CSS layout, browser security, content quality, or digital source evaluation. Write at least eight questions with two to four answer choices each.

The quiz must help a user answer these questions:

What topic and scope does the quiz cover?
Which question is active, and how much remains?
Which answer has the user selected?
Why is an answer correct or incorrect?
What is the final result, and how can the user try again?

The result is learning feedback, not a grade or diagnosis. Do not collect names, email addresses, or other personal information.

Starting point

Before you start

The HTML, CSS, JavaScript, framework, and testing lessons used in the selected course level.
A question outline with at least eight questions and one confirmed correct answer for each question.
A code editor, browser, and the development tools used in the selected course level.
A parent course folder where you can create one dedicated project folder.

Current state: The questions can begin in a text document or data file. No working quiz interface is required before you begin.
First action: Open the selected level section. Write one complete question record with its prompt, answer choices, correct answer, and explanation.
First checkpoint: The application shows the quiz topic, the first question, every answer choice for that question, and progress text such as ‘Question 1 of 8.’
Help trigger: Open the assistance section or ask for help when the current quiz state cannot be described as one of these values: ready, answering, feedback, or results.

Requirements

The required assignment is complete when every applicable criterion below is met.

Required quiz behavior

The quiz contains at least eight questions with two to four answer choices each.
The interface shows the active question number and total question count.
The user selects one answer before checking or continuing.
After an answer is checked, the quiz identifies the result and shows a short explanation.
The results view shows the number of correct answers and offers a control that restarts the quiz from its initial state.
Restarting clears every previous answer, feedback message, and score value.

Accessibility and responsive behavior

Each question and its answer choices have an accessible group name.
Selected, correct, and incorrect states use text or symbols in addition to color.
Feedback is announced without moving keyboard focus unexpectedly.
Every control works with a keyboard and has a visible focus state.
The quiz remains usable without horizontal page scrolling at a 320px viewport and at 200% browser zoom.
Non-essential motion is removed when `prefers-reduced-motion` is active.

Project workspace and version control

Create one dedicated project folder before implementation. Keep unrelated exercises and repositories outside it.
Make the project folder a Git repository on main and connect it to its own private GitHub repository as origin.
Commit coherent working checkpoints, inspect staged changes, push the final verified state, and finish with a clean working tree.
Do not commit credentials, private data, generated dependency folders, or unrelated files.

Design freedom

Choose the topic, questions, answer choices, explanations, visual style, and whether questions appear one at a time or in a controlled sequence.
Choose whether feedback appears after each question or after a separate check-answer action, provided the current state remains clear.

Out of scope

The required project does not need accounts, saved scores, a leaderboard, a timer, a backend, or personal data.
The project does not require implementation rules from another course level.
Optional extensions do not affect whether the required quiz is complete.

Level-specific implementation

Complete the shared requirements and one level section. The other section is not an additional requirement.

Level 2 · Web Construction

Provisional expected effort: 10–16 hours for the required path. This range includes question writing, implementation, support, debugging, verification, and re-entry. Optional extensions are not included.

New and reused: Reuse semantic HTML and responsive CSS. Add JavaScript objects and arrays, event handling, explicit state, DOM rendering, and interaction checks.

First action: Add the eight question objects to app.js. Render the prompt and answer choices for the first object before adding score or next-question behavior.

Required implementation

Store the questions as structured JavaScript data rather than separate hard-coded event handlers.
Keep the active question index, selected answer, score, and quiz phase in explicit state values.
Use one rendering path that updates the active question and its answer choices from the current state.
Prevent checking or continuing when no answer is selected, and show a clear validation message.
Disable or hide actions that are not valid in the current quiz phase without trapping keyboard focus.
Restart the quiz by resetting state and rendering from that initial state.
Document a manual test for the incomplete-answer, correct-answer, incorrect-answer, final-result, and restart paths.

Level 2 definition of done

The project is complete for Level 2 when the shared requirements pass, structured question data drives one rendering path, explicit state controls every quiz phase, invalid actions produce clear feedback, the full quiz and restart paths work with pointer and keyboard input, and all five manual test paths pass.

Level 3.1 · Web Development

Provisional expected effort: 12–20 hours for the required path. This range includes question writing, application setup, implementation, support, debugging, automated testing, verification, and re-entry. Optional extensions are not included.

New and reused: Reuse accessible interaction and responsive-design skills. Add typed question data, predictable state transitions, component boundaries, invalid-data handling, and automated tests.

First action: Create the application with the framework used in your current course work. Define the question type or schema, then render one validated question through a question component.

Required implementation

Define and validate or type the question identifier, prompt, choices, correct answer, and explanation.
Keep quiz state in one predictable state owner, such as a reducer, store, or parent component with explicit transitions.
Separate data, state transitions, question rendering, progress, feedback, and results into responsibilities that can be tested independently.
Use stable question and answer identifiers instead of displayed array positions as persisted selections.
Handle an empty or invalid question set with a clear error state instead of rendering a broken quiz.
Add automated tests for one answer-and-advance path, the restart transition, and one invalid-data or empty-data path.
Use version control and confirm that the production build completes without errors.
A backend, account system, and persistent score history are not required.

Level 3.1 definition of done

The project is complete for Level 3.1 when the shared requirements pass, validated question data and explicit transitions control the interface, the empty or invalid-data state is usable, all three required automated test paths pass, and the production build completes without errors.

Build one complete question cycle

Render the first question and its answer choices.
Record one selected answer.
Prevent checking when no answer is selected.
Check the selected answer and show text feedback with an explanation.
Move to the next question and confirm that the previous selection does not remain active.

Check

The first question supports no-selection validation, answer selection, feedback, explanation, and a clean transition to the second question.

Checkpoint: One complete question cycle works

What now works: The first question moves through selection, validation, feedback, explanation, and the transition to the next question.
What remains: Complete the remaining questions, results view, restart behavior, and selected level checks.
Next action: Run the same question cycle with the second question before adding the final results view.
If it does not work: If the wrong state appears, log or inspect the active question, selected answer, score, and quiz phase before changing the rendering code.

Complete results and restart behavior

Connect all questions to the same interaction cycle. Show the final score after the last answer, then implement a restart that returns every state value and visible message to the initial quiz state.

Check

Complete the quiz with a known answer pattern. Confirm the expected score, restart, and verify that the first question returns without a selected answer or old feedback.

Checkpoint: The complete quiz and restart paths work

What now works: All questions, progress states, feedback, results, and restart behavior pass the shared and selected level requirements.
What remains: Run the final self-check and prepare the project for submission.
Next action: Complete the self-check from top to bottom and record the first failed item.
If it does not work: If restart keeps old information, list every quiz state value and reset each value before rendering the first question.

Assistance

The complete brief and requirements remain visible above. Open one assistance level when you want more structure.

Assistance 1 — Identify the current quiz phase

Name the current phase: ready, answering, feedback, or results. Identify which action is valid in that phase and which state owner changes it.

Assistance 2 — Use one question-data contract

Give every question the same fields: identifier, prompt, choices, correct answer identifier, and explanation. Verify one record before adding the remaining records.

Assistance 3 — Follow the quiz state transitions

Use this sequence: render question, select answer, validate selection, check answer, show feedback, advance, show results after the final question, then reset every state value on restart.

Self-check

Complete these checks against the required result.

Count the questions and confirm that at least eight complete question records are available.
Try to continue without an answer and confirm that a clear validation message appears.
Complete one correct and one incorrect answer and confirm that both states include text feedback and an explanation.
Complete the quiz with a known answer pattern and confirm that the final score is correct.
Restart the quiz and confirm that the first question has no old selection, feedback, or score.
Use only the keyboard for the complete quiz and confirm that focus remains visible and predictable.
Check the quiz at a 320px viewport and at 200% browser zoom without horizontal page scrolling.
Run the checks in the selected level definition of done. Requirements from the other level do not apply.

Safe stopping point

Stop after a checkpoint passes. Record the last quiz path that works, the first state or test that remains, the exact next action, and any required server, browser, file, or test state. Use that note when you resume.