Display timer as countdown

[samsanto]

Hi Jeremy,

I was wondering if there was an easy way to display the timer on the screen as a countdown. I want to give participants only one minute for example to do a task, but I want them to be able to see and keep track of the seconds as they count down.

Thanks for your help!

-Sam

[Jeremy]

Hi Sam,

Here is a code that illustrates the basic idea:

newVar("finishTime").set(v=>Date.now()+90000) // 90000 = 90s = 1min30s
,
newText("countDown", "1m30s").print()
,
// This Timer element will execute a callback after 1s
newTimer("updateCountdown",1000).callback( 
    newVar("difference")
        .set(getVar("finishTime")).set(v=>v-Date.now())
        .test.is(v=>v>0) // Positive value means current time still below finish time
        .success(
            // Transform the Var element into an appropriately formatted string
            getVar("difference")
                .set(v=>Math.trunc(v/60000)+"m"+Math.round((v/1000)%60)+"s")
            ,
            getText("countDown").text(getVar("difference")) // Update the Text element
            ,
            // Relaunch the timer to update again in 1s
            getTimer("updateCountdown").start()
        )
).start() // Don't forget to start the timer initially

You can see it live here: https://farm.pcibex.net/r/hvXkjO/

Jeremy

[samsanto]

Thanks so much Jeremy! This is exactly what I needed.

[Author]

Posts