Retry until correct
Let learners retry a single-answer question while preserving first-attempt scoring.
Props demonstrated: continueTillCorrect, showInstantFeedback. Every example also supplies the required quiz prop.
Try the quiz
Choose useEffect first, then useState. Next becomes available after the correct answer. Complete the second question correctly to finish with 20 out of 30 points.
How it works
continueTillCorrect applies to immediate single-answer questions. Retrying does not recover points lost on the first attempt. Multiple-answer questions are evaluated once the required number of choices is selected.
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 RetryUntilCorrectExample() {
return <Quiz quiz={quiz} continueTillCorrect showInstantFeedback />;
}
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.',
},
],
};