I am trying to display two buttons using the jsPsych html-button-response plugin (https://www.jspsych.org/plugins/jspsych-html-button-response/). I am using images as buttons instead of text. I specified them in my "choices:" option as choices: ["<img src='" + ButtonLeft+ "'>", "<img src='" + ButtonRight+ "'>"],.
By default, the buttons show up centered and below my stimulus. Instead, I would like to display them ON TOP of my stimulus (which is in turn composed of a bunch of overlapping images - a background + some items), one on the LEFT and the other one on the RIGHT, in specific positions relative to my background. The default style for the buttons is:
.jspsych-btn {
display: inline-block;
padding: 6px 12px;
margin: 0px;
font-size: 14px;
font-weight: 400;
font-family: 'Open Sans', 'Arial', sans-serif;
cursor: pointer;
line-height: 1.4;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
How can I display the buttons in the way that I am trying to?
Changing the button_html parameter did it!
button_html: ['<button class="jspsych-btn" style = "position:absolute; left:284.5px; top: 270px">%choice%</button>', '<button class="jspsych-btn" style = "position:absolute; right:284.5px; top: 270px">%choice%</button>']