Making endCurrentTimeline() also end the current trial and move to next timeline/block

[vrtliceralde]

I'm making a letter comparison task where participants have to judge whether two letter strings are the same (BYX---BYX) or different (RTL---RFL). There are multiple blocks of this task, and for each block, participants have 20 seconds to judge as many pairs as they can out of 32 pairs/trials. When the 20 secs are up or when participants judge all 32 pairs before 20 secs are up, the task should move automatically to the next block. To implement this flow, I wrote some code based on suggestions made by @becky-gilbert on this reply. (jsPsych version 6.3).

I lay out a full example at the end for context/reference, but I'm encountering an issue with this set of code in particular.

// the following was based on @ becky-gilbert's reply
on_load: function() {
    block_trial_count++

    // we need to set up the timer to end the current timeline after a certain duration, but only on the first trial
    if (block_trial_count == 1) {
        end_timer = setTimeout(function() {
                        
        // this function is all you need to end the current timeline
        jsPsych.endCurrentTimeline();
                        
        // this function ends the current "trial" (in this case, the block)
        jsPsych.finishTrial({status: "Block timed out"});
                          
        }, 20000);
    }
}

I'm finding that while this code does make the task move on after 20 sec (yay!), the next block starts on the second trial, instead of the first, and I suspect that it's because of the order of the commands under the setTimeout function, i.e., the timeline is ended, and then after it's ended, the code moves on to and "finishes" the next trial, which is in the next timeline/block.

