Image File Paths and Randomization

[MTuttle6]

Hello! I'm very new to jspsych and am designing an experiment in which I need to randomly sample 5 images from a set of 40 and then display those images in a table on the screen. I'm able to sample the 5 images just fine using sampleWithoutReplacement and then I put those images into their own array.

My problem is this:
I don't know how to get those 5 images as stimuli in a trial. I know that I can do a trial with an html stimulus and specify a table of images but that requires specifying the file path and I need to be able to change those file paths for each participant. I tried indexing from the new image array and putting that into the src parameter but that doesn't seem to have worked. As I said before, I have the randomized file paths I need in an array already I just can't seem to get them from that matrix into the stimulus parameter of a trial.

Of course any and all help is appreciated and if you need more info I'm happy to oblige.

[becky-gilbert]

Hi @MTuttle6! Do you mind sharing a little more about how you're setting up your trials, for instance by posting your code (simplified/reproducible, if possible)?

But in general, if you're storing your 5 randomly-sampled images in an array, then one option is to use dynamic parameters to access the elements of the array for each trial (if you're adding trials individually to your timeline). Another option is to add the sampled image files into an array of objects that can be used as your timeline variables array (if you're using the timeline variables method). If you don't mind posting some example code then we can offer more guidance 😃

[MTuttle6]

Yes of course! Here's the idea (code below):
The test_stimuli_index object randomly samples 6 numbers to be used to index from the array called images which contains 40 image files. The test_stimuli variable is then an array of these 6 images from the array called images.

Currently, the code I have pasted below simply presents six predetermined faces to the subject instead of using the 6 images stored in the test_stimuli array.

The goal is to present all six of the faces in the test_stimuli array to the subject at once in a 2x3 table/matrix on the screen and have them respond to that with a button press.

`

 var test_stimuli_index=
  jsPsych.randomization.sampleWithoutReplacement(
  [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],6);

var test_stimuli=[
  images[test_stimuli_index[0]],
  images[test_stimuli_index[1]],
  images[test_stimuli_index[2]],
  images[test_stimuli_index[3]],
  images[test_stimuli_index[4]],
  images[test_stimuli_index[5]]
];

var test_trial={
  type: 'html-button-response',
  stimulus:'<table><tr> <td><img src="jspsych/examples/img/happy_face_1.jpg"   style="width:200px;"></td><td><img src="jspsych/examples/img/happy_face_2.jpg"   style="width:200px;"></td><td><img src="jspsych/examples/img/happy_face_3.jpg"   style="width:200px;"></td></tr><tr> <td><img src="jspsych/examples/img/sad_face_1.jpg"   style="width:200px;"></td><td><img src="jspsych/examples/img/sad_face_2.jpg"   style="width:200px;"></td><td><img src="jspsych/examples/img/sad_face_3.jpg"   style="width:200px;"></td></tr><tr><td></td><td><img src="images/NoMatch20.png" style="width:100px;height:100px;"</td><td></td></tr></table>',
  choices: ['present','absent']
};
timeline.push(test_trial);`

[becky-gilbert]

Aha - thanks for explaining and posting your code! It turns out that you don't need to use either of the options that I suggested before 😃

Because your stimuli are sampled when the page first loads (rather than during the experiment), you can just use the test_stimuli variable inside of your stimulus parameter, without turning the parameter into a function (i.e. making it into a dynamic parameter). To combine your existing stimulus HTML string with the images in the test_stimuli array, you can concatenate the HTML string and image names from the array using the + operator, like this:

var test_trial={
  type: 'html-button-response',
  stimulus:'<table><tr> <td><img src="'+test_stimuli[0]+'" style="width:200px;"></td><td><img src="'+test_stimuli[1]+'" style="width:200px;"></td><td><img src="'+test_stimuli[2]+'" style="width:200px;"></td></tr><tr> <td><img src="'+test_stimuli[3]+'" style="width:200px;"></td><td><img src="'+test_stimuli[4]+'" style="width:200px;"></td><td><img src="'+test_stimuli[5]+'" style="width:200px;"></td></tr><tr><td></td><td><img src="images/NoMatch20.png" style="width:100px;height:100px;"</td><td></td></tr></table>',
  choices: ['present','absent']
};

Does that do what you need?

[MTuttle6]

Yes! This seems to be exactly what I was looking for, thank you so much for the quick fix!