Adding images from a folder in a jsPsych experiment
When running an experiment that involves a lot of images on a local computer, one procedure to get the images in your experiment is to write a little bit of code that lists all the images in a specified folder. Unfortunately, this convenient approach does not work with JavaScript. For security reasons, client-side JavaScript is not allowed to access the file system, and listing the content of a folder is therefore impossible.
In these cases, my solution is to use a hybrid approach where I list the content of the folder that I intend to use on my local computer and then generate a string that I can copy-paste into my jsPsych code.
Specifically, suppose that I want to create an image-button-response trial for every image in my ExperimentalImages folder. For that I would like to have all the image names in an array so that I can loop over the array and create the corresponding trials as follows:
let images = [];
for(let i = 0; i < images.length; ++i){
let imageTrial = {
type: jsPsychImageButtonResponse,
stimulus: 'ExperimentalImages\' + images[i]
}
timeline.push(imageTrial)
}
To fill the images array, I would use the following Python code:
import json
import os
stimulus_folder = r'C:\MyExperiment\ExperimentalImages'
stimuli = []
for stimulus in os.listdir(stimulus_folder):
if '.jpg' in stimulus:
stimuli.append(stimulus)
parameters = "let images = " + json.dumps(stimuli) + ";"
This Python code scans the content of stimulus_folder, and adds any files that have the .jpg extension to a list. The final line of code creates a string that is valid JavaScript code, and the content of that string can be copy-pasted into my JavaScript code.