HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 11:10:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #3152 from jspsych/button-plugin-update

Browse Source 
Add `button_layout` parameter to support CSS grid
This commit is contained in:
Josh de Leeuw 2023-10-19 09:27:39 -04:00 committed by GitHub
commit bb3d82a548
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 266 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.changeset/button-layouts.md Normal file
View File

@ -0,0 +1,8 @@
---
"@jspsych/plugin-html-button-response": major
"jspsych": patch
---
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.

7
docs/plugins/audio-button-response.md
View File

@ -18,11 +18,12 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
| ------------------------------ | ---------------- | ---------------------------------------- | ---------------------------------------- |
| stimulus | audio file | *undefined* | Path to audio file to be played. |
| choices | array of strings | *undefined* | Labels for the buttons. Each different string in the array will generate a different button. |
| button_html | HTML string | `'<button class="jspsych-btn">%choice%</button>'` | A template of HTML for generating the button elements. You can override this to create customized buttons of various kinds. The string `%choice%` will be changed to the corresponding element of the `choices` array. You may also specify an array of strings, if you need different HTML to render for each button. If you do specify an array, the `choices` array and this array must have the same length. The HTML from position 0 in the `button_html` array will be used to create the button for element 0 in the `choices` array, and so on. |
| button_html | function | ``(choice: string, choice_index: number)=>`<button class="jspsych-btn">${choice}</button>``; | A function that generates the HTML for each button in the `choices` array. The function gets the string and index of the item in the `choices` array and should return valid HTML. If you want to use different markup for each button, you can do that by using a conditional on either parameter. The default parameter returns a button element with the text label of the choice. |
| prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press). |
| trial_duration | numeric | null | How long to wait for the participant to make a response before ending the trial in milliseconds. If the participant fails to make a response before this timer is reached, the participant's response will be recorded as null for the trial and the trial will end. If the value of this parameter is null, the trial will wait for a response indefinitely. |
| margin_vertical | string | '0px' | Vertical margin of the button(s). |
| margin_horizontal | string | '8px' | Horizontal margin of the button(s). |
| button_layout | string | 'grid' | Setting to `'grid'` will make the container element have the CSS property `display: grid` and enable the use of `grid_rows` and `grid_columns`. Setting to `'flex'` will make the container element have the CSS property `display: flex`. You can customize how the buttons are laid out by adding inline CSS in the `button_html` parameter. |
| grid_rows | number | 1 | The number of rows in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the number of rows will be determined automatically based on the number of buttons and the number of columns. |
| grid_columns | number | null | The number of columns in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the number of columns will be determined automatically based on the number of buttons and the number of rows. |
| response_ends_trial | boolean | true | If true, then the trial will end whenever the participant makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force the participant to listen to the stimulus for a fixed amount of time, even if they respond before the time is complete. |
| trial_ends_after_audio | boolean | false | If true, then the trial will end as soon as the audio file finishes playing. |
| response_allowed_while_playing | boolean | true | If true, then responses are allowed while the audio is playing. If false, then the audio must finish playing before the button choices are enabled and a response is accepted. Once the audio has played all the way through, the buttons are enabled and a response is allowed (including while the audio is being re-played via on-screen playback controls). |

7
docs/plugins/canvas-button-response.md
View File

@ -13,12 +13,13 @@ Parameter | Type | Default Value | Description
stimulus | function | *undefined* | The function to draw on the canvas. This function automatically takes a canvas element as its only argument, e.g. `function(c) {...}` or `function drawStim(c) {...}`, where `c` refers to the canvas element. Note that the stimulus function will still generally need to set the correct context itself, using a line like `let ctx = c.getContext("2d")`.
canvas_size | array | [500, 500] | Array that defines the size of the canvas element in pixels. First value is height, second value is width.
choices | array of strings | [] | Labels for the buttons. Each different string in the array will generate a different button.
button_html | HTML string | `'<button class="jspsych-btn">%choice%</button>'` | A template of HTML for generating the button elements. You can override this to create customized buttons of various kinds. The string `%choice%` will be changed to the corresponding element of the `choices` array. You may also specify an array of strings, if you need different HTML to render for each button. If you do specify an array, the `choices` array and this array must have the same length. The HTML from position 0 in the `button_html` array will be used to create the button for element 0 in the `choices` array, and so on.
button_html | function | ``(choice: string, choice_index: number)=>`<button class="jspsych-btn">${choice}</button>``; | A function that generates the HTML for each button in the `choices` array. The function gets the string and index of the item in the `choices` array and should return valid HTML. If you want to use different markup for each button, you can do that by using a conditional on either parameter. The default parameter returns a button element with the text label of the choice.
prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., what question to answer).
trial_duration | numeric | null | How long to wait for the participant to make a response before ending the trial in milliseconds. If the participant fails to make a response before this timer is reached, the participant's response will be recorded as null for the trial and the trial will end. If the value of this parameter is null, the trial will wait for a response indefinitely.
stimulus_duration | numeric | null | How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will remain visible until the trial ends.
margin_vertical | string | '0px' | Vertical margin of the button(s).
margin_horizontal | string | '8px' | Horizontal margin of the button(s).
button_layout | string | 'grid' | Setting to `'grid'` will make the container element have the CSS property `display: grid` and enable the use of `grid_rows` and `grid_columns`. Setting to `'flex'` will make the container element have the CSS property `display: flex`. You can customize how the buttons are laid out by adding inline CSS in the `button_html` parameter.
grid_rows | number | 1 | The number of rows in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the number of rows will be determined automatically based on the number of buttons and the number of columns.
grid_columns | number | null | The number of columns in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the number of columns will be determined automatically based on the number of buttons and the number of rows.
response_ends_trial | boolean | true | If true, then the trial will end whenever the participant makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for `trial_duration` is reached. You can use this parameter to force the participant to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
## Data Generated

