looping timelines with button responses.

[rbruno1]

I have seen this - https://www.jspsych.org/overview/timeline/#looping-timelines - on JsPsych but it uses the comparekeys function. how do i loop timelines when my experiment uses button responses? I also am having trouble looping one particular stimulus. the code for this block looks like this:

var POD_stimuli = [
  {stimulus: 'BucketThere_POD.wav'},
  {stimulus: 'BuckleWhich1_POD.wav'},
  {stimulus: 'GarbageWhere_POD.wav'},
  {stimulus: 'GarlicThere2_POD.wav'},
  {stimulus: 'MarbleWhere1_POD.wav'},
  {stimulus: 'MarkerWhere_POD.wav'},
  {stimulus: 'PeacockThere2_POD.wav'},
  {stimulus: 'PeanutThere2_POD.wav'},
  {stimulus: 'TurkeyWhich2_POD.wav'},
  {stimulus: 'TurtleWhere2_POD.wav'}
];

var POD_trials = {
    timeline: [
    {
        type: 'audio-button-response',
        stimulus: jsPsych.timelineVariable('stimulus'),
        choices: ['OK', 'Listen again'],
        post_trial_gap: 500,
    },
    {
        type: 'html-button-response',
        stimulus: ["Tell your experimenter what word she was about to say, or listen to the recording again!"],
        choices: ["Continue", Listen again],
        post_trial_gap: 500
    },
]}

var POD_loop_node = {
    timeline: [POD_trials],
    loop_function: function(data){
        if(jsPsych.pluginAPI.compareKeys(data.values()[0].response, '1')){
            return true;
        } else {
            return false;
        }
    }
}

var POD_procedure = {
  timeline: [POD_loop_node],
  timeline_variables: POD_stimuli,
  repetitions: 1,
  randomize_order: true
}

Again, I just want one stimulus to repeat, not the whole block.

[becky-gilbert]

Hi @rbruno1, you're right that the compareKeys function is just for comparing key presses. To compare a button press response, you can just use the double-equals operator to test if they're the same. Button press responses are stored as numbers in the jsPsych data, so probably best to compare against the number 1 (instead of the '1' string).

Also, your POD_loop_node timeline contains two trials, so the data that's passed to the loop_function parameter will contain the data from both of those trials. I think your goal is to check the button response from the second trial in the timeline? If so, then you want to index the second set of trial data inside of data.values(), which means you'll use the number 1 instead of 0. So try this in your loop function:

loop_function: function(data){
  if(data.values()[1].response == 1){
    return true;
  } else {
    return false;
  }
}

Tip: if you're not sure how to extract the information you need from the data in the loop function, you can always print the data out to the console so that you can see what it looks like after each loop:

