Background for jspsych-free-sort

[giuconte]

Hi everyone,

Is there a way to easily add a background image for the sort_area in the jspsych-free-sort?

Thanks

Giulio.

[becky-gilbert]

Hi Giulio, yes, you can do this by setting the background-image CSS property for the sort area element. I suggest using both the ID and class in the CSS selector (to avoid potential problems with your CSS rule being overwritten due to conflicting rules with greater precedence, see the jsPsych CSS docs page for more info). Both the ID and class for the sort area are called "jspsych-free-sort-arena", so your CSS rule would look like this:

<style>
  #jspsych-free-sort-arena.jspsych-free-sort-arena {background-image: url('img/1.gif');}
</style>

This is a general CSS rule that will add the same background image ('img/1.gif') to all free-sort trials.

If you're using jsPsych version 6.3.0 or higher, you can create one or more CSS classes that change the background image, and then use the css_classes trial parameter to apply the class to that particular trial. This approach might be useful if you want different background images for different trials, and would look something like this:

<style>
  .img1 #jspsych-free-sort-arena.jspsych-free-sort-arena {background-image: url('img/1.gif');}
  .img2 #jspsych-free-sort-arena.jspsych-free-sort-arena {background-image: url('img/2.gif');}
</style>
<script>

var trial1 = {
  type: 'free-sort',
  css_classes: ['img1'],
  // other parameters...
};

var trial2 = {
  type: 'free-sort',
  css_classes: ['img2'],
  // other parameters...
};

// etc.

</script>

[giuconte]

Great, this is exactly what I was looking for.
Thank you very much
Giulio