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

change how rows and cols are calculated, change css layout, add example

Browse Source
This commit is contained in:
Josh de Leeuw 2023-10-18 14:42:46 -04:00
parent dec9bef382
commit 4998825980
3 changed files with 37 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -68,7 +68,9 @@
.jspsych-btn-group-grid { .jspsych-btn-group-grid {
display: grid; display: grid;
grid-auto-columns: max-content; grid-auto-columns: max-content;
min-width: fit-content; max-width: fit-content;
margin-right: auto;
margin-left: auto;
} }
/* borrowing Bootstrap style for btn elements, but combining styles a bit */ /* borrowing Bootstrap style for btn elements, but combining styles a bit */

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

@ -51,19 +51,22 @@ const info = <const>{
pretty_name: "Button layout", pretty_name: "Button layout",
default: "grid", default: "grid",
}, },
/** The number of grid rows when `button_layout` is "grid" */ /** 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.
*/
button_rows: { button_rows: {
type: ParameterType.STRING, type: ParameterType.INT,
pretty_name: "Grid rows", pretty_name: "Grid rows",
default: "1", default: 1,
}, },
/** The number of grid columns when `button_layout` is "grid". /** The number of grid columns when `button_layout` is "grid".
* Using "auto" will make the number of columns equal the number * Setting to `null` (default value) will infer the number of columns
* of buttons. */ * based on the number of rows and buttons. */
button_cols: { button_cols: {
type: ParameterType.STRING, type: ParameterType.INT,
pretty_name: "Grid columns", pretty_name: "Grid columns",
default: "auto", default: null,
}, },
/** If true, then trial will end when user responds. */ /** If true, then trial will end when user responds. */
response_ends_trial: { response_ends_trial: {
@ -100,10 +103,21 @@ class HtmlButtonResponsePlugin implements JsPsychPlugin<Info> {
buttonGroupElement.id = "jspsych-html-button-response-btngroup"; buttonGroupElement.id = "jspsych-html-button-response-btngroup";
if (trial.button_layout === "grid") { if (trial.button_layout === "grid") {
buttonGroupElement.classList.add("jspsych-btn-group-grid"); buttonGroupElement.classList.add("jspsych-btn-group-grid");
let n_cols = if (trial.button_rows === null && trial.button_cols === null) {
trial.button_cols === "auto" ? trial.choices.length : parseInt(trial.button_cols); throw new Error(
"You must specify the number of rows or columns when using the grid layout."
);
}
const n_cols =
trial.button_cols === null
? Math.ceil(trial.choices.length / trial.button_rows)
: trial.button_cols;
const n_rows =
trial.button_rows === null
? Math.ceil(trial.choices.length / trial.button_cols)
: trial.button_rows;
buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`; buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;
buttonGroupElement.style.gridTemplateRows = `repeat(${trial.button_rows}, 1fr)`; buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;
} else if (trial.button_layout === "flex") { } else if (trial.button_layout === "flex") {
buttonGroupElement.classList.add("jspsych-btn-group-flex"); buttonGroupElement.classList.add("jspsych-btn-group-flex");
} }