Example div element

<div
	data-component="fu-widget"
	data-content-type="classic-quiz"
	data-content-id="your-quiz-id"
	data-lead-fields="fullName,email"
	data-lead-position="after"
	data-lead-sync-with-profile="true"
	data-campaign-id="campaign-1"
	data-campaign-name="Summer Campaign"
	data-signin-cta-label="Join Now to Play!"
	data-signin-cta-onclick="showSignInModal()"
	data-share-cta-label="Share Result"
	data-share-cta-onclick="openShareModal()"
	data-layout-template="STANDARD"
	data-image-position="left"
	data-show-answer-explanations="true"
	data-options-layout="column"
></div>

Configuration Attributes

Deck Template

"DECK" is a fourth layout that only the Classic Quiz has. It lays the quiz out as a casino table: every question is a face-down card, and the player turns them over in whatever order they like. Picking an answer reveals the result and the explanation immediately, on the card itself — there is no Next button. Once every card has been played, the Finish button submits the participation.

<div
	data-component="fu-widget"
	data-content-type="classic-quiz"
	data-content-id="your-quiz-id"
	data-layout-template="DECK"
	data-classic-quiz-deck-entrance="flip"
	data-classic-quiz-deck-open-icon="eye"
></div>

The same settings can be applied to every quiz on the page at once:

FuWidget.init({
	// ... other config
	classicQuiz: {
		deck: {
			entrance: "flip", // "deal" (default), "flip", "none"
			openIcon: "eye", // "chevron" (default), "eye", "flip", "dot", or an image URL
		},
	},
});

Both settings are optional, and so is deck itself — omit it for the defaults. Data attributes are merged over the init() values field by field, so an element can override the entrance while keeping the configured mark.

Custom open-card mark

Pass a URL instead of a preset name to use your own artwork:

<div
	data-component="fu-widget"
	data-content-type="classic-quiz"
	data-content-id="your-quiz-id"
	data-layout-template="DECK"
	data-classic-quiz-deck-open-icon="https://cdn.example.com/icons/reveal.svg"
></div>

The mark is decorative, so it needs no alt text.

What the deck does differently

• optionsLayout is ignored. The open card draws its own auto-fitting option grid.
• Timing is per card. On a countdown quiz the clock restarts each time a card is turned over, and expiry banks a blank answer for that card. On a timed quiz the clock only runs while a card is open, so browsing the table between cards is free and the reported total is time spent answering rather than wall-clock time.
• imagePosition is ignored as well — it applies to "STANDARD" only.
• A deferred sign-in gate counts cards. signInCTA.gate = { position: "step", afterStep: n } fires after the player has closed their n-th card, so the gate never interrupts a result they are still reading.

The table felt and the card backs are tinted from the theme's primary colour (or the quiz's branding colour when it has one), and the card front shows the sponsor logo when one is configured or a ? mark when it is not. The banner band's gradient is themeable through imageBackgroundGradient.light.deck and imageBackgroundGradient.dark.deck — see Features → Theme Configuration.

Features

• Multiple choice questions
• Four layout templates (Standard, Split, Overlay, Deck)
• Timer support
• Score tracking
• Results display
• Prize support
• Lead collection
• Customizable sign-in CTA
• Responsive design