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 does "wallet balance" show?

---

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 does "immutable ledger" mean?

---

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 is a major red flag for a potential rug pull project?

---

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.