Customizing HTML for v8 "button_html" parameter

[steventmartinez]

Hi,

I recently upgraded to jsPsych v8 and I'm having trouble understanding how can I customize the HTML for each button using the updated button_html parameter.

For example, if I wanted to make the two buttons different sizes, how can I adjust the button_html parameter to accomplish that? This is my attempt below, but it seems that both buttons are inheriting the second HTML formatting code, such that both buttons inherit the "width:5 vw; height: 4vh" attributes.

var block_1_trial = {
type: jsPsychHtmlButtonResponse,
stimulus: () => {
  return `<img src="${jsPsych.evaluateTimelineVariable('place_stimuli')}" <div style= "position:fixed; width: 25vw; height: 35vh; top: 6vh;"></img>`
},
choices: ["A", "B"],
button_html: (choice) => {
  return `<button class="jspsych-btn" style="width: 15vw; height: 8vh;">${choice}</button>`, `<button class="jspsych-btn" style="width: 5vw; height: 4vh;">${choice}</button>`
  }
}

Thank you so much in advance for any insights on this!