Quiz

Renders a multiple-choice quiz from createQuiz().

When every question has been answered and submitted, the quiz is graded with gradeQuiz() and the final score is shown. Pass onComplete to receive that result in your app.

This component does not use createQuizAttempt / completeQuizAttempt. Call those yourself when you need attempt records for persistence.

Usage

import { Quiz } from "@edu-sdk/react";
import "@edu-sdk/react/styles.css";

<Quiz
  questions={quiz.content}
  onComplete={(result) => {
    console.log(result.score, result.percentage);
  }}
/>

Props

type QuizProps = {
  questions: QuizQuestion[];
  className?: string;
  classNames?: QuizClassNames;
  onComplete?: (result: GradeQuizResult) => void;
};

onComplete runs once after the last question is submitted. Every question must be answered — there is no skip path.

Each question must include a required id. Generated questions may include optional topics; GradeQuizResult may include byTopic. This component does not display topics or byTopic yet — read them from onComplete if you need them. See Personalization.

classNames

Example

<Quiz
  questions={quiz.content}
  className="my-quiz"
  classNames={{
    question: "my-question",
    correctOption: "my-correct-answer"
  }}
  onComplete={(result) => {
    // Persist or react to GradeQuizResult
  }}
/>

See Styling for styles.css and CSS variables.