Default quiz
Try the default Quiz component with instant feedback, a progress bar, and a final score. Use the runnable component source and accompanying quiz data to add a complete, styled quiz to your application.
Props demonstrated: quiz, showInstantFeedback, and enableProgressBar.
Try the quiz
Answer the questions and review your results.
Implementation
Quiz includes its own styled interface and loads its CSS automatically. No stylesheet import or custom CSS is required.
Install react-quiz-component, then copy this component and the quiz.ts data file into the same directory. 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 DefaultExample() {
return <Quiz quiz={quiz} showInstantFeedback enableProgressBar />;
}
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.',
},
],
};
TypeScript types
Find the public TypeScript types for quiz data, component props, headless configuration, state, actions, and callback results. Import them directly from the package root and use the engine declarations as a reference for custom integrations.
Immediate start
Start a quiz immediately without a landing screen.