Adding attention checks to picture viewing experiment

[JVlasak99]

I am working with a picture viewing experiment that I have created using jsPsych and am wondering the best way to add attention checks to only a subset of trials. This could be done by using a keyboard response or button response. Any help/guidance would be greatly appreciated. Thank you in advance!

[becky-gilbert]

Hi @JVlasak99, it'd be helpful to know a little bit more about what you want to do. For instance, do you want your attention checks to be evenly-spaced throughout your picture viewing trials, or should they occur (pseduo)-randomly? And it sounds like the attention checks would be totally separate trials (rather than a change to your picture viewing trials), is that right?

[JVlasak99]

Hi @becky-gilbert,

I would like the attention checks to occur pseudo-randomly (say, 15% of trials have an attention check). Essentially, the attention check will be along the lines of asking the participant if they think the image is "positive", "neutral", or "negative", so it may be helpful to "change" the actual trials so the button shows up while the picture is still showing.

[becky-gilbert]

Ok, here's one way to do this. Disclaimer: it might not be the easiest way! Hopefully other people will chime in if they want to suggest other solutions 😃

I've added comments to the code below to explain what's happening. But the basic approach is to set up your timeline variables so that each trial object has a flag (att_check) that indicates whether or not that trial should also be an attention check. Then you can iterate through timeline variables and do different things depending on whether the att_check value is true or false for that trial. To randomly select a subset of trials to be attention checks, I created an array of trial indices, sampled from those, and then changed the att_check value to true for the trials with the selected indices.

      var timeline = [];

      // set up the array of trial objects for timeline variables
      // initialize all of the attention check properties to false - we'll change some of these to true
      var trial_info = [
        {stim: 'jspsych-6.3.0/examples/img/happy_face_1.jpg', att_check: false},
        {stim: 'jspsych-6.3.0/examples/img/happy_face_2.jpg', att_check: false},
        {stim: 'jspsych-6.3.0/examples/img/happy_face_3.jpg', att_check: false},
        {stim: 'jspsych-6.3.0/examples/img/happy_face_4.jpg', att_check: false},
        {stim: 'jspsych-6.3.0/examples/img/happy_face_1.jpg', att_check: false},
        {stim: 'jspsych-6.3.0/examples/img/happy_face_2.jpg', att_check: false},
        {stim: 'jspsych-6.3.0/examples/img/happy_face_3.jpg', att_check: false},
        {stim: 'jspsych-6.3.0/examples/img/happy_face_4.jpg', att_check: false},
        {stim: 'jspsych-6.3.0/examples/img/happy_face_1.jpg', att_check: false},
        {stim: 'jspsych-6.3.0/examples/img/happy_face_2.jpg', att_check: false},
        {stim: 'jspsych-6.3.0/examples/img/happy_face_3.jpg', att_check: false},
        {stim: 'jspsych-6.3.0/examples/img/happy_face_4.jpg', att_check: false}
      ];

      // can't do automatic preloading when the images are in timeline variables,
      // so we'll generate an array of the image files using the trial info array
      var all_images = [];
      trial_info.forEach(function(el) {
        all_images.push(el.stim);
      });

      // preload the images
      var preload = {
        type: 'preload',
        auto_preload: true,
        images: all_images
      };
      timeline.push(preload);

      // generate an array with the indices of each trial object in the trial_info array
      var trial_inds = [...Array(trial_info.length).keys()];

      // randomly sample from the array of indices to get two attention check trials
      // (change the 2 below to whatever the number of attention checks should be)
      var attention_check_sample = jsPsych.randomization.sampleWithoutReplacement(trial_inds, 2);
      // the console log below is so that you can see which trial indices were selected to be attention checks 
      // each time you run the experiment
      console.log('attention check trials: ', attention_check_sample);

      // create a new array based on trial info, but with the 'att_check' property changed to 'true'
      // for the trials that were randomly sampled
      var trial_info_att_checks = [];
      trial_info.forEach(function(el, ind) {
        if (attention_check_sample.includes(ind)) {
          el.att_check = true;
          trial_info_att_checks.push(el);
        } else {
          trial_info_att_checks.push(el);
        }
      });
      // in case you want to see what your timeline variables array looks like now
      console.log(trial_info_att_checks);

      // create the normal trial object
      var trial = {
        type: 'image-keyboard-response',
        stimulus: jsPsych.timelineVariable('stim'),
        choices: jsPsych.NO_KEYS,
        trial_duration: 1000
      };

      // put the normal trial object inside of a conditional node
      // because we only want the normal trial to run if att_check is false
      var trial_conditional = {
        timeline: [trial],
        conditional_function: function() {
          if (jsPsych.timelineVariable('att_check')) {
            return false;
          } else {
            return true;
          }
        }
      };

      // create the attention check trial
      var attention_check = {
        type: 'image-button-response',
        stimulus: jsPsych.timelineVariable('stim'),
        choices: ['Positive','Neutral','Negative']
      };

      // put the attention check trial object inside of a conditional node
      // because we only want the attention check trial to run if att_check is true
      var att_check_conditional = {
        timeline: [attention_check],
        conditional_function: function() {
          if (jsPsych.timelineVariable('att_check')) {
            return true;
          } else {
            return false;
          }
        }
      };

      // set up a trial procedure with a timeline that contains both the normal trial and attention check conditionals
      // then, for each trial object, jsPsych will either run a normal trial (if att_check is false)
      // or an attention check trial (if att_check is true)
      var trial_procedure = {
        timeline: [trial_conditional, att_check_conditional],
        timeline_variables: trial_info_att_checks
      };
      timeline.push(trial_procedure);

