How to end trial after timeout

[pablobernabeu]

Hi All,

I would like to ask for advice regarding a custom plugin for a serial reaction time task, that was created by @vekteo, and is available in Gorilla, where the code can be edited and tested.

By default, trials are self-paced, but I would need them to time out after 2,000 ms. I am struggling to achieve this, and would be very grateful if someone could please advise me a bit.

First, I tried setting trial duration using the parameters provisioned in the original code, specifically in the groupStart.trial_duration property in the main script. Unfortunately, this does not work. Next, I have focussed on the the script jspsych-serial-reaction-time, which contains the core plugin for the task. Please find this script below.

In this plugin, trials are finished using the custom function endTrial, which gathers important data before calling jsPsych.finishTrial(trial_data). In the plugin below, endTrial is used successfully to finish trials after a response. However, I wonder how this function could be repurposed to end trials after 2,000 ms.

/**
 * jspsych-serial-reaction-time
 * Josh de Leeuw
 *
 * plugin for running a serial reaction time task
 *
 * documentation: docs.jspsych.org
 *
 **/

jsPsych.plugins["serial-reaction-time"] = (function() {

  var plugin = {};

  plugin.info = {
    name: 'serial-reaction-time',
    description: '',
    parameters: {
      grid: {
        type: jsPsych.plugins.parameterType.BOOL,
        pretty_name: 'Grid',
        array: true,
        default: [[1,1,1,1]],
        description: 'This array represents the grid of boxes shown on the screen.'
      },
      target: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Target',
        array: true,
        default: undefined,
        description: 'The location of the target. The array should be the [row, column] of the target.'
      },
      choices: {
        type: jsPsych.plugins.parameterType.KEYCODE,
        pretty_name: 'Choices',
        array: true,
        default: [['3','5','7','9']],
        description: ' Each entry in this array is the key that should be pressed for that corresponding location in the grid.'
      },
      grid_square_size: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Grid square size',
        default: 100,
        description: 'The width and height in pixels of each square in the grid.'
      },
      target_color: {
        type: jsPsych.plugins.parameterType.STRING,
        pretty_name: 'Target color',
        default: "url(static/images/cat.jpg)",
        description: 'The color of the target square.'
      },
      response_ends_trial: {
        type: jsPsych.plugins.parameterType.BOOL,
        pretty_name: 'Response ends trial',
        default: true,
        description: 'If true, trial ends when user makes a response.'
      },
      pre_target_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Pre-target duration',
        default: 0,
        description: 'The number of milliseconds to display the grid before the target changes color.'
      },
      trial_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Trial duration',
        default: null,
        description: 'How long to show the trial.'
      },
      show_response_feedback: {
        type: jsPsych.plugins.parameterType.BOOL,
        pretty_name: 'Show response feedback',
        default: false,
        description: 'If true, show feedback indicating where the user responded and whether it was correct.'
      },
      feedback_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Feedback duration',
        default: 200,
        description: 'The length of time in milliseconds to show the feedback.'
      },
      fade_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Fade duration',
        default: null,
        description: 'If a positive number, the target will progressively change color at the start of the trial, with the transition lasting this many milliseconds.'
      },
      prompt: {
        type: jsPsych.plugins.parameterType.STRING,
        pretty_name: 'Prompt',
        default: null,
        no_function: false,
        description: ' Any content here will be displayed below the stimulus.'
      },
    }
  }

  plugin.trial = function(display_element, trial) {

    // create a flattened version of the choices array
    var flat_choices = jsPsych.utils.flatten(trial.choices);
    while(flat_choices.indexOf('') > -1){
      flat_choices.splice(flat_choices.indexOf(''),1);
    }

    // display stimulus
    var stimulus = this.stimulus(trial.grid, trial.grid_square_size);
    display_element.innerHTML = stimulus;

		if(trial.pre_target_duration <= 0){
			showTarget();
		} else {
			jsPsych.pluginAPI.setTimeout(function(){
				showTarget();
			}, trial.pre_target_duration);
		}

		//show prompt if there is one
    if (trial.prompt !== null) {
      display_element.innerHTML += trial.prompt;
    }

		var keyboardListener = {};

    var response = {
      rt: null,
      key: false,
      correct: false
    }

		function showTarget(){
      if(trial.fade_duration == null){
        display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+trial.target[0]+'-'+trial.target[1]).style.background = trial.target_color;
        display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+trial.target[0]+'-'+trial.target[1]).style.backgroundSize = "contain";
      } else {
        display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+trial.target[0]+'-'+trial.target[1]).style.transition = "background-image "+trial.fade_duration;
        display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+trial.target[0]+'-'+trial.target[1]).style.background = trial.target_color;
        display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+trial.target[0]+'-'+trial.target[1]).style.backgroundSize = "contain";
      }

			keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
        callback_function: after_response,
        valid_responses: flat_choices,
        allow_held_key: false
      });

			if(trial.trial_duration > null){
				jsPsych.pluginAPI.setTimeout(showFeedback, trial.trial_duration);
			}

		}

    function showFeedback() {
      if(response.rt == null || trial.show_response_feedback == false){
        endTrial();
      } else {
        var color = response.correct ? '#0f0' : '#f00';
        display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+response.responseLoc[0]+'-'+response.responseLoc[1]).style.transition = "";
        display_element.querySelector('#jspsych-serial-reaction-time-stimulus-cell-'+response.responseLoc[0]+'-'+response.responseLoc[1]).style.backgroundColor = color;
        jsPsych.pluginAPI.setTimeout(endTrial, trial.feedback_duration);
      }
    }

    function endTrial() {

      // kill any remaining setTimeout handlers
      jsPsych.pluginAPI.clearAllTimeouts();

      // kill keyboard listeners
      if (typeof keyboardListener !== 'undefined') {
        jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
      }

      // gather the data to store for the trial
      var trial_data = {
        "rt": response.rt,
        "key_press": response.key,
				"correct": response.correct,
				"grid": JSON.stringify(trial.grid),
				"target": JSON.stringify(trial.target)
      };

      // clear the display
      display_element.innerHTML = '';

      // move on to the next trial
      jsPsych.finishTrial(trial_data);

    };

    // function to handle responses by the subject
    function after_response(info) {

			// only record first response
      response = response.rt == null ? info : response;

			// check if the response is correct
			var responseLoc = [];
			for(var i=0; i<trial.choices.length; i++){
				for(var j=0; j<trial.choices[i].length; j++){
					var t = typeof trial.choices[i][j] == 'string' ? jsPsych.pluginAPI.convertKeyCharacterToKeyCode(trial.choices[i][j]) : trial.choices[i][j];
					if(info.key == t){
						responseLoc = [i,j];
						break;
					}
				}
			}
      response.responseLoc = responseLoc;
			response.correct = (JSON.stringify(responseLoc) == JSON.stringify(trial.target));

			if (trial.response_ends_trial) {
        if (trial.show_response_feedback){
  				showFeedback(response.correct);
  			} else {
          endTrial();
        }
      }
    };

  };

  plugin.stimulus = function(grid, square_size, target, target_color, labels) {
    var stimulus = "<div id='jspsych-serial-reaction-time-stimulus' style='margin:auto; display: table; table-layout: fixed; border-spacing:"+square_size/4+"px'>";
    for(var i=0; i<grid.length; i++){
      stimulus += "<div class='jspsych-serial-reaction-time-stimulus-row' style='display:table-row;'>";
      for(var j=0; j<grid[i].length; j++){
        stimulus += "<div class='jspsych-serial-reaction-time-stimulus-cell' id='jspsych-serial-reaction-time-stimulus-cell-"+i+"-"+j+"' "+
         "style='width:"+square_size+"px; height:"+square_size+"px; border-radius: 100px; display:table-cell; vertical-align:middle; text-align: center; font-size:"+square_size/2+"px;";
        if(grid[i][j] == 1){
          stimulus += "border: 2px solid black;"
        }
        if(typeof target !== 'undefined' && target[0] == i && target[1] == j){
          stimulus += "background-image: "+target_color+";"
        }
        stimulus += "'>";
        if(typeof labels !=='undefined' && labels[i][j] !== false){
          stimulus += labels[i][j]
        }
        stimulus += "</div>";
      }
      stimulus += "</div>";
    }
    stimulus += "</div>";

    return stimulus
  }

  return plugin;
})();

