@jspsych/plugin-image-keyboard-response 1.0.0 → 1.1.0

package/dist/index.browser.js

@@ -99,7 +99,7 @@ var jsPsychImageKeyboardResponse = (function (jspsych) {
               canvas.style.padding = "0";
               var ctx = canvas.getContext("2d");
               var img = new Image();
-              img.onload = function () {
+              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
@@ -205,7 +205,7 @@ var jsPsychImageKeyboardResponse = (function (jspsych) {
               this.jsPsych.finishTrial(trial_data);
           };
           // function to handle responses by the subject
-          var after_response = function (info) {
+          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 +=
@@ -230,13 +230,13 @@ var jsPsychImageKeyboardResponse = (function (jspsych) {
           }
           // hide stimulus if stimulus_duration is set
           if (trial.stimulus_duration !== null) {
-              this.jsPsych.pluginAPI.setTimeout(function () {
+              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(function () {
+              this.jsPsych.pluginAPI.setTimeout(() => {
                   end_trial();
               }, trial.trial_duration);
           }
@@ -244,6 +244,38 @@ var jsPsychImageKeyboardResponse = (function (jspsych) {
               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;
 

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 = function () {\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 = function (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(function () {\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(function () {\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\nexport default ImageKeyboardResponsePlugin;\n"],"names":["ParameterType"],"mappings":"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"}
+{"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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"}

package/dist/index.browser.min.js

@@ -1,2 +1,2 @@
-var jsPsychImageKeyboardResponse=function(t){"use strict";const e={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}}};class s{constructor(t){this.jsPsych=t}trial(t,e){var s,i;if(e.render_on_canvas){var a=!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 n=r.getContext("2d");(u=new Image).onload=function(){a||(l(),n.drawImage(u,0,0,i,s))},u.src=e.stimulus;const l=()=>{null!==e.stimulus_height?(s=e.stimulus_height,null==e.stimulus_width&&e.maintain_aspect_ratio&&(i=u.naturalWidth*(e.stimulus_height/u.naturalHeight))):s=u.naturalHeight,null!==e.stimulus_width?(i=e.stimulus_width,null==e.stimulus_height&&e.maintain_aspect_ratio&&(s=u.naturalHeight*(e.stimulus_width/u.naturalWidth))):null!==e.stimulus_height&&e.maintain_aspect_ratio||(i=u.naturalWidth),r.height=s,r.width=i};l(),t.insertBefore(r,null),u.complete&&Number.isFinite(i)&&Number.isFinite(s)&&(n.drawImage(u,0,0,i,s),a=!0),null!==e.prompt&&t.insertAdjacentHTML("beforeend",e.prompt)}else{var l='<img src="'+e.stimulus+'" id="jspsych-image-keyboard-response-stimulus">';null!==e.prompt&&(l+=e.prompt),t.innerHTML=l;var u=t.querySelector("#jspsych-image-keyboard-response-stimulus");null!==e.stimulus_height?(s=e.stimulus_height,null==e.stimulus_width&&e.maintain_aspect_ratio&&(i=u.naturalWidth*(e.stimulus_height/u.naturalHeight))):s=u.naturalHeight,null!==e.stimulus_width?(i=e.stimulus_width,null==e.stimulus_height&&e.maintain_aspect_ratio&&(s=u.naturalHeight*(e.stimulus_width/u.naturalWidth))):null!==e.stimulus_height&&e.maintain_aspect_ratio||(i=u.naturalWidth),u.style.height=s.toString()+"px",u.style.width=i.toString()+"px"}var m={rt:null,key:null};const o=()=>{this.jsPsych.pluginAPI.clearAllTimeouts(),void 0!==h&&this.jsPsych.pluginAPI.cancelKeyboardResponse(h);var s={rt:m.rt,stimulus:e.stimulus,response:m.key};t.innerHTML="",this.jsPsych.finishTrial(s)};if("NO_KEYS"!=e.choices)var h=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:function(s){t.querySelector("#jspsych-image-keyboard-response-stimulus").className+=" responded",null==m.key&&(m=s),e.response_ends_trial&&o()},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(){o()}),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.")}}return s.info=e,s}(jsPsychModule);
+var jsPsychImageKeyboardResponse=function(t){"use strict";const e={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}}};class s{constructor(t){this.jsPsych=t}trial(t,e){var s,i;if(e.render_on_canvas){var a=!1;if(t.hasChildNodes())for(;t.firstChild;)t.removeChild(t.firstChild);var l=document.createElement("canvas");l.id="jspsych-image-keyboard-response-stimulus",l.style.margin="0",l.style.padding="0";var r=l.getContext("2d");(u=new Image).onload=()=>{a||(n(),r.drawImage(u,0,0,i,s))},u.src=e.stimulus;const n=()=>{null!==e.stimulus_height?(s=e.stimulus_height,null==e.stimulus_width&&e.maintain_aspect_ratio&&(i=u.naturalWidth*(e.stimulus_height/u.naturalHeight))):s=u.naturalHeight,null!==e.stimulus_width?(i=e.stimulus_width,null==e.stimulus_height&&e.maintain_aspect_ratio&&(s=u.naturalHeight*(e.stimulus_width/u.naturalWidth))):null!==e.stimulus_height&&e.maintain_aspect_ratio||(i=u.naturalWidth),l.height=s,l.width=i};n(),t.insertBefore(l,null),u.complete&&Number.isFinite(i)&&Number.isFinite(s)&&(r.drawImage(u,0,0,i,s),a=!0),null!==e.prompt&&t.insertAdjacentHTML("beforeend",e.prompt)}else{var n='<img src="'+e.stimulus+'" id="jspsych-image-keyboard-response-stimulus">';null!==e.prompt&&(n+=e.prompt),t.innerHTML=n;var u=t.querySelector("#jspsych-image-keyboard-response-stimulus");null!==e.stimulus_height?(s=e.stimulus_height,null==e.stimulus_width&&e.maintain_aspect_ratio&&(i=u.naturalWidth*(e.stimulus_height/u.naturalHeight))):s=u.naturalHeight,null!==e.stimulus_width?(i=e.stimulus_width,null==e.stimulus_height&&e.maintain_aspect_ratio&&(s=u.naturalHeight*(e.stimulus_width/u.naturalWidth))):null!==e.stimulus_height&&e.maintain_aspect_ratio||(i=u.naturalWidth),u.style.height=s.toString()+"px",u.style.width=i.toString()+"px"}var m={rt:null,key:null};const o=()=>{this.jsPsych.pluginAPI.clearAllTimeouts(),void 0!==h&&this.jsPsych.pluginAPI.cancelKeyboardResponse(h);var s={rt:m.rt,stimulus:e.stimulus,response:m.key};t.innerHTML="",this.jsPsych.finishTrial(s)};if("NO_KEYS"!=e.choices)var h=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:s=>{t.querySelector("#jspsych-image-keyboard-response-stimulus").className+=" responded",null==m.key&&(m=s),e.response_ends_trial&&o()},valid_responses:e.choices,rt_method:"performance",persist:!1,allow_held_key:!1});null!==e.stimulus_duration&&this.jsPsych.pluginAPI.setTimeout((()=>{t.querySelector("#jspsych-image-keyboard-response-stimulus").style.visibility="hidden"}),e.stimulus_duration),null!==e.trial_duration?this.jsPsych.pluginAPI.setTimeout((()=>{o()}),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.")}simulate(t,e,s,i){"data-only"==e&&(i(),this.simulate_data_only(t,s)),"visual"==e&&this.simulate_visual(t,s,i)}simulate_data_only(t,e){const s=this.create_simulation_data(t,e);this.jsPsych.finishTrial(s)}simulate_visual(t,e,s){const i=this.create_simulation_data(t,e),a=this.jsPsych.getDisplayElement();this.trial(a,t),s(),null!==i.rt&&this.jsPsych.pluginAPI.pressKey(i.response,i.rt)}create_simulation_data(t,e){const s={stimulus:t.stimulus,rt:this.jsPsych.randomization.sampleExGaussian(500,50,1/150,!0),response:this.jsPsych.pluginAPI.getValidKey(t.choices)},i=this.jsPsych.pluginAPI.mergeSimulationData(s,e);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(t,i),i}}return s.info=e,s}(jsPsychModule);
 //# sourceMappingURL=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: \"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 = function () {\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 = function (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(function () {\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(function () {\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\nexport default ImageKeyboardResponsePlugin;\n"],"names":["info","name","parameters","stimulus","type","ParameterType","IMAGE","pretty_name","default","undefined","stimulus_height","INT","stimulus_width","maintain_aspect_ratio","BOOL","choices","KEYS","prompt","HTML_STRING","stimulus_duration","trial_duration","response_ends_trial","render_on_canvas","ImageKeyboardResponsePlugin","constructor","jsPsych","this","trial","display_element","height","width","image_drawn","hasChildNodes","firstChild","removeChild","canvas","document","createElement","id","style","margin","padding","ctx","getContext","img","Image","onload","getHeightWidth","drawImage","src","naturalWidth","naturalHeight","insertBefore","complete","Number","isFinite","insertAdjacentHTML","html","innerHTML","querySelector","toString","response","rt","key","end_trial","pluginAPI","clearAllTimeouts","keyboardListener","cancelKeyboardResponse","trial_data","finishTrial","getKeyboardResponse","callback_function","className","valid_responses","rt_method","persist","allow_held_key","setTimeout","visibility","console","warn"],"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: \"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":["info","name","parameters","stimulus","type","ParameterType","IMAGE","pretty_name","default","undefined","stimulus_height","INT","stimulus_width","maintain_aspect_ratio","BOOL","choices","KEYS","prompt","HTML_STRING","stimulus_duration","trial_duration","response_ends_trial","render_on_canvas","ImageKeyboardResponsePlugin","constructor","jsPsych","this","trial","display_element","height","width","image_drawn","hasChildNodes","firstChild","removeChild","canvas","document","createElement","id","style","margin","padding","ctx","getContext","img","Image","onload","getHeightWidth","drawImage","src","naturalWidth","naturalHeight","insertBefore","complete","Number","isFinite","insertAdjacentHTML","html","innerHTML","querySelector","toString","response","rt","key","end_trial","pluginAPI","clearAllTimeouts","keyboardListener","cancelKeyboardResponse","trial_data","finishTrial","getKeyboardResponse","callback_function","className","valid_responses","rt_method","persist","allow_held_key","setTimeout","visibility","console","warn","simulate","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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"}

package/dist/index.cjs

@@ -100,7 +100,7 @@ class ImageKeyboardResponsePlugin {
             canvas.style.padding = "0";
             var ctx = canvas.getContext("2d");
             var img = new Image();
-            img.onload = function () {
+            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
@@ -206,7 +206,7 @@ class ImageKeyboardResponsePlugin {
             this.jsPsych.finishTrial(trial_data);
         };
         // function to handle responses by the subject
-        var after_response = function (info) {
+        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 +=
@@ -231,13 +231,13 @@ class ImageKeyboardResponsePlugin {
         }
         // hide stimulus if stimulus_duration is set
         if (trial.stimulus_duration !== null) {
-            this.jsPsych.pluginAPI.setTimeout(function () {
+            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(function () {
+            this.jsPsych.pluginAPI.setTimeout(() => {
                 end_trial();
             }, trial.trial_duration);
         }
@@ -245,6 +245,38 @@ class ImageKeyboardResponsePlugin {
             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;
 

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\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 = function () {\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 = function (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(function () {\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(function () {\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\nexport default ImageKeyboardResponsePlugin;\n"],"names":["ParameterType"],"mappings":"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"}
+{"version":3,"file":"index.cjs","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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"}

package/dist/index.d.ts

@@ -148,5 +148,9 @@ declare class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     };
     constructor(jsPsych: JsPsych);
     trial(display_element: HTMLElement, trial: TrialType<Info>): void;
+    simulate(trial: TrialType<Info>, simulation_mode: any, simulation_options: any, load_callback: () => void): void;
+    private simulate_data_only;
+    private simulate_visual;
+    private create_simulation_data;
 }
 export default ImageKeyboardResponsePlugin;

package/dist/index.js

@@ -98,7 +98,7 @@ class ImageKeyboardResponsePlugin {
             canvas.style.padding = "0";
             var ctx = canvas.getContext("2d");
             var img = new Image();
-            img.onload = function () {
+            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
@@ -204,7 +204,7 @@ class ImageKeyboardResponsePlugin {
             this.jsPsych.finishTrial(trial_data);
         };
         // function to handle responses by the subject
-        var after_response = function (info) {
+        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 +=
@@ -229,13 +229,13 @@ class ImageKeyboardResponsePlugin {
         }
         // hide stimulus if stimulus_duration is set
         if (trial.stimulus_duration !== null) {
-            this.jsPsych.pluginAPI.setTimeout(function () {
+            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(function () {
+            this.jsPsych.pluginAPI.setTimeout(() => {
                 end_trial();
             }, trial.trial_duration);
         }
@@ -243,6 +243,38 @@ class ImageKeyboardResponsePlugin {
             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;
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\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 = function () {\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 = function (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(function () {\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(function () {\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\nexport default ImageKeyboardResponsePlugin;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.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":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jspsych/plugin-image-keyboard-response",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "jsPsych plugin for displaying a stimulus and getting a keyboard response",
   "type": "module",
   "main": "dist/index.cjs",
@@ -34,10 +34,10 @@
   },
   "homepage": "https://www.jspsych.org/latest/plugins/image-keyboard-response",
   "peerDependencies": {
-    "jspsych": ">=7.0.0"
+    "jspsych": ">=7.1.0"
   },
   "devDependencies": {
-    "@jspsych/config": "^1.0.0",
-    "@jspsych/test-utils": "^1.0.0"
+    "@jspsych/config": "^1.1.0",
+    "@jspsych/test-utils": "^1.1.0"
   }
 }

package/src/index.ts

@@ -102,7 +102,7 @@ class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
       canvas.style.padding = "0";
       var ctx = canvas.getContext("2d");
       var img = new Image();
-      img.onload = function () {
+      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
@@ -213,7 +213,7 @@ class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     };
 
     // function to handle responses by the subject
-    var after_response = function (info) {
+    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 +=
@@ -242,7 +242,7 @@ class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // hide stimulus if stimulus_duration is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-image-keyboard-response-stimulus"
         ).style.visibility = "hidden";
@@ -251,7 +251,7 @@ class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if trial_duration is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         end_trial();
       }, trial.trial_duration);
     } else if (trial.response_ends_trial === false) {
@@ -260,6 +260,54 @@ class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
       );
     }
   }
+
+  simulate(
+    trial: TrialType<Info>,
+    simulation_mode,
+    simulation_options: any,
+    load_callback: () => void
+  ) {
+    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);
+    }
+  }
+
+  private simulate_data_only(trial: TrialType<Info>, simulation_options) {
+    const data = this.create_simulation_data(trial, simulation_options);
+
+    this.jsPsych.finishTrial(data);
+  }
+
+  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {
+    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);
+    }
+  }
+
+  private create_simulation_data(trial: TrialType<Info>, 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;
+  }
 }
 
 export default ImageKeyboardResponsePlugin;