How to filter output data in the proper format to be able to create variables that I need in the next part of the task?

[Sivileo]

Hi everyone,

I´m working on a new experiment where on its first part,
participants rate a set of images (0-100).

For the second part of the experiment, I want to select a subset of images
depending on these ratings. Specifically, I would like to create an array
that contains image objects to use as stimuli in a task context,
e.g, low-score images vs. high-score images.

I expect to find a way to obtain an array with the selected subset of images
(somehow using the output data) and my first attempt has been using jspsych.data.get().filter().filtercostum(),
but using this approach I instead obtain an object that I don´t know how to manage.

Is there a way to obtain the filtered collection of images as I was expecting,
or should use a different approach?.

Also, I am wondering, how could I display the filtered output data?
(It would help me to check the "var" information that I am creating to see if it´s what I am expecting)

Thank you very much for your help in advance,
Silvia

[becky-gilbert]

Hi @Sivileo, this is a little hard to explain without some example code to work with, so feel free to post a minimal example if you have one.

I think you're on the right track with the approach you suggested. My general approach would be to:

1. Filter the jsPsych data after the first part and before the second part, based on some unique properties in the data that select for the ratings trials. Usually the easiest way to do this is to put a flag in the data for the trial so that you can filter based on that, e.g.

var rating_trial = {
  // other trial parameters...
  data: {task_part: 'rating'}
};

// then, after part 1, you can filter the data to get all of the image ratings:
var ratings_trials = jsPsych.data.get().filter({task_part: 'rating'});

2. Once you have all of the image ratings, categorize them as high or low. (There are lots of ways to do this, so it would be helpful to know more about how you want to handle this. For instance, you could use pre-defined cut-off values, but that only works if you know that people are using the whole scale, or if you don't mind if they don't have any trials that fall in your high and/or low categories. Another option is to order the ratings from lowest to highest, and take the first X values for the low category and last X trials for the high category. In this case you might want to also include a check to see if the high and low values are actually different. For instance, if someone rates all of the images with 0 or 100, then the high and low categories would have the same ratings.)
   Anyway, here's one way to do this:

// filter the ratings trials again to see if the response meets the criteria
// for the low/high category
var high_rated_images = ratings_trials.filterCustom(function(trial) {
  return trial.response > 75;
});
var low_rated_images = ratings_trials.filterCustom(function(trial) {
  return trial.response < 25;
});
// note that you can also do this in a single step, by chaining togther the filter and filterCustom functions
// as you suggested in your post:
// var high_rated_images = jspsych.data.get().filter({task_part: 'rating'}).filterCustom(function(trial) {
//   return trial.response > 75;
// });
// var low_rated_images = jspsych.data.get().filter({task_part: 'rating'}).filterCustom(function(trial) {
//   return trial.response < 25;
// });

// check that the low and high arrays contain all of the images that meet your criteria
console.log('high rated images: ', high_rated_images); 
console.log('low rated images: ', low_rated_images);

3. For your second part, you can run a set of trials for each of the images in the low_rated_images and high_rated_images arrays. To do this, I would use a combination of conditional timelines and looping timelines. The looping timeline is needed to loop over the images in the two arrays. The conditional timeline is needed to check if either of the image arrays is empty - if so, then skip the looping timeline (because there's nothing to loop over), otherwise run the looping timeline. Here's what it might look like:

// create a global variable to store the current image stimulus
// the value of this variable will be changed in the looping function
var current_image;
// create a global variable to track the index of the current image in the low/high arrays
var count = 0;

var repeat_image_trial = {
  stimulus: function() {
    // use a dynamic parameter to get the current value of the current_image variable
    return current_image;
  },
  // other parameters for the trial that presents the low/high-rated images...
};

var low_rated_images_loop = {
  timeline: [repeat_image_trial],
  looping_function: function() {
    count++; 
    if (count < low_rated_images.length) { 
      // after increasing the trial count, if there are still images in the array, then set current_image
      current_image = low_rated_images[count];
      return true;
    } else {
      // if the trial count has exceeded the number of images in the array, then we're done looping
      return false;
    }
  }
};

var low_rated_images_conditional = {
  timeline: [low_rated_images_loop]
  conditional_function: function() {
    if (low_rated_images.length > 0) {
      // if there are any images in the low_rated_images array, then run the low_rated_images_loop procedure
      return true;
    } else {
      // otherwise skip the low_rated_images_loop procedure
      return false;
    }
  }
};
// add the conditional timeline to your main experiment timeline
timeline.push(low_rated_images_conditional);

Also, I am wondering, how could I display the filtered output data?
(It would help me to check the "var" information that I am creating to see if it´s what I am expecting)

Yes, you can include the function console.log() to print out text and/or the current value of any of your variables. To view the JavaScript console, open the browser's developer tools (usually F12, or Ctrl+Shift+i, or menu -> More tools -> Developer tools). This is a great way to debug problems!

[becky-gilbert]

Hi @Sivileo, no problem at all. Most researchers have no experience with web programming, and everyone makes mistakes while learning. We'll try to help if we can, just let us know!

[moramaldonado]

Hi @becky-gilbert,
I was looking for a solution to a similar problem and I found your answer to this threat super helpful. There is only one part of it which doesn't work for me, and my guess is that I am not creating the array in the right moment during the experiment. I don't know how to solve it, so I thought maybe you have an idea.

In my case, I am doing a recursive sorting task. I am recovering the last 4 trials from the first part of the experiment and using the images sorted in piles in those 4 trials as input for the new sorting. The experiment fails when I dynamically call the stimuli (but the console.log correctly shows me the array every time I call it).

Thank you very much in advance!

Here is the code:

This is the moment where I create the array I will use later on.

var pile; var count = 0; var piles = [];

var part1 = { timeline: [{...}], on_timeline_finish: function() { var data_part2= jsPsych.data.get().last(4).values() for(let i=0; i< data_part2.length; i++) { if (data_part2[i].pile1.length > 1) { piles.push(data_part2[i].pile1) } if (data_part2[i].data_part2.length > 1) { piles.push(data_part2[i].pile2) } } return piles } }

This is the loop function:

var sort_loop = { timeline: [{ stimuli: function() { return pile }}], loop_function: function() { console.log(piles); count++; if (count < piles.length) { pile = piles[count]; console.log(pile) return true; } else { return false; } } };

This is the conditional:

var sort_conditional = { timeline: [sort_loop], conditional_function: function() { console.log(piles) if (piles.length > 0) { return true; } else { return false; } } };

[becky-gilbert]

Hi @moramaldonado, I think the problem might be with using the pile variable as the stimulus in the sort_loop timeline. It looks like this variable is defined in the loop function, but looping timelines execute before the loop function is called. So I'm wondering if the pile variable isn't defined when the loop timeline runs for the first time. One way to check is to add console.log(pile) to your stimulus function, before the return statement.

If that is the problem then you just need to initialize the pile variable with pile = piles[count] sometime after piles is created but before the experiment reaches the looping timeline, for instance in the on_timeline_finish function or in the conditional function for sort_conditional. Does that work?

[moramaldonado]

Hi Becky,
Just to signal that I have done as you suggested: I define the variable pile inside the conditional function and it works perfectly.

Thanks a lot!

[becky-gilbert]

Great, thanks for letting us know!