Thank you very much

---

I've also asked this question at https://stackoverflow.com/questions/77876370/how-to-end-trial-in-jspsych-after-timeout. As soon as solution arises, I will provide the link to the solution on the other site.

[jodeleeuw]

I think the trial_duration parameter can be set to 2000 to have the trial timeout. Does that work?

[jodeleeuw]

Sorry, missed that this is not about the serial reaction time plugin and misunderstood the question.

[pablobernabeu]

Thank you, still :)

[Shaobin-Jiang]

You are looking in the wrong place. groupStart.trial_duration is in insertGroupBlockStart which is a page prompting for you to start the next block, so naturally setting trial_duration does not work. I gather you want the serial-reaction-time trials to end after 2000 ms. If so, you should add trial_duration to the trialProperties object, defined in line 59 in main.

[pablobernabeu]

Thank you very much, @Shaobin-Jiang. I have added trial_duration in this open fork, leaving trialProperties as follows:

/* set up trial properties */

const trialProperties = {
    type: "serial-reaction-time",
    grid: [[1, 1, 1, 1]],
    choices: responseKeys,
    target: jsPsych.timelineVariable('stimulus'),
    trial_duration: 2000,
    data: jsPsych.timelineVariable('data'),
    response_ends_trial: true,
}

Unfortunately, the trial duration does not take effect. In case you had the possibility of looking into the fork, I would be very grateful, but I would also understand otherwise.

