Merge remote-tracking branch 'origin/main' into plugin-exclusions

.github/workflows/release.yml

@@ -55,9 +55,10 @@ jobs:
             const distFile = "dist.zip";
 
             let errorMessage;
-            for (const { name: tag, version } of publishedPackages) {
+            for (const { name, version } of publishedPackages) {
+              const tag = `${name}@${version}`;
               // Only upload the dist archive for the chore package, plugins, and extensions
-              if (tag.startsWith("jspsych@") || tag.includes("/plugin-") || tag.includes("/extension-")) {
+              if (name.startsWith("jspsych@") || name.includes("/plugin-") || name.includes("/extension-")) {
                 console.log(`Uploading dist archive release asset for ${tag}`);
                 try {
                   // https://docs.github.com/en/rest/reference/repos#get-a-release-by-tag-name
@@ -74,12 +75,7 @@ jobs:
                     owner,
                     repo,
                     release_id: releaseId,
-
+                    name: `${name.replace("@jspsych/", "jspsych-")}-${version}-dist.zip`,
-                    // Tag to filename transformation:
-                    // * jspsych@1.2.3 => jspsych-1.2.3-dist.zip
-                    // * @jspsych/plugin-test@1.2.3 => jspsych-plugin-test-1.2.3-dist.zip
-                    name: `${tag.replace("@jspsych/", "jspsych-").replace("@", "-")}-dist.zip`,
-
                     label: "Dist archive (zip)",
                     headers: {
                       "content-type": "application/zip",

docs/demos/eye-tracking-with-webgazer.html

@@ -135,7 +135,7 @@
       var trial = {
         type: jsPsychImageKeyboardResponse,
         stimulus: 'img/blue.png',
-        choices: jsPsych.NO_KEYS,
+        choices: "NO_KEYS",
         trial_duration: 2000,
         extensions: [
           {
@@ -153,7 +153,7 @@
           return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
             <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
         },
-        choices: jsPsych.NO_KEYS
+        choices: "NO_KEYS"
       };
       
       jsPsych.run([

docs/demos/jspsych-audio-keyboard-response-demo-2.html

@@ -28,7 +28,7 @@
   var trial = {
     type: jsPsychAudioKeyboardResponse,
     stimulus: 'sound/tone.mp3',
-		choices: jsPsych.NO_KEYS,
+		choices: "NO_KEYS",
 		trial_ends_after_audio: true
   };
 

docs/demos/jspsych-canvas-keyboard-response-demo2.html

@@ -44,7 +44,7 @@
     canvas_size: [300, 300],
     stimulus: drawCirc,
     prompt: '<p>No key response is allowed.</p><p>The stimulus disappears after 3 seconds.</p>',
-    choices: jsPsych.NO_KEYS,
+    choices: "NO_KEYS",
     trial_duration: 3000,
     data: {shape: 'circle', radius: 50}
   }

docs/demos/jspsych-html-keyboard-response-demo2.html

@@ -34,7 +34,7 @@
   var trial = {
     type: jsPsychHtmlKeyboardResponse,
     stimulus: '<p style="font-size: 48px;">+</p>',
-    choices: jsPsych.NO_KEYS,
+    choices: "NO_KEYS",
     trial_duration: 1000,
   };
 

docs/demos/jspsych-image-keyboard-response-demo2.html

@@ -40,7 +40,7 @@
   var trial = {
     type: jsPsychImageKeyboardResponse,
     stimulus: 'img/happy_face_1.jpg',
-    choices: jsPsych.NO_KEYS,
+    choices: "NO_KEYS",
     prompt: "<p>Study this face for 5 seconds.</p>",
     trial_duration: 5000
   };

docs/demos/jspsych-video-keyboard-response-demo1.html

@@ -42,7 +42,7 @@
     stimulus: [
       'video/fish.mp4'
     ],
-    choices: jsPsych.NO_KEYS,
+    choices: "NO_KEYS",
     trial_ends_after_video: true
   };
 

docs/overview/eye-tracking.md

@@ -301,7 +301,7 @@ If you have tips based on your own experience please consider sharing them on ou
           var trial = {
             type: jsPsychImageKeyboardResponse,
             stimulus: 'img/blue.png',
-            choices: jsPsych.NO_KEYS,
+            choices: "NO_KEYS",
             trial_duration: 2000,
             extensions: [
               {
@@ -319,7 +319,7 @@ If you have tips based on your own experience please consider sharing them on ou
               return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
                 <pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
             },
-            choices: jsPsych.NO_KEYS
+            choices: "NO_KEYS"
           };
           
           jsPsych.run([

docs/overview/media-preloading.md

@@ -313,7 +313,7 @@ var save_data = {
 var fail_message = {
 	type: jsPsychHtmlKeyboardResponse,
 	stimulus: 'The experiment failed to load. Please contact the researcher.',
-	choices: jsPsych.NO_KEYS,
+	choices: "NO_KEYS",
 	trial_duration: null 
 }
 

docs/overview/plugins.md

@@ -191,7 +191,7 @@ If you want CSS rules that only apply to specific elements during a trial, you c
 <script>
   var fixation_trial = {
     type: jsPsychHtmlKeyboardResponse,
-    choices: jsPsych.NO_KEYS,
+    choices: "NO_KEYS",
     stimulus: '+',
     css_classes: ['fixation']
   };

docs/overview/prolific.md

@@ -49,14 +49,14 @@ You can accomplish this in a couple different ways.
 
 One option is to create a trial that contains a link that the participant clicks to end the experiment and return to Prolific. For example, the `html-keyboard-response` plugin can be used to display text that includes a link. This could go on a debriefing page.
 
-Here's an example trial that could be used. Note that `choices` is set to `jsPsych.NO_KEYS`, which will prevent the participant from continuing past this point in the experiment.
+Here's an example trial that could be used. Note that `choices` is set to `"NO_KEYS"`, which will prevent the participant from continuing past this point in the experiment.
 
 ```js
 var final_trial = {
   type: jsPsychHtmlKeyboardResponse,
   stimulus: `<p>You've finished the last task. Thanks for participating!</p>
     <p><a href="https://app.prolific.co/submissions/complete?cc=XXXXXXX">Click here to return to Prolific and complete the study</a>.</p>`,
-  choices: jsPsych.NO_KEYS
+  choices: "NO_KEYS"
 }
 ```
 

docs/overview/style.md

@@ -149,7 +149,7 @@ You can use a static `css_classes` parameter value if you always want to apply t
 var fixation = {
     type: jsPsychHtmlKeyboardResponse,
     stimulus: '+',
-    choices: jsPsych.NO_KEYS,
+    choices: "NO_KEYS",
     trial_duration: 500,
     css_classes: ['fixation']
 }

docs/overview/timeline.md

@@ -107,13 +107,13 @@ var face_name_procedure = {
 		{
 			type: jsPsychHtmlKeyboardResponse,
 			stimulus: '+',
-			choices: jsPsych.NO_KEYS,
+			choices: "NO_KEYS",
 			trial_duration: 500
 		},
 		{
 			type: jsPsychImageKeyboardResponse,
 			stimulus: jsPsych.timelineVariable('face'),
-			choices: jsPsych.NO_KEYS,
+			choices: "NO_KEYS",
 			trial_duration: 2500
 		}
 	],
@@ -136,19 +136,19 @@ var face_name_procedure = {
 		{
 			type: jsPsychHtmlKeyboardResponse,
 			stimulus: '+',
-			choices: jsPsych.NO_KEYS,
+			choices: "NO_KEYS",
 			trial_duration: 500
 		},
 		{
 			type: jsPsychHtmlKeyboardResponse,
 			stimulus: jsPsych.timelineVariable('name'),
 			trial_duration: 1000,
-			choices: jsPsych.NO_KEYS
+			choices: "NO_KEYS"
 		},
 		{
 			type: jsPsychImageKeyboardResponse,
 			stimulus: jsPsych.timelineVariable('face'),			
-			choices: jsPsych.NO_KEYS,
+			choices: "NO_KEYS",
 			trial_duration: 1000
 		}
 	],
@@ -173,14 +173,14 @@ var face_name_procedure = {
 		{
 			type: jsPsychHtmlKeyboardResponse,
 			stimulus: '+',
-			choices: jsPsych.NO_KEYS,
+			choices: "NO_KEYS",
 			trial_duration: 500
 		},
 		{
 			type: jsPsychHtmlKeyboardResponse,
 			stimulus: jsPsych.timelineVariable('name'),
 			trial_duration: 1000,
-			choices: jsPsych.NO_KEYS
+			choices: "NO_KEYS"
 		},
 		{
 			type: jsPsychHtmlKeyboardResponse,
@@ -190,7 +190,7 @@ var face_name_procedure = {
 					<p>${jsPsych.timelineVariable('name')}</p>`;
 				return html;
 			},			
-			choices: jsPsych.NO_KEYS,
+			choices: "NO_KEYS",
 			trial_duration: 2500
 		}
 	],

docs/plugins/animation.md

@@ -12,7 +12,7 @@ stimuli | array | *undefined* | Each element of the array is a path to an image
 frame_time | numeric | 250 | How long to display each image (in milliseconds).
 frame_isi | numeric | 0 | If greater than 0, then a gap will be shown between each image in the sequence. This parameter specifies the length of the gap.
 sequence_reps | numeric | 1 | How many times to show the entire sequence. There will be no gap (other than the gap specified by `frame_isi`) between repetitions.
-choices | array of strings | `jsPsych.ALL_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. The default value of `jsPsych.ALL_KEYS` means that all keys will be accepted as valid responses. Specifying `jsPsych.NO_KEYS` will mean that no responses are allowed.
+choices | array of strings | `"ALL_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. The default value of `"ALL_KEYS"` means that all keys will be accepted as valid responses. Specifying `"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(s) to press).
 render_on_canvas | boolean | true | If true, the images will be drawn onto a canvas element. This prevents a blank screen (white flash) between consecutive images in some browsers, like Firefox and Edge. If false, the image will be shown via an img element, as in previous versions of jsPsych.
 

docs/plugins/audio-button-response.md

@@ -72,3 +72,8 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 		</div>
 
 	<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-audio-button-response-demo-2.html">Open demo in new tab</a>
+
+	**Note**: if you want the images to look more like jsPsych buttons, i.e. with borders and different styles for hover/active/disabled states, then you can also embed the image element inside the default `button_html` string:
+	```js
+	button_html: '<button class="jspsych-btn"><img src="%choice%" /></button>'
+	```

docs/plugins/audio-keyboard-response.md

@@ -15,7 +15,7 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 | Parameter                      | Type             | Default Value      | Description                              |
 | ------------------------------ | ---------------- | ------------------ | ---------------------------------------- |
 | stimulus                       | audio file       | undefined          | Path to audio file to be played.         |
-| choices                        | array of strings | `jsPsych.ALL_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. The default value of `jsPsych.ALL_KEYS` means that all keys will be accepted as valid responses. Specifying `jsPsych.NO_KEYS` will mean that no responses are allowed. |
+| choices                        | array of strings | `"ALL_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. The default value of `"ALL_KEYS"` means that all keys will be accepted as valid responses. Specifying `"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). |
 | 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, then 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 use set this parameter to `false` to force the subject to listen to the stimulus for a fixed amount of time, even if they respond before the time is complete. |
@@ -60,7 +60,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
 		var trial = {
 			type: jsPsychAudioKeyboardResponse,
 			stimulus: 'sound/tone.mp3',
-			choices: jsPsych.NO_KEYS,
+			choices: "NO_KEYS",
 			trial_ends_after_audio: true
 		};
 		```

docs/plugins/canvas-keyboard-response.md

@@ -10,7 +10,7 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 | ------------------- | ---------------- | ------------------ | ---------------------------------------- |
 | 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 | `jsPsych.ALL_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. The default value of `jsPsych.ALL_KEYS` means that all keys will be accepted as valid responses. Specifying `jsPsych.NO_KEYS` will mean that no responses are allowed. |
+| choices             | array of strings | `"ALL_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. The default value of `"ALL_KEYS"` means that all keys will be accepted as valid responses. Specifying `"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). |
 | 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, then the trial will wait for a response indefinitely. |
@@ -70,7 +70,7 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
             canvas_size: [300, 300],
             stimulus: drawCirc,
             prompt: '<p>No key response is allowed.</p><p>The stimulus disappears after 3 seconds.</p>',
-            choices: jsPsych.NO_KEYS,
+            choices: "NO_KEYS",
             trial_duration: 3000,
             data: {shape: 'circle', radius: 50}
         }

docs/plugins/categorize-animation.md

@@ -9,7 +9,7 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 | Parameter                      | Type             | Default Value      | Description                              |
 | ------------------------------ | ---------------- | ------------------ | ---------------------------------------- |
 | stimuli                        | array            | *undefined*        | Each element of the array is a path to an image file. |
-| choices                        | array of strings | `jsPsych.ALL_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. The default value of `jsPsych.ALL_KEYS` means that all keys will be accepted as valid responses. Specifying `jsPsych.NO_KEYS` will mean that no responses are allowed. |
+| choices                        | array of strings | `"ALL_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. The default value of `"ALL_KEYS"` means that all keys will be accepted as valid responses. Specifying `"NO_KEYS"` will mean that no responses are allowed. |
 | key_answer                     | string           | *undefined*        | The key character indicating the correct response. |
 | text_answer                    | string           | ""                 | A text label that describes the correct answer. Used in conjunction with the `correct_text` and `incorrect_text` parameters. |
 | correct_text                   | string           | "Correct."         | String to show when the correct answer is given. Can contain HTML formatting. The special string `%ANS%` can be used within the string. If present, the plugin will put the `text_answer` for the trial in place of the %ANS% string (see example below). |

docs/plugins/categorize-html.md

@@ -9,7 +9,7 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 | Parameter                  | Type             | Default Value            | Description                              |
 | -------------------------- | ---------------- | ------------------------ | ---------------------------------------- |
 | stimulus                   | html string      | *undefined*              | The HTML stimulus to display.            |
-| choices                    | array of strings | `jsPsych.ALL_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. The default value of `jsPsych.ALL_KEYS` means that all keys will be accepted as valid responses. Specifying `jsPsych.NO_KEYS` will mean that no responses are allowed. |
+| choices                    | array of strings | `"ALL_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. The default value of `"ALL_KEYS"` means that all keys will be accepted as valid responses. Specifying `"NO_KEYS"` will mean that no responses are allowed. |
 | key_answer                 | string           | *undefined*              | The key character indicating the correct response. |
 | text_answer                | string           | ""                       | A label that is associated with the correct answer. Used in conjunction with the `correct_text` and `incorrect_text` parameters. |
 | correct_text               | string           | "Correct."               | String to show when the correct answer is given. Can contain HTML formatting. The special string `%ANS%` can be used within the string. If present, the plugin will put the `text_answer` for the trial in place of the `%ANS%` string (see example below). |

docs/plugins/categorize-image.md

@@ -10,7 +10,7 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 | -------------------------- | ---------------- | ------------------------ | ---------------------------------------- |
 | stimulus                   | string           | *undefined*              | The path to the image file.              |
 | key_answer                 | string           | *undefined*              | The key character indicating the correct response. |
-| choices                    | array of strings | `jsPsych.ALL_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. The default value of `jsPsych.ALL_KEYS` means that all keys will be accepted as valid responses. Specifying `jsPsych.NO_KEYS` will mean that no responses are allowed. |
+| choices                    | array of strings | `"ALL_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. The default value of `"ALL_KEYS"` means that all keys will be accepted as valid responses. Specifying `"NO_KEYS"` will mean that no responses are allowed. |
 | text_answer                | string           | ""                       | A label that is associated with the correct answer. Used in conjunction with the `correct_text` and `incorrect_text` parameters. |
 | correct_text               | string           | "Correct."               | String to show when the correct answer is given. Can contain HTML formatting. The special string `%ANS%` can be used within the string. If present, the plugin will put the `text_answer` for the trial in place of the %ANS% string (see example below). |
 | incorrect_text             | string           | "Wrong."                 | String to show when the wrong answer is given. Can contain HTML formatting. The special string `%ANS%` can be used within the string. If present, the plugin will put the `text_answer` for the trial in place of the %ANS% string (see example below). |

docs/plugins/html-keyboard-response.md

@@ -10,7 +10,7 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 | Parameter           | Type             | Default Value      | Description                              |
 | ------------------- | ---------------- | ------------------ | ---------------------------------------- |
 | stimulus            | HTML string      | *undefined*        | The string to be displayed.              |
-| choices             | array of strings | `jsPsych.ALL_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. The default value of `jsPsych.ALL_KEYS` means that all keys will be accepted as valid responses. Specifying `jsPsych.NO_KEYS` will mean that no responses are allowed. |
+| choices             | array of strings | `"ALL_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. The default value of `"ALL_KEYS"` means that all keys will be accepted as valid responses. Specifying `"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). |
 | 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, then the trial will wait for a response indefinitely. |
@@ -52,7 +52,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
         var trial = {
             type: jsPsychHtmlKeyboardResponse,
             stimulus: '<p style="font-size: 48px;">+</p>',
-            choices: jsPsych.NO_KEYS,
+            choices: "NO_KEYS",
             trial_duration: 1000,
         };		
         ```

docs/plugins/iat-html.md

@@ -18,7 +18,7 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 | left_category_label     | string           | ['left']                                 | An array that contains the words/labels associated with a certain stimulus. The labels are aligned to the left side of the page. |
 | right_category_label    | string           | ['right']                                | An array that contains the words/labels associated with a certain stimulus. The labels are aligned to the right side of the page. |
 | stim_key_association    | string           | *undefined*                              | Either 'left' or 'right'. This indicates whether the stimulus is associated with the key press and category on the left or right side of the page (`left_category_key` or `right_category_key`). |
-| key_to_move_forward     | array of strings | jsPsych.ALL_KEYS                         | This array contains the characters the subject is allowed to press to move on to the next trial if their key press was incorrect and feedback was displayed. Can also have 'other key' as an option which will only allow the user to select the right key to move forward. |
+| key_to_move_forward     | array of strings | "ALL_KEYS"                         | This array contains the characters the subject is allowed to press to move on to the next trial if their key press was incorrect and feedback was displayed. Can also have 'other key' as an option which will only allow the user to select the right key to move forward. |
 | 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`, then 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 use this parameter to force the subject to view a stimulus for a fixed amount of time, even if they respond before the time is complete. |
 

docs/plugins/iat-image.md

@@ -18,7 +18,7 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 | left_category_label     | string              | ['left']                                 | An array that contains the words/labels associated with a certain stimulus. The labels are aligned to the left side of the page. |
 | right_category_label    | string              | ['right']                                | An array that contains the words/labels associated with a certain stimulus. The labels are aligned to the right side of the page. |
 | stim_key_association    | string              | 'undefined'                              | Either 'left' or 'right'. This indicates whether the stimulus is associated with the key press and category on the left or right side of the page (`left_category_key` or `right_category_key`). |
-| key_to_move_forward     | array of characters | jsPsych.ALL_KEYS                         | This array contains the characters the subject is allowed to press to move on to the next trial if their key press was incorrect and feedback was displayed. Can also have 'other key' as an option which will only allow the user to select the right key to move forward. |
+| key_to_move_forward     | array of characters | "ALL_KEYS"                         | This array contains the characters the subject is allowed to press to move on to the next trial if their key press was incorrect and feedback was displayed. Can also have 'other key' as an option which will only allow the user to select the right key to move forward. |
 | 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`, then 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 use this parameter to force the subject to view a stimulus for a fixed amount of time, even if they respond before the time is complete. |
 

docs/plugins/image-keyboard-response.md

@@ -14,7 +14,7 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 | 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. |
-| choices               | array of strings | `jsPsych.ALL_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. The default value of `jsPsych.ALL_KEYS` means that all keys will be accepted as valid responses. Specifying `jsPsych.NO_KEYS` will mean that no responses are allowed. |
+| choices               | array of strings | `"ALL_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. The default value of `"ALL_KEYS"` means that all keys will be accepted as valid responses. Specifying `"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). |
 | 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 subject makes a response. |
 | 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`, then the trial will wait for a response indefinitely. |
@@ -56,7 +56,7 @@ In addition to the [default data collected by all plugins](../overview/plugins.m
         var trial = {
             type: jsPsychImageKeyboardResponse,
             stimulus: 'img/happy_face_1.png',
-            choices: jsPsych.NO_KEYS,
+            choices: "NO_KEYS",
             prompt: "<p>Study this face for 5 seconds.</p>",
             trial_duration: 5000
         };

docs/plugins/video-keyboard-response.md

@@ -19,7 +19,7 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 | start                          | numeric          | null                    | If given a value, the video will start at this time point in seconds. |
 | stop                           | numeric          | null                    | If given a value, the video will stop at this time point in seconds. |
 | rate                           | numeric          | null                    | The playback rate of the video. 1 is normal, <1 is slower, >1 is faster. |
-| choices                        | array of strings | `jsPsych.ALL_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. The default value of `jsPsych.ALL_KEYS` means that all keys will be accepted as valid responses. Specifying `jsPsych.NO_KEYS` will mean that no responses are allowed. |
+| choices                        | array of strings | `"ALL_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. The default value of `"ALL_KEYS"` means that all keys will be accepted as valid responses. Specifying `"NO_KEYS"` will mean that no responses are allowed. |
 | trial_ends_after_video         | bool             | false                   | If true, then the trial will end as soon as the video file finishes playing. |
 | 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, then 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. |
@@ -46,7 +46,7 @@ stimulus | array | The `stimulus` array. This will be encoded as a JSON string w
           stimulus: [
             'video/fish.mp4'
           ],
-          choices: jsPsych.NO_KEYS,
+          choices: "NO_KEYS",
           trial_ends_after_video: true
         };
         ```

docs/reference/jspsych-pluginAPI.md

@@ -304,7 +304,7 @@ The keyboard event listener will be bound to the `display_element` declared in `
 
 A valid response triggers the `callback_function` specified in the parameters. A single argument is passed to the callback function. The argument contains an object with the properties `key` and `rt`. `key` contains the string representation of the response key, and `rt` contains the response time. 
 
-This function uses the `.key` value of the keyboard event, which is _case sensitive_. When `case_sensitive_responses` is `false` in `initJsPsych` (the default), this function will convert both the `valid_responses` strings and the response key to lowercase before comparing them, and it will pass the lowercase version of the response key to the `callback_function`. For example, if `valid_responses` is `['a']`, then both 'A' and 'a' will be considered valid key presses, and 'a' will be returned as the response key. When `case_sensitive_responses` is `true` in `initJsPsych`, this function will not convert the case when comparing the `valid_responses` and response key, and it will not convert the case of the response key that is passed to the `callback_function`. For example, if `valid_responses` is `['a']`, then 'a' will be the only valid key press, and 'A' (i.e. 'a' with CapsLock on or Shift held down) will not be accepted. Also, if `valid_responses` includes multiple letter case options (e.g. `jsPsych.ALL_KEYS`), then you may need to check the response key against both letter cases when scoring etc., e.g. `if (response == 'ArrowLeft' || response =='arrowleft') ...`.
+This function uses the `.key` value of the keyboard event, which is _case sensitive_. When `case_sensitive_responses` is `false` in `initJsPsych` (the default), this function will convert both the `valid_responses` strings and the response key to lowercase before comparing them, and it will pass the lowercase version of the response key to the `callback_function`. For example, if `valid_responses` is `['a']`, then both 'A' and 'a' will be considered valid key presses, and 'a' will be returned as the response key. When `case_sensitive_responses` is `true` in `initJsPsych`, this function will not convert the case when comparing the `valid_responses` and response key, and it will not convert the case of the response key that is passed to the `callback_function`. For example, if `valid_responses` is `['a']`, then 'a' will be the only valid key press, and 'A' (i.e. 'a' with CapsLock on or Shift held down) will not be accepted. Also, if `valid_responses` includes multiple letter case options (e.g. `"ALL_KEYS"`), then you may need to check the response key against both letter cases when scoring etc., e.g. `if (response == 'ArrowLeft' || response =='arrowleft') ...`.
 
 ### Examples
 
@@ -318,7 +318,7 @@ var after_response = function(info){
 
 jsPsych.pluginAPI.getKeyboardResponse({
   callback_function:after_response,
-  valid_responses: jsPsych.ALL_KEYS,
+  valid_responses: "ALL_KEYS",
   rt_method: 'performance',
   persist: false
 });
@@ -338,7 +338,7 @@ var after_response = function(info){
 
 var listener = jsPsych.pluginAPI.getKeyboardResponse({
   callback_function:after_response,
-  valid_responses: jsPsych.ALL_KEYS,
+  valid_responses: "ALL_KEYS",
   rt_method: 'performance',
   persist: true
 });

docs/support/migration-v7.md

@@ -71,6 +71,21 @@ var trial = {
 }
 ```
 
+## The `choices` parameter for keyboard response trials
+
+The `choices` parameter for keyboard response trials no longer supports `jsPsych.NO_KEYS` and `jsPsych.ALL_KEYS`, and they have been replaced by the strings `"NO_KEYS"` and `"ALL_KEYS"` respectively.
+
+For example, if you load the `audio-keyboard-response` plugin, you can prevent any user input like...
+
+```js
+var trial = {
+  type: jsPsychAudioKeyboardResponse,
+  choices: "NO_KEYS",
+  stimulus: 'example.ogg',
+  trial_ends_after_audio: true
+}
+```
+
 ## Using extensions
 
 Like plugins, extensions are now also referenced by their class. 

docs/tutorials/rt-task.md

@@ -458,13 +458,13 @@ var test_stimuli = [
 ];
 ```
 
-Instead of just showing the blue and orange circles, let's also set up the experiment to show a fixation cross (+) in between trials. We can define a trial to show the fixation cross for a fixed amount of time by using the `trial_duration` parameter of the html-keyboard-response plugin and setting the `choices` parameter to the special value `jsPsych.NO_KEYS`, which means that no responses will be accepted as a valid response and the trial will last however long the `trial_duration` parameter specifies.
+Instead of just showing the blue and orange circles, let's also set up the experiment to show a fixation cross (+) in between trials. We can define a trial to show the fixation cross for a fixed amount of time by using the `trial_duration` parameter of the html-keyboard-response plugin and setting the `choices` parameter to the special value `"NO_KEYS"`, which means that no responses will be accepted as a valid response and the trial will last however long the `trial_duration` parameter specifies.
 
 ```javascript
 var fixation = {
   type: jsPsychHtmlKeyboardResponse,
   stimulus: '<div style="font-size:60px;">+</div>',
-  choices: jsPsych.NO_KEYS,
+  choices: "NO_KEYS",
   trial_duration: 1000,
 };
 ```
@@ -563,7 +563,7 @@ What happens when the experiment reaches the test procedure? jsPsych will run th
         var fixation = {
           type: jsPsychHtmlKeyboardResponse,
           stimulus: '<div style="font-size:60px;">+</div>',
-          choices: jsPsych.NO_KEYS,
+          choices: "NO_KEYS",
           trial_duration: 1000,
         };
 
@@ -677,7 +677,7 @@ var test_procedure = {
         var fixation = {
           type: jsPsychHtmlKeyboardResponse,
           stimulus: '<div style="font-size:60px;">+</div>',
-          choices: jsPsych.NO_KEYS,
+          choices: "NO_KEYS",
           trial_duration: 1000,
         };
 
@@ -713,7 +713,7 @@ To do that here, we'll use one of the built-in randomization methods in [jsPsych
 var fixation = {
   type: jsPsychHtmlKeyboardResponse,
   stimulus: '<div style="font-size:60px;">+</div>',
-  choices: jsPsych.NO_KEYS,
+  choices: "NO_KEYS",
   trial_duration: function(){
     return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
   }
@@ -789,7 +789,7 @@ In the code above, we replaced the `trial_duration: 1000` parameter in `fixation
         var fixation = {
           type: jsPsychHtmlKeyboardResponse,
           stimulus: '<div style="font-size:60px;">+</div>',
-          choices: jsPsych.NO_KEYS,
+          choices: "NO_KEYS",
           trial_duration: function(){
             return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
           }
@@ -902,7 +902,7 @@ var jsPsych = initJsPsych({
         var fixation = {
           type: jsPsychHtmlKeyboardResponse,
           stimulus: '<div style="font-size:60px;">+</div>',
-          choices: jsPsych.NO_KEYS,
+          choices: "NO_KEYS",
           trial_duration: function(){
             return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
           }
@@ -978,7 +978,7 @@ Another kind of tagging that would be useful is to mark each fixation trial as s
 var fixation = {
   type: jsPsychHtmlKeyboardResponse,
   stimulus: '<div style="font-size:60px;">+</div>',
-  choices: jsPsych.NO_KEYS,
+  choices: "NO_KEYS",
   trial_duration: function(){
     return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
   },
@@ -1059,7 +1059,7 @@ var fixation = {
         var fixation = {
           type: jsPsychHtmlKeyboardResponse,
           stimulus: '<div style="font-size:60px;">+</div>',
-          choices: jsPsych.NO_KEYS,
+          choices: "NO_KEYS",
           trial_duration: function(){
             return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
           },
@@ -1198,7 +1198,7 @@ The `data.response` value is a string representation of the key the subject pres
         var fixation = {
           type: jsPsychHtmlKeyboardResponse,
           stimulus: '<div style="font-size:60px;">+</div>',
-          choices: jsPsych.NO_KEYS,
+          choices: "NO_KEYS",
           trial_duration: function(){
             return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
           },
@@ -1348,7 +1348,7 @@ This code is available in the `/examples` folder in the jsPsych release download
     var fixation = {
       type: jsPsychHtmlKeyboardResponse,
       stimulus: '<div style="font-size:60px;">+</div>',
-      choices: jsPsych.NO_KEYS,
+      choices: "NO_KEYS",
       trial_duration: function(){
         return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
       },

package-lock.json

@@ -14757,7 +14757,7 @@
     },
     "packages/plugin-fullscreen": {
       "name": "@jspsych/plugin-fullscreen",
-      "version": "1.0.0",
+      "version": "1.0.1",
       "license": "MIT",
       "devDependencies": {
         "@jspsych/config": "^1.0.0",

packages/plugin-animation/src/index.ts

@@ -103,7 +103,7 @@ class AnimationPlugin implements JsPsychPlugin<Info> {
       this.jsPsych.finishTrial(trial_data);
     };
 
-    var animate_interval = setInterval(function () {
+    var animate_interval = setInterval(() => {
       var showImage = true;
       if (!trial.render_on_canvas) {
         display_element.innerHTML = ""; // clear everything
@@ -155,7 +155,7 @@ class AnimationPlugin implements JsPsychPlugin<Info> {
       });
 
       if (trial.frame_isi > 0) {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(() => {
           display_element.querySelector<HTMLElement>("#jspsych-animation-image").style.visibility =
             "hidden";
           current_stim = "blank";
@@ -168,7 +168,7 @@ class AnimationPlugin implements JsPsychPlugin<Info> {
       }
     }
 
-    var after_response = function (info) {
+    var after_response = (info) => {
       responses.push({
         key_press: info.key,
         rt: info.rt,

packages/plugin-audio-button-response/src/index.ts

@@ -106,7 +106,7 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
     // load audio file
     this.jsPsych.pluginAPI
       .getAudioBuffer(trial.stimulus)
-      .then(function (buffer) {
+      .then((buffer) => {
         if (context !== null) {
           audio = context.createBufferSource();
           audio.buffer = buffer;
@@ -117,7 +117,7 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
         }
         setupTrial();
       })
-      .catch(function (err) {
+      .catch((err) => {
         console.error(
           `Failed to load audio file "${trial.stimulus}". Try checking the file path. We recommend using the preload plugin to load audio files.`
         );
@@ -195,7 +195,7 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
 
       // end trial if time limit is set
       if (trial.trial_duration !== null) {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(() => {
           end_trial();
         }, trial.trial_duration);
       }

packages/plugin-audio-keyboard-response/src/index.ts

@@ -83,7 +83,7 @@ class AudioKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     // load audio file
     this.jsPsych.pluginAPI
       .getAudioBuffer(trial.stimulus)
-      .then(function (buffer) {
+      .then((buffer) => {
         if (context !== null) {
           audio = context.createBufferSource();
           audio.buffer = buffer;
@@ -94,7 +94,7 @@ class AudioKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         }
         setupTrial();
       })
-      .catch(function (err) {
+      .catch((err) => {
         console.error(
           `Failed to load audio file "${trial.stimulus}". Try checking the file path. We recommend using the preload plugin to load audio files.`
         );
@@ -129,7 +129,7 @@ class AudioKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
       // end trial if time limit is set
       if (trial.trial_duration !== null) {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(() => {
           end_trial();
         }, trial.trial_duration);
       }

packages/plugin-audio-slider-response/src/index.ts

@@ -127,7 +127,7 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
     // load audio file
     this.jsPsych.pluginAPI
       .getAudioBuffer(trial.stimulus)
-      .then(function (buffer) {
+      .then((buffer) => {
         if (context !== null) {
           audio = context.createBufferSource();
           audio.buffer = buffer;
@@ -138,7 +138,7 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
         }
         setupTrial();
       })
-      .catch(function (err) {
+      .catch((err) => {
         console.error(
           `Failed to load audio file "${trial.stimulus}". Try checking the file path. We recommend using the preload plugin to load audio files.`
         );
@@ -252,7 +252,7 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
 
       display_element
         .querySelector("#jspsych-audio-slider-response-next")
-        .addEventListener("click", function () {
+        .addEventListener("click", () => {
           // measure response time
           var endTime = performance.now();
           var rt = Math.round(endTime - startTime);
@@ -285,7 +285,7 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
 
       // end trial if trial_duration is set
       if (trial.trial_duration !== null) {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(() => {
           end_trial();
         }, trial.trial_duration);
       }

packages/plugin-call-function/src/index.ts

@@ -46,7 +46,7 @@ class CallFunctionPlugin implements JsPsychPlugin<Info> {
     };
 
     if (trial.async) {
-      var done = function (data) {
+      var done = (data) => {
         return_val = data;
         end_trial();
       };

packages/plugin-canvas-button-response/src/index.ts

@@ -145,7 +145,7 @@ class CanvasButtonResponsePlugin implements JsPsychPlugin<Info> {
     for (var i = 0; i < trial.choices.length; i++) {
       display_element
         .querySelector<HTMLButtonElement>("#jspsych-canvas-button-response-button-" + i)
-        .addEventListener("click", function (e: MouseEvent) {
+        .addEventListener("click", (e: MouseEvent) => {
           var choice = e.currentTarget as Element;
           choice.getAttribute("data-choice"); // don't use dataset for jsdom compatibility
           after_response(choice);
@@ -203,7 +203,7 @@ class CanvasButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // hide image if timing is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-canvas-button-response-stimulus"
         ).style.visibility = "hidden";
@@ -212,7 +212,7 @@ class CanvasButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         end_trial();
       }, trial.trial_duration);
     }

packages/plugin-canvas-keyboard-response/src/index.ts

@@ -112,7 +112,7 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     };
 
     // function to handle responses by the subject
-    var after_response = function (info) {
+    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
       display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").className +=
@@ -141,7 +141,7 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // hide stimulus if stimulus_duration is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-canvas-keyboard-response-stimulus"
         ).style.visibility = "hidden";
@@ -150,7 +150,7 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if trial_duration is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         end_trial();
       }, trial.trial_duration);
     }

packages/plugin-canvas-slider-response/src/index.ts

@@ -210,7 +210,7 @@ class CanvasSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     display_element
       .querySelector("#jspsych-canvas-slider-response-next")
-      .addEventListener("click", function () {
+      .addEventListener("click", () => {
         // measure response time
         var endTime = performance.now();
         response.rt = Math.round(endTime - startTime);
@@ -228,7 +228,7 @@ class CanvasSliderResponsePlugin implements JsPsychPlugin<Info> {
       });
 
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-canvas-slider-response-stimulus"
         ).style.visibility = "hidden";
@@ -237,9 +237,7 @@ class CanvasSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if trial_duration is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
-        end_trial();
-      }, trial.trial_duration);
     }
 
     var startTime = performance.now();

packages/plugin-categorize-html/src/index.ts

@@ -113,7 +113,7 @@ class CategorizeHtmlPlugin implements JsPsychPlugin<Info> {
 
     // hide image after time if the timing parameter is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-categorize-html-stimulus"
         ).style.visibility = "hidden";
@@ -163,7 +163,7 @@ class CategorizeHtmlPlugin implements JsPsychPlugin<Info> {
     });
 
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         after_response({
           key: null,
           rt: null,
@@ -205,7 +205,7 @@ class CategorizeHtmlPlugin implements JsPsychPlugin<Info> {
         correct === false &&
         ((timeout && trial.show_feedback_on_timeout) || !timeout)
       ) {
-        var after_forced_response = function (info) {
+        var after_forced_response = (info) => {
           endTrial();
         };
 
@@ -217,9 +217,7 @@ class CategorizeHtmlPlugin implements JsPsychPlugin<Info> {
           allow_held_key: false,
         });
       } else {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(endTrial, trial.feedback_duration);
-          endTrial();
-        }, trial.feedback_duration);
       }
     };
   }

packages/plugin-categorize-image/src/index.ts

@@ -112,7 +112,7 @@ class CategorizeImagePlugin implements JsPsychPlugin<Info> {
 
     // hide image after time if the timing parameter is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-categorize-image-stimulus"
         ).style.visibility = "hidden";
@@ -162,7 +162,7 @@ class CategorizeImagePlugin implements JsPsychPlugin<Info> {
     });
 
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         after_response({
           key: null,
           rt: null,
@@ -204,7 +204,7 @@ class CategorizeImagePlugin implements JsPsychPlugin<Info> {
         correct === false &&
         ((timeout && trial.show_feedback_on_timeout) || !timeout)
       ) {
-        var after_forced_response = function (info) {
+        var after_forced_response = (info) => {
           endTrial();
         };
 
@@ -216,9 +216,7 @@ class CategorizeImagePlugin implements JsPsychPlugin<Info> {
           allow_held_key: false,
         });
       } else {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(endTrial, trial.feedback_duration);
-          endTrial();
-        }, trial.feedback_duration);
       }
     };
   }

packages/plugin-cloze/src/index.ts

@@ -25,7 +25,7 @@ const info = <const>{
     mistake_fn: {
       type: ParameterType.FUNCTION,
       pretty_name: "Mistake function",
-      default: function () {},
+      default: () => {},
     },
   },
 };

packages/plugin-external-html/src/index.ts

@@ -25,9 +25,7 @@ const info = <const>{
     check_fn: {
       type: ParameterType.FUNCTION,
       pretty_name: "Check function",
-      default: function () {
+      default: () => true,
-        return true;
-      },
     },
     /** Whether or not to force a page refresh. */
     force_refresh: {
@@ -74,7 +72,7 @@ class ExternalHtmlPlugin implements JsPsychPlugin<Info> {
     const load = (element, file, callback) => {
       var xmlhttp = new XMLHttpRequest();
       xmlhttp.open("GET", file, true);
-      xmlhttp.onload = function () {
+      xmlhttp.onload = () => {
         if (xmlhttp.status == 200 || xmlhttp.status == 0) {
           //Check if loaded
           element.innerHTML = xmlhttp.responseText;

packages/plugin-free-sort/src/index.ts

@@ -356,7 +356,7 @@ class FreeSortPlugin implements JsPsychPlugin<Info> {
     }
 
     for (let i = 0; i < draggables.length; i++) {
-      draggables[i].addEventListener(start_event_name, function (event: MouseEvent | TouchEvent) {
+      draggables[i].addEventListener(start_event_name, (event: MouseEvent | TouchEvent) => {
         let pageX: number;
         let pageY: number;
         if (event instanceof MouseEvent) {
@@ -377,7 +377,7 @@ class FreeSortPlugin implements JsPsychPlugin<Info> {
         let y = pageY - elem.offsetTop - window.scrollY;
         elem.style.transform = "scale(" + trial.scale_factor + "," + trial.scale_factor + ")";
 
-        let move_event = function (e) {
+        let move_event = (e) => {
           let clientX = e.clientX;
           let clientY = e.clientY;
           if (typeof document.ontouchend !== "undefined") {
@@ -439,7 +439,7 @@ class FreeSortPlugin implements JsPsychPlugin<Info> {
         };
         document.addEventListener(move_event_name, move_event);
 
-        var end_event = function (e) {
+        var end_event = (e) => {
           document.removeEventListener(move_event_name, move_event);
           elem.style.transform = "scale(1, 1)";
           if (trial.change_border_background_color) {

packages/plugin-fullscreen/CHANGELOG.md

@@ -1,10 +1,15 @@
 # @jspsych/plugin-fullscreen
 
+## 1.0.1
+
+### Patch Changes
+
+- [#2212](https://github.com/jspsych/jsPsych/pull/2212) [`85a69d28`](https://github.com/jspsych/jsPsych/commit/85a69d28bc5ea25afba7b55d133e4ec03f2e808e) Thanks [@bjoluc](https://github.com/bjoluc)! - Consistently replace anonymous functions with arrow functions to avoid masking of `this`
+
 ## 1.0.0
+
 ### Major Changes
 
-
-
 - [#2183](https://github.com/jspsych/jsPsych/pull/2183) [`c8760b1`](https://github.com/jspsych/jsPsych/commit/c8760b19483453b0e77dc98e464e1629b5605a15) Thanks [@jodeleeuw](https://github.com/jodeleeuw), [@becky-gilbert](https://github.com/becky-gilbert), [@bjoluc](https://github.com/bjoluc)! - **jsPsych is now fully modular, with individual NPM packages for the core library, plugins, and extensions.**
 
   To support this change, we've made a number of breaking changes. We've added [a guide for migrating from version 6.x to 7.x](https://www.jspsych.org/7.0/support/migration-v7/) to the documentation, and updated the [hello world tutorial](https://www.jspsych.org/7.0/tutorials/hello-world/) with instructions for configuring jsPsych in three different ways. In addition to enabling package management, some of the benefits that this change provides include an improved developer experience with IntelliSense code hints, proper encapsulation of jsPsych so that multiple instances can be run on the same page, and easier integration with modern JavaScript tools like bundlers.

packages/plugin-fullscreen/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jspsych/plugin-fullscreen",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "jsPsych plugin to toggle fullscreen mode in the browser",
   "type": "module",
   "main": "dist/index.cjs",

packages/plugin-fullscreen/src/index.ts

@@ -54,7 +54,7 @@ class FullscreenPlugin implements JsPsychPlugin<Info> {
     const endTrial = () => {
       display_element.innerHTML = "";
 
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         var trial_data = {
           success: !keyboardNotAllowed,
         };
@@ -78,7 +78,7 @@ class FullscreenPlugin implements JsPsychPlugin<Info> {
           "</button>";
         var listener = display_element
           .querySelector("#jspsych-fullscreen-btn")
-          .addEventListener("click", function () {
+          .addEventListener("click", () => {
             var element = document.documentElement;
             if (element.requestFullscreen) {
               element.requestFullscreen();

packages/plugin-html-button-response/src/index.ts

@@ -125,7 +125,7 @@ class HtmlButtonResponsePlugin implements JsPsychPlugin<Info> {
     for (var i = 0; i < trial.choices.length; i++) {
       display_element
         .querySelector("#jspsych-html-button-response-button-" + i)
-        .addEventListener("click", function (e) {
+        .addEventListener("click", (e) => {
           var btn_el = e.currentTarget as HTMLButtonElement;
           var choice = btn_el.getAttribute("data-choice"); // don't use dataset for jsdom compatibility
           after_response(choice);
@@ -184,7 +184,7 @@ class HtmlButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // hide image if timing is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-html-button-response-stimulus"
         ).style.visibility = "hidden";
@@ -193,9 +193,7 @@ class HtmlButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
-        end_trial();
-      }, trial.trial_duration);
     }
   }
 }

packages/plugin-html-keyboard-response/src/index.ts

@@ -111,7 +111,7 @@ class HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     };
 
     // function to handle responses by the subject
-    var after_response = function (info) {
+    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
       display_element.querySelector("#jspsych-html-keyboard-response-stimulus").className +=
@@ -140,7 +140,7 @@ class HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // hide stimulus if stimulus_duration is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-html-keyboard-response-stimulus"
         ).style.visibility = "hidden";
@@ -149,9 +149,7 @@ class HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if trial_duration is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
-        end_trial();
-      }, trial.trial_duration);
     }
   }
 }

packages/plugin-html-slider-response/src/index.ts

@@ -203,7 +203,7 @@ class HtmlSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     display_element
       .querySelector("#jspsych-html-slider-response-next")
-      .addEventListener("click", function () {
+      .addEventListener("click", () => {
         // measure response time
         var endTime = performance.now();
         response.rt = Math.round(endTime - startTime);
@@ -221,7 +221,7 @@ class HtmlSliderResponsePlugin implements JsPsychPlugin<Info> {
       });
 
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-html-slider-response-stimulus"
         ).style.visibility = "hidden";
@@ -230,9 +230,7 @@ class HtmlSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if trial_duration is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
-        end_trial();
-      }, trial.trial_duration);
     }
 
     var startTime = performance.now();

packages/plugin-iat-html/src/index.ts

@@ -294,7 +294,7 @@ class IatHtmlPlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null && trial.response_ends_trial != true) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         end_trial();
       }, trial.trial_duration);
     }

packages/plugin-iat-image/src/index.ts

@@ -294,7 +294,7 @@ class IatImagePlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null && trial.response_ends_trial != true) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         end_trial();
       }, trial.trial_duration);
     }

packages/plugin-image-button-response/src/index.ts

@@ -123,7 +123,7 @@ class ImageButtonResponsePlugin implements JsPsychPlugin<Info> {
       canvas.style.padding = "0";
       var ctx = canvas.getContext("2d");
       var img = new Image();
-      img.onload = function () {
+      img.onload = () => {
         // if image wasn't preloaded, then it will need to be drawn whenever it finishes loading
         if (!image_drawn) {
           getHeightWidth(); // only possible to get width/height after image loads
@@ -278,7 +278,7 @@ class ImageButtonResponsePlugin implements JsPsychPlugin<Info> {
     for (var i = 0; i < trial.choices.length; i++) {
       display_element
         .querySelector("#jspsych-image-button-response-button-" + i)
-        .addEventListener("click", function (e) {
+        .addEventListener("click", (e) => {
           var btn_el = e.currentTarget as HTMLButtonElement;
           var choice = btn_el.getAttribute("data-choice"); // don't use dataset for jsdom compatibility
           after_response(choice);
@@ -337,7 +337,7 @@ class ImageButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // hide image if timing is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-image-button-response-stimulus"
         ).style.visibility = "hidden";
@@ -346,7 +346,7 @@ class ImageButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         end_trial();
       }, trial.trial_duration);
     } else if (trial.response_ends_trial === false) {

packages/plugin-image-keyboard-response/src/index.ts

@@ -102,7 +102,7 @@ class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
       canvas.style.padding = "0";
       var ctx = canvas.getContext("2d");
       var img = new Image();
-      img.onload = function () {
+      img.onload = () => {
         // if image wasn't preloaded, then it will need to be drawn whenever it finishes loading
         if (!image_drawn) {
           getHeightWidth(); // only possible to get width/height after image loads
@@ -213,7 +213,7 @@ class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     };
 
     // function to handle responses by the subject
-    var after_response = function (info) {
+    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
       display_element.querySelector("#jspsych-image-keyboard-response-stimulus").className +=
@@ -242,7 +242,7 @@ class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // hide stimulus if stimulus_duration is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-image-keyboard-response-stimulus"
         ).style.visibility = "hidden";
@@ -251,7 +251,7 @@ class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if trial_duration is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         end_trial();
       }, trial.trial_duration);
     } else if (trial.response_ends_trial === false) {

packages/plugin-image-slider-response/src/index.ts

@@ -153,7 +153,7 @@ class ImageSliderResponsePlugin implements JsPsychPlugin<Info> {
       canvas.style.padding = "0";
       var ctx = canvas.getContext("2d");
       var img = new Image();
-      img.onload = function () {
+      img.onload = () => {
         // if image wasn't preloaded, then it will need to be drawn whenever it finishes loading
         if (!image_drawn) {
           getHeightWidth(); // only possible to get width/height after image loads
@@ -386,7 +386,7 @@ class ImageSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     display_element
       .querySelector("#jspsych-image-slider-response-next")
-      .addEventListener("click", function () {
+      .addEventListener("click", () => {
         // measure response time
         var endTime = performance.now();
         response.rt = Math.round(endTime - startTime);
@@ -404,7 +404,7 @@ class ImageSliderResponsePlugin implements JsPsychPlugin<Info> {
       });
 
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-image-slider-response-stimulus"
         ).style.visibility = "hidden";
@@ -413,7 +413,7 @@ class ImageSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if trial_duration is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         end_trial();
       }, trial.trial_duration);
     }

packages/plugin-maxdiff/src/index.ts

@@ -136,10 +136,10 @@ class MaxdiffPlugin implements JsPsychPlugin<Info> {
     // first checks that the same alternative cannot be endorsed in the left and right columns simultaneously.
     // then enables the submit button if the trial is required.
     const left_right = ["left", "right"];
-    left_right.forEach(function (p) {
+    left_right.forEach((p) => {
       // Get all elements either 'left' or 'right'
-      document.getElementsByName(p).forEach(function (alt) {
+      document.getElementsByName(p).forEach((alt) => {
-        alt.addEventListener("click", function () {
+        alt.addEventListener("click", () => {
           // Find the opposite (if left, then right & vice versa) identified by the class (jspsych-maxdiff-alt-1, 2, etc)
           var op = alt["name"] == "left" ? "right" : "left";
           var n = document.getElementsByClassName(alt.className).namedItem(op);

packages/plugin-preload/src/index.ts

@@ -240,7 +240,7 @@ class PreloadPlugin implements JsPsychPlugin<Info> {
       // show detailed errors, if necessary
       if (trial.show_detailed_errors) {
         display_element.innerHTML += "<p><strong>Error details:</strong></p>";
-        detailed_errors.forEach(function (e) {
+        detailed_errors.forEach((e) => {
           display_element.innerHTML += e;
         });
       }
@@ -284,13 +284,13 @@ class PreloadPlugin implements JsPsychPlugin<Info> {
         this.jsPsych.pluginAPI.preloadImages(images, cb, file_loading_success, file_loading_error);
       };
       if (video.length > 0) {
-        load_video(function () {});
+        load_video(() => {});
       }
       if (audio.length > 0) {
-        load_audio(function () {});
+        load_audio(() => {});
       }
       if (images.length > 0) {
-        load_images(function () {});
+        load_images(() => {});
       }
     }
 

packages/plugin-resize/src/index.ts

@@ -108,7 +108,7 @@ class ResizePlugin implements JsPsychPlugin<Info> {
     };
 
     // listens for the click
-    document.getElementById("jspsych-resize-btn").addEventListener("click", function () {
+    document.getElementById("jspsych-resize-btn").addEventListener("click", () => {
       scale();
       end_trial();
     });
@@ -117,7 +117,7 @@ class ResizePlugin implements JsPsychPlugin<Info> {
     var origin_x, origin_y;
     var cx, cy;
 
-    var mousedownevent = function (e) {
+    var mousedownevent = (e) => {
       e.preventDefault();
       dragging = true;
       origin_x = e.pageX;
@@ -130,7 +130,7 @@ class ResizePlugin implements JsPsychPlugin<Info> {
       .querySelector("#jspsych-resize-handle")
       .addEventListener("mousedown", mousedownevent);
 
-    var mouseupevent = function (e) {
+    var mouseupevent = (e) => {
       dragging = false;
     };
 
@@ -138,7 +138,7 @@ class ResizePlugin implements JsPsychPlugin<Info> {
 
     var scale_div: HTMLDivElement = display_element.querySelector("#jspsych-resize-div");
 
-    var resizeevent = function (e) {
+    var resizeevent = (e) => {
       if (dragging) {
         var dx = e.pageX - origin_x;
         var dy = e.pageY - origin_y;

packages/plugin-same-different-html/src/index.ts

@@ -77,7 +77,7 @@ class SameDifferentHtmlPlugin implements JsPsychPlugin<Info> {
 
     var first_stim_info: { key: string; rt: number };
     if (trial.first_stim_duration > 0) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         showBlankScreen();
       }, trial.first_stim_duration);
     } else {
@@ -97,9 +97,7 @@ class SameDifferentHtmlPlugin implements JsPsychPlugin<Info> {
     const showBlankScreen = () => {
       display_element.innerHTML = "";
 
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(showSecondStim, trial.gap_duration);
-        showSecondStim();
-      }, trial.gap_duration);
     };
 
     const showSecondStim = () => {
@@ -111,7 +109,7 @@ class SameDifferentHtmlPlugin implements JsPsychPlugin<Info> {
       display_element.innerHTML = html;
 
       if (trial.second_stim_duration > 0) {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(() => {
           display_element.querySelector<HTMLElement>(
             ".jspsych-same-different-stimulus"
           ).style.visibility = "hidden";

packages/plugin-same-different-image/src/index.ts

@@ -72,14 +72,18 @@ class SameDifferentImagePlugin implements JsPsychPlugin<Info> {
   constructor(private jsPsych: JsPsych) {}
 
   trial(display_element: HTMLElement, trial: TrialType<Info>) {
+    const showBlankScreen = () => {
+      display_element.innerHTML = "";
+
+      this.jsPsych.pluginAPI.setTimeout(showSecondStim(), trial.gap_duration);
+    };
+
     display_element.innerHTML =
       '<img class="jspsych-same-different-stimulus" src="' + trial.stimuli[0] + '"></img>';
 
     var first_stim_info: { key: string; rt: number };
     if (trial.first_stim_duration > 0) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(showBlankScreen, trial.first_stim_duration);
-        showBlankScreen();
-      }, trial.first_stim_duration);
     } else {
       const afterKeyboardResponse = (info: { key: string; rt: number }) => {
         first_stim_info = info;
@@ -94,14 +98,6 @@ class SameDifferentImagePlugin implements JsPsychPlugin<Info> {
       });
     }
 
-    const showBlankScreen = () => {
-      display_element.innerHTML = "";
-
-      this.jsPsych.pluginAPI.setTimeout(function () {
-        showSecondStim();
-      }, trial.gap_duration);
-    };
-
     const showSecondStim = () => {
       var html =
         '<img class="jspsych-same-different-stimulus" src="' + trial.stimuli[1] + '"></img>';
@@ -113,7 +109,7 @@ class SameDifferentImagePlugin implements JsPsychPlugin<Info> {
       display_element.innerHTML = html;
 
       if (trial.second_stim_duration > 0) {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(() => {
           display_element.querySelector<HTMLElement>(
             ".jspsych-same-different-stimulus"
           ).style.visibility = "hidden";

packages/plugin-serial-reaction-time-mouse/src/index.ts

@@ -105,7 +105,7 @@ class SerialReactionTimeMousePlugin implements JsPsychPlugin<Info> {
         );
       }
       for (var i = 0; i < resp_targets.length; i++) {
-        resp_targets[i].addEventListener("mousedown", function (e) {
+        resp_targets[i].addEventListener("mousedown", (e) => {
           if (startTime == -1) {
             return;
           } else {
@@ -145,9 +145,7 @@ class SerialReactionTimeMousePlugin implements JsPsychPlugin<Info> {
     if (trial.pre_target_duration <= 0) {
       showTarget();
     } else {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(showTarget, trial.pre_target_duration);
-        showTarget();
-      }, trial.pre_target_duration);
     }
 
     //show prompt if there is one

packages/plugin-serial-reaction-time/src/index.ts

@@ -216,9 +216,7 @@ class SerialReactionTimePlugin implements JsPsychPlugin<Info> {
     if (trial.pre_target_duration <= 0) {
       showTarget();
     } else {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(showTarget(), trial.pre_target_duration);
-        showTarget();
-      }, trial.pre_target_duration);
     }
 
     //show prompt if there is one

packages/plugin-survey-multi-select/src/index.ts

@@ -92,9 +92,7 @@ class SurveyMultiSelectPlugin implements JsPsychPlugin<Info> {
   trial(display_element: HTMLElement, trial: TrialType<Info>) {
     var plugin_id_name = "jspsych-survey-multi-select";
     var plugin_id_selector = "#" + plugin_id_name;
-    const _join = function (...args: Array<string | number>) {
+    const _join = (...args: Array<string | number>) => args.join("-");
-      return args.join("-");
-    };
 
     // inject CSS for trial
     var cssstr =
@@ -206,7 +204,7 @@ class SurveyMultiSelectPlugin implements JsPsychPlugin<Info> {
     // then submit the form
     display_element
       .querySelector("#jspsych-survey-multi-select-next")
-      .addEventListener("click", function () {
+      .addEventListener("click", () => {
         for (var i = 0; i < trial.questions.length; i++) {
           if (trial.questions[i].required) {
             if (

packages/plugin-video-button-response/src/index.ts

@@ -222,7 +222,7 @@ class VideoButtonResponsePlugin implements JsPsychPlugin<Info> {
       video_element.src = video_preload_blob;
     }
 
-    video_element.onended = function () {
+    video_element.onended = () => {
       if (trial.trial_ends_after_video) {
         end_trial();
       } else if (!trial.response_allowed_while_playing) {
@@ -236,7 +236,7 @@ class VideoButtonResponsePlugin implements JsPsychPlugin<Info> {
     // before showing and playing, so that the video doesn't automatically show the first frame
     if (trial.start !== null) {
       video_element.pause();
-      video_element.onseeked = function () {
+      video_element.onseeked = () => {
         video_element.style.visibility = "visible";
         video_element.muted = false;
         if (trial.autoplay) {
@@ -244,11 +244,11 @@ class VideoButtonResponsePlugin implements JsPsychPlugin<Info> {
         } else {
           video_element.pause();
         }
-        video_element.onseeked = function () {};
+        video_element.onseeked = () => {};
       };
-      video_element.onplaying = function () {
+      video_element.onplaying = () => {
         video_element.currentTime = trial.start;
-        video_element.onplaying = function () {};
+        video_element.onplaying = () => {};
       };
       // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,
       // change current time, then show/unmute
@@ -258,7 +258,7 @@ class VideoButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     let stopped = false;
     if (trial.stop !== null) {
-      video_element.addEventListener("timeupdate", function (e) {
+      video_element.addEventListener("timeupdate", (e) => {
         var currenttime = video_element.currentTime;
         if (currenttime >= trial.stop) {
           video_element.pause();
@@ -296,7 +296,7 @@ class VideoButtonResponsePlugin implements JsPsychPlugin<Info> {
         .pause();
       display_element.querySelector<HTMLVideoElement>(
         "#jspsych-video-button-response-stimulus"
-      ).onended = function () {};
+      ).onended = () => {};
 
       // gather the data to store for the trial
       var trial_data = {
@@ -361,9 +361,7 @@ class VideoButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
-        end_trial();
-      }, trial.trial_duration);
     }
   }
 }

packages/plugin-video-keyboard-response/src/index.ts

@@ -189,7 +189,7 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     // before showing and playing, so that the video doesn't automatically show the first frame
     if (trial.start !== null) {
       video_element.pause();
-      video_element.onseeked = function () {
+      video_element.onseeked = () => {
         video_element.style.visibility = "visible";
         video_element.muted = false;
         if (trial.autoplay) {
@@ -197,11 +197,11 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         } else {
           video_element.pause();
         }
-        video_element.onseeked = function () {};
+        video_element.onseeked = () => {};
       };
-      video_element.onplaying = function () {
+      video_element.onplaying = () => {
         video_element.currentTime = trial.start;
-        video_element.onplaying = function () {};
+        video_element.onplaying = () => {};
       };
       // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,
       // change current time, then show/unmute
@@ -211,7 +211,7 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     let stopped = false;
     if (trial.stop !== null) {
-      video_element.addEventListener("timeupdate", function (e) {
+      video_element.addEventListener("timeupdate", (e) => {
         var currenttime = video_element.currentTime;
         if (currenttime >= trial.stop) {
           video_element.pause();
@@ -246,7 +246,7 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         .pause();
       display_element.querySelector<HTMLVideoElement>(
         "#jspsych-video-keyboard-response-stimulus"
-      ).onended = function () {};
+      ).onended = () => {};
 
       // gather the data to store for the trial
       var trial_data = {
@@ -263,7 +263,7 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     };
 
     // function to handle responses by the subject
-    var after_response = function (info) {
+    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
       display_element.querySelector("#jspsych-video-keyboard-response-stimulus").className +=
@@ -292,9 +292,7 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
-        end_trial();
-      }, trial.trial_duration);
     }
   }
 }

packages/plugin-video-slider-response/src/index.ts

@@ -270,7 +270,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
       video_element.src = video_preload_blob;
     }
 
-    video_element.onended = function () {
+    video_element.onended = () => {
       if (trial.trial_ends_after_video) {
         end_trial();
       } else if (!trial.response_allowed_while_playing) {
@@ -284,7 +284,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
     // before showing and playing, so that the video doesn't automatically show the first frame
     if (trial.start !== null) {
       video_element.pause();
-      video_element.onseeked = function () {
+      video_element.onseeked = () => {
         video_element.style.visibility = "visible";
         video_element.muted = false;
         if (trial.autoplay) {
@@ -292,11 +292,11 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
         } else {
           video_element.pause();
         }
-        video_element.onseeked = function () {};
+        video_element.onseeked = () => {};
       };
-      video_element.onplaying = function () {
+      video_element.onplaying = () => {
         video_element.currentTime = trial.start;
-        video_element.onplaying = function () {};
+        video_element.onplaying = () => {};
       };
       // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,
       // change current time, then show/unmute
@@ -306,7 +306,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     let stopped = false;
     if (trial.stop !== null) {
-      video_element.addEventListener("timeupdate", function (e) {
+      video_element.addEventListener("timeupdate", (e) => {
         var currenttime = video_element.currentTime;
         if (currenttime >= trial.stop) {
           video_element.pause();
@@ -356,7 +356,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
         .pause();
       display_element.querySelector<HTMLVideoElement>(
         "#jspsych-video-slider-response-stimulus-video"
-      ).onended = function () {};
+      ).onended = () => {};
 
       // gather the data to store for the trial
       var trial_data = {
@@ -376,7 +376,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     display_element
       .querySelector("#jspsych-video-slider-response-next")
-      .addEventListener("click", function () {
+      .addEventListener("click", () => {
         // measure response time
         var endTime = performance.now();
         response.rt = Math.round(endTime - startTime);
@@ -407,9 +407,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
-        end_trial();
-      }, trial.trial_duration);
     }
   }
 }

packages/plugin-virtual-chinrest/src/index.ts

@@ -421,14 +421,14 @@ class VirtualChinrestPlugin implements JsPsychPlugin<Info> {
     function animateBall() {
       window.ball
         .animate(7000)
-        .during(function (pos) {
+        .during((pos) => {
           let moveX = -pos * blindspot_config_data["ballX"];
           window.moveX = moveX;
           let moveY = 0;
           window.ball.attr({ transform: "translate(" + moveX + "," + moveY + ")" }); //jqueryToVanilla: el.getAttribute('');
         })
         .loop(true, false)
-        .after(function () {
+        .after(() => {
           animateBall();
         });
     }

packages/plugin-visual-search-circle/src/index.ts

@@ -191,7 +191,7 @@ class VisualSearchCirclePlugin implements JsPsychPlugin<Info> {
         "px;'></img>";
 
       // wait
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         // after wait is over
         show_search_array();
       }, trial.fixation_duration);
@@ -262,7 +262,7 @@ class VisualSearchCirclePlugin implements JsPsychPlugin<Info> {
       });
 
       if (trial.trial_duration !== null) {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(() => {
           if (!trial_over) {
             this.jsPsych.pluginAPI.cancelKeyboardResponse(key_listener);
 

packages/plugin-webgazer-calibrate/src/index.ts

@@ -124,7 +124,7 @@ class WebgazerCalibratePlugin implements JsPsychPlugin<Info> {
 
       if (trial.calibration_mode == "click") {
         pt_dom.style.cursor = "pointer";
-        pt_dom.addEventListener("click", function () {
+        pt_dom.addEventListener("click", () => {
           next_calibration_point();
         });
       }

packages/plugin-webgazer-init-camera/src/index.ts

@@ -107,7 +107,7 @@ class WebgazerInitCameraPlugin implements JsPsychPlugin<Info> {
         });
       }
 
-      document.querySelector("#jspsych-wg-cont").addEventListener("click", function () {
+      document.querySelector("#jspsych-wg-cont").addEventListener("click", () => {
         if (observer) {
           observer.disconnect();
         }

packages/plugin-webgazer-validate/src/index.ts

@@ -315,7 +315,7 @@ class WebgazerValidatePlugin implements JsPsychPlugin<Info> {
     }
 
     function calculateGazeCentroid(gazeData) {
-      var x_diff_m = gazeData.reduce(function (accumulator, currentValue, index) {
+      var x_diff_m = gazeData.reduce((accumulator, currentValue, index) => {
         accumulator += currentValue.dx;
         if (index == gazeData.length - 1) {
           return accumulator / gazeData.length;
@@ -324,7 +324,7 @@ class WebgazerValidatePlugin implements JsPsychPlugin<Info> {
         }
       }, 0);
 
-      var y_diff_m = gazeData.reduce(function (accumulator, currentValue, index) {
+      var y_diff_m = gazeData.reduce((accumulator, currentValue, index) => {
         accumulator += currentValue.dy;
         if (index == gazeData.length - 1) {
           return accumulator / gazeData.length;
@@ -334,9 +334,7 @@ class WebgazerValidatePlugin implements JsPsychPlugin<Info> {
       }, 0);
 
       var median_distance = median(
-        gazeData.map(function (x) {
+        gazeData.map((x) => Math.sqrt(Math.pow(x.dx - x_diff_m, 2) + Math.pow(x.dy - y_diff_m, 2)))
-          return Math.sqrt(Math.pow(x.dx - x_diff_m, 2) + Math.pow(x.dy - y_diff_m, 2));
-        })
       );
 
       return {
@@ -347,10 +345,8 @@ class WebgazerValidatePlugin implements JsPsychPlugin<Info> {
     }
 
     function calculatePercentInROI(gazeData) {
-      var distances = gazeData.map(function (p) {
+      var distances = gazeData.map((p) => Math.sqrt(Math.pow(p.dx, 2) + Math.pow(p.dy, 2)));
-        return Math.sqrt(Math.pow(p.dx, 2) + Math.pow(p.dy, 2));
+      var sum_in_roi = distances.reduce((accumulator, currentValue) => {
-      });
-      var sum_in_roi = distances.reduce(function (accumulator, currentValue) {
         if (currentValue <= trial.roi_radius) {
           accumulator++;
         }
@@ -371,21 +367,11 @@ class WebgazerValidatePlugin implements JsPsychPlugin<Info> {
           for (var j = 1; j < gazeData[i].length; j++) {
             t_diff.push(gazeData[i][j].t - gazeData[i][j - 1].t);
           }
-          mean_diff.push(
+          mean_diff.push(t_diff.reduce((a, b) => a + b, 0) / t_diff.length);
-            t_diff.reduce(function (a, b) {
-              return a + b;
-            }, 0) / t_diff.length
-          );
         }
       }
       if (mean_diff.length > 0) {
-        return (
+        return 1000 / (mean_diff.reduce((a, b) => a + b, 0) / mean_diff.length);
-          1000 /
-          (mean_diff.reduce(function (a, b) {
-            return a + b;
-          }, 0) /
-            mean_diff.length)
-        );
       } else {
         return null;
       }