Quiz Box
An interactive quiz component that displays questions with multiple choice options, tracks user progress, and provides visual feedback with confetti animations.
Question 1 of 3•Score: 0
Which of the following is a JavaScript framework?
Installation
Install the following dependencies
Loading...
API Reference
Component props
QuizBox
| Prop | Type | Default | Description |
|---|---|---|---|
quizzes | Array<QuizQuestion> | - | An array of quiz questions. Each question must have a question string and an array of options, with at least one option marked as correct. |
QuizQuestion
| Property | Type | Required | Description |
|---|---|---|---|
question | string | Yes | The question text to display. |
options | Array<{ text: string; correct?: boolean }> | Yes | An array of answer options. Each option has a text property and an optional correct boolean. At least one option should be marked as correct. |
Behavior
The component manages quiz state and provides interactive features:
- The component tracks the current question index, selected answer, score, and completion state internally.
- When a user selects an option, the component immediately shows visual feedback (green for correct, red for incorrect) and displays a confetti animation for correct answers.
- Once a correct answer is found, further selections are disabled for that question to prevent score manipulation.
- Users can skip to the next question or finish the quiz early using the action buttons.
- When the quiz is completed, a results screen displays the score, percentage, and a congratulatory message based on performance.
- Confetti animations are shown when a correct answer is selected and when the quiz is completed, with more intense animations at the end.
- The component automatically labels options with letters (A, B, C, D, etc.) for easy reference.
Usage Example
Basic usage with quiz questions
Loading...