Review before submitting
Edit answers and navigate between questions before revealing results.
Props demonstrated: revealAnswerOnSubmit, allowNavigation. Every example also supplies the required quiz prop.
Try the quiz
Select an answer, use Next and Prev to review it, then change your choice. Select two answers on the second question and press Next to confirm submission.
How it works
revealAnswerOnSubmit keeps correctness hidden until completion and lets you edit selections. It takes precedence over immediate feedback and correct-answer highlighting. allowNavigation permits skipping and revisiting questions, but submission requires complete answers. An incomplete submission shows an alert; a complete submission asks for confirmation.
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 from 'react-quiz-component';
import { quiz } from './quiz';
export default function ReviewBeforeSubmittingExample() {
return <Quiz quiz={quiz} revealAnswerOnSubmit allowNavigation />;
}
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.',
},
],
};