Multiple choice clickable image

[Yiu Chung Wong]

Hi, 

I would like to present multiple images on screen and let people click directly on a image instead of a button (either via a mouse or a touch screen) . jsPsych offers a jspsych-image-keyboard-response plugin; is there a way to modify it to accept mouse clicks (or touch input)?

Thank you 

[Josh de Leeuw]

Hi

You can use the button response plugins to do this. Just change the button_html parameter to be an img element, and stick your image file paths in the choices parameter.

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/aa3207ed-d617-4265-9927-b0a3918f5bcc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Yiu Chung Wong]

Josh,

Thank you. I'm editing the jspsych-html-button-response plugin, I assume this is the plug you are referring to?

Leaving the default as is (top) creates a normal button with choice as label; so passing the path of the images to the choices parameter only create a button with the path to the image as label written inside the button.

Changing the default to the following seems to do the trick. Although I'm not sure if this is the correct way of doing this.

button_html: {

        type: jsPsych.plugins.parameterType.IMAGE,

        pretty_name: 'Button HTML',

        //default: '<button class="jspsych-btn">%choice%</button>',

        //default: '<img src=%choice%></img>',

        array: true,

        description: 'The html of the button. Can create own style.'

      },

Currently, for each trial I am passing two images into choices:

choices: ["img/blue.png", "img/orange.png"],,

Is there a way I can customise the location and the size of the images? It's likely that I will add a few more image buttons.

Another thing, is there a way to edit a particular data value at the end / after each trial? Currently, my data looks something like this.

[
	{
		"rt": 904.0000000000001,
		"stimulus": "Welcome to the experiment.",
		"button_pressed": "0",
		"test_part": "Welcome",
		"trial_type": "html-button-response",
		"trial_index": 0,
		"time_elapsed": 906,
		"internal_node_id": "0.0-0.0"
	},
	{
		"rt": 238106,
		"stimulus": "Pick a circle.",
		"button_pressed": "0",
		"trial_type": "html-button-response",
		"trial_index": 1,
		"time_elapsed": 239029,
		"internal_node_id": "0.0-1.0-0.0"
	},
	{
		"rt": null,
		"stimulus": "You chose blue!",
		"key_press": null,
		"test_part": "feedback",
		"trial_type": "html-keyboard-response",
		"trial_index": 2,
		"time_elapsed": 240031,
		"internal_node_id": "0.0-1.0-1.0"
	}
]

For each trial, I'd like to edit the value of 'button_pressed', and turn it into a string so I can have it saved as a string instead of an index: 

• 0 maps to img/blue.png; 
• 1 maps to img/orange.png
  

Thank you very much

Yiu Chung

[Josh de Leeuw]

You could change the default in the plugin, but you shouldn't need to do that. You can just override the parameter when you declare the trial itself. For example:

trial = {

  // ... other parameters ...

  button_html: '<img src=%choice%></img>'

}

 You can change size by changing the image file itself, or by modifying the HTML that you pass to button_html to include CSS rules that set the height/width. 

There's not a simple way to control positioning. The image tag will get wrapped with another tag that contains a unique ID for each button. If you open up the inspector/debugger tools you can see the HTML markup. You could add CSS rules to your document to position those buttons however you'd like. But this is a good reminder that we could probably do a better job with the parameters for this plugin to make this kind of customization easier.

As for the data, you could add a custom function in the on_finish event for the trial to modify the data. See: https://www.jspsych.org/overview/trial/#the-on_finish-event. Something like:

on_finish: function(data){

  if(data.button_pressed == "0") { data.button_pressed = "img/blue.png"; }

}

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/6d708b06-6d68-443c-b609-1e4f88483e99%40googlegroups.com.

[says...@gmail.com]

Hi everyone,

I know that I'm reviving a very old thread here, but I was just running into the same issue with customizing the positions of the buttons in html-button-response. (e.g., fixing the blue and orange circle images here so that they always appear in a single row, no matter if the window is made smaller)... was wondering if anyone has found a solution to this? 

Cheers,

Amy

[beckyann...@gmail.com]

Hi Amy,

I think you can do this with the following CSS rules:

#jspsych-html-button-response-btngroup {overflow:hidden; white-space:nowrap;}

.jspsych-content-wrapper {overflow: auto; width: unset;}

BTW, we've moved jsPsych support to Github Discussions: https://github.com/jspsych/jsPsych/discussions so in the future please post there, as it will help us consolidate questions and answers. And if your question is a follow-up to a thread here, feel free to link to it in your Github post. Thanks! :)

Becky