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

package/dist/index.cjs

@@ -2,174 +2,174 @@
 
 var jspsych = require('jspsych');
 
-const info = {
-    name: "canvas-keyboard-response",
-    parameters: {
-        /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
-        stimulus: {
-            type: jspsych.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: jspsych.ParameterType.KEYS,
-            pretty_name: "Choices",
-            default: "ALL_KEYS",
-        },
-        /** Any content here will be displayed below the stimulus. */
-        prompt: {
-            type: jspsych.ParameterType.HTML_STRING,
-            pretty_name: "Prompt",
-            default: null,
-        },
-        /** How long to show the stimulus. */
-        stimulus_duration: {
-            type: jspsych.ParameterType.INT,
-            pretty_name: "Stimulus duration",
-            default: null,
-        },
-        /** How long to show trial before it ends. */
-        trial_duration: {
-            type: jspsych.ParameterType.INT,
-            pretty_name: "Trial duration",
-            default: null,
-        },
-        /** If true, trial will end when subject makes a response. */
-        response_ends_trial: {
-            type: jspsych.ParameterType.BOOL,
-            pretty_name: "Response ends trial",
-            default: true,
-        },
-        /** Array containing the height (first value) and width (second value) of the canvas element. */
-        canvas_size: {
-            type: jspsych.ParameterType.INT,
-            array: true,
-            pretty_name: "Canvas size",
-            default: [500, 500],
-        },
-    },
-};
-/**
- * **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;
-    }
-    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);
-        }
-    }
-    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 = {
-            rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
-            response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
-        };
-        const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
-        this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
-        return data;
-    }
-}
+const info = {
+    name: "canvas-keyboard-response",
+    parameters: {
+        /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
+        stimulus: {
+            type: jspsych.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: jspsych.ParameterType.KEYS,
+            pretty_name: "Choices",
+            default: "ALL_KEYS",
+        },
+        /** Any content here will be displayed below the stimulus. */
+        prompt: {
+            type: jspsych.ParameterType.HTML_STRING,
+            pretty_name: "Prompt",
+            default: null,
+        },
+        /** How long to show the stimulus. */
+        stimulus_duration: {
+            type: jspsych.ParameterType.INT,
+            pretty_name: "Stimulus duration",
+            default: null,
+        },
+        /** How long to show trial before it ends. */
+        trial_duration: {
+            type: jspsych.ParameterType.INT,
+            pretty_name: "Trial duration",
+            default: null,
+        },
+        /** If true, trial will end when subject makes a response. */
+        response_ends_trial: {
+            type: jspsych.ParameterType.BOOL,
+            pretty_name: "Response ends trial",
+            default: true,
+        },
+        /** Array containing the height (first value) and width (second value) of the canvas element. */
+        canvas_size: {
+            type: jspsych.ParameterType.INT,
+            array: true,
+            pretty_name: "Canvas size",
+            default: [500, 500],
+        },
+    },
+};
+/**
+ * **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;
+    }
+    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);
+        }
+    }
+    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 = {
+            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;
 
 module.exports = CanvasKeyboardResponsePlugin;

package/dist/index.d.ts

@@ -1,116 +1,116 @@
-import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
-declare const info: {
-    readonly name: "canvas-keyboard-response";
-    readonly parameters: {
-        /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
-        readonly stimulus: {
-            readonly type: ParameterType.FUNCTION;
-            readonly pretty_name: "Stimulus";
-            readonly default: any;
-        };
-        /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
-        readonly choices: {
-            readonly type: ParameterType.KEYS;
-            readonly pretty_name: "Choices";
-            readonly default: "ALL_KEYS";
-        };
-        /** Any content here will be displayed below the stimulus. */
-        readonly prompt: {
-            readonly type: ParameterType.HTML_STRING;
-            readonly pretty_name: "Prompt";
-            readonly default: any;
-        };
-        /** How long to show the stimulus. */
-        readonly stimulus_duration: {
-            readonly type: ParameterType.INT;
-            readonly pretty_name: "Stimulus duration";
-            readonly default: any;
-        };
-        /** How long to show trial before it ends. */
-        readonly trial_duration: {
-            readonly type: ParameterType.INT;
-            readonly pretty_name: "Trial duration";
-            readonly default: any;
-        };
-        /** If true, trial will end when subject makes a response. */
-        readonly response_ends_trial: {
-            readonly type: ParameterType.BOOL;
-            readonly pretty_name: "Response ends trial";
-            readonly default: true;
-        };
-        /** Array containing the height (first value) and width (second value) of the canvas element. */
-        readonly canvas_size: {
-            readonly type: ParameterType.INT;
-            readonly array: true;
-            readonly pretty_name: "Canvas size";
-            readonly default: readonly [500, 500];
-        };
-    };
-};
-declare type Info = typeof info;
-/**
- * **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}
- */
-declare class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
-    private jsPsych;
-    static info: {
-        readonly name: "canvas-keyboard-response";
-        readonly parameters: {
-            /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
-            readonly stimulus: {
-                readonly type: ParameterType.FUNCTION;
-                readonly pretty_name: "Stimulus";
-                readonly default: any;
-            };
-            /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
-            readonly choices: {
-                readonly type: ParameterType.KEYS;
-                readonly pretty_name: "Choices";
-                readonly default: "ALL_KEYS";
-            };
-            /** Any content here will be displayed below the stimulus. */
-            readonly prompt: {
-                readonly type: ParameterType.HTML_STRING;
-                readonly pretty_name: "Prompt";
-                readonly default: any;
-            };
-            /** How long to show the stimulus. */
-            readonly stimulus_duration: {
-                readonly type: ParameterType.INT;
-                readonly pretty_name: "Stimulus duration";
-                readonly default: any;
-            };
-            /** How long to show trial before it ends. */
-            readonly trial_duration: {
-                readonly type: ParameterType.INT;
-                readonly pretty_name: "Trial duration";
-                readonly default: any;
-            };
-            /** If true, trial will end when subject makes a response. */
-            readonly response_ends_trial: {
-                readonly type: ParameterType.BOOL;
-                readonly pretty_name: "Response ends trial";
-                readonly default: true;
-            };
-            /** Array containing the height (first value) and width (second value) of the canvas element. */
-            readonly canvas_size: {
-                readonly type: ParameterType.INT;
-                readonly array: true;
-                readonly pretty_name: "Canvas size";
-                readonly default: readonly [500, 500];
-            };
-        };
-    };
-    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 CanvasKeyboardResponsePlugin;
+import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
+declare const info: {
+    readonly name: "canvas-keyboard-response";
+    readonly parameters: {
+        /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
+        readonly stimulus: {
+            readonly type: ParameterType.FUNCTION;
+            readonly pretty_name: "Stimulus";
+            readonly default: any;
+        };
+        /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
+        readonly choices: {
+            readonly type: ParameterType.KEYS;
+            readonly pretty_name: "Choices";
+            readonly default: "ALL_KEYS";
+        };
+        /** Any content here will be displayed below the stimulus. */
+        readonly prompt: {
+            readonly type: ParameterType.HTML_STRING;
+            readonly pretty_name: "Prompt";
+            readonly default: any;
+        };
+        /** How long to show the stimulus. */
+        readonly stimulus_duration: {
+            readonly type: ParameterType.INT;
+            readonly pretty_name: "Stimulus duration";
+            readonly default: any;
+        };
+        /** How long to show trial before it ends. */
+        readonly trial_duration: {
+            readonly type: ParameterType.INT;
+            readonly pretty_name: "Trial duration";
+            readonly default: any;
+        };
+        /** If true, trial will end when subject makes a response. */
+        readonly response_ends_trial: {
+            readonly type: ParameterType.BOOL;
+            readonly pretty_name: "Response ends trial";
+            readonly default: true;
+        };
+        /** Array containing the height (first value) and width (second value) of the canvas element. */
+        readonly canvas_size: {
+            readonly type: ParameterType.INT;
+            readonly array: true;
+            readonly pretty_name: "Canvas size";
+            readonly default: readonly [500, 500];
+        };
+    };
+};
+type Info = typeof info;
+/**
+ * **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}
+ */
+declare class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
+    private jsPsych;
+    static info: {
+        readonly name: "canvas-keyboard-response";
+        readonly parameters: {
+            /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
+            readonly stimulus: {
+                readonly type: ParameterType.FUNCTION;
+                readonly pretty_name: "Stimulus";
+                readonly default: any;
+            };
+            /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
+            readonly choices: {
+                readonly type: ParameterType.KEYS;
+                readonly pretty_name: "Choices";
+                readonly default: "ALL_KEYS";
+            };
+            /** Any content here will be displayed below the stimulus. */
+            readonly prompt: {
+                readonly type: ParameterType.HTML_STRING;
+                readonly pretty_name: "Prompt";
+                readonly default: any;
+            };
+            /** How long to show the stimulus. */
+            readonly stimulus_duration: {
+                readonly type: ParameterType.INT;
+                readonly pretty_name: "Stimulus duration";
+                readonly default: any;
+            };
+            /** How long to show trial before it ends. */
+            readonly trial_duration: {
+                readonly type: ParameterType.INT;
+                readonly pretty_name: "Trial duration";
+                readonly default: any;
+            };
+            /** If true, trial will end when subject makes a response. */
+            readonly response_ends_trial: {
+                readonly type: ParameterType.BOOL;
+                readonly pretty_name: "Response ends trial";
+                readonly default: true;
+            };
+            /** Array containing the height (first value) and width (second value) of the canvas element. */
+            readonly canvas_size: {
+                readonly type: ParameterType.INT;
+                readonly array: true;
+                readonly pretty_name: "Canvas size";
+                readonly default: readonly [500, 500];
+            };
+        };
+    };
+    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 CanvasKeyboardResponsePlugin;