returning a .js file to timeline_variables through a function

[abhilasha-kumar]

Hi, I am trying to program an experiment where a participant sees an image (a board of words) and some words related to that image and makes some type of rating on it (image below).

Each participant sees 20 different images, and each image has 12 different ratings that can be made. I want to randomize the order of the 20 images for each participant, as well as the order of the 12 ratings within each image, without having to declare a separate variable for each image. Critically, ratings for the same image should all happen together but the order of the images themselves should be randomized.

I am trying to write code that will allow me to use the same javascript variable but change the image and the words based on a .json file which contains the path to that image and the specific words to be displayed. However, I am running into a couple issues:

1. jsPsych.randomization.sampleWithoutReplacement is not returning a randomly ordered array - I get NaN as the returned value. I want to use shuffledBoard but am currently using myArray directly.
2. The function get_stimuli_list() is not being called at all inside timeline_variables, when ideally it should call that function and return a javascript variable (e.g., stimuli_1_1) which in turn is stored in a .js file which contains the json data.

I made sure that I loaded the .js files at the top of the code, and also if I directly pass stimuli_1_1 into timeline_variables, it works, but the function doesn't seem to work. I get the following error:

Here is a snippet of my code, any input would be appreciated!

var board = {
        type: jsPsychImageSliderResponse,
        stimulus: jsPsych.timelineVariable('boardname'),
        stimulus_height: 400,
        stimulus_width: 700,
        prompt: jsPsych.timelineVariable('p1_final'),
        prompt_above_slider: jsPsych.timelineVariable('p2_final'),
        labels: ['1 (not likely at all)', '2', '3', '4', '5 (highly likely)'],
        min: 1,
        max : 5,
        slider_start: 3,
        data: jsPsych.timelineVariable('data')
    };

// get a random order of boards for this subject

    var myArray = [11,12, 13]; // this array is actually of length 20, using only 3 items for now
    var shuffledBoard = jsPsych.randomization.sampleWithoutReplacement(myArray, 3);
    console.log('order of boards is:', +shuffledBoard) // not working, returning NaN

    // run a loop for this random order of boards
    // purpose of loop is to get different stimuli depending on which board it is
    // i want to use a function that returns a specific variable corresponding to a .js file of stimuli here
    // and randomize the order of items within that board

    for( var i = 0; i < myArray.length; i++){
      console.log('value of i='+i);
      console.log('value of number='+myArray[i]);
      var board_proc = {
      timeline: [board],
      timeline_variables:  function(){
        return get_stimuli_list(myArray[i])
      },
      randomize_order: true
    }

    timeline.push(board_proc)
    console.log('value of timeline='+timeline);

    }


    function get_stimuli_list(number){
      console.log('get_stimuli_list has been called')
      // takes in an integer from 1 through 20 and returns the correct stimuli file path
      if (number == 11){
        console.log('value of number='+number);
        return stimuli_1_1

      }
      else {
        console.log('value of number='+number);
        return stimuli_1_2
        
      }
    }

For more clarity, here is the structure of the stimuli_1_1.js file:

var stimuli_1_1 = [
  {
    "wordpair": "exam - algebra",
    "accuracy": "good",
    "popularity": "high",
    "value": "math",
    "trial_type": "game",
    "word1": "EXAM",
    "word2": "ALGEBRA",
    "Board": 1,
    "Experiment": 1,
    "boardnumber": 1.1,
    "path": "boardimages/",
    "boardname": "boardimages/1.1.png",
    "p1.1": "<p>The targets are",
    "p1.2": "and",
    "p1.3": "</p>",
    "p1_final": "<p>The targets are EXAM and ALGEBRA</p>",
    "p2.1": "<p>Rate how likely you are to choose the clue",
    "p2.2": "for the targets based on the board below </p>",
    "p2_final": "<p>Rate how likely you are to choose the clue MATH for the targets based on the board below </p>"
  }]

[jodeleeuw]

Hi @abhilasha-kumar !

Currently timeline_variables doesn't support using a function. It's something we'd like to add in the future.

Does get_stimuli_list() change its value throughout the experiment? If the return value of this function is the same throughout the experiment, then I think you can omit the wrapper function like this:

 for( var i = 0; i < myArray.length; i++){
      	console.log('value of i='+i);
      	console.log('value of number='+myArray[i]);
      	var board_proc = {
      		timeline: [board],
      		timeline_variables:  get_stimuli_list(myArray[i]),
      		randomize_order: true
    	}
}

The only difference is that now get_stimuli_list will run at the start of the experiment for all of your board_proc trials, rather than trying to run right before each trial.

[abhilasha-kumar]

thanks so much @jodeleeuw! this seems to work 💯 but just so I understand the difference between the two approaches, when you mean whether the return value of the function is the "same" throughout the experiment, does that mean that it is not dependent on the responses given during the experiment?

Also -- any ideas why var shuffledBoard = jsPsych.randomization.sampleWithoutReplacement(myArray, 2); is returning NaN and not a shuffled array of numbers which I can pass to get_stimuli_list?

[abhilasha-kumar]

update: figured out the bug in the randomization -- just a silly comma missing! thanks for the quick turnaround :)

[jodeleeuw]

when you mean whether the return value of the function is the "same" throughout the experiment, does that mean that it is not dependent on the responses given during the experiment?

Yes, exactly. The only time that you'll probably need to use a function as a parameter value is if you need the value of that parameter to change in response to something that happens during the experiment. Otherwise you can just initialize the parameter value during the setup phase at the start.