Chance Game

Interactive chance-based game widget featuring three distinct game variants — Prize Wheel, Penalty Shootout, and Pick One of X. Game logic and branding are configured entirely through InfoPage entries in the Management Portal.

<div
	data-component="fu-widget"
	data-content-type="chance-game"
	data-content-id="your-info-page-id"
	data-layout-template="EMBED"
	data-chance-game-variant="prize_wheel"
></div>

Configuration Attributes

Attribute	Description	Options	Default
`data-layout-template`	Visual layout of the game	`"EMBED"`, `"STANDARD"`, `"OVERLAY"`	`"STANDARD"`
`data-chance-game-variant`	Which game variant to render	`"prize_wheel"`, `"penalty_shootout"`, `"pick_one_of_x"`	Config default
`data-image-position`	Image position (STANDARD template only)	`"left"`, `"right"`	Config default

📘
Note: data-chance-game-variant overrides the global chanceGameVariant config value. If neither is set, prize_wheel is used as a fallback.

Templates

Template	Description
`EMBED`	Compact radial-gradient layout. Fits the container width automatically. Best for sidebars and inline embeds.
`STANDARD`	Card-based layout with an optional side image. Supports `data-image-position`.
`OVERLAY`	Full-screen background overlay with a frosted-glass content container. Always renders in dark mode.

📘
Note: PENALTY_SHOOTOUT is only supported with the EMBED template.

Game Variants

Variant	Description
`prize_wheel`	Animated spinning wheel. Users click a button to spin and reveal their outcome. Supported in all templates.
`penalty_shootout`	Soccer penalty kick game. Users click a target on the goal. EMBED template only.
`pick_one_of_x`	Card or object picking game. Users select one item to reveal their outcome. Supported in all templates.

Features

Three game variants: Prize Wheel, Penalty Shootout, and Pick One of X
Three layout templates (Embed, Standard, Overlay)
Three selection modes: fair (equal odds), weighted (probability-based), win (always a winner)
Configurable animation speed (fast, normal, slow)
Per-segment result screens with primary and secondary CTAs
Optional visual decorations (glowing title, frame, patterns)
Custom branding via InfoPage configuration (colors, logos, background images)

Game Configuration

All game logic is configured in the InfoPage body (Management Portal) as a JSON string:

{
  "segments": [
    {
      "id": "segment-win",
      "label": "+50 POINTS",
      "isWinning": true,
      "weight": 3,
      "color": "#4CAF50",
      "results": {
        "title": "YOU WON!",
        "description": "Your reward is on its way.",
        "primaryCTA": {
          "label": "Claim Reward",
          "link": "https://example.com/claim"
        },
        "secondaryCTA": {
          "label": "Play Again",
          "link": "https://example.com/play"
        }
      }
    },
    {
      "id": "segment-lose",
      "label": "TRY AGAIN",
      "isWinning": false,
      "weight": 7,
      "results": {
        "title": "BETTER LUCK NEXT TIME",
        "primaryCTA": {
          "label": "Try Again",
          "link": "https://example.com/play"
        }
      }
    }
  ],
  "config": {
    "mode": "weighted",
    "pace": "normal",
    "decorations": false,
    "revealAll": false
  }
}

Selection Modes

Mode	Behavior
`fair`	All segments have equal probability regardless of `weight`
`weighted`	Probability is proportional to each segment's `weight` value
`win`	Outcome is always selected from segments where `isWinning` is `true`

Config Options

Option	Type	Default	Description
`mode`	`string`	`weighted`	Selection algorithm: `fair`, `weighted`, or `win`
`pace`	`string`	`normal`	Animation speed: `fast`, `normal`, or `slow`
`decorations`	`boolean`	`false`	Enable visual effects (glowing title, frame, patterns)
`revealAll`	`boolean`	`false`	Pick One of X only — reveal remaining items after the user selects one

Global Configuration

Set the default variant for all Chance Game widgets:

FuWidget.init({
	// ... other config
	chanceGameVariant: "prize_wheel", // "prize_wheel", "penalty_shootout", "pick_one_of_x"
});

Per-Widget Override

Override the variant for a specific widget instance:

<div
	data-component="fu-widget"
	data-content-type="chance-game"
	data-content-id="your-info-page-id"
	data-layout-template="STANDARD"
	data-chance-game-variant="pick_one_of_x"
	data-image-position="right"
></div>

Implementation Tips

PENALTY_SHOOTOUT requires EMBED: Using it with STANDARD or OVERLAY will fall through to the default template behavior.
Control odds with mode: Use win mode for guaranteed-win campaigns (e.g. first-play promotions), weighted for realistic probability distributions, and fair for equal-chance experiences.
Use revealAll for Pick One of X: Enabling this adds a reveal animation for remaining items after the user picks, increasing suspense and engagement.