How to repeat a missed trial using the canvas-keyboard plugin?

[prashantig25]

Hi All,
In my experiment, participants are presented with a fixation, gabor patches and feedback. The fixation cross and gabor patches are drawn using canvas-keyboard. I want a trial to be repeated if participants miss a particular trial. How can I do that?

var fix = {
        type: 'canvas-keyboard-response', stimulus: fixation, trial_duration: fix_dura, choices: jsPsych.NO_KEYS, data: { condition: 'fixation'},
    };

var r1_70 = [37,37,39,37,37,39,37,37,37,39];
var r1_90 = [37,37,37,37,39,37,37,37,37,37];
var r2_70 = [39,39,37,39,39,37,39,39,39,37];
var r2_90 = [39,39,39,39,37,39,39,39,39,39];

var s1_r2_low60 = {
        type: 'canvas-keyboard-response',
        on_start: function(s1_r2_low60){
            s1_r2_low60.random_r2_70 = Math.floor(Math.random() * r2_70.length);
            s1_r2_low60.reward_r2_70 = r2_70[jsPsych.currentTrial().random_r2_70]
            s1_r2_low60.contrast = randbet(0.8,1);
            s1_r2_low60.contrast1 = jsPsych.currentTrial().contrast  - randbet(0.6,0.8);
        },
        stimulus: gabor, //function that draws on the canvas
        data: {condition: 'LH', state: '1', reward: '2', prob: '30_70'},
        choices: keys, trial_duration: duration, response_ends_trial: false,
        on_finish: function (data) {
            if (data.key_press === jsPsych.currentTrial().reward_r2_70) {
                data.correct = true;
            }  else {
                data.correct = false;
            }
            data.corr_resp = jsPsych.currentTrial().reward_r2_70
            data.con = jsPsych.currentTrial().contrast
            data.con1 = jsPsych.currentTrial().contrast1
        },
    };

var fb = {
        type: 'html-keyboard-response', choices: jsPsych.NO_KEYS, trial_duration: duration,
        stimulus: function () {
            var last_trial_correct = jsPsych.data.get().last(1).values()[0].correct;
            if (last_trial_correct) {
                return "<p style=\"font-size: 30px;color: #016901\">You win 1 point!</p>";
            } else {
                return "<p style=\"font-size: 30px;color: #ba0000\">You win 0 points!</p>";
            }
        }
    };

// Two functions used to draw on the canvas.
function fixation(c) { //generates fixation by drawing on HTML canvas.
    var context = c.getContext("2d"); //Name of the canvas
    context.moveTo(240, 250); //start of horizontal line
    context.lineTo(280, 250); //end of horizontal line
    context.moveTo(260, 230); //start of vertical line
    context.lineTo(260, 270); //end of vertical line
    context.filter = 'contrast(1)'; //keeps the contrast constant
    context.lineWidth = 3;
    context.stroke();
};

function gabor(c) { //generates 2 gabors left and right to the fixation
    var context = c.getContext("2d");
    const my_gradient = context.createLinearGradient(0,0,200,0); const my_gradient1 = context.createLinearGradient(225,0,425,0); //two gradients for two gabors
    const bands = 10; const colors = ["#000", "#FFF"];
    const stops = bands * colors.length; //number of layers that you want to color in the patch
    var pos = 0; var pos1 = 0;
    while (pos <= stops) { //colors each band of the patch with white and black.
        my_gradient1.addColorStop(pos / stops, colors[pos % colors.length]);
        pos++;
    }
    while (pos1 <= stops) {
        my_gradient.addColorStop(pos1 / stops, colors[pos1 % colors.length]);
        pos1++;
    }
    context.fillStyle = my_gradient; //gradients for left and right Gabor
    context.filter = 'contrast('+ jsPsych.currentTrial().contrast +')' //contrast level randomly generated after every trial
    context.fillRect(100,200,100,100);
    context.fillStyle = my_gradient1;
    context.filter = 'contrast('+ jsPsych.currentTrial().contrast1+')'
    context.fillRect(325,200,100,100);
    context.stroke()
    context.moveTo(240, 250); context.lineTo(280, 250); //horizontal line
    context.moveTo(260, 230); context.lineTo(260, 270); //vertical line
    context.filter = 'contrast(1)'; context.lineWidth = 3;
    context.stroke();
}

Any suggestions will be really helpful. Thank you!

[jodeleeuw]

Hi @prashantig25,

When you say miss a particular trial, does that mean if the subject answers incorrectly?

Have you thought about using a looping timeline to repeat the trial if it is incorrect?

[prashantig25]

Hi @jodeleeuw,
Thank you for your response. When I say they miss a trial, I mean they don't respond in the trial within the duration. I.e. if they don't respond, I want that trial to repeat after the block of trials have all been presented. As long as they have responded, even if it is incorrectly, it is not a problem. If they don't respond i.e. data.key_press is null, I want the trial to be presented again. I hope this makes it clear. Thanks so much!

[jodeleeuw]

It turns out @becky-gilbert answered a similar question in the old jsPsych google group forum.

The context is a little different, but the same strategy should apply. Here's the key bit from her answer:

I think you could do something like what Mara suggested, except that you could use a loop node so that your trial procedure keeps repeating until you have a valid response for all stimuli. To do this, I would create a timeline for just one trial, and an array to hold all of your stimuli. Then you could present the first item in the array, and in the trial's on_finish function, remove that stimulus from the array (so that the next stimulus in the array is now the first item), and if there was no response then push the stimulus to the end of the array. In the loop_function, you'll want to return true if there are still stimuli in the array (i.e. stimuli_array.length>0), and return false if the stimuli array is empty.

