Add trial to timeline at the current position in timeline

[nrschoen]

Hi,

I am trying to give a warning screen every time a participant exits fullscreen or leaves the browser tab, including the possibility to enter fullscreen again. For this reason I am wondering if there is any way to insert a trial at the current position in the timeline using an on_interaction_data_update function?

This could be useful in other ways as well, such as adding a feedback screen if the performance is really bad or other conditional trials that get displayed next if certain conditions are met.

I know this would be possible with splice() maybe? But then I would need to extract the current location in the timeline and set the location parameter in splice() accordingly. I was hoping there is an easier way?

Thanks in advance for your help!

Best,
Neil

[kschuler]

Yes! You can do this, and you don't need to splice the timeline. I'm adapting the face_name_procedure from the docs, in the timeline variable section: https://www.jspsych.org/overview/timeline/#timeline-variables.

Here we are going to see 4 "trials", each one a different face. On each of these trials, the subjects sees a fixation cross '+' for 500ms and then sees the face for 2500ms.

var face_name_procedure = {
    timeline: [
        {
            type: 'html-keyboard-response',
            stimulus: '+',
            choices: jsPsych.NO_KEYS,
            trial_duration: 500
        },
        {
            type: 'image-keyboard-response',
            stimulus: jsPsych.timelineVariable('face'),
            choices: jsPsych.NO_KEYS,
            trial_duration: 2500
        }
    ],
    timeline_variables: [
        { face: 'person-1.jpg' },
        { face: 'person-2.jpg' },
        { face: 'person-3.jpg' },
        { face: 'person-4.jpg' }
    ]
}

Let's say we want to show a special screen after person 3. We could do this by adding a trial type to the timeline that is a conditional function.

var face_name_procedure = {
    timeline: [
        {
            type: 'html-keyboard-response',
            stimulus: '+',
            choices: jsPsych.NO_KEYS,
            trial_duration: 500
        },
        {
            type: 'image-keyboard-response',
            stimulus: jsPsych.timelineVariable('face'),
            choices: jsPsych.NO_KEYS,
            trial_duration: 2500
        },
     
        // here's the new part I added
         {  
             timeline: [trial_after_person_3],
              conditional_function: function() {
                       // this gets the values from the last trial (or something like this... check the docs)
                       var data = jsPsych.data.get().last(1).values()[0];  
                       // this checks if the face parameter was person 3
                       (data.face === 'person-3.jpg') ? return true : return false;   
             }
    ],
    timeline_variables: [
        { face: 'person-1.jpg' },
        { face: 'person-2.jpg' },
        { face: 'person-3.jpg' },
        { face: 'person-4.jpg' }
    ]
}

// then of course you need to add what you want the conditional trial to be like 
// this will only get run if the conditional function evaluates to true; if not, jsPsych will skip it
var trial_after_person3 = {
            type: 'html-keyboard-response',
            stimulus: 'You just saw person 3!',
            choices: jsPsych.NO_KEYS,
            trial_duration: 500
        }

For the fullscreen stuff -- jsPsych has several callback functions based on user events; The one you want is called on_interaction_data_update :)

[nrschoen]

I am having a weird error now after implementing this. My code:

var if_no_fullscreen = {
    timeline: [fullscreen_again],
    conditional_function: function() {
      // get the data from the previous trial,
      var data = jsPsych.data.get().last(1).values()[0];
      if (data.screen_focus == "fullscreenexit") {
          return true;
      } else {
        return false;
      }
    }
}


var fullscreen_again = {
  type: 'fullscreen',
  message: '<p>Please do not leave fullscreen during the experiment! You can do it.</p>',
  fullscreen_mode: true
}

And these is the errors I get. The first one appears at the start of the experiment and the second one after I leave fullscreen mode, so where the if_no_fullscreen variable executes. What is my mistake?

[becky-gilbert]

I'm not sure about the second error, but the first one suggests that there's a problem with the objects on the timeline. One problem is that if_no_fullscreen references fullscreen_again, but at that point the latter variable hasn't been defined yet. Can you try switching the order of these variable definitions?

[nrschoen]

This was it! Thank you guys for being so responsive!!!

[nrschoen]

Thanks for the response! This works.