loop_function: function(data){
  console.log(data.values());
  if(data.values()[1].response == 1){
  // etc.

But I noticed that with this solution, the loop function is only checking the value of the 2nd button press to determine whether to loop over the two trials, which means that pressing the 'Listen again' button during the first (audio) trial won't actually do anything. You could check the button presses on both trials in the loop function, and loop over the two trials if either one was pressed (i.e. if(data.values()[0].response == 1 || data.values()[1].response == 1). However, that will always run both trials, and then either continue or repeat them both (rather than allowing the participant to repeat each one separately). So if you want to allow the participant to repeat each one separately if they click 'Listen again', then you can set this up with two different loop nodes, like this:

var POD_loop_1 = {
  timeline: [{
    type: 'html-button-response',
    stimulus: jsPsych.timelineVariable('stimulus'),
    choices: ['OK', 'Listen again'],
    post_trial_gap: 500
  }],
  loop_function: function(data){
    if(data.values()[0].response == 1){
      return true;
    } else {
      return false;
    }
  }
};

var POD_loop_2 = {
  timeline: [{
    type: 'html-button-response',
    stimulus: "Tell your experimenter what word she was about to say, or listen to the recording again!",
    choices: ["Continue", "Listen again"],
    post_trial_gap: 500
  }],
  loop_function: function(data){
    if(data.values()[0].response == 1){
      return true;
    } else {
      return false;
    }
  }
}

var POD_procedure = {
  timeline: [POD_loop_1, POD_loop_2],
  timeline_variables: POD_stimuli,
  randomize_order: true
};

Note that now you'd be using data.values()[0] in the loop functions for both trials, because there's just one trial in the loop node timeline instead of two, and so you're accessing the response from the first (only) trial in the data.
I hope that helps!

[rbruno1]

got it. Thank you so much

[becky-gilbert]

Yep the two trials should still be kept together with the code above. The reason this works is because each trial pair is defined as a single timeline in the POD_procedure, and this two-trial procedure is repeated for every object in the POD_stimuli timeline variables array. So what jsPsych will do is:

1. randomize the order of trial objects in the timeline variables array (POD_stimuli), and then for each object,
2. run the two-trial timeline ([POD_loop_1, POD_loop_2]) using the information contained in that trial object (e.g. stimulus: 'BucketThere_POD.wav')

So try implementing any of the code above and let me know if it works. You should be able to tell that the two trials stay paired together by adding the trial-specific information (stimulus) to the data for the second trial:

var POD_loop_2 = {
  timeline: [{
    type: 'html-button-response',
    stimulus: "Tell your experimenter what word she was about to say, or listen to the recording again!",
    choices: ["Continue", "Listen again"],
    post_trial_gap: 500,
    // save the stimulus from the previous trial to the data for this trial
    data: {audio_sitmulus: jsPsych.timelineVariable('stimulus')} 
  }],
  // etc.
}

Or (for easier debugging) you can print out the name of the audio stimulus on the page during the second trial. You should find that the stimulus file name on these trials matches the audio that played on the previous trial.

var POD_loop_2 = {
  timeline: [{
    type: 'html-button-response',
    stimulus: function() {
      return jsPsych.timelineVariable('stimulus') +
        "<p>Tell your experimenter what word she was about to say, or listen to the recording again!</p>"
    },
    choices: ["Continue", "Listen again"],
    post_trial_gap: 500
  }],
  // etc.
}

[rbruno1]

is there a way to make the option to replay the trial available once? is there a way to stop the loop after one time? They will be hearing a sound and we want to avoid learning if possible

[becky-gilbert]

Sure, but the only way I can think of to do this is a little confusing. What you can do is add a global variable (repeated) that tracks whether the stimulus has already been repeated (true) or not (false). Then, if the stimulus has been repeated, you don't allow another repetition of the same stimulus (i.e. the loop function should not return true). When each trial starts, you can check whether this repeated variable is true, and if so, remove the Listen again option. You also need to reset this repeated variable back to false after all trials are finished for each stimulus.

  // global variable to track whether or not a stimulus has been repeated
  // this starts off as false and can change during the experiment
  var repeated = false; 

  var POD_loop_1 = {
    timeline: [{
      type: 'audio-button-response',
      stimulus: jsPsych.timelineVariable('stimulus'),
      choices: ['OK', 'Listen again'],
      post_trial_gap: 500,
      on_start: function(trial) {
        // before the trial starts, check whether this stimulus has already been repeated,
        // if so, then remove the 'Listen again' option
        if (repeated) {
          trial.choices = ['OK'];
        }
      }
    }],
    loop_function: function(data) {
      // after a trial ends, the trial should repeat if 'Listen again' was selected 
      // and the stimulus has not been repeated yet
      if (data.values()[0].response == 1 && !repeated) {
        // if the participant clicks 'Listen again', then change repeated to true
        repeated = true;
        return true;
      } else {
        return false;
      }
    }
  };

  var POD_loop_2 = {
    timeline: [{
      type: 'html-button-response',
      stimulus: 'Tell your experimenter what word she was about to say, or listen to the recording again!',
      choices: ["Continue", "Listen again"],
      post_trial_gap: 500,
      on_start: function(trial) {
        // before the trial starts, check whether this stimulus has already been repeated,
        // if so, then remove the 'Listen again' option
        if (repeated) {
          trial.choices = ['OK'];
        }
      }
    }],
    loop_function: function(data) {
      // after a trial ends, the trial should repeat if 'Listen again' was selected 
      // and the stimulus has not been repeated yet
      if (data.values()[0].response == 1 && !repeated) {
        // if the participant clicks 'Listen again', then change repeated to true
        repeated = true;
        return true;
      } else {
        // all trials are finished for this stimulus, so reset the repeated variable to false for the next stimulus
        repeated = false; 
        return false;
      }
    }
  }

Does that do what you need?

[rbruno1]

You are brilliant. This worked. Thank you.