I tried to play around the order of these commands but neither satisfied the flow I described earlier: for example, when finishTrial is first, the participant gets an extra trial before the current timeline is ended (not good!). The best workaround I've arrived at is to only keep jsPsych.endCurrentTimeline(), but in this case, when the timeline is ended, the screen is still stuck visually (and maybe internally?) on the very last trial, waiting on the participant's response before it moves on to the next block. So hypothetically, the participant can move on to a trial at 19.9 secs and still be able to respond to it (when they shouldn't be able to!) because the task doesn't move on until they've responded to that trial.

I was wondering if I can add anything to my code so that endCurrentTimeline() also ends whatever trial the participant is on so that the task moves on visually and internally to the next block---maybe something similar what finishTrial does as described in the docs (in particular, the part about the next trial [in this case, block], if one exists, is started). Also open to other thoughts about how I might achieve the same flow I'm aiming for (i.e., task moves on to next block after 20 seconds or after completing all 32 trials). Thanks a lot!

Worked-out example

// set up stimulus lists
var list1 = [{ str1: 'DSY', str2: 'DSY'}, { str1: 'KPB', str2: 'KPZ' }, { str1: 'JTF', str2: 'JTF' }];
var list2 = [{ str1: 'NQJDBB', str2: 'NQJDGB' }, { str1: 'GKHWTF', str2: 'GKHHTF' }, { str1: 'BVDTMC', str2: 'BVDTMC' }];

// set up trial counter and timer variables for timeout
var block_trial_count = 0;
var end_timer;

... // other set-up code

// set up function to create block of trials
function createBlock(size, stimulus_list) {
    var block_trials = {
        timeline: [
        {
            type: "html-keyboard-response",
            stimulus: generateStimulus, // this is a custom function declared earlier, works fine

            // the following was based on @ becky-gilbert's reply
            // START
            on_load: function() {
                block_trial_count++

                // we need to set up the timer to end the current timeline after a certain duration, but only on the first trial
                if (block_trial_count == 1) {
                    end_timer = setTimeout(function() {
                        
                        // this function is all you need to end the current timeline
                        jsPsych.endCurrentTimeline();
                        
                        // this function ends the current "trial" (in this case, the block)
                        jsPsych.finishTrial({status: "Block timed out"});
                          
                    }, 20000);
                }
            }, 
            on_finish: function(data) {
            // we also need to cancel the setTimeout timer if the person gets all the way through the timeline before 
            // time_limit is reached, otherwise endCurrentTimeline will fire during the next timeline - that won't be good!!
                if (block_trial_count == n_trials) {
                    // reset block trial count after person gets through all the trials
                    block_trial_count = 0;
                    jsPsych.clearTimeout(end_timer);
                }
            }
            // END
        }],
        timeline_variables: stimulus_list
    }

    // combine block of trials with signpost instruction screens indicating how many letters are in each string (3, 6, or 9)
    var block = {
        timeline: [ block_instructions, block_trials ], // block_instructions declared in other set-up code, works fine
        timeline_variables: [ {setsize: size} ], // size = 3, 6, 9; used to dynamically update instructions,
        on_load: function() {
            block_trial_count = 0;
            jsPsych.clearTimeout(end_timer);
        }
    }

    return block;
}

// create blocks
var block1 = createBlock(3, list1);
var block2 = createBlock(6, list2);

timeline.push(block1, block2);
...

[j-fielder]

Hi @vrtliceralde
Did you ever get a response or find a solution to this? I'm having the exact same issue so would love to hear an answer if you did or didn't get there with solving it.
Thanks!

[vrtliceralde]

I came up with a workaround myself. I jumped off from the following point:

The best workaround I've arrived at is to only keep jsPsych.endCurrentTimeline(), but in this case, when the timeline is ended, the screen is still stuck visually (and maybe internally?) on the very last trial, waiting on the participant's response before it moves on to the next block. So hypothetically, the participant can move on to a trial at 19.9 secs and still be able to respond to it (when they shouldn't be able to!) because the task doesn't move on until they've responded to that trial.

To address the problem of the participant still being able to respond to a trial that shows up right before the time limit (e.g., 19.9 secs), I initialized a dummy variable called timeout with 0 earlier in the code. timeout gets updated to 1 when the setTimeout() function gets triggered and gets reset to 0 after every block. So for all responses within the time limit, timeout = 0, but outside the time limit, setTimeout() will trigger and timeout will be assigned 1. So even if a trial shows up right at the time limit and the participant "can" [technically] respond to it, their response for that trial (which would be outside the time limit) would be associated with timeout = 1, so you can filter these post-time-limit responses. I added the timeout variable to my data so I could identify valid data as only those trials where timeout = 0.

Workaround code

...

// set up trial counter and timer variables for timeout
var block_trial_count = 0;
var end_timer;
var timeout = 0; // NEW: initialize the timeout variable

... // other set-up code

// set up function to create block of trials
function createBlock(size, stimulus_list) {
    var block_trials = {
        timeline: [
        {
            type: "html-keyboard-response",
            stimulus: generateStimulus, // this is a custom function declared earlier, works fine

            // the following was based on @ becky-gilbert's reply
            // START
            on_load: function() {
                block_trial_count++

                // we need to set up the timer to end the current timeline after a certain duration, but only on the first trial
                if (block_trial_count == 1) {
                    end_timer = setTimeout(function() {

                        // NEW: Update timeout to 1 when time limit is hit
                        timeout = 1; 
                        
                        // this function is all you need to end the current timeline
                        jsPsych.endCurrentTimeline();
                        
                        // New: Delete this line to prevent task going to *second trial* of subsequent block
                        // this function ends the current "trial" (in this case, the block)
                        // jsPsych.finishTrial({status: "Block timed out"}); 
                          
                    }, 20000);
                }
            }, 
            on_finish: function(data) {
                // NEW: Add timeout variable to data to know which trials were responded to within time limit
                data.timeout = timeout;

                // we also need to cancel the setTimeout timer if the person gets all the way through the timeline before 
                // time_limit is reached, otherwise endCurrentTimeline will fire during the next timeline - that won't be good!!
                if (block_trial_count == n_trials) {
                    // reset block trial count after person gets through all the trials
                    block_trial_count = 0;
                    jsPsych.clearTimeout(end_timer);
                }
            }
            // END
        }],
        timeline_variables: stimulus_list
    }

    // combine block of trials with signpost instruction screens indicating how many letters are in each string (3, 6, or 9)
    var block = {
        timeline: [ block_instructions, block_trials ], // block_instructions declared in other set-up code, works fine
        timeline_variables: [ {setsize: size} ], // size = 3, 6, 9; used to dynamically update instructions,
        on_load: function() {
            block_trial_count = 0;
            timeout = 0; // NEW: Reset timeout variable for next block
            jsPsych.clearTimeout(end_timer);
        }
    }

    return block;
}

...

[j-fielder]

Thank you very much for your reply!