@jspsych/plugin-canvas-keyboard-response 2.0.0 → 2.2.0

package/dist/index.browser.js

@@ -1,98 +1,112 @@
 var jsPsychCanvasKeyboardResponse = (function (jspsych) {
   'use strict';
 
-  var _package = {
-    name: "@jspsych/plugin-canvas-keyboard-response",
-    version: "2.0.0",
-    description: "jsPsych plugin for displaying a canvas stimulus and getting a keyboard response",
-    type: "module",
-    main: "dist/index.cjs",
-    exports: {
-      import: "./dist/index.js",
-      require: "./dist/index.cjs"
-    },
-    typings: "dist/index.d.ts",
-    unpkg: "dist/index.browser.min.js",
-    files: [
-      "src",
-      "dist"
-    ],
-    source: "src/index.ts",
-    scripts: {
-      test: "jest  --passWithNoTests",
-      "test:watch": "npm test -- --watch",
-      tsc: "tsc",
-      build: "rollup --config",
-      "build:watch": "npm run build -- --watch"
-    },
-    repository: {
-      type: "git",
-      url: "git+https://github.com/jspsych/jsPsych.git",
-      directory: "packages/plugin-canvas-keyboard-response"
-    },
-    author: "Chris Jungerius, Josh de Leeuw",
-    license: "MIT",
-    bugs: {
-      url: "https://github.com/jspsych/jsPsych/issues"
-    },
-    homepage: "https://www.jspsych.org/latest/plugins/canvas-keyboard-response",
-    peerDependencies: {
-      jspsych: ">=7.1.0"
-    },
-    devDependencies: {
-      "@jspsych/config": "^3.0.0",
-      "@jspsych/test-utils": "^1.2.0"
-    }
-  };
+  var version = "2.2.0";
 
   const info = {
     name: "canvas-keyboard-response",
-    version: _package.version,
+    version,
     parameters: {
+      /** 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")`.
+       */
       stimulus: {
         type: jspsych.ParameterType.FUNCTION,
         default: void 0
       },
+      /** This array contains the key(s) that the participant is allowed to press in order to respond to the stimulus.
+       * Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) -
+       * see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)
+       * and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/)
+       * for more examples. Any key presses that are not listed in the array will be ignored. 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.
+       */
       choices: {
         type: jspsych.ParameterType.KEYS,
         default: "ALL_KEYS"
       },
+      /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention
+       * is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press).
+       */
       prompt: {
         type: jspsych.ParameterType.HTML_STRING,
         default: 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.
+       */
       stimulus_duration: {
         type: jspsych.ParameterType.INT,
         default: null
       },
+      /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the
+       * participant fails to make a response before this timer is reached, the participant's response will be
+       * recorded as null for the trial and the trial will end. If the value of this parameter is null, then the
+       * trial will wait for a response indefinitely.
+       */
       trial_duration: {
         type: jspsych.ParameterType.INT,
         default: null
       },
+      /** If true, then the trial will end whenever the participant makes a response (assuming they make their
+       * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will
+       * continue until the value for `trial_duration` is reached. You can use this parameter to force the participant
+       * to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
+       */
       response_ends_trial: {
         type: jspsych.ParameterType.BOOL,
         default: true
       },
+      /** Array that defines the size of the canvas element in pixels. First value is height, second value is width. */
       canvas_size: {
         type: jspsych.ParameterType.INT,
         array: true,
         default: [500, 500]
+      },
+      /** If true, the response is not registered until the participant releases the key. The response
+       * time (`rt`) still reflects when the key was pressed, and the additional data field
+       * `rt_key_duration` records how long the key was held down. Note that when this is true, the
+       * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at
+       * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the
+       * key is still held, no response is recorded for the trial.
+       */
+      wait_for_key_release: {
+        type: jspsych.ParameterType.BOOL,
+        default: false
       }
     },
     data: {
+      /** Indicates which key the participant pressed. */
       response: {
         type: jspsych.ParameterType.STRING
       },
+      /** The response time in milliseconds for the participant to make a response. The time is measured from
+       * when the stimulus first appears on the screen until the participant's response.
+       */
       rt: {
         type: jspsych.ParameterType.INT
+      },
+      /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */
+      rt_key_duration: {
+        type: jspsych.ParameterType.INT
       }
+    },
+    // prettier-ignore
+    citations: {
+      "apa": "de Leeuw, J. R., Gilbert, R. A., & Luchterhandt, B. (2023). jsPsych: Enabling an Open-Source Collaborative Ecosystem of Behavioral Experiments. Journal of Open Source Software, 8(85), 5351. https://doi.org/10.21105/joss.05351 ",
+      "bibtex": '@article{Leeuw2023jsPsych, 	author = {de Leeuw, Joshua R. and Gilbert, Rebecca A. and Luchterhandt, Bj{\\" o}rn}, 	journal = {Journal of Open Source Software}, 	doi = {10.21105/joss.05351}, 	issn = {2475-9066}, 	number = {85}, 	year = {2023}, 	month = {may 11}, 	pages = {5351}, 	publisher = {Open Journals}, 	title = {jsPsych: Enabling an {Open}-{Source} {Collaborative} {Ecosystem} of {Behavioral} {Experiments}}, 	url = {https://joss.theoj.org/papers/10.21105/joss.05351}, 	volume = {8}, }  '
     }
   };
   class CanvasKeyboardResponsePlugin {
     constructor(jsPsych) {
       this.jsPsych = jsPsych;
     }
-    static info = info;
+    static {
+      this.info = info;
+    }
     trial(display_element, trial) {
       var new_html = '<div id="jspsych-canvas-keyboard-response-stimulus"><canvas id="jspsych-canvas-stimulus" height="' + trial.canvas_size[0] + '" width="' + trial.canvas_size[1] + '"></canvas></div>';
       if (trial.prompt !== null) {
@@ -104,7 +118,8 @@ var jsPsychCanvasKeyboardResponse = (function (jspsych) {
       trial.stimulus(c);
       var response = {
         rt: null,
-        key: null
+        key: null,
+        rt_key_duration: null
       };
       const end_trial = () => {
         if (typeof keyboardListener !== "undefined") {
@@ -112,14 +127,19 @@ var jsPsychCanvasKeyboardResponse = (function (jspsych) {
         }
         var trial_data = {
           rt: response.rt,
-          response: response.key
+          response: response.key,
+          rt_key_duration: response.rt_key_duration
         };
         this.jsPsych.finishTrial(trial_data);
       };
       var after_response = (info2) => {
         display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").className += " responded";
         if (response.key == null) {
-          response = info2;
+          response = {
+            rt: info2.rt,
+            key: info2.key,
+            rt_key_duration: info2.rt_key_duration ?? null
+          };
         }
         if (trial.response_ends_trial) {
           end_trial();
@@ -131,7 +151,8 @@ var jsPsychCanvasKeyboardResponse = (function (jspsych) {
           valid_responses: trial.choices,
           rt_method: "performance",
           persist: false,
-          allow_held_key: false
+          allow_held_key: false,
+          wait_for_key_release: trial.wait_for_key_release
         });
       }
       if (trial.stimulus_duration !== null) {
@@ -172,8 +193,10 @@ var jsPsychCanvasKeyboardResponse = (function (jspsych) {
     create_simulation_data(trial, simulation_options) {
       const default_data = {
         rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
-        response: this.jsPsych.pluginAPI.getValidKey(trial.choices)
+        response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
+        rt_key_duration: null
       };
+      default_data.rt_key_duration = default_data.rt === null || !trial.wait_for_key_release ? null : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);
       const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
       this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
       return data;
@@ -183,4 +206,4 @@ var jsPsychCanvasKeyboardResponse = (function (jspsych) {
   return CanvasKeyboardResponsePlugin;
 
 })(jsPsychModule);
-//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@2.0.0/dist/index.browser.js.map
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@2.2.0/dist/index.browser.js.map

package/dist/index.browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.browser.js","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"canvas-keyboard-response\",\n  version: version,\n  parameters: {\n    /** The function to draw on the canvas. This function automatically takes a canvas element as its only\n     * argument, e.g. `function(c) {...}` or `function drawStim(c) {...}`, where `c` refers to the canvas element.\n     * Note that the stimulus function will still generally need to set the correct context itself, using a line\n     * like `let ctx = c.getContext(\"2d\")`.\n     */\n    stimulus: {\n      type: ParameterType.FUNCTION,\n      default: undefined,\n    },\n    /** This array contains the key(s) that the participant is allowed to press in order to respond to the stimulus.\n     * Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) -\n     * see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)\n     * and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/)\n     * for more examples. Any key presses that are not listed in the array will be ignored. The default value\n     * of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses. Specifying `\"NO_KEYS\"` will mean\n     * that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     * is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus will be set to\n     * `hidden` after this time has elapsed. If this is null, then the stimulus will remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, then the\n     * trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can use this parameter to force the participant\n     * to view a stimulus for a fixed amount of time, even if they respond before the time is complete.\n     */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** Array that defines the size of the canvas element in pixels. First value is height, second value is width. */\n    canvas_size: {\n      type: ParameterType.INT,\n      array: true,\n      default: [500, 500],\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n  },\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin can be used to draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp) and\n * record a keyboard response. The canvas stimulus can be useful for displaying dynamic, parametrically-defined graphics,\n * and for controlling the positioning of multiple graphical elements (shapes, text, images). The stimulus can be\n * displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically\n * if the participant has failed to respond within a fixed length of time.\n *\n * @author Chris Jungerius (modified from Josh de Leeuw)\n * @see {@link https://www.jspsych.org/latest/plugins/canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}\n */\nclass CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html =\n      '<div id=\"jspsych-canvas-keyboard-response-stimulus\">' +\n      '<canvas id=\"jspsych-canvas-stimulus\" height=\"' +\n      trial.canvas_size[0] +\n      '\" width=\"' +\n      trial.canvas_size[1] +\n      '\"></canvas>' +\n      \"</div>\";\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n    let c = document.getElementById(\"jspsych-canvas-stimulus\");\n    c.style.display = \"block\";\n    trial.stimulus(c);\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      if (typeof keyboardListener !== \"undefined\") {\n        this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n      }\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        response: response.key,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-canvas-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = info;\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\") {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n      });\n    }\n\n    // hide stimulus if stimulus_duration is set\n    if (trial.stimulus_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        display_element.querySelector<HTMLElement>(\n          \"#jspsych-canvas-keyboard-response-stimulus\"\n        ).style.visibility = \"hidden\";\n      }, trial.stimulus_duration);\n    }\n\n    // end trial if trial_duration is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        end_trial();\n      }, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    if (data.rt !== null) {\n      this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":["version","ParameterType","info"],"mappings":"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"}
+{"version":3,"file":"index.browser.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-canvas-keyboard-response\",\n  \"version\": \"2.2.0\",\n  \"description\": \"jsPsych plugin for displaying a canvas stimulus and getting a keyboard response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest  --passWithNoTests\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-canvas-keyboard-response\"\n  },\n  \"author\": \"Chris Jungerius, Josh de Leeuw\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/canvas-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.3.4\",\n    \"@jspsych/test-utils\": \"^1.3.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"canvas-keyboard-response\",\n  version: version,\n  parameters: {\n    /** The function to draw on the canvas. This function automatically takes a canvas element as its only\n     * argument, e.g. `function(c) {...}` or `function drawStim(c) {...}`, where `c` refers to the canvas element.\n     * Note that the stimulus function will still generally need to set the correct context itself, using a line\n     * like `let ctx = c.getContext(\"2d\")`.\n     */\n    stimulus: {\n      type: ParameterType.FUNCTION,\n      default: undefined,\n    },\n    /** This array contains the key(s) that the participant is allowed to press in order to respond to the stimulus.\n     * Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) -\n     * see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)\n     * and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/)\n     * for more examples. Any key presses that are not listed in the array will be ignored. The default value\n     * of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses. Specifying `\"NO_KEYS\"` will mean\n     * that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     * is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus will be set to\n     * `hidden` after this time has elapsed. If this is null, then the stimulus will remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, then the\n     * trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can use this parameter to force the participant\n     * to view a stimulus for a fixed amount of time, even if they respond before the time is complete.\n     */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** Array that defines the size of the canvas element in pixels. First value is height, second value is width. */\n    canvas_size: {\n      type: ParameterType.INT,\n      array: true,\n      default: [500, 500],\n    },\n    /** If true, the response is not registered until the participant releases the key. The response\n     * time (`rt`) still reflects when the key was pressed, and the additional data field\n     * `rt_key_duration` records how long the key was held down. Note that when this is true, the\n     * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at\n     * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the\n     * key is still held, no response is recorded for the trial.\n     */\n    wait_for_key_release: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */\n    rt_key_duration: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin can be used to draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp) and\n * record a keyboard response. The canvas stimulus can be useful for displaying dynamic, parametrically-defined graphics,\n * and for controlling the positioning of multiple graphical elements (shapes, text, images). The stimulus can be\n * displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically\n * if the participant has failed to respond within a fixed length of time.\n *\n * @author Chris Jungerius (modified from Josh de Leeuw)\n * @see {@link https://www.jspsych.org/latest/plugins/canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}\n */\nclass CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html =\n      '<div id=\"jspsych-canvas-keyboard-response-stimulus\">' +\n      '<canvas id=\"jspsych-canvas-stimulus\" height=\"' +\n      trial.canvas_size[0] +\n      '\" width=\"' +\n      trial.canvas_size[1] +\n      '\"></canvas>' +\n      \"</div>\";\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n    let c = document.getElementById(\"jspsych-canvas-stimulus\");\n    c.style.display = \"block\";\n    trial.stimulus(c);\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n      rt_key_duration: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      if (typeof keyboardListener !== \"undefined\") {\n        this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n      }\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        response: response.key,\n        rt_key_duration: response.rt_key_duration,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-canvas-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = {\n          rt: info.rt,\n          key: info.key,\n          rt_key_duration: info.rt_key_duration ?? null,\n        };\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\") {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n        wait_for_key_release: trial.wait_for_key_release,\n      });\n    }\n\n    // hide stimulus if stimulus_duration is set\n    if (trial.stimulus_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        display_element.querySelector<HTMLElement>(\n          \"#jspsych-canvas-keyboard-response-stimulus\"\n        ).style.visibility = \"hidden\";\n      }, trial.stimulus_duration);\n    }\n\n    // end trial if trial_duration is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        end_trial();\n      }, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    if (data.rt !== null) {\n      this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n      rt_key_duration: null,\n    };\n    default_data.rt_key_duration =\n      default_data.rt === null || !trial.wait_for_key_release\n        ? null\n        : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":[],"mappings":";;;EAEE,IAAA,OAAA,GAAW,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IC8FA,SAAA,EAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.browser.min.js

@@ -1,2 +1,2 @@
-var jsPsychCanvasKeyboardResponse=function(i){"use strict";var c={name:"@jspsych/plugin-canvas-keyboard-response",version:"2.0.0",description:"jsPsych plugin for displaying a canvas stimulus and getting a keyboard response",type:"module",main:"dist/index.cjs",exports:{import:"./dist/index.js",require:"./dist/index.cjs"},typings:"dist/index.d.ts",unpkg:"dist/index.browser.min.js",files:["src","dist"],source:"src/index.ts",scripts:{test:"jest  --passWithNoTests","test:watch":"npm test -- --watch",tsc:"tsc",build:"rollup --config","build:watch":"npm run build -- --watch"},repository:{type:"git",url:"git+https://github.com/jspsych/jsPsych.git",directory:"packages/plugin-canvas-keyboard-response"},author:"Chris Jungerius, Josh de Leeuw",license:"MIT",bugs:{url:"https://github.com/jspsych/jsPsych/issues"},homepage:"https://www.jspsych.org/latest/plugins/canvas-keyboard-response",peerDependencies:{jspsych:">=7.1.0"},devDependencies:{"@jspsych/config":"^3.0.0","@jspsych/test-utils":"^1.2.0"}};const p={name:"canvas-keyboard-response",version:c.version,parameters:{stimulus:{type:i.ParameterType.FUNCTION,default:void 0},choices:{type:i.ParameterType.KEYS,default:"ALL_KEYS"},prompt:{type:i.ParameterType.HTML_STRING,default:null},stimulus_duration:{type:i.ParameterType.INT,default:null},trial_duration:{type:i.ParameterType.INT,default:null},response_ends_trial:{type:i.ParameterType.BOOL,default:!0},canvas_size:{type:i.ParameterType.INT,array:!0,default:[500,500]}},data:{response:{type:i.ParameterType.STRING},rt:{type:i.ParameterType.INT}}};class l{constructor(e){this.jsPsych=e}trial(e,s){var a='<div id="jspsych-canvas-keyboard-response-stimulus"><canvas id="jspsych-canvas-stimulus" height="'+s.canvas_size[0]+'" width="'+s.canvas_size[1]+'"></canvas></div>';s.prompt!==null&&(a+=s.prompt),e.innerHTML=a;let t=document.getElementById("jspsych-canvas-stimulus");t.style.display="block",s.stimulus(t);var n={rt:null,key:null};const u=()=>{typeof o!="undefined"&&this.jsPsych.pluginAPI.cancelKeyboardResponse(o);var r={rt:n.rt,response:n.key};this.jsPsych.finishTrial(r)};var d=r=>{e.querySelector("#jspsych-canvas-keyboard-response-stimulus").className+=" responded",n.key==null&&(n=r),s.response_ends_trial&&u()};if(s.choices!="NO_KEYS")var o=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:d,valid_responses:s.choices,rt_method:"performance",persist:!1,allow_held_key:!1});s.stimulus_duration!==null&&this.jsPsych.pluginAPI.setTimeout(()=>{e.querySelector("#jspsych-canvas-keyboard-response-stimulus").style.visibility="hidden"},s.stimulus_duration),s.trial_duration!==null&&this.jsPsych.pluginAPI.setTimeout(()=>{u()},s.trial_duration)}simulate(e,s,a,t){s=="data-only"&&(t(),this.simulate_data_only(e,a)),s=="visual"&&this.simulate_visual(e,a,t)}simulate_data_only(e,s){const a=this.create_simulation_data(e,s);this.jsPsych.finishTrial(a)}simulate_visual(e,s,a){const t=this.create_simulation_data(e,s),n=this.jsPsych.getDisplayElement();this.trial(n,e),a(),t.rt!==null&&this.jsPsych.pluginAPI.pressKey(t.response,t.rt)}create_simulation_data(e,s){const a={rt:this.jsPsych.randomization.sampleExGaussian(500,50,.006666666666666667,!0),response:this.jsPsych.pluginAPI.getValidKey(e.choices)},t=this.jsPsych.pluginAPI.mergeSimulationData(a,s);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(e,t),t}}return l.info=p,l}(jsPsychModule);
-//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@2.0.0/dist/index.browser.min.js.map
+var jsPsychCanvasKeyboardResponse=(function(r){"use strict";var c="2.2.0";const p={name:"canvas-keyboard-response",version:c,parameters:{stimulus:{type:r.ParameterType.FUNCTION,default:void 0},choices:{type:r.ParameterType.KEYS,default:"ALL_KEYS"},prompt:{type:r.ParameterType.HTML_STRING,default:null},stimulus_duration:{type:r.ParameterType.INT,default:null},trial_duration:{type:r.ParameterType.INT,default:null},response_ends_trial:{type:r.ParameterType.BOOL,default:!0},canvas_size:{type:r.ParameterType.INT,array:!0,default:[500,500]},wait_for_key_release:{type:r.ParameterType.BOOL,default:!1}},data:{response:{type:r.ParameterType.STRING},rt:{type:r.ParameterType.INT},rt_key_duration:{type:r.ParameterType.INT}},citations:{apa:"de Leeuw, J. R., Gilbert, R. A., & Luchterhandt, B. (2023). jsPsych: Enabling an Open-Source Collaborative Ecosystem of Behavioral Experiments. Journal of Open Source Software, 8(85), 5351. https://doi.org/10.21105/joss.05351 ",bibtex:'@article{Leeuw2023jsPsych, 	author = {de Leeuw, Joshua R. and Gilbert, Rebecca A. and Luchterhandt, Bj{\\" o}rn}, 	journal = {Journal of Open Source Software}, 	doi = {10.21105/joss.05351}, 	issn = {2475-9066}, 	number = {85}, 	year = {2023}, 	month = {may 11}, 	pages = {5351}, 	publisher = {Open Journals}, 	title = {jsPsych: Enabling an {Open}-{Source} {Collaborative} {Ecosystem} of {Behavioral} {Experiments}}, 	url = {https://joss.theoj.org/papers/10.21105/joss.05351}, 	volume = {8}, }  '}};class l{constructor(t){this.jsPsych=t}trial(t,e){var a='<div id="jspsych-canvas-keyboard-response-stimulus"><canvas id="jspsych-canvas-stimulus" height="'+e.canvas_size[0]+'" width="'+e.canvas_size[1]+'"></canvas></div>';e.prompt!==null&&(a+=e.prompt),t.innerHTML=a;let s=document.getElementById("jspsych-canvas-stimulus");s.style.display="block",e.stimulus(s);var i={rt:null,key:null,rt_key_duration:null};const o=()=>{typeof u!="undefined"&&this.jsPsych.pluginAPI.cancelKeyboardResponse(u);var n={rt:i.rt,response:i.key,rt_key_duration:i.rt_key_duration};this.jsPsych.finishTrial(n)};var d=n=>{var y;t.querySelector("#jspsych-canvas-keyboard-response-stimulus").className+=" responded",i.key==null&&(i={rt:n.rt,key:n.key,rt_key_duration:(y=n.rt_key_duration)!=null?y:null}),e.response_ends_trial&&o()};if(e.choices!="NO_KEYS")var u=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:d,valid_responses:e.choices,rt_method:"performance",persist:!1,allow_held_key:!1,wait_for_key_release:e.wait_for_key_release});e.stimulus_duration!==null&&this.jsPsych.pluginAPI.setTimeout(()=>{t.querySelector("#jspsych-canvas-keyboard-response-stimulus").style.visibility="hidden"},e.stimulus_duration),e.trial_duration!==null&&this.jsPsych.pluginAPI.setTimeout(()=>{o()},e.trial_duration)}simulate(t,e,a,s){e=="data-only"&&(s(),this.simulate_data_only(t,a)),e=="visual"&&this.simulate_visual(t,a,s)}simulate_data_only(t,e){const a=this.create_simulation_data(t,e);this.jsPsych.finishTrial(a)}simulate_visual(t,e,a){const s=this.create_simulation_data(t,e),i=this.jsPsych.getDisplayElement();this.trial(i,t),a(),s.rt!==null&&this.jsPsych.pluginAPI.pressKey(s.response,s.rt)}create_simulation_data(t,e){const a={rt:this.jsPsych.randomization.sampleExGaussian(500,50,.006666666666666667,!0),response:this.jsPsych.pluginAPI.getValidKey(t.choices),rt_key_duration:null};a.rt_key_duration=a.rt===null||!t.wait_for_key_release?null:this.jsPsych.randomization.sampleExGaussian(150,30,.01,!0);const s=this.jsPsych.pluginAPI.mergeSimulationData(a,e);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(t,s),s}}return l.info=p,l})(jsPsychModule);
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@2.2.0/dist/index.browser.min.js.map

package/dist/index.browser.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.browser.min.js","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"canvas-keyboard-response\",\n  version: version,\n  parameters: {\n    /** The function to draw on the canvas. This function automatically takes a canvas element as its only\n     * argument, e.g. `function(c) {...}` or `function drawStim(c) {...}`, where `c` refers to the canvas element.\n     * Note that the stimulus function will still generally need to set the correct context itself, using a line\n     * like `let ctx = c.getContext(\"2d\")`.\n     */\n    stimulus: {\n      type: ParameterType.FUNCTION,\n      default: undefined,\n    },\n    /** This array contains the key(s) that the participant is allowed to press in order to respond to the stimulus.\n     * Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) -\n     * see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)\n     * and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/)\n     * for more examples. Any key presses that are not listed in the array will be ignored. The default value\n     * of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses. Specifying `\"NO_KEYS\"` will mean\n     * that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     * is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus will be set to\n     * `hidden` after this time has elapsed. If this is null, then the stimulus will remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, then the\n     * trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can use this parameter to force the participant\n     * to view a stimulus for a fixed amount of time, even if they respond before the time is complete.\n     */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** Array that defines the size of the canvas element in pixels. First value is height, second value is width. */\n    canvas_size: {\n      type: ParameterType.INT,\n      array: true,\n      default: [500, 500],\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n  },\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin can be used to draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp) and\n * record a keyboard response. The canvas stimulus can be useful for displaying dynamic, parametrically-defined graphics,\n * and for controlling the positioning of multiple graphical elements (shapes, text, images). The stimulus can be\n * displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically\n * if the participant has failed to respond within a fixed length of time.\n *\n * @author Chris Jungerius (modified from Josh de Leeuw)\n * @see {@link https://www.jspsych.org/latest/plugins/canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}\n */\nclass CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html =\n      '<div id=\"jspsych-canvas-keyboard-response-stimulus\">' +\n      '<canvas id=\"jspsych-canvas-stimulus\" height=\"' +\n      trial.canvas_size[0] +\n      '\" width=\"' +\n      trial.canvas_size[1] +\n      '\"></canvas>' +\n      \"</div>\";\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n    let c = document.getElementById(\"jspsych-canvas-stimulus\");\n    c.style.display = \"block\";\n    trial.stimulus(c);\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      if (typeof keyboardListener !== \"undefined\") {\n        this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n      }\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        response: response.key,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-canvas-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = info;\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\") {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n      });\n    }\n\n    // hide stimulus if stimulus_duration is set\n    if (trial.stimulus_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        display_element.querySelector<HTMLElement>(\n          \"#jspsych-canvas-keyboard-response-stimulus\"\n        ).style.visibility = \"hidden\";\n      }, trial.stimulus_duration);\n    }\n\n    // end trial if trial_duration is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        end_trial();\n      }, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    if (data.rt !== null) {\n      this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":["info","version","ParameterType","CanvasKeyboardResponsePlugin","jsPsych","display_element","trial","new_html","c","response","end_trial","keyboardListener","trial_data","after_response","simulation_mode","simulation_options","load_callback","data","default_data"],"mappings":"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"}
+{"version":3,"file":"index.browser.min.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-canvas-keyboard-response\",\n  \"version\": \"2.2.0\",\n  \"description\": \"jsPsych plugin for displaying a canvas stimulus and getting a keyboard response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest  --passWithNoTests\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-canvas-keyboard-response\"\n  },\n  \"author\": \"Chris Jungerius, Josh de Leeuw\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/canvas-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.3.4\",\n    \"@jspsych/test-utils\": \"^1.3.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"canvas-keyboard-response\",\n  version: version,\n  parameters: {\n    /** The function to draw on the canvas. This function automatically takes a canvas element as its only\n     * argument, e.g. `function(c) {...}` or `function drawStim(c) {...}`, where `c` refers to the canvas element.\n     * Note that the stimulus function will still generally need to set the correct context itself, using a line\n     * like `let ctx = c.getContext(\"2d\")`.\n     */\n    stimulus: {\n      type: ParameterType.FUNCTION,\n      default: undefined,\n    },\n    /** This array contains the key(s) that the participant is allowed to press in order to respond to the stimulus.\n     * Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) -\n     * see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)\n     * and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/)\n     * for more examples. Any key presses that are not listed in the array will be ignored. The default value\n     * of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses. Specifying `\"NO_KEYS\"` will mean\n     * that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     * is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus will be set to\n     * `hidden` after this time has elapsed. If this is null, then the stimulus will remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, then the\n     * trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can use this parameter to force the participant\n     * to view a stimulus for a fixed amount of time, even if they respond before the time is complete.\n     */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** Array that defines the size of the canvas element in pixels. First value is height, second value is width. */\n    canvas_size: {\n      type: ParameterType.INT,\n      array: true,\n      default: [500, 500],\n    },\n    /** If true, the response is not registered until the participant releases the key. The response\n     * time (`rt`) still reflects when the key was pressed, and the additional data field\n     * `rt_key_duration` records how long the key was held down. Note that when this is true, the\n     * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at\n     * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the\n     * key is still held, no response is recorded for the trial.\n     */\n    wait_for_key_release: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */\n    rt_key_duration: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin can be used to draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp) and\n * record a keyboard response. The canvas stimulus can be useful for displaying dynamic, parametrically-defined graphics,\n * and for controlling the positioning of multiple graphical elements (shapes, text, images). The stimulus can be\n * displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically\n * if the participant has failed to respond within a fixed length of time.\n *\n * @author Chris Jungerius (modified from Josh de Leeuw)\n * @see {@link https://www.jspsych.org/latest/plugins/canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}\n */\nclass CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html =\n      '<div id=\"jspsych-canvas-keyboard-response-stimulus\">' +\n      '<canvas id=\"jspsych-canvas-stimulus\" height=\"' +\n      trial.canvas_size[0] +\n      '\" width=\"' +\n      trial.canvas_size[1] +\n      '\"></canvas>' +\n      \"</div>\";\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n    let c = document.getElementById(\"jspsych-canvas-stimulus\");\n    c.style.display = \"block\";\n    trial.stimulus(c);\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n      rt_key_duration: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      if (typeof keyboardListener !== \"undefined\") {\n        this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n      }\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        response: response.key,\n        rt_key_duration: response.rt_key_duration,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-canvas-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = {\n          rt: info.rt,\n          key: info.key,\n          rt_key_duration: info.rt_key_duration ?? null,\n        };\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\") {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n        wait_for_key_release: trial.wait_for_key_release,\n      });\n    }\n\n    // hide stimulus if stimulus_duration is set\n    if (trial.stimulus_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        display_element.querySelector<HTMLElement>(\n          \"#jspsych-canvas-keyboard-response-stimulus\"\n        ).style.visibility = \"hidden\";\n      }, trial.stimulus_duration);\n    }\n\n    // end trial if trial_duration is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        end_trial();\n      }, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    if (data.rt !== null) {\n      this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n      rt_key_duration: null,\n    };\n    default_data.rt_key_duration =\n      default_data.rt === null || !trial.wait_for_key_release\n        ? null\n        : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":["version","_a"],"mappings":"4DACE,IACAA,EAAW,+oBC8FA,UAAA,iuBAAe,ulBAhG5B,IAAAC"}

package/dist/index.cjs

@@ -2,97 +2,112 @@
 
 var jspsych = require('jspsych');
 
-var _package = {
-  name: "@jspsych/plugin-canvas-keyboard-response",
-  version: "2.0.0",
-  description: "jsPsych plugin for displaying a canvas stimulus and getting a keyboard response",
-  type: "module",
-  main: "dist/index.cjs",
-  exports: {
-    import: "./dist/index.js",
-    require: "./dist/index.cjs"
-  },
-  typings: "dist/index.d.ts",
-  unpkg: "dist/index.browser.min.js",
-  files: [
-    "src",
-    "dist"
-  ],
-  source: "src/index.ts",
-  scripts: {
-    test: "jest  --passWithNoTests",
-    "test:watch": "npm test -- --watch",
-    tsc: "tsc",
-    build: "rollup --config",
-    "build:watch": "npm run build -- --watch"
-  },
-  repository: {
-    type: "git",
-    url: "git+https://github.com/jspsych/jsPsych.git",
-    directory: "packages/plugin-canvas-keyboard-response"
-  },
-  author: "Chris Jungerius, Josh de Leeuw",
-  license: "MIT",
-  bugs: {
-    url: "https://github.com/jspsych/jsPsych/issues"
-  },
-  homepage: "https://www.jspsych.org/latest/plugins/canvas-keyboard-response",
-  peerDependencies: {
-    jspsych: ">=7.1.0"
-  },
-  devDependencies: {
-    "@jspsych/config": "^3.0.0",
-    "@jspsych/test-utils": "^1.2.0"
-  }
-};
+var version = "2.2.0";
 
 const info = {
   name: "canvas-keyboard-response",
-  version: _package.version,
+  version,
   parameters: {
+    /** 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")`.
+     */
     stimulus: {
       type: jspsych.ParameterType.FUNCTION,
       default: void 0
     },
+    /** This array contains the key(s) that the participant is allowed to press in order to respond to the stimulus.
+     * Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) -
+     * see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)
+     * and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/)
+     * for more examples. Any key presses that are not listed in the array will be ignored. 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.
+     */
     choices: {
       type: jspsych.ParameterType.KEYS,
       default: "ALL_KEYS"
     },
+    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention
+     * is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press).
+     */
     prompt: {
       type: jspsych.ParameterType.HTML_STRING,
       default: 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.
+     */
     stimulus_duration: {
       type: jspsych.ParameterType.INT,
       default: null
     },
+    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the
+     * participant fails to make a response before this timer is reached, the participant's response will be
+     * recorded as null for the trial and the trial will end. If the value of this parameter is null, then the
+     * trial will wait for a response indefinitely.
+     */
     trial_duration: {
       type: jspsych.ParameterType.INT,
       default: null
     },
+    /** If true, then the trial will end whenever the participant makes a response (assuming they make their
+     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will
+     * continue until the value for `trial_duration` is reached. You can use this parameter to force the participant
+     * to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
+     */
     response_ends_trial: {
       type: jspsych.ParameterType.BOOL,
       default: true
     },
+    /** Array that defines the size of the canvas element in pixels. First value is height, second value is width. */
     canvas_size: {
       type: jspsych.ParameterType.INT,
       array: true,
       default: [500, 500]
+    },
+    /** If true, the response is not registered until the participant releases the key. The response
+     * time (`rt`) still reflects when the key was pressed, and the additional data field
+     * `rt_key_duration` records how long the key was held down. Note that when this is true, the
+     * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at
+     * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the
+     * key is still held, no response is recorded for the trial.
+     */
+    wait_for_key_release: {
+      type: jspsych.ParameterType.BOOL,
+      default: false
     }
   },
   data: {
+    /** Indicates which key the participant pressed. */
     response: {
       type: jspsych.ParameterType.STRING
     },
+    /** The response time in milliseconds for the participant to make a response. The time is measured from
+     * when the stimulus first appears on the screen until the participant's response.
+     */
     rt: {
       type: jspsych.ParameterType.INT
+    },
+    /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */
+    rt_key_duration: {
+      type: jspsych.ParameterType.INT
     }
+  },
+  // prettier-ignore
+  citations: {
+    "apa": "de Leeuw, J. R., Gilbert, R. A., & Luchterhandt, B. (2023). jsPsych: Enabling an Open-Source Collaborative Ecosystem of Behavioral Experiments. Journal of Open Source Software, 8(85), 5351. https://doi.org/10.21105/joss.05351 ",
+    "bibtex": '@article{Leeuw2023jsPsych, 	author = {de Leeuw, Joshua R. and Gilbert, Rebecca A. and Luchterhandt, Bj{\\" o}rn}, 	journal = {Journal of Open Source Software}, 	doi = {10.21105/joss.05351}, 	issn = {2475-9066}, 	number = {85}, 	year = {2023}, 	month = {may 11}, 	pages = {5351}, 	publisher = {Open Journals}, 	title = {jsPsych: Enabling an {Open}-{Source} {Collaborative} {Ecosystem} of {Behavioral} {Experiments}}, 	url = {https://joss.theoj.org/papers/10.21105/joss.05351}, 	volume = {8}, }  '
   }
 };
 class CanvasKeyboardResponsePlugin {
   constructor(jsPsych) {
     this.jsPsych = jsPsych;
   }
+  static {
+    this.info = info;
+  }
   trial(display_element, trial) {
     var new_html = '<div id="jspsych-canvas-keyboard-response-stimulus"><canvas id="jspsych-canvas-stimulus" height="' + trial.canvas_size[0] + '" width="' + trial.canvas_size[1] + '"></canvas></div>';
     if (trial.prompt !== null) {
@@ -104,7 +119,8 @@ class CanvasKeyboardResponsePlugin {
     trial.stimulus(c);
     var response = {
       rt: null,
-      key: null
+      key: null,
+      rt_key_duration: null
     };
     const end_trial = () => {
       if (typeof keyboardListener !== "undefined") {
@@ -112,14 +128,19 @@ class CanvasKeyboardResponsePlugin {
       }
       var trial_data = {
         rt: response.rt,
-        response: response.key
+        response: response.key,
+        rt_key_duration: response.rt_key_duration
       };
       this.jsPsych.finishTrial(trial_data);
     };
     var after_response = (info2) => {
       display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").className += " responded";
       if (response.key == null) {
-        response = info2;
+        response = {
+          rt: info2.rt,
+          key: info2.key,
+          rt_key_duration: info2.rt_key_duration ?? null
+        };
       }
       if (trial.response_ends_trial) {
         end_trial();
@@ -131,7 +152,8 @@ class CanvasKeyboardResponsePlugin {
         valid_responses: trial.choices,
         rt_method: "performance",
         persist: false,
-        allow_held_key: false
+        allow_held_key: false,
+        wait_for_key_release: trial.wait_for_key_release
       });
     }
     if (trial.stimulus_duration !== null) {
@@ -172,14 +194,15 @@ class CanvasKeyboardResponsePlugin {
   create_simulation_data(trial, simulation_options) {
     const default_data = {
       rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
-      response: this.jsPsych.pluginAPI.getValidKey(trial.choices)
+      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
+      rt_key_duration: null
     };
+    default_data.rt_key_duration = default_data.rt === null || !trial.wait_for_key_release ? null : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);
     const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
     this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
     return data;
   }
 }
-CanvasKeyboardResponsePlugin.info = info;
 
 module.exports = CanvasKeyboardResponsePlugin;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"canvas-keyboard-response\",\n  version: version,\n  parameters: {\n    /** The function to draw on the canvas. This function automatically takes a canvas element as its only\n     * argument, e.g. `function(c) {...}` or `function drawStim(c) {...}`, where `c` refers to the canvas element.\n     * Note that the stimulus function will still generally need to set the correct context itself, using a line\n     * like `let ctx = c.getContext(\"2d\")`.\n     */\n    stimulus: {\n      type: ParameterType.FUNCTION,\n      default: undefined,\n    },\n    /** This array contains the key(s) that the participant is allowed to press in order to respond to the stimulus.\n     * Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) -\n     * see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)\n     * and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/)\n     * for more examples. Any key presses that are not listed in the array will be ignored. The default value\n     * of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses. Specifying `\"NO_KEYS\"` will mean\n     * that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     * is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus will be set to\n     * `hidden` after this time has elapsed. If this is null, then the stimulus will remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, then the\n     * trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can use this parameter to force the participant\n     * to view a stimulus for a fixed amount of time, even if they respond before the time is complete.\n     */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** Array that defines the size of the canvas element in pixels. First value is height, second value is width. */\n    canvas_size: {\n      type: ParameterType.INT,\n      array: true,\n      default: [500, 500],\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n  },\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin can be used to draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp) and\n * record a keyboard response. The canvas stimulus can be useful for displaying dynamic, parametrically-defined graphics,\n * and for controlling the positioning of multiple graphical elements (shapes, text, images). The stimulus can be\n * displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically\n * if the participant has failed to respond within a fixed length of time.\n *\n * @author Chris Jungerius (modified from Josh de Leeuw)\n * @see {@link https://www.jspsych.org/latest/plugins/canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}\n */\nclass CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html =\n      '<div id=\"jspsych-canvas-keyboard-response-stimulus\">' +\n      '<canvas id=\"jspsych-canvas-stimulus\" height=\"' +\n      trial.canvas_size[0] +\n      '\" width=\"' +\n      trial.canvas_size[1] +\n      '\"></canvas>' +\n      \"</div>\";\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n    let c = document.getElementById(\"jspsych-canvas-stimulus\");\n    c.style.display = \"block\";\n    trial.stimulus(c);\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      if (typeof keyboardListener !== \"undefined\") {\n        this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n      }\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        response: response.key,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-canvas-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = info;\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\") {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n      });\n    }\n\n    // hide stimulus if stimulus_duration is set\n    if (trial.stimulus_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        display_element.querySelector<HTMLElement>(\n          \"#jspsych-canvas-keyboard-response-stimulus\"\n        ).style.visibility = \"hidden\";\n      }, trial.stimulus_duration);\n    }\n\n    // end trial if trial_duration is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        end_trial();\n      }, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    if (data.rt !== null) {\n      this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":["version","ParameterType","info"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-canvas-keyboard-response\",\n  \"version\": \"2.2.0\",\n  \"description\": \"jsPsych plugin for displaying a canvas stimulus and getting a keyboard response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest  --passWithNoTests\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-canvas-keyboard-response\"\n  },\n  \"author\": \"Chris Jungerius, Josh de Leeuw\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/canvas-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.3.4\",\n    \"@jspsych/test-utils\": \"^1.3.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"canvas-keyboard-response\",\n  version: version,\n  parameters: {\n    /** The function to draw on the canvas. This function automatically takes a canvas element as its only\n     * argument, e.g. `function(c) {...}` or `function drawStim(c) {...}`, where `c` refers to the canvas element.\n     * Note that the stimulus function will still generally need to set the correct context itself, using a line\n     * like `let ctx = c.getContext(\"2d\")`.\n     */\n    stimulus: {\n      type: ParameterType.FUNCTION,\n      default: undefined,\n    },\n    /** This array contains the key(s) that the participant is allowed to press in order to respond to the stimulus.\n     * Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) -\n     * see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)\n     * and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/)\n     * for more examples. Any key presses that are not listed in the array will be ignored. The default value\n     * of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses. Specifying `\"NO_KEYS\"` will mean\n     * that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     * is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus will be set to\n     * `hidden` after this time has elapsed. If this is null, then the stimulus will remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, then the\n     * trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can use this parameter to force the participant\n     * to view a stimulus for a fixed amount of time, even if they respond before the time is complete.\n     */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** Array that defines the size of the canvas element in pixels. First value is height, second value is width. */\n    canvas_size: {\n      type: ParameterType.INT,\n      array: true,\n      default: [500, 500],\n    },\n    /** If true, the response is not registered until the participant releases the key. The response\n     * time (`rt`) still reflects when the key was pressed, and the additional data field\n     * `rt_key_duration` records how long the key was held down. Note that when this is true, the\n     * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at\n     * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the\n     * key is still held, no response is recorded for the trial.\n     */\n    wait_for_key_release: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */\n    rt_key_duration: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin can be used to draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp) and\n * record a keyboard response. The canvas stimulus can be useful for displaying dynamic, parametrically-defined graphics,\n * and for controlling the positioning of multiple graphical elements (shapes, text, images). The stimulus can be\n * displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically\n * if the participant has failed to respond within a fixed length of time.\n *\n * @author Chris Jungerius (modified from Josh de Leeuw)\n * @see {@link https://www.jspsych.org/latest/plugins/canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}\n */\nclass CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html =\n      '<div id=\"jspsych-canvas-keyboard-response-stimulus\">' +\n      '<canvas id=\"jspsych-canvas-stimulus\" height=\"' +\n      trial.canvas_size[0] +\n      '\" width=\"' +\n      trial.canvas_size[1] +\n      '\"></canvas>' +\n      \"</div>\";\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n    let c = document.getElementById(\"jspsych-canvas-stimulus\");\n    c.style.display = \"block\";\n    trial.stimulus(c);\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n      rt_key_duration: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      if (typeof keyboardListener !== \"undefined\") {\n        this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n      }\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        response: response.key,\n        rt_key_duration: response.rt_key_duration,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-canvas-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = {\n          rt: info.rt,\n          key: info.key,\n          rt_key_duration: info.rt_key_duration ?? null,\n        };\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\") {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n        wait_for_key_release: trial.wait_for_key_release,\n      });\n    }\n\n    // hide stimulus if stimulus_duration is set\n    if (trial.stimulus_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        display_element.querySelector<HTMLElement>(\n          \"#jspsych-canvas-keyboard-response-stimulus\"\n        ).style.visibility = \"hidden\";\n      }, trial.stimulus_duration);\n    }\n\n    // end trial if trial_duration is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        end_trial();\n      }, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    if (data.rt !== null) {\n      this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n      rt_key_duration: null,\n    };\n    default_data.rt_key_duration =\n      default_data.rt === null || !trial.wait_for_key_release\n        ? null\n        : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":[],"mappings":";;;;AAEE,IAAA,OAAA,GAAW,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EC8FA,SAAA,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -63,6 +63,17 @@ declare const info: {
             readonly array: true;
             readonly default: readonly [500, 500];
         };
+        /** If true, the response is not registered until the participant releases the key. The response
+         * time (`rt`) still reflects when the key was pressed, and the additional data field
+         * `rt_key_duration` records how long the key was held down. Note that when this is true, the
+         * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at
+         * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the
+         * key is still held, no response is recorded for the trial.
+         */
+        readonly wait_for_key_release: {
+            readonly type: ParameterType.BOOL;
+            readonly default: false;
+        };
     };
     readonly data: {
         /** Indicates which key the participant pressed. */
@@ -75,7 +86,12 @@ declare const info: {
         readonly rt: {
             readonly type: ParameterType.INT;
         };
+        /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */
+        readonly rt_key_duration: {
+            readonly type: ParameterType.INT;
+        };
     };
+    readonly citations: "__CITATIONS__";
 };
 type Info = typeof info;
 /**
@@ -153,6 +169,17 @@ declare class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
                 readonly array: true;
                 readonly default: readonly [500, 500];
             };
+            /** If true, the response is not registered until the participant releases the key. The response
+             * time (`rt`) still reflects when the key was pressed, and the additional data field
+             * `rt_key_duration` records how long the key was held down. Note that when this is true, the
+             * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at
+             * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the
+             * key is still held, no response is recorded for the trial.
+             */
+            readonly wait_for_key_release: {
+                readonly type: ParameterType.BOOL;
+                readonly default: false;
+            };
         };
         readonly data: {
             /** Indicates which key the participant pressed. */
@@ -165,7 +192,12 @@ declare class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
             readonly rt: {
                 readonly type: ParameterType.INT;
             };
+            /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */
+            readonly rt_key_duration: {
+                readonly type: ParameterType.INT;
+            };
         };
+        readonly citations: "__CITATIONS__";
     };
     constructor(jsPsych: JsPsych);
     trial(display_element: HTMLElement, trial: TrialType<Info>): void;

package/dist/index.js

@@ -1,96 +1,111 @@
 import { ParameterType } from 'jspsych';
 
-var _package = {
-  name: "@jspsych/plugin-canvas-keyboard-response",
-  version: "2.0.0",
-  description: "jsPsych plugin for displaying a canvas stimulus and getting a keyboard response",
-  type: "module",
-  main: "dist/index.cjs",
-  exports: {
-    import: "./dist/index.js",
-    require: "./dist/index.cjs"
-  },
-  typings: "dist/index.d.ts",
-  unpkg: "dist/index.browser.min.js",
-  files: [
-    "src",
-    "dist"
-  ],
-  source: "src/index.ts",
-  scripts: {
-    test: "jest  --passWithNoTests",
-    "test:watch": "npm test -- --watch",
-    tsc: "tsc",
-    build: "rollup --config",
-    "build:watch": "npm run build -- --watch"
-  },
-  repository: {
-    type: "git",
-    url: "git+https://github.com/jspsych/jsPsych.git",
-    directory: "packages/plugin-canvas-keyboard-response"
-  },
-  author: "Chris Jungerius, Josh de Leeuw",
-  license: "MIT",
-  bugs: {
-    url: "https://github.com/jspsych/jsPsych/issues"
-  },
-  homepage: "https://www.jspsych.org/latest/plugins/canvas-keyboard-response",
-  peerDependencies: {
-    jspsych: ">=7.1.0"
-  },
-  devDependencies: {
-    "@jspsych/config": "^3.0.0",
-    "@jspsych/test-utils": "^1.2.0"
-  }
-};
+var version = "2.2.0";
 
 const info = {
   name: "canvas-keyboard-response",
-  version: _package.version,
+  version,
   parameters: {
+    /** 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")`.
+     */
     stimulus: {
       type: ParameterType.FUNCTION,
       default: void 0
     },
+    /** This array contains the key(s) that the participant is allowed to press in order to respond to the stimulus.
+     * Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) -
+     * see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)
+     * and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/)
+     * for more examples. Any key presses that are not listed in the array will be ignored. 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.
+     */
     choices: {
       type: ParameterType.KEYS,
       default: "ALL_KEYS"
     },
+    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention
+     * is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press).
+     */
     prompt: {
       type: ParameterType.HTML_STRING,
       default: 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.
+     */
     stimulus_duration: {
       type: ParameterType.INT,
       default: null
     },
+    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the
+     * participant fails to make a response before this timer is reached, the participant's response will be
+     * recorded as null for the trial and the trial will end. If the value of this parameter is null, then the
+     * trial will wait for a response indefinitely.
+     */
     trial_duration: {
       type: ParameterType.INT,
       default: null
     },
+    /** If true, then the trial will end whenever the participant makes a response (assuming they make their
+     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will
+     * continue until the value for `trial_duration` is reached. You can use this parameter to force the participant
+     * to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
+     */
     response_ends_trial: {
       type: ParameterType.BOOL,
       default: true
     },
+    /** Array that defines the size of the canvas element in pixels. First value is height, second value is width. */
     canvas_size: {
       type: ParameterType.INT,
       array: true,
       default: [500, 500]
+    },
+    /** If true, the response is not registered until the participant releases the key. The response
+     * time (`rt`) still reflects when the key was pressed, and the additional data field
+     * `rt_key_duration` records how long the key was held down. Note that when this is true, the
+     * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at
+     * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the
+     * key is still held, no response is recorded for the trial.
+     */
+    wait_for_key_release: {
+      type: ParameterType.BOOL,
+      default: false
     }
   },
   data: {
+    /** Indicates which key the participant pressed. */
     response: {
       type: ParameterType.STRING
     },
+    /** The response time in milliseconds for the participant to make a response. The time is measured from
+     * when the stimulus first appears on the screen until the participant's response.
+     */
     rt: {
       type: ParameterType.INT
+    },
+    /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */
+    rt_key_duration: {
+      type: ParameterType.INT
     }
+  },
+  // prettier-ignore
+  citations: {
+    "apa": "de Leeuw, J. R., Gilbert, R. A., & Luchterhandt, B. (2023). jsPsych: Enabling an Open-Source Collaborative Ecosystem of Behavioral Experiments. Journal of Open Source Software, 8(85), 5351. https://doi.org/10.21105/joss.05351 ",
+    "bibtex": '@article{Leeuw2023jsPsych, 	author = {de Leeuw, Joshua R. and Gilbert, Rebecca A. and Luchterhandt, Bj{\\" o}rn}, 	journal = {Journal of Open Source Software}, 	doi = {10.21105/joss.05351}, 	issn = {2475-9066}, 	number = {85}, 	year = {2023}, 	month = {may 11}, 	pages = {5351}, 	publisher = {Open Journals}, 	title = {jsPsych: Enabling an {Open}-{Source} {Collaborative} {Ecosystem} of {Behavioral} {Experiments}}, 	url = {https://joss.theoj.org/papers/10.21105/joss.05351}, 	volume = {8}, }  '
   }
 };
 class CanvasKeyboardResponsePlugin {
   constructor(jsPsych) {
     this.jsPsych = jsPsych;
   }
+  static {
+    this.info = info;
+  }
   trial(display_element, trial) {
     var new_html = '<div id="jspsych-canvas-keyboard-response-stimulus"><canvas id="jspsych-canvas-stimulus" height="' + trial.canvas_size[0] + '" width="' + trial.canvas_size[1] + '"></canvas></div>';
     if (trial.prompt !== null) {
@@ -102,7 +117,8 @@ class CanvasKeyboardResponsePlugin {
     trial.stimulus(c);
     var response = {
       rt: null,
-      key: null
+      key: null,
+      rt_key_duration: null
     };
     const end_trial = () => {
       if (typeof keyboardListener !== "undefined") {
@@ -110,14 +126,19 @@ class CanvasKeyboardResponsePlugin {
       }
       var trial_data = {
         rt: response.rt,
-        response: response.key
+        response: response.key,
+        rt_key_duration: response.rt_key_duration
       };
       this.jsPsych.finishTrial(trial_data);
     };
     var after_response = (info2) => {
       display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").className += " responded";
       if (response.key == null) {
-        response = info2;
+        response = {
+          rt: info2.rt,
+          key: info2.key,
+          rt_key_duration: info2.rt_key_duration ?? null
+        };
       }
       if (trial.response_ends_trial) {
         end_trial();
@@ -129,7 +150,8 @@ class CanvasKeyboardResponsePlugin {
         valid_responses: trial.choices,
         rt_method: "performance",
         persist: false,
-        allow_held_key: false
+        allow_held_key: false,
+        wait_for_key_release: trial.wait_for_key_release
       });
     }
     if (trial.stimulus_duration !== null) {
@@ -170,14 +192,15 @@ class CanvasKeyboardResponsePlugin {
   create_simulation_data(trial, simulation_options) {
     const default_data = {
       rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
-      response: this.jsPsych.pluginAPI.getValidKey(trial.choices)
+      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
+      rt_key_duration: null
     };
+    default_data.rt_key_duration = default_data.rt === null || !trial.wait_for_key_release ? null : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);
     const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
     this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
     return data;
   }
 }
-CanvasKeyboardResponsePlugin.info = info;
 
 export { CanvasKeyboardResponsePlugin as default };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"canvas-keyboard-response\",\n  version: version,\n  parameters: {\n    /** The function to draw on the canvas. This function automatically takes a canvas element as its only\n     * argument, e.g. `function(c) {...}` or `function drawStim(c) {...}`, where `c` refers to the canvas element.\n     * Note that the stimulus function will still generally need to set the correct context itself, using a line\n     * like `let ctx = c.getContext(\"2d\")`.\n     */\n    stimulus: {\n      type: ParameterType.FUNCTION,\n      default: undefined,\n    },\n    /** This array contains the key(s) that the participant is allowed to press in order to respond to the stimulus.\n     * Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) -\n     * see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)\n     * and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/)\n     * for more examples. Any key presses that are not listed in the array will be ignored. The default value\n     * of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses. Specifying `\"NO_KEYS\"` will mean\n     * that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     * is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus will be set to\n     * `hidden` after this time has elapsed. If this is null, then the stimulus will remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, then the\n     * trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can use this parameter to force the participant\n     * to view a stimulus for a fixed amount of time, even if they respond before the time is complete.\n     */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** Array that defines the size of the canvas element in pixels. First value is height, second value is width. */\n    canvas_size: {\n      type: ParameterType.INT,\n      array: true,\n      default: [500, 500],\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n  },\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin can be used to draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp) and\n * record a keyboard response. The canvas stimulus can be useful for displaying dynamic, parametrically-defined graphics,\n * and for controlling the positioning of multiple graphical elements (shapes, text, images). The stimulus can be\n * displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically\n * if the participant has failed to respond within a fixed length of time.\n *\n * @author Chris Jungerius (modified from Josh de Leeuw)\n * @see {@link https://www.jspsych.org/latest/plugins/canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}\n */\nclass CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html =\n      '<div id=\"jspsych-canvas-keyboard-response-stimulus\">' +\n      '<canvas id=\"jspsych-canvas-stimulus\" height=\"' +\n      trial.canvas_size[0] +\n      '\" width=\"' +\n      trial.canvas_size[1] +\n      '\"></canvas>' +\n      \"</div>\";\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n    let c = document.getElementById(\"jspsych-canvas-stimulus\");\n    c.style.display = \"block\";\n    trial.stimulus(c);\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      if (typeof keyboardListener !== \"undefined\") {\n        this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n      }\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        response: response.key,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-canvas-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = info;\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\") {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n      });\n    }\n\n    // hide stimulus if stimulus_duration is set\n    if (trial.stimulus_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        display_element.querySelector<HTMLElement>(\n          \"#jspsych-canvas-keyboard-response-stimulus\"\n        ).style.visibility = \"hidden\";\n      }, trial.stimulus_duration);\n    }\n\n    // end trial if trial_duration is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        end_trial();\n      }, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    if (data.rt !== null) {\n      this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":["version","info"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-canvas-keyboard-response\",\n  \"version\": \"2.2.0\",\n  \"description\": \"jsPsych plugin for displaying a canvas stimulus and getting a keyboard response\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.cjs\",\n  \"exports\": {\n    \"import\": \"./dist/index.js\",\n    \"require\": \"./dist/index.cjs\"\n  },\n  \"typings\": \"dist/index.d.ts\",\n  \"unpkg\": \"dist/index.browser.min.js\",\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"source\": \"src/index.ts\",\n  \"scripts\": {\n    \"test\": \"jest  --passWithNoTests\",\n    \"test:watch\": \"npm test -- --watch\",\n    \"tsc\": \"tsc\",\n    \"build\": \"rollup --config\",\n    \"build:watch\": \"npm run build -- --watch\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n    \"directory\": \"packages/plugin-canvas-keyboard-response\"\n  },\n  \"author\": \"Chris Jungerius, Josh de Leeuw\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n  },\n  \"homepage\": \"https://www.jspsych.org/latest/plugins/canvas-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.3.4\",\n    \"@jspsych/test-utils\": \"^1.3.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"canvas-keyboard-response\",\n  version: version,\n  parameters: {\n    /** The function to draw on the canvas. This function automatically takes a canvas element as its only\n     * argument, e.g. `function(c) {...}` or `function drawStim(c) {...}`, where `c` refers to the canvas element.\n     * Note that the stimulus function will still generally need to set the correct context itself, using a line\n     * like `let ctx = c.getContext(\"2d\")`.\n     */\n    stimulus: {\n      type: ParameterType.FUNCTION,\n      default: undefined,\n    },\n    /** This array contains the key(s) that the participant is allowed to press in order to respond to the stimulus.\n     * Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) -\n     * see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)\n     * and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/)\n     * for more examples. Any key presses that are not listed in the array will be ignored. The default value\n     * of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses. Specifying `\"NO_KEYS\"` will mean\n     * that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /** This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention\n     * is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus will be set to\n     * `hidden` after this time has elapsed. If this is null, then the stimulus will remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, then the\n     * trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can use this parameter to force the participant\n     * to view a stimulus for a fixed amount of time, even if they respond before the time is complete.\n     */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** Array that defines the size of the canvas element in pixels. First value is height, second value is width. */\n    canvas_size: {\n      type: ParameterType.INT,\n      array: true,\n      default: [500, 500],\n    },\n    /** If true, the response is not registered until the participant releases the key. The response\n     * time (`rt`) still reflects when the key was pressed, and the additional data field\n     * `rt_key_duration` records how long the key was held down. Note that when this is true, the\n     * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at\n     * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the\n     * key is still held, no response is recorded for the trial.\n     */\n    wait_for_key_release: {\n      type: ParameterType.BOOL,\n      default: false,\n    },\n  },\n  data: {\n    /** Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from\n     * when the stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */\n    rt_key_duration: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin can be used to draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp) and\n * record a keyboard response. The canvas stimulus can be useful for displaying dynamic, parametrically-defined graphics,\n * and for controlling the positioning of multiple graphical elements (shapes, text, images). The stimulus can be\n * displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically\n * if the participant has failed to respond within a fixed length of time.\n *\n * @author Chris Jungerius (modified from Josh de Leeuw)\n * @see {@link https://www.jspsych.org/latest/plugins/canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}\n */\nclass CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html =\n      '<div id=\"jspsych-canvas-keyboard-response-stimulus\">' +\n      '<canvas id=\"jspsych-canvas-stimulus\" height=\"' +\n      trial.canvas_size[0] +\n      '\" width=\"' +\n      trial.canvas_size[1] +\n      '\"></canvas>' +\n      \"</div>\";\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n    let c = document.getElementById(\"jspsych-canvas-stimulus\");\n    c.style.display = \"block\";\n    trial.stimulus(c);\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n      rt_key_duration: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      if (typeof keyboardListener !== \"undefined\") {\n        this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n      }\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        response: response.key,\n        rt_key_duration: response.rt_key_duration,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-canvas-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = {\n          rt: info.rt,\n          key: info.key,\n          rt_key_duration: info.rt_key_duration ?? null,\n        };\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\") {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n        wait_for_key_release: trial.wait_for_key_release,\n      });\n    }\n\n    // hide stimulus if stimulus_duration is set\n    if (trial.stimulus_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        display_element.querySelector<HTMLElement>(\n          \"#jspsych-canvas-keyboard-response-stimulus\"\n        ).style.visibility = \"hidden\";\n      }, trial.stimulus_duration);\n    }\n\n    // end trial if trial_duration is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        end_trial();\n      }, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    if (data.rt !== null) {\n      this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n      rt_key_duration: null,\n    };\n    default_data.rt_key_duration =\n      default_data.rt === null || !trial.wait_for_key_release\n        ? null\n        : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":[],"mappings":";;AAEE,IAAA,OAAA,GAAW,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EC8FA,SAAA,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jspsych/plugin-canvas-keyboard-response",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "jsPsych plugin for displaying a canvas stimulus and getting a keyboard response",
   "type": "module",
   "main": "dist/index.cjs",
@@ -37,7 +37,7 @@
     "jspsych": ">=7.1.0"
   },
   "devDependencies": {
-    "@jspsych/config": "^3.0.0",
-    "@jspsych/test-utils": "^1.2.0"
+    "@jspsych/config": "^3.3.4",
+    "@jspsych/test-utils": "^1.3.0"
   }
 }

package/src/index.spec.ts

@@ -27,6 +27,24 @@ describe("canvas-keyboard-response simulation", () => {
 
     expect(getData().values()[0].rt).toBeGreaterThan(0);
     expect(typeof getData().values()[0].response).toBe("string");
+    expect(getData().values()[0].rt_key_duration).toBe(null);
+  });
+
+  test("data mode records rt_key_duration when wait_for_key_release is true", async () => {
+    const timeline = [
+      {
+        type: canvasKeyboardResponse,
+        stimulus: drawRect,
+        wait_for_key_release: true,
+      },
+    ];
+
+    const { expectFinished, getData } = await simulateTimeline(timeline);
+
+    await expectFinished();
+
+    expect(getData().values()[0].rt).toBeGreaterThan(0);
+    expect(typeof getData().values()[0].rt_key_duration).toBe("number");
   });
 
   // can't run this until we mock canvas elements.

package/src/index.ts

@@ -65,6 +65,17 @@ const info = <const>{
       array: true,
       default: [500, 500],
     },
+    /** If true, the response is not registered until the participant releases the key. The response
+     * time (`rt`) still reflects when the key was pressed, and the additional data field
+     * `rt_key_duration` records how long the key was held down. Note that when this is true, the
+     * trial cannot end until the key is released: with `response_ends_trial: true` the trial ends at
+     * the key release, and if the trial ends for another reason (e.g., `trial_duration`) while the
+     * key is still held, no response is recorded for the trial.
+     */
+    wait_for_key_release: {
+      type: ParameterType.BOOL,
+      default: false,
+    },
   },
   data: {
     /** Indicates which key the participant pressed. */
@@ -77,7 +88,13 @@ const info = <const>{
     rt: {
       type: ParameterType.INT,
     },
+    /** The duration in milliseconds that the response key was held down, measured from key press to key release. Only recorded when `wait_for_key_release` is true; null otherwise or when no response was made. */
+    rt_key_duration: {
+      type: ParameterType.INT,
+    },
   },
+  // prettier-ignore
+  citations: '__CITATIONS__',
 };
 
 type Info = typeof info;
@@ -120,6 +137,7 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     var response = {
       rt: null,
       key: null,
+      rt_key_duration: null,
     };
 
     // function to end trial when it is time
@@ -133,6 +151,7 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
       var trial_data = {
         rt: response.rt,
         response: response.key,
+        rt_key_duration: response.rt_key_duration,
       };
 
       // move on to the next trial
@@ -148,7 +167,11 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
       // only record the first response
       if (response.key == null) {
-        response = info;
+        response = {
+          rt: info.rt,
+          key: info.key,
+          rt_key_duration: info.rt_key_duration ?? null,
+        };
       }
 
       if (trial.response_ends_trial) {
@@ -164,6 +187,7 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         rt_method: "performance",
         persist: false,
         allow_held_key: false,
+        wait_for_key_release: trial.wait_for_key_release,
       });
     }
 
@@ -222,7 +246,12 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     const default_data = {
       rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
       response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
+      rt_key_duration: null,
     };
+    default_data.rt_key_duration =
+      default_data.rt === null || !trial.wait_for_key_release
+        ? null
+        : this.jsPsych.randomization.sampleExGaussian(150, 30, 1 / 100, true);
 
     const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);