Submit and quit
Finish early with partial results, including while the timer is paused.
Props demonstrated: allowQuit, timer, allowPauseTimer. Every example also supplies the required quiz prop.
Try the quiz
Start, answer the first question, and pause the timer. Choose Submit and quit, cancel once to keep the session, then confirm to finish with partial results.
How it works
allowQuit offers a confirmed exit after the quiz starts, including while paused. Cancelling preserves the session; confirming stops the timer and shows results. Untouched questions remain unanswered and partial multiple-answer selections count as incorrect.
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 SubmitAndQuitExample() {
return <Quiz quiz={quiz} timer={60} allowPauseTimer allowQuit />;
}
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.',
},
],
};