multiple images on slider

[beccaelsworth]

Hi,

I'm helping to adapt some existing jspsych code for an experiment on Pavlovia. This consists of sliders, shown in a randomized order, in which photos of different food items increase in portion size as you increase position on the slider.... currently this works when the different foods have the same amount of photos (50). However, we now would like to add food items which have less than 50 images. As these portion size sliders are shown in a randomized order, we have found that whichever food item is shown first, results in the rest of the portion size sliders having the same number of images on the slider as this first food (e.g. if a food item which has 30 different portion size images is shown, the the remaining foods only show the first 30 images or if they consist of less than 30 images they will show 19 images and then the food images will disappear past this point....
Therefore I would like to ask if there is a way so that the sliders show a different amount of images depending on the picture count for each food? I hope I have explained this okay. Please let me know if you'd like more information and thank you in advance for your help

[jodeleeuw]

Hi @beccaelsworth,

What plugin are you using to create this task? Can you post a screenshot of the problem?

[beccaelsworth]

Its a noUi slider plugin https://refreshless.com/nouislider/

And yes good idea!
Thank you!

[jodeleeuw]

That looks like it is not a jsPsych plugin. You could embed the nouislider into a jsPsych plugin if you wanted.

[beccaelsworth]

How can I do that?

[jodeleeuw]

Here's a video tutorial on creating a new plugin. That's where I'd recommend starting to learn.

[beccaelsworth]

Thank you so much! That looks really helpful