Easy way to use images/icons instead of text for html-button-press?

[ArturoDeza]

Question is self-explanatory I'm wondering if there's a trivial way that allows me to use images instead of text as the inside of the buttons? (Perhaps I'm missing something and this is quite straightfoward to do in pure javascript?). In an ideal case I'd like to have a 2x10 grid for image icon on top and image label on bottom. Example of what I have working so far (with only text) for a labelling/classification task of CIFAR-10 images (Note that the code below is only rendering the user response not rendering the stimuli):

	var button_response = {
		type: "html-button-response",
		stimulus: '<p>Image Class</p>',
		choices: ['Airplane','Automobile','Bird','Cat','Deer','Dog','Frog','Horse','Ship','Truck'],
		trial_duration: 5000,
	};

Doing something like this doesn't seem to work:

	var button_response = {
		type: "html-button-response",
		stimulus: '<p>Image Class</p>',
		choices: ['Airplane.png','Automobile.png','Bird.png','Cat.png','Deer.png','Dog.png','Frog.png','Horse.png','Ship.png','Truck.png'],
		trial_duration: 5000,
	};

[jodeleeuw]

You can customize the html template used to render the button with the button_html parameter:
https://www.jspsych.org/plugins/jspsych-html-button-response/

Related question from Google Group:
https://groups.google.com/d/topic/jspsych/-rZQOC-LsVs/discussion

[jenniekim00]

[vijaymarupudi]

I went ahead and fixed the format, @jenniekim00.

To add code in Github Flavored Markdown, use

```javascript
var code = true
```

to make it look like

var code = true