Skip to main content

Scoreboard

Displays quiz results and rankings, optionally with a podium reveal before the final leaderboard.

Example structures​

Simple leaderboard (no podium)​

{
  "type": "Scoreboard",
  "data": {
    "showPodium": false
  }
}

With podium reveal​

{
  "type": "Scoreboard",
  "data": {
    "showPodium": true
  }
}

Properties​

data.showPodium (boolean, optional) Whether to show a podium reveal before the final leaderboard. Default: false.

Visual design​

  • With podium: renders <Podium scoreboard={...} matchId={...} /> and no background image.
  • Without podium: renders <ScoreboardUI scoreboard={...} /> and shows the full-screen background image (/page/BackgroundScoreboard.png via next/image).
{nodeData.showPodium ? (
  <Podium scoreboard={nodeData.scoreboard} matchId={props.workshop.matchID} />
) : (
  <ScoreboardUI scoreboard={nodeData.scoreboard} />
)}

{!nodeData.showPodium && (
  <div className="absolute top-0 h-screen w-screen z-[-1]">
    <Image fill sizes="100%" src="/page/BackgroundScoreboard.png" alt="Background" />
  </div>
)}

Behavior​

Initialization​

  • showPodium: true: starts the host’s looping podium background (PodiumBg). Sets the internal step index to 0 (or 1 if re-entering via “back”).
  • showPodium: false: plays a single count-up sound and shows the final leaderboard immediately.

Data payload​

sendData() emits:

{
  "scoreboard": "<resolved by renderScoreboard(...)>",
  "showPodium": true|false
}

When showPodium is enabled, it is only sent as true while index < 1. After advancing, clients receive showPodium: false and display the final leaderboard.

Step logic (podium mode)​

Two steps controlled by the host:

  1. index = 0 → podium is shown. “Next” sets index = 1, resends payload (now showPodium: false), and stays on the node.
  2. index = 1 → final leaderboard. The next “Next” leaves the node. “Back” from index = 1 returns to index = 0 and re-shows the podium.

Without podium, “Next” leaves the node immediately.

Audio​

The node disables the default sound and registers targeted assets:

  • Podium mode (clients + host): MobileAward1, MobileAward2, MobileAward3 (clients), PodiumBg (host, loop), DrumRoll (host).
  • No podium: CountUpRand (host).

PodiumBg starts in init() for podium mode; DrumRoll can be used for dramatic reveals (e.g., before rank 1).

Host control​

Host-only node (onlyHost = true). The host advances or rewinds the two podium steps; participants have no controls.

Integration examples​

End of a quiz with podium reveal:

[
  {
    "type": "Quiz",
    "data": {
      "text": "Final question...",
      "options": ["A","B","C","D"],
      "answer": [2],
      "answerTime": 20
    }
  },
  {
    "type": "Scoreboard",
    "data": { "showPodium": true }
  }
]

Direct leaderboard (no reveal):

{ "type": "Scoreboard", "data": { "showPodium": false } }

Technical notes​

  • Class: ScoreboardNode extends DefaultNode, sets onlyHost = true, and maintains:

    interface ScoreboardNodeState { showPodium: boolean; index: number }

    index is internal and not user-configurable.

  • Lifecycle:

    • init() sets/adjusts index and starts the appropriate audio.
    • sendData() emits { scoreboard, showPodium } where showPodium is true only during the first podium step.
    • next()/back() move between index 0 ↔ 1 in podium mode (sending intermediate payloads) or exit immediately when no podium is used.

  • scoreboard is produced by renderScoreboard(nk, state) and consumed as a ScoreboardObject on the client (treated as read-only).