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.
`consents`	`ConsentsConfig`	Profile consent checkboxes. See Consents and the section below.
`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.
`shareCTA`	`ShareCTADetails`	See Share CTA.
`rulesDisplay`	`RulesDisplay`	See Rules Display.
`callbacks`	`ClassicQuizPlayCallbacks`	`onFinish` and `onShare` — see Callbacks.

Consents

Collect profile consents alongside the participation. The shape is the shared ConsentDef — see Consents for the full field reference, the URL tokens and the checkbox-count rule.

import { ConsentsConfig } from "fansunited-frontend-core";

const consents: ConsentsConfig = {
  items: [
    {
      consentId: "terms",
      body: "I accept the {{privacyPolicyUrl}} and the {{termsAndConditionsUrl}}",
      required: true,
      position: "before",
    },
    {
      consentId: "marketing",
      body: "Send me news and offers by email",
      defaultChecked: true,
      position: "after",
    },
  ],
  labels: {
    title: "Before we save your score",
    ctaLabel: "Continue",
  },
};

<ClassicQuizPlay {...otherProps} consents={consents} />

Where each checkbox appears:

Quiz configuration	Consent surface
`authRequirement: "LEAD"` + `leads.position` set	The lead form, at the lead's position — all consents, each `position` ignored
No lead form	`"before"` → the start screen (forced to appear for every quiz type); `"after"` → its own step before the participation is submitted

The "after" surface is a separate step rather than a checkbox next to the Finish button, so that reading it cannot inflate a timed quiz's score or let a countdown quiz auto-submit behind it. labels applies to both standalone surfaces; inside a lead form only requiredError is used.

Without ctaLabel, the start screen's button keeps the quiz's Start label and the consent step uses its Finish label — the step is what submits the participation. The last question's button then reads "Continue" rather than "Finish", since an "after" consent still has to be shown.

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" }}
/>