@jspsych/plugin-image-keyboard-response 1.1.2 → 1.1.3

package/README.md

@@ -27,9 +27,15 @@ See the [contributing to jsPsych](https://www.jspsych.org/latest/developers/cont
 
 ## Citation
 
-If you use this library in academic work, please cite the [paper that describes jsPsych](http://link.springer.com/article/10.3758%2Fs13428-014-0458-y):
+If you use this library in academic work, the preferred citation is:
 
-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
+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
 

package/dist/index.browser.js

@@ -1,285 +1,285 @@
 var jsPsychImageKeyboardResponse = (function (jspsych) {
   'use strict';
 
-  const info = {
-      name: "image-keyboard-response",
-      parameters: {
-          /** The image to be displayed */
-          stimulus: {
-              type: jspsych.ParameterType.IMAGE,
-              pretty_name: "Stimulus",
-              default: undefined,
-          },
-          /** Set the image height in pixels */
-          stimulus_height: {
-              type: jspsych.ParameterType.INT,
-              pretty_name: "Image height",
-              default: null,
-          },
-          /** Set the image width in pixels */
-          stimulus_width: {
-              type: jspsych.ParameterType.INT,
-              pretty_name: "Image width",
-              default: null,
-          },
-          /** Maintain the aspect ratio after setting width or height */
-          maintain_aspect_ratio: {
-              type: jspsych.ParameterType.BOOL,
-              pretty_name: "Maintain aspect ratio",
-              default: true,
-          },
-          /** 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,
-          },
-          /**
-           * If true, the image will be drawn onto a canvas element (prevents blank screen between consecutive images in some browsers).
-           * If false, the image will be shown via an img element.
-           */
-          render_on_canvas: {
-              type: jspsych.ParameterType.BOOL,
-              pretty_name: "Render on canvas",
-              default: true,
-          },
-      },
-  };
-  /**
-   * **image-keyboard-response**
-   *
-   * jsPsych plugin for displaying an image stimulus and getting a keyboard response
-   *
-   * @author Josh de Leeuw
-   * @see {@link https://www.jspsych.org/plugins/jspsych-image-keyboard-response/ image-keyboard-response plugin documentation on jspsych.org}
-   */
-  class ImageKeyboardResponsePlugin {
-      constructor(jsPsych) {
-          this.jsPsych = jsPsych;
-      }
-      trial(display_element, trial) {
-          var height, width;
-          if (trial.render_on_canvas) {
-              var image_drawn = false;
-              // first clear the display element (because the render_on_canvas method appends to display_element instead of overwriting it with .innerHTML)
-              if (display_element.hasChildNodes()) {
-                  // can't loop through child list because the list will be modified by .removeChild()
-                  while (display_element.firstChild) {
-                      display_element.removeChild(display_element.firstChild);
-                  }
-              }
-              // create canvas element and image
-              var canvas = document.createElement("canvas");
-              canvas.id = "jspsych-image-keyboard-response-stimulus";
-              canvas.style.margin = "0";
-              canvas.style.padding = "0";
-              var ctx = canvas.getContext("2d");
-              var img = new Image();
-              img.onload = () => {
-                  // if image wasn't preloaded, then it will need to be drawn whenever it finishes loading
-                  if (!image_drawn) {
-                      getHeightWidth(); // only possible to get width/height after image loads
-                      ctx.drawImage(img, 0, 0, width, height);
-                  }
-              };
-              img.src = trial.stimulus;
-              // get/set image height and width - this can only be done after image loads because uses image's naturalWidth/naturalHeight properties
-              const getHeightWidth = () => {
-                  if (trial.stimulus_height !== null) {
-                      height = trial.stimulus_height;
-                      if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {
-                          width = img.naturalWidth * (trial.stimulus_height / img.naturalHeight);
-                      }
-                  }
-                  else {
-                      height = img.naturalHeight;
-                  }
-                  if (trial.stimulus_width !== null) {
-                      width = trial.stimulus_width;
-                      if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {
-                          height = img.naturalHeight * (trial.stimulus_width / img.naturalWidth);
-                      }
-                  }
-                  else if (!(trial.stimulus_height !== null && trial.maintain_aspect_ratio)) {
-                      // if stimulus width is null, only use the image's natural width if the width value wasn't set
-                      // in the if statement above, based on a specified height and maintain_aspect_ratio = true
-                      width = img.naturalWidth;
-                  }
-                  canvas.height = height;
-                  canvas.width = width;
-              };
-              getHeightWidth(); // call now, in case image loads immediately (is cached)
-              // add canvas and draw image
-              display_element.insertBefore(canvas, null);
-              if (img.complete && Number.isFinite(width) && Number.isFinite(height)) {
-                  // if image has loaded and width/height have been set, then draw it now
-                  // (don't rely on img onload function to draw image when image is in the cache, because that causes a delay in the image presentation)
-                  ctx.drawImage(img, 0, 0, width, height);
-                  image_drawn = true;
-              }
-              // add prompt if there is one
-              if (trial.prompt !== null) {
-                  display_element.insertAdjacentHTML("beforeend", trial.prompt);
-              }
-          }
-          else {
-              // display stimulus as an image element
-              var html = '<img src="' + trial.stimulus + '" id="jspsych-image-keyboard-response-stimulus">';
-              // add prompt
-              if (trial.prompt !== null) {
-                  html += trial.prompt;
-              }
-              // update the page content
-              display_element.innerHTML = html;
-              // set image dimensions after image has loaded (so that we have access to naturalHeight/naturalWidth)
-              var img = display_element.querySelector("#jspsych-image-keyboard-response-stimulus");
-              if (trial.stimulus_height !== null) {
-                  height = trial.stimulus_height;
-                  if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {
-                      width = img.naturalWidth * (trial.stimulus_height / img.naturalHeight);
-                  }
-              }
-              else {
-                  height = img.naturalHeight;
-              }
-              if (trial.stimulus_width !== null) {
-                  width = trial.stimulus_width;
-                  if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {
-                      height = img.naturalHeight * (trial.stimulus_width / img.naturalWidth);
-                  }
-              }
-              else if (!(trial.stimulus_height !== null && trial.maintain_aspect_ratio)) {
-                  // if stimulus width is null, only use the image's natural width if the width value wasn't set
-                  // in the if statement above, based on a specified height and maintain_aspect_ratio = true
-                  width = img.naturalWidth;
-              }
-              img.style.height = height.toString() + "px";
-              img.style.width = width.toString() + "px";
-          }
-          // 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,
-                  stimulus: trial.stimulus,
-                  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-image-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-image-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);
-          }
-          else if (trial.response_ends_trial === false) {
-              console.warn("The experiment may be deadlocked. Try setting a trial duration or set response_ends_trial to true.");
-          }
-      }
-      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 = {
-              stimulus: trial.stimulus,
-              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: "image-keyboard-response",
+      parameters: {
+          /** The image to be displayed */
+          stimulus: {
+              type: jspsych.ParameterType.IMAGE,
+              pretty_name: "Stimulus",
+              default: undefined,
+          },
+          /** Set the image height in pixels */
+          stimulus_height: {
+              type: jspsych.ParameterType.INT,
+              pretty_name: "Image height",
+              default: null,
+          },
+          /** Set the image width in pixels */
+          stimulus_width: {
+              type: jspsych.ParameterType.INT,
+              pretty_name: "Image width",
+              default: null,
+          },
+          /** Maintain the aspect ratio after setting width or height */
+          maintain_aspect_ratio: {
+              type: jspsych.ParameterType.BOOL,
+              pretty_name: "Maintain aspect ratio",
+              default: true,
+          },
+          /** 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,
+          },
+          /**
+           * If true, the image will be drawn onto a canvas element (prevents blank screen between consecutive images in some browsers).
+           * If false, the image will be shown via an img element.
+           */
+          render_on_canvas: {
+              type: jspsych.ParameterType.BOOL,
+              pretty_name: "Render on canvas",
+              default: true,
+          },
+      },
+  };
+  /**
+   * **image-keyboard-response**
+   *
+   * jsPsych plugin for displaying an image stimulus and getting a keyboard response
+   *
+   * @author Josh de Leeuw
+   * @see {@link https://www.jspsych.org/plugins/jspsych-image-keyboard-response/ image-keyboard-response plugin documentation on jspsych.org}
+   */
+  class ImageKeyboardResponsePlugin {
+      constructor(jsPsych) {
+          this.jsPsych = jsPsych;
+      }
+      trial(display_element, trial) {
+          var height, width;
+          if (trial.render_on_canvas) {
+              var image_drawn = false;
+              // first clear the display element (because the render_on_canvas method appends to display_element instead of overwriting it with .innerHTML)
+              if (display_element.hasChildNodes()) {
+                  // can't loop through child list because the list will be modified by .removeChild()
+                  while (display_element.firstChild) {
+                      display_element.removeChild(display_element.firstChild);
+                  }
+              }
+              // create canvas element and image
+              var canvas = document.createElement("canvas");
+              canvas.id = "jspsych-image-keyboard-response-stimulus";
+              canvas.style.margin = "0";
+              canvas.style.padding = "0";
+              var ctx = canvas.getContext("2d");
+              var img = new Image();
+              img.onload = () => {
+                  // if image wasn't preloaded, then it will need to be drawn whenever it finishes loading
+                  if (!image_drawn) {
+                      getHeightWidth(); // only possible to get width/height after image loads
+                      ctx.drawImage(img, 0, 0, width, height);
+                  }
+              };
+              img.src = trial.stimulus;
+              // get/set image height and width - this can only be done after image loads because uses image's naturalWidth/naturalHeight properties
+              const getHeightWidth = () => {
+                  if (trial.stimulus_height !== null) {
+                      height = trial.stimulus_height;
+                      if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {
+                          width = img.naturalWidth * (trial.stimulus_height / img.naturalHeight);
+                      }
+                  }
+                  else {
+                      height = img.naturalHeight;
+                  }
+                  if (trial.stimulus_width !== null) {
+                      width = trial.stimulus_width;
+                      if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {
+                          height = img.naturalHeight * (trial.stimulus_width / img.naturalWidth);
+                      }
+                  }
+                  else if (!(trial.stimulus_height !== null && trial.maintain_aspect_ratio)) {
+                      // if stimulus width is null, only use the image's natural width if the width value wasn't set
+                      // in the if statement above, based on a specified height and maintain_aspect_ratio = true
+                      width = img.naturalWidth;
+                  }
+                  canvas.height = height;
+                  canvas.width = width;
+              };
+              getHeightWidth(); // call now, in case image loads immediately (is cached)
+              // add canvas and draw image
+              display_element.insertBefore(canvas, null);
+              if (img.complete && Number.isFinite(width) && Number.isFinite(height)) {
+                  // if image has loaded and width/height have been set, then draw it now
+                  // (don't rely on img onload function to draw image when image is in the cache, because that causes a delay in the image presentation)
+                  ctx.drawImage(img, 0, 0, width, height);
+                  image_drawn = true;
+              }
+              // add prompt if there is one
+              if (trial.prompt !== null) {
+                  display_element.insertAdjacentHTML("beforeend", trial.prompt);
+              }
+          }
+          else {
+              // display stimulus as an image element
+              var html = '<img src="' + trial.stimulus + '" id="jspsych-image-keyboard-response-stimulus">';
+              // add prompt
+              if (trial.prompt !== null) {
+                  html += trial.prompt;
+              }
+              // update the page content
+              display_element.innerHTML = html;
+              // set image dimensions after image has loaded (so that we have access to naturalHeight/naturalWidth)
+              var img = display_element.querySelector("#jspsych-image-keyboard-response-stimulus");
+              if (trial.stimulus_height !== null) {
+                  height = trial.stimulus_height;
+                  if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {
+                      width = img.naturalWidth * (trial.stimulus_height / img.naturalHeight);
+                  }
+              }
+              else {
+                  height = img.naturalHeight;
+              }
+              if (trial.stimulus_width !== null) {
+                  width = trial.stimulus_width;
+                  if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {
+                      height = img.naturalHeight * (trial.stimulus_width / img.naturalWidth);
+                  }
+              }
+              else if (!(trial.stimulus_height !== null && trial.maintain_aspect_ratio)) {
+                  // if stimulus width is null, only use the image's natural width if the width value wasn't set
+                  // in the if statement above, based on a specified height and maintain_aspect_ratio = true
+                  width = img.naturalWidth;
+              }
+              img.style.height = height.toString() + "px";
+              img.style.width = width.toString() + "px";
+          }
+          // 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,
+                  stimulus: trial.stimulus,
+                  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-image-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-image-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);
+          }
+          else if (trial.response_ends_trial === false) {
+              console.warn("The experiment may be deadlocked. Try setting a trial duration or set response_ends_trial to true.");
+          }
+      }
+      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 = {
+              stimulus: trial.stimulus,
+              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;
+      }
+  }
   ImageKeyboardResponsePlugin.info = info;
 
   return ImageKeyboardResponsePlugin;
 
 })(jsPsychModule);
