Step 6: Review screen and best score

A good quiz lets you learn from mistakes. Store every answer in an array instead of only the score; then the score is derived (answers.filter(...)) and a Review component can list each question with ✓ or ✗ and the correct answer. The best score is remembered with localStorage, wrapped in try/catch because storage can be blocked (as it is inside this preview, so the best score here only lasts while the page is open).

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 Review({ answers }) {
  return (
    <ol>
      {QUESTIONS.map((q, i) => (
        <li key={q.q} style={{ margin: "8px 0" }}>
          {q.q}<br />
          <strong style={{ color: answers[i] === q.answer ? "#1b7f4c" : "#c62828" }}>
            {answers[i] === q.answer ? "✓ " : "✗ "}{q.options[answers[i]] ?? "(no answer)"}
          </strong>
          {answers[i] !== q.answer && <div>Correct: {q.options[q.answer]}</div>}
        </li>
      ))}
    </ol>
  );
}

function App() {
  const [answers, setAnswers] = useState([]);
  const [selected, setSelected] = useState(null);
  const [best, setBest] = useState(loadBest);
  const index = answers.length;
  const finished = index >= QUESTIONS.length;
  const score = answers.filter((a, i) => a === QUESTIONS[i].answer).length;

useEffect(() => {
    if (finished && score > best) { setBest(score); saveBest(score); }
  }, [finished]);

if (finished) {
    return (
      <div style={{ fontFamily: "sans-serif", maxWidth: 420 }}>
        <h2>Result: {score} / {QUESTIONS.length}</h2>
        <p>Best so far: {Math.max(best, score)}</p>
        <Review answers={answers} />
        <button onClick={() => { setAnswers([]); setSelected(null); }}>Try again</button>
      </div>
    );
  }

Open in editor »

Finish the quiz and look at the review. This is lifting the right state up: storing the answers (the source of truth) means everything else can be calculated from them.

Quick check

Why store the list of answers instead of only a running score?

The score and the review can both be derived from itArrays are required by ReactIt uses less memory

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.