jspsych/jsPsych @jspsych/plugin-html-button-response@2.0.0 on GitHub

Major Changes

#3152 2852cda6 Thanks @jodeleeuw! - Button plugins now support either display: grid or display: flex on the container element that hold the buttons. If the layout is grid, the number of rows and/or columns can be specified. The margin_horizontal and margin_vertical parameters have been removed from the button plugins. If you need control over the button CSS, you can add inline style to the button element using the button_html parameter.
jspsych.css has new layout classes to support this feature.
#2858 f90c0ef9 Thanks @bjoluc! - - Make button_html a function parameter which, given a choice's text and its index, returns the HTML string of the choice's button. If you were previously passing a string to button_html, like <button>%choice%</button>, you can now pass the function
```
function (choice) {
  return '<button class="jspsych-btn">' + choice + "</button>";
}
```
Similarly, if you were using the array syntax, like
```
['<button class="a">%choice%</button>', '<button class="b">%choice%</button>', '<button class="a">%choice%</button>']
```
an easy way to migrate your trial definition is to pass a function which accesses your array and replaces the %choice% placeholder:
```
function (choice, choice_index) {
  return ['<button class="a">%choice%</button>', '<button class="b">%choice%</button>', '<button class="a">%choice%</button>'][choice_index].replace("%choice%", choice);
}
```
From there on, you can further simplify your function. For instance, if the intention of the above example is to have alternating button classes, the button_html function might be rewritten as
```
function (choice, choice_index) {
  return '<button class="' + (choice_index % 2 === 0 ? "a" : "b") + '">' + choice + "</button>";
}
```
- Simplify the button DOM structure and styling: Buttons are no longer wrapped in individual container divs for spacing and data-choice attributes. Instead, each button is assigned its data-choice attribute and all buttons are direct children of the button group container div. The container div, in turn, utilizes a flexbox layout to position the buttons.
#3339 74b4adc7 Thanks @jodeleeuw! - finishTrial() now clears the display and any timeouts set with pluginApi.setTimeout()

Minor Changes

#3326 c5a0dbb1 Thanks @vzhang03! - Updated all plugins to implement new pluginInfo standard that contains version, data generated and new documentation style to match migration of docs to be integrated with the code and packages themselves"