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

package/dist/index.browser.js

@@ -1,285 +1,271 @@
 var jsPsychImageKeyboardResponse = (function (jspsych) {
   'use strict';
 
+  var version = "2.1.0";
+
   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,
-          },
+    name: "image-keyboard-response",
+    version,
+    parameters: {
+      /** The path of the image file to be displayed. */
+      stimulus: {
+        type: jspsych.ParameterType.IMAGE,
+        default: void 0
+      },
+      /** Set the height of the image in pixels. If left null (no value specified), then the image will display at its natural height. */
+      stimulus_height: {
+        type: jspsych.ParameterType.INT,
+        default: null
+      },
+      /** Set the width of the image in pixels. If left null (no value specified), then the image will display at its natural width. */
+      stimulus_width: {
+        type: jspsych.ParameterType.INT,
+        default: null
+      },
+      /** If setting *only* the width or *only* the height and this parameter is true, then the other dimension will be scaled
+       * to maintain the image's aspect ratio. */
+      maintain_aspect_ratio: {
+        type: jspsych.ParameterType.BOOL,
+        default: true
+      },
+      /**his array contains the key(s) that the participant is allowed to press in order to respond to the stimulus. Keys should
+       * be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see
+       * [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) and
+       * [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/)
+       * for more examples. Any key presses that are not listed in the array will be ignored. The default value of `"ALL_KEYS"`
+       * means that all keys will be accepted as valid responses. Specifying `"NO_KEYS"` will mean that no responses are allowed. */
+      choices: {
+        type: jspsych.ParameterType.KEYS,
+        default: "ALL_KEYS"
       },
+      /**This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can
+       * be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press). */
+      prompt: {
+        type: jspsych.ParameterType.HTML_STRING,
+        default: null
+      },
+      /** How long to show the stimulus for in milliseconds. If the value is `null`, then the stimulus will be shown until the
+       * participant makes a response. */
+      stimulus_duration: {
+        type: jspsych.ParameterType.INT,
+        default: null
+      },
+      /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the participant
+       * fails to make a response before this timer is reached, the participant's response will be recorded as null for the
+       * trial and the trial will end. If the value of this parameter is `null`, then the trial will wait for a response indefinitely. */
+      trial_duration: {
+        type: jspsych.ParameterType.INT,
+        default: null
+      },
+      /** If true, then the trial will end whenever the participant makes a response (assuming they make their response before
+       * the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for
+       * `trial_duration` is reached. You can set this parameter to `false` to force the participant to view a stimulus for a
+       * fixed amount of time, even if they respond before the time is complete.  */
+      response_ends_trial: {
+        type: jspsych.ParameterType.BOOL,
+        default: true
+      },
+      /**
+       * If `true`, the image will be drawn onto a canvas element. This prevents a blank screen (white flash) between consecutive image trials in some browsers, like Firefox and Edge.
+       * If `false`, the image will be shown via an img element, as in previous versions of jsPsych. If the stimulus is an **animated gif**, you must set this parameter to false, because the canvas rendering method will only present static images.
+       */
+      render_on_canvas: {
+        type: jspsych.ParameterType.BOOL,
+        default: true
+      }
+    },
+    data: {
+      /** The path of the image that was displayed. */
+      stimulus: {
+        type: jspsych.ParameterType.STRING
+      },
+      /**  Indicates which key the participant pressed. */
+      response: {
+        type: jspsych.ParameterType.STRING
+      },
+      /** The response time in milliseconds for the participant to make a response. The time is measured from when the stimulus
+       * first appears on the screen until the participant's response. */
+      rt: {
+        type: jspsych.ParameterType.INT
+      }
+    },
+    // prettier-ignore
+    citations: {
+      "apa": "de Leeuw, J. R., Gilbert, R. A., & Luchterhandt, B. (2023). jsPsych: Enabling an Open-Source Collaborative Ecosystem of Behavioral Experiments. Journal of Open Source Software, 8(85), 5351. https://doi.org/10.21105/joss.05351 ",
+      "bibtex": '@article{Leeuw2023jsPsych, 	author = {de Leeuw, Joshua R. and Gilbert, Rebecca A. and Luchterhandt, Bj{\\" o}rn}, 	journal = {Journal of Open Source Software}, 	doi = {10.21105/joss.05351}, 	issn = {2475-9066}, 	number = {85}, 	year = {2023}, 	month = {may 11}, 	pages = {5351}, 	publisher = {Open Journals}, 	title = {jsPsych: Enabling an {Open}-{Source} {Collaborative} {Ecosystem} of {Behavioral} {Experiments}}, 	url = {https://joss.theoj.org/papers/10.21105/joss.05351}, 	volume = {8}, }  '
+    }
   };
