Edu SDKQuiz
Render a quiz generated by createQuiz.
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.
classNames
| Key | Part |
|---|---|
root | Root container |
progress | Question index |
question | Question text |
options | Options list |
option | Each option button |
selectedOption | Selected option |
correctOption | Correct option after submit |
incorrectOption | Incorrect selected option |
feedback | Correct / incorrect message |
result | Final score |
controls | Button row |
previousButton | Previous button |
nextButton | Next button |
submitButton | Submit button |
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.