Quiz

Quiz

The Quiz component displays an interactive quiz with multiple-choice questions. It supports random question selection, immediate feedback, explanations, and score tracking. Perfect for educational content and knowledge testing.

Basic Usage

import Quiz from '@site/src/components/Quiz';
import quizData from '@site/src/data/quiz-demo.json';

<Quiz quizData={quizData} />

Live Preview:

Cardano Basics Quiz

Test your Cardano knowledge with this short quiz.

What does "immutable ledger" mean?

---

Props

Prop	Type	Default	Description
quizData	object	required	Quiz data object containing questions and metadata
questionCount	number	5	Number of questions to randomly select from the quiz
allowRetry	boolean	true	Whether users can retry incorrect answers
passingScore	number	60	Minimum percentage required to pass (0-100)

---

Quiz Data Format

The quiz component expects a JSON file with the following structure:

{
  "title": "Quiz Title",
  "description": "Optional description of the quiz",
  "questions": [
    {
      "id": 1,
      "question": "What is a dapp?",
      "options": [
        "A decentralized application running on a blockchain",
        "A car company",
        "A database error",
        "A food delivery service"
      ],
      "correctAnswer": 0,
      "explanation": "A dapp is a decentralized application..."
    }
  ]
}

Field Descriptions

• title (string, optional): Main title displayed above the quiz
• description (string, optional): Brief description shown below the title
• questions (array, required): Array of question objects
  • id (number): Unique identifier for the question
  • question (string): The question text
  • options (array of strings): 4 answer choices (displayed as A, B, C, D)
  • correctAnswer (number): Index of the correct option (0-3)
  • explanation (string, optional): Explanation shown after answering

---

Features

Random Question Selection

• Automatically selects random questions from the provided data
• Control the number of questions with questionCount prop
• Each quiz session shows different questions (if pool is large enough)

Interactive Feedback

• Visual states: Questions cards change color based on correct/incorrect answers
• Immediate feedback: Shows whether answer is correct or incorrect
• Explanations: Optional detailed explanations after each answer
• Try again: Allows retry on incorrect answers (configurable via allowRetry prop)

Progress Tracking

• Progress bar: Visual indicator showing current question position
• Score tracking: Calculates final score as percentage
• Results screen: Shows final score with pass/fail indication (configurable via passingScore prop)

Answer Randomization

• Shuffled options: Answer positions vary for each question to prevent pattern memorization
• Shuffled questions: Random question selection from the pool each session

Visual Design

• Color-coded states:
  • Green: Correct answers
  • Red: Incorrect answers
  • Purple: Selected (before checking)
  • Gray: Unselected
• Icons: Checkmark for correct, X for incorrect
• Smooth transitions: All state changes are animated

---

Examples

Basic Quiz (5 Questions)

<Quiz quizData={quizData} questionCount={5} />

Full Quiz (All Questions)

To show all available questions, set questionCount to a high number:

<Quiz quizData={quizData} questionCount={100} />

Quiz Without Retry Option

Disable the retry button for incorrect answers:

<Quiz quizData={quizData} allowRetry={false} />

Cardano Basics Quiz

Test your Cardano knowledge with this short quiz.

What is a "dapp"?

---

Custom Passing Score

Set a higher passing threshold (e.g., 80%):

<Quiz quizData={quizData} passingScore={80} />

Cardano Basics Quiz

Test your Cardano knowledge with this short quiz.

What is the purpose of metadata in a transaction?

---

Strict Quiz Mode

Combine no retry with a high passing score:

<Quiz quizData={quizData} allowRetry={false} passingScore={80} />

Cardano Basics Quiz

Test your Cardano knowledge with this short quiz.

What is a "dapp"?

---

Scam Awareness Quiz

Using the scam awareness quiz (10 questions):

import scamQuiz from '@site/src/data/quiz-scams.json';

<Quiz quizData={scamQuiz} questionCount={5} passingScore={80} />

Common Scams Awareness Quiz

Test your knowledge about common scams in the blockchain space and how to protect yourself.

What should you do if someone contacts you claiming to be official Cardano support?

---

Creating Quiz Data

Step 1: Create JSON File

Create a new JSON file in /src/data/ (e.g., quiz-cardano-advanced.json):

{
  "title": "Advanced Cardano Quiz",
  "description": "Test your deeper knowledge of Cardano",
  "questions": [
    {
      "id": 1,
      "question": "Your question here?",
      "options": [
        "Option A",
        "Option B",
        "Option C",
        "Option D"
      ],
      "correctAnswer": 0,
      "explanation": "Detailed explanation of the correct answer."
    }
  ]
}

Step 2: Import and Use

import Quiz from '@site/src/components/Quiz';
import advancedQuiz from '@site/src/data/quiz-cardano-advanced.json';

<Quiz quizData={advancedQuiz} questionCount={8} />

---

Integration Example

import Quiz from '@site/src/components/Quiz';
import quizData from '@site/src/data/quiz-demo.json';

<Quiz quizData={quizData} questionCount={5} />

---

Internationalization (i18n)

All UI strings in the Quiz component (Correct!, Incorrect, Check answer, Try again, Next question, Finish quiz, Explanation, score text, etc.) use translate() from @docusaurus/Translate and can be translated via i18n/<locale>/code.json under the quiz.ui.* namespace.

Quiz content (questions, options, explanations) comes from the JSON data file. To support multiple languages, create a locale-specific copy (e.g., quiz-scams.de.json) and select the correct file in the parent page based on currentLocale:

import quizDataEn from '@site/src/data/quiz-example.json';
import quizDataDe from '@site/src/data/quiz-example.de.json';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

const {i18n: {currentLocale}} = useDocusaurusContext();
const quizData = currentLocale === 'de' ? quizDataDe : quizDataEn;

<Quiz quizData={quizData} />

Available Translation Keys

Key	English Default
quiz.ui.noQuestions	No quiz questions available.
quiz.ui.greatJob	Great job!
quiz.ui.keepLearning	Keep learning!
quiz.ui.scoreText	You scored {score} out of {totalQuestions}
quiz.ui.tryAgain	Try again
quiz.ui.correct	Correct!
quiz.ui.incorrect	Incorrect
quiz.ui.explanation	Explanation
quiz.ui.checkAnswer	Check answer
quiz.ui.nextQuestion	Next question
quiz.ui.finishQuiz	Finish quiz

---

Related Components

• FAQ Component - For Q&A content without scoring
• Tutorial pages - Educational content that can be reinforced with quizzes

---

Available Quiz Files

• quiz-demo.json - Cardano fundamentals (5 questions)
• quiz-scams.json - Common scam awareness (10 questions)
• quiz-scams.de.json - Common scam awareness, German (10 questions)

You can create additional quiz files for different topics.