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

package/dist/index.js

@@ -1,172 +1,181 @@
 import { ParameterType } from 'jspsych';
 
+var _package = {
+  name: "@jspsych/plugin-canvas-keyboard-response",
+  version: "2.0.0",
+  description: "jsPsych plugin for displaying a canvas stimulus and getting a keyboard response",
+  type: "module",
+  main: "dist/index.cjs",
+  exports: {
+    import: "./dist/index.js",
+    require: "./dist/index.cjs"
+  },
+  typings: "dist/index.d.ts",
+  unpkg: "dist/index.browser.min.js",
+  files: [
+    "src",
+    "dist"
+  ],
+  source: "src/index.ts",
+  scripts: {
+    test: "jest  --passWithNoTests",
+    "test:watch": "npm test -- --watch",
+    tsc: "tsc",
+    build: "rollup --config",
+    "build:watch": "npm run build -- --watch"
+  },
+  repository: {
+    type: "git",
+    url: "git+https://github.com/jspsych/jsPsych.git",
+    directory: "packages/plugin-canvas-keyboard-response"
+  },
+  author: "Chris Jungerius, Josh de Leeuw",
+  license: "MIT",
+  bugs: {
+    url: "https://github.com/jspsych/jsPsych/issues"
+  },
+  homepage: "https://www.jspsych.org/latest/plugins/canvas-keyboard-response",
+  peerDependencies: {
+    jspsych: ">=7.1.0"
+  },
+  devDependencies: {
+    "@jspsych/config": "^3.0.0",
+    "@jspsych/test-utils": "^1.2.0"
+  }
+};
+
 const info = {
-    name: "canvas-keyboard-response",
-    parameters: {
-        /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
-        stimulus: {
-            type: ParameterType.FUNCTION,
-            pretty_name: "Stimulus",
-            default: undefined,
-        },
-        /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
-        choices: {
-            type: ParameterType.KEYS,
-            pretty_name: "Choices",
-            default: "ALL_KEYS",
-        },
-        /** Any content here will be displayed below the stimulus. */
-        prompt: {
-            type: ParameterType.HTML_STRING,
-            pretty_name: "Prompt",
-            default: null,
-        },
-        /** How long to show the stimulus. */
-        stimulus_duration: {
-            type: ParameterType.INT,
-            pretty_name: "Stimulus duration",
-            default: null,
-        },
-        /** How long to show trial before it ends. */
-        trial_duration: {
-            type: ParameterType.INT,
-            pretty_name: "Trial duration",
-            default: null,
-        },
-        /** If true, trial will end when subject makes a response. */
-        response_ends_trial: {
-            type: ParameterType.BOOL,
-            pretty_name: "Response ends trial",
-            default: true,
-        },
-        /** Array containing the height (first value) and width (second value) of the canvas element. */
-        canvas_size: {
-            type: ParameterType.INT,
-            array: true,
-            pretty_name: "Canvas size",
-            default: [500, 500],
-        },
+  name: "canvas-keyboard-response",
+  version: _package.version,
+  parameters: {
+    stimulus: {
+      type: ParameterType.FUNCTION,
+      default: void 0
+    },
+    choices: {
+      type: ParameterType.KEYS,
+      default: "ALL_KEYS"
+    },
+    prompt: {
+      type: ParameterType.HTML_STRING,
+      default: null
+    },
+    stimulus_duration: {
+      type: ParameterType.INT,
+      default: null
+    },
+    trial_duration: {
+      type: ParameterType.INT,
+      default: null
     },
+    response_ends_trial: {
+      type: ParameterType.BOOL,
+      default: true
+    },
+    canvas_size: {
+      type: ParameterType.INT,
+      array: true,
+      default: [500, 500]
+    }
+  },
+  data: {
+    response: {
+      type: ParameterType.STRING
+    },
+    rt: {
+      type: ParameterType.INT
+    }
+  }
 };
-/**
- * **canvas-keyboard-response**
- *
- * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response
- *
- * @author Chris Jungerius (modified from Josh de Leeuw)
- * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}
- */
 class CanvasKeyboardResponsePlugin {
-    constructor(jsPsych) {
-        this.jsPsych = jsPsych;
+  constructor(jsPsych) {
+    this.jsPsych = jsPsych;
+  }
+  trial(display_element, trial) {
+    var new_html = '<div id="jspsych-canvas-keyboard-response-stimulus"><canvas id="jspsych-canvas-stimulus" height="' + trial.canvas_size[0] + '" width="' + trial.canvas_size[1] + '"></canvas></div>';
+    if (trial.prompt !== null) {
+      new_html += trial.prompt;
+    }
+    display_element.innerHTML = new_html;
+    let c = document.getElementById("jspsych-canvas-stimulus");
+    c.style.display = "block";
+    trial.stimulus(c);
+    var response = {
+      rt: null,
+      key: null
+    };
+    const end_trial = () => {
+      if (typeof keyboardListener !== "undefined") {
+        this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
+      }
+      var trial_data = {
+        rt: response.rt,
+        response: response.key
+      };
+      this.jsPsych.finishTrial(trial_data);
+    };
+    var after_response = (info2) => {
+      display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").className += " responded";
+      if (response.key == null) {
+        response = info2;
+      }
+      if (trial.response_ends_trial) {
+        end_trial();
+      }
+    };
+    if (trial.choices != "NO_KEYS") {
+      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({
+        callback_function: after_response,
+        valid_responses: trial.choices,
+        rt_method: "performance",
+        persist: false,
+        allow_held_key: false
+      });
     }
-    trial(display_element, trial) {
-        var new_html = '<div id="jspsych-canvas-keyboard-response-stimulus">' +
-            '<canvas id="jspsych-canvas-stimulus" height="' +
-            trial.canvas_size[0] +
-            '" width="' +
-            trial.canvas_size[1] +
-            '"></canvas>' +
-            "</div>";
-        // add prompt
-        if (trial.prompt !== null) {
-            new_html += trial.prompt;
-        }
-        // draw
-        display_element.innerHTML = new_html;
-        let c = document.getElementById("jspsych-canvas-stimulus");
-        trial.stimulus(c);
-        // store response
-        var response = {
-            rt: null,
-            key: null,
-        };
-        // function to end trial when it is time
-        const end_trial = () => {
-            // kill any remaining setTimeout handlers
-            this.jsPsych.pluginAPI.clearAllTimeouts();
-            // kill keyboard listeners
-            if (typeof keyboardListener !== "undefined") {
-                this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
-            }
-            // gather the data to store for the trial
-            var trial_data = {
-                rt: response.rt,
-                response: response.key,
-            };
-            // clear the display
-            display_element.innerHTML = "";
-            // move on to the next trial
-            this.jsPsych.finishTrial(trial_data);
-        };
-        // function to handle responses by the subject
-        var after_response = (info) => {
-            // after a valid response, the stimulus will have the CSS class 'responded'
-            // which can be used to provide visual feedback that a response was recorded
-            display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").className +=
-                " responded";
-            // only record the first response
-            if (response.key == null) {
-                response = info;
-            }
-            if (trial.response_ends_trial) {
-                end_trial();
-            }
-        };
-        // start the response listener
-        if (trial.choices != "NO_KEYS") {
-            var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({
-                callback_function: after_response,
-                valid_responses: trial.choices,
-                rt_method: "performance",
-                persist: false,
-                allow_held_key: false,
-            });
-        }
-        // hide stimulus if stimulus_duration is set
-        if (trial.stimulus_duration !== null) {
-            this.jsPsych.pluginAPI.setTimeout(() => {
-                display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").style.visibility = "hidden";
-            }, trial.stimulus_duration);
-        }
-        // end trial if trial_duration is set
-        if (trial.trial_duration !== null) {
-            this.jsPsych.pluginAPI.setTimeout(() => {
-                end_trial();
-            }, trial.trial_duration);
-        }
+    if (trial.stimulus_duration !== null) {
+      this.jsPsych.pluginAPI.setTimeout(() => {
+        display_element.querySelector(
+          "#jspsych-canvas-keyboard-response-stimulus"
+        ).style.visibility = "hidden";
+      }, trial.stimulus_duration);
     }
-    simulate(trial, simulation_mode, simulation_options, load_callback) {
-        if (simulation_mode == "data-only") {
-            load_callback();
-            this.simulate_data_only(trial, simulation_options);
-        }
-        if (simulation_mode == "visual") {
-            this.simulate_visual(trial, simulation_options, load_callback);
-        }
+    if (trial.trial_duration !== null) {
+      this.jsPsych.pluginAPI.setTimeout(() => {
+        end_trial();
+      }, trial.trial_duration);
     }
-    simulate_data_only(trial, simulation_options) {
-        const data = this.create_simulation_data(trial, simulation_options);
-        this.jsPsych.finishTrial(data);
+  }
+  simulate(trial, simulation_mode, simulation_options, load_callback) {
+    if (simulation_mode == "data-only") {
+      load_callback();
+      this.simulate_data_only(trial, simulation_options);
     }
-    simulate_visual(trial, simulation_options, load_callback) {
-        const data = this.create_simulation_data(trial, simulation_options);
-        const display_element = this.jsPsych.getDisplayElement();
-        this.trial(display_element, trial);
-        load_callback();
-        if (data.rt !== null) {
-            this.jsPsych.pluginAPI.pressKey(data.response, data.rt);
-        }
+    if (simulation_mode == "visual") {
+      this.simulate_visual(trial, simulation_options, load_callback);
     }
-    create_simulation_data(trial, simulation_options) {
-        const default_data = {
-            rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
-            response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
-        };
-        const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
-        this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
-        return data;
+  }
+  simulate_data_only(trial, simulation_options) {
+    const data = this.create_simulation_data(trial, simulation_options);
+    this.jsPsych.finishTrial(data);
+  }
+  simulate_visual(trial, simulation_options, load_callback) {
+    const data = this.create_simulation_data(trial, simulation_options);
+    const display_element = this.jsPsych.getDisplayElement();
+    this.trial(display_element, trial);
+    load_callback();
+    if (data.rt !== null) {
+      this.jsPsych.pluginAPI.pressKey(data.response, data.rt);
     }
+  }
+  create_simulation_data(trial, simulation_options) {
+    const default_data = {
+      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
+      response: this.jsPsych.pluginAPI.getValidKey(trial.choices)
+    };
+    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
+    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
+    return data;
+  }
 }
 CanvasKeyboardResponsePlugin.info = info;
 

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: \"canvas-keyboard-response\",\n  parameters: {\n    /** The drawing function to apply to the canvas. Should take the canvas object as argument. */\n    stimulus: {\n      type: ParameterType.FUNCTION,\n      pretty_name: \"Stimulus\",\n      default: undefined,\n    },\n    /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */\n    choices: {\n      type: ParameterType.KEYS,\n      pretty_name: \"Choices\",\n      default: \"ALL_KEYS\",\n    },\n    /** Any content here will be displayed below the stimulus. */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      pretty_name: \"Prompt\",\n      default: null,\n    },\n    /** How long to show the stimulus. */\n    stimulus_duration: {\n      type: ParameterType.INT,\n      pretty_name: \"Stimulus duration\",\n      default: null,\n    },\n    /** How long to show trial before it ends. */\n    trial_duration: {\n      type: ParameterType.INT,\n      pretty_name: \"Trial duration\",\n      default: null,\n    },\n    /** If true, trial will end when subject makes a response. */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      pretty_name: \"Response ends trial\",\n      default: true,\n    },\n    /** Array containing the height (first value) and width (second value) of the canvas element. */\n    canvas_size: {\n      type: ParameterType.INT,\n      array: true,\n      pretty_name: \"Canvas size\",\n      default: [500, 500],\n    },\n  },\n};\n\ntype Info = typeof info;\n\n/**\n * **canvas-keyboard-response**\n *\n * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response\n *\n * @author Chris Jungerius (modified from Josh de Leeuw)\n * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}\n */\nclass CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html =\n      '<div id=\"jspsych-canvas-keyboard-response-stimulus\">' +\n      '<canvas id=\"jspsych-canvas-stimulus\" height=\"' +\n      trial.canvas_size[0] +\n      '\" width=\"' +\n      trial.canvas_size[1] +\n      '\"></canvas>' +\n      \"</div>\";\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n    let c = document.getElementById(\"jspsych-canvas-stimulus\");\n    trial.stimulus(c);\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill any remaining setTimeout handlers\n      this.jsPsych.pluginAPI.clearAllTimeouts();\n\n      // kill keyboard listeners\n      if (typeof keyboardListener !== \"undefined\") {\n        this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n      }\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        response: response.key,\n      };\n\n      // clear the display\n      display_element.innerHTML = \"\";\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-canvas-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = info;\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\") {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n      });\n    }\n\n    // hide stimulus if stimulus_duration is set\n    if (trial.stimulus_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        display_element.querySelector<HTMLElement>(\n          \"#jspsych-canvas-keyboard-response-stimulus\"\n        ).style.visibility = \"hidden\";\n      }, trial.stimulus_duration);\n    }\n\n    // end trial if trial_duration is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        end_trial();\n      }, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    if (data.rt !== null) {\n      this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":[],"mappings":"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"}
+{"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: \"canvas-keyboard-response\",\n  version: version,\n  parameters: {\n    /** The function to draw on the canvas. This function automatically takes a canvas element as its only\n     * argument, e.g. `function(c) {...}` or `function drawStim(c) {...}`, where `c` refers to the canvas element.\n     * Note that the stimulus function will still generally need to set the correct context itself, using a line\n     * like `let ctx = c.getContext(\"2d\")`.\n     */\n    stimulus: {\n      type: ParameterType.FUNCTION,\n      default: undefined,\n    },\n    /** This array contains the key(s) that the participant is allowed to press in order to respond to the stimulus.\n     * Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) -\n     * see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)\n     * and [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\n     * of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses. Specifying `\"NO_KEYS\"` will mean\n     * that no responses are allowed.\n     */\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\n     * 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).\n     */\n    prompt: {\n      type: ParameterType.HTML_STRING,\n      default: null,\n    },\n    /** How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus will be set to\n     * `hidden` after this time has elapsed. If this is null, then the stimulus will remain visible until the trial ends.\n     */\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\n     * participant fails to make a response before this timer is reached, the participant's response will be\n     * recorded as null for the trial and the trial will end. If the value of this parameter is null, then the\n     * trial will wait for a response indefinitely.\n     */\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\n     * response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will\n     * continue until the value for `trial_duration` is reached. You can use this parameter to force the participant\n     * to view a stimulus for a fixed amount of time, even if they respond before the time is complete.\n     */\n    response_ends_trial: {\n      type: ParameterType.BOOL,\n      default: true,\n    },\n    /** Array that defines the size of the canvas element in pixels. First value is height, second value is width. */\n    canvas_size: {\n      type: ParameterType.INT,\n      array: true,\n      default: [500, 500],\n    },\n  },\n  data: {\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\n     * when the stimulus first appears on the screen until the participant's response.\n     */\n    rt: {\n      type: ParameterType.INT,\n    },\n  },\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin can be used to draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp) and\n * record a keyboard response. The canvas stimulus can be useful for displaying dynamic, parametrically-defined graphics,\n * and for controlling the positioning of multiple graphical elements (shapes, text, images). The stimulus can be\n * displayed until a response is given, or for a pre-determined amount of time. The trial can be ended automatically\n * if the participant has failed to respond within a fixed length of time.\n *\n * @author Chris Jungerius (modified from Josh de Leeuw)\n * @see {@link https://www.jspsych.org/latest/plugins/canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}\n */\nclass CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n  static info = info;\n\n  constructor(private jsPsych: JsPsych) {}\n\n  trial(display_element: HTMLElement, trial: TrialType<Info>) {\n    var new_html =\n      '<div id=\"jspsych-canvas-keyboard-response-stimulus\">' +\n      '<canvas id=\"jspsych-canvas-stimulus\" height=\"' +\n      trial.canvas_size[0] +\n      '\" width=\"' +\n      trial.canvas_size[1] +\n      '\"></canvas>' +\n      \"</div>\";\n    // add prompt\n    if (trial.prompt !== null) {\n      new_html += trial.prompt;\n    }\n\n    // draw\n    display_element.innerHTML = new_html;\n    let c = document.getElementById(\"jspsych-canvas-stimulus\");\n    c.style.display = \"block\";\n    trial.stimulus(c);\n    // store response\n    var response = {\n      rt: null,\n      key: null,\n    };\n\n    // function to end trial when it is time\n    const end_trial = () => {\n      // kill keyboard listeners\n      if (typeof keyboardListener !== \"undefined\") {\n        this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n      }\n\n      // gather the data to store for the trial\n      var trial_data = {\n        rt: response.rt,\n        response: response.key,\n      };\n\n      // move on to the next trial\n      this.jsPsych.finishTrial(trial_data);\n    };\n\n    // function to handle responses by the subject\n    var after_response = (info) => {\n      // after a valid response, the stimulus will have the CSS class 'responded'\n      // which can be used to provide visual feedback that a response was recorded\n      display_element.querySelector(\"#jspsych-canvas-keyboard-response-stimulus\").className +=\n        \" responded\";\n\n      // only record the first response\n      if (response.key == null) {\n        response = info;\n      }\n\n      if (trial.response_ends_trial) {\n        end_trial();\n      }\n    };\n\n    // start the response listener\n    if (trial.choices != \"NO_KEYS\") {\n      var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n        callback_function: after_response,\n        valid_responses: trial.choices,\n        rt_method: \"performance\",\n        persist: false,\n        allow_held_key: false,\n      });\n    }\n\n    // hide stimulus if stimulus_duration is set\n    if (trial.stimulus_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        display_element.querySelector<HTMLElement>(\n          \"#jspsych-canvas-keyboard-response-stimulus\"\n        ).style.visibility = \"hidden\";\n      }, trial.stimulus_duration);\n    }\n\n    // end trial if trial_duration is set\n    if (trial.trial_duration !== null) {\n      this.jsPsych.pluginAPI.setTimeout(() => {\n        end_trial();\n      }, trial.trial_duration);\n    }\n  }\n\n  simulate(\n    trial: TrialType<Info>,\n    simulation_mode,\n    simulation_options: any,\n    load_callback: () => void\n  ) {\n    if (simulation_mode == \"data-only\") {\n      load_callback();\n      this.simulate_data_only(trial, simulation_options);\n    }\n    if (simulation_mode == \"visual\") {\n      this.simulate_visual(trial, simulation_options, load_callback);\n    }\n  }\n\n  private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    this.jsPsych.finishTrial(data);\n  }\n\n  private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n    const data = this.create_simulation_data(trial, simulation_options);\n\n    const display_element = this.jsPsych.getDisplayElement();\n\n    this.trial(display_element, trial);\n    load_callback();\n\n    if (data.rt !== null) {\n      this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n    }\n  }\n\n  private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n    const default_data = {\n      rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n      response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n    };\n\n    const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n    this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n    return data;\n  }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":["version","info"],"mappings":"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"}

package/package.json

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

package/src/index.ts

@@ -1,63 +1,96 @@
 import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
 
+import { version } from "../package.json";
+
 const info = <const>{
   name: "canvas-keyboard-response",
+  version: version,
   parameters: {
-    /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
+    /** The function to draw on the canvas. This function automatically takes a canvas element as its only
+     * argument, e.g. `function(c) {...}` or `function drawStim(c) {...}`, where `c` refers to the canvas element.
+     * Note that the stimulus function will still generally need to set the correct context itself, using a line
+     * like `let ctx = c.getContext("2d")`.
+     */
     stimulus: {
       type: ParameterType.FUNCTION,
-      pretty_name: "Stimulus",
       default: undefined,
     },
-    /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
+    /** This 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 display the stimulus in milliseconds. The visibility CSS property of the stimulus will be set to
+     * `hidden` after this time has elapsed. If this is null, then the stimulus will remain visible until the trial ends.
+     */
     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 use this parameter 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,
     },
-    /** Array containing the height (first value) and width (second value) of the canvas element. */
+    /** Array that defines the size of the canvas element in pixels. First value is height, second value is width. */
     canvas_size: {
       type: ParameterType.INT,
       array: true,
-      pretty_name: "Canvas size",
       default: [500, 500],
     },
   },
+  data: {
+    /** 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;
 
 /**
- * **canvas-keyboard-response**
- *
- * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response
+ * This plugin can be used to draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp) and
+ * record a keyboard response. The canvas stimulus can be useful for displaying dynamic, parametrically-defined graphics,
+ * and for controlling the positioning of multiple graphical elements (shapes, text, images). 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.
  *
  * @author Chris Jungerius (modified from Josh de Leeuw)
- * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}
+ * @see {@link https://www.jspsych.org/latest/plugins/canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}
  */
 class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
   static info = info;
@@ -81,6 +114,7 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     // draw
     display_element.innerHTML = new_html;
     let c = document.getElementById("jspsych-canvas-stimulus");
+    c.style.display = "block";
     trial.stimulus(c);
     // store response
     var response = {
@@ -90,9 +124,6 @@ class CanvasKeyboardResponsePlugin 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);
@@ -104,9 +135,6 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         response: response.key,
       };
 
-      // clear the display
-      display_element.innerHTML = "";
-
       // move on to the next trial
       this.jsPsych.finishTrial(trial_data);
     };