Skip to main content

Countdown

A transition timer that displays a countdown before automatically advancing to the next node. Useful for creating anticipation, giving participants time to prepare, or providing breaks between activities.

Example structures​

Simple countdown​

{
  "type": "Countdown",
  "autoNext": 5,
  "data": {}
}

Countdown with message​

{
  "type": "Countdown",
  "autoNext": 10,
  "data": {
    "text": "Get ready for the next question!"
  }
}

Question preview countdown​

{
  "type": "Countdown",
  "autoNext": 5,
  "data": {
    "text": "What best describes 'conspiracy hypothesis'?"
  }
}

Break timer​

{
  "type": "Countdown",
  "autoNext": 30,
  "data": {
    "text": "Take a short break!\nWe'll continue in..."
  }
}

Required Properties​

  • autoNext (number) - Seconds before automatically advancing to the next node
    • Must be greater than 0 for the countdown to function
    • Inherited from DefaultNode base class
    • Timer is displayed in large text at the center of the screen

Optional Properties​

  • data.text (string, optional) - Message displayed above the countdown timer
    • Supports multiline text (use \n for line breaks in JSON)
    • Rendered in large, centered format
    • Useful for:
      • Setting context ("Next up: Quiz Time!")
      • Previewing upcoming content
      • Giving instructions ("Prepare your answers...")
      • Creating anticipation
    • If omitted, only the countdown number is shown

Visual Design​

Layout​

  • Full-height, full-width centered display
  • Vertically and horizontally centered content
  • Large typography for maximum visibility

Text Styling​

  • Font: GT Flexa (custom workshop font)
  • Size: text-6xl (very large)
  • Alignment: Center
  • Message appears above countdown with mb-20 (5rem bottom margin)

Countdown Number​

  • Displayed in the same large font
  • Updates every second
  • Positioned below optional text message
  • Visible to all participants and host

Behavior​

Auto-advancement​

  • Countdown starts automatically when node is initialized
  • Timer decrements every second
  • Automatically advances to the next node when reaching 0
  • Cannot be paused or stopped by participants (host can manually navigate if needed)

Timing​

  • Uses workshop tickrate for accurate timing (typically 10 ticks per second)
  • autoNext value is multiplied by tickrate internally
  • Display shows remaining seconds (rounded up)
  • Example: autoNext: 5 creates a 5-second countdown (5, 4, 3, 2, 1, 0 → advance)

Universal Display​

  • Same view for both host and participants
  • No special host controls or participant interactions
  • Pure informational display

Use Cases​

1. Question Preview​

Show the upcoming question text during countdown to build anticipation:

{
  "type": "Countdown",
  "autoNext": 5,
  "data": {
    "text": "Next Question:\nWhich element has atomic number 79?"
  }
}

2. Activity Transition​

Give participants time to prepare for a different activity type:

{
  "type": "Countdown",
  "autoNext": 10,
  "data": {
    "text": "Switching to group work!\nFind your team members..."
  }
}

3. Break Timer​

Create structured breaks in longer workshops:

{
  "type": "Countdown",
  "autoNext": 60,
  "data": {
    "text": "Short Break\nBe back in..."
  }
}

4. Suspense Builder​

Build anticipation without revealing content:

{
  "type": "Countdown",
  "autoNext": 3,
  "data": {
    "text": "Results loading..."
  }
}

5. Silent Timer​

Just show a countdown with no message:

{
  "type": "Countdown",
  "autoNext": 5,
  "data": {}
}

Integration with Workshop Flow​

Sequence Example​

A typical quiz flow with countdown:

[
  {
    "type": "Slide",
    "data": {
      "headline": "Ready for Round 2?",
      "text": "Let's test your knowledge!"
    }
  },
  {
    "type": "Countdown",
    "autoNext": 5,
    "data": {
      "text": "First question coming up..."
    }
  },
  {
    "type": "Quiz",
    "data": {
      "text": "What is the capital of France?",
      "options": ["London", "Paris", "Berlin", "Madrid"],
      "answer": [2],
      "answerTime": 20
    }
  }
]

With Question Preview​

Use countdown to preview the question before starting the timer:

[
  {
    "type": "Countdown",
    "autoNext": 5,
    "data": {
      "text": "What is 2+2?"
    }
  },
  {
    "type": "Quiz",
    "data": {
      "text": "What is 2+2?",
      "options": ["3", "4", "5", "6"],
      "answer": [2],
      "answerTime": 15
    }
  }
]

Node Inheritance​

Countdown inherits from DefaultNode, which provides:

  • autoNext functionality (required for Countdown to work)
  • autoNextTimeLeft - Current seconds remaining (displayed on screen)
  • autoNextActive - Whether auto-advance is enabled
  • Standard node lifecycle methods (init, loop, sendData)

The Countdown node has no custom logic beyond displaying the inherited autoNextTimeLeft value.

Host View​

Host sees identical view to participants with one addition:

  • Navigation UI may show "Next node in X seconds" (standard for all auto-advancing nodes)
  • Host can manually navigate forward/backward if needed, overriding the countdown

Technical Notes​

  • No custom server-side logic: Countdown uses only DefaultNode base implementation
  • Purely visual: No participant interaction or data collection
  • No state persistence: Countdown resets if node is re-entered
  • Responsive: Text automatically wraps on smaller screens

Example: Complete Workshop Section​

{
  "nodes": [
    {
      "type": "Slide",
      "data": {
        "headline": "Round 3: Speed Round!",
        "subheading": "Answer as fast as you can"
      }
    },
    {
      "type": "Countdown",
      "autoNext": 5,
      "data": {
        "text": "Get ready...\nFirst question in..."
      }
    },
    {
      "type": "Quiz",
      "data": {
        "text": "Question 1: What is H2O?",
        "options": ["Water", "Hydrogen", "Oxygen", "Carbon"],
        "answer": [1],
        "answerTime": 10
      }
    },
    {
      "type": "Countdown",
      "autoNext": 3,
      "data": {
        "text": "Next question..."
      }
    },
    {
      "type": "Quiz",
      "data": {
        "text": "Question 2: What is CO2?",
        "options": ["Water", "Carbon Dioxide", "Oxygen", "Nitrogen"],
        "answer": [2],
        "answerTime": 10
      }
    }
  ]
}