Classic Quiz Play

Interactive quiz component with scoring, three templates, optional answer explanations, lead collection, sign-in gating, and a configurable additional CTA on the results screen.

Import

import { ClassicQuizPlay } from "fansunited-frontend-components";
import { ClassicQuizPlayProps, WidgetTemplate } from "fansunited-frontend-core";

Required props

Prop	Type	Description
`entityId`	`string`	Classic Quiz identifier (from the Fans United backend).
`sdk`	`FansUnitedSDKModel`	SDK instance.
`template`	`WidgetTemplate`	Layout — `STANDARD`, `SPLIT`, or `OVERLAY`.
`language`	`LanguageType`	Display language.

Optional props

Prop	Type	Description
`themeOptions`	`CustomThemeOptions`	See Theming.
`showAnswerExplanations`	`boolean`	Show explanations on the results screen.
`leads`	`LeadsOptions`	See Lead Collection.
`imagePosition`	`"left" \| "right"`	`STANDARD` template only.
`defaultImagePlaceholderUrl`	`string`	Fallback image URL.
`userIsLoggedIn`	`boolean`	Pass the host's auth state for sign-in-gated quizzes.
`signInCTA`	`SignInCTADetails`	See Sign-in CTA.
`additionalCTA`	`AdditionalCTADetails`	See Additional CTA.
`rulesDisplay`	`RulesDisplay`	See Rules Display.

Answer explanations

Set showAnswerExplanations={true} to reveal per-question explanations on the results screen. The explanations come from the quiz's question configuration on the backend.

<ClassicQuizPlay {...otherProps} showAnswerExplanations={true} />

Examples

Basic

<ClassicQuizPlay
  entityId="quiz-123"
  sdk={sdk}
  template={WidgetTemplate.STANDARD}
  language="en"
/>

Fully customized

<ClassicQuizPlay
  entityId="quiz-123"
  sdk={sdk}
  template={WidgetTemplate.OVERLAY}
  language="en"
  showAnswerExplanations
  userIsLoggedIn={false}
  signInCTA={{ defaultLabel: "Sign in", onClick: openSignIn }}
  leads={{
    position: "after",
    fields: ["fullName", "email"],
    campaignId: "quiz-2024",
    campaignName: "Quiz Campaign 2024",
    phoneCountryCode: "44",
    syncWithProfile: true,
  }}
  additionalCTA={{
    defaultLabel: "Learn more",
    url: "https://example.com",
    target: "_blank",
  }}
  rulesDisplay={{ type: "modal" }}
  themeOptions={{ mode: "dark" }}
/>