@jspsych/plugin-canvas-keyboard-response 1.1.1 → 1.1.3

package/README.md

@@ -0,0 +1,47 @@
+![jspsych logo](http://www.jspsych.org/7.0/img/jspsych-logo.jpg)
+
+jsPsych is a JavaScript framework for creating behavioral experiments that run in a web browser.
+
+## Plugin Description
+
+The canvas-keyboard-response plugin allows for an experimenter to draw a stimulus on an HTML canvas element, allowing for dynamic, parametrically-defined graphics, and for controlling the position of multiple graphical elements on the canvas (such as shapes, texts, or images). This stimulus can be displayed until a response is given, or for a specified amount of time. The trial may also be ended automatically if the participant fails to respond in a certain time. This plugin will record keyboard responses given from the participant when prompted with the stimulus.
+
+## Examples
+
+Several example experiments and plugin demonstrations are available in the `/examples` folder.
+After you've downloaded the [latest release](https://github.com/jspsych/jsPsych/releases), double-click on an example HTML file to run it in your web browser, and open it with a programming-friendly text editor to see how it works.
+
+## Documentation
+
+Documentation for this plugin is available [here](https://www.jspsych.org/latest/plugins/canvas-keyboard-response).
+
+## Getting help
+
+For questions about using the library, please use the GitHub [discussions forum](https://github.com/jspsych/jsPsych/discussions).
+You can also browse through the history of Q&A on the forum to find related questions.
+
+## Contributing
+
+We :heart: contributions!
+See the [contributing to jsPsych](https://www.jspsych.org/latest/developers/contributing/) documentation page for more information about how you can help.
+
+## Citation
+
+If you use this library in academic work, the preferred citation is:
+
+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://joss.theoj.org/papers/10.21105/joss.05351](https://joss.theoj.org/papers/10.21105/joss.05351).
+
+This paper is an updated description of jsPsych and includes all current core team members. It replaces the earlier paper that described jsPsych:
+
+de Leeuw, J.R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a Web browser. *Behavior Research Methods*, _47_(1), 1-12. doi:[10.3758/s13428-014-0458-y](http://link.springer.com/article/10.3758%2Fs13428-014-0458-y)
+
+Citations help us demonstrate that this library is used and valued, which allows us to continue working on it.
+
+## Contributors
+
+jsPsych is open source project with [numerous contributors](https://github.com/jspsych/jsPsych/graphs/contributors).
+The project is currently managed by the core team of Josh de Leeuw ([@jodeleeuw](https://github.com/jodeleeuw)), Becky Gilbert ([@becky-gilbert](https://github.com/becky-gilbert)), and Björn Luchterhandt ([@bjoluc](https://github.com/bjoluc)).
+
+jsPsych was created by [Josh de Leeuw](http://www.twitter.com/joshdeleeuw).
+
+We're also grateful for the generous support from a [Mozilla Open Source Support award](https://www.mozilla.org/en-US/moss/), which funded development of the library from 2020-2021.

package/dist/index.browser.js

@@ -1,177 +1,177 @@
 var jsPsychCanvasKeyboardResponse = (function (jspsych) {
   'use strict';
 
-  const info = {
-      name: "canvas-keyboard-response",
-      parameters: {
-          /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
-          stimulus: {
-              type: jspsych.ParameterType.FUNCTION,
-              pretty_name: "Stimulus",
-              default: undefined,
-          },
-          /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
-          choices: {
-              type: jspsych.ParameterType.KEYS,
-              pretty_name: "Choices",
-              default: "ALL_KEYS",
-          },
-          /** Any content here will be displayed below the stimulus. */
-          prompt: {
-              type: jspsych.ParameterType.HTML_STRING,
-              pretty_name: "Prompt",
-              default: null,
-          },
-          /** How long to show the stimulus. */
-          stimulus_duration: {
-              type: jspsych.ParameterType.INT,
-              pretty_name: "Stimulus duration",
-              default: null,
-          },
-          /** How long to show trial before it ends. */
-          trial_duration: {
-              type: jspsych.ParameterType.INT,
-              pretty_name: "Trial duration",
-              default: null,
-          },
-          /** If true, trial will end when subject makes a response. */
-          response_ends_trial: {
-              type: jspsych.ParameterType.BOOL,
-              pretty_name: "Response ends trial",
-              default: true,
-          },
-          /** Array containing the height (first value) and width (second value) of the canvas element. */
-          canvas_size: {
-              type: jspsych.ParameterType.INT,
-              array: true,
-              pretty_name: "Canvas size",
-              default: [500, 500],
-          },
-      },
-  };
-  /**
-   * **canvas-keyboard-response**
-   *
-   * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response
-   *
-   * @author Chris Jungerius (modified from Josh de Leeuw)
-   * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}
-   */
-  class CanvasKeyboardResponsePlugin {
-      constructor(jsPsych) {
-          this.jsPsych = jsPsych;
-      }
-      trial(display_element, trial) {
-          var new_html = '<div id="jspsych-canvas-keyboard-response-stimulus">' +
-              '<canvas id="jspsych-canvas-stimulus" height="' +
-              trial.canvas_size[0] +
-              '" width="' +
-              trial.canvas_size[1] +
-              '"></canvas>' +
-              "</div>";
-          // add prompt
-          if (trial.prompt !== null) {
-              new_html += trial.prompt;
-          }
-          // draw
-          display_element.innerHTML = new_html;
-          let c = document.getElementById("jspsych-canvas-stimulus");
-          trial.stimulus(c);
-          // store response
-          var response = {
-              rt: null,
-              key: null,
-          };
-          // function to end trial when it is time
-          const end_trial = () => {
-              // kill any remaining setTimeout handlers
-              this.jsPsych.pluginAPI.clearAllTimeouts();
-              // kill keyboard listeners
-              if (typeof keyboardListener !== "undefined") {
-                  this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
-              }
-              // gather the data to store for the trial
-              var trial_data = {
-                  rt: response.rt,
-                  response: response.key,
-              };
-              // clear the display
-              display_element.innerHTML = "";
-              // move on to the next trial
-              this.jsPsych.finishTrial(trial_data);
-          };
-          // function to handle responses by the subject
-          var after_response = (info) => {
-              // after a valid response, the stimulus will have the CSS class 'responded'
-              // which can be used to provide visual feedback that a response was recorded
-              display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").className +=
-                  " responded";
-              // only record the first response
-              if (response.key == null) {
-                  response = info;
-              }
-              if (trial.response_ends_trial) {
-                  end_trial();
-              }
-          };
-          // start the response listener
-          if (trial.choices != "NO_KEYS") {
-              var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({
-                  callback_function: after_response,
-                  valid_responses: trial.choices,
-                  rt_method: "performance",
-                  persist: false,
-                  allow_held_key: false,
-              });
-          }
-          // hide stimulus if stimulus_duration is set
-          if (trial.stimulus_duration !== null) {
-              this.jsPsych.pluginAPI.setTimeout(() => {
-                  display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").style.visibility = "hidden";
-              }, trial.stimulus_duration);
-          }
-          // end trial if trial_duration is set
-          if (trial.trial_duration !== null) {
-              this.jsPsych.pluginAPI.setTimeout(() => {
-                  end_trial();
-              }, trial.trial_duration);
-          }
-      }
-      simulate(trial, simulation_mode, simulation_options, load_callback) {
-          if (simulation_mode == "data-only") {
-              load_callback();
-              this.simulate_data_only(trial, simulation_options);
-          }
-          if (simulation_mode == "visual") {
-              this.simulate_visual(trial, simulation_options, load_callback);
-          }
-      }
-      simulate_data_only(trial, simulation_options) {
-          const data = this.create_simulation_data(trial, simulation_options);
-          this.jsPsych.finishTrial(data);
-      }
-      simulate_visual(trial, simulation_options, load_callback) {
-          const data = this.create_simulation_data(trial, simulation_options);
-          const display_element = this.jsPsych.getDisplayElement();
-          this.trial(display_element, trial);
-          load_callback();
-          if (data.rt !== null) {
-              this.jsPsych.pluginAPI.pressKey(data.response, data.rt);
-          }
-      }
-      create_simulation_data(trial, simulation_options) {
-          const default_data = {
-              rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
-              response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
-          };
-          const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
-          this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
-          return data;
-      }
-  }
+  const info = {
+      name: "canvas-keyboard-response",
+      parameters: {
+          /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
+          stimulus: {
+              type: jspsych.ParameterType.FUNCTION,
+              pretty_name: "Stimulus",
+              default: undefined,
+          },
+          /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
+          choices: {
+              type: jspsych.ParameterType.KEYS,
+              pretty_name: "Choices",
+              default: "ALL_KEYS",
+          },
+          /** Any content here will be displayed below the stimulus. */
+          prompt: {
+              type: jspsych.ParameterType.HTML_STRING,
+              pretty_name: "Prompt",
+              default: null,
+          },
+          /** How long to show the stimulus. */
+          stimulus_duration: {
+              type: jspsych.ParameterType.INT,
+              pretty_name: "Stimulus duration",
+              default: null,
+          },
+          /** How long to show trial before it ends. */
+          trial_duration: {
+              type: jspsych.ParameterType.INT,
+              pretty_name: "Trial duration",
+              default: null,
+          },
+          /** If true, trial will end when subject makes a response. */
+          response_ends_trial: {
+              type: jspsych.ParameterType.BOOL,
+              pretty_name: "Response ends trial",
+              default: true,
+          },
+          /** Array containing the height (first value) and width (second value) of the canvas element. */
+          canvas_size: {
+              type: jspsych.ParameterType.INT,
+              array: true,
+              pretty_name: "Canvas size",
+              default: [500, 500],
+          },
+      },
+  };
+  /**
+   * **canvas-keyboard-response**
+   *
+   * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response
+   *
+   * @author Chris Jungerius (modified from Josh de Leeuw)
+   * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}
+   */
+  class CanvasKeyboardResponsePlugin {
+      constructor(jsPsych) {
+          this.jsPsych = jsPsych;
+      }
+      trial(display_element, trial) {
+          var new_html = '<div id="jspsych-canvas-keyboard-response-stimulus">' +
+              '<canvas id="jspsych-canvas-stimulus" height="' +
+              trial.canvas_size[0] +
+              '" width="' +
+              trial.canvas_size[1] +
+              '"></canvas>' +
+              "</div>";
+          // add prompt
+          if (trial.prompt !== null) {
+              new_html += trial.prompt;
+          }
+          // draw
+          display_element.innerHTML = new_html;
+          let c = document.getElementById("jspsych-canvas-stimulus");
+          trial.stimulus(c);
+          // store response
+          var response = {
+              rt: null,
+              key: null,
+          };
+          // function to end trial when it is time
+          const end_trial = () => {
+              // kill any remaining setTimeout handlers
+              this.jsPsych.pluginAPI.clearAllTimeouts();
+              // kill keyboard listeners
+              if (typeof keyboardListener !== "undefined") {
+                  this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
+              }
+              // gather the data to store for the trial
+              var trial_data = {
+                  rt: response.rt,
+                  response: response.key,
+              };
+              // clear the display
+              display_element.innerHTML = "";
+              // move on to the next trial
+              this.jsPsych.finishTrial(trial_data);
+          };
+          // function to handle responses by the subject
+          var after_response = (info) => {
+              // after a valid response, the stimulus will have the CSS class 'responded'
+              // which can be used to provide visual feedback that a response was recorded
+              display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").className +=
+                  " responded";
+              // only record the first response
+              if (response.key == null) {
+                  response = info;
+              }
+              if (trial.response_ends_trial) {
+                  end_trial();
+              }
+          };
+          // start the response listener
+          if (trial.choices != "NO_KEYS") {
+              var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({
+                  callback_function: after_response,
+                  valid_responses: trial.choices,
+                  rt_method: "performance",
+                  persist: false,
+                  allow_held_key: false,
+              });
+          }
+          // hide stimulus if stimulus_duration is set
+          if (trial.stimulus_duration !== null) {
+              this.jsPsych.pluginAPI.setTimeout(() => {
+                  display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").style.visibility = "hidden";
+              }, trial.stimulus_duration);
+          }
+          // end trial if trial_duration is set
+          if (trial.trial_duration !== null) {
+              this.jsPsych.pluginAPI.setTimeout(() => {
+                  end_trial();
+              }, trial.trial_duration);
+          }
+      }
+      simulate(trial, simulation_mode, simulation_options, load_callback) {
+          if (simulation_mode == "data-only") {
+              load_callback();
+              this.simulate_data_only(trial, simulation_options);
+          }
+          if (simulation_mode == "visual") {
+              this.simulate_visual(trial, simulation_options, load_callback);
+          }
+      }
+      simulate_data_only(trial, simulation_options) {
+          const data = this.create_simulation_data(trial, simulation_options);
+          this.jsPsych.finishTrial(data);
+      }
+      simulate_visual(trial, simulation_options, load_callback) {
+          const data = this.create_simulation_data(trial, simulation_options);
+          const display_element = this.jsPsych.getDisplayElement();
+          this.trial(display_element, trial);
+          load_callback();
+          if (data.rt !== null) {
+              this.jsPsych.pluginAPI.pressKey(data.response, data.rt);
+          }
+      }
+      create_simulation_data(trial, simulation_options) {
+          const default_data = {
+              rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
+              response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
+          };
+          const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
+          this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
+          return data;
+      }
+  }
   CanvasKeyboardResponsePlugin.info = info;
 
   return CanvasKeyboardResponsePlugin;
 
 })(jsPsychModule);
-//# sourceMappingURL=index.browser.js.map
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@1.1.3/dist/index.browser.js.map

package/dist/index.browser.min.js

@@ -1,2 +1,2 @@
-var jsPsychCanvasKeyboardResponse=function(e){"use strict";function s(e,s){for(var t=0;t<s.length;t++){var a=s[t];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var t={name:"canvas-keyboard-response",parameters:{stimulus:{type:e.ParameterType.FUNCTION,pretty_name:"Stimulus",default:void 0},choices:{type:e.ParameterType.KEYS,pretty_name:"Choices",default:"ALL_KEYS"},prompt:{type:e.ParameterType.HTML_STRING,pretty_name:"Prompt",default:null},stimulus_duration:{type:e.ParameterType.INT,pretty_name:"Stimulus duration",default:null},trial_duration:{type:e.ParameterType.INT,pretty_name:"Trial duration",default:null},response_ends_trial:{type:e.ParameterType.BOOL,pretty_name:"Response ends trial",default:!0},canvas_size:{type:e.ParameterType.INT,array:!0,pretty_name:"Canvas size",default:[500,500]}}},a=function(){function e(s){!function(e,s){if(!(e instanceof s))throw new TypeError("Cannot call a class as a function")}(this,e),this.jsPsych=s}var t,a,i;return t=e,a=[{key:"trial",value:function(e,s){var t=this,a='<div id="jspsych-canvas-keyboard-response-stimulus"><canvas id="jspsych-canvas-stimulus" height="'+s.canvas_size[0]+'" width="'+s.canvas_size[1]+'"></canvas></div>';null!==s.prompt&&(a+=s.prompt),e.innerHTML=a;var i=document.getElementById("jspsych-canvas-stimulus");s.stimulus(i);var n={rt:null,key:null},r=function(){t.jsPsych.pluginAPI.clearAllTimeouts(),void 0!==l&&t.jsPsych.pluginAPI.cancelKeyboardResponse(l);var s={rt:n.rt,response:n.key};e.innerHTML="",t.jsPsych.finishTrial(s)};if("NO_KEYS"!=s.choices)var l=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:function(t){e.querySelector("#jspsych-canvas-keyboard-response-stimulus").className+=" responded",null==n.key&&(n=t),s.response_ends_trial&&r()},valid_responses:s.choices,rt_method:"performance",persist:!1,allow_held_key:!1});null!==s.stimulus_duration&&this.jsPsych.pluginAPI.setTimeout((function(){e.querySelector("#jspsych-canvas-keyboard-response-stimulus").style.visibility="hidden"}),s.stimulus_duration),null!==s.trial_duration&&this.jsPsych.pluginAPI.setTimeout((function(){r()}),s.trial_duration)}},{key:"simulate",value:function(e,s,t,a){"data-only"==s&&(a(),this.simulate_data_only(e,t)),"visual"==s&&this.simulate_visual(e,t,a)}},{key:"simulate_data_only",value:function(e,s){var t=this.create_simulation_data(e,s);this.jsPsych.finishTrial(t)}},{key:"simulate_visual",value:function(e,s,t){var a=this.create_simulation_data(e,s),i=this.jsPsych.getDisplayElement();this.trial(i,e),t(),null!==a.rt&&this.jsPsych.pluginAPI.pressKey(a.response,a.rt)}},{key:"create_simulation_data",value:function(e,s){var t={rt:this.jsPsych.randomization.sampleExGaussian(500,50,1/150,!0),response:this.jsPsych.pluginAPI.getValidKey(e.choices)},a=this.jsPsych.pluginAPI.mergeSimulationData(t,s);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(e,a),a}}],a&&s(t.prototype,a),i&&s(t,i),Object.defineProperty(t,"prototype",{writable:!1}),e}();return a.info=t,a}(jsPsychModule);
-//# sourceMappingURL=index.browser.min.js.map
+var jsPsychCanvasKeyboardResponse=function(e){"use strict";function t(e,t){for(var s=0;s<t.length;s++){var a=t[s];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,(i=a.key,n=void 0,"symbol"==typeof(n=function(e,t){if("object"!=typeof e||null===e)return e;var s=e[Symbol.toPrimitive];if(void 0!==s){var a=s.call(e,t||"default");if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(i,"string"))?n:String(n)),a)}var i,n}var s={name:"canvas-keyboard-response",parameters:{stimulus:{type:e.ParameterType.FUNCTION,pretty_name:"Stimulus",default:void 0},choices:{type:e.ParameterType.KEYS,pretty_name:"Choices",default:"ALL_KEYS"},prompt:{type:e.ParameterType.HTML_STRING,pretty_name:"Prompt",default:null},stimulus_duration:{type:e.ParameterType.INT,pretty_name:"Stimulus duration",default:null},trial_duration:{type:e.ParameterType.INT,pretty_name:"Trial duration",default:null},response_ends_trial:{type:e.ParameterType.BOOL,pretty_name:"Response ends trial",default:!0},canvas_size:{type:e.ParameterType.INT,array:!0,pretty_name:"Canvas size",default:[500,500]}}},a=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.jsPsych=t}var s,a,i;return s=e,a=[{key:"trial",value:function(e,t){var s=this,a='<div id="jspsych-canvas-keyboard-response-stimulus"><canvas id="jspsych-canvas-stimulus" height="'+t.canvas_size[0]+'" width="'+t.canvas_size[1]+'"></canvas></div>';null!==t.prompt&&(a+=t.prompt),e.innerHTML=a;var i=document.getElementById("jspsych-canvas-stimulus");t.stimulus(i);var n={rt:null,key:null},r=function(){s.jsPsych.pluginAPI.clearAllTimeouts(),void 0!==l&&s.jsPsych.pluginAPI.cancelKeyboardResponse(l);var t={rt:n.rt,response:n.key};e.innerHTML="",s.jsPsych.finishTrial(t)};if("NO_KEYS"!=t.choices)var l=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:function(s){e.querySelector("#jspsych-canvas-keyboard-response-stimulus").className+=" responded",null==n.key&&(n=s),t.response_ends_trial&&r()},valid_responses:t.choices,rt_method:"performance",persist:!1,allow_held_key:!1});null!==t.stimulus_duration&&this.jsPsych.pluginAPI.setTimeout((function(){e.querySelector("#jspsych-canvas-keyboard-response-stimulus").style.visibility="hidden"}),t.stimulus_duration),null!==t.trial_duration&&this.jsPsych.pluginAPI.setTimeout((function(){r()}),t.trial_duration)}},{key:"simulate",value:function(e,t,s,a){"data-only"==t&&(a(),this.simulate_data_only(e,s)),"visual"==t&&this.simulate_visual(e,s,a)}},{key:"simulate_data_only",value:function(e,t){var s=this.create_simulation_data(e,t);this.jsPsych.finishTrial(s)}},{key:"simulate_visual",value:function(e,t,s){var a=this.create_simulation_data(e,t),i=this.jsPsych.getDisplayElement();this.trial(i,e),s(),null!==a.rt&&this.jsPsych.pluginAPI.pressKey(a.response,a.rt)}},{key:"create_simulation_data",value:function(e,t){var s={rt:this.jsPsych.randomization.sampleExGaussian(500,50,1/150,!0),response:this.jsPsych.pluginAPI.getValidKey(e.choices)},a=this.jsPsych.pluginAPI.mergeSimulationData(s,t);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(e,a),a}}],a&&t(s.prototype,a),i&&t(s,i),Object.defineProperty(s,"prototype",{writable:!1}),e}();return a.info=s,a}(jsPsychModule);
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@1.1.3/dist/index.browser.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.browser.min.js","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nconst info = <const>{\n  name: \"canvas-keyboard-response\",\n  parameters: {\n    /** The drawing function to apply to the canvas. Should take the canvas object as argument. */\n    stimulus: {\n      type: ParameterType.FUNCTION,\n      pretty_name: \"Stimulus\",\n      default: undefined,\n    },\n    /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */\n    choices: {\n      type: ParameterType.KEYS,\n      pretty_name: \"Choices\",\n      default: \"ALL_KEYS\",\n    },\n    /** Any content here will be displayed below the stimulus. */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      pretty_name: \"Prompt\",\n      default: null,\n    },\n    /** How long to show the stimulus. */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      pretty_name: \"Stimulus duration\",\n      default: null,\n    },\n    /** How long to show trial before it ends. */\n    trial_duration: {\n      type: ParameterType.INT,\n      pretty_name: \"Trial duration\",\n      default: null,\n    },\n    /** If true, trial will end when subject makes a response. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response ends trial\",\n      default: true,\n    },\n    /** Array containing the height (first value) and width (second value) of the canvas element. */\n    canvas_size: {\n      type: ParameterType.INT,\n      array: true,\n      pretty_name: \"Canvas size\",\n      default: [500, 500],\n    },\n  },\n};\n\ntype Info = typeof info;\n\n/**\n * **canvas-keyboard-response**\n *\n * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response\n *\n * @author Chris Jungerius (modified from Josh de Leeuw)\n * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}\n */\nclass CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html =\n      '<div id=\"jspsych-canvas-keyboard-response-stimulus\">' +\n      '<canvas id=\"jspsych-canvas-stimulus\" height=\"' +\n      trial.canvas_size[0] +\n      '\" width=\"' +\n      trial.canvas_size[1] +\n      '\"></canvas>' +\n      \"</div>\";\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n    let c = document.getElementById(\"jspsych-canvas-stimulus\");\n    trial.stimulus(c);\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill any remaining setTimeout handlers\n      this.jsPsych.pluginAPI.clearAllTimeouts();\n\n      // kill keyboard listeners\n      if (typeof keyboardListener !== \"undefined\") {\n        this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n      }\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        response: response.key,\n      };\n\n      // clear the display\n      display_element.innerHTML = \"\";\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-canvas-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = info;\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\") {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n      });\n    }\n\n    // hide stimulus if stimulus_duration is set\n    if (trial.stimulus_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        display_element.querySelector<HTMLElement>(\n          \"#jspsych-canvas-keyboard-response-stimulus\"\n        ).style.visibility = \"hidden\";\n      }, trial.stimulus_duration);\n    }\n\n    // end trial if trial_duration is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        end_trial();\n      }, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    if (data.rt !== null) {\n      this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":["info","name","parameters","stimulus","type","ParameterType","FUNCTION","pretty_name","default","undefined","choices","KEYS","prompt","HTML_STRING","stimulus_duration","INT","trial_duration","response_ends_trial","BOOL","canvas_size","array","CanvasKeyboardResponsePlugin","jsPsych","_classCallCheck","this","display_element","trial","_this","new_html","innerHTML","c","document","getElementById","response","rt","key","end_trial","pluginAPI","clearAllTimeouts","keyboardListener","cancelKeyboardResponse","trial_data","finishTrial","getKeyboardResponse","callback_function","querySelector","className","valid_responses","rt_method","persist","allow_held_key","setTimeout","style","visibility","value","simulation_mode","simulation_options","load_callback","simulate_data_only","simulate_visual","data","create_simulation_data","getDisplayElement","pressKey","default_data","randomization","sampleExGaussian","getValidKey","mergeSimulationData","ensureSimulationDataConsistency"],"mappings":"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"}
+{"version":3,"file":"index.browser.min.js","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nconst info = <const>{\n  name: \"canvas-keyboard-response\",\n  parameters: {\n    /** The drawing function to apply to the canvas. Should take the canvas object as argument. */\n    stimulus: {\n      type: ParameterType.FUNCTION,\n      pretty_name: \"Stimulus\",\n      default: undefined,\n    },\n    /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */\n    choices: {\n      type: ParameterType.KEYS,\n      pretty_name: \"Choices\",\n      default: \"ALL_KEYS\",\n    },\n    /** Any content here will be displayed below the stimulus. */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      pretty_name: \"Prompt\",\n      default: null,\n    },\n    /** How long to show the stimulus. */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      pretty_name: \"Stimulus duration\",\n      default: null,\n    },\n    /** How long to show trial before it ends. */\n    trial_duration: {\n      type: ParameterType.INT,\n      pretty_name: \"Trial duration\",\n      default: null,\n    },\n    /** If true, trial will end when subject makes a response. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response ends trial\",\n      default: true,\n    },\n    /** Array containing the height (first value) and width (second value) of the canvas element. */\n    canvas_size: {\n      type: ParameterType.INT,\n      array: true,\n      pretty_name: \"Canvas size\",\n      default: [500, 500],\n    },\n  },\n};\n\ntype Info = typeof info;\n\n/**\n * **canvas-keyboard-response**\n *\n * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response\n *\n * @author Chris Jungerius (modified from Josh de Leeuw)\n * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}\n */\nclass CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html =\n      '<div id=\"jspsych-canvas-keyboard-response-stimulus\">' +\n      '<canvas id=\"jspsych-canvas-stimulus\" height=\"' +\n      trial.canvas_size[0] +\n      '\" width=\"' +\n      trial.canvas_size[1] +\n      '\"></canvas>' +\n      \"</div>\";\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n    let c = document.getElementById(\"jspsych-canvas-stimulus\");\n    trial.stimulus(c);\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill any remaining setTimeout handlers\n      this.jsPsych.pluginAPI.clearAllTimeouts();\n\n      // kill keyboard listeners\n      if (typeof keyboardListener !== \"undefined\") {\n        this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n      }\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        response: response.key,\n      };\n\n      // clear the display\n      display_element.innerHTML = \"\";\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-canvas-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = info;\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\") {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n      });\n    }\n\n    // hide stimulus if stimulus_duration is set\n    if (trial.stimulus_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        display_element.querySelector<HTMLElement>(\n          \"#jspsych-canvas-keyboard-response-stimulus\"\n        ).style.visibility = \"hidden\";\n      }, trial.stimulus_duration);\n    }\n\n    // end trial if trial_duration is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        end_trial();\n      }, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    if (data.rt !== null) {\n      this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":["info","name","parameters","stimulus","type","ParameterType","FUNCTION","pretty_name","default","undefined","choices","KEYS","prompt","HTML_STRING","stimulus_duration","INT","trial_duration","response_ends_trial","BOOL","canvas_size","array","CanvasKeyboardResponsePlugin","jsPsych","_classCallCheck","this","key","value","display_element","trial","_this","new_html","innerHTML","c","document","getElementById","response","rt","end_trial","pluginAPI","clearAllTimeouts","keyboardListener","cancelKeyboardResponse","trial_data","finishTrial","getKeyboardResponse","callback_function","querySelector","className","valid_responses","rt_method","persist","allow_held_key","setTimeout","style","visibility","simulation_mode","simulation_options","load_callback","simulate_data_only","simulate_visual","data","create_simulation_data","getDisplayElement","pressKey","default_data","randomization","sampleExGaussian","getValidKey","mergeSimulationData","ensureSimulationDataConsistency"],"mappings":"0iBAEA,IAAMA,EAAc,CAClBC,KAAM,2BACNC,WAAY,CAEVC,SAAU,CACRC,KAAMC,EAAaA,cAACC,SACpBC,YAAa,WACbC,aAASC,GAGXC,QAAS,CACPN,KAAMC,EAAaA,cAACM,KACpBJ,YAAa,UACbC,QAAS,YAGXI,OAAQ,CACNR,KAAMC,EAAaA,cAACQ,YACpBN,YAAa,SACbC,QAAS,MAGXM,kBAAmB,CACjBV,KAAMC,EAAaA,cAACU,IACpBR,YAAa,oBACbC,QAAS,MAGXQ,eAAgB,CACdZ,KAAMC,EAAaA,cAACU,IACpBR,YAAa,iBACbC,QAAS,MAGXS,oBAAqB,CACnBb,KAAMC,EAAaA,cAACa,KACpBX,YAAa,sBACbC,SAAS,GAGXW,YAAa,CACXf,KAAMC,EAAaA,cAACU,IACpBK,OAAO,EACPb,YAAa,cACbC,QAAS,CAAC,IAAK,QAefa,EAA4B,WAGhC,SAAAA,EAAoBC,gGAAgBC,MAAAF,GAAhBG,KAAOF,QAAPA,CAAmB,WA2ItC,SA3IuCD,IAAA,CAAA,CAAAI,IAAA,QAAAC,MAExC,SAAMC,EAA8BC,GAAsB,IAAAC,EAAAL,KACpDM,EACF,oGAEAF,EAAMT,YAAY,GAClB,YACAS,EAAMT,YAAY,GAJlB,oBAQmB,OAAjBS,EAAMhB,SACRkB,GAAYF,EAAMhB,QAIpBe,EAAgBI,UAAYD,EAC5B,IAAIE,EAAIC,SAASC,eAAe,2BAChCN,EAAMzB,SAAS6B,GAEf,IAAIG,EAAW,CACbC,GAAI,KACJX,IAAK,MAIDY,EAAY,WAEhBR,EAAKP,QAAQgB,UAAUC,wBAGS,IAArBC,GACTX,EAAKP,QAAQgB,UAAUG,uBAAuBD,GAIhD,IAAIE,EAAa,CACfN,GAAID,EAASC,GACbD,SAAUA,EAASV,KAIrBE,EAAgBI,UAAY,GAG5BF,EAAKP,QAAQqB,YAAYD,IAqB3B,GAAqB,WAAjBd,EAAMlB,QACR,IAAI8B,EAAmBhB,KAAKF,QAAQgB,UAAUM,oBAAoB,CAChEC,kBAnBiB,SAAC7C,GAGpB2B,EAAgBmB,cAAc,8CAA8CC,WAC1E,aAGkB,MAAhBZ,EAASV,MACXU,EAAWnC,GAGT4B,EAAMX,qBACRoB,KAQAW,gBAAiBpB,EAAMlB,QACvBuC,UAAW,cACXC,SAAS,EACTC,gBAAgB,IAKY,OAA5BvB,EAAMd,mBACRU,KAAKF,QAAQgB,UAAUc,YAAW,WAChCzB,EAAgBmB,cACd,8CACAO,MAAMC,WAAa,QACvB,GAAG1B,EAAMd,mBAIkB,OAAzBc,EAAMZ,gBACRQ,KAAKF,QAAQgB,UAAUc,YAAW,WAChCf,GACF,GAAGT,EAAMZ,eAEb,GAAC,CAAAS,IAAA,WAAAC,MAED,SACEE,EACA2B,EACAC,EACAC,GAEuB,aAAnBF,IACFE,IACAjC,KAAKkC,mBAAmB9B,EAAO4B,IAEV,UAAnBD,GACF/B,KAAKmC,gBAAgB/B,EAAO4B,EAAoBC,EAEpD,GAAC,CAAAhC,IAAA,qBAAAC,MAEO,SAAmBE,EAAwB4B,GACjD,IAAMI,EAAOpC,KAAKqC,uBAAuBjC,EAAO4B,GAEhDhC,KAAKF,QAAQqB,YAAYiB,EAC3B,GAAC,CAAAnC,IAAA,kBAAAC,MAEO,SAAgBE,EAAwB4B,EAAoBC,GAClE,IAAMG,EAAOpC,KAAKqC,uBAAuBjC,EAAO4B,GAE1C7B,EAAkBH,KAAKF,QAAQwC,oBAErCtC,KAAKI,MAAMD,EAAiBC,GAC5B6B,IAEgB,OAAZG,EAAKxB,IACPZ,KAAKF,QAAQgB,UAAUyB,SAASH,EAAKzB,SAAUyB,EAAKxB,GAExD,GAAC,CAAAX,IAAA,yBAAAC,MAEO,SAAuBE,EAAwB4B,GACrD,IAAMQ,EAAe,CACnB5B,GAAIZ,KAAKF,QAAQ2C,cAAcC,iBAAiB,IAAK,GAAI,EAAI,KAAK,GAClE/B,SAAUX,KAAKF,QAAQgB,UAAU6B,YAAYvC,EAAMlB,UAG/CkD,EAAOpC,KAAKF,QAAQgB,UAAU8B,oBAAoBJ,EAAcR,GAItE,OAFAhC,KAAKF,QAAQgB,UAAU+B,gCAAgCzC,EAAOgC,GAEvDA,CACT,qFAACvC,CAAA,CA9I+B,UACzBA,EAAIrB,KAAGA"}