Thank you

[Shaobin-Jiang]

I think it does take effect. For one, you can see the stimulus change if you wait long enough; I am guessing that there are a lot of consecutive trials where the stimulus appears in the same position, something which I have encountered many times when experimenting with the original code. You can also open the dev tool and you might see that the jspsych-content element is flashing about every 2 seconds, meaning it is updated, and in this case, due to the ending of a trial. You might want to take control. So you might want to override the randomization procedure, e.g., preventing stimuli from appearing in the same position in consecutive trials, to see whether trial_duration works.

[pablobernabeu]

Thank you very much. I understand your arguments.

Imho, there is still something odd with the trial duration.

I ascertained that the position of the dalmatian varies across most trials, as it is evident when one responds correctly. Furthermore, in the options box that appears at the beginning, I set the response-to-stimulus interval (RSI) to 2,000 ms, to add a noticeable lag across trials. With this, I consistently observed a duration of around 24 seconds per trial. Since the options box doesn't appear in the open fork I shared before, I have now published this version in which the RSI is 2,000 ms by default.

Next, I removed the groups options--selfpaced, fifteen and thirty--, which were meant to adjust trial duration. Instead, I left a single group named 'two' in the main script (this change is also reflected in the most recent version). Still, no success.

[Shaobin-Jiang]

Nope. I added a post_trial_gap to the trialProperties object and the stimulus disappears after two seconds, indicating that the trial_duration works. Also, I have tried to add break after line 209, which is after timeline.push(actualRandom), and the practice session ended after two seconds, as expected. But now I have finally taken a more careful look at the code, I know what the problem is. Take the practice block for example:

timeline.push(actualRandom);
insertRepetition(randomRepeat(actualRandom));

The problem is the second line: insertRepetition:

function insertRepetition(element) {
    for (let i = 0; i < 10; i++) {
        timeline.push(element);
    }
}

This is easy enough to understand. It repeats a trial for 10 times. But what is repeated? We now look at randomRepeat(actualRandom):

function randomRepeat(actualRandom) {
    return {
        timeline: [randomIncorrectTrialProperties],
        timeline_variables: actualRandom.timeline_variables,
        conditional_function: function () { //function only happens is response is not correct!
            let data = jsPsych.data.get().last(1).values()[0];
            return data.correct !== true;
        }
    }
}

So randomRepeat simply adds actualRandom but only when the previous trial ends up incorrectly. And now we see it all. Because no reponse is given, the previous trial is always incorrect, leading to randomRepeat trial always getting run. Since it is run 10 times, and combined with first timeline.push(actualRandom) and the 2000 ms rsi you have added, this results in 24 seconds per "trial"; or at least, what you have mistaken for a trial but which is actually a combination of 11 trials.

The solution would be simple: remove the insertRepetition part. I have not looked at other parts of the code, but things should be the same.

[pablobernabeu]

Thank you very much, @Shaobin-Jiang! This fully resolved the issue.

To repeat the location after an incorrect response, but not in the absence of a response, I have added the condition data.key_press !== false to randomRepeat, as follows:

/*function for inserting the same random element after incorrect response*/

function randomRepeat(actualRandom) {
    return {
        timeline: [randomIncorrectTrialProperties],
        timeline_variables: actualRandom.timeline_variables,
        conditional_function: function () { //function only happens is response is not correct!
            let data = jsPsych.data.get().last(1).values()[0];
            return data.key_press !== false && data.correct !== true;
        }
    }
}

Updated code and demo in Gorilla