Callback events
Inspect submitted-answer and completion payloads without the built-in result page.
Props demonstrated: onQuestionSubmit, onComplete, showDefaultResult. Every example also supplies the required quiz prop.
Try the quiz
Answer each question and inspect its submission payload below the quiz. Complete the quiz to see the completion summary instead of the built-in result page.
How it works
onQuestionSubmit runs when an immediate attempt is evaluated; onComplete runs once per completed session. This example uses showDefaultResult={false} without a custom renderer, so the completion UI belongs to the surrounding application. The payloads shown here remain local to this demo. See Callbacks and results for deferred-mode delivery and payload details.
Implementation
Install react-quiz-component, then copy this component and the quiz.ts data file into the same directory. Quiz loads its own stylesheet automatically. The preview mounts in the browser; Next.js applications should use a client boundary.
'use client';
import { useState } from 'react';
import Quiz, { type QuizProps, type QuestionSummary } from 'react-quiz-component';
import { quiz } from './quiz';
type Submission = Parameters<NonNullable<QuizProps['onQuestionSubmit']>>[0];
export default function CallbacksExample() {
const [submissions, setSubmissions] = useState<Submission[]>([]);
const [summary, setSummary] = useState<QuestionSummary | null>(null);
return (
<div>
<Quiz
quiz={quiz}
showDefaultResult={false}
onQuestionSubmit={(data) => setSubmissions((previous) => [...previous, data])}
onComplete={setSummary}
/>
<section aria-label="Callback payloads">
<h2>Submitted answers ({submissions.length})</h2>
<pre style={{ overflow: 'auto', maxHeight: 320 }}>{JSON.stringify(submissions, null, 2)}</pre>
<h2>Completion summary</h2>
{summary ? (
<pre style={{ overflow: 'auto', maxHeight: 320 }}>{JSON.stringify(summary, null, 2)}</pre>
) : <p>Complete the quiz to see the summary.</p>}
</section>
</div>
);
}
Quiz data
import type { Quiz } from 'react-quiz-component';
export const quiz: Quiz = {
quizTitle: 'React essentials',
quizSynopsis: 'Two questions about React hooks and rendering.',
questions: [
{
question: 'Which hook stores local state?',
questionType: 'text',
answerSelectionType: 'single',
answers: ['useState', 'useEffect', 'useRef'],
correctAnswer: '1',
point: 10,
messageForCorrectAnswer: 'Correct! useState stores component state.',
messageForIncorrectAnswer: 'useState is the hook for local state.',
explanation: 'useState returns the current value and a setter.',
},
{
question: 'Which APIs render React content? Pick two.',
questionType: 'text',
answerSelectionType: 'multiple',
answers: ['createRoot', 'renderToString', 'querySelector'],
correctAnswer: [1, 2],
point: 20,
explanation:
'createRoot renders in the browser; renderToString renders HTML on the server.',
},
],
};