-  /**
-   * **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);
-              }
+    constructor(jsPsych) {
+      this.jsPsych = jsPsych;
+    }
+    static {
+      this.info = info;
+    }
+    trial(display_element, trial) {
+      var height, width;
+      if (trial.render_on_canvas) {
+        var image_drawn = false;
+        if (display_element.hasChildNodes()) {
+          while (display_element.firstChild) {
+            display_element.removeChild(display_element.firstChild);
           }
-          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";
+        }
+        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_drawn) {
+            getHeightWidth();
+            ctx.drawImage(img, 0, 0, width, height);
           }
-          // 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,
-              });
+        };
+        img.src = trial.stimulus;
+        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;
           }
-          // 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);
+          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)) {
+            width = img.naturalWidth;
           }
-          // end trial if trial_duration is set
-          if (trial.trial_duration !== null) {
-              this.jsPsych.pluginAPI.setTimeout(() => {
-                  end_trial();
-              }, trial.trial_duration);
+          canvas.height = height;
+          canvas.width = width;
+        };
+        getHeightWidth();
+        display_element.insertBefore(canvas, null);
+        if (img.complete && Number.isFinite(width) && Number.isFinite(height)) {
+          ctx.drawImage(img, 0, 0, width, height);
+          image_drawn = true;
+        }
+        if (trial.prompt !== null) {
+          display_element.insertAdjacentHTML("beforeend", trial.prompt);
+        }
+      } else {
+        var html = '<img src="' + trial.stimulus + '" id="jspsych-image-keyboard-response-stimulus">';
+        if (trial.prompt !== null) {
+          html += trial.prompt;
+        }
+        display_element.innerHTML = html;
+        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 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.");
+        } 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)) {
+          width = img.naturalWidth;
+        }
+        img.style.height = height.toString() + "px";
+        img.style.width = width.toString() + "px";
       }
-      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);
-          }
+      var response = {
+        rt: null,
+        key: null
+      };
+      const end_trial = () => {
+        if (typeof keyboardListener !== "undefined") {
+          this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
+        }
+        var trial_data = {
+          rt: response.rt,
+          stimulus: trial.stimulus,
+          response: response.key
+        };
+        this.jsPsych.finishTrial(trial_data);
+      };
+      var after_response = (info2) => {
+        display_element.querySelector("#jspsych-image-keyboard-response-stimulus").className += " responded";
+        if (response.key == null) {
+          response = info2;
+        }
+        if (trial.response_ends_trial) {
+          end_trial();
+        }
+      };
+      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
+        });
       }
-      simulate_data_only(trial, simulation_options) {
-          const data = this.create_simulation_data(trial, simulation_options);
-          this.jsPsych.finishTrial(data);
+      if (trial.stimulus_duration !== null) {
+        this.jsPsych.pluginAPI.setTimeout(() => {
+          display_element.querySelector(
+            "#jspsych-image-keyboard-response-stimulus"
+          ).style.visibility = "hidden";
+        }, trial.stimulus_duration);
       }
-      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);
-          }
+      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);
       }
-      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;
+    }
+    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=https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.1.3/dist/index.browser.js.map
+//# sourceMappingURL=https://unpkg.com/@jspsych/plugin-image-keyboard-response@2.1.0/dist/index.browser.js.map

package/dist/index.browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.browser.js","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nconst info = <const>{\n  name: \"image-keyboard-response\",\n  parameters: {\n    /** The image to be displayed */\n    stimulus: {\n      type: ParameterType.IMAGE,\n      pretty_name: \"Stimulus\",\n      default: undefined,\n    },\n    /** Set the image height in pixels */\n    stimulus_height: {\n      type: ParameterType.INT,\n      pretty_name: \"Image height\",\n      default: null,\n    },\n    /** Set the image width in pixels */\n    stimulus_width: {\n      type: ParameterType.INT,\n      pretty_name: \"Image width\",\n      default: null,\n    },\n    /** Maintain the aspect ratio after setting width or height */\n    maintain_aspect_ratio: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Maintain aspect ratio\",\n      default: true,\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    /**\n     * If true, the image will be drawn onto a canvas element (prevents blank screen between consecutive images in some browsers).\n     * If false, the image will be shown via an img element.\n     */\n    render_on_canvas: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Render on canvas\",\n      default: true,\n    },\n  },\n};\n\ntype Info = typeof info;\n\n/**\n * **image-keyboard-response**\n *\n * jsPsych plugin for displaying an image stimulus and getting a keyboard response\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/plugins/jspsych-image-keyboard-response/ image-keyboard-response plugin documentation on jspsych.org}\n */\nclass ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var height, width;\n    if (trial.render_on_canvas) {\n      var image_drawn = false;\n      // first clear the display element (because the render_on_canvas method appends to display_element instead of overwriting it with .innerHTML)\n      if (display_element.hasChildNodes()) {\n        // can't loop through child list because the list will be modified by .removeChild()\n        while (display_element.firstChild) {\n          display_element.removeChild(display_element.firstChild);\n        }\n      }\n      // create canvas element and image\n      var canvas = document.createElement(\"canvas\");\n      canvas.id = \"jspsych-image-keyboard-response-stimulus\";\n      canvas.style.margin = \"0\";\n      canvas.style.padding = \"0\";\n      var ctx = canvas.getContext(\"2d\");\n      var img = new Image();\n      img.onload = () => {\n        // if image wasn't preloaded, then it will need to be drawn whenever it finishes loading\n        if (!image_drawn) {\n          getHeightWidth(); // only possible to get width/height after image loads\n          ctx.drawImage(img, 0, 0, width, height);\n        }\n      };\n      img.src = trial.stimulus;\n      // get/set image height and width - this can only be done after image loads because uses image's naturalWidth/naturalHeight properties\n      const getHeightWidth = () => {\n        if (trial.stimulus_height !== null) {\n          height = trial.stimulus_height;\n          if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {\n            width = img.naturalWidth * (trial.stimulus_height / img.naturalHeight);\n          }\n        } else {\n          height = img.naturalHeight;\n        }\n        if (trial.stimulus_width !== null) {\n          width = trial.stimulus_width;\n          if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {\n            height = img.naturalHeight * (trial.stimulus_width / img.naturalWidth);\n          }\n        } else if (!(trial.stimulus_height !== null && trial.maintain_aspect_ratio)) {\n          // if stimulus width is null, only use the image's natural width if the width value wasn't set\n          // in the if statement above, based on a specified height and maintain_aspect_ratio = true\n          width = img.naturalWidth;\n        }\n        canvas.height = height;\n        canvas.width = width;\n      };\n      getHeightWidth(); // call now, in case image loads immediately (is cached)\n      // add canvas and draw image\n      display_element.insertBefore(canvas, null);\n      if (img.complete && Number.isFinite(width) && Number.isFinite(height)) {\n        // if image has loaded and width/height have been set, then draw it now\n        // (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)\n        ctx.drawImage(img, 0, 0, width, height);\n        image_drawn = true;\n      }\n      // add prompt if there is one\n      if (trial.prompt !== null) {\n        display_element.insertAdjacentHTML(\"beforeend\", trial.prompt);\n      }\n    } else {\n      // display stimulus as an image element\n      var html = '<img src=\"' + trial.stimulus + '\" id=\"jspsych-image-keyboard-response-stimulus\">';\n      // add prompt\n      if (trial.prompt !== null) {\n        html += trial.prompt;\n      }\n      // update the page content\n      display_element.innerHTML = html;\n\n      // set image dimensions after image has loaded (so that we have access to naturalHeight/naturalWidth)\n      var img = display_element.querySelector(\n        \"#jspsych-image-keyboard-response-stimulus\"\n      ) as HTMLImageElement;\n      if (trial.stimulus_height !== null) {\n        height = trial.stimulus_height;\n        if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {\n          width = img.naturalWidth * (trial.stimulus_height / img.naturalHeight);\n        }\n      } else {\n        height = img.naturalHeight;\n      }\n      if (trial.stimulus_width !== null) {\n        width = trial.stimulus_width;\n        if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {\n          height = img.naturalHeight * (trial.stimulus_width / img.naturalWidth);\n        }\n      } else if (!(trial.stimulus_height !== null && trial.maintain_aspect_ratio)) {\n        // if stimulus width is null, only use the image's natural width if the width value wasn't set\n        // in the if statement above, based on a specified height and maintain_aspect_ratio = true\n        width = img.naturalWidth;\n      }\n      img.style.height = height.toString() + \"px\";\n      img.style.width = width.toString() + \"px\";\n    }\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 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        stimulus: trial.stimulus,\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-image-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-image-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    } else if (trial.response_ends_trial === false) {\n      console.warn(\n        \"The experiment may be deadlocked. Try setting a trial duration or set response_ends_trial to true.\"\n      );\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      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\nexport default ImageKeyboardResponsePlugin;\n"],"names":["ParameterType"],"mappings":"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"}
+{"version":3,"file":"index.browser.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n  \"name\": \"@jspsych/plugin-image-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-image-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/image-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: \"image-keyboard-response\",\n  version: version,\n  parameters: {\n    /** The path of the image file to be displayed. */\n    stimulus: {\n      type: ParameterType.IMAGE,\n      default: undefined,\n    },\n    /** Set the height of the image in pixels. If left null (no value specified), then the image will display at its natural height. */\n    stimulus_height: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** Set the width of the image in pixels. If left null (no value specified), then the image will display at its natural width. */\n    stimulus_width: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If setting *only* the width or *only* the height and this parameter is true, then the other dimension will be scaled\n     * to maintain the image's aspect ratio. */\n    maintain_aspect_ratio: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /**his array contains the key(s) that the participant is allowed to press in order to respond to the stimulus. Keys should\n     * be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n     * [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) and\n     * [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/)\n     * for more examples. Any key presses that are not listed in the array will be ignored. The default value of `\"ALL_KEYS\"`\n     * means that all keys will be accepted as valid responses. Specifying `\"NO_KEYS\"` will mean that no responses are allowed. */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /**This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can\n     * be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press). */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to show the stimulus for in milliseconds. If the value is `null`, then the stimulus will be shown until the\n     * participant makes a response. */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the participant\n     * fails to make a response before this timer is reached, the participant's response will be recorded as null for the\n     * trial and the trial will end. If the value of this parameter is `null`, then the trial will wait for a response indefinitely. */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their response before\n     * the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for\n     * `trial_duration` is reached. You can set this parameter to `false` to force the participant to view a stimulus for a\n     * fixed amount of time, even if they respond before the time is complete.  */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /**\n     * If `true`, the image will be drawn onto a canvas element. This prevents a blank screen (white flash) between consecutive image trials in some browsers, like Firefox and Edge.\n     * If `false`, the image will be shown via an img element, as in previous versions of jsPsych. If the stimulus is an **animated gif**, you must set this parameter to false, because the canvas rendering method will only present static images.\n     */\n    render_on_canvas: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n  },\n  data: {\n    /** The path of the image that was displayed. */\n    stimulus: {\n      type: ParameterType.STRING,\n    },\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\n     * first appears on the screen until the participant's response. */\n    rt: {\n      type: ParameterType.INT,\n    },\n  },\n  // prettier-ignore\n  citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin displays an image and records responses generated with the keyboard. The stimulus can be displayed until a\n * response is given, or for a pre-determined amount of time. The trial can be ended automatically if the participant has\n * failed to respond within a fixed length of time.\n *\n * Image files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if you are using\n * timeline variables or another dynamic method to specify the image stimulus, you will need to\n * [manually preload](../overview/media-preloading.md#manual-preloading) the images.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/image-keyboard-response/ image-keyboard-response plugin documentation on jspsych.org}\n */\nclass ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var height, width;\n    if (trial.render_on_canvas) {\n      var image_drawn = false;\n      // first clear the display element (because the render_on_canvas method appends to display_element instead of overwriting it with .innerHTML)\n      if (display_element.hasChildNodes()) {\n        // can't loop through child list because the list will be modified by .removeChild()\n        while (display_element.firstChild) {\n          display_element.removeChild(display_element.firstChild);\n        }\n      }\n      // create canvas element and image\n      var canvas = document.createElement(\"canvas\");\n      canvas.id = \"jspsych-image-keyboard-response-stimulus\";\n      canvas.style.margin = \"0\";\n      canvas.style.padding = \"0\";\n      var ctx = canvas.getContext(\"2d\");\n      var img = new Image();\n      img.onload = () => {\n        // if image wasn't preloaded, then it will need to be drawn whenever it finishes loading\n        if (!image_drawn) {\n          getHeightWidth(); // only possible to get width/height after image loads\n          ctx.drawImage(img, 0, 0, width, height);\n        }\n      };\n      img.src = trial.stimulus;\n      // get/set image height and width - this can only be done after image loads because uses image's naturalWidth/naturalHeight properties\n      const getHeightWidth = () => {\n        if (trial.stimulus_height !== null) {\n          height = trial.stimulus_height;\n          if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {\n            width = img.naturalWidth * (trial.stimulus_height / img.naturalHeight);\n          }\n        } else {\n          height = img.naturalHeight;\n        }\n        if (trial.stimulus_width !== null) {\n          width = trial.stimulus_width;\n          if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {\n            height = img.naturalHeight * (trial.stimulus_width / img.naturalWidth);\n          }\n        } else if (!(trial.stimulus_height !== null && trial.maintain_aspect_ratio)) {\n          // if stimulus width is null, only use the image's natural width if the width value wasn't set\n          // in the if statement above, based on a specified height and maintain_aspect_ratio = true\n          width = img.naturalWidth;\n        }\n        canvas.height = height;\n        canvas.width = width;\n      };\n      getHeightWidth(); // call now, in case image loads immediately (is cached)\n      // add canvas and draw image\n      display_element.insertBefore(canvas, null);\n      if (img.complete && Number.isFinite(width) && Number.isFinite(height)) {\n        // if image has loaded and width/height have been set, then draw it now\n        // (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)\n        ctx.drawImage(img, 0, 0, width, height);\n        image_drawn = true;\n      }\n      // add prompt if there is one\n      if (trial.prompt !== null) {\n        display_element.insertAdjacentHTML(\"beforeend\", trial.prompt);\n      }\n    } else {\n      // display stimulus as an image element\n      var html = '<img src=\"' + trial.stimulus + '\" id=\"jspsych-image-keyboard-response-stimulus\">';\n      // add prompt\n      if (trial.prompt !== null) {\n        html += trial.prompt;\n      }\n      // update the page content\n      display_element.innerHTML = html;\n\n      // set image dimensions after image has loaded (so that we have access to naturalHeight/naturalWidth)\n      var img = display_element.querySelector(\n        \"#jspsych-image-keyboard-response-stimulus\"\n      ) as HTMLImageElement;\n      if (trial.stimulus_height !== null) {\n        height = trial.stimulus_height;\n        if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {\n          width = img.naturalWidth * (trial.stimulus_height / img.naturalHeight);\n        }\n      } else {\n        height = img.naturalHeight;\n      }\n      if (trial.stimulus_width !== null) {\n        width = trial.stimulus_width;\n        if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {\n          height = img.naturalHeight * (trial.stimulus_width / img.naturalWidth);\n        }\n      } else if (!(trial.stimulus_height !== null && trial.maintain_aspect_ratio)) {\n        // if stimulus width is null, only use the image's natural width if the width value wasn't set\n        // in the if statement above, based on a specified height and maintain_aspect_ratio = true\n        width = img.naturalWidth;\n      }\n      img.style.height = height.toString() + \"px\";\n      img.style.width = width.toString() + \"px\";\n    }\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-image-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-image-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    } else if (trial.response_ends_trial === false) {\n      console.warn(\n        \"The experiment may be deadlocked. Try setting a trial duration or set response_ends_trial to true.\"\n      );\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      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\nexport default ImageKeyboardResponsePlugin;\n"],"names":[],"mappings":";;;EAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICyFA,SAAA,EAAA;EAAA;;KAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}