Iterating through an array, but will only display last elements

sbar · February 15, 2024, 3:31pm

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!!!

Topic		Replies	Views
Creating randomized blocks from several condition files Online experiments	1	399	November 3, 2019
Image stimuli randomization Builder randomization	4	31	March 19, 2025
Unusual trial structure (sequential-random hybrid) Online experiments	4	535	August 20, 2020
Loop only running 1x instead of 8x before ending routine Builder randomization	15	1535	May 14, 2020
Array of objects as the condition file Online experiments	1	650	January 20, 2020

Iterating through an array, but will only display last elements

Related topics