From f90c0ef95b09a0d87d663537f72eb9f46129641b Mon Sep 17 00:00:00 2001 From: bjoluc Date: Tue, 5 Sep 2023 19:28:44 +0200 Subject: [PATCH] Add changeset for button response plugins --- .changeset/button-response-plugins.md | 31 +++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 .changeset/button-response-plugins.md diff --git a/.changeset/button-response-plugins.md b/.changeset/button-response-plugins.md new file mode 100644 index 0000000000..4588392f34 --- /dev/null +++ b/.changeset/button-response-plugins.md @@ -0,0 +1,31 @@ +--- +"@jspsych/plugin-audio-button-response": major +"@jspsych/plugin-canvas-button-response": major +"@jspsych/plugin-html-button-response": major +"@jspsych/plugin-image-button-response": major +"@jspsych/plugin-video-button-response": major +--- + +- 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 ``, you can now pass the function + ```js + function (choice) { + return '"; + } + ``` + Similarly, if you were using the array syntax, like + ```js + ['', '', ''] + ``` + an easy way to migrate your trial definition is to pass a function which accesses your array and replaces the `%choice%` placeholder: + ```js + function (choice, choice_index) { + return ['', '', ''][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 + ```js + function (choice, choice_index) { + return '"; + } + ``` +- Simplify the button DOM structure and styling: Buttons are no longer wrapped in individual container `div`s 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.