Custom results
Replace the default result page with your own score summary.
Props demonstrated: showDefaultResult, customResultPage. Every example also supplies the required quiz prop.
Try the quiz
Answer both questions to see a custom result summary with your score and the number of correct answers.
How it works
Always pair customResultPage with showDefaultResult={false}. The renderer receives a QuestionSummary. Leaving the default results enabled while supplying a custom renderer suppresses both result bodies.
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 Quiz, { type QuestionSummary } from 'react-quiz-component';
import { quiz } from './quiz';
function renderResults(summary: QuestionSummary) {
return (
<section aria-label="Custom quiz results">
<h2>Your results</h2>
<p>Score: {summary.correctPoints} / {summary.totalPoints}</p>
<p>Correct answers: {summary.numberOfCorrectAnswers} / {summary.numberOfQuestions}</p>
</section>
);
}
export default function CustomResultsExample() {
return <Quiz quiz={quiz} showDefaultResult={false} customResultPage={renderResults} />;
}
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.',
},
],
};
Callback events
Inspect submitted-answer and completion payloads without the built-in result page.
Standalone hook
Build a custom quiz interface around a standalone useQuiz session. Try starting the quiz, selecting answers, and viewing the final score, then explore the runnable source and quiz data behind the preview.