Skip to main content

Get Involved

Whether you are a developer, designer, writer, project builder, or just someone passionate about Cardano.

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​

PropTypeDefaultDescription
quizDataobjectrequiredQuiz data object containing questions and metadata
questionCountnumber5Number of questions to randomly select from the quiz
allowRetrybooleantrueWhether users can retry incorrect answers
passingScorenumber60Minimum 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 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 does "wallet balance" show?

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 before investing in a new Cardano 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} />
  • 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)

You can create additional quiz files for different topics.