Because you said this is a picture viewing task, I went for the image-keyboard-response plugin for normal trials so that there's nothing on the screen apart from the image. And then for the attention checks, you want the participant to select from one of three options, which probably works best using the image-button-response plugin. But this whole thing would be slightly easier to do if you were using the same trial type for the normal and attention check trials (e.g. image-keyboard-response), because then you could get rid of the conditional nodes and just use the same trial with different parameters based on the attention check status. Let me know if you prefer to do it that way.
I hope this helps!

[JVlasak99]

@becky-gilbert Thank you so much for the time you took to respond. I will work on implementing this into my react app today and will let you know if I run into any issues! Again, thank you very much!

[becky-gilbert]

Great! Yes please do let us know if this works for you.

[JVlasak99]

Hi again, @becky-gilbert. I have been working with the code you provided for a few days and am still struggling to get the attention checks to work. When I push the trial_procedure to the timeline, the experiment starts but goes straight to my end_block code. I am using React for this project and trying to utilize jspsych-react (a fairly outdated package) alongside jsPsych. Is there anything else you can think of that might be causing this issue?

[becky-gilbert]

Hi @JVlasak99, my best guess is that maybe the conditional functions aren't working as expected for both the trial_conditional and att_check_conditional? If that's happening for every trial in your timeline variables, then all of the trials in the trial_procedure will be skipped. You could check this by adding a console log inside both conditional functions, to see what value you're getting for the att_check variable on each trial:

console.log('attention check trial?: ', jsPsych.timelineVariable('att_check'));

In the console, you should see attention check trial?: true for all attention check trials and false for all regular trials. If you add console logs to both conditionals, then you'll see two of these per trial. This will also tell you whether your conditional nodes are running as expected (if you don't see the console log(s) at all then you'll know that they aren't running).

Other things to check:

• Any errors in the console?
• What do your timeline variables look like? i.e. the output of this line console.log(trial_info_att_checks);
• If you're using jsPsych <6.3.0, then you'll have to add the second true argument to jsPsych.timelineVariable('att_check') inside the conditional functions.

I hope this helps - let me know! If not then please feel free to share your code (i.e. copy/paste here, attach or link to a file, post a link to your live experiment), and I'll try to help figure it out.