Quiz Modal

QuizModal

A one-line composition of Modal and Quiz: a trigger button that opens the quiz in a dialog labeled "Quiz". All quiz behavior belongs to Quiz, all dialog behavior to Modal. This component only forwards props.

Quiz Card wraps it in a styled card, and QuizHub uses it for every quiz on /quiz.

Basic Usage

Classic usage, as Quiz Card does it:

import QuizModal from '@site/src/components/QuizModal';
import quizData from '@site/src/data/quiz-demo.json';

<QuizModal
  quizData={quizData}
  buttonText="Test Your Knowledge"
  questionCount={5}
  passingScore={60}
  allowRetry={true}
/>

Hub mode, from src/components/QuizHub/index.js:

<QuizModal
  quizData={data}
  questionCount={data.questionCount}
  allowRetry={false}
  onRecord={onRecord}
  academyCta={getAcademyCta(entry.academyKey, entry.id)}
  buttonText={translate({ id: 'quiz.hub.start', message: 'Start quiz' })}
  buttonClassName={styles.cardCta}
/>

Props

Prop	Type	Default	Description
quizData	object	-	The quiz JSON, see the Quiz data format. Required.
buttonText	string	"Test Your Knowledge"	Content of the trigger button. Pass a translated string, the default is English only.
questionCount	number	5	Forwarded to Quiz. Number of questions sampled per run.
allowRetry	boolean	true	Forwarded to Quiz. Whether a retry button appears after a failed run.
passingScore	number	60	Forwarded to Quiz. Minimum percentage to pass.
onRecord	function	null	Forwarded to Quiz. (correct, total) => void, switches the quiz into hub mode.
academyCta	object	null	Forwarded to Quiz. Follow-up link shown on the hub mode result screen.
buttonClassName	string	-	Forwarded to Modal. Replaces the default trigger button style.

Live Preview

Notes

• The dialog label is hardcoded to "Quiz", which also yields the close button label "Close quiz".
• The Two Column Layout example on the common scams page uses Quiz Card, not this component directly.
• For the full list of quiz props, hub mode, and the data format, read Quiz.