Skip to main content

Quiz Component Example

The Quiz component provides an interactive assessment experience with multiple-choice questions, immediate feedback, and keyboard accessibility.

Features​

  • Multiple-choice questions with answer reveal
  • Explanations after each answer
  • Score summary at completion
  • Keyboard navigation (arrow keys, Enter)
  • Progress tracking
  • Responsive design
  • Accessibility features (ARIA labels, screen reader support)

Usage​

import Quiz from '@site/src/components/Quiz';

const questions = [
  {
    question: "What is the output of 2 + 2 * 3?",
    options: ["8", "12", "10", "7"],
    correct: 0,
    explanation: "Following order of operations, multiplication is performed before addition: 2 + (2 * 3) = 2 + 6 = 8"
  },
  {
    question: "Which of these is not a primitive type in JavaScript?",
    options: ["string", "number", "array", "boolean"],
    correct: 2,
    explanation: "Arrays are objects in JavaScript, not primitive types. Primitive types include string, number, boolean, undefined, null, and symbol."
  }
];

export default function Page() {
  return <Quiz questions={questions} />;
}

Question Structure​

Each question object must have:

  • question (string): The question text
  • options (array of strings): The available answer choices
  • correct (number): Index of the correct answer (0-based)
  • explanation (string): Explanation shown after answering

Keyboard Shortcuts​

When a question hasn't been answered:

  • ↑ / ↓ Arrow Keys: Navigate between options
  • Enter: Select focused option

When a question is answered:

  • ← / → Arrow Keys: Navigate to previous/next question
  • Home: Jump to first question
  • End: Jump to last question

Example Quiz​

Question 1 of 3

What does HTML stand for?

Use arrow keys to navigate, Enter to select

Customization​

The component uses CSS custom properties for theming. You can override these in your custom CSS:

  • --ifm-color-primary: Primary button and accent color
  • --ifm-color-success: Correct answer highlight
  • --ifm-color-danger: Incorrect answer highlight
  • --ifm-color-info: Selected option highlight