Step 3: Score, next question and finish

A quiz needs a flow: the current index, a running score, a Next question button and a final screen. When index passes the last question the component returns a different result screen. Resetting is just setting the three pieces of state back to their starting values.

Examplereact

const QUESTIONS = [
  { q: "Which hook stores a value that changes?", options: ["useState", "useRef", "useMemo"], answer: 0 },
  { q: "What does JSX compile to?", options: ["HTML strings", "React.createElement calls", "CSS"], answer: 1 },
  { q: "Which prop gives list items a stable identity?", options: ["id", "key", "name"], answer: 1 },
  { q: "Where should side effects like timers go?", options: ["useEffect", "the render body", "JSX"], answer: 0 },
];

const box = { display: "block", width: "100%", textAlign: "left", padding: 10, margin: "6px 0", border: "2px solid #8a90a0", borderRadius: 8, background: "#fff", cursor: "pointer", fontSize: 16 };

function App() {
  const [index, setIndex] = useState(0);
  const [selected, setSelected] = useState(null);
  const [score, setScore] = useState(0);
  const finished = index >= QUESTIONS.length;

if (finished) {
    return (
      <div style={{ fontFamily: "sans-serif" }}>
        <h2>Done!</h2>
        <p>You scored {score} out of {QUESTIONS.length}.</p>
        <button onClick={() => { setIndex(0); setSelected(null); setScore(0); }}>Play again</button>
      </div>
    );
  }

const question = QUESTIONS[index];
  const answered = selected !== null;

function choose(i) {
    setSelected(i);
    if (i === question.answer) setScore(score + 1);
  }
  function next() {
    setIndex(index + 1);
    setSelected(null);
  }

return (
    <div style={{ maxWidth: 420, fontFamily: "sans-serif" }}>
      <p>Question {index + 1} of {QUESTIONS.length} · Score {score}</p>
      <h2>{question.q}</h2>
      {question.options.map((o, i) => {
        let style = box;
        if (answered && i === question.answer) style = { ...box, borderColor: "#1b7f4c", background: "#e3f6ec" };
        else if (answered && i === selected) style = { ...box, borderColor: "#c62828", background: "#fdeaea" };
        return (
          <button key={o} style={style} disabled={answered} onClick={() => choose(i)}>
            {o}
          </button>
        );
      })}
      {answered && <button onClick={next}>{index + 1 === QUESTIONS.length ? "See result" : "Next question"}</button>}
    </div>
  );
}

Open in editor »

Play through to the end. Look at how choose(i) updates two things at once, the selection and the score, and how the finish condition (index >= QUESTIONS.length) is derived rather than stored.

Your turn: write the code

Write scoreQuiz(answers, key) that counts how many entries of answers equal the entry at the same position in key. Print scoreQuiz([0, 1, 1, 0], [0, 1, 2, 0]) and scoreQuiz([], []).

Quick check

How does the app know the quiz is finished?

index is past the last question (derived, not stored)A separate finished state variableA timer

Finish the quick check (and any code exercise) to complete this lesson, or mark it done yourself.

Tip: use the left and right arrow keys to move between lessons.