Pick The Pair

Pair-matching game. Users match related items from two columns. Supports two game modes (casual and challenge), optional countdown timer, and real-time accuracy tracking.

Import

import { PickThePair } from "fansunited-frontend-components";
import { PickThePairProps, PickThePairTemplate } from "fansunited-frontend-core";

Required props

Optional props

Templates

PickThePair uses its own enum:

enum PickThePairTemplate {
  STANDARD = "standard",
  LANDING_PAGE = "landing_page",
  OVERLAY = "overlay",
}

Game modes

Game mode is configured in the Fans United backend, not via props.

Casual

• Relaxed matching, no scoring pressure.
• No success threshold; players match all pairs at their own pace.
• Best for educational content and brand awareness.

Challenge

• Accuracy-based with a configurable success threshold (successThresholdPercent).
• Real-time statistics: attempts, accuracy %, threshold indicator, matched pairs.
• Submit button is disabled until the threshold is met.

Countdown timer

Configured on the backend via timeLimit (in seconds). 0 disables the timer.

When enabled:

• Timer is displayed in MM:SS and updates in real time.
• Starts automatically on load.
• When time expires: all selections are disabled, a "Time's Up" overlay is shown, and the submit button is disabled.

Matching mechanics

1. The user clicks an item in one column.
2. The user clicks an item in the other column.
3. The component checks the pair ID:
   • Correct: items stay selected, images reveal (if configured), pair is marked matched.
   • Incorrect: red error animation (~800 ms), both selections clear.
4. All pairs must be matched to enable submit/continue.

Image behavior

• Images are hidden by default.
• Revealed on selection or match.
• Left column: image appears to the right of the text. Right column: image appears to the left.
• Supports separate main and mobile image variants.
• Gracefully handles pairs without images.

Accuracy tracking (Challenge mode)

The submit button is disabled until accuracy ≥ threshold.

Examples

Basic

<PickThePair
  entityId="pair-123"
  sdk={sdk}
  template={PickThePairTemplate.STANDARD}
  language="en"
/>

Challenge mode (backend config)

// Backend Pick The Pair configuration:
{
  "mode": "challenge",
  "timeLimit": 120,
  "successThresholdPercent": 75
}

<PickThePair
  entityId="timed-challenge-123"
  sdk={sdk}
  template={PickThePairTemplate.LANDING_PAGE}
  language="en"
  themeOptions={{ mode: "dark" }}
/>

With lead collection

<PickThePair
  entityId="brand-quiz-123"
  sdk={sdk}
  template={PickThePairTemplate.OVERLAY}
  language="en"
  leads={{
    position: "after",
    fields: ["fullName", "email", "phoneNumber"],
    campaignId: "brand-awareness",
    campaignName: "Product Knowledge Challenge",
    phoneCountryCode: "44",
    syncWithProfile: true,
  }}
  themeOptions={{ mode: "light" }}
/>