Position of pictures on the screen

[FelicityF]

The solutions provided in discussion #843 work perfectly! However, after the last workshop I adjusted my code slightly and there is one minor thing to solve before the code is doing what I want it to do.

I created a .js file containing all the items:

var Positive_list1 = [
    {
        Target: 'images/hep hef ma jove poox.png',
        Foil1: 'images/hep jove ma hef poox.png',
        Foil2: 'images/jove hef ma hep poox.png',
        Foil3: 'images/jove hep ma hef poox.png',
        correct_response: 'images/hep hef ma jove poox.png',
        audio: "audio/hep hef ma jove poox.mp3",
        syntax: "PO",
        Trial: '1',
        button: "0",
        html: ['<img style = "width:350px;" src = "%choice%" />',
        '<img style = "width:350px; visibility: hidden;" src = "%choice%" />',
        '<img style = "width:350px; visibility: hidden;" src = "%choice%" />',
        '<img style = "width:350px; visibility: hidden;" src = "%choice%" />']
    },
    {
        Foil1: 'images/rus jux ma kav sook.png',
        Target: 'images/kav jux ma rus sook.png',
        Foil2: 'images/kav rus ma jux sook.png',
        Foil3: 'images/rus kav ma jux sook.png',
        correct_response: 'images/kav jux ma rus sook.png',
        audio: "audio/kav jux ma rus sook.mp3",
        syntax: "PO",
        Trial: '2',
        button: '1',
        html: ['<img style = "width:350px; visibility: hidden;" src = "%choice%" />',
        '<img style = "width:350px;" src = "%choice%" />',
        '<img style = "width:350px; visibility: hidden;" src = "%choice%" />',
        '<img style = "width:350px; visibility: hidden;" src = "%choice%" />']
....

And call that in the code of the actual experiment:

var PGG_Positive = {
      type: 'audio-button-response',
      stimulus: jsPsych.timelineVariable('audio'),
      choices: [jsPsych.timelineVariable('Target'),
              jsPsych.timelineVariable('Foil1'),
              jsPsych.timelineVariable('Foil2'),
              jsPsych.timelineVariable('Foil3')],
              button_html:'<img style = "width:350px;" src = "%choice%" />',
              margin_horizontal: "80px",
              margin_vertical: "50px",
              data: {
                  syntax: jsPsych.timelineVariable('syntax'),
                  correct_response: jsPsych.timelineVariable('correct_response'),
                  trial: jsPsych.timelineVariable('trial'),
                  button: jsPsych.timelineVariable('button')
                },
                on_finish: function(data){
                  if(data.button_pressed == data.button){
                    data.correct = true;
                  } else {
                    data.correct = false;
                  }
                }
              };

This all works fine. But, here is the issue. As you could see, for trial 2, the target will be the second picture rather than the first (pseudo-randomized). I tried to determine the position of the pictures in the .js file, but then realized that the pictures are presented in the way they are specified after 'choices'. In other words, as of now, the target picture is always the first picture – which is obviously not what I want. I'm wondering how I could work around this while still keeping a similar structure (i.e., having the external .js file with all the stimuli)?

[jodeleeuw]

One way to do this would be to turn the choices parameter into a function that can compute where the target should be placed.

choices: function(){
	// make an array with the foils
	var foils = [
		jsPsych.timelineVariable('Foil1', true),
		jsPsych.timelineVariable('Foil2', true),
		jsPsych.timelineVariable('Foil3', true)
	];
	// shuffle the order of the foils
	var foils_in_random_order = jsPsych.randomization.shuffle(foils);
	// add target in proper location
	foils_in_random_order.splice(jsPsych.timelineVariable('button', true), 0, jsPsych.timelineVariable('Target', true));
	// return back the full array
	return foils_in_random_order;
}

[FelicityF]

That works (note: function) – thank you so much!

[jodeleeuw]

Thanks for catching the typo! I've edited the answer.

[FelicityF]

@jodeleeuw I have one more follow-up question about this. In one of the feedback conditions (the no feedback condition) participants will always hear the auditory stimulus twice – regardless of their response. I thought I could just set the probability to 1.00 and return is always true. This all works. However, this time all foils stay on the screen as well. The problem now is that we randomize the foils using the code provided above, but if we run the feedback variable, the foils will be randomized again (so the display is not exactly the same). Is there a way to get the same randomization for 'choices' as the target trial (so target and feedback trial are exactly the same, but no response is needed for feedback trial)?

      var feedbacktrial_test = {
        type: 'audio-button-response',
        stimulus: jsPsych.timelineVariable('audio'),
        trial_ends_after_audio:true,
        response_ends_trial: false,
        choices: function(){
          var foils = [
            jsPsych.timelineVariable('Foil1', true),
            jsPsych.timelineVariable('Foil2', true),
            jsPsych.timelineVariable('Foil3', true)];
            var foils_in_random_order = jsPsych.randomization.shuffle(foils);
            foils_in_random_order.splice(jsPsych.timelineVariable('button', true), 0, jsPsych.timelineVariable('Target', true));
            return foils_in_random_order;
          },
          button_html:'<img style = "width:350px;" src = "%choice%" />',
          margin_horizontal: "80px",
          margin_vertical: "50px"
        };

        var feedback_test = { 
          timeline: [feedbacktrial_test],
          conditional_function: function() {
            var show_feedback = jsPsych.data.get().last(1).values()[0].correct;
            if(show_feedback){
              var random_number = Math.random();
              if(random_number < condition_feedback_probability){
                return  true;
              }
            }
            return true;
          }
        }

Thank you!

[jodeleeuw]

You could create a variable outside the target and feedbacktrial_test objects that stores the foils. In the target trial you would set the variable:

var foils = [
            jsPsych.timelineVariable('Foil1', true),
            jsPsych.timelineVariable('Foil2', true),
            jsPsych.timelineVariable('Foil3', true)
];
var foils_in_random_order = jsPsych.randomization.shuffle(foils);
foils_in_random_order.splice(jsPsych.timelineVariable('button', true), 0, jsPsych.timelineVariable('Target', true));
latest_order = foils_in_random_order;

In the feedback trials you would use this variable instead of re-randomizing:

choices: function(){
	return latest_order;
}

[FelicityF]

Thank you! It seems if I add return in front of latest_order = foils_in_random_order it works!

[FelicityF]

@jodeleeuw For my follow-up experiment some foils are similar in sentence structure, whereas for other foils the words rather than structure is similar to that of the target item. Because I randomize the positions, simply storing which button was pressed is not informative enough in that case. I'm wondering how to store which foil corresponds to the button pressed using the following code?

var Verb_Test = {
  type: 'audio-button-response',
  stimulus: jsPsych.timelineVariable('audio'),
  choices: function(){
    var foils = [
      jsPsych.timelineVariable('Foil1', true),
      jsPsych.timelineVariable('Foil2', true),
      jsPsych.timelineVariable('Foil3', true)];
    var foils_in_random_order = jsPsych.randomization.shuffle(foils);
    foils_in_random_order.splice(jsPsych.timelineVariable('button', true), 0, jsPsych.timelineVariable('Target', true));
    return foils_in_random_order;
  },
  button_html:'<img style = "width:350px;" src = "%choice%" />',
  margin_horizontal: "80px",
  margin_vertical: "50px",
  data: {
    syntax: jsPsych.timelineVariable('syntax'),
    button: jsPsych.timelineVariable('button')
  },
  on_finish: function(data){
    if(data.button_pressed == data.button){
      data.correct = true;
    } else {
      data.correct = false;
    }
  }
};

Thank you for your help!

[becky-gilbert]

Hi @FelicityF, I think you can create a global variable that tracks the latest order during the experiment, and then access this same variable in the on_finish function to determine which foil was selected.

// initialize a global variable to track the current order during the experiment
var latest_order;

var Verb_Test = {
  // etc.
  choices: function(){
    var foils = [
      jsPsych.timelineVariable('Foil1', true),
      jsPsych.timelineVariable('Foil2', true),
      jsPsych.timelineVariable('Foil3', true)
    ];
    var foils_in_random_order = jsPsych.randomization.shuffle(foils);
    foils_in_random_order.splice(jsPsych.timelineVariable('button', true), 0, jsPsych.timelineVariable('Target', true));
    // update the value of the latest_order global variable
    latest_order = foils_in_random_order;
    return foils_in_random_order;
  },
  // etc.
  on_finish: function(data){

    // create a property in the data to store the content of the button that was pressed,
    // and get the button's content by indexing the latest_order array with the button_pressed number
    data.button_pressed_content = latest_order[data.button_pressed);
    console.log('you selected: ', data.button_pressed_content); // check the console to see whether this worked

    // score response....
  }
};

Does that work for you?

[FelicityF]

Yes, that worked! Thank you so much for your input.