Changing the location of image in image-button-response

[wsr017]

Hello all!

I have a quick question that I should probably be able to figure out on my own, but I'm relatively new to jsPsych. I would like to use an image-button-response and be able to set where the image is located, instead of having it default to the middle of the screen.

Is there a way to do this by modifying the image-button-response plugin to include, maybe, an "image_center_x" and "image_center_y" parameter?

Thanks so much!

[jodeleeuw]

Hi @wsr017,

You'll need to use CSS rules to control the position of the image. You could modify the plugin to add the parameters and then in the plugin file itself add the necessary CSS.

Another option is to use the html-button-response plugin, which gives you more control over how the image is rendered on the screen. This would allow you to add the CSS directly to the stimulus parameter:

var trial = {
	type: 'html-button-response',
	stimulus: '<img src="my-img.png" style="position: fixed; top: 10%; left: 30%;"></img>',
	...
}

[becky-gilbert]

Hi @wsr017, in addition to Josh's suggestions, another option is to use one of the canvas-* plugins to draw the image. The canvas element will be centered on the screen, and you can define the canvas height and width and then use x/y coordinates to set the image position on the canvas. Keep in mind that you'll want to manually preload your image(s) if you decide to use either a canvas-* or html-* plugin.