Countdown timer on screen before continuing

[jodeleeuw]

I recently put together a trial for someone where a countdown was needed before continuing to the next part of the experiment. I thought it would be useful to archive the code here.

You can try the experiment at: https://l9hdbueap4.cognition.run/

var countdown_trial = {
  type: 'html-button-response',
  stimulus: '<p>The next part of the experiment will start in <span id="clock">1:00</span>.',
  choices: ['Continue'],
  on_load: function(){
    var wait_time = 1 * 60 * 1000; // in milliseconds
    var start_time = performance.now();
    document.querySelector('button').disabled = true;
    var interval = setInterval(function(){
      var time_left = wait_time - (performance.now() - start_time);
      var minutes = Math.floor(time_left / 1000 / 60);
      var seconds = Math.floor((time_left - minutes*1000*60)/1000);
      var seconds_str = seconds.toString().padStart(2,'0');
      document.querySelector('#clock').innerHTML = minutes + ':' + seconds_str
      if(time_left <= 0){
        document.querySelector('#clock').innerHTML = "0:00";
        document.querySelector('button').disabled = false;
        clearInterval(interval);
      }
    }, 250)
  }
}

jsPsych.init({
  timeline: [countdown_trial]
})

[psychNerdJae]

Thanks for this useful snippet, @jodeleeuw! I'm using this to give participants a break every X trials, and to enforce a mandatory break of 10s. After the first countdown ends, I'm running into a problem where every 250ms, the console prints the following error message: Uncaught TypeError: document.querySelector(...) is null. When the next countdown screen appears, the error messages stop printing.

My best guess is that, for whatever reason, the function is still being called even after the interval is cleared – and so document.querySelector('#clock') is still being called while my trials are being displayed. If I change the delay parameter to (e.g.) 1000ms, the error messages are printed into the console at that rate.

Functionally, I don't think it matters all that much – maybe(?) there could be some performance issues over a long enough period of time, since there's so much being printed to the console? I'm not a javascript developer by any stretch of the imagination, so I couldn't say with any degree of certainty.

My code is pasted below. I've tried setting interval = null with no effect, and have experimented with clearing the interval again as part of an on_finish callback (which was not only ineffective, but stopped subsequent trials from displaying).

Any sort of insight would be greatly appreciated. Thanks!

const walk_procedure = {
    timeline: [
        // Random walks
        {
            type: 'html-keyboard-response',
            stimulus: jsPsych.timelineVariable('draw_walk'),
            stimulus_height: 300,
            stimulus_width: 300,
            choices: ['space'],
            prompt: "<p>If the image is upside down, press the spacebar.</p>",
            trial_duration: 1500,
            response_ends_trial: false,
            render_on_canvas: false,
            data: {
                trial_purpose: 'walk_trial',
                walk_id: jsPsych.timelineVariable('walk_id'),
                node_id: jsPsych.timelineVariable('node_id'),
                node_face: jsPsych.timelineVariable('node_face'),
                node_name: jsPsych.timelineVariable('node_name'),
                upside_down: jsPsych.timelineVariable('upside_down')
            }
        },
        // Breaks between walks
        {
            timeline: [{
                type: "html-keyboard-response",
                stimulus: `You will now take a 10-second break before continuing.
                 <p> Countdown: <span id="clock">0:10</span>.`,
                choices: jsPsych.NO_KEYS,
                trial_duration: 10 * 1000, // seconds to milliseconds
                data: { trial_purpose: 'walk_break' },
                on_load: function () {
                    var wait_time = 10 * 1000 // seconds to milliseconds
                    var start_time = performance.now()
                    var interval = setInterval(
                        function () {
                            var time_left = wait_time - (performance.now() - start_time)
                            var minutes = Math.floor(time_left / 1000 / 60)
                            var seconds = Math.floor((time_left - minutes * 1000 * 60) / 1000)
                            var seconds_str = seconds.toString().padStart(2, '0')
                            document.querySelector('#clock').innerHTML = minutes + ":" + seconds_str
                            if (time_left <= 0) {
                                document.querySelector('#clock').innerHTML = "0:00"
                                clearInterval(interval)
                                interval = null
                            }
                        },
                        delay = 250  // in ms
                    )
                }
            }],
            conditional_function: function () {
                var n_walk_trials = (
                    jsPsych.data
                        .get()
                        .filter({ trial_purpose: 'walk_trial' })
                        .count()
                )
                // for testing purposes, display countdown after every trial
                return (true)
            }
        },
    ],
    timeline_variables: walk_prompts
}

[lsztajnkrycer]

I just ran into this question and had the same problem. Not sure if this is still relevant since we're almost a year out, but I found a fix.

We seem to get a null error because the clearInterval function is not called before the trial ends and the next trial begins. When you set the trial duration to the same time as wait_time (in your case, 10 seconds exactly), the keyboardresponse trial ends before the interval can be cleared.

The fix for this seems to be to add some ms onto the trial duration. In your case, since wait_time is 10,000 ms, set the trial_duration to 10100 or 10200. The trial will linger on 0:00 for 1/10 or 1/5 of a second depending on your choice, but clearInterval will pass and you won't get any errors on the next trial.

[fangzefunny]

Thanks for your solution, @lsztajnkrycer.
However, extending the trial duration cannot fix all problems if you allow participants to skip your timing.
Hence, I add a keyboard listener to keep track of their response. The interval will be clear once the participants press the correct key.

Here is my modification:

const mkTimer = function(){
    // @ jsPsych 7.2 
    return{
        type: jsPsychHtmlKeyboardResponse,
        stimulus: '<div style="font-size: 25px"><p>The next part of the experiment will start in</p>'
                + '<div style="font-size: 50px; color: blue"><p><span id="clock">1:00</span></div></p>'
                + '<p>Press \"Q\" to skip the break</p></div>',
        choices: ['q'],
        trial_duration: 60100,
        on_load: function(){
        // add a keyboard listener 
        document.addEventListener('keydown', function(e){
            if (e.key == 'q'){
                window.clear_timer = -1;
            }
        });
        window.clear_timer = 1;
        var wait_time = 1 * 60 * 1000; // in milliseconds
        var start_time = performance.now();
        // document.querySelector('button').disabled = true;
        var interval = setInterval(function(){
            var time_left = wait_time - (performance.now() - start_time);
            var minutes = Math.floor(time_left / 1000 / 60);
            var seconds = Math.floor((time_left - minutes*1000*60)/1000);
            var seconds_str = seconds.toString().padStart(2,'0');
            if(time_left <= 0){
                document.querySelector('#clock').innerHTML = "0:00";
                window.clear_timer = -1;
            };
            if(window.clear_timer > 0){
                document.querySelector('#clock').innerHTML = minutes + ':' + seconds_str
            }else {
                clearInterval(interval);
            };
        }, 250)
        },
        on_finish: function(){
            // remove the keyboard listener 
            document.removeEventListener('keydown', function(e){
                if (e.key == 'q'){
                    window.clear_timer = -1;
                }
            });
        }
    }
};