Presenting images from a random image selection

[jaydavies16129]

Hi there,
This is kind of a continuation from #1863 but I thought this question may be useful for others so started a new discussion.
My experiment involves using the free-sort plugin to show a random 10 images (5 pairs out of a possible 50 pairs and therefore 100 images) (see #1863).
We need to add a simple task at the end, whereby the same images drawn at random at the start are presented one by one, and the participant gives a button response (a Likert scale basically).

Below is the code for drawing images for the free-sort and my attempt at adding the liking trial.

    var all_pairs = [];
    ...
    all_pairs.push ([ninetysevenURL, ninetyeightURL]);
    all_pairs.push ([ninetynineURL, onehundredURL]);
    
    var images = jsPsych.randomization.sampleWithoutReplacement(all_pairs, 5);
    images = images.flat();
    images = jsPsych.randomization.shuffleNoRepeats(images);

   var liking = jsPsych.randomization.sampleWithoutReplacement(images, 1);
    liking = liking.flat();
    liking = jsPsych.randomization.shuffleNoRepeats(liking);

   var likingtwo = jsPsych.randomization.sampleWithoutReplacement(images, 1);
    likingtwo = likingtwo.flat();
    likingtwo = jsPsych.randomization.shuffleNoRepeats(likingtwo);

   var liking_trial = {
        type: 'image-button-response',
        stimulus: liking,
        stimulus_height:600,
        stimulus_width: 900,
        choices: ['1 (Not at all)', '2', '3', '4','5', '6', '7 (Completely)'],
        prompt: "<p> How much do you like this image? </p>",
        response_ends_trial: true,
    };

    var liking_trial_two = {
        type: 'image-button-response',
        stimulus: likingtwo,
        stimulus_height:600,
        stimulus_width: 900,
        choices: ['1 (Not at all)', '2', '3', '4','5', '6', '7 (Completely)'],
        prompt: "<p> How much do you like this image? </p>",
        response_ends_trial: true,

This does present the same images used for the main part of the experiment which is good.
The problem is, if I add 10 liking trials, using the stimulus variables 'liking', 'liking two' and so on, about 5/6 out of the 10 are presented, with some being repeated. I am struggling with how to make it so that all 10 images are shown and not repeated.

Does this make sense?
Many thanks as always.

[cslongman]

Can you just put all of the stimulus names into an array...?

var liking = ['stim1', 'stim2', ..., 'stim10']

You can then randomise the order using your preferred method (e.g., shuffle).

Finally, you just add them onto the timeline using a for loop...

for (i=0; i<10; i++){

var liking_trial = {
...
stimulus: liking[i],
...
};

timeline.push(liking_trial)

} //ends the for loop

Would this work?

Cai

[jaydavies16129]

Hi @cslongman, no I'm not sure this works for this context :(

I have drawn 5 pairs out at random from the array. I then need to use these same 10 images one by one.

Apologies, it's a bit hard to describe!

[cslongman]

That's OK - it is always hard to describe :)

So, I think that the way you draw down the 5 pairs is important...

If you draw them down as I described in my previous post (images[[ninetysevenURL, ninetyeightURL],[ninetynineURL, onehundredURL],...]), then you can do a couple of things...

1. You could first get them out of that format and into a variable that is closer to what you will want to use in my suggested for loop (something that looks like this: images = [ninetysevenURL, ninetyeightURL...]). Once you have a nice easy-to-use variable, the rest shodul be simple.

2. You could use 2 for loops...

for (a=0; a<5; a++){ // this one will loop through the 5 pairs
for (b=0; b<2; b++){ //this one will catch each item in the pair

var liking_trial = {
...
stimulus: liking[a][b],
...
};

timeline.push(liking_trial)

} // loops b
}// loops a

Not sure if either of these will fix it for you, but if I am understanding your problem, then one of these should do it.

Hope this helps,

Cai

[jaydavies16129]

Hi @cslongman, thank you again for your suggestions, I've learnt something new!

However I managed to get it working another way just by creating 10 variables. Annoyingly, it was relatively simple in the end... typical!!
Thought I'd post the code here in case anyone has a similar issue :)

Thanks again for your help!

   var all_pairs = [];
   all_pairs.push ([oneURL, twoURL]);
   all_pairs.push ([threeURL, fourURL]);
...
    all_pairs.push ([ninetysevenURL, ninetyeightURL]);
    all_pairs.push ([ninetynineURL, onehundredURL]);

  
    var images = jsPsych.randomization.sampleWithoutReplacement(all_pairs, 5);
    images = images.flat();
    images = jsPsych.randomization.shuffle(images);
    
    var imageone = images [0]
    var imagetwo = images [1]
    var imagethree = images [2]
    var imagefour= images [3]
    var imagefive= images [4]
    var imagesix= images [5]
    var imageseven = images [6]
    var imageeight= images[7]
    var imagenine = images [8]
    var imageten = images [9]
   
    /* create timeline */
    
    var hello_trial = {
        type: 'html-keyboard-response',
        stimulus: 'You will first be presented with a series of 10 images which we would like you to rate for how much you like them. We would like you to imagine you are standing in these environments. Press any key to continue.'
    }
   
    var instruction_trial = {
        type: 'html-keyboard-response',
        stimulus: 'For the second task, we would like you to arrange (by dragging and dropping) the images on the screen in accordance with how much you agree (Not at all to Completely) with a series of statements. The statements are shown above the images. Press any key to continue.'
    }
    
    let init_locations = [];
    let moves = [];
    let final_locations = [];

    var liking_trial = {
        type: 'image-button-response',
        stimulus: imageone,
        stimulus_height:600,
        stimulus_width: 900,
        choices: ['1 (Not at all)', '2', '3', '4','5', '6', '7 (Completely)'],
        prompt: "<p> How much do you like this image? </p>",
        response_ends_trial: true,
    };
    
    var liking_trial_two = {
        type: 'image-button-response',
        stimulus: imagetwo,
        stimulus_height:600,
        stimulus_width: 900,
        choices: ['1 (Not at all)', '2', '3', '4','5', '6', '7 (Completely)'],
        prompt: "<p> How much do you like this image? </p>",
        response_ends_trial: true,
    };
    
/////////////////////(ten liking trials in total)/////////////////////////

/////////////////////free-sort trials (1/10)/////////////////////////////

  var all_data = jsPsych.data.get();
  var timeline = [];
 
 gorilla.startStopwatch();
        var trial_1 = {
        type: 'free-sort',
        stimuli: images,
        stim_height: 125, 
        stim_width: 140,
        scale_factor: 1,
        sort_area_shape: "square",
        sort_area_height: 600,
        sort_area_width: 1000,
        prompt: 'Being here is an escape experience. ',
        prompt_location: "above:",
        column_spread_factor: -1.5,
        stim_starts_inside: false,
        on_load: function() {
          // after the trial loads, get the sort area element on the page
          var sort_element = document.getElementById('jspsych-free-sort-arena');
          // add label above it
          var label_above = '<p>Completely</p>';
          sort_element.insertAdjacentHTML('beforebegin',label_above);
          // add label below it
          var label_below = '<p>Not at all</p>';
          sort_element.insertAdjacentHTML('afterend',label_below);
        }
      };
  
  gorilla.stopStopwatch();
    var responseTime = gorilla.getStopwatch();
    
  gorilla.metric({
                responseTime: responseTime,
            });

var debrief_trial = {
        type: 'html-keyboard-response',
        stimulus: 'Thank you! You have now reached the end of the experiment. Press any key to continue to the debrief.',
    }
  
jsPsych.init({
        display_element: $('#gorilla')[0],
        timeline: [hello_trial, instruction_trial,liking_trial, liking_trial_two, trial_1, debrief_trial],
        preload_images: images,
        on_finish: function() {jsPsych.data.get(),
           gorilla.finish();
        },
        
        on_data_update: function(data) {
            gorilla.metric(data);
        }    
    });
});

[cslongman]

Hi Jay,

This is pretty much exactly what I was trying to say, but clearly not communicating it well enough (Friday afternoon feeling!). The only real difference is that I was suggesting you have a single variable that holds each of the images in it as an array (images = [image1, image2, ..., image 10]).

You could have then used the for loop solution instead of creating 10 separate liking trials.

Anyway, glad you got it working :)

[jaydavies16129]

Hi @cslongman,

Friday afternoon feeling indeed, we got there in the end! Many thanks again :)