Forum Discussion

JamesBertels391's avatar
JamesBertels391
Community Member
2 years ago

Countdown timer in JavaScript

This JavaScript countdown timer is very simple to use.

The timer is set to 5 minutes (5:00) by default. You can change the timer to ten seconds (0:10), or up to 99 minutes (99:00), or any combination of minutes and seconds, just by changing the text in the timer textbox.

A working Storyline file is attached.

Demo

storyline 360

6 Replies

  • sabrmanz's avatar
    sabrmanz
    Community Member
    2 years ago

    Hello James,

    Amazing timer! Thanks for sharing.

    Could you please help me with one of those with hours added? hh:mm:ss

  • kathrynbrown-2d's avatar
    kathrynbrown-2d
    Community Member
    10 months ago

    Hi James!

    This is so very timely as I was looking for this exact type of timer with JavaScript. Thank you so much for sharing this!

  • FelixFranke's avatar
    FelixFranke
    Community Member
    27 days ago

    This is absolutely brilliant. I have been trying to build a script with AI for hours, and here is a few lines of code, that just work better thn anything the AI came up with...

    I have a question though: The timer shows the numbers counting down, but the font of the digits is different except for the digits I have preset in the text box. If I set "15:00" in, say, Arial 12 pt, only the 1, the 5 and the 0 are in Arial, other numbers show up in a font, which I have never used in my project.

    Any idea why this happens? or at least how I can get all numbers in the font I want?

    EDIT: Got it. ChatGPT explained it to me 😉 I need a second text field (off-canvas), which contains all digits I need in the correct format so they are formatted correctly as SVG / tspan.

    Thank you so much!

  • SimeonGavalas's avatar
    SimeonGavalas
    Community Member
    20 days ago

    Thanks for sharing James!

    FelixFranke​ Would it be possible to elaborate on your formatting solution, or may I dare ask for your story file?

    EDIT: Got it also! 

    I just created a new text field off-canvas (as indicated by FelixFranke) that contains the digits 0123456789. I formatted this text field as required (font, size,color etc). I applied the same formatting to the timer and voila, it works!

    Many thanks to all! 

    • FelixFranke's avatar
      FelixFranke
      Community Member
      20 days ago

      Hi Simeon,

      sorry I was out of office yesterday. But as I see, you found out yourself 😊
      I actually just copied the text field on the slide from James's original file and formatted it the way I wanted it.

      I absolutely love it. Before, I used a countdown video, which I shortened to the required length and used the nd of that video as a trigger. But that bulks up the .story file. This is so much more elegant 👍🏼👍🏼👍🏼

  • Dave-Ruckley's avatar
    Dave-Ruckley
    Community Member
    20 days ago

    Just to piggy back off this. I use a different method that uses variables instead of off-canvas text boxes and allows for MM:SS or HH:MM:SS formatting. I've attached an example.

    The X_minute_duration variable value is the number of seconds in the time you want it to count down, the X_minute_duration_display is how it will be seen by users and the X_minute_finished one is what you can use to trigger other things once it changes. For different times, you just need to set the variable values correctly and if you rename them, update the code. 

    These work really well, I've got about 20 on a single slide in one project that all run independently and trigger as they should - including duplicate ones that use the same variables but are triggered at different times.