Edu SDKEdu SDK
React

Quiz

Render a quiz generated by createQuiz.

Renders a multiple-choice quiz from createQuiz().

Usage

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

<Quiz questions={quiz} />

Props

type QuizProps = {
  questions: QuizQuestion[];
  className?: string;
  classNames?: QuizClassNames;
};

classNames

KeyPart
rootRoot container
progressQuestion index
questionQuestion text
optionsOptions list
optionEach option button
selectedOptionSelected option
correctOptionCorrect option after submit
incorrectOptionIncorrect selected option
feedbackCorrect / incorrect message
resultFinal score
controlsButton row
previousButtonPrevious button
nextButtonNext button
submitButtonSubmit button

Example

<Quiz
  questions={quiz}
  className="my-quiz"
  classNames={{
    question: "my-question",
    correctOption: "my-correct-answer"
  }}
/>

See Styling for styles.css and CSS variables.

On this page