7
docs/plugins/html-button-response.md
View File

@ -12,12 +12,13 @@ Parameter | Type | Default Value | Description
----------|------|---------------|------------
stimulus | HTML string | undefined | The HTML content to be displayed.
choices | array of strings | [] | Labels for the buttons. Each different string in the array will generate a different button.
button_html | HTML string | `'<button class="jspsych-btn">%choice%</button>'` | A template of HTML for generating the button elements. You can override this to create customized buttons of various kinds. The string `%choice%` will be changed to the corresponding element of the `choices` array. You may also specify an array of strings, if you need different HTML to render for each button. If you do specify an array, the `choices` array and this array must have the same length. The HTML from position 0 in the `button_html` array will be used to create the button for element 0 in the `choices` array, and so on.
button_html | function | ``(choice: string, choice_index: number)=>`<button class="jspsych-btn">${choice}</button>``; | A function that generates the HTML for each button in the `choices` array. The function gets the string and index of the item in the `choices` array and should return valid HTML. If you want to use different markup for each button, you can do that by using a conditional on either parameter. The default parameter returns a button element with the text label of the choice.
prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press).
trial_duration | numeric | null | How long to wait for the participant to make a response before ending the trial in milliseconds. If the participant fails to make a response before this timer is reached, the participant's response will be recorded as null for the trial and the trial will end. If the value of this parameter is null, the trial will wait for a response indefinitely.
stimulus_duration | numeric | null | How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will remain visible until the trial ends.
margin_vertical | string | '0px' | Vertical margin of the button(s).
margin_horizontal | string | '8px' | Horizontal margin of the button(s).
button_layout | string | 'grid' | Setting to `'grid'` will make the container element have the CSS property `display: grid` and enable the use of `grid_rows` and `grid_columns`. Setting to `'flex'` will make the container element have the CSS property `display: flex`. You can customize how the buttons are laid out by adding inline CSS in the `button_html` parameter.
grid_rows | number | 1 | The number of rows in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the number of rows will be determined automatically based on the number of buttons and the number of columns.
grid_columns | number | null | The number of columns in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the number of columns will be determined automatically based on the number of buttons and the number of rows.
response_ends_trial | boolean | true | If true, then the trial will end whenever the participant makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force the participant to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
## Data Generated

7
docs/plugins/image-button-response.md
View File

@ -17,12 +17,13 @@ stimulus_height | integer | null | Set the height of the image in pixels. If lef
stimulus_width | integer | null | Set the width of the image in pixels. If left null (no value specified), then the image will display at its natural width.
maintain_aspect_ratio | boolean | true | If setting *only* the width or *only* the height and this parameter is true, then the other dimension will be scaled to maintain the image's aspect ratio.
choices | array of strings | [] | Labels for the buttons. Each different string in the array will generate a different button.
button_html | HTML string | `'<button class="jspsych-btn">%choice%</button>'` | A template of HTML for generating the button elements. You can override this to create customized buttons of various kinds. The string `%choice%` will be changed to the corresponding element of the `choices` array. You may also specify an array of strings, if you need different HTML to render for each button. If you do specify an array, the `choices` array and this array must have the same length. The HTML from position 0 in the `button_html` array will be used to create the button for element 0 in the `choices` array, and so on.
button_html | function | ``(choice: string, choice_index: number)=>`<button class="jspsych-btn">${choice}</button>``; | A function that generates the HTML for each button in the `choices` array. The function gets the string and index of the item in the `choices` array and should return valid HTML. If you want to use different markup for each button, you can do that by using a conditional on either parameter. The default parameter returns a button element with the text label of the choice.
prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press).
stimulus_duration | numeric | null | How long to show the stimulus for in milliseconds. If the value is null, then the stimulus will be shown until the participant makes a response.
trial_duration | numeric | null | How long to wait for the participant to make a response before ending the trial in milliseconds. If the participant fails to make a response before this timer is reached, the participant's response will be recorded as null for the trial and the trial will end. If the value of this parameter is null, the trial will wait for a response indefinitely.
margin_vertical | string | '0px' | Vertical margin of the button(s).
margin_horizontal | string | '8px' | Horizontal margin of the button(s).
button_layout | string | 'grid' | Setting to `'grid'` will make the container element have the CSS property `display: grid` and enable the use of `grid_rows` and `grid_columns`. Setting to `'flex'` will make the container element have the CSS property `display: flex`. You can customize how the buttons are laid out by adding inline CSS in the `button_html` parameter.
grid_rows | number | 1 | The number of rows in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the number of rows will be determined automatically based on the number of buttons and the number of columns.
grid_columns | number | null | The number of columns in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the number of columns will be determined automatically based on the number of buttons and the number of rows.
response_ends_trial | boolean | true | If true, then the trial will end whenever the participant makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force the participant to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
render_on_canvas | boolean | true | If true, the image will be drawn onto a canvas element. This prevents a blank screen (white flash) between consecutive image trials in some browsers, like Firefox and Edge. If false, the image will be shown via an img element, as in previous versions of jsPsych. If the stimulus is an **animated gif**, you must set this parameter to false, because the canvas rendering method will only present static images.

