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

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

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

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