Quiz behavior

The snippets below assume a valid quiz object exported from ./quiz. Place the shown JSX in your component's return value. The default example provides complete sample data.

Shuffle QuestionsCopy Anchor Link

import Quiz from 'react-quiz-component';
import { quiz } from './quiz';

<Quiz quiz={quiz} shuffle />;

Shuffle AnswersCopy Anchor Link

import Quiz from 'react-quiz-component';
import { quiz } from './quiz';

<Quiz quiz={quiz} shuffleAnswer />;

Instant FeedbackCopy Anchor Link

import Quiz from 'react-quiz-component';
import { quiz } from './quiz';

<Quiz quiz={quiz} showInstantFeedback />;

Reveal correct choices immediatelyCopy Anchor Link

Use showCorrectAnswer to highlight the correct choice after a single-answer attempt, or all correct choices after a complete multiple-answer attempt:

<Quiz quiz={quiz} showCorrectAnswer showInstantFeedback />

showInstantFeedback controls the message separately; it is not required for highlighting. Correct choices that the user did not select remain unselected. With continueTillCorrect, retries remain available and scoring still uses the first attempt. revealAnswerOnSubmit takes precedence and keeps correctness hidden until quiz completion.

Headless consumers pass showCorrectAnswer to useQuiz or QuizProvider and render state.answers[].feedback.

Retry Until CorrectCopy Anchor Link

import Quiz from 'react-quiz-component';
import { quiz } from './quiz';

<Quiz quiz={quiz} continueTillCorrect />;

Reveal Answer On SubmitCopy Anchor Link

import Quiz from 'react-quiz-component';
import { quiz } from './quiz';

<Quiz quiz={quiz} revealAnswerOnSubmit />;

Previous And Next NavigationCopy Anchor Link

import Quiz from 'react-quiz-component';
import { quiz } from './quiz';

<Quiz quiz={quiz} allowNavigation />;

TimerCopy Anchor Link

import Quiz from 'react-quiz-component';
import { quiz } from './quiz';

<Quiz quiz={quiz} timer={60} />;

Per-question timerCopy Anchor Link

Give each question its own time budget, optionally alongside an overall limit:

<Quiz quiz={quiz} questionTimer={30} timer={180} allowPauseTimer />;

Expiry locks the question and advances automatically; expiry on the final available question completes the quiz. Unanswered questions stay unanswered and partial multiple selections count as incorrect. Navigation preserves each question’s remaining budget, including on revisit. See Per-question deadlines for submission, delayed-callback, and review behavior.

Pause And Resume TimerCopy Anchor Link

import Quiz from 'react-quiz-component';
import { quiz } from './quiz';

<Quiz quiz={quiz} timer={60} allowPauseTimer />;

Progress BarCopy Anchor Link

import Quiz from 'react-quiz-component';
import { quiz } from './quiz';

const quizWithProgressColor = {
  ...quiz,
  progressBarColor: '#34d399',
};

<Quiz quiz={quizWithProgressColor} enableProgressBar />;

Disable Landing SynopsisCopy Anchor Link

import Quiz from 'react-quiz-component';
import { quiz } from './quiz';

<Quiz quiz={quiz} disableSynopsis />;

Completion CallbackCopy Anchor Link

import Quiz from 'react-quiz-component';
import { quiz } from './quiz';

const handleComplete = (summary) => {
  console.log(summary);
};

<Quiz quiz={quiz} onComplete={handleComplete} />;

Question Submit CallbackCopy Anchor Link

import Quiz from 'react-quiz-component';
import { quiz } from './quiz';

const handleQuestionSubmit = ({ question, userAnswer, isCorrect }) => {
  console.log(question, userAnswer, isCorrect);
};

<Quiz quiz={quiz} onQuestionSubmit={handleQuestionSubmit} />;

Custom Result PageCopy Anchor Link

Set showDefaultResult to false when using customResultPage.

import Quiz from 'react-quiz-component';
import { quiz } from './quiz';

const renderCustomResultPage = (summary) => {
  return (
    <div>
      <h2>Custom result page</h2>
      <p>
        You scored {summary.correctPoints} out of {summary.totalPoints}.
      </p>
    </div>
  );
};

<Quiz
  quiz={quiz}
  showDefaultResult={false}
  customResultPage={renderCustomResultPage}
/>;

Behavior detailsCopy Anchor Link

• Immediate mode evaluates single answers on selection and multiple answers when the required selection count is reached. showInstantFeedback controls messages; correctness styles still follow the engine's answer state.
• continueTillCorrect applies to immediate single-answer questions. Retrying does not recover points lost on the first attempt.
• revealAnswerOnSubmit defers correctness feedback until quiz completion. Multiple selections can be toggled. Without allowNavigation, select exactly the requested number of answers before Next becomes available. Pair it with allowNavigation to let users review answers before submission.
• allowNavigation permits skipping between questions, but manual submission requires a finished answer for every question whose time budget has not expired. See the exact submission rules for multiple-answer and retry modes. The default UI shows an alert for incomplete submission and a confirmation dialog for completed submission when navigation is enabled. Headless actions show no browser dialogs.
• disableSynopsis skips the entire landing screen and starts the session immediately.
• Timers start with the quiz, stop while paused, and complete the quiz on expiry, including unanswered questions. timeTaken is zero when neither timer is configured.
• Timers account for elapsed active time, including delayed browser callbacks. Pausing preserves fractional seconds and excludes paused time. Expiry is checked before accepting answers, pausing, or submitting; timeRemaining is rounded up for display and timeTaken can include fractional seconds.
• Progress counts questions with the required number of selected answers, regardless of correctness. Skipping questions does not increase it, partial or excessive multiple selections do not count, and timeout preserves actual progress.
• Shuffling occurs on session creation or reset. Answer indexes in prepared questions and callback payloads reflect the shuffled order.

Early completionCopy Anchor Link

Set allowQuit to offer a confirmed exit with partial results:

<Quiz quiz={quiz} allowQuit onComplete={(summary) => saveResults(summary)} />

The button is available after starting, including while paused. Cancelling the confirmation keeps the session running. Confirming ends the session, stops its timer, and shows the configured result page. Partial multiple-answer selections are incorrect; untouched questions stay unanswered. Customize the button and confirmation through quiz.appLocale.quitQuizBtn and quitQuizConfirm.

Headless renderers can call actions.quitQuiz() when state.canQuit is true and provide their own confirmation. Normal submitQuiz() still requires complete answers.