Iterating through an array, but will only display last elements

I’m coding this using Javascript as it will be run online, but this question didn’t look like it fit within the descriptions of the other categories

Let me preface, I am not proficient in Python nevermind Javascript, so this is all very new to me. I have a study being piloted online that has too much randomization for me to understand how to handle with excel files, so I decided to manually input all of my conditions into arrays and randomize them accordingly.

I have three arrays containing image paths: scenes, obj1, and obj2 which all contain 64 elements. Once I use .setImage() and set all of my images accordingly, only the very last scenes and objects in the array are displayed in the running experiment. Using the console.log() function, I can see that it is properly logging all of the scenes and objects in their respective arrays, but they just aren’t being displayed on each trial.

Also to note: I realize that my mapping function for my objects overrides any randomization I had done, so if you also have a solution to that, that would be awesome. Also, in between these code components are image components named “presentScene”, “object1” and “object2”.

Here are my code components:
conditions

shuffle = (array) => { 
  array = array.slice();  // make a copy of the array
  for (let i = array.length - 1; i > 0; i--) { 
    const j = Math.floor(Math.random() * (i + 1)); 
    [array[i], array[j]] = [array[j], array[i]]; 
  } 
  return array; 
}; 

//Shuffle arrays in sync
function shuffleArrayInSync(arrays) {

  if (arrays.length === 0) return [];

 

  let indices = Array.from({ length: arrays[0].length }, (_, i) => i);

 

  // Shuffle the indices array

  for (let i = indices.length - 1; i > 0; i--) {

    let j = Math.floor(Math.random() * (i + 1));

    [indices[i], indices[j]] = [indices[j], indices[i]];

  }

 

  // Use the shuffled indices to reorder each array

  return arrays.map(array => indices.map(i => array[i]));

}


//Define arrays

var stimuli = ["stimuli/fairy.png", "stimuli/elf.png", "stimuli/witch.png", "stimuli/genie.png"]

var trialTypes = ['predictable','predictable','predictable','predictable','predictable','predictable',
'predictable','predictable','predictable','predictable','predictable','predictable',
'predictable','predictable','predictable','predictable','predictable','predictable',
'predictable','predictable','predictable','predictable','predictable','predictable',
'predictable','predictable','predictable','predictable','predictable','predictable',
'predictable','predictable', 'unpredictable','unpredictable','unpredictable','unpredictable','unpredictable',
'unpredictable','unpredictable','unpredictable','unpredictable','unpredictable','unpredictable',
'unpredictable','unpredictable','unpredictable','unpredictable','unpredictable','unpredictable',
'unpredictable','unpredictable','unpredictable','unpredictable','unpredictable','unpredictable',
'unpredictable','unpredictable','unpredictable','unpredictable','unpredictable','unpredictable',
'unpredictable','unpredictable', 'unpredictable'
]

var scenes=[
  "scenes/01.jpg", "scenes/02.jpg", "scenes/03.jpg", "scenes/04.jpg", "scenes/05.jpg", 
  "scenes/06.jpg", "scenes/07.jpg", "scenes/08.jpg", "scenes/09.jpg", "scenes/10.jpg", 
  "scenes/11.jpg", "scenes/12.jpg", "scenes/13.jpg", "scenes/14.jpg", "scenes/15.jpg", 
  "scenes/16.jpg", "scenes/17.jpg", "scenes/18.jpg", "scenes/19.jpg", "scenes/20.jpg", 
  "scenes/21.jpg", "scenes/22.jpg", "scenes/23.jpg", "scenes/24.jpg", "scenes/25.jpg", 
  "scenes/26.jpg", "scenes/27.jpg", "scenes/28.jpg", "scenes/29.jpg", "scenes/30.jpg", 
  "scenes/31.jpg", "scenes/32.jpg", "scenes/33.jpg", "scenes/34.jpg", "scenes/35.jpg", 
  "scenes/36.jpg", "scenes/37.jpg", "scenes/38.jpg", "scenes/39.jpg", "scenes/40.jpg", 
  "scenes/41.jpg", "scenes/42.jpg", "scenes/43.jpg", "scenes/44.jpg", "scenes/45.jpg", 
  "scenes/46.jpg", "scenes/47.jpg", "scenes/48.jpg", "scenes/49.jpg", "scenes/50.jpg", 
  "scenes/51.jpg", "scenes/52.jpg", "scenes/53.jpg", "scenes/54.jpg", "scenes/55.jpg", 
  "scenes/56.jpg", "scenes/57.jpg", "scenes/58.jpg", "scenes/59.jpg", "scenes/60.jpg", 
  "scenes/61.jpg", "scenes/62.jpg", "scenes/63.jpg", "scenes/64.jpg"
  ];
  
