Per-question timer
Give each question a separate deadline with pause and resume controls.
Props demonstrated: questionTimer, allowPauseTimer. Every example also supplies the required quiz prop.
Try the quiz
Start the quiz and watch the 15-second question countdown. Pause and resume, or let a question expire to advance automatically. The final question expiry completes the quiz.
How it works
Each question receives its own budget. Expiry locks the question; untouched questions remain unanswered and partial multiple-answer selections count as incorrect. You can also combine questionTimer with an overall timer.
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 QuestionTimerExample() {
return <Quiz quiz={quiz} questionTimer={15} allowPauseTimer />;
}
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.',
},
],
};