Image position in image-keyboard-response plugin

[fspinar]

Hi all,

I want to be able to position my image on the screen at a desired location. The stimulus is also a function. How can I control its position and size on the screen?

stimulus: function(){
...
return "imagefile.png" // How to add position info ?
}

Thanks a lot.

[becky-gilbert]

Hi @fspinar, there's some info about how to do this on the jsPsych Controlling Visual Appearance docs page. You can add CSS rules to your file (by adding them inside <style> tags on your HTML page, or linking to an external CSS file). You can use the stimulus element's ID to create a CSS selector. In the image-keyboard-response plugin, the stimulus ID is "jspsych-image-keyboard-response-stimulus", so you could add this to your HTML file:

<style>#jspsych-image-keyboard-response-stimulus { <your CSS position rules here> }</style>

And if you're using jsPsych v6.3.0+, then you can use the css_classes parameter, which allows you to change the CSS on a trial-by-trial basis. There are some examples of this on the Controlling Visual Appearance docs page and in examples/css-classes-parameter.html.

[fspinar]

Thanks @becky-gilbert . I went through the page but couldn't get one point : I need to be able to change the properties in a trial by trial basis (especially the image location). Although I can define

<style>#jspsych-image-keyboard-response-stimulus { }</style>

I couldn't simply find how to do this :

stimulus: function(){
...
return "imagefile.png" // How to add position info ?
It needs to be changed in a trial by trial basis depending on inputs from other trials, etc.

}

Thank you very much.

[becky-gilbert]

Hi @fspinar, ah ok, this solution that I suggested:

<style>#jspsych-image-keyboard-response-stimulus { }</style>

will change the image positioning in all image-keyboard-response trials, so that won't work for you.

It's not possible to change the image's position via the image-keyboard-response stimulus parameter because that parameter just accepts the file name. Instead, you could try switching to the html-keyboard-response plugin, because then you can present the image along with some custom inline style that will change the image's position. Keep in mind that you'll have to manually preload the images with this method because the files are embedded in HTML:

var preload = {
  type: 'preload',
  images: ['jspsych-6.3.0/examples/img/happy_face_1.jpg']
};

var trial = {
  type: 'html-keyboard-response',
  stimulus: function(){
    // here you can use functions and create/assign variables to get the image file name for this trial,
    // as well as any values you need for the image's position, 
    // and then return one HTML string that presents the image element with inline style rules
    var img = 'jspsych-6.3.0/examples/img/happy_face_1.jpg'; 
    var top = '10px;';
    var left = '20px;';
    var html_str = '<img src="'+img+'" style="position:absolute;top:'+top+'left:'+left+'">';
    return html_str;
  }
  // other parameters...
}

Does this solution work for you?

[fspinar]

Hi again @becky-gilbert . Thanks a lot for your response. It works totally fine now.