var obj1_x= [
  -270, -270, -270, -270, -270, -270, -270, -270, 270, 
  270, 270, 270, 270, 270, 270, 270, -270, -270, -270, 
  -270, -270, -270, -270, -270, 270, 270, 270, 270, 270, 
  270, 270, 270, -270, -270, -270, -270, -270, -270, -270, 
  -270, 270, 270, 270, 270, 270, 270, 270, 270, -270, -270, 
  -270, -270, -270, -270, -270, -270, 270, 270, 270, 270, 270, 270, 270, 270
  ];

var obj1_y= [
  180, 180, 180, 180, 180, 180, 180, 180, -180, -180, -180, 
  -180, -180, -180, -180, -180, 180, 180, 180, 180, 180, 180, 
  180, 180, -180, -180, -180, -180, -180, -180, -180, -180, 180,
  180, 180, 180, 180, 180, 180, 180, -180, -180, -180, -180, -180, 
  -180, -180, -180, 180, 180, 180, 180, 180, 180, 180, 180, -180, 
  -180, -180, -180, -180, -180, -180, -180
  ]
  
var obj2_x= [
  270, 270, 270, 270, 270, 270, 270, 270, -270, -270, 
  -270, -270, -270, -270, -270, -270, 270, 270, 270, 270, 270, 270, 
  270, 270, -270, -270, -270, -270, -270, -270, -270, -270, 270, 270, 
  270, 270, 270, 270, 270, 270, -270, -270, -270, -270, -270, -270, 
  -270, -270, 270, 270, 270, 270, 270, 270, 270, 270, -270, -270, 
  -270, -270, -270, -270, -270, -270
  ];

var obj2_y= [
  -180, -180, -180, -180, -180, -180, -180, -180, 180, 180, 
  180, 180, 180, 180, 180, 180, -180, -180, -180, -180, -180, 
  -180, -180, -180, 180, 180, 180, 180, 180, 180, 180, 180, -180, 
  -180, -180, -180, -180, -180, -180, -180, 180, 180, 180, 180, 180, 
  180, 180, 180, -180, -180, -180, -180, -180, -180, -180, -180, 180, 
  180, 180, 180, 180, 180, 180, 180
  ];



//Shuffle scenes and coords in sync
[scenes, obj1_x, obj1_y, obj2_x, obj2_y]  = shuffleArrayInSync([scenes, obj1_x, obj1_y, obj2_x, obj2_y]);

//Shuffle trial types
shuffle(trialTypes)

//Shuffle stimuli
shuffle(stimuli)

// Split the stimuli into two sublists
var obj1 = stimuli.slice(0, 2);

var obj2 = stimuli.slice(2);

 
// create a new obj1 + obj2  based on trial_type
var obj1 = trialTypes.map(predictable => predictable === 'unpredictable' ? obj1[0] : obj1[1]);

var obj2 = trialTypes.map(predictable => predictable === 'unpredictable' ? obj2[0] : obj2[1]);

//Log
console.log("scenes:", scenes);

console.log("obj1_x:", obj1_x);

console.log("obj1_y:", obj1_y);

console.log("obj2_x:", obj2_x);

console.log("obj2_y:", obj2_y);

console.log("trialTypes:", trialTypes);

console.log("obj1:", obj1);

console.log("obj2:", obj2);

setElements

    for (let conditionsLoop = 0; conditionsLoop < scenes.length; conditionsLoop++) {
        allScenes = scenes[conditionsLoop];
        presentScene.setImage(allScenes);

        allObj1 = obj1[conditionsLoop];
        object1.setImage(allObj1);

        allObj2 = obj2[conditionsLoop];
        object2.setImage(allObj2);

    // After the loop ends, you can log the last values
    console.log("All Scenes:", allScenes);
    console.log("All Object 1:", allObj1);
    console.log("All Object 2:", allObj2);

}

Thanks!!!