Digital 15s countdown on each screen

Hi, I have a very simple experiment where people are given 15 seconds to do a word association task. I want to make sure that there is a countdown timer starting from 15 and going to 0 at the top right so that they know how much time they have left for each trial. What is the easiest way to do this?

I tried looking at other threads but I can’t seem to find an easy way to do this.

Put something like this in the text field of a text component:

$round(15.0 - t, ndigits = 1)

where t is a variable maintained by Builder that represents the current elapsed time (in seconds) in the routine. Also ensure that the text field is set to update on every frame (i.e. screen refresh).

1 Like

Thank you! I found another similar way to do it but this is also very helpful!

Hi @Michael,

I did try your process in a new experiment, but unfortunately, it didn’t work. Is there anything else that I should be doing?

We really need more detail than this to give useful suggestions.

In case this helps: I used the suggestion in Michael’s reply on this google question here:!topic/psychopy-users/tFghyXkOx5U. Also, this will work if your experiment is only hosted locally. But if you’re trying to post your experiment online, you will need to convert this code to javascript. For that, create an empty text routine (text_9 in the code below) and follow these steps (note that for my experiment the text routine was available for 20 s hence the 20+ and I wanted the countdown to appear in seconds hence the division by 1000):

In the coder, you can toggle the display to see both psychopy and JS at the same time, and then type the following in the JS side:

In Begin Routine:

startTime = new Date();
text_9.text = ''

In Each Frame:

leftTime = new Date();
timeelapsed = (startTime - leftTime)/1000
text_9.text = Math.round(20+timeelapsed)

On the psychopy side, type the following:
In Begin Routine

text_9.text = ''

In Each Frame

text_9.text = str(round(20+routineTimer.getTime()))

Hope this helps!


@Michael sorry for being irritatingly vague.

I am attempting to display a countdown timer, which I am doing for delay discounting task, but timed; along with additional stimuli. I copied the code you have here into a text component at the start of my routine. However, I cannot adjust it to my desired start time of 20 seconds (I tried to fix it for 15 seconds too). Would you mind explaining how I should go about this? This countdown restarts at the start of each loop, and abruptly ends when the response is given.
Also, I would want the loop to end at 0, and the next stimuli shown even if the response is not given.

The problem that happened was even though the countdown did present itself on-screen, it never actually “counted down”, and stayed at 15 throughout the response time.

Hope the issue is clearer.

@abhilashak9 I will try your suggestion and get back to you if the problem persists.

Did you do this:

This is done by giving both a fixed duration to your keyboard component, and setting it to “force end of routine”. In that way, a trial will end either when the time runs out, or immediately a key is pressed.

Hi @Michael,

Thank you for your reply. Everything works except for ending of the trial.

I have done both. But the problem now is if I leave the stimuli, the timer moves to the next loop and continuously keeps going infinitely. I am attaching the psyexp file for your reference. I know there is a very small fix that I am missing, but I guess, your expert eyes would find it faster.

DoGtrial.psyexp (21.3 KB) stimuli_delay_discounting.xlsx (9.4 KB)

Please describe exactly what you do want to happen. i.e. to me, this seems to what you asked for, so I need to have the issue explained to me.

Hi @Michael, Thank you for staying with a conversation that I did not start.

In my experiment, I would want the condition/stimuli to leave the screen after the allotted time. ‘Force end of routine’ does that when a response gets recorded by the participant, and moves to the next condition. The fixed duration of the components forces it to move to the next condition.

Here the problem is that the keyboards and the stimuli are getting force-changed after the timeframe, but the timer is not. As a result, the timer is going on to the negative values on the next frame and the next condition is not showing up.

If you run my experiment and leave the stimuli without responding for the allotted 15 seconds, you will be able to see what I am talking about.

Edit: @Michael, apologies for bumping up this conversation, but its been a while now, have you been able to look into the issue? It would really help!

@abhilashak9 Thanks for the tip!

Actually I have the same issue in converting Psychopy code to javascript.
I tried your code but it stuck at ‘initialising the experiment’ on pavlovia with following error message

Uncaught SyntaxError: Unexpected token ‘,’

Could you please share your builder file(.psyexp) with this code?
It would be much more helpful to see the sample.

Hello! This thread was very helpful and the countdown also works well in my experiment. However, there is a small mystery I’m unable to solve. I have a 3 second countdown and would like the numbers to appear as ‘3’ rather than ‘3.0’ (eg). I tried a few things and strangely on my own computer (a Mac), putting ‘$round(3 - t)’ in the text box works perfectly, but the exact same component on my work computer (using Windows) still displays ‘3.0’ instead of ‘3’ - I have checked and everything in the component is exactly the same so I’m confused as to why these display differently on both computers, has anyone experienced this? I tried adding ‘ndigits = 0’ but that does not work either. Thanks!

That is very strange. round() is an ancient function from the Python standard library and one presumes that it should have the same behaviour across platforms.

What happens if you switch to the Shell pane in the Coder view, and simply type:


on Windows and Mac?

You can see my solution here:

Hi! Thank you very much for your response. When I type
on Windows and Mac in Shell pane of the Coder View, both return
the plot thickens…

You count use int(3-t)

In terms of functions to use, if you’re wanting a time in seconds displayed with no decimal places, then strictly neither round() nor int() will give what you want, as they will make the transitions between the whole numbers at the wrong times. math.ceil() is probably the better option as it always rounds up. For example, this is probably what you want for any time less than 1 second. In that case, math.ceil() will round up to show 1 s second remaining throughout the last second, while int() would display 0 throughout, and round() would make the transition between 1 and 0 at around 0.5 seconds remaining.

But regardless, that doesn’t explain the issue with formatting not showing the desired number of decimal places. But try math.ceil() and see if that solves that issue too.

PS you’ll need to import the math module, so put this in the “begin experiment” tab of a code component:

import math

Hello to both of you @Michael and @wakecarter, thank you so much for your suggestions and explanations! I tried both
math.ciel() and int() and both of them worked perfectly, displaying the countdown from 3 with no decimal places! So the issue must have been due to the round()function. Thank you both again so much for your help.
All best!