Quiz #
Renders mixed quiz formats with score calculation and optional explanations.
Authoring tips #
- Mix
mcq,input, andmatchingto keep long quizzes engaging. - For
inputquestions, add alternative answers viaanswers. - For
matching, providepairsand optionally a customoptionslist.
Props #
| Prop | Type | Required | Description |
|---|---|---|---|
questions | Question[] | Yes | Quiz question definitions (mcq, input, matching). |
showScore | boolean | No | Show score after submit. Default: true. |
className | string | No | Wrapper classes. |
Question shapes:
mcq:{ type: 'mcq', prompt, options, correctIndex, explanation? }input:{ type: 'input', prompt, answer, answers?, caseSensitive?, explanation? }matching:{ type: 'matching', prompt, pairs: { left, right }[], options?, explanation? }
Live example #
1. Which planet is known as the Red Planet?
2. What does HTTP stand for?
3. What is the chemical symbol for gold?
4. How many continents are there on Earth?
5. Match each scientist to their contribution.
Isaac Newton→
Marie Curie→
Alan Turing→