[prashantig25]

Hi @jodeleeuw, Thanks for your response. I understand the solution and I had tried something similar before posting here. But the problem I am having is that I can't call the stimulus from the array which holds all the stimuli that the participant did not respond to. This is because in the canvas-keyboard-response plugin, the stimulus is basically a function. In the plugin, unlike other plugins, the stimulus does not get stored automatically in data. stimulus. Likewise, when I call the element from the array as stimulus in a replacement trial, the stimulus does not present itself, because it is a function. Here is the code:

var missed = [];

var s1_r2_low60 = {
        type: 'canvas-keyboard-response',
        on_start: function(s1_r2_low60){
            s1_r2_low60.random_r2_70 = Math.floor(Math.random() * r2_70.length);
            s1_r2_low60.reward_r2_70 = r2_70[jsPsych.currentTrial().random_r2_70]
            s1_r2_low60.contrast = randbet(0.8,1);
            s1_r2_low60.contrast1 = jsPsych.currentTrial().contrast  - randbet(0.6,0.8);
        },
        stimulus: gabor, // this is a function
        data: {condition: 'LH', state: '1', reward: '2', prob: '30_70'},
        choices: keys, response_ends_trial: false, trial_duration: duration,
        on_finish: function (data) {
            if (data.key_press === jsPsych.currentTrial().reward_r2_70) {
                data.correct = true;
            }
            else if (data.key_press === null)
                missed.push(this.stimulus) // gets stored in the array of stimuli that were missed by the participant
            else {
                data.correct = false;
            }
            data.corr_resp = jsPsych.currentTrial().reward_r2_70
            data.con = jsPsych.currentTrial().contrast
            data.con1 = jsPsych.currentTrial().contrast1
        },
    };
    var missed_trial = {
        type: 'canvas-keyboard-response',
        stimulus: missed[0], // when I call the stimulus from the array to which I added all the missed stimulus, this does not work, because the stimulus in this case is a function 
        data: {condition: 'LH', state: '1', reward: '2', prob: '30_70'},
        choices: keys, response_ends_trial: false, trial_duration: duration,
        on_start: function(missed_trial) {
            missed_trial.missed_reward = missed_fb[0]
            missed_trial.contrast = randbet(0.8,1);
            missed_trial.contrast1 = jsPsych.currentTrial().contrast  - randbet(0.6,0.8);
            //missed_trial.stim = missed[0]
        },
        on_finish: function (data) {
            if (data.key_press === jsPsych.currentTrial().missed_reward) {
                data.correct = true;
            } else {
                data.correct = false;
            }
            data.corr_resp = jsPsych.currentTrial().missed_reward
            data.con = jsPsych.currentTrial().contrast
            data.con1 = jsPsych.currentTrial().contrast1
            data.stim = missed.length
        },
    }
    var s1_r2_hl60 = {timeline: [fix, s1_r2_low60, fb], repetitions: 5, randomize_order: false};
    var missed_hl = {timeline: [fix, missed_trial, fb], repetitions: 1, randomize_order: false}

I am unsure if my problem is clear but I suppose this has to do with the canvas-keyboard-response plugin specifically.
Thank you,
Prashanti

[becky-gilbert]

Hi Prashanti, I wonder if, instead of storing the stimulus function in the missed array, you could instead store any of the parameters that define that particular trial? That way, the missed/repeated trials would still use the gabor function as the stimulus parameter. Without really understanding your code, it looks like the contrast and contrast1 values change across trials. So instead of this:

} else if (data.key_press === null) {
  missed.push(this.stimulus) // gets stored in the array of stimuli that were missed by the participant
} else {
...

could you do something like this?

} else if (data.key_press === null) {
  missed.push({  
    // store any parameters that you need to re-create this trial in the missed array, so that it can be repeated later
    contrast: jsPsych.currentTrial().contrast,
    contrast1: jsPsych.currentTrial().contrast1 
  }) 
} else {
...

And then your missed/repeated trials would use the contrast and contrast1 keys from each object in the missed array, like this:

var missed_trial = {
  type: 'canvas-keyboard-response',
  stimulus: gabor,
  // ... other parameters
  on_start: function(missed_trial) {
    missed_trial.missed_reward = missed_fb[0]
    missed_trial.contrast = missed[trial_index].contrast;  // use value from missed array
    missed_trial.contrast1 = missed[trial_index].contrast1;  // use value from missed array
  },
  // ...  other parameters
}

I think you would also need to use a looping timeline that loops over the number of elements in the missed array and increments the trial_index, as well as a conditional timeline that contains the looping timeline and only runs it if the missed array is not empty.

var trial_index = 0; // initialize to 0 so that you start with the first element in the missed array
var missed_trial_loop = {
  timeline: [missed_trial]
  loop_function: function() {
    trial_index++;  // after each missed trial, increment the trial index and see if there are any trials left to run in the missed array
    if (trial_index < missed.length) {
      return false;
    } else {
      return false;
    }
  }
};
var missed_trial_loop_conditional = {
  timeline: [missed_trial_loop],
  conditional_function: function() {
    if (missed.length > 0) {
      return true;
    } else {
      return false;
    }
  }
};
timeline.push(missed_trial_loop_conditional);

Does that work?

[prashantig25]

Yes, I did that and it works well! Thanks so much @becky-gilbert!