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

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 = () => {\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":";;AAEA,MAAM,IAAI,GAAU;AAClB,IAAA,IAAI,EAAE,yBAAyB;AAC/B,IAAA,UAAU,EAAE;;AAEV,QAAA,QAAQ,EAAE;YACR,IAAI,EAAE,aAAa,CAAC,KAAK;AACzB,YAAA,WAAW,EAAE,UAAU;AACvB,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;;AAED,QAAA,eAAe,EAAE;YACf,IAAI,EAAE,aAAa,CAAC,GAAG;AACvB,YAAA,WAAW,EAAE,cAAc;AAC3B,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,cAAc,EAAE;YACd,IAAI,EAAE,aAAa,CAAC,GAAG;AACvB,YAAA,WAAW,EAAE,aAAa;AAC1B,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,qBAAqB,EAAE;YACrB,IAAI,EAAE,aAAa,CAAC,IAAI;AACxB,YAAA,WAAW,EAAE,uBAAuB;AACpC,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,OAAO,EAAE;YACP,IAAI,EAAE,aAAa,CAAC,IAAI;AACxB,YAAA,WAAW,EAAE,SAAS;AACtB,YAAA,OAAO,EAAE,UAAU;AACpB,SAAA;;AAED,QAAA,MAAM,EAAE;YACN,IAAI,EAAE,aAAa,CAAC,WAAW;AAC/B,YAAA,WAAW,EAAE,QAAQ;AACrB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,iBAAiB,EAAE;YACjB,IAAI,EAAE,aAAa,CAAC,GAAG;AACvB,YAAA,WAAW,EAAE,mBAAmB;AAChC,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,cAAc,EAAE;YACd,IAAI,EAAE,aAAa,CAAC,GAAG;AACvB,YAAA,WAAW,EAAE,gBAAgB;AAC7B,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,mBAAmB,EAAE;YACnB,IAAI,EAAE,aAAa,CAAC,IAAI;AACxB,YAAA,WAAW,EAAE,qBAAqB;AAClC,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;AAGG;AACH,QAAA,gBAAgB,EAAE;YAChB,IAAI,EAAE,aAAa,CAAC,IAAI;AACxB,YAAA,WAAW,EAAE,kBAAkB;AAC/B,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;CACF,CAAC;AAIF;;;;;;;AAOG;AACH,MAAM,2BAA2B,CAAA;AAG/B,IAAA,WAAA,CAAoB,OAAgB,EAAA;QAAhB,IAAO,CAAA,OAAA,GAAP,OAAO,CAAS;KAAI;IAExC,KAAK,CAAC,eAA4B,EAAE,KAAsB,EAAA;QACxD,IAAI,MAAM,EAAE,KAAK,CAAC;QAClB,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,IAAI,WAAW,GAAG,KAAK,CAAC;;AAExB,YAAA,IAAI,eAAe,CAAC,aAAa,EAAE,EAAE;;gBAEnC,OAAO,eAAe,CAAC,UAAU,EAAE;AACjC,oBAAA,eAAe,CAAC,WAAW,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;AACzD,iBAAA;AACF,aAAA;;YAED,IAAI,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAC9C,YAAA,MAAM,CAAC,EAAE,GAAG,0CAA0C,CAAC;AACvD,YAAA,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;AAC1B,YAAA,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;YAC3B,IAAI,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AAClC,YAAA,IAAI,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;AACtB,YAAA,GAAG,CAAC,MAAM,GAAG,MAAK;;gBAEhB,IAAI,CAAC,WAAW,EAAE;oBAChB,cAAc,EAAE,CAAC;AACjB,oBAAA,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACzC,iBAAA;AACH,aAAC,CAAC;AACF,YAAA,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAC;;YAEzB,MAAM,cAAc,GAAG,MAAK;AAC1B,gBAAA,IAAI,KAAK,CAAC,eAAe,KAAK,IAAI,EAAE;AAClC,oBAAA,MAAM,GAAG,KAAK,CAAC,eAAe,CAAC;oBAC/B,IAAI,KAAK,CAAC,cAAc,IAAI,IAAI,IAAI,KAAK,CAAC,qBAAqB,EAAE;AAC/D,wBAAA,KAAK,GAAG,GAAG,CAAC,YAAY,IAAI,KAAK,CAAC,eAAe,GAAG,GAAG,CAAC,aAAa,CAAC,CAAC;AACxE,qBAAA;AACF,iBAAA;AAAM,qBAAA;AACL,oBAAA,MAAM,GAAG,GAAG,CAAC,aAAa,CAAC;AAC5B,iBAAA;AACD,gBAAA,IAAI,KAAK,CAAC,cAAc,KAAK,IAAI,EAAE;AACjC,oBAAA,KAAK,GAAG,KAAK,CAAC,cAAc,CAAC;oBAC7B,IAAI,KAAK,CAAC,eAAe,IAAI,IAAI,IAAI,KAAK,CAAC,qBAAqB,EAAE;AAChE,wBAAA,MAAM,GAAG,GAAG,CAAC,aAAa,IAAI,KAAK,CAAC,cAAc,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC;AACxE,qBAAA;AACF,iBAAA;AAAM,qBAAA,IAAI,EAAE,KAAK,CAAC,eAAe,KAAK,IAAI,IAAI,KAAK,CAAC,qBAAqB,CAAC,EAAE;;;AAG3E,oBAAA,KAAK,GAAG,GAAG,CAAC,YAAY,CAAC;AAC1B,iBAAA;AACD,gBAAA,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;AACvB,gBAAA,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;AACvB,aAAC,CAAC;YACF,cAAc,EAAE,CAAC;;AAEjB,YAAA,eAAe,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AAC3C,YAAA,IAAI,GAAG,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;;;AAGrE,gBAAA,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;gBACxC,WAAW,GAAG,IAAI,CAAC;AACpB,aAAA;;AAED,YAAA,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,EAAE;gBACzB,eAAe,CAAC,kBAAkB,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;AAC/D,aAAA;AACF,SAAA;AAAM,aAAA;;YAEL,IAAI,IAAI,GAAG,YAAY,GAAG,KAAK,CAAC,QAAQ,GAAG,kDAAkD,CAAC;;AAE9F,YAAA,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,EAAE;AACzB,gBAAA,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC;AACtB,aAAA;;AAED,YAAA,eAAe,CAAC,SAAS,GAAG,IAAI,CAAC;;YAGjC,IAAI,GAAG,GAAG,eAAe,CAAC,aAAa,CACrC,2CAA2C,CACxB,CAAC;AACtB,YAAA,IAAI,KAAK,CAAC,eAAe,KAAK,IAAI,EAAE;AAClC,gBAAA,MAAM,GAAG,KAAK,CAAC,eAAe,CAAC;gBAC/B,IAAI,KAAK,CAAC,cAAc,IAAI,IAAI,IAAI,KAAK,CAAC,qBAAqB,EAAE;AAC/D,oBAAA,KAAK,GAAG,GAAG,CAAC,YAAY,IAAI,KAAK,CAAC,eAAe,GAAG,GAAG,CAAC,aAAa,CAAC,CAAC;AACxE,iBAAA;AACF,aAAA;AAAM,iBAAA;AACL,gBAAA,MAAM,GAAG,GAAG,CAAC,aAAa,CAAC;AAC5B,aAAA;AACD,YAAA,IAAI,KAAK,CAAC,cAAc,KAAK,IAAI,EAAE;AACjC,gBAAA,KAAK,GAAG,KAAK,CAAC,cAAc,CAAC;gBAC7B,IAAI,KAAK,CAAC,eAAe,IAAI,IAAI,IAAI,KAAK,CAAC,qBAAqB,EAAE;AAChE,oBAAA,MAAM,GAAG,GAAG,CAAC,aAAa,IAAI,KAAK,CAAC,cAAc,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC;AACxE,iBAAA;AACF,aAAA;AAAM,iBAAA,IAAI,EAAE,KAAK,CAAC,eAAe,KAAK,IAAI,IAAI,KAAK,CAAC,qBAAqB,CAAC,EAAE;;;AAG3E,gBAAA,KAAK,GAAG,GAAG,CAAC,YAAY,CAAC;AAC1B,aAAA;YACD,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC;YAC5C,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC;AAC3C,SAAA;;AAGD,QAAA,IAAI,QAAQ,GAAG;AACb,YAAA,EAAE,EAAE,IAAI;AACR,YAAA,GAAG,EAAE,IAAI;SACV,CAAC;;QAGF,MAAM,SAAS,GAAG,MAAK;;AAErB,YAAA,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC;;AAG1C,YAAA,IAAI,OAAO,gBAAgB,KAAK,WAAW,EAAE;gBAC3C,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;AACjE,aAAA;;AAGD,YAAA,IAAI,UAAU,GAAG;gBACf,EAAE,EAAE,QAAQ,CAAC,EAAE;gBACf,QAAQ,EAAE,KAAK,CAAC,QAAQ;gBACxB,QAAQ,EAAE,QAAQ,CAAC,GAAG;aACvB,CAAC;;AAGF,YAAA,eAAe,CAAC,SAAS,GAAG,EAAE,CAAC;;AAG/B,YAAA,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AACvC,SAAC,CAAC;;AAGF,QAAA,IAAI,cAAc,GAAG,CAAC,IAAI,KAAI;;;AAG5B,YAAA,eAAe,CAAC,aAAa,CAAC,2CAA2C,CAAC,CAAC,SAAS;AAClF,gBAAA,YAAY,CAAC;;AAGf,YAAA,IAAI,QAAQ,CAAC,GAAG,IAAI,IAAI,EAAE;gBACxB,QAAQ,GAAG,IAAI,CAAC;AACjB,aAAA;YAED,IAAI,KAAK,CAAC,mBAAmB,EAAE;AAC7B,gBAAA,SAAS,EAAE,CAAC;AACb,aAAA;AACH,SAAC,CAAC;;AAGF,QAAA,IAAI,KAAK,CAAC,OAAO,IAAI,SAAS,EAAE;YAC9B,IAAI,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,mBAAmB,CAAC;AAChE,gBAAA,iBAAiB,EAAE,cAAc;gBACjC,eAAe,EAAE,KAAK,CAAC,OAAO;AAC9B,gBAAA,SAAS,EAAE,aAAa;AACxB,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,cAAc,EAAE,KAAK;AACtB,aAAA,CAAC,CAAC;AACJ,SAAA;;AAGD,QAAA,IAAI,KAAK,CAAC,iBAAiB,KAAK,IAAI,EAAE;YACpC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,UAAU,CAAC,MAAK;gBACrC,eAAe,CAAC,aAAa,CAC3B,2CAA2C,CAC5C,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;AAChC,aAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;AAC7B,SAAA;;AAGD,QAAA,IAAI,KAAK,CAAC,cAAc,KAAK,IAAI,EAAE;YACjC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,UAAU,CAAC,MAAK;AACrC,gBAAA,SAAS,EAAE,CAAC;AACd,aAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;AAC1B,SAAA;AAAM,aAAA,IAAI,KAAK,CAAC,mBAAmB,KAAK,KAAK,EAAE;AAC9C,YAAA,OAAO,CAAC,IAAI,CACV,oGAAoG,CACrG,CAAC;AACH,SAAA;KACF;AAED,IAAA,QAAQ,CACN,KAAsB,EACtB,eAAe,EACf,kBAAuB,EACvB,aAAyB,EAAA;QAEzB,IAAI,eAAe,IAAI,WAAW,EAAE;AAClC,YAAA,aAAa,EAAE,CAAC;AAChB,YAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC;AACpD,SAAA;QACD,IAAI,eAAe,IAAI,QAAQ,EAAE;YAC/B,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,kBAAkB,EAAE,aAAa,CAAC,CAAC;AAChE,SAAA;KACF;IAEO,kBAAkB,CAAC,KAAsB,EAAE,kBAAkB,EAAA;QACnE,MAAM,IAAI,GAAG,IAAI,CAAC,sBAAsB,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC;AAEpE,QAAA,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;KAChC;AAEO,IAAA,eAAe,CAAC,KAAsB,EAAE,kBAAkB,EAAE,aAAyB,EAAA;QAC3F,MAAM,IAAI,GAAG,IAAI,CAAC,sBAAsB,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC;QAEpE,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;AACnC,QAAA,aAAa,EAAE,CAAC;AAEhB,QAAA,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,EAAE;AACpB,YAAA,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;AACzD,SAAA;KACF;IAEO,sBAAsB,CAAC,KAAsB,EAAE,kBAAkB,EAAA;AACvE,QAAA,MAAM,YAAY,GAAG;YACnB,QAAQ,EAAE,KAAK,CAAC,QAAQ;AACxB,YAAA,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,IAAI,CAAC;AACvE,YAAA,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC;SAC5D,CAAC;AAEF,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,mBAAmB,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC;QAE1F,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,+BAA+B,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAEpE,QAAA,OAAO,IAAI,CAAC;KACb;;AAnOM,2BAAI,CAAA,IAAA,GAAG,IAAI;;;;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n  name: \"image-keyboard-response\",\n  version: version,\n  parameters: {\n    /** The path of the image file to be displayed. */\n    stimulus: {\n      type: ParameterType.IMAGE,\n      default: undefined,\n    },\n    /** Set the height of the image in pixels. If left null (no value specified), then the image will display at its natural height. */\n    stimulus_height: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** Set the width of the image in pixels. If left null (no value specified), then the image will display at its natural width. */\n    stimulus_width: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If setting *only* the width or *only* the height and this parameter is true, then the other dimension will be scaled\n     * to maintain the image's aspect ratio. */\n    maintain_aspect_ratio: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /**his array contains the key(s) that the participant is allowed to press in order to respond to the stimulus. Keys should\n     * be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n     * [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) and\n     * [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/)\n     * for more examples. Any key presses that are not listed in the array will be ignored. The default value of `\"ALL_KEYS\"`\n     * means that all keys will be accepted as valid responses. Specifying `\"NO_KEYS\"` will mean that no responses are allowed. */\n    choices: {\n      type: ParameterType.KEYS,\n      default: \"ALL_KEYS\",\n    },\n    /**This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can\n     * be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press). */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to show the stimulus for in milliseconds. If the value is `null`, then the stimulus will be shown until the\n     * participant makes a response. */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the participant\n     * fails to make a response before this timer is reached, the participant's response will be recorded as null for the\n     * trial and the trial will end. If the value of this parameter is `null`, then the trial will wait for a response indefinitely. */\n    trial_duration: {\n      type: ParameterType.INT,\n      default: null,\n    },\n    /** If true, then the trial will end whenever the participant makes a response (assuming they make their response before\n     * the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for\n     * `trial_duration` is reached. You can set this parameter to `false` to force the participant to view a stimulus for a\n     * fixed amount of time, even if they respond before the time is complete.  */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /**\n     * If `true`, the image will be drawn onto a canvas element. This prevents a blank screen (white flash) between consecutive image trials in some browsers, like Firefox and Edge.\n     * If `false`, the image will be shown via an img element, as in previous versions of jsPsych. If the stimulus is an **animated gif**, you must set this parameter to false, because the canvas rendering method will only present static images.\n     */\n    render_on_canvas: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n  },\n  data: {\n    /** The path of the image that was displayed. */\n    stimulus: {\n      type: ParameterType.STRING,\n    },\n    /**  Indicates which key the participant pressed. */\n    response: {\n      type: ParameterType.STRING,\n    },\n    /** The response time in milliseconds for the participant to make a response. The time is measured from when the stimulus\n     * first appears on the screen until the participant's response. */\n    rt: {\n      type: ParameterType.INT,\n    },\n  },\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin displays an image and records responses generated with the keyboard. The stimulus can be displayed until a\n * response is given, or for a pre-determined amount of time. The trial can be ended automatically if the participant has\n * failed to respond within a fixed length of time.\n *\n * Image files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if you are using\n * timeline variables or another dynamic method to specify the image stimulus, you will need to\n * [manually preload](../overview/media-preloading.md#manual-preloading) the images.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/image-keyboard-response/ image-keyboard-response plugin documentation on jspsych.org}\n */\nclass ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var height, width;\n    if (trial.render_on_canvas) {\n      var image_drawn = false;\n      // first clear the display element (because the render_on_canvas method appends to display_element instead of overwriting it with .innerHTML)\n      if (display_element.hasChildNodes()) {\n        // can't loop through child list because the list will be modified by .removeChild()\n        while (display_element.firstChild) {\n          display_element.removeChild(display_element.firstChild);\n        }\n      }\n      // create canvas element and image\n      var canvas = document.createElement(\"canvas\");\n      canvas.id = \"jspsych-image-keyboard-response-stimulus\";\n      canvas.style.margin = \"0\";\n      canvas.style.padding = \"0\";\n      var ctx = canvas.getContext(\"2d\");\n      var img = new Image();\n      img.onload = () => {\n        // if image wasn't preloaded, then it will need to be drawn whenever it finishes loading\n        if (!image_drawn) {\n          getHeightWidth(); // only possible to get width/height after image loads\n          ctx.drawImage(img, 0, 0, width, height);\n        }\n      };\n      img.src = trial.stimulus;\n      // get/set image height and width - this can only be done after image loads because uses image's naturalWidth/naturalHeight properties\n      const getHeightWidth = () => {\n        if (trial.stimulus_height !== null) {\n          height = trial.stimulus_height;\n          if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {\n            width = img.naturalWidth * (trial.stimulus_height / img.naturalHeight);\n          }\n        } else {\n          height = img.naturalHeight;\n        }\n        if (trial.stimulus_width !== null) {\n          width = trial.stimulus_width;\n          if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {\n            height = img.naturalHeight * (trial.stimulus_width / img.naturalWidth);\n          }\n        } else if (!(trial.stimulus_height !== null && trial.maintain_aspect_ratio)) {\n          // if stimulus width is null, only use the image's natural width if the width value wasn't set\n          // in the if statement above, based on a specified height and maintain_aspect_ratio = true\n          width = img.naturalWidth;\n        }\n        canvas.height = height;\n        canvas.width = width;\n      };\n      getHeightWidth(); // call now, in case image loads immediately (is cached)\n      // add canvas and draw image\n      display_element.insertBefore(canvas, null);\n      if (img.complete && Number.isFinite(width) && Number.isFinite(height)) {\n        // if image has loaded and width/height have been set, then draw it now\n        // (don't rely on img onload function to draw image when image is in the cache, because that causes a delay in the image presentation)\n        ctx.drawImage(img, 0, 0, width, height);\n        image_drawn = true;\n      }\n      // add prompt if there is one\n      if (trial.prompt !== null) {\n        display_element.insertAdjacentHTML(\"beforeend\", trial.prompt);\n      }\n    } else {\n      // display stimulus as an image element\n      var html = '<img src=\"' + trial.stimulus + '\" id=\"jspsych-image-keyboard-response-stimulus\">';\n      // add prompt\n      if (trial.prompt !== null) {\n        html += trial.prompt;\n      }\n      // update the page content\n      display_element.innerHTML = html;\n\n      // set image dimensions after image has loaded (so that we have access to naturalHeight/naturalWidth)\n      var img = display_element.querySelector(\n        \"#jspsych-image-keyboard-response-stimulus\"\n      ) as HTMLImageElement;\n      if (trial.stimulus_height !== null) {\n        height = trial.stimulus_height;\n        if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {\n          width = img.naturalWidth * (trial.stimulus_height / img.naturalHeight);\n        }\n      } else {\n        height = img.naturalHeight;\n      }\n      if (trial.stimulus_width !== null) {\n        width = trial.stimulus_width;\n        if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {\n          height = img.naturalHeight * (trial.stimulus_width / img.naturalWidth);\n        }\n      } else if (!(trial.stimulus_height !== null && trial.maintain_aspect_ratio)) {\n        // if stimulus width is null, only use the image's natural width if the width value wasn't set\n        // in the if statement above, based on a specified height and maintain_aspect_ratio = true\n        width = img.naturalWidth;\n      }\n      img.style.height = height.toString() + \"px\";\n      img.style.width = width.toString() + \"px\";\n    }\n\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      if (typeof keyboardListener !== \"undefined\") {\n        this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n      }\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        stimulus: trial.stimulus,\n        response: response.key,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-image-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = info;\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\") {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n      });\n    }\n\n    // hide stimulus if stimulus_duration is set\n    if (trial.stimulus_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        display_element.querySelector<HTMLElement>(\n          \"#jspsych-image-keyboard-response-stimulus\"\n        ).style.visibility = \"hidden\";\n      }, trial.stimulus_duration);\n    }\n\n    // end trial if trial_duration is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        end_trial();\n      }, trial.trial_duration);\n    } else if (trial.response_ends_trial === false) {\n      console.warn(\n        \"The experiment may be deadlocked. Try setting a trial duration or set response_ends_trial to true.\"\n      );\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    if (data.rt !== null) {\n      this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      stimulus: trial.stimulus,\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default ImageKeyboardResponsePlugin;\n"],"names":["version","info"],"mappings":"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"}

