@jspsych/plugin-html-keyboard-response 2.1.0 → 2.2.0

package/dist/index.browser.js

@@ -1,7 +1,7 @@
 var jsPsychHtmlKeyboardResponse = (function (jspsych) {
   'use strict';
 
-  var version = "2.1.0";
+  var version = "2.2.0";
 
   const info = {
     name: "html-keyboard-response",
@@ -65,6 +65,18 @@ var jsPsychHtmlKeyboardResponse = (function (jspsych) {
       response_ends_trial: {
         type: jspsych.ParameterType.BOOL,
         default: true
+      },
+      /**
+       * 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: {
@@ -79,6 +91,10 @@ var jsPsychHtmlKeyboardResponse = (function (jspsych) {
       /** The HTML content that was displayed on the screen. */
       stimulus: {
         type: jspsych.ParameterType.STRING
+      },
+      /** 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
@@ -102,7 +118,8 @@ var jsPsychHtmlKeyboardResponse = (function (jspsych) {
       display_element.innerHTML = new_html;
       var response = {
         rt: null,
-        key: null
+        key: null,
+        rt_key_duration: null
       };
       const end_trial = () => {
         if (typeof keyboardListener !== "undefined") {
@@ -111,14 +128,19 @@ var jsPsychHtmlKeyboardResponse = (function (jspsych) {
         var trial_data = {
           rt: response.rt,
           stimulus: trial.stimulus,
-          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-html-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();
@@ -130,7 +152,8 @@ var jsPsychHtmlKeyboardResponse = (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) {
@@ -157,8 +180,10 @@ var jsPsychHtmlKeyboardResponse = (function (jspsych) {
       const default_data = {
         stimulus: trial.stimulus,
         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;
@@ -181,4 +206,4 @@ var jsPsychHtmlKeyboardResponse = (function (jspsych) {
   return HtmlKeyboardResponsePlugin;
 
 })(jsPsychModule);
-//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.1.0/dist/index.browser.js.map
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-html-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":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-html-keyboard-response\",\n  \"version\": \"2.1.0\",\n  \"description\": \"jsPsych plugin for displaying a 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\",\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-html-keyboard-response\"\n  },\n  \"author\": \"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/html-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"html-keyboard-response\",\n  version: version,\n  parameters: {\n    /**\n     * The string to be displayed.\n     */\n    stimulus: {\n      type: ParameterType.HTML_STRING,\n      default: undefined,\n    },\n    /**\n     * This array contains the key(s) that the participant is allowed to press in order to respond\n     * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n     * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n     * and\n     * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n     * for more examples. Any key presses that are not listed in the\n     * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n     * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /**\n     * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n     * The intention is that it can be used to provide a reminder about the action the participant\n     * is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /**\n     * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n     * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n     * remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /**\n     * How long to wait for the participant to make a response before ending the trial in milliseconds.\n     * If the participant fails to make a response before this timer is reached, the participant's response\n     * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n     * then the trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\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 set this parameter to false to force\n     * the participant 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  },\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 when the stimulus first appears on the screen until the participant's response. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The HTML content that was displayed on the screen. */\n    stimulus: {\n      type: ParameterType.STRING,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n\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        stimulus: trial.stimulus,\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-html-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-html-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(end_trial, 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 create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\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  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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":[],"mappings":";;;EAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICiFA,SAAA,EAAA;EAAA;;KAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.browser.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-html-keyboard-response\",\n  \"version\": \"2.2.0\",\n  \"description\": \"jsPsych plugin for displaying a 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\",\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-html-keyboard-response\"\n  },\n  \"author\": \"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/html-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: \"html-keyboard-response\",\n  version: version,\n  parameters: {\n    /**\n     * The string to be displayed.\n     */\n    stimulus: {\n      type: ParameterType.HTML_STRING,\n      default: undefined,\n    },\n    /**\n     * This array contains the key(s) that the participant is allowed to press in order to respond\n     * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n     * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n     * and\n     * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n     * for more examples. Any key presses that are not listed in the\n     * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n     * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /**\n     * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n     * The intention is that it can be used to provide a reminder about the action the participant\n     * is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /**\n     * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n     * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n     * remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /**\n     * How long to wait for the participant to make a response before ending the trial in milliseconds.\n     * If the participant fails to make a response before this timer is reached, the participant's response\n     * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n     * then the trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\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 set this parameter to false to force\n     * the participant 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    /**\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 when the stimulus first appears on the screen until the participant's response. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The HTML content that was displayed on the screen. */\n    stimulus: {\n      type: ParameterType.STRING,\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 displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n\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        stimulus: trial.stimulus,\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-html-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-html-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(end_trial, 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 create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\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  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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":[],"mappings":";;;EAEE,IAAA,OAAA,GAAW,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICiGA,SAAA,EAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.browser.min.js

@@ -1,2 +1,2 @@
-var jsPsychHtmlKeyboardResponse=function(i){"use strict";var u="2.1.0";const p={name:"html-keyboard-response",version:u,parameters:{stimulus:{type:i.ParameterType.HTML_STRING,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}},data:{response:{type:i.ParameterType.STRING},rt:{type:i.ParameterType.INT},stimulus:{type:i.ParameterType.STRING}},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 n{constructor(t){this.jsPsych=t}trial(t,e){var a='<div id="jspsych-html-keyboard-response-stimulus">'+e.stimulus+"</div>";e.prompt!==null&&(a+=e.prompt),t.innerHTML=a;var s={rt:null,key:null};const r=()=>{typeof o!="undefined"&&this.jsPsych.pluginAPI.cancelKeyboardResponse(o);var l={rt:s.rt,stimulus:e.stimulus,response:s.key};this.jsPsych.finishTrial(l)};var m=l=>{t.querySelector("#jspsych-html-keyboard-response-stimulus").className+=" responded",s.key==null&&(s=l),e.response_ends_trial&&r()};if(e.choices!="NO_KEYS")var o=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:m,valid_responses:e.choices,rt_method:"performance",persist:!1,allow_held_key:!1});e.stimulus_duration!==null&&this.jsPsych.pluginAPI.setTimeout(()=>{t.querySelector("#jspsych-html-keyboard-response-stimulus").style.visibility="hidden"},e.stimulus_duration),e.trial_duration!==null&&this.jsPsych.pluginAPI.setTimeout(r,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)}create_simulation_data(t,e){const a={stimulus:t.stimulus,rt:this.jsPsych.randomization.sampleExGaussian(500,50,.006666666666666667,!0),response:this.jsPsych.pluginAPI.getValidKey(t.choices)},s=this.jsPsych.pluginAPI.mergeSimulationData(a,e);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(t,s),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),r=this.jsPsych.getDisplayElement();this.trial(r,t),a(),s.rt!==null&&this.jsPsych.pluginAPI.pressKey(s.response,s.rt)}}return n.info=p,n}(jsPsychModule);
-//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.1.0/dist/index.browser.min.js.map
+var jsPsychHtmlKeyboardResponse=(function(r){"use strict";var y="2.2.0";const p={name:"html-keyboard-response",version:y,parameters:{stimulus:{type:r.ParameterType.HTML_STRING,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},wait_for_key_release:{type:r.ParameterType.BOOL,default:!1}},data:{response:{type:r.ParameterType.STRING},rt:{type:r.ParameterType.INT},stimulus:{type:r.ParameterType.STRING},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 n{constructor(t){this.jsPsych=t}trial(t,e){var a='<div id="jspsych-html-keyboard-response-stimulus">'+e.stimulus+"</div>";e.prompt!==null&&(a+=e.prompt),t.innerHTML=a;var s={rt:null,key:null,rt_key_duration:null};const l=()=>{typeof u!="undefined"&&this.jsPsych.pluginAPI.cancelKeyboardResponse(u);var i={rt:s.rt,stimulus:e.stimulus,response:s.key,rt_key_duration:s.rt_key_duration};this.jsPsych.finishTrial(i)};var m=i=>{var o;t.querySelector("#jspsych-html-keyboard-response-stimulus").className+=" responded",s.key==null&&(s={rt:i.rt,key:i.key,rt_key_duration:(o=i.rt_key_duration)!=null?o:null}),e.response_ends_trial&&l()};if(e.choices!="NO_KEYS")var u=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:m,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-html-keyboard-response-stimulus").style.visibility="hidden"},e.stimulus_duration),e.trial_duration!==null&&this.jsPsych.pluginAPI.setTimeout(l,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)}create_simulation_data(t,e){const a={stimulus:t.stimulus,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}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),l=this.jsPsych.getDisplayElement();this.trial(l,t),a(),s.rt!==null&&this.jsPsych.pluginAPI.pressKey(s.response,s.rt)}}return n.info=p,n})(jsPsychModule);
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-html-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":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-html-keyboard-response\",\n  \"version\": \"2.1.0\",\n  \"description\": \"jsPsych plugin for displaying a 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\",\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-html-keyboard-response\"\n  },\n  \"author\": \"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/html-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"html-keyboard-response\",\n  version: version,\n  parameters: {\n    /**\n     * The string to be displayed.\n     */\n    stimulus: {\n      type: ParameterType.HTML_STRING,\n      default: undefined,\n    },\n    /**\n     * This array contains the key(s) that the participant is allowed to press in order to respond\n     * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n     * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n     * and\n     * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n     * for more examples. Any key presses that are not listed in the\n     * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n     * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /**\n     * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n     * The intention is that it can be used to provide a reminder about the action the participant\n     * is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /**\n     * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n     * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n     * remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /**\n     * How long to wait for the participant to make a response before ending the trial in milliseconds.\n     * If the participant fails to make a response before this timer is reached, the participant's response\n     * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n     * then the trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\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 set this parameter to false to force\n     * the participant 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  },\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 when the stimulus first appears on the screen until the participant's response. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The HTML content that was displayed on the screen. */\n    stimulus: {\n      type: ParameterType.STRING,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n\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        stimulus: trial.stimulus,\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-html-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-html-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(end_trial, 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 create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\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  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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":["version"],"mappings":"yDAEEA,IAAAA,EAAW,8gBCiFA,UAAA,iuBAAe"}
+{"version":3,"file":"index.browser.min.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-html-keyboard-response\",\n  \"version\": \"2.2.0\",\n  \"description\": \"jsPsych plugin for displaying a 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\",\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-html-keyboard-response\"\n  },\n  \"author\": \"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/html-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: \"html-keyboard-response\",\n  version: version,\n  parameters: {\n    /**\n     * The string to be displayed.\n     */\n    stimulus: {\n      type: ParameterType.HTML_STRING,\n      default: undefined,\n    },\n    /**\n     * This array contains the key(s) that the participant is allowed to press in order to respond\n     * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n     * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n     * and\n     * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n     * for more examples. Any key presses that are not listed in the\n     * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n     * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /**\n     * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n     * The intention is that it can be used to provide a reminder about the action the participant\n     * is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /**\n     * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n     * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n     * remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /**\n     * How long to wait for the participant to make a response before ending the trial in milliseconds.\n     * If the participant fails to make a response before this timer is reached, the participant's response\n     * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n     * then the trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\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 set this parameter to false to force\n     * the participant 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    /**\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 when the stimulus first appears on the screen until the participant's response. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The HTML content that was displayed on the screen. */\n    stimulus: {\n      type: ParameterType.STRING,\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 displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n\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        stimulus: trial.stimulus,\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-html-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-html-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(end_trial, 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 create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\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  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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":["version","_a"],"mappings":"0DACE,IACAA,EAAW,qnBCiGA,UAAA,iuBAAe,+aAnG5B,IAAAC"}

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var jspsych = require('jspsych');
 
-var version = "2.1.0";
+var version = "2.2.0";
 
 const info = {
   name: "html-keyboard-response",
@@ -66,6 +66,18 @@ const info = {
     response_ends_trial: {
       type: jspsych.ParameterType.BOOL,
       default: true
+    },
+    /**
+     * 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: {
@@ -80,6 +92,10 @@ const info = {
     /** The HTML content that was displayed on the screen. */
     stimulus: {
       type: jspsych.ParameterType.STRING
+    },
+    /** 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
@@ -103,7 +119,8 @@ class HtmlKeyboardResponsePlugin {
     display_element.innerHTML = new_html;
     var response = {
       rt: null,
-      key: null
+      key: null,
+      rt_key_duration: null
     };
     const end_trial = () => {
       if (typeof keyboardListener !== "undefined") {
@@ -112,14 +129,19 @@ class HtmlKeyboardResponsePlugin {
       var trial_data = {
         rt: response.rt,
         stimulus: trial.stimulus,
-        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-html-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 +153,8 @@ class HtmlKeyboardResponsePlugin {
         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) {
@@ -158,8 +181,10 @@ class HtmlKeyboardResponsePlugin {
     const default_data = {
       stimulus: trial.stimulus,
       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;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-html-keyboard-response\",\n  \"version\": \"2.1.0\",\n  \"description\": \"jsPsych plugin for displaying a 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\",\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-html-keyboard-response\"\n  },\n  \"author\": \"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/html-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"html-keyboard-response\",\n  version: version,\n  parameters: {\n    /**\n     * The string to be displayed.\n     */\n    stimulus: {\n      type: ParameterType.HTML_STRING,\n      default: undefined,\n    },\n    /**\n     * This array contains the key(s) that the participant is allowed to press in order to respond\n     * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n     * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n     * and\n     * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n     * for more examples. Any key presses that are not listed in the\n     * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n     * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /**\n     * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n     * The intention is that it can be used to provide a reminder about the action the participant\n     * is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /**\n     * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n     * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n     * remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /**\n     * How long to wait for the participant to make a response before ending the trial in milliseconds.\n     * If the participant fails to make a response before this timer is reached, the participant's response\n     * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n     * then the trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\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 set this parameter to false to force\n     * the participant 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  },\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 when the stimulus first appears on the screen until the participant's response. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The HTML content that was displayed on the screen. */\n    stimulus: {\n      type: ParameterType.STRING,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n\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        stimulus: trial.stimulus,\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-html-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-html-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(end_trial, 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 create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\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  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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":[],"mappings":";;;;AAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECiFA,SAAA,EAAA;AAAA;;GAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-html-keyboard-response\",\n  \"version\": \"2.2.0\",\n  \"description\": \"jsPsych plugin for displaying a 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\",\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-html-keyboard-response\"\n  },\n  \"author\": \"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/html-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: \"html-keyboard-response\",\n  version: version,\n  parameters: {\n    /**\n     * The string to be displayed.\n     */\n    stimulus: {\n      type: ParameterType.HTML_STRING,\n      default: undefined,\n    },\n    /**\n     * This array contains the key(s) that the participant is allowed to press in order to respond\n     * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n     * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n     * and\n     * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n     * for more examples. Any key presses that are not listed in the\n     * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n     * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /**\n     * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n     * The intention is that it can be used to provide a reminder about the action the participant\n     * is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /**\n     * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n     * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n     * remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /**\n     * How long to wait for the participant to make a response before ending the trial in milliseconds.\n     * If the participant fails to make a response before this timer is reached, the participant's response\n     * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n     * then the trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\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 set this parameter to false to force\n     * the participant 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    /**\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 when the stimulus first appears on the screen until the participant's response. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The HTML content that was displayed on the screen. */\n    stimulus: {\n      type: ParameterType.STRING,\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 displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n\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        stimulus: trial.stimulus,\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-html-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-html-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(end_trial, 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 create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\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  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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":[],"mappings":";;;;AAEE,IAAA,OAAA,GAAW,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECiGA,SAAA,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -63,6 +63,18 @@ declare const info: {
             readonly type: ParameterType.BOOL;
             readonly default: true;
         };
+        /**
+         * 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. */
@@ -77,6 +89,10 @@ declare const info: {
         readonly stimulus: {
             readonly type: ParameterType.STRING;
         };
+        /** 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__";
 };
@@ -154,6 +170,18 @@ declare class HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {
                 readonly type: ParameterType.BOOL;
                 readonly default: true;
             };
+            /**
+             * 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. */
@@ -168,6 +196,10 @@ declare class HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {
             readonly stimulus: {
                 readonly type: ParameterType.STRING;
             };
+            /** 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__";
     };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { ParameterType } from 'jspsych';
 
-var version = "2.1.0";
+var version = "2.2.0";
 
 const info = {
   name: "html-keyboard-response",
@@ -64,6 +64,18 @@ const info = {
     response_ends_trial: {
       type: ParameterType.BOOL,
       default: true
+    },
+    /**
+     * 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: {
@@ -78,6 +90,10 @@ const info = {
     /** The HTML content that was displayed on the screen. */
     stimulus: {
       type: ParameterType.STRING
+    },
+    /** 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
@@ -101,7 +117,8 @@ class HtmlKeyboardResponsePlugin {
     display_element.innerHTML = new_html;
     var response = {
       rt: null,
-      key: null
+      key: null,
+      rt_key_duration: null
     };
     const end_trial = () => {
       if (typeof keyboardListener !== "undefined") {
@@ -110,14 +127,19 @@ class HtmlKeyboardResponsePlugin {
       var trial_data = {
         rt: response.rt,
         stimulus: trial.stimulus,
-        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-html-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 +151,8 @@ class HtmlKeyboardResponsePlugin {
         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) {
@@ -156,8 +179,10 @@ class HtmlKeyboardResponsePlugin {
     const default_data = {
       stimulus: trial.stimulus,
       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;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-html-keyboard-response\",\n  \"version\": \"2.1.0\",\n  \"description\": \"jsPsych plugin for displaying a 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\",\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-html-keyboard-response\"\n  },\n  \"author\": \"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/html-keyboard-response\",\n  \"peerDependencies\": {\n    \"jspsych\": \">=7.1.0\"\n  },\n  \"devDependencies\": {\n    \"@jspsych/config\": \"^3.2.0\",\n    \"@jspsych/test-utils\": \"^1.2.0\"\n  }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"html-keyboard-response\",\n  version: version,\n  parameters: {\n    /**\n     * The string to be displayed.\n     */\n    stimulus: {\n      type: ParameterType.HTML_STRING,\n      default: undefined,\n    },\n    /**\n     * This array contains the key(s) that the participant is allowed to press in order to respond\n     * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n     * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n     * and\n     * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n     * for more examples. Any key presses that are not listed in the\n     * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n     * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /**\n     * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n     * The intention is that it can be used to provide a reminder about the action the participant\n     * is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /**\n     * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n     * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n     * remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /**\n     * How long to wait for the participant to make a response before ending the trial in milliseconds.\n     * If the participant fails to make a response before this timer is reached, the participant's response\n     * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n     * then the trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\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 set this parameter to false to force\n     * the participant 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  },\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 when the stimulus first appears on the screen until the participant's response. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The HTML content that was displayed on the screen. */\n    stimulus: {\n      type: ParameterType.STRING,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n\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        stimulus: trial.stimulus,\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-html-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-html-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(end_trial, 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 create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\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  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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":[],"mappings":";;AAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECiFA,SAAA,EAAA;AAAA;;GAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-html-keyboard-response\",\n  \"version\": \"2.2.0\",\n  \"description\": \"jsPsych plugin for displaying a 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\",\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-html-keyboard-response\"\n  },\n  \"author\": \"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/html-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: \"html-keyboard-response\",\n  version: version,\n  parameters: {\n    /**\n     * The string to be displayed.\n     */\n    stimulus: {\n      type: ParameterType.HTML_STRING,\n      default: undefined,\n    },\n    /**\n     * This array contains the key(s) that the participant is allowed to press in order to respond\n     * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n     * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n     * and\n     * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n     * for more examples. Any key presses that are not listed in the\n     * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n     * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n     */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /**\n     * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n     * The intention is that it can be used to provide a reminder about the action the participant\n     * is supposed to take (e.g., which key to press).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /**\n     * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n     * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n     * remain visible until the trial ends.\n     */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /**\n     * How long to wait for the participant to make a response before ending the trial in milliseconds.\n     * If the participant fails to make a response before this timer is reached, the participant's response\n     * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n     * then the trial will wait for a response indefinitely.\n     */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\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 set this parameter to false to force\n     * the participant 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    /**\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 when the stimulus first appears on the screen until the participant's response. */\n    rt: {\n      type: ParameterType.INT,\n    },\n    /** The HTML content that was displayed on the screen. */\n    stimulus: {\n      type: ParameterType.STRING,\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 displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n\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        stimulus: trial.stimulus,\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-html-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-html-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(end_trial, 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 create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\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  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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":[],"mappings":";;AAEE,IAAA,OAAA,GAAW,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECiGA,SAAA,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

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

package/src/index.spec.ts

@@ -1,4 +1,11 @@
-import { pressKey, simulateTimeline, startTimeline } from "@jspsych/test-utils";
+import {
+  flushPromises,
+  keyDown,
+  keyUp,
+  pressKey,
+  simulateTimeline,
+  startTimeline,
+} from "@jspsych/test-utils";
 
 import htmlKeyboardResponse from ".";
 
@@ -113,7 +120,7 @@ describe("html-keyboard-response", () => {
   });
 
   test("class should say responded when key is pressed", async () => {
-    const { getHTML, expectRunning } = await startTimeline([
+    const { getHTML, expectRunning, displayElement } = await startTimeline([
       {
         type: htmlKeyboardResponse,
         stimulus: "this is html",
@@ -128,7 +135,7 @@ describe("html-keyboard-response", () => {
 
     await pressKey("f");
 
-    expect(document.querySelector("#jspsych-html-keyboard-response-stimulus").className).toBe(
+    expect(displayElement.querySelector("#jspsych-html-keyboard-response-stimulus").className).toBe(
       " responded"
     );
 
@@ -136,6 +143,141 @@ describe("html-keyboard-response", () => {
   });
 });
 
+describe("html-keyboard-response wait_for_key_release", () => {
+  test("does not end the trial until the key is released and records the hold duration", async () => {
+    const { getData, expectRunning, expectFinished } = await startTimeline([
+      {
+        type: htmlKeyboardResponse,
+        stimulus: "this is html",
+        choices: ["a"],
+        wait_for_key_release: true,
+      },
+    ]);
+
+    jest.advanceTimersByTime(100);
+    await keyDown("a");
+
+    // the trial should still be running because the key has not been released
+    await expectRunning();
+
+    jest.advanceTimersByTime(250);
+    await keyUp("a");
+
+    await expectFinished();
+
+    expect(getData().values()[0].rt).toBe(100);
+    expect(getData().values()[0].rt_key_duration).toBe(250);
+  });
+
+  test("records the hold duration when the trial ends by duration", async () => {
+    const { getData, expectFinished } = await startTimeline([
+      {
+        type: htmlKeyboardResponse,
+        stimulus: "this is html",
+        choices: ["a"],
+        wait_for_key_release: true,
+        response_ends_trial: false,
+        trial_duration: 1000,
+      },
+    ]);
+
+    await keyDown("a");
+    jest.advanceTimersByTime(250);
+    await keyUp("a");
+
+    jest.advanceTimersByTime(750);
+    await expectFinished();
+
+    expect(getData().values()[0].rt_key_duration).toBe(250);
+  });
+
+  test("records a null response when the trial ends while the key is still held", async () => {
+    const { getData, expectFinished } = await startTimeline([
+      {
+        type: htmlKeyboardResponse,
+        stimulus: "this is html",
+        choices: ["a"],
+        wait_for_key_release: true,
+        response_ends_trial: false,
+        trial_duration: 1000,
+      },
+    ]);
+
+    await keyDown("a");
+    jest.advanceTimersByTime(1000);
+    await expectFinished();
+
+    expect(getData().values()[0].response).toBe(null);
+    expect(getData().values()[0].rt).toBe(null);
+    expect(getData().values()[0].rt_key_duration).toBe(null);
+
+    await keyUp("a");
+  });
+
+  test("rt_key_duration is null on default trials (wait_for_key_release false)", async () => {
+    const { getData, expectFinished } = await startTimeline([
+      {
+        type: htmlKeyboardResponse,
+        stimulus: "this is html",
+        choices: ["a"],
+      },
+    ]);
+
+    await keyDown("a");
+    await expectFinished();
+
+    expect(getData().values()[0].rt_key_duration).toBe(null);
+  });
+
+  test("a key held past trial_duration does not contaminate the next trial", async () => {
+    const { getData, expectRunning, expectFinished } = await startTimeline([
+      {
+        type: htmlKeyboardResponse,
+        stimulus: "trial 1",
+        choices: ["a"],
+        wait_for_key_release: true,
+        trial_duration: 1000,
+      },
+      {
+        type: htmlKeyboardResponse,
+        stimulus: "trial 2",
+        choices: ["a"],
+        wait_for_key_release: true,
+      },
+    ]);
+
+    // trial 1: press and hold the key, then let the trial time out
+    await keyDown("a");
+    jest.advanceTimersByTime(1000);
+    await flushPromises();
+
+    // trial 1 ended by duration with no response because the key was never released
+    expect(getData().values()[0].response).toBe(null);
+    expect(getData().values()[0].rt).toBe(null);
+    expect(getData().values()[0].rt_key_duration).toBe(null);
+
+    // trial 2 is now running with the key still held; a key-repeat must not register
+    await keyDown("a");
+    await expectRunning();
+
+    // releasing the held-over key must not register a response in trial 2
+    await keyUp("a");
+    await expectRunning();
+
+    // a fresh press/release cycle in trial 2 works normally
+    jest.advanceTimersByTime(200);
+    await keyDown("a");
+    jest.advanceTimersByTime(125);
+    await keyUp("a");
+
+    await expectFinished();
+
+    expect(getData().values()[1].response).toBe("a");
+    expect(getData().values()[1].rt).toBe(200);
+    expect(getData().values()[1].rt_key_duration).toBe(125);
+  });
+});
+
 describe("html-keyboard-response simulation", () => {
   test("data mode works", async () => {
     const timeline = [

package/src/index.ts

@@ -65,6 +65,18 @@ const info = <const>{
       type: ParameterType.BOOL,
       default: true,
     },
+    /**
+     * 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. */
@@ -79,6 +91,10 @@ const info = <const>{
     stimulus: {
       type: ParameterType.STRING,
     },
+    /** 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__',
@@ -113,6 +129,7 @@ class HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     var response = {
       rt: null,
       key: null,
+      rt_key_duration: null,
     };
 
     // function to end trial when it is time
@@ -127,6 +144,7 @@ class HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         rt: response.rt,
         stimulus: trial.stimulus,
         response: response.key,
+        rt_key_duration: response.rt_key_duration,
       };
 
       // move on to the next trial
@@ -142,7 +160,11 @@ class HtmlKeyboardResponsePlugin 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) {
@@ -158,6 +180,7 @@ class HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         rt_method: "performance",
         persist: false,
         allow_held_key: false,
+        wait_for_key_release: trial.wait_for_key_release,
       });
     }
 
@@ -196,7 +219,12 @@ class HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {
       stimulus: trial.stimulus,
       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);