Slicing the image set before preloading

[VL914]

Hello,
I'm trying to use ".slice()" to split a list of images into two subsets, one for practice and the other for the formal experiment. But I'm not sure if it's because slicing changes the data structure or any other properties, it always shows that the timeline variable is undefined in the stimulus display page. Both of the subsets could be returned by the value predefined in the console window, and also could be successfully preloaded using the pluginAPI. Also, the image sets with the same information and structure, but not sliced before preloading, can be displayed successfully. I tried lots of variations, but it seems that it's always due to slicing.

BTW, I'm doing a crowd-sourcing experiment. So it is impossible to hardcode the image list, and that's why I'm using slicing.

Any suggestions of how I can solve this issue? Thank you very much!

[becky-gilbert]

I don't think that using array.slice() should alter the original array - see docs here. Could you share your code, or a minimal reproducible example?

[VL914]

Hi, thanks for following up! My code is a little long and complex, especially for defining the variables. I used a lot of helper functions to create randomized arrays, and arrange them in the structure of a timeline variable. But it becomes even more complicated if I need to hard code some additional conditions. So I just found another solution from the forum, that is to convert csv to json files, and import json directly.

Now I've got a json file like this:

[
  {
    "pic": "resources/image1.jpg/",
    "picNum": "0001",
    "size": 60,
  },
  {
    "pic": "resources/image2.jpg/",
    "picNum": "0002",
    "size": 60,
  },
 .....]

all the way up to a total of 1000+ images

And I've add one line in the script to include this file
<script src="resources/imgTable.json" type="text/javascript"></script>
But I'm kind of stuck on how to use it as a timeline variable. Do I need to "push" the images one by one to an empty timeline variable? Also, is there any way to randomize it within blocks of trials, say randomize the image 1-100, 2-200, and so on respectively?

Thank you!

[becky-gilbert]

Hi @VL914, to make things easier, I would suggest turning your JSON file into a JavaScript file by saving the array as a variable:

var trial_info = [
  {
    "pic": "resources/image1.jpg/",
    "picNum": "0001",
    "size": 60,
  },
  {
    "pic": "resources/image2.jpg/",
    "picNum": "0002",
    "size": 60,
  },
  //.....
]

and saving the file with a .js extension instead of .json, and then reading that in:

<script src="resources/imgTable.js" type="text/javascript"></script>

Then, in your main script, you should have access to the trial_info array, which you can use as your timeline variables:

var trial_procedure = {
  timeline: [trial],
  timeline_variables: trial_info
};

I'm not sure I understand exactly how you want to create randomized blocks of trials. If you want to randomize the order of all trials and interrupt the trial procedure with a break screen after every N trials, then you can see how to do that using a conditional node as explained in other Discussion comments here and here. To do that, your procedure would end up looking like this:

var trial_procedure = {
  timeline: [trial, break_conditional],
  timeline_variables: trial_info,
  randomize_order: true
};

Or if you want to separate the trial information for each before randomizing the order, you could (1) create separate arrays for each block using the JavaScript .slice() function, (2) use those separate block arrays as the timeline_variables array for each block procedure, with randomize_order: true, and (3) insert a break screen trial onto your timeline, in between each trial block (if you want a break screen?). That would look something like this:

var trial_info_block1 = trial_info.slice(0,100); // get trials with indices 0 to 99
var trial_procedure_block1 = {
  timeline: [trial],
  timeline_variables: trial_info_block1,
  randomize_order: true
};
// ... same for block 2, block 3 etc.

[VL914]

Hi @becky-gilbert, thank you so much for your help! Everything is working perfectly for me now! I can manage my stimulus conditions via external json files, and also slice or manipulate the image dictionaries as I want. Thanks much again for your patience and time in answering the questions:) Really appreciate it!

[becky-gilbert]

Great! And thanks for the update 😃

[VL914]

Hi @becky-gilbert, sorry for bringing this up again after so long. I just had one more following-up question regarding this method of preloading images via an external JSON file. Would it cause the problem of cache limits if I'm preloading more than 20,000 images (though the average sizes of the images are pretty small)? Does it mean that I'm preloading all the images at the beginning of the experiment, or is it just preloading a list and retrieve one image at a time during the experiment? Because I'm getting feedback from the participants saying that there were trials where the images didn't show up (the presentation time is 1500 ms). If this is the problem, is there any way that I could solve it?