";
@@ -103,9 +128,6 @@ class HtmlChoicePlugin implements JsPsychPlugin {
// function to end trial when it is time
const end_trial = () => {
- // kill any remaining setTimeout handlers
- this.jsPsych.pluginAPI.clearAllTimeouts();
-
// gather the data to store for the trial
var trial_data = {
rt: response.rt,
@@ -114,14 +136,11 @@ class HtmlChoicePlugin implements JsPsychPlugin {
value: response.value,
};
- // clear the display
- display_element.innerHTML = "";
-
// move on to the next trial
this.jsPsych.finishTrial(trial_data);
};
- // function to handle responses by the subject
+ // function to handle responses by the participant
const after_response = (choice, value) => {
// measure rt
var end_time = performance.now();
@@ -143,7 +162,6 @@ class HtmlChoicePlugin implements JsPsychPlugin {
}
if (trial.response_ends_trial) {
- this.jsPsych.pluginAPI.clearAllTimeouts();
this.jsPsych.pluginAPI.setTimeout(end_trial, trial.time_after_response);
}
};
diff --git a/packages/plugin-html-keyboard-response-raf/README.md b/packages/plugin-html-keyboard-response-raf/README.md
index 24fc6bd8..35ebf3e2 100644
--- a/packages/plugin-html-keyboard-response-raf/README.md
+++ b/packages/plugin-html-keyboard-response-raf/README.md
@@ -2,7 +2,7 @@
## Overview
-This plugin implements the same functionality as the html-keyboard-response plugin, but uses requestAnimationFrame internally for timing
+This plugin implements the same functionality as the html-keyboard-response plugin, but uses requestAnimationFrame internally for timing.
## Loading
@@ -24,7 +24,7 @@ import jsPsychHtmlKeyboardResponseRaf from '@jspsych-contrib/plugin-html-keyboar
## Compatibility
-jsPsych 7.0.0
+jsPsych v8.0. For compatibility with jsPsych v7.0, use version 1.0.1 of this plugin.
## Documentation
diff --git a/packages/plugin-html-keyboard-response-raf/docs/html-keyboard-response-raf.md b/packages/plugin-html-keyboard-response-raf/docs/html-keyboard-response-raf.md
index 7d25a6bb..08fb1dd6 100644
--- a/packages/plugin-html-keyboard-response-raf/docs/html-keyboard-response-raf.md
+++ b/packages/plugin-html-keyboard-response-raf/docs/html-keyboard-response-raf.md
@@ -1,10 +1,10 @@
# html-keyboard-response-raf
-This plugin implements the same functionality as the html-keyboard-response plugin, but uses requestAnimationFrame internally for timing
+This plugin implements the same functionality as the html-keyboard-response plugin, but uses requestAnimationFrame internally for timing.
## Parameters
-In addition to the [parameters available in all plugins](https://jspsych.org/latest/overview/plugins.md#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of undefined must be specified. Other parameters can be left unspecified if the default value is acceptable.
+In addition to the [parameters available in all plugins](https://www.jspsych.org/latest/overview/plugins/#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of undefined must be specified. Other parameters can be left unspecified if the default value is acceptable.
| Parameter | Type | Default Value | Description |
| ------------------- | ---------------- | ------------------ | ---------------------------------------- |
@@ -16,7 +16,7 @@ In addition to the [parameters available in all plugins](https://jspsych.org/lat
| 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
-In addition to the [default data collected by all plugins](https://jspsych.org/latest/overview/plugins.md#data-collected-by-all-plugins), this plugin collects the following data for each trial.
+In addition to the [default data collected by all plugins](https://www.jspsych.org/latest/overview/plugins/#data-collected-by-all-plugins), this plugin collects the following data for each trial.
| Name | Type | Value |
| --------- | ------- | ---------------------------------------- |
diff --git a/packages/plugin-html-keyboard-response-raf/examples/example1.html b/packages/plugin-html-keyboard-response-raf/examples/example1.html
index 476adad0..3e4126cb 100644
--- a/packages/plugin-html-keyboard-response-raf/examples/example1.html
+++ b/packages/plugin-html-keyboard-response-raf/examples/example1.html
@@ -1,9 +1,9 @@
-
+
-
+
+
-
+
+
-
+
+
-
-
-
+
+
+
-
-
-
+
+
+
diff --git a/packages/plugin-html-vas-response/index.js b/packages/plugin-html-vas-response/index.js
index e02beae7..57f294dd 100644
--- a/packages/plugin-html-vas-response/index.js
+++ b/packages/plugin-html-vas-response/index.js
@@ -3,95 +3,165 @@ var jsPsychHtmlVasResponse = (function (jspsych) {
const info = {
name: "html-vas-response",
+ version: "2.0.0",
parameters: {
+ /** The string to be displayed. */
stimulus: {
type: jspsych.ParameterType.HTML_STRING,
pretty_name: "Stimulus",
default: undefined,
},
+ /** Specifies the labels to be displayed, equally spaced along the scale, as in jspsych-html-slider-response. */
labels: {
type: jspsych.ParameterType.HTML_STRING,
pretty_name: "Labels",
default: [],
array: true,
},
+ /** A function called when the participant clicks on the scale.
+ * The current location of the participant's response (between 0 and 1) is provided as an input. */
resp_fcn: {
type: jspsych.ParameterType.FUNCTION,
pretty_name: "Response function",
default: null,
},
+ /** Specifies whether smaller vertical tick marks should accompany the labels. */
ticks: {
type: jspsych.ParameterType.BOOL,
pretty_name: "Ticks",
default: true,
},
+ /** If the scale should have some set of discrete clickable points (such that the tick mark will be rounded to the nearest such point),
+ * this parameter can be used specify the number of such points. If not, set this to `0`. */
n_scale_points: {
- type: jspsych.ParameterType.BOOL,
+ type: jspsych.ParameterType.INT,
pretty_name: "Number of scale points",
default: null,
},
+ /** The width of the VAS in pixels.
+ * If left `null`, then the width will be equal to the widest element in the display. */
scale_width: {
type: jspsych.ParameterType.INT,
pretty_name: "VAS width",
default: null,
},
+ /** The height of the clickable region around the VAS in pixels. */
scale_height: {
type: jspsych.ParameterType.INT,
pretty_name: "VAS height",
default: 40,
},
+ /** The colour of the scale (the horizontal line). Anything that would make a valid CSS `background` property can be used here. */
scale_colour: {
type: jspsych.ParameterType.STRING,
pretty_name: "Scale colour",
default: "black",
},
+ /** The style of the cursor when the clickable part of the scale is hovered over. */
scale_cursor: {
type: jspsych.ParameterType.STRING,
pretty_name: "Scale cursor",
default: "pointer",
},
+ /** The colour of the participant's response marker. Anything that would make a valid CSS `background` property can be used here. */
marker_colour: {
type: jspsych.ParameterType.STRING,
pretty_name: "Marker colour",
default: "rgba(0, 0, 0, 0.5)",
},
+ /** The colour of the tick marks on the scale. Anything that would make a valid CSS `background` property can be used here. */
tick_colour: {
type: jspsych.ParameterType.STRING,
pretty_name: "tick colour",
default: "black",
},
+ /** The content to be displayed below the stimulus. */
prompt: {
type: jspsych.ParameterType.HTML_STRING,
pretty_name: "Prompt",
default: null,
},
+ /** The text of the button that will submit the response. */
button_label: {
type: jspsych.ParameterType.HTML_STRING,
- pretty_name: "Buton label",
+ pretty_name: "Button label",
default: "Continue",
},
+ /** If `true`, the participant must select a response on the VAS before the trial can advance. */
required: {
type: jspsych.ParameterType.BOOL,
pretty_name: "Response required",
default: false,
},
+ /** The duration, in milliseconds, for which the stimulus is visible.
+ * If `null`, the stimulus is visible for the duration of the trial. */
stimulus_duration: {
type: jspsych.ParameterType.INT,
pretty_name: "Stimulus duration",
default: null,
},
+ /**
+ * The duration of the trial, in milliseconds.
+ * Once this time elapses, the trial ends and any response is recorded.
+ * If `null`, the trial continues indefinitely.
+ */
trial_duration: {
type: jspsych.ParameterType.INT,
pretty_name: "Trial duration",
default: null,
},
+ /**
+ * If `false`, the participant's clicking the continue button does not end the trial (but does prevent any changes to the VAS response),
+ * and the trial ends when `trial_duration` has elapsed.
+ */
response_ends_trial: {
type: jspsych.ParameterType.BOOL,
pretty_name: "Response ends trial",
default: true,
},
},
+ data: {
+ /** The response time in milliseconds for the participant to make a response.
+ * The time is measured from when the stimulus first appears on the screen until the participant's response. */
+ rt: {
+ type: jspsych.ParameterType.INT,
+ },
+ /** The value selected, between 0 and 1. 0 is the leftmost point on the scale,
+ * 1 is the rightmost point, and 0.5 is exactly in the middle. */
+ response: {
+ type: jspsych.ParameterType.FLOAT,
+ },
+ /** The stimulus displayed during the trial. */
+ stimulus: {
+ type: jspsych.ParameterType.STRING,
+ },
+ /**
+ * A record of the participant's clicks on the scale. Each element in the array is an object
+ * with properties `time` and `location`.
+ */
+ clicks: {
+ type: jspsych.ParameterType.COMPLEX,
+ array: true,
+ nested: {
+ /** The time of the click, in milliseconds since the trial began. */
+ time: {
+ type: jspsych.ParameterType.INT,
+ },
+ /** The location of the click on the VAS, from 0 to 1. */
+ location: {
+ type: jspsych.ParameterType.FLOAT,
+ },
+ },
+ },
+ },
};
+
+ /**
+ * **html-vas-response**
+ *
+ * jsPsych plugin for a visual analogue scale (VAS) response.
+ * @author Isaac Kinley
+ */
class jsPsychHtmlVasResponsePlugin {
constructor(jsPsych) {
this.jsPsych = jsPsych;
@@ -203,10 +273,11 @@ var jsPsychHtmlVasResponse = (function (jspsych) {
pct_tick = (e.clientX - vas_rect.left) / vas_rect.width;
// Round to nearest increment, if needed
if (trial.n_scale_points) {
- pct_tick = Math.round(pct_tick * (trial.n_scale_points - 1)) / (trial.n_scale_points - 1);
+ pct_tick =
+ Math.round(pct_tick * (trial.n_scale_points - 1)) / (trial.n_scale_points - 1);
}
var vline = document.getElementById("jspsych-html-vas-response-vline");
- vline.style.left = pct_tick*vas_rect.width - 1 + "px";
+ vline.style.left = pct_tick * vas_rect.width - 1 + "px";
vline.style.visibility = "visible";
// vas.appendChild(vline);
var continue_button = document.getElementById("jspsych-html-vas-response-next");
@@ -226,8 +297,6 @@ var jsPsychHtmlVasResponse = (function (jspsych) {
};
function end_trial() {
- jsPsych.pluginAPI.clearAllTimeouts();
-
// save data
var trialdata = {
rt: response.rt,
@@ -236,8 +305,6 @@ var jsPsychHtmlVasResponse = (function (jspsych) {
clicks: clicks,
};
- display_element.innerHTML = "";
-
// next trial
jsPsych.finishTrial(trialdata);
}
diff --git a/packages/plugin-html-vas-response/package.json b/packages/plugin-html-vas-response/package.json
index d22333da..72354da6 100644
--- a/packages/plugin-html-vas-response/package.json
+++ b/packages/plugin-html-vas-response/package.json
@@ -26,7 +26,7 @@
},
"homepage": "https://github.com/jspsych/jspsych-contrib/tree/main/packages/plugin-html-vas-response",
"devDependencies": {
- "@jspsych/config": "^2.0.0",
- "jspsych": "^7.0.0"
+ "@jspsych/config": "^3.0.1",
+ "jspsych": "^8.0.0"
}
}
diff --git a/packages/plugin-image-array-keyboard-response/docs/jspsych-image-array-keyboard-response.md b/packages/plugin-image-array-keyboard-response/docs/jspsych-image-array-keyboard-response.md
index 7a6b29cd..51fc5dd1 100644
--- a/packages/plugin-image-array-keyboard-response/docs/jspsych-image-array-keyboard-response.md
+++ b/packages/plugin-image-array-keyboard-response/docs/jspsych-image-array-keyboard-response.md
@@ -1,31 +1,31 @@
# jspsych-image-array-keyboard-response plugin
-This plugin displays images and records responses generated with the keyboard. The position and size of the images can be specified. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the subject has failed to respond within a fixed length of time.
+This plugin displays images and records responses generated with the keyboard. The position and size of the images can be specified. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the participant has failed to respond within a fixed length of time.
## Parameters
-In addition to the [parameters available in all plugins](https://www.jspsych.org/overview/plugins#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Parameters can be left unspecified if the default value is acceptable.
+In addition to the [parameters available in all plugins](https://www.jspsych.org/latest/overview/plugins/#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Parameters can be left unspecified if the default value is acceptable.
| Parameter | Type | Default Value | Description |
|-----------------------------|------------------| ------------------ |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| stimulus | array of string | *undefined* | The path of the image files to be displayed. |
-| stimulus_rect | array of integer | null | Set the positionX, positionY, witdh, height of the images in pixels. If left null for width and height (no value specified), then the image will display at its natural height. |
+| stimulus_rect | array of integer | null | Set the positionX, positionY, width, and height of the images in pixels. If width and height are left null, then the image will display at its natural height. |
| 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 | `"NO_KEYS"` | This array contains the key(s) that the subject is allowed to press in order to respond to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/) for more examples. Any key presses that are not listed in the array will be ignored. Specifying `"ALL_KEYS"` means that all keys will be accepted as valid responses. The default value of `"NO_KEYS"` will mean that no responses are allowed. |
+| choices | array of strings | `"NO_KEYS"` | This array contains the key(s) that the participant is allowed to press in order to respond to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/) for more examples. Any key presses that are not listed in the array will be ignored. Specifying `"ALL_KEYS"` means that all keys will be accepted as valid responses. The default value of `"NO_KEYS"` will mean that no responses are allowed. |
| 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. |
-| trial_duration | numeric | null | How long to wait for the subject to make a response before ending the trial in milliseconds. If the subject fails to make a response before this timer is reached, the subject'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. |
-| response_ends_trial | boolean | true | If true, then the trial will end whenever the subject 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 subject to view a stimulus for a fixed amount of time, even if they respond before the time is complete. |
+| 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. |
+| 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. |
## Data Generated
-In addition to the [default data collected by all plugins](../overview/plugins.md#data-collected-by-all-plugins), this plugin collects the following data for each trial.
+In addition to the [default data collected by all plugins](https://www.jspsych.org/latest/overview/plugins/#data-collected-by-all-plugins), this plugin collects the following data for each trial.
| Name | Type | Value |
| --------- | ------- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| keyboard_response | string | Indicates which key the subject pressed. If the subject responded using button clicks, then this field will be `null`. |
-| rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the stimulus first appears on the screen until the subject's response. |
+| response | string | Indicates which key the participant pressed. If the participant responded using button clicks, then this field will be `null`. |
+| rt | numeric | The response time in milliseconds for the participant to make a response. The time is measured from when the stimulus first appears on the screen until the participant's response. |
| stimulus | string | The paths of the images that were displayed on the screen. |
## Example
@@ -34,7 +34,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
let trial = {
type: jsPsychImageArrayKeyboardResponse,
stimulus: ['./img/dot_green.png', './img/dot_yellow.png'],
- stimulus_rect: [[1000,100,200, 50],[0, 100, null, 100]],
+ stimulus_rect: [[1000, 100, 200, 50],[0, 100, null, 100]],
choices: ['f'],
correct_choice: ['f'],
trial_duration: 4000,
diff --git a/packages/plugin-image-array-keyboard-response/examples/example1.html b/packages/plugin-image-array-keyboard-response/examples/example1.html
index beec4bed..36f37d4e 100644
--- a/packages/plugin-image-array-keyboard-response/examples/example1.html
+++ b/packages/plugin-image-array-keyboard-response/examples/example1.html
@@ -1,10 +1,10 @@
-
+
-
-
+
+
@@ -26,14 +26,11 @@
// push the preload trial into the timeline
timeline.push(preload);
-
- // make a rok-trials
-
// minimal example --
let trial = {
- type: jsPsychImageArrayKeyboardResponse, // plugin type to tell jsPsych witch trial-type to use
+ type: jsPsychImageArrayKeyboardResponse,
stimulus: ['./img/dot_green.png', './img/dot_yellow.png'],
- stimulus_rect: [[1000,100,200, 50],[0, 100, null, 100]], // if null, then aspect ratio is preserved
+ stimulus_rect: [[1000, 100, 200, 50],[0, 100, null, 100]], // if null, then aspect ratio is preserved
choices: ['f'], // valid key presses
correct_choice: ['f'], // correct key press
trial_duration: 4000, // duration of stimulus presentation, 0 for infinite (valid key press ends the trial)
@@ -42,7 +39,7 @@
};
timeline.push(trial);
- //---------Run the experiment---------
+ //---------Run the experiment---------
jsPsych.run(timeline);
diff --git a/packages/plugin-image-array-keyboard-response/package.json b/packages/plugin-image-array-keyboard-response/package.json
index 59e0ed95..5c823730 100644
--- a/packages/plugin-image-array-keyboard-response/package.json
+++ b/packages/plugin-image-array-keyboard-response/package.json
@@ -37,11 +37,11 @@
},
"homepage": "https://github.com/jspsych/jspsych-contrib/tree/main/packages/plugin-image-array-keyboard-response",
"peerDependencies": {
- "jspsych": ">=7.0.0"
+ "jspsych": ">=8.0.0"
},
"devDependencies": {
- "@jspsych/config": "^2.0.0",
+ "@jspsych/config": "^3.0.1",
"@jspsych/test-utils": "^1.0.0",
- "jspsych": "^7.0.0"
+ "jspsych": "^8.0.0"
}
}
diff --git a/packages/plugin-image-array-keyboard-response/readme.md b/packages/plugin-image-array-keyboard-response/readme.md
index 8bdc3f36..e1949ab7 100644
--- a/packages/plugin-image-array-keyboard-response/readme.md
+++ b/packages/plugin-image-array-keyboard-response/readme.md
@@ -2,7 +2,7 @@
## Overview
-This plugin displays images and records responses generated with the keyboard. The position and size of the images can be specified. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the subject has failed to respond within a fixed length of time.
+This plugin displays images and records responses generated with the keyboard. The position and size of the images can be specified. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the participant has failed to respond within a fixed length of time.
## Loading
@@ -25,7 +25,7 @@ import jsPsychImageArrayKeyboardResponse from '@jspsych-contrib/plugin-image-arr
## Compatibility
-jsPsych v7.0.
+jsPsych v8.0. For compatibility with jsPsych v7.0, use version 1.0.0 of this plugin.
## Documentation
diff --git a/packages/plugin-image-array-keyboard-response/src/index.ts b/packages/plugin-image-array-keyboard-response/src/index.ts
index 804697bd..e0281d8d 100644
--- a/packages/plugin-image-array-keyboard-response/src/index.ts
+++ b/packages/plugin-image-array-keyboard-response/src/index.ts
@@ -1,19 +1,27 @@
import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
+import { version } from "../package.json";
+
const info = {
name: "image-array-keyboard-response",
+ version: version,
parameters: {
- /** The image to be displayed */
+ /** The images to be displayed */
stimulus: {
type: ParameterType.IMAGE,
pretty_name: "Stimulus",
default: undefined,
+ array: true,
},
- /** Set the image rectangle in pixels */
+ /**
+ * Set the image rectangle in pixels, each array in the form of [positionX, positionY, width, height].
+ * If width and height are left null, then the image will display at its natural height.
+ */
stimulus_rect: {
- type: ParameterType.INT,
+ type: ParameterType.COMPLEX,
pretty_name: "Image rectangle",
default: null,
+ array: true,
},
/** Maintain the aspect ratio after setting width or height */
maintain_aspect_ratio: {
@@ -21,7 +29,7 @@ const info = {
pretty_name: "Maintain aspect ratio",
default: true,
},
- /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
+ /** Array containing the key(s) the participant is allowed to press to respond to the stimulus. */
choices: {
type: ParameterType.KEYS,
pretty_name: "Choices",
@@ -39,7 +47,7 @@ const info = {
pretty_name: "Trial duration",
default: null,
},
- /** If true, trial will end when subject makes a response. */
+ /** If true, trial will end when participant makes a response. */
response_ends_trial: {
type: ParameterType.BOOL,
pretty_name: "Response ends trial",
@@ -55,6 +63,22 @@ const info = {
default: true,
},
},
+ data: {
+ /** The response time in milliseconds for the participant to make a response.
+ * The time is measured from when the stimulus first appears on the screen until the participant's response. */
+ rt: {
+ type: ParameterType.INT,
+ },
+ /** The paths to the stimuli shown in the trial. */
+ stimulus: {
+ type: ParameterType.STRING,
+ array: true,
+ },
+ /** The key that the participant pressed. */
+ response: {
+ type: ParameterType.STRING,
+ },
+ },
};
type Info = typeof info;
@@ -65,7 +89,7 @@ type Info = typeof info;
* jsPsych plugin for displaying an image array and getting a keyboard response
*
* @author Younes Strittmatter
- * @see {@link https://github.com/jspsych/jspsych-contrib/blob/main/packages/plugin-image-array-keyboard-response/README.md image-array-keyboard-response plugin documentation on github.com}
+ * @see {@link https://github.com/jspsych/jspsych-contrib/blob/main/packages/plugin-image-array-keyboard-response image-array-keyboard-response plugin documentation on github.com}
*/
class ImageArrayKeyboardResponsePlugin implements JsPsychPlugin {
static info = info;
@@ -73,7 +97,7 @@ class ImageArrayKeyboardResponsePlugin implements JsPsychPlugin {
constructor(private jsPsych: JsPsych) {}
trial(display_element: HTMLElement, trial: TrialType) {
- let height, width;
+ let height: number, width: number;
if (trial.render_on_canvas) {
let image_drawn = [];
// first clear the display element (because the render_on_canvas method appends to display_element instead of overwriting it with .innerHTML)
@@ -83,8 +107,8 @@ class ImageArrayKeyboardResponsePlugin implements JsPsychPlugin {
display_element.removeChild(display_element.firstChild);
}
}
- // create canvas element and image
+ // create canvas element and image
let canvas = document.createElement("canvas");
canvas.id = "jspsych-image-keyboard-response-stimulus";
canvas.style.margin = "0";
@@ -104,6 +128,7 @@ class ImageArrayKeyboardResponsePlugin implements JsPsychPlugin {
}
};
img.src = trial.stimulus[i];
+
// get/set image height and width - this can only be done after image loads because uses image's naturalWidth/naturalHeight properties
const getHeightWidth = () => {
const stimulus_height = trial.stimulus_rect[i][3];
@@ -195,9 +220,6 @@ class ImageArrayKeyboardResponsePlugin implements JsPsychPlugin {
// function to end trial when it is time
const end_trial = () => {
- // kill any remaining setTimeout handlers
- this.jsPsych.pluginAPI.clearAllTimeouts();
-
// kill keyboard listeners
if (typeof keyboardListener !== "undefined") {
this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
@@ -210,14 +232,11 @@ class ImageArrayKeyboardResponsePlugin implements JsPsychPlugin {
response: response.key,
};
- // clear the display
- display_element.innerHTML = "";
-
// move on to the next trial
this.jsPsych.finishTrial(trial_data);
};
- // function to handle responses by the subject
+ // function to handle responses by the participant
var after_response = (info) => {
// after a valid response, the stimulus will have the CSS class 'responded'
// which can be used to provide visual feedback that a response was recorded
diff --git a/packages/plugin-image-multi-response/README.md b/packages/plugin-image-multi-response/README.md
index ce190fd7..23d12bbb 100644
--- a/packages/plugin-image-multi-response/README.md
+++ b/packages/plugin-image-multi-response/README.md
@@ -2,7 +2,7 @@
## Overview
-This plugin displays image content and records responses generated by both button click and the keyboard.The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the subject has failed to respond within a fixed length of time.
+This plugin displays image content and records responses generated by both button click and the keyboard.The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the participant has failed to respond within a fixed length of time.
## Loading
@@ -12,7 +12,7 @@ This plugin displays image content and records responses generated by both butto
## Compatibility
-jsPsych v7.0
+jsPsych v8.0. For compatibility with jsPsych v7.0, use version 1.0.1 of this plugin.
## Documentation
diff --git a/packages/plugin-image-multi-response/docs/jspsych-image-multi-response.md b/packages/plugin-image-multi-response/docs/jspsych-image-multi-response.md
index a0c89366..3d4d33db 100644
--- a/packages/plugin-image-multi-response/docs/jspsych-image-multi-response.md
+++ b/packages/plugin-image-multi-response/docs/jspsych-image-multi-response.md
@@ -1,34 +1,34 @@
# jspsych-image-multi-response plugin
-This plugin displays image content and records responses generated by both button click and the keyboard. Allowing multiple response modalities is useful when designing assessments that will be administered on both desktop and mobile (e.g., phone or tablet) devices. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the subject has failed to respond within a fixed length of time.
+This plugin displays image content and records responses generated by both button click and the keyboard. Allowing multiple response modalities is useful when designing assessments that will be administered on both desktop and mobile (e.g., phone or tablet) devices. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the participant has failed to respond within a fixed length of time.
## Parameters
-In addition to the [parameters available in all plugins](https://www.jspsych.org/overview/plugins#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Parameters can be left unspecified if the default value is acceptable.
+In addition to the [parameters available in all plugins](https://www.jspsych.org/latest/overview/plugins/#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Parameters can be left unspecified if the default value is acceptable.
| Parameter | Type | Default Value | Description |
| ----------|------|---------------|------------ |
| stimulus | HTML string | `undefined` | The HTML content to be displayed. |
| button_choices | array of strings | [] | Labels for the buttons. Each different string in the array will generate a different button. |
-| keyboard_choices | array of strings | `"NO_KEYS"` | This array contains the key(s) that the subject is allowed to press in order to respond to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/) for more examples. Any key presses that are not listed in the array will be ignored. Specifying `"ALL_KEYS"` means that all keys will be accepted as valid responses. The default value of `"NO_KEYS"` will mean that no responses are allowed. | |
-| button_html | HTML string | `''` | 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. |
-| 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 subject is supposed to take (e.g., which key to press). |
-| trial_duration | numeric | null | How long to wait for the subject to make a response before ending the trial in milliseconds. If the subject fails to make a response before this timer is reached, the subject'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. |
+| keyboard_choices | array of strings | `"NO_KEYS"` | This array contains the key(s) that the participant is allowed to press in order to respond to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/) for more examples. Any key presses that are not listed in the array will be ignored. Specifying `"ALL_KEYS"` means that all keys will be accepted as valid responses. The default value of `"NO_KEYS"` will mean that no responses are allowed. | |
+| button_html | function | ``(choice: string, choice_index: number) => `;` `` | 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). |
-| response_ends_trial | boolean | true | If true, then the trial will end whenever the subject 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 subject to view a stimulus for a fixed amount of time, even if they respond before the time is complete. |
+| 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
-In addition to the [default data collected by all plugins](../overview/plugins.md#data-collected-by-all-plugins), this plugin collects the following data for each trial.
+In addition to the [default data collected by all plugins](https://www.jspsych.org/latest/overview/plugins/#data-collected-by-all-plugins), this plugin collects the following data for each trial.
| Name | Type | Value |
| --------- | ------- | ---------------------------------------- |
-| keyboard_response | string | Indicates which key the subject pressed. If the subject responded using button clicks, then this field will be `null`. |
-| button_response | numeric | Indicates which button the subject pressed. The first button in the `choices` array is 0, the second is 1, and so on. If the subject responded using the keyboard, then this field will be `null`. |
+| keyboard_response | string | Indicates which key the participant pressed. If the participant responded using button clicks, then this field will be `null`. |
+| button_response | numeric | Indicates which button the participant pressed. The first button in the `choices` array is 0, the second is 1, and so on. If the participant responded using the keyboard, then this field will be `null`. |
| response_source | string | Indicates the source of the response. This will either be `"button"` or `"keyboard"`. |
-| rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the stimulus first appears on the screen until the subject's response. |
+| rt | numeric | The response time in milliseconds for the participant to make a response. The time is measured from when the stimulus first appears on the screen until the participant's response. |
| stimulus | string | The HTML content that was displayed on the screen. |
## Example
diff --git a/packages/plugin-image-multi-response/examples/example.html b/packages/plugin-image-multi-response/examples/example.html
index 9685fa2d..36e54a0a 100644
--- a/packages/plugin-image-multi-response/examples/example.html
+++ b/packages/plugin-image-multi-response/examples/example.html
@@ -1,14 +1,14 @@
-
+
-
+
diff --git a/packages/plugin-image-multi-response/package.json b/packages/plugin-image-multi-response/package.json
index b02d591a..74b6a3a6 100644
--- a/packages/plugin-image-multi-response/package.json
+++ b/packages/plugin-image-multi-response/package.json
@@ -37,11 +37,11 @@
},
"homepage": "https://github.com/jspsych/jspsych-contrib/tree/main/packages/plugin-image-multi-response",
"peerDependencies": {
- "jspsych": ">=7.0.0"
+ "jspsych": ">=8.0.0"
},
"devDependencies": {
- "@jspsych/config": "^2.0.0",
+ "@jspsych/config": "^3.0.1",
"@jspsych/test-utils": "^1.0.0",
- "jspsych": "^7.0.0"
+ "jspsych": "^8.0.0"
}
}
diff --git a/packages/plugin-image-multi-response/src/index.spec.ts b/packages/plugin-image-multi-response/src/index.spec.ts
index bc2c6a3b..088daa25 100644
--- a/packages/plugin-image-multi-response/src/index.spec.ts
+++ b/packages/plugin-image-multi-response/src/index.spec.ts
@@ -53,12 +53,15 @@ describe("plugin-image-multi-response", () => {
});
test("display button html", async () => {
+ const buttonHtmlFn = jest.fn();
+ buttonHtmlFn.mockReturnValue("");
+
const { getHTML } = await startTimeline([
{
type: imageMultiResponse,
stimulus: "../media/blue.png",
button_choices: ["buttonChoice"],
- button_html: '',
+ button_html: buttonHtmlFn,
},
]);
diff --git a/packages/plugin-image-multi-response/src/index.ts b/packages/plugin-image-multi-response/src/index.ts
index cecf3e84..a2a8ef2b 100644
--- a/packages/plugin-image-multi-response/src/index.ts
+++ b/packages/plugin-image-multi-response/src/index.ts
@@ -1,7 +1,10 @@
import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
+import { version } from "../package.json";
+
const info = {
name: "image-multi-response",
+ version: version,
parameters: {
/** The image to be displayed */
stimulus: {
@@ -34,20 +37,24 @@ const info = {
default: [],
array: true,
},
- /**
- * Array containing the key(s) the subject is allowed to press to respond to the stimulus.
- */
+ /** Array containing the key(s) the participant is allowed to press to respond to the stimulus. */
keyboard_choices: {
type: ParameterType.KEYS,
pretty_name: "Keyboard Choices",
default: "NO_KEYS",
},
- /** The HTML for creating button. Can create own style. Use the "%choice%" string to indicate where the label from the choices parameter should be inserted. */
+ /**
+ * 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_html: {
- type: ParameterType.HTML_STRING,
+ type: ParameterType.FUNCTION,
pretty_name: "Button HTML",
- default: '',
- array: true,
+ default: function (choice: string, choice_index: number) {
+ return ``;
+ },
},
/** Any content here will be displayed under the button(s). */
prompt: {
@@ -95,12 +102,44 @@ const info = {
default: true,
},
},
+ data: {
+ /**
+ * The response time in milliseconds for the participant to make a response.
+ * The time is measured from when the stimulus first appears on the screen until the participant's response.
+ */
+ rt: {
+ type: ParameterType.INT,
+ },
+ /** The HTML content that was displayed on the screen. */
+ stimulus: {
+ type: ParameterType.STRING,
+ },
+ /**
+ * Indicates which button the participant pressed. The first button in the `choices` array is 0, the second is 1, and so on.
+ * If the participant responded using the keyboard, then this field will be `null`.
+ */
+ button_response: {
+ type: ParameterType.INT,
+ },
+ /**
+ * Indicates which key the participant pressed.
+ * If the participant responded using button clicks, then this field will be `null`.
+ */
+ keyboard_response: {
+ type: ParameterType.STRING,
+ },
+ /** Indicates the source of the response. This will either be `"button"` or `"keyboard"`. */
+ response_source: {
+ type: ParameterType.STRING,
+ },
+ },
};
type Info = typeof info;
/**
- * image-multi-response
+ * **image-multi-response**
+ *
* jsPsych plugin for displaying an html stimulus and getting a response
* @author Adam Richie-Halford
* @see {@link https://www.jspsych.org/plugins/jspsych-image-multi-response/ image-multi-response plugin documentation on jspsych.org}
@@ -111,8 +150,8 @@ class ImageMultiResponsePlugin implements JsPsychPlugin {
constructor(private jsPsych: JsPsych) {}
trial(display_element: HTMLElement, trial: TrialType) {
- var height, width;
- var html;
+ var height: number, width: number;
+ var html: string;
if (trial.render_on_canvas) {
var image_drawn = false;
// first clear the display element (because the render_on_canvas method appends to display_element instead of overwriting it with .innerHTML)
@@ -161,26 +200,13 @@ class ImageMultiResponsePlugin implements JsPsychPlugin {
canvas.width = width;
};
getHeightWidth(); // call now, in case image loads immediately (is cached)
- // create buttons
- var buttons = [];
- if (Array.isArray(trial.button_html)) {
- if (trial.button_html.length == trial.button_choices.length) {
- buttons = trial.button_html;
- } else {
- console.error(
- "Error in image-multi-response plugin. The length of the button_html array does not equal the length of the button_choices array"
- );
- }
- } else {
- for (var i = 0; i < trial.button_choices.length; i++) {
- buttons.push(trial.button_html);
- }
- }
+
var btngroup_div = document.createElement("div");
btngroup_div.id = "jspsych-image-multi-response-btngroup";
html = "";
for (var i = 0; i < trial.button_choices.length; i++) {
- var str = buttons[i].replace(/%choice%/g, trial.button_choices[i]);
+ var button_str = trial.button_html(trial.button_choices[i], i);
+
html +=
'";
}
btngroup_div.innerHTML = html;
@@ -215,25 +241,11 @@ class ImageMultiResponsePlugin implements JsPsychPlugin {
'
';
- //display buttons
- var buttons = [];
- if (Array.isArray(trial.button_html)) {
- if (trial.button_html.length == trial.button_choices.length) {
- buttons = trial.button_html;
- } else {
- console.error(
- "Error in image-multi-response plugin. The length of the button_html array does not equal the length of the button_choices array"
- );
- }
- } else {
- for (var i = 0; i < trial.button_choices.length; i++) {
- buttons.push(trial.button_html);
- }
- }
+
html += ' {
img.style.width = width.toString() + "px";
}
- // function to handle responses by the subject
+ // function to handle responses by the participant
var after_keyboard_response = function (info) {
// after a valid response, the stimulus will have the CSS class 'responded'
// which can be used to provide visual feedback that a response was recorded
@@ -337,9 +349,6 @@ class ImageMultiResponsePlugin implements JsPsychPlugin {
// function to end trial when it is time
const end_trial = () => {
- // kill any remaining setTimeout handlers
- this.jsPsych.pluginAPI.clearAllTimeouts();
-
// kill keyboard listeners
if (typeof keyboardListener !== "undefined") {
this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
@@ -354,15 +363,12 @@ class ImageMultiResponsePlugin implements JsPsychPlugin {
response_source: response.source,
};
- // clear the display
- display_element.innerHTML = "";
-
// move on to the next trial
this.jsPsych.finishTrial(trial_data);
};
- // function to handle responses by the subject
- function after_response(choice) {
+ // function to handle responses by the participant
+ function after_response(choice: string) {
// measure rt
var end_time = performance.now();
var rt = Math.round(end_time - start_time);
diff --git a/packages/plugin-image-swipe-response/README.md b/packages/plugin-image-swipe-response/README.md
index 215a7577..832fbd7c 100644
--- a/packages/plugin-image-swipe-response/README.md
+++ b/packages/plugin-image-swipe-response/README.md
@@ -2,7 +2,7 @@
## Overview
-This plugin displays image content and records responses generated by both swipe gestures and keyboard response. This is ideal for two-alternative forced choice assessments that will be administered on both mobile and desktop platforms. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the subject has failed to respond within a fixed length of time.
+This plugin displays image content and records responses generated by both swipe gestures and keyboard response. This is ideal for two-alternative forced choice assessments that will be administered on both mobile and desktop platforms. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the participant has failed to respond within a fixed length of time.
## Loading
@@ -12,7 +12,7 @@ This plugin displays image content and records responses generated by both swipe
## Compatibility
-jsPsych v7.0
+jsPsych v8.0. For compatibility with jsPsych v7.0, use version 1.0.0 of this plugin.
## Documentation
diff --git a/packages/plugin-image-swipe-response/docs/jspsych-image-swipe-response.md b/packages/plugin-image-swipe-response/docs/jspsych-image-swipe-response.md
index de0bff56..b0ec0007 100644
--- a/packages/plugin-image-swipe-response/docs/jspsych-image-swipe-response.md
+++ b/packages/plugin-image-swipe-response/docs/jspsych-image-swipe-response.md
@@ -1,10 +1,10 @@
# jspsych-image-swipe-response plugin
-This plugin displays image content and records responses generated by both swipe gestures and keyboard response. This plugin will be useful for two-alternative forced choice (2AFC) assessments that will be administered on both desktop and mobile devices. The stimulus can be animated to move off-screen before the trial ends. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the subject has failed to respond within a fixed length of time.
+This plugin displays image content and records responses generated by both swipe gestures and keyboard response. This plugin will be useful for two-alternative forced choice (2AFC) assessments that will be administered on both desktop and mobile devices. The stimulus can be animated to move off-screen before the trial ends. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically if the participant has failed to respond within a fixed length of time.
## Parameters
-In addition to the [parameters available in all plugins](https://www.jspsych.org/overview/plugins#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Parameters can be left unspecified if the default value is acceptable.
+In addition to the [parameters available in all plugins](https://www.jspsych.org/latest/overview/plugins/#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Parameters can be left unspecified if the default value is acceptable.
| Parameter | Type | Default Value | Description |
| --------------------- | ---------------- | ------------------ | ---------------------------------------- |
@@ -12,27 +12,27 @@ In addition to the [parameters available in all plugins](https://www.jspsych.org
| stimulus_height | integer | null | Set the height of the image in pixels. If left null (no value specified), then the image will display at its natural height. |
| 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. |
-| keyboard_choices | array of strings | `"NO_KEYS"` | This array contains the key(s) that the subject is allowed to press in order to respond to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/) for more examples. Any key presses that are not listed in the array will be ignored. Specifying `"ALL_KEYS"` means that all keys will be accepted as valid responses. The default value of `"NO_KEYS"` will mean that no responses are allowed. | |
-| 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 subject is supposed to take (e.g., which key to press). |
+| keyboard_choices | array of strings | `"NO_KEYS"` | This array contains the key(s) that the participant is allowed to press in order to respond to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/) for more examples. Any key presses that are not listed in the array will be ignored. Specifying `"ALL_KEYS"` means that all keys will be accepted as valid responses. The default value of `"NO_KEYS"` will mean that no responses are allowed. | |
+| 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 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. |
-| trial_duration | numeric | null | How long to wait for the subject to make a response before ending the trial in milliseconds. If the subject fails to make a response before this timer is reached, the subject'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. |
-| response_ends_trial | boolean | true | If true, then the trial will end whenever the subject 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 subject to view a stimulus for a fixed amount of time, even if they respond before the time is complete. |
-| swipe_threshold | numeric | 20 | How far away from the center should the subject have to swipe for a left/right response to be recorded. If the subject releases their finger before this threshold, the stimulus will return to the neutral center position. If the subject exceeds this threshold, the swipe response will be recorded. |
+| 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. |
+| 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. |
+| swipe_threshold | numeric | 20 | How far away from the center should the participant have to swipe for a left/right response to be recorded. If the participant releases their finger before this threshold, the stimulus will return to the neutral center position. If the participant exceeds this threshold, the swipe response will be recorded. |
| swipe_offscreen_coordinate | numeric | 1000 | The offscreen coordinate for the swipe animation. |
-| swipe_animation_max_rotation | numeric | 20 | How much should the swipe animation rotate the stimulus (in degrees). When the subject drags to the left (right), the stimulus will rotate slightly clockwise (counter-clockwise). */
+| swipe_animation_max_rotation | numeric | 20 | How much should the swipe animation rotate the stimulus (in degrees). When the participant drags to the left (right), the stimulus will rotate slightly clockwise (counter-clockwise). */
| swipe_animation_duration | numeric | 250 | How long should the swipe animation last in milliseconds. Set this to zero to disable the animation. This animation time will not be included in the reaction time. |
| 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. |
## Data Generated
-In addition to the [default data collected by all plugins](../overview/plugins.md#data-collected-by-all-plugins), this plugin collects the following data for each trial.
+In addition to the [default data collected by all plugins](https://www.jspsych.org/latest/overview/plugins/#data-collected-by-all-plugins), this plugin collects the following data for each trial.
| Name | Type | Value |
| --------- | ------- | ---------------------------------------- |
-| keyboard_response | string | Indicates which key the subject pressed. If the subject responded using button clicks, then this field will be `null`. |
-| swipe_response | string | Indicates which direction the subject swiped. This will be either `"left"` or `"right"`. If the subject responded using the keyboard, then this field will be `null`. |
+| keyboard_response | string | Indicates which key the participant pressed. If the participant responded using button clicks, then this field will be `null`. |
+| swipe_response | string | Indicates which direction the participant swiped. This will be either `"left"` or `"right"`. If the participant responded using the keyboard, then this field will be `null`. |
| response_source | string | Indicates the source of the response. This will either be `"swipe"` or `"keyboard"`. |
-| rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the stimulus first appears on the screen until the subject's response. |
+| rt | numeric | The response time in milliseconds for the participant to make a response. The time is measured from when the stimulus first appears on the screen until the participant's response. |
| stimulus | string | The HTML content that was displayed on the screen. |
## Example
diff --git a/packages/plugin-image-swipe-response/examples/example.html b/packages/plugin-image-swipe-response/examples/example.html
index b781acb5..5aa3d7c6 100644
--- a/packages/plugin-image-swipe-response/examples/example.html
+++ b/packages/plugin-image-swipe-response/examples/example.html
@@ -1,16 +1,16 @@
-
+
-
-
-
+
+
+
-
-
-
+
+
+
+
+
-
-
-
+
+
+
+
+
-
-
+
+
+
+
-
+
';
for (var i = 0; i < trial.button_choices.length; i++) {
- var str = buttons[i].replace(/%choice%/g, trial.button_choices[i]);
+ var button_str = trial.button_html(trial.button_choices[i], i);
html +=
'";
}
html += "
";
@@ -281,7 +293,7 @@ class ImageMultiResponsePlugin implements JsPsychPlugin