Skip to content
Starlight QuizStarlight Quiz

Results screen

Drop a <QuizResults> component onto a page to show aggregate progress across every quiz on it. As readers answer, the panel tracks how many quizzes are done; once they have all been answered it reveals a score with an encouraging message.

import { Quiz, QuizResults } from 'starlight-quiz/components';


<Quiz>…</Quiz>
<Quiz>…</Quiz>


<QuizResults />

Try it

Section titled “Try it”

Answer both quizzes to reveal the score panel below.

What does HTML stand for?

  • HyperText Markup Language
  • Hyperlink Text Mode Language
  • Home Tool Markup Language

Which language styles a web page?

  • CSS
  • SQL
  • JSON

Quiz Progress

0 / 0 questions answered (0%)

0 correct

Score tiers

Section titled “Score tiers”

The message shown depends on the percentage of quizzes answered correctly:

Score Message
90–100 % Outstanding! You aced it!
75–89 % Great job! You really know your stuff!
60–74 % Good effort! Keep learning!
40–59 % Not bad, but there’s room for improvement!
0–39 % Better luck next time! Keep trying!

Confetti

Section titled “Confetti”

Confetti fires on a first-time completion (when the score is at least 10 %) by default. Pass confetti={false} to turn it off:

<QuizResults confetti={false} />

The confetti library is loaded with a dynamic import, so it adds nothing to your bundle unless it actually fires. Confetti is also skipped for readers who set prefers-reduced-motion.

Resetting

Section titled “Resetting”

The results panel includes a Reset all answers button that clears every quiz on the page. Each quiz also keeps its own reset button when disableAfterSubmit is false.