7
docs/plugins/video-button-response.md
View File

@ -14,9 +14,10 @@ Parameter | Type | Default Value | Description
----------|------|---------------|------------
stimulus | array | *undefined* | An array of file paths to the video. You can specify multiple formats of the same video (e.g., .mp4, .ogg, .webm) to maximize the [cross-browser compatibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats). Usually .mp4 is a safe cross-browser option. The plugin does not reliably support .mov files. The player will use the first source file in the array that is compatible with the browser, so specify the files in order of preference.
choices | array of strings | *undefined* | Labels for the buttons. Each different string in the array will generate a different button.
button_html | HTML string | `'<button class="jspsych-btn">%choice%</button>'` | A template of HTML for generating the button elements. You can override this to create customized buttons of various kinds. The string `%choice%` will be changed to the corresponding element of the `choices` array. You may also specify an array of strings, if you need different HTML to render for each button. If you do specify an array, the `choices` array and this array must have the same length. The HTML from position 0 in the `button_html` array will be used to create the button for element 0 in the `choices` array, and so on.
margin_vertical | string | '0px' | Vertical margin of the button(s).
margin_horizontal | string | '8px' | Horizontal margin of the button(s).
button_html | function | ``(choice: string, choice_index: number)=>`<button class="jspsych-btn">${choice}</button>``; | A function that generates the HTML for each button in the `choices` array. The function gets the string and index of the item in the `choices` array and should return valid HTML. If you want to use different markup for each button, you can do that by using a conditional on either parameter. The default parameter returns a button element with the text label of the choice.
button_layout | string | 'grid' | Setting to `'grid'` will make the container element have the CSS property `display: grid` and enable the use of `grid_rows` and `grid_columns`. Setting to `'flex'` will make the container element have the CSS property `display: flex`. You can customize how the buttons are laid out by adding inline CSS in the `button_html` parameter.
grid_rows | number | 1 | The number of rows in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the number of rows will be determined automatically based on the number of buttons and the number of columns.
grid_columns | number | null | The number of columns in the button grid. Only applicable when `button_layout` is set to `'grid'`. If null, the number of columns will be determined automatically based on the number of buttons and the number of rows.
prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press).
width | numeric | width of the video file | The width of the video display in pixels.
height | numeric | heigh of the video file | The height of the video display in pixels.

20
examples/jspsych-html-button-response.html
View File

@ -20,7 +20,25 @@
type: jsPsychHtmlButtonResponse,
stimulus: '<p style="color: red; font-size: 48px; font-weight: bold;">GREEN</p>',
choices: ['Green', 'Blue', 'Red'],
prompt: "<p>What color is this word?</p>"
button_layout: "flex",
prompt: "<p>What color is this word? (flex layout)</p>"
});
timeline.push({
type: jsPsychHtmlButtonResponse,
stimulus: '<p style="color: red; font-size: 48px; font-weight: bold;">GREEN</p>',
choices: ['Green', 'Blue', 'Red'],
button_layout: "grid",
prompt: "<p>What color is this word? (grid layout)</p>"
});
timeline.push({
type: jsPsychHtmlButtonResponse,
stimulus: '<p style="color: red; font-size: 48px; font-weight: bold;">GREEN</p>',
choices: ['Green', 'Blue', 'Red'],
button_layout: "grid",
grid_rows: 2,
prompt: "<p>What color is this word? (grid layout, two rows)</p>"
});
timeline.push({

19
packages/jspsych/src/index.scss
View File

@ -58,11 +58,26 @@
font-size: 14px;
}
/* Buttons and Button Groups */
.jspsych-btn-group-flex {
display: flex;
justify-content: center;
}
.jspsych-btn-group-grid {
display: grid;
grid-auto-columns: max-content;
max-width: fit-content;
margin-right: auto;
margin-left: auto;
}
/* borrowing Bootstrap style for btn elements, but combining styles a bit */
.jspsych-btn {
display: inline-block;
padding: 6px 12px;
margin: 0px;
padding: 8px 12px;
margin: 0.75em;
font-size: 14px;
font-weight: 400;
font-family: "Open Sans", "Arial", sans-serif;

55
packages/plugin-audio-button-response/src/index.ts
View File

@ -39,17 +39,28 @@ const info = <const>{
pretty_name: "Trial duration",
default: null,
},
/** Vertical margin of button. */
margin_vertical: {
/** The CSS layout for the buttons. Options: 'flex' or 'grid'. */
button_layout: {
type: ParameterType.STRING,
pretty_name: "Margin vertical",
default: "0px",
pretty_name: "Button layout",
default: "grid",
},
/** Horizontal margin of button. */
margin_horizontal: {
type: ParameterType.STRING,
pretty_name: "Margin horizontal",
default: "8px",
/** The number of grid rows when `button_layout` is "grid".
* Setting to `null` will infer the number of rows based on the
* number of columns and buttons.
*/
grid_rows: {
type: ParameterType.INT,
pretty_name: "Grid rows",
default: 1,
},
/** The number of grid columns when `button_layout` is "grid".
* Setting to `null` (default value) will infer the number of columns
* based on the number of rows and buttons. */
grid_columns: {
type: ParameterType.INT,
pretty_name: "Grid columns",
default: null,
},
/** If true, the trial will end when user makes a response. */
response_ends_trial: {
@ -144,12 +155,26 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
// Display buttons
const buttonGroupElement = document.createElement("div");
buttonGroupElement.id = "jspsych-audio-button-response-btngroup";
buttonGroupElement.style.cssText = `
display: flex;
justify-content: center;
gap: ${trial.margin_vertical} ${trial.margin_horizontal};
padding: ${trial.margin_vertical} ${trial.margin_horizontal};
`;
if (trial.button_layout === "grid") {
buttonGroupElement.classList.add("jspsych-btn-group-grid");
if (trial.grid_rows === null && trial.grid_columns === null) {
throw new Error(
"You cannot set `grid_rows` to `null` without providing a value for `grid_columns`."
);
}
const n_cols =
trial.grid_columns === null
? Math.ceil(trial.choices.length / trial.grid_rows)
: trial.grid_columns;
const n_rows =
trial.grid_rows === null
? Math.ceil(trial.choices.length / trial.grid_columns)
: trial.grid_rows;
buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;
buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;
} else if (trial.button_layout === "flex") {
buttonGroupElement.classList.add("jspsych-btn-group-flex");
}
for (const [choiceIndex, choice] of trial.choices.entries()) {
buttonGroupElement.insertAdjacentHTML("beforeend", trial.button_html(choice, choiceIndex));

55
packages/plugin-canvas-button-response/src/index.ts
View File

@ -45,17 +45,28 @@ const info = <const>{
pretty_name: "Trial duration",
default: null,
},
/** The vertical margin of the button. */
margin_vertical: {
/** The CSS layout for the buttons. Options: 'flex' or 'grid'. */
button_layout: {
type: ParameterType.STRING,
pretty_name: "Margin vertical",
default: "0px",
pretty_name: "Button layout",
default: "grid",
},
/** The horizontal margin of the button. */
margin_horizontal: {
type: ParameterType.STRING,
pretty_name: "Margin horizontal",
default: "8px",
/** The number of grid rows when `button_layout` is "grid".
* Setting to `null` will infer the number of rows based on the
* number of columns and buttons.
*/
grid_rows: {
type: ParameterType.INT,
pretty_name: "Grid rows",
default: 1,
},
/** The number of grid columns when `button_layout` is "grid".
* Setting to `null` (default value) will infer the number of columns
* based on the number of rows and buttons. */
grid_columns: {
type: ParameterType.INT,
pretty_name: "Grid columns",
default: null,
},
/** If true, then trial will end when user responds. */
response_ends_trial: {
@ -104,12 +115,26 @@ class CanvasButtonResponsePlugin implements JsPsychPlugin<Info> {
// Display buttons
const buttonGroupElement = document.createElement("div");
buttonGroupElement.id = "jspsych-canvas-button-response-btngroup";
buttonGroupElement.style.cssText = `
display: flex;
justify-content: center;
gap: ${trial.margin_vertical} ${trial.margin_horizontal};
padding: ${trial.margin_vertical} ${trial.margin_horizontal};
`;
if (trial.button_layout === "grid") {
buttonGroupElement.classList.add("jspsych-btn-group-grid");
if (trial.grid_rows === null && trial.grid_columns === null) {
throw new Error(
"You cannot set `grid_rows` to `null` without providing a value for `grid_columns`."
);
}
const n_cols =
trial.grid_columns === null
? Math.ceil(trial.choices.length / trial.grid_rows)
: trial.grid_columns;
const n_rows =
trial.grid_rows === null
? Math.ceil(trial.choices.length / trial.grid_columns)
: trial.grid_rows;
buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;
buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;
} else if (trial.button_layout === "flex") {
buttonGroupElement.classList.add("jspsych-btn-group-flex");
}
for (const [choiceIndex, choice] of trial.choices.entries()) {
buttonGroupElement.insertAdjacentHTML("beforeend", trial.button_html(choice, choiceIndex));

2
packages/plugin-html-button-response/src/index.spec.ts
View File

@ -15,7 +15,7 @@ describe("html-button-response", () => {
]);
expect(getHTML()).toMatchInlineSnapshot(
'"<div id="jspsych-html-button-response-stimulus">this is html</div><div id="jspsych-html-button-response-btngroup" style="display: flex; justify-content: center; gap: 0px 8px; padding: 0px 8px;"><button class="jspsych-btn" data-choice="0">button-choice</button></div>"'
'"<div id="jspsych-html-button-response-stimulus">this is html</div><div id="jspsych-html-button-response-btngroup" class="jspsych-btn-group-grid" style="grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr);"><button class="jspsych-btn" data-choice="0">button-choice</button></div>"'
);
});

55
packages/plugin-html-button-response/src/index.ts
View File

@ -45,17 +45,28 @@ const info = <const>{
pretty_name: "Trial duration",
default: null,
},
/** The vertical margin of the button. */
margin_vertical: {
/** The CSS layout for the buttons. Options: 'flex' or 'grid'. */
button_layout: {
type: ParameterType.STRING,
pretty_name: "Margin vertical",
default: "0px",
pretty_name: "Button layout",
default: "grid",
},
/** The horizontal margin of the button. */
margin_horizontal: {
type: ParameterType.STRING,
pretty_name: "Margin horizontal",
default: "8px",
/** The number of grid rows when `button_layout` is "grid".
* Setting to `null` will infer the number of rows based on the
* number of columns and buttons.
*/
grid_rows: {
type: ParameterType.INT,
pretty_name: "Grid rows",
default: 1,
},
/** The number of grid columns when `button_layout` is "grid".
* Setting to `null` (default value) will infer the number of columns
* based on the number of rows and buttons. */
grid_columns: {
type: ParameterType.INT,
pretty_name: "Grid columns",
default: null,
},
/** If true, then trial will end when user responds. */
response_ends_trial: {
@ -90,12 +101,26 @@ class HtmlButtonResponsePlugin implements JsPsychPlugin<Info> {
// Display buttons
const buttonGroupElement = document.createElement("div");
buttonGroupElement.id = "jspsych-html-button-response-btngroup";
buttonGroupElement.style.cssText = `
display: flex;
justify-content: center;
gap: ${trial.margin_vertical} ${trial.margin_horizontal};
padding: ${trial.margin_vertical} ${trial.margin_horizontal};
`;
if (trial.button_layout === "grid") {
buttonGroupElement.classList.add("jspsych-btn-group-grid");
if (trial.grid_rows === null && trial.grid_columns === null) {
throw new Error(
"You cannot set `grid_rows` to `null` without providing a value for `grid_columns`."
);
}
const n_cols =
trial.grid_columns === null
? Math.ceil(trial.choices.length / trial.grid_rows)
: trial.grid_columns;
const n_rows =
trial.grid_rows === null
? Math.ceil(trial.choices.length / trial.grid_columns)
: trial.grid_rows;
buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;
buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;
} else if (trial.button_layout === "flex") {
buttonGroupElement.classList.add("jspsych-btn-group-flex");
}
for (const [choiceIndex, choice] of trial.choices.entries()) {
buttonGroupElement.insertAdjacentHTML("beforeend", trial.button_html(choice, choiceIndex));

2
packages/plugin-image-button-response/src/index.spec.ts
View File

@ -17,7 +17,7 @@ describe("image-button-response", () => {
// expect(getHTML()).toContain('<img ');
expect(getHTML()).toMatchInlineSnapshot(
'"<img src="../media/blue.png" id="jspsych-image-button-response-stimulus"><div id="jspsych-image-button-response-btngroup" style="display: flex; justify-content: center; gap: 0px 8px; padding: 0px 8px;"><button class="jspsych-btn" data-choice="0">button-choice</button></div>"'
'"<img src="../media/blue.png" id="jspsych-image-button-response-stimulus"><div id="jspsych-image-button-response-btngroup" class="jspsych-btn-group-grid" style="grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr);"><button class="jspsych-btn" data-choice="0">button-choice</button></div>"'
);
});

55
packages/plugin-image-button-response/src/index.ts
View File

@ -63,17 +63,28 @@ const info = <const>{
pretty_name: "Trial duration",
default: null,
},
/** The vertical margin of the button. */
margin_vertical: {
/** The CSS layout for the buttons. Options: 'flex' or 'grid'. */
button_layout: {
type: ParameterType.STRING,
pretty_name: "Margin vertical",
default: "0px",
pretty_name: "Button layout",
default: "grid",
},
/** The horizontal margin of the button. */
margin_horizontal: {
type: ParameterType.STRING,
pretty_name: "Margin horizontal",
default: "8px",
/** The number of grid rows when `button_layout` is "grid".
* Setting to `null` will infer the number of rows based on the
* number of columns and buttons.
*/
grid_rows: {
type: ParameterType.INT,
pretty_name: "Grid rows",
default: 1,
},
/** The number of grid columns when `button_layout` is "grid".
* Setting to `null` (default value) will infer the number of columns
* based on the number of rows and buttons. */
grid_columns: {
type: ParameterType.INT,
pretty_name: "Grid columns",
default: null,
},
/** If true, then trial will end when user responds. */
response_ends_trial: {
@ -185,12 +196,26 @@ class ImageButtonResponsePlugin implements JsPsychPlugin<Info> {
// Display buttons
const buttonGroupElement = document.createElement("div");
buttonGroupElement.id = "jspsych-image-button-response-btngroup";
buttonGroupElement.style.cssText = `
display: flex;
justify-content: center;
gap: ${trial.margin_vertical} ${trial.margin_horizontal};
padding: ${trial.margin_vertical} ${trial.margin_horizontal};
`;
if (trial.button_layout === "grid") {
buttonGroupElement.classList.add("jspsych-btn-group-grid");
if (trial.grid_rows === null && trial.grid_columns === null) {
throw new Error(
"You cannot set `grid_rows` to `null` without providing a value for `grid_columns`."
);
}
const n_cols =
trial.grid_columns === null
? Math.ceil(trial.choices.length / trial.grid_rows)
: trial.grid_columns;
const n_rows =
trial.grid_rows === null
? Math.ceil(trial.choices.length / trial.grid_columns)
: trial.grid_rows;
buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;
buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;
} else if (trial.button_layout === "flex") {
buttonGroupElement.classList.add("jspsych-btn-group-flex");
}
for (const [choiceIndex, choice] of trial.choices.entries()) {
buttonGroupElement.insertAdjacentHTML("beforeend", trial.button_html(choice, choiceIndex));

55
packages/plugin-video-button-response/src/index.ts
View File

@ -88,17 +88,28 @@ const info = <const>{
pretty_name: "Trial duration",
default: null,
},
/** The vertical margin of the button. */
margin_vertical: {
/** The CSS layout for the buttons. Options: 'flex' or 'grid'. */
button_layout: {
type: ParameterType.STRING,
pretty_name: "Margin vertical",
default: "0px",
pretty_name: "Button layout",
default: "grid",
},
/** The horizontal margin of the button. */
margin_horizontal: {
type: ParameterType.STRING,
pretty_name: "Margin horizontal",
default: "8px",
/** The number of grid rows when `button_layout` is "grid".
* Setting to `null` will infer the number of rows based on the
* number of columns and buttons.
*/
grid_rows: {
type: ParameterType.INT,
pretty_name: "Grid rows",
default: 1,
},
/** The number of grid columns when `button_layout` is "grid".
* Setting to `null` (default value) will infer the number of columns
* based on the number of rows and buttons. */
grid_columns: {
type: ParameterType.INT,
pretty_name: "Grid columns",
default: null,
},
/** If true, the trial will end when subject makes a response. */
response_ends_trial: {
@ -183,12 +194,26 @@ class VideoButtonResponsePlugin implements JsPsychPlugin<Info> {
// Display buttons
const buttonGroupElement = document.createElement("div");
buttonGroupElement.id = "jspsych-video-button-response-btngroup";
buttonGroupElement.style.cssText = `
display: flex;
justify-content: center;
gap: ${trial.margin_vertical} ${trial.margin_horizontal};
padding: ${trial.margin_vertical} ${trial.margin_horizontal};
`;
if (trial.button_layout === "grid") {
buttonGroupElement.classList.add("jspsych-btn-group-grid");
if (trial.grid_rows === null && trial.grid_columns === null) {
throw new Error(
"You cannot set `grid_rows` to `null` without providing a value for `grid_columns`."
);
}
const n_cols =
trial.grid_columns === null
? Math.ceil(trial.choices.length / trial.grid_rows)
: trial.grid_columns;
const n_rows =
trial.grid_rows === null
? Math.ceil(trial.choices.length / trial.grid_columns)
: trial.grid_rows;
buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;
buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;
} else if (trial.button_layout === "flex") {
buttonGroupElement.classList.add("jspsych-btn-group-flex");
}
for (const [choiceIndex, choice] of trial.choices.entries()) {
buttonGroupElement.insertAdjacentHTML("beforeend", trial.button_html(choice, choiceIndex));