Differ Visual Appearance on Repeat

[oatmeg]

I am attempting to make an experiment where an array of four images repeats three times. However, on the second repeat I would like the target image to have a border around it. In other words, on repeat one, no images have a border, on repeat two one image has a border, and on repeat three no images have a border again. My reasoning for repeating and not just building different trials is because I am utilising randomisation, so, I wanted the order in which the four images appears to stay consistent, with the only thing differing is the border being added. See below for my code, and then below that for what I am ideally looking for!

function make_event1_trial(target_image, distractor_image1, distractor_image2, distractor_image3) {
  images_to_preload.push(target_image);
  images_to_preload.push(distractor_image1);
  images_to_preload.push(distractor_image2);
  images_to_preload.push(distractor_image3);

  var target_image = "images/" + target_image + ".png";
   distractor_image1 = "images/" + distractor_image1 + ".png";
   distractor_image2 = "images/" + distractor_image2 + ".png";
   distractor_image3 = "images/" + distractor_image3 + ".png";
 
   var shuffled_images = jsPsych.randomization.shuffle([
     target_image,
     distractor_image1,
     distractor_image2,
     distractor_image3,
   ]);
 
   var array = {
    type: jsPsychImageButtonResponse,
    stimulus: [],
    choices: ['<img src="'+shuffled_images[0]+'" width=525px>', '<img src="'+shuffled_images[1]+'"\
width=525px>', '<img src="'+shuffled_images[2]+'" width=525px>', '<img src="'+shuffled_images[3]+'" width=525px>'],
    prompt: ['<div id="myprompt", style="font-weight: bold; font-size: 30px; position: absolute; top:12%; left: 12.6%;">1</div> \
    <div id="myprompt", style="font-weight: bold; font-size: 30px; position: absolute; top:12%; right: 46.6%;">2</div> \
    <div id="myprompt", style="font-weight: bold; font-size: 30px; position: absolute; bottom:43.8%; left: 12.6%;">3</div> \
    <div id="myprompt", style="font-weight: bold; font-size: 30px; position: absolute; bottom:43.8%; right: 46.6%;">4</div>'],
    response_ends_trial: true,
  };
 
   var full_trial = { timeline: [array] };
   return full_trial;
 }


var event1_trial_unshuffled = [
  make_event1_trial("event1", "poke_different_event", 'poke_different_actor','poke_different_agent'),
];

var event1_trial = jsPsych.randomization.repeat(
  event1_trial_unshuffled, 3
);