-//# sourceMappingURL=index.browser.js.map
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.1.3/dist/index.browser.js.map

package/dist/index.browser.min.js

@@ -1,2 +1,2 @@
-var jsPsychImageKeyboardResponse=function(t){"use strict";function e(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}var i={name:"image-keyboard-response",parameters:{stimulus:{type:t.ParameterType.IMAGE,pretty_name:"Stimulus",default:void 0},stimulus_height:{type:t.ParameterType.INT,pretty_name:"Image height",default:null},stimulus_width:{type:t.ParameterType.INT,pretty_name:"Image width",default:null},maintain_aspect_ratio:{type:t.ParameterType.BOOL,pretty_name:"Maintain aspect ratio",default:!0},choices:{type:t.ParameterType.KEYS,pretty_name:"Choices",default:"ALL_KEYS"},prompt:{type:t.ParameterType.HTML_STRING,pretty_name:"Prompt",default:null},stimulus_duration:{type:t.ParameterType.INT,pretty_name:"Stimulus duration",default:null},trial_duration:{type:t.ParameterType.INT,pretty_name:"Trial duration",default:null},response_ends_trial:{type:t.ParameterType.BOOL,pretty_name:"Response ends trial",default:!0},render_on_canvas:{type:t.ParameterType.BOOL,pretty_name:"Render on canvas",default:!0}}},s=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.jsPsych=e}var i,s,a;return i=t,s=[{key:"trial",value:function(t,e){var i,s,a=this;if(e.render_on_canvas){var n=!1;if(t.hasChildNodes())for(;t.firstChild;)t.removeChild(t.firstChild);var r=document.createElement("canvas");r.id="jspsych-image-keyboard-response-stimulus",r.style.margin="0",r.style.padding="0";var l=r.getContext("2d");(m=new Image).onload=function(){n||(u(),l.drawImage(m,0,0,s,i))},m.src=e.stimulus;var u=function(){null!==e.stimulus_height?(i=e.stimulus_height,null==e.stimulus_width&&e.maintain_aspect_ratio&&(s=m.naturalWidth*(e.stimulus_height/m.naturalHeight))):i=m.naturalHeight,null!==e.stimulus_width?(s=e.stimulus_width,null==e.stimulus_height&&e.maintain_aspect_ratio&&(i=m.naturalHeight*(e.stimulus_width/m.naturalWidth))):null!==e.stimulus_height&&e.maintain_aspect_ratio||(s=m.naturalWidth),r.height=i,r.width=s};u(),t.insertBefore(r,null),m.complete&&Number.isFinite(s)&&Number.isFinite(i)&&(l.drawImage(m,0,0,s,i),n=!0),null!==e.prompt&&t.insertAdjacentHTML("beforeend",e.prompt)}else{var o='<img src="'+e.stimulus+'" id="jspsych-image-keyboard-response-stimulus">';null!==e.prompt&&(o+=e.prompt),t.innerHTML=o;var m=t.querySelector("#jspsych-image-keyboard-response-stimulus");null!==e.stimulus_height?(i=e.stimulus_height,null==e.stimulus_width&&e.maintain_aspect_ratio&&(s=m.naturalWidth*(e.stimulus_height/m.naturalHeight))):i=m.naturalHeight,null!==e.stimulus_width?(s=e.stimulus_width,null==e.stimulus_height&&e.maintain_aspect_ratio&&(i=m.naturalHeight*(e.stimulus_width/m.naturalWidth))):null!==e.stimulus_height&&e.maintain_aspect_ratio||(s=m.naturalWidth),m.style.height=i.toString()+"px",m.style.width=s.toString()+"px"}var h={rt:null,key:null},p=function(){a.jsPsych.pluginAPI.clearAllTimeouts(),void 0!==d&&a.jsPsych.pluginAPI.cancelKeyboardResponse(d);var i={rt:h.rt,stimulus:e.stimulus,response:h.key};t.innerHTML="",a.jsPsych.finishTrial(i)};if("NO_KEYS"!=e.choices)var d=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:function(i){t.querySelector("#jspsych-image-keyboard-response-stimulus").className+=" responded",null==h.key&&(h=i),e.response_ends_trial&&p()},valid_responses:e.choices,rt_method:"performance",persist:!1,allow_held_key:!1});null!==e.stimulus_duration&&this.jsPsych.pluginAPI.setTimeout((function(){t.querySelector("#jspsych-image-keyboard-response-stimulus").style.visibility="hidden"}),e.stimulus_duration),null!==e.trial_duration?this.jsPsych.pluginAPI.setTimeout((function(){p()}),e.trial_duration):!1===e.response_ends_trial&&console.warn("The experiment may be deadlocked. Try setting a trial duration or set response_ends_trial to true.")}},{key:"simulate",value:function(t,e,i,s){"data-only"==e&&(s(),this.simulate_data_only(t,i)),"visual"==e&&this.simulate_visual(t,i,s)}},{key:"simulate_data_only",value:function(t,e){var i=this.create_simulation_data(t,e);this.jsPsych.finishTrial(i)}},{key:"simulate_visual",value:function(t,e,i){var s=this.create_simulation_data(t,e),a=this.jsPsych.getDisplayElement();this.trial(a,t),i(),null!==s.rt&&this.jsPsych.pluginAPI.pressKey(s.response,s.rt)}},{key:"create_simulation_data",value:function(t,e){var i={stimulus:t.stimulus,rt:this.jsPsych.randomization.sampleExGaussian(500,50,1/150,!0),response:this.jsPsych.pluginAPI.getValidKey(t.choices)},s=this.jsPsych.pluginAPI.mergeSimulationData(i,e);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(t,s),s}}],s&&e(i.prototype,s),a&&e(i,a),Object.defineProperty(i,"prototype",{writable:!1}),t}();return s.info=i,s}(jsPsychModule);
-//# sourceMappingURL=index.browser.min.js.map
+var jsPsychImageKeyboardResponse=function(t){"use strict";function e(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,(s=a.key,r=void 0,"symbol"==typeof(r=function(t,e){if("object"!=typeof t||null===t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var a=i.call(t,e||"default");if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(s,"string"))?r:String(r)),a)}var s,r}var i={name:"image-keyboard-response",parameters:{stimulus:{type:t.ParameterType.IMAGE,pretty_name:"Stimulus",default:void 0},stimulus_height:{type:t.ParameterType.INT,pretty_name:"Image height",default:null},stimulus_width:{type:t.ParameterType.INT,pretty_name:"Image width",default:null},maintain_aspect_ratio:{type:t.ParameterType.BOOL,pretty_name:"Maintain aspect ratio",default:!0},choices:{type:t.ParameterType.KEYS,pretty_name:"Choices",default:"ALL_KEYS"},prompt:{type:t.ParameterType.HTML_STRING,pretty_name:"Prompt",default:null},stimulus_duration:{type:t.ParameterType.INT,pretty_name:"Stimulus duration",default:null},trial_duration:{type:t.ParameterType.INT,pretty_name:"Trial duration",default:null},response_ends_trial:{type:t.ParameterType.BOOL,pretty_name:"Response ends trial",default:!0},render_on_canvas:{type:t.ParameterType.BOOL,pretty_name:"Render on canvas",default:!0}}},a=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.jsPsych=e}var i,a,s;return i=t,a=[{key:"trial",value:function(t,e){var i,a,s=this;if(e.render_on_canvas){var r=!1;if(t.hasChildNodes())for(;t.firstChild;)t.removeChild(t.firstChild);var n=document.createElement("canvas");n.id="jspsych-image-keyboard-response-stimulus",n.style.margin="0",n.style.padding="0";var u=n.getContext("2d");(m=new Image).onload=function(){r||(l(),u.drawImage(m,0,0,a,i))},m.src=e.stimulus;var l=function(){null!==e.stimulus_height?(i=e.stimulus_height,null==e.stimulus_width&&e.maintain_aspect_ratio&&(a=m.naturalWidth*(e.stimulus_height/m.naturalHeight))):i=m.naturalHeight,null!==e.stimulus_width?(a=e.stimulus_width,null==e.stimulus_height&&e.maintain_aspect_ratio&&(i=m.naturalHeight*(e.stimulus_width/m.naturalWidth))):null!==e.stimulus_height&&e.maintain_aspect_ratio||(a=m.naturalWidth),n.height=i,n.width=a};l(),t.insertBefore(n,null),m.complete&&Number.isFinite(a)&&Number.isFinite(i)&&(u.drawImage(m,0,0,a,i),r=!0),null!==e.prompt&&t.insertAdjacentHTML("beforeend",e.prompt)}else{var o='<img src="'+e.stimulus+'" id="jspsych-image-keyboard-response-stimulus">';null!==e.prompt&&(o+=e.prompt),t.innerHTML=o;var m=t.querySelector("#jspsych-image-keyboard-response-stimulus");null!==e.stimulus_height?(i=e.stimulus_height,null==e.stimulus_width&&e.maintain_aspect_ratio&&(a=m.naturalWidth*(e.stimulus_height/m.naturalHeight))):i=m.naturalHeight,null!==e.stimulus_width?(a=e.stimulus_width,null==e.stimulus_height&&e.maintain_aspect_ratio&&(i=m.naturalHeight*(e.stimulus_width/m.naturalWidth))):null!==e.stimulus_height&&e.maintain_aspect_ratio||(a=m.naturalWidth),m.style.height=i.toString()+"px",m.style.width=a.toString()+"px"}var h={rt:null,key:null},p=function(){s.jsPsych.pluginAPI.clearAllTimeouts(),void 0!==y&&s.jsPsych.pluginAPI.cancelKeyboardResponse(y);var i={rt:h.rt,stimulus:e.stimulus,response:h.key};t.innerHTML="",s.jsPsych.finishTrial(i)};if("NO_KEYS"!=e.choices)var y=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:function(i){t.querySelector("#jspsych-image-keyboard-response-stimulus").className+=" responded",null==h.key&&(h=i),e.response_ends_trial&&p()},valid_responses:e.choices,rt_method:"performance",persist:!1,allow_held_key:!1});null!==e.stimulus_duration&&this.jsPsych.pluginAPI.setTimeout((function(){t.querySelector("#jspsych-image-keyboard-response-stimulus").style.visibility="hidden"}),e.stimulus_duration),null!==e.trial_duration?this.jsPsych.pluginAPI.setTimeout((function(){p()}),e.trial_duration):!1===e.response_ends_trial&&console.warn("The experiment may be deadlocked. Try setting a trial duration or set response_ends_trial to true.")}},{key:"simulate",value:function(t,e,i,a){"data-only"==e&&(a(),this.simulate_data_only(t,i)),"visual"==e&&this.simulate_visual(t,i,a)}},{key:"simulate_data_only",value:function(t,e){var i=this.create_simulation_data(t,e);this.jsPsych.finishTrial(i)}},{key:"simulate_visual",value:function(t,e,i){var a=this.create_simulation_data(t,e),s=this.jsPsych.getDisplayElement();this.trial(s,t),i(),null!==a.rt&&this.jsPsych.pluginAPI.pressKey(a.response,a.rt)}},{key:"create_simulation_data",value:function(t,e){var i={stimulus:t.stimulus,rt:this.jsPsych.randomization.sampleExGaussian(500,50,1/150,!0),response:this.jsPsych.pluginAPI.getValidKey(t.choices)},a=this.jsPsych.pluginAPI.mergeSimulationData(i,e);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(t,a),a}}],a&&e(i.prototype,a),s&&e(i,s),Object.defineProperty(i,"prototype",{writable:!1}),t}();return a.info=i,a}(jsPsychModule);
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.1.3/dist/index.browser.min.js.map