package/package.json

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

package/src/index.spec.ts

@@ -18,7 +18,7 @@ describe("image-keyboard-response", () => {
       '<img src="../media/blue.png" id="jspsych-image-keyboard-response-stimulus"'
     );
 
-    pressKey("a");
+    await pressKey("a");
     await expectFinished();
   });
 
@@ -36,7 +36,7 @@ describe("image-keyboard-response", () => {
       '<img src="../media/blue.png" id="jspsych-image-keyboard-response-stimulus"'
     );
 
-    pressKey("f");
+    await pressKey("f");
     await expectFinished();
   });
 
@@ -52,7 +52,7 @@ describe("image-keyboard-response", () => {
     ]);
 
     expect(getHTML()).toContain('<div id="foo">this is a prompt</div>');
-    pressKey("f");
+    await pressKey("f");
     await expectFinished();
   });
 
@@ -76,7 +76,7 @@ describe("image-keyboard-response", () => {
     jest.advanceTimersByTime(500);
     expect(stimulusElement.style.visibility).toContain("hidden");
 
-    pressKey("f");
+    await pressKey("f");
     await expectFinished();
   });
 
@@ -113,7 +113,7 @@ describe("image-keyboard-response", () => {
       '<img src="../media/blue.png" id="jspsych-image-keyboard-response-stimulus"'
     );
 
-    pressKey("f");
+    await pressKey("f");
     await expectFinished();
   });
 

package/src/index.ts

@@ -1,83 +1,108 @@
 import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
 
+import { version } from "../package.json";
+
 const info = <const>{
   name: "image-keyboard-response",
+  version: version,
   parameters: {
-    /** The image to be displayed */
+    /** The path of the image file to be displayed. */
     stimulus: {
       type: ParameterType.IMAGE,
-      pretty_name: "Stimulus",
       default: undefined,
     },
-    /** Set the image height in pixels */
+    /** Set the height of the image in pixels. If left null (no value specified), then the image will display at its natural height. */
     stimulus_height: {
       type: ParameterType.INT,
-      pretty_name: "Image height",
       default: null,
     },
-    /** Set the image width in pixels */
+    /** Set the width of the image in pixels. If left null (no value specified), then the image will display at its natural width. */
     stimulus_width: {
       type: ParameterType.INT,
-      pretty_name: "Image width",
       default: null,
     },
-    /** Maintain the aspect ratio after setting width or height */
+    /** If setting *only* the width or *only* the height and this parameter is true, then the other dimension will be scaled
+     * to maintain the image's aspect ratio. */
     maintain_aspect_ratio: {
       type: ParameterType.BOOL,
-      pretty_name: "Maintain aspect ratio",
       default: true,
     },
-    /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
+    /**his array contains the key(s) that the participant is allowed to press in order to respond to the stimulus. Keys should
+     * be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see
+     * [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) and
+     * [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/)
+     * for more examples. Any key presses that are not listed in the array will be ignored. The default value of `"ALL_KEYS"`
+     * means that all keys will be accepted as valid responses. Specifying `"NO_KEYS"` will mean that no responses are allowed. */
     choices: {
       type: ParameterType.KEYS,
-      pretty_name: "Choices",
       default: "ALL_KEYS",
     },
-    /** Any content here will be displayed below the stimulus. */
+    /**This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can
+     * be used to provide a reminder about the action the participant is supposed to take (e.g., which key to press). */
     prompt: {
       type: ParameterType.HTML_STRING,
-      pretty_name: "Prompt",
       default: null,
     },
-    /** How long to show the stimulus. */
+    /** How long to show the stimulus for in milliseconds. If the value is `null`, then the stimulus will be shown until the
+     * participant makes a response. */
     stimulus_duration: {
       type: ParameterType.INT,
-      pretty_name: "Stimulus duration",
       default: null,
     },
-    /** How long to show trial before it ends */
+    /** How long to wait for the participant to make a response before ending the trial in milliseconds. If the participant
+     * fails to make a response before this timer is reached, the participant's response will be recorded as null for the
+     * trial and the trial will end. If the value of this parameter is `null`, then the trial will wait for a response indefinitely. */
     trial_duration: {
       type: ParameterType.INT,
-      pretty_name: "Trial duration",
       default: null,
     },
-    /** If true, trial will end when subject makes a response. */
+    /** If true, then the trial will end whenever the participant makes a response (assuming they make their response before
+     * the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for
+     * `trial_duration` is reached. You can set this parameter to `false` to force the participant to view a stimulus for a
+     * fixed amount of time, even if they respond before the time is complete.  */
     response_ends_trial: {
       type: ParameterType.BOOL,
-      pretty_name: "Response ends trial",
       default: true,
     },
     /**
-     * If true, the image will be drawn onto a canvas element (prevents blank screen between consecutive images in some browsers).
-     * If false, the image will be shown via an img element.
+     * If `true`, the image will be drawn onto a canvas element. This prevents a blank screen (white flash) between consecutive image trials in some browsers, like Firefox and Edge.
+     * If `false`, the image will be shown via an img element, as in previous versions of jsPsych. If the stimulus is an **animated gif**, you must set this parameter to false, because the canvas rendering method will only present static images.
      */
     render_on_canvas: {
       type: ParameterType.BOOL,
-      pretty_name: "Render on canvas",
       default: true,
     },
   },
+  data: {
+    /** The path of the image that was displayed. */
+    stimulus: {
+      type: ParameterType.STRING,
+    },
+    /**  Indicates which key the participant pressed. */
+    response: {
+      type: ParameterType.STRING,
+    },
+    /** The response time in milliseconds for the participant to make a response. The time is measured from when the stimulus
+     * first appears on the screen until the participant's response. */
+    rt: {
+      type: ParameterType.INT,
+    },
+  },
 };
 
 type Info = typeof info;
 
 /**
- * **image-keyboard-response**
+ * This plugin displays an image and records responses generated with the keyboard. The stimulus can be displayed until a
+ * response is given, or for a pre-determined amount of time. The trial can be ended automatically if the participant has
+ * failed to respond within a fixed length of time.
  *
- * jsPsych plugin for displaying an image stimulus and getting a keyboard response
+ * Image files can be automatically preloaded by jsPsych using the [`preload` plugin](preload.md). However, if you are using
+ * timeline variables or another dynamic method to specify the image stimulus, you will need to
+ * [manually preload](../overview/media-preloading.md#manual-preloading) the images.
  *
  * @author Josh de Leeuw
- * @see {@link https://www.jspsych.org/plugins/jspsych-image-keyboard-response/ image-keyboard-response plugin documentation on jspsych.org}
+ * @see {@link https://www.jspsych.org/latest/plugins/image-keyboard-response/ image-keyboard-response plugin documentation on jspsych.org}
  */
 class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
   static info = info;
@@ -190,9 +215,6 @@ class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // function to end trial when it is time
     const end_trial = () => {
-      // kill any remaining setTimeout handlers
-      this.jsPsych.pluginAPI.clearAllTimeouts();
-
       // kill keyboard listeners
       if (typeof keyboardListener !== "undefined") {
         this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
@@ -205,9 +227,6 @@ class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         response: response.key,
       };
 
-      // clear the display
-      display_element.innerHTML = "";
-
       // move on to the next trial
       this.jsPsych.finishTrial(trial_data);
     };