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

button_rows -> grid_rows; button_cols -> grid_columns

Browse Source
This commit is contained in:
Josh de Leeuw 2023-10-18 15:02:41 -04:00
parent ed99076c3c
commit 11e0103678
6 changed files with 46 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,7 +37,7 @@
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: "grid", button_layout: "grid",
button_rows: 2, grid_rows: 2,
prompt: "<p>What color is this word? (grid layout, two rows)</p>" prompt: "<p>What color is this word? (grid layout, two rows)</p>"
}); });

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

@ -49,7 +49,7 @@ const info = <const>{
* Setting to `null` will infer the number of rows based on the * Setting to `null` will infer the number of rows based on the
* number of columns and buttons. * number of columns and buttons.
*/ */
button_rows: { grid_rows: {
type: ParameterType.INT, type: ParameterType.INT,
pretty_name: "Grid rows", pretty_name: "Grid rows",
default: 1, default: 1,
@ -57,7 +57,7 @@ const info = <const>{
/** The number of grid columns when `button_layout` is "grid". /** The number of grid columns when `button_layout` is "grid".
* Setting to `null` (default value) will infer the number of columns * Setting to `null` (default value) will infer the number of columns
* based on the number of rows and buttons. */ * based on the number of rows and buttons. */
button_cols: { grid_columns: {
type: ParameterType.INT, type: ParameterType.INT,
pretty_name: "Grid columns", pretty_name: "Grid columns",
default: null, default: null,
@ -157,19 +157,19 @@ class AudioButtonResponsePlugin 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");
if (trial.button_rows === null && trial.button_cols === null) { if (trial.grid_rows === null && trial.grid_columns === null) {
throw new Error( throw new Error(
"You must specify the number of rows or columns when using the grid layout." "You must specify the number of rows or columns when using the grid layout."
); );
} }
const n_cols = const n_cols =
trial.button_cols === null trial.grid_columns === null
? Math.ceil(trial.choices.length / trial.button_rows) ? Math.ceil(trial.choices.length / trial.grid_rows)
: trial.button_cols; : trial.grid_columns;
const n_rows = const n_rows =
trial.button_rows === null trial.grid_rows === null
? Math.ceil(trial.choices.length / trial.button_cols) ? Math.ceil(trial.choices.length / trial.grid_columns)
: trial.button_rows; : trial.grid_rows;
buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`; buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;
buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`; buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;
} else if (trial.button_layout === "flex") { } else if (trial.button_layout === "flex") {

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

@ -55,7 +55,7 @@ const info = <const>{
* Setting to `null` will infer the number of rows based on the * Setting to `null` will infer the number of rows based on the
* number of columns and buttons. * number of columns and buttons.
*/ */
button_rows: { grid_rows: {
type: ParameterType.INT, type: ParameterType.INT,
pretty_name: "Grid rows", pretty_name: "Grid rows",
default: 1, default: 1,
@ -63,7 +63,7 @@ const info = <const>{
/** The number of grid columns when `button_layout` is "grid". /** The number of grid columns when `button_layout` is "grid".
* Setting to `null` (default value) will infer the number of columns * Setting to `null` (default value) will infer the number of columns
* based on the number of rows and buttons. */ * based on the number of rows and buttons. */
button_cols: { grid_columns: {
type: ParameterType.INT, type: ParameterType.INT,
pretty_name: "Grid columns", pretty_name: "Grid columns",
default: null, default: null,
@ -117,19 +117,19 @@ class CanvasButtonResponsePlugin 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");
if (trial.button_rows === null && trial.button_cols === null) { if (trial.grid_rows === null && trial.grid_columns === null) {
throw new Error( throw new Error(
"You must specify the number of rows or columns when using the grid layout." "You must specify the number of rows or columns when using the grid layout."
); );
} }
const n_cols = const n_cols =
trial.button_cols === null trial.grid_columns === null
? Math.ceil(trial.choices.length / trial.button_rows) ? Math.ceil(trial.choices.length / trial.grid_rows)
: trial.button_cols; : trial.grid_columns;
const n_rows = const n_rows =
trial.button_rows === null trial.grid_rows === null
? Math.ceil(trial.choices.length / trial.button_cols) ? Math.ceil(trial.choices.length / trial.grid_columns)
: trial.button_rows; : trial.grid_rows;
buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`; buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;
buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`; buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;
} else if (trial.button_layout === "flex") { } else if (trial.button_layout === "flex") {

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

@ -55,7 +55,7 @@ const info = <const>{
* Setting to `null` will infer the number of rows based on the * Setting to `null` will infer the number of rows based on the
* number of columns and buttons. * number of columns and buttons.
*/ */
button_rows: { grid_rows: {
type: ParameterType.INT, type: ParameterType.INT,
pretty_name: "Grid rows", pretty_name: "Grid rows",
default: 1, default: 1,
@ -63,7 +63,7 @@ const info = <const>{
/** The number of grid columns when `button_layout` is "grid". /** The number of grid columns when `button_layout` is "grid".
* Setting to `null` (default value) will infer the number of columns * Setting to `null` (default value) will infer the number of columns
* based on the number of rows and buttons. */ * based on the number of rows and buttons. */
button_cols: { grid_columns: {
type: ParameterType.INT, type: ParameterType.INT,
pretty_name: "Grid columns", pretty_name: "Grid columns",
default: null, default: null,
@ -103,19 +103,19 @@ 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");
if (trial.button_rows === null && trial.button_cols === null) { if (trial.grid_rows === null && trial.grid_columns === null) {
throw new Error( throw new Error(
"You must specify the number of rows or columns when using the grid layout." "You must specify the number of rows or columns when using the grid layout."
); );
} }
const n_cols = const n_cols =
trial.button_cols === null trial.grid_columns === null
? Math.ceil(trial.choices.length / trial.button_rows) ? Math.ceil(trial.choices.length / trial.grid_rows)
: trial.button_cols; : trial.grid_columns;
const n_rows = const n_rows =
trial.button_rows === null trial.grid_rows === null
? Math.ceil(trial.choices.length / trial.button_cols) ? Math.ceil(trial.choices.length / trial.grid_columns)
: trial.button_rows; : trial.grid_rows;
buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`; buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;
buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`; buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;
} else if (trial.button_layout === "flex") { } else if (trial.button_layout === "flex") {

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

@ -73,7 +73,7 @@ const info = <const>{
* Setting to `null` will infer the number of rows based on the * Setting to `null` will infer the number of rows based on the
* number of columns and buttons. * number of columns and buttons.
*/ */
button_rows: { grid_rows: {
type: ParameterType.INT, type: ParameterType.INT,
pretty_name: "Grid rows", pretty_name: "Grid rows",
default: 1, default: 1,
@ -81,7 +81,7 @@ const info = <const>{
/** The number of grid columns when `button_layout` is "grid". /** The number of grid columns when `button_layout` is "grid".
* Setting to `null` (default value) will infer the number of columns * Setting to `null` (default value) will infer the number of columns
* based on the number of rows and buttons. */ * based on the number of rows and buttons. */
button_cols: { grid_columns: {
type: ParameterType.INT, type: ParameterType.INT,
pretty_name: "Grid columns", pretty_name: "Grid columns",
default: null, default: null,
@ -198,19 +198,19 @@ class ImageButtonResponsePlugin 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");
if (trial.button_rows === null && trial.button_cols === null) { if (trial.grid_rows === null && trial.grid_columns === null) {
throw new Error( throw new Error(
"You must specify the number of rows or columns when using the grid layout." "You must specify the number of rows or columns when using the grid layout."
); );
} }
const n_cols = const n_cols =
trial.button_cols === null trial.grid_columns === null
? Math.ceil(trial.choices.length / trial.button_rows) ? Math.ceil(trial.choices.length / trial.grid_rows)
: trial.button_cols; : trial.grid_columns;
const n_rows = const n_rows =
trial.button_rows === null trial.grid_rows === null
? Math.ceil(trial.choices.length / trial.button_cols) ? Math.ceil(trial.choices.length / trial.grid_columns)
: trial.button_rows; : trial.grid_rows;
buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`; buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;
buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`; buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;
} else if (trial.button_layout === "flex") { } else if (trial.button_layout === "flex") {

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

@ -98,7 +98,7 @@ const info = <const>{
* Setting to `null` will infer the number of rows based on the * Setting to `null` will infer the number of rows based on the
* number of columns and buttons. * number of columns and buttons.
*/ */
button_rows: { grid_rows: {
type: ParameterType.INT, type: ParameterType.INT,
pretty_name: "Grid rows", pretty_name: "Grid rows",
default: 1, default: 1,
@ -106,7 +106,7 @@ const info = <const>{
/** The number of grid columns when `button_layout` is "grid". /** The number of grid columns when `button_layout` is "grid".
* Setting to `null` (default value) will infer the number of columns * Setting to `null` (default value) will infer the number of columns
* based on the number of rows and buttons. */ * based on the number of rows and buttons. */
button_cols: { grid_columns: {
type: ParameterType.INT, type: ParameterType.INT,
pretty_name: "Grid columns", pretty_name: "Grid columns",
default: null, default: null,
@ -196,19 +196,19 @@ class VideoButtonResponsePlugin 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");
if (trial.button_rows === null && trial.button_cols === null) { if (trial.grid_rows === null && trial.grid_columns === null) {
throw new Error( throw new Error(
"You must specify the number of rows or columns when using the grid layout." "You must specify the number of rows or columns when using the grid layout."
); );
} }
const n_cols = const n_cols =
trial.button_cols === null trial.grid_columns === null
? Math.ceil(trial.choices.length / trial.button_rows) ? Math.ceil(trial.choices.length / trial.grid_rows)
: trial.button_cols; : trial.grid_columns;
const n_rows = const n_rows =
trial.button_rows === null trial.grid_rows === null
? Math.ceil(trial.choices.length / trial.button_cols) ? Math.ceil(trial.choices.length / trial.grid_columns)
: trial.button_rows; : trial.grid_rows;
buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`; buttonGroupElement.style.gridTemplateColumns = `repeat(${n_cols}, 1fr)`;
buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`; buttonGroupElement.style.gridTemplateRows = `repeat(${n_rows}, 1fr)`;
} else if (trial.button_layout === "flex") { } else if (trial.button_layout === "flex") {