Immediate feedback
Show feedback messages and highlight correct choices after an attempt.
Props demonstrated: showInstantFeedback, showCorrectAnswer. Every example also supplies the required quiz prop.
Try the quiz
Choose useEffect to see an incorrect message and the correct choice highlighted. On the next question, select two choices to evaluate your answer.
How it works
showInstantFeedback controls messages; showCorrectAnswer independently highlights the correct choices after evaluation. A multiple-answer question is evaluated when the required number of choices is selected. Correct choices that you did not select stay unselected.
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 ImmediateFeedbackExample() {
return <Quiz quiz={quiz} showInstantFeedback showCorrectAnswer />;
}
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.',
},
],
};