@jspsych/plugin-html-keyboard-response 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,96 +1,99 @@
1
1
  var jsPsychHtmlKeyboardResponse = (function (jspsych) {
2
2
  'use strict';
3
3
 
4
- var _package = {
5
- name: "@jspsych/plugin-html-keyboard-response",
6
- version: "2.0.0",
7
- description: "jsPsych plugin for displaying a stimulus and getting a keyboard response",
8
- type: "module",
9
- main: "dist/index.cjs",
10
- exports: {
11
- import: "./dist/index.js",
12
- require: "./dist/index.cjs"
13
- },
14
- typings: "dist/index.d.ts",
15
- unpkg: "dist/index.browser.min.js",
16
- files: [
17
- "src",
18
- "dist"
19
- ],
20
- source: "src/index.ts",
21
- scripts: {
22
- test: "jest",
23
- "test:watch": "npm test -- --watch",
24
- tsc: "tsc",
25
- build: "rollup --config",
26
- "build:watch": "npm run build -- --watch"
27
- },
28
- repository: {
29
- type: "git",
30
- url: "git+https://github.com/jspsych/jsPsych.git",
31
- directory: "packages/plugin-html-keyboard-response"
32
- },
33
- author: "Josh de Leeuw",
34
- license: "MIT",
35
- bugs: {
36
- url: "https://github.com/jspsych/jsPsych/issues"
37
- },
38
- homepage: "https://www.jspsych.org/latest/plugins/html-keyboard-response",
39
- peerDependencies: {
40
- jspsych: ">=7.1.0"
41
- },
42
- devDependencies: {
43
- "@jspsych/config": "^3.0.0",
44
- "@jspsych/test-utils": "^1.2.0"
45
- }
46
- };
4
+ var version = "2.1.0";
47
5
 
48
6
  const info = {
49
7
  name: "html-keyboard-response",
50
- version: _package.version,
8
+ version,
51
9
  parameters: {
10
+ /**
11
+ * The string to be displayed.
12
+ */
52
13
  stimulus: {
53
14
  type: jspsych.ParameterType.HTML_STRING,
54
15
  default: void 0
55
16
  },
17
+ /**
18
+ * This array contains the key(s) that the participant is allowed to press in order to respond
19
+ * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see
20
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}
21
+ * and
22
+ * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}
23
+ * for more examples. Any key presses that are not listed in the
24
+ * array will be ignored. The default value of `"ALL_KEYS"` means that all keys will be accepted as valid responses.
25
+ * Specifying `"NO_KEYS"` will mean that no responses are allowed.
26
+ */
56
27
  choices: {
57
28
  type: jspsych.ParameterType.KEYS,
58
29
  default: "ALL_KEYS"
59
30
  },
31
+ /**
32
+ * This string can contain HTML markup. Any content here will be displayed below the stimulus.
33
+ * The intention is that it can be used to provide a reminder about the action the participant
34
+ * is supposed to take (e.g., which key to press).
35
+ */
60
36
  prompt: {
61
37
  type: jspsych.ParameterType.HTML_STRING,
62
38
  default: null
63
39
  },
40
+ /**
41
+ * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus
42
+ * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will
43
+ * remain visible until the trial ends.
44
+ */
64
45
  stimulus_duration: {
65
46
  type: jspsych.ParameterType.INT,
66
47
  default: null
67
48
  },
49
+ /**
50
+ * How long to wait for the participant to make a response before ending the trial in milliseconds.
51
+ * If the participant fails to make a response before this timer is reached, the participant's response
52
+ * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,
53
+ * then the trial will wait for a response indefinitely.
54
+ */
68
55
  trial_duration: {
69
56
  type: jspsych.ParameterType.INT,
70
57
  default: null
71
58
  },
59
+ /**
60
+ * If true, then the trial will end whenever the participant makes a response (assuming they make their
61
+ * response before the cutoff specified by the trial_duration parameter). If false, then the trial will
62
+ * continue until the value for trial_duration is reached. You can set this parameter to false to force
63
+ * the participant to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
64
+ */
72
65
  response_ends_trial: {
73
66
  type: jspsych.ParameterType.BOOL,
74
67
  default: true
75
68
  }
76
69
  },
77
70
  data: {
71
+ /** Indicates which key the participant pressed. */
78
72
  response: {
79
73
  type: jspsych.ParameterType.STRING
80
74
  },
75
+ /** 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. */
81
76
  rt: {
82
77
  type: jspsych.ParameterType.INT
83
78
  },
79
+ /** The HTML content that was displayed on the screen. */
84
80
  stimulus: {
85
81
  type: jspsych.ParameterType.STRING
86
82
  }
83
+ },
84
+ // prettier-ignore
85
+ citations: {
86
+ "apa": "de Leeuw, J. R., Gilbert, R. A., & Luchterhandt, B. (2023). jsPsych: Enabling an Open-Source Collaborative Ecosystem of Behavioral Experiments. Journal of Open Source Software, 8(85), 5351. https://doi.org/10.21105/joss.05351 ",
87
+ "bibtex": '@article{Leeuw2023jsPsych, author = {de Leeuw, Joshua R. and Gilbert, Rebecca A. and Luchterhandt, Bj{\\" o}rn}, journal = {Journal of Open Source Software}, doi = {10.21105/joss.05351}, issn = {2475-9066}, number = {85}, year = {2023}, month = {may 11}, pages = {5351}, publisher = {Open Journals}, title = {jsPsych: Enabling an {Open}-{Source} {Collaborative} {Ecosystem} of {Behavioral} {Experiments}}, url = {https://joss.theoj.org/papers/10.21105/joss.05351}, volume = {8}, } '
87
88
  }
88
89
  };
89
90
  class HtmlKeyboardResponsePlugin {
90
91
  constructor(jsPsych) {
91
92
  this.jsPsych = jsPsych;
92
93
  }
93
- static info = info;
94
+ static {
95
+ this.info = info;
96
+ }
94
97
  trial(display_element, trial) {
95
98
  var new_html = '<div id="jspsych-html-keyboard-response-stimulus">' + trial.stimulus + "</div>";
96
99
  if (trial.prompt !== null) {
@@ -178,4 +181,4 @@ var jsPsychHtmlKeyboardResponse = (function (jspsych) {
178
181
  return HtmlKeyboardResponsePlugin;
179
182
 
180
183
  })(jsPsychModule);
181
- //# sourceMappingURL=https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.0.0/dist/index.browser.js.map
184
+ //# sourceMappingURL=https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.1.0/dist/index.browser.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.browser.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: \"html-keyboard-response\",\n version: version,\n parameters: {\n /**\n * The string to be displayed.\n */\n stimulus: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /**\n * This array contains the key(s) that the participant is allowed to press in order to respond\n * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n * and\n * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n * for more examples. Any key presses that are not listed in the\n * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n */\n choices: {\n type: ParameterType.KEYS,\n default: \"ALL_KEYS\",\n },\n /**\n * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n * The intention is that it can be used to provide a reminder about the action the participant\n * is supposed to take (e.g., which key to press).\n */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /**\n * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n * remain visible until the trial ends.\n */\n stimulus_duration: {\n type: ParameterType.INT,\n default: null,\n },\n /**\n * How long to wait for the participant to make a response before ending the trial in milliseconds.\n * If the participant fails to make a response before this timer is reached, the participant's response\n * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n * then the trial will wait for a response indefinitely.\n */\n trial_duration: {\n type: ParameterType.INT,\n default: null,\n },\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 set this parameter to false to force\n * the participant 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 },\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 when the stimulus first appears on the screen until the participant's response. */\n rt: {\n type: ParameterType.INT,\n },\n /** The HTML content that was displayed on the screen. */\n stimulus: {\n type: ParameterType.STRING,\n },\n },\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n static info = info;\n constructor(private jsPsych: JsPsych) {}\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n // add prompt\n if (trial.prompt !== null) {\n new_html += trial.prompt;\n }\n\n // draw\n display_element.innerHTML = new_html;\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-html-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-html-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(end_trial, 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 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 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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":["version","ParameterType","info"],"mappings":"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"}
1
+ {"version":3,"file":"index.browser.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n \"name\": \"@jspsych/plugin-html-keyboard-response\",\n \"version\": \"2.1.0\",\n \"description\": \"jsPsych plugin for displaying a stimulus and getting a keyboard response\",\n \"type\": \"module\",\n \"main\": \"dist/index.cjs\",\n \"exports\": {\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs\"\n },\n \"typings\": \"dist/index.d.ts\",\n \"unpkg\": \"dist/index.browser.min.js\",\n \"files\": [\n \"src\",\n \"dist\"\n ],\n \"source\": \"src/index.ts\",\n \"scripts\": {\n \"test\": \"jest\",\n \"test:watch\": \"npm test -- --watch\",\n \"tsc\": \"tsc\",\n \"build\": \"rollup --config\",\n \"build:watch\": \"npm run build -- --watch\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n \"directory\": \"packages/plugin-html-keyboard-response\"\n },\n \"author\": \"Josh de Leeuw\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n },\n \"homepage\": \"https://www.jspsych.org/latest/plugins/html-keyboard-response\",\n \"peerDependencies\": {\n \"jspsych\": \">=7.1.0\"\n },\n \"devDependencies\": {\n \"@jspsych/config\": \"^3.2.0\",\n \"@jspsych/test-utils\": \"^1.2.0\"\n }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n name: \"html-keyboard-response\",\n version: version,\n parameters: {\n /**\n * The string to be displayed.\n */\n stimulus: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /**\n * This array contains the key(s) that the participant is allowed to press in order to respond\n * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n * and\n * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n * for more examples. Any key presses that are not listed in the\n * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n */\n choices: {\n type: ParameterType.KEYS,\n default: \"ALL_KEYS\",\n },\n /**\n * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n * The intention is that it can be used to provide a reminder about the action the participant\n * is supposed to take (e.g., which key to press).\n */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /**\n * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n * remain visible until the trial ends.\n */\n stimulus_duration: {\n type: ParameterType.INT,\n default: null,\n },\n /**\n * How long to wait for the participant to make a response before ending the trial in milliseconds.\n * If the participant fails to make a response before this timer is reached, the participant's response\n * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n * then the trial will wait for a response indefinitely.\n */\n trial_duration: {\n type: ParameterType.INT,\n default: null,\n },\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 set this parameter to false to force\n * the participant 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 },\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 when the stimulus first appears on the screen until the participant's response. */\n rt: {\n type: ParameterType.INT,\n },\n /** The HTML content that was displayed on the screen. */\n stimulus: {\n type: ParameterType.STRING,\n },\n },\n // prettier-ignore\n citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n static info = info;\n constructor(private jsPsych: JsPsych) {}\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n // add prompt\n if (trial.prompt !== null) {\n new_html += trial.prompt;\n }\n\n // draw\n display_element.innerHTML = new_html;\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-html-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-html-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(end_trial, 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 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 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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":[],"mappings":";;;EAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICiFA,SAAA,EAAA;EAAA;;KAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,2 +1,2 @@
1
- var jsPsychHtmlKeyboardResponse=function(a){"use strict";var o={name:"@jspsych/plugin-html-keyboard-response",version:"2.0.0",description:"jsPsych plugin for displaying a 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","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-html-keyboard-response"},author:"Josh de Leeuw",license:"MIT",bugs:{url:"https://github.com/jspsych/jsPsych/issues"},homepage:"https://www.jspsych.org/latest/plugins/html-keyboard-response",peerDependencies:{jspsych:">=7.1.0"},devDependencies:{"@jspsych/config":"^3.0.0","@jspsych/test-utils":"^1.2.0"}};const p={name:"html-keyboard-response",version:o.version,parameters:{stimulus:{type:a.ParameterType.HTML_STRING,default:void 0},choices:{type:a.ParameterType.KEYS,default:"ALL_KEYS"},prompt:{type:a.ParameterType.HTML_STRING,default:null},stimulus_duration:{type:a.ParameterType.INT,default:null},trial_duration:{type:a.ParameterType.INT,default:null},response_ends_trial:{type:a.ParameterType.BOOL,default:!0}},data:{response:{type:a.ParameterType.STRING},rt:{type:a.ParameterType.INT},stimulus:{type:a.ParameterType.STRING}}};class n{constructor(e){this.jsPsych=e}trial(e,s){var i='<div id="jspsych-html-keyboard-response-stimulus">'+s.stimulus+"</div>";s.prompt!==null&&(i+=s.prompt),e.innerHTML=i;var t={rt:null,key:null};const r=()=>{typeof u!="undefined"&&this.jsPsych.pluginAPI.cancelKeyboardResponse(u);var l={rt:t.rt,stimulus:s.stimulus,response:t.key};this.jsPsych.finishTrial(l)};var c=l=>{e.querySelector("#jspsych-html-keyboard-response-stimulus").className+=" responded",t.key==null&&(t=l),s.response_ends_trial&&r()};if(s.choices!="NO_KEYS")var u=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:c,valid_responses:s.choices,rt_method:"performance",persist:!1,allow_held_key:!1});s.stimulus_duration!==null&&this.jsPsych.pluginAPI.setTimeout(()=>{e.querySelector("#jspsych-html-keyboard-response-stimulus").style.visibility="hidden"},s.stimulus_duration),s.trial_duration!==null&&this.jsPsych.pluginAPI.setTimeout(r,s.trial_duration)}simulate(e,s,i,t){s=="data-only"&&(t(),this.simulate_data_only(e,i)),s=="visual"&&this.simulate_visual(e,i,t)}create_simulation_data(e,s){const i={stimulus:e.stimulus,rt:this.jsPsych.randomization.sampleExGaussian(500,50,.006666666666666667,!0),response:this.jsPsych.pluginAPI.getValidKey(e.choices)},t=this.jsPsych.pluginAPI.mergeSimulationData(i,s);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(e,t),t}simulate_data_only(e,s){const i=this.create_simulation_data(e,s);this.jsPsych.finishTrial(i)}simulate_visual(e,s,i){const t=this.create_simulation_data(e,s),r=this.jsPsych.getDisplayElement();this.trial(r,e),i(),t.rt!==null&&this.jsPsych.pluginAPI.pressKey(t.response,t.rt)}}return n.info=p,n}(jsPsychModule);
2
- //# sourceMappingURL=https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.0.0/dist/index.browser.min.js.map
1
+ var jsPsychHtmlKeyboardResponse=function(i){"use strict";var u="2.1.0";const p={name:"html-keyboard-response",version:u,parameters:{stimulus:{type:i.ParameterType.HTML_STRING,default:void 0},choices:{type:i.ParameterType.KEYS,default:"ALL_KEYS"},prompt:{type:i.ParameterType.HTML_STRING,default:null},stimulus_duration:{type:i.ParameterType.INT,default:null},trial_duration:{type:i.ParameterType.INT,default:null},response_ends_trial:{type:i.ParameterType.BOOL,default:!0}},data:{response:{type:i.ParameterType.STRING},rt:{type:i.ParameterType.INT},stimulus:{type:i.ParameterType.STRING}},citations:{apa:"de Leeuw, J. R., Gilbert, R. A., & Luchterhandt, B. (2023). jsPsych: Enabling an Open-Source Collaborative Ecosystem of Behavioral Experiments. Journal of Open Source Software, 8(85), 5351. https://doi.org/10.21105/joss.05351 ",bibtex:'@article{Leeuw2023jsPsych, author = {de Leeuw, Joshua R. and Gilbert, Rebecca A. and Luchterhandt, Bj{\\" o}rn}, journal = {Journal of Open Source Software}, doi = {10.21105/joss.05351}, issn = {2475-9066}, number = {85}, year = {2023}, month = {may 11}, pages = {5351}, publisher = {Open Journals}, title = {jsPsych: Enabling an {Open}-{Source} {Collaborative} {Ecosystem} of {Behavioral} {Experiments}}, url = {https://joss.theoj.org/papers/10.21105/joss.05351}, volume = {8}, } '}};class n{constructor(t){this.jsPsych=t}trial(t,e){var a='<div id="jspsych-html-keyboard-response-stimulus">'+e.stimulus+"</div>";e.prompt!==null&&(a+=e.prompt),t.innerHTML=a;var s={rt:null,key:null};const r=()=>{typeof o!="undefined"&&this.jsPsych.pluginAPI.cancelKeyboardResponse(o);var l={rt:s.rt,stimulus:e.stimulus,response:s.key};this.jsPsych.finishTrial(l)};var m=l=>{t.querySelector("#jspsych-html-keyboard-response-stimulus").className+=" responded",s.key==null&&(s=l),e.response_ends_trial&&r()};if(e.choices!="NO_KEYS")var o=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:m,valid_responses:e.choices,rt_method:"performance",persist:!1,allow_held_key:!1});e.stimulus_duration!==null&&this.jsPsych.pluginAPI.setTimeout(()=>{t.querySelector("#jspsych-html-keyboard-response-stimulus").style.visibility="hidden"},e.stimulus_duration),e.trial_duration!==null&&this.jsPsych.pluginAPI.setTimeout(r,e.trial_duration)}simulate(t,e,a,s){e=="data-only"&&(s(),this.simulate_data_only(t,a)),e=="visual"&&this.simulate_visual(t,a,s)}create_simulation_data(t,e){const a={stimulus:t.stimulus,rt:this.jsPsych.randomization.sampleExGaussian(500,50,.006666666666666667,!0),response:this.jsPsych.pluginAPI.getValidKey(t.choices)},s=this.jsPsych.pluginAPI.mergeSimulationData(a,e);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(t,s),s}simulate_data_only(t,e){const a=this.create_simulation_data(t,e);this.jsPsych.finishTrial(a)}simulate_visual(t,e,a){const s=this.create_simulation_data(t,e),r=this.jsPsych.getDisplayElement();this.trial(r,t),a(),s.rt!==null&&this.jsPsych.pluginAPI.pressKey(s.response,s.rt)}}return n.info=p,n}(jsPsychModule);
2
+ //# sourceMappingURL=https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.1.0/dist/index.browser.min.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.browser.min.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: \"html-keyboard-response\",\n version: version,\n parameters: {\n /**\n * The string to be displayed.\n */\n stimulus: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /**\n * This array contains the key(s) that the participant is allowed to press in order to respond\n * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n * and\n * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n * for more examples. Any key presses that are not listed in the\n * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n */\n choices: {\n type: ParameterType.KEYS,\n default: \"ALL_KEYS\",\n },\n /**\n * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n * The intention is that it can be used to provide a reminder about the action the participant\n * is supposed to take (e.g., which key to press).\n */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /**\n * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n * remain visible until the trial ends.\n */\n stimulus_duration: {\n type: ParameterType.INT,\n default: null,\n },\n /**\n * How long to wait for the participant to make a response before ending the trial in milliseconds.\n * If the participant fails to make a response before this timer is reached, the participant's response\n * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n * then the trial will wait for a response indefinitely.\n */\n trial_duration: {\n type: ParameterType.INT,\n default: null,\n },\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 set this parameter to false to force\n * the participant 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 },\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 when the stimulus first appears on the screen until the participant's response. */\n rt: {\n type: ParameterType.INT,\n },\n /** The HTML content that was displayed on the screen. */\n stimulus: {\n type: ParameterType.STRING,\n },\n },\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n static info = info;\n constructor(private jsPsych: JsPsych) {}\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n // add prompt\n if (trial.prompt !== null) {\n new_html += trial.prompt;\n }\n\n // draw\n display_element.innerHTML = new_html;\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-html-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-html-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(end_trial, 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 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 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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":["info","version","ParameterType","HtmlKeyboardResponsePlugin","jsPsych","display_element","trial","new_html","response","end_trial","keyboardListener","trial_data","after_response","simulation_mode","simulation_options","load_callback","default_data","data"],"mappings":"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"}
1
+ {"version":3,"file":"index.browser.min.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n \"name\": \"@jspsych/plugin-html-keyboard-response\",\n \"version\": \"2.1.0\",\n \"description\": \"jsPsych plugin for displaying a stimulus and getting a keyboard response\",\n \"type\": \"module\",\n \"main\": \"dist/index.cjs\",\n \"exports\": {\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs\"\n },\n \"typings\": \"dist/index.d.ts\",\n \"unpkg\": \"dist/index.browser.min.js\",\n \"files\": [\n \"src\",\n \"dist\"\n ],\n \"source\": \"src/index.ts\",\n \"scripts\": {\n \"test\": \"jest\",\n \"test:watch\": \"npm test -- --watch\",\n \"tsc\": \"tsc\",\n \"build\": \"rollup --config\",\n \"build:watch\": \"npm run build -- --watch\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n \"directory\": \"packages/plugin-html-keyboard-response\"\n },\n \"author\": \"Josh de Leeuw\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n },\n \"homepage\": \"https://www.jspsych.org/latest/plugins/html-keyboard-response\",\n \"peerDependencies\": {\n \"jspsych\": \">=7.1.0\"\n },\n \"devDependencies\": {\n \"@jspsych/config\": \"^3.2.0\",\n \"@jspsych/test-utils\": \"^1.2.0\"\n }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n name: \"html-keyboard-response\",\n version: version,\n parameters: {\n /**\n * The string to be displayed.\n */\n stimulus: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /**\n * This array contains the key(s) that the participant is allowed to press in order to respond\n * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n * and\n * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n * for more examples. Any key presses that are not listed in the\n * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n */\n choices: {\n type: ParameterType.KEYS,\n default: \"ALL_KEYS\",\n },\n /**\n * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n * The intention is that it can be used to provide a reminder about the action the participant\n * is supposed to take (e.g., which key to press).\n */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /**\n * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n * remain visible until the trial ends.\n */\n stimulus_duration: {\n type: ParameterType.INT,\n default: null,\n },\n /**\n * How long to wait for the participant to make a response before ending the trial in milliseconds.\n * If the participant fails to make a response before this timer is reached, the participant's response\n * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n * then the trial will wait for a response indefinitely.\n */\n trial_duration: {\n type: ParameterType.INT,\n default: null,\n },\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 set this parameter to false to force\n * the participant 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 },\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 when the stimulus first appears on the screen until the participant's response. */\n rt: {\n type: ParameterType.INT,\n },\n /** The HTML content that was displayed on the screen. */\n stimulus: {\n type: ParameterType.STRING,\n },\n },\n // prettier-ignore\n citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n static info = info;\n constructor(private jsPsych: JsPsych) {}\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n // add prompt\n if (trial.prompt !== null) {\n new_html += trial.prompt;\n }\n\n // draw\n display_element.innerHTML = new_html;\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-html-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-html-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(end_trial, 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 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 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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":["version"],"mappings":"yDAEEA,IAAAA,EAAW,8gBCiFA,UAAA,iuBAAe"}
package/dist/index.cjs CHANGED
@@ -2,95 +2,99 @@
2
2
 
3
3
  var jspsych = require('jspsych');
4
4
 
5
- var _package = {
6
- name: "@jspsych/plugin-html-keyboard-response",
7
- version: "2.0.0",
8
- description: "jsPsych plugin for displaying a stimulus and getting a keyboard response",
9
- type: "module",
10
- main: "dist/index.cjs",
11
- exports: {
12
- import: "./dist/index.js",
13
- require: "./dist/index.cjs"
14
- },
15
- typings: "dist/index.d.ts",
16
- unpkg: "dist/index.browser.min.js",
17
- files: [
18
- "src",
19
- "dist"
20
- ],
21
- source: "src/index.ts",
22
- scripts: {
23
- test: "jest",
24
- "test:watch": "npm test -- --watch",
25
- tsc: "tsc",
26
- build: "rollup --config",
27
- "build:watch": "npm run build -- --watch"
28
- },
29
- repository: {
30
- type: "git",
31
- url: "git+https://github.com/jspsych/jsPsych.git",
32
- directory: "packages/plugin-html-keyboard-response"
33
- },
34
- author: "Josh de Leeuw",
35
- license: "MIT",
36
- bugs: {
37
- url: "https://github.com/jspsych/jsPsych/issues"
38
- },
39
- homepage: "https://www.jspsych.org/latest/plugins/html-keyboard-response",
40
- peerDependencies: {
41
- jspsych: ">=7.1.0"
42
- },
43
- devDependencies: {
44
- "@jspsych/config": "^3.0.0",
45
- "@jspsych/test-utils": "^1.2.0"
46
- }
47
- };
5
+ var version = "2.1.0";
48
6
 
49
7
  const info = {
50
8
  name: "html-keyboard-response",
51
- version: _package.version,
9
+ version,
52
10
  parameters: {
11
+ /**
12
+ * The string to be displayed.
13
+ */
53
14
  stimulus: {
54
15
  type: jspsych.ParameterType.HTML_STRING,
55
16
  default: void 0
56
17
  },
18
+ /**
19
+ * This array contains the key(s) that the participant is allowed to press in order to respond
20
+ * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see
21
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}
22
+ * and
23
+ * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}
24
+ * for more examples. Any key presses that are not listed in the
25
+ * array will be ignored. The default value of `"ALL_KEYS"` means that all keys will be accepted as valid responses.
26
+ * Specifying `"NO_KEYS"` will mean that no responses are allowed.
27
+ */
57
28
  choices: {
58
29
  type: jspsych.ParameterType.KEYS,
59
30
  default: "ALL_KEYS"
60
31
  },
32
+ /**
33
+ * This string can contain HTML markup. Any content here will be displayed below the stimulus.
34
+ * The intention is that it can be used to provide a reminder about the action the participant
35
+ * is supposed to take (e.g., which key to press).
36
+ */
61
37
  prompt: {
62
38
  type: jspsych.ParameterType.HTML_STRING,
63
39
  default: null
64
40
  },
41
+ /**
42
+ * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus
43
+ * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will
44
+ * remain visible until the trial ends.
45
+ */
65
46
  stimulus_duration: {
66
47
  type: jspsych.ParameterType.INT,
67
48
  default: null
68
49
  },
50
+ /**
51
+ * How long to wait for the participant to make a response before ending the trial in milliseconds.
52
+ * If the participant fails to make a response before this timer is reached, the participant's response
53
+ * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,
54
+ * then the trial will wait for a response indefinitely.
55
+ */
69
56
  trial_duration: {
70
57
  type: jspsych.ParameterType.INT,
71
58
  default: null
72
59
  },
60
+ /**
61
+ * If true, then the trial will end whenever the participant makes a response (assuming they make their
62
+ * response before the cutoff specified by the trial_duration parameter). If false, then the trial will
63
+ * continue until the value for trial_duration is reached. You can set this parameter to false to force
64
+ * the participant to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
65
+ */
73
66
  response_ends_trial: {
74
67
  type: jspsych.ParameterType.BOOL,
75
68
  default: true
76
69
  }
77
70
  },
78
71
  data: {
72
+ /** Indicates which key the participant pressed. */
79
73
  response: {
80
74
  type: jspsych.ParameterType.STRING
81
75
  },
76
+ /** 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. */
82
77
  rt: {
83
78
  type: jspsych.ParameterType.INT
84
79
  },
80
+ /** The HTML content that was displayed on the screen. */
85
81
  stimulus: {
86
82
  type: jspsych.ParameterType.STRING
87
83
  }
84
+ },
85
+ // prettier-ignore
86
+ citations: {
87
+ "apa": "de Leeuw, J. R., Gilbert, R. A., & Luchterhandt, B. (2023). jsPsych: Enabling an Open-Source Collaborative Ecosystem of Behavioral Experiments. Journal of Open Source Software, 8(85), 5351. https://doi.org/10.21105/joss.05351 ",
88
+ "bibtex": '@article{Leeuw2023jsPsych, author = {de Leeuw, Joshua R. and Gilbert, Rebecca A. and Luchterhandt, Bj{\\" o}rn}, journal = {Journal of Open Source Software}, doi = {10.21105/joss.05351}, issn = {2475-9066}, number = {85}, year = {2023}, month = {may 11}, pages = {5351}, publisher = {Open Journals}, title = {jsPsych: Enabling an {Open}-{Source} {Collaborative} {Ecosystem} of {Behavioral} {Experiments}}, url = {https://joss.theoj.org/papers/10.21105/joss.05351}, volume = {8}, } '
88
89
  }
89
90
  };
90
91
  class HtmlKeyboardResponsePlugin {
91
92
  constructor(jsPsych) {
92
93
  this.jsPsych = jsPsych;
93
94
  }
95
+ static {
96
+ this.info = info;
97
+ }
94
98
  trial(display_element, trial) {
95
99
  var new_html = '<div id="jspsych-html-keyboard-response-stimulus">' + trial.stimulus + "</div>";
96
100
  if (trial.prompt !== null) {
@@ -174,7 +178,6 @@ class HtmlKeyboardResponsePlugin {
174
178
  }
175
179
  }
176
180
  }
177
- HtmlKeyboardResponsePlugin.info = info;
178
181
 
179
182
  module.exports = HtmlKeyboardResponsePlugin;
180
183
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n name: \"html-keyboard-response\",\n version: version,\n parameters: {\n /**\n * The string to be displayed.\n */\n stimulus: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /**\n * This array contains the key(s) that the participant is allowed to press in order to respond\n * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n * and\n * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n * for more examples. Any key presses that are not listed in the\n * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n */\n choices: {\n type: ParameterType.KEYS,\n default: \"ALL_KEYS\",\n },\n /**\n * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n * The intention is that it can be used to provide a reminder about the action the participant\n * is supposed to take (e.g., which key to press).\n */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /**\n * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n * remain visible until the trial ends.\n */\n stimulus_duration: {\n type: ParameterType.INT,\n default: null,\n },\n /**\n * How long to wait for the participant to make a response before ending the trial in milliseconds.\n * If the participant fails to make a response before this timer is reached, the participant's response\n * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n * then the trial will wait for a response indefinitely.\n */\n trial_duration: {\n type: ParameterType.INT,\n default: null,\n },\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 set this parameter to false to force\n * the participant 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 },\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 when the stimulus first appears on the screen until the participant's response. */\n rt: {\n type: ParameterType.INT,\n },\n /** The HTML content that was displayed on the screen. */\n stimulus: {\n type: ParameterType.STRING,\n },\n },\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n static info = info;\n constructor(private jsPsych: JsPsych) {}\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n // add prompt\n if (trial.prompt !== null) {\n new_html += trial.prompt;\n }\n\n // draw\n display_element.innerHTML = new_html;\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-html-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-html-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(end_trial, 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 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 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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":["version","ParameterType","info"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n \"name\": \"@jspsych/plugin-html-keyboard-response\",\n \"version\": \"2.1.0\",\n \"description\": \"jsPsych plugin for displaying a stimulus and getting a keyboard response\",\n \"type\": \"module\",\n \"main\": \"dist/index.cjs\",\n \"exports\": {\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs\"\n },\n \"typings\": \"dist/index.d.ts\",\n \"unpkg\": \"dist/index.browser.min.js\",\n \"files\": [\n \"src\",\n \"dist\"\n ],\n \"source\": \"src/index.ts\",\n \"scripts\": {\n \"test\": \"jest\",\n \"test:watch\": \"npm test -- --watch\",\n \"tsc\": \"tsc\",\n \"build\": \"rollup --config\",\n \"build:watch\": \"npm run build -- --watch\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n \"directory\": \"packages/plugin-html-keyboard-response\"\n },\n \"author\": \"Josh de Leeuw\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n },\n \"homepage\": \"https://www.jspsych.org/latest/plugins/html-keyboard-response\",\n \"peerDependencies\": {\n \"jspsych\": \">=7.1.0\"\n },\n \"devDependencies\": {\n \"@jspsych/config\": \"^3.2.0\",\n \"@jspsych/test-utils\": \"^1.2.0\"\n }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n name: \"html-keyboard-response\",\n version: version,\n parameters: {\n /**\n * The string to be displayed.\n */\n stimulus: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /**\n * This array contains the key(s) that the participant is allowed to press in order to respond\n * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n * and\n * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n * for more examples. Any key presses that are not listed in the\n * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n */\n choices: {\n type: ParameterType.KEYS,\n default: \"ALL_KEYS\",\n },\n /**\n * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n * The intention is that it can be used to provide a reminder about the action the participant\n * is supposed to take (e.g., which key to press).\n */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /**\n * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n * remain visible until the trial ends.\n */\n stimulus_duration: {\n type: ParameterType.INT,\n default: null,\n },\n /**\n * How long to wait for the participant to make a response before ending the trial in milliseconds.\n * If the participant fails to make a response before this timer is reached, the participant's response\n * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n * then the trial will wait for a response indefinitely.\n */\n trial_duration: {\n type: ParameterType.INT,\n default: null,\n },\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 set this parameter to false to force\n * the participant 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 },\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 when the stimulus first appears on the screen until the participant's response. */\n rt: {\n type: ParameterType.INT,\n },\n /** The HTML content that was displayed on the screen. */\n stimulus: {\n type: ParameterType.STRING,\n },\n },\n // prettier-ignore\n citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n static info = info;\n constructor(private jsPsych: JsPsych) {}\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n // add prompt\n if (trial.prompt !== null) {\n new_html += trial.prompt;\n }\n\n // draw\n display_element.innerHTML = new_html;\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-html-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-html-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(end_trial, 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 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 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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":[],"mappings":";;;;AAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECiFA,SAAA,EAAA;AAAA;;GAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.d.ts CHANGED
@@ -78,6 +78,7 @@ declare const info: {
78
78
  readonly type: ParameterType.STRING;
79
79
  };
80
80
  };
81
+ readonly citations: "__CITATIONS__";
81
82
  };
82
83
  type Info = typeof info;
83
84
  /**
@@ -168,6 +169,7 @@ declare class HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {
168
169
  readonly type: ParameterType.STRING;
169
170
  };
170
171
  };
172
+ readonly citations: "__CITATIONS__";
171
173
  };
172
174
  constructor(jsPsych: JsPsych);
173
175
  trial(display_element: HTMLElement, trial: TrialType<Info>): void;
package/dist/index.js CHANGED
@@ -1,94 +1,98 @@
1
1
  import { ParameterType } from 'jspsych';
2
2
 
3
- var _package = {
4
- name: "@jspsych/plugin-html-keyboard-response",
5
- version: "2.0.0",
6
- description: "jsPsych plugin for displaying a stimulus and getting a keyboard response",
7
- type: "module",
8
- main: "dist/index.cjs",
9
- exports: {
10
- import: "./dist/index.js",
11
- require: "./dist/index.cjs"
12
- },
13
- typings: "dist/index.d.ts",
14
- unpkg: "dist/index.browser.min.js",
15
- files: [
16
- "src",
17
- "dist"
18
- ],
19
- source: "src/index.ts",
20
- scripts: {
21
- test: "jest",
22
- "test:watch": "npm test -- --watch",
23
- tsc: "tsc",
24
- build: "rollup --config",
25
- "build:watch": "npm run build -- --watch"
26
- },
27
- repository: {
28
- type: "git",
29
- url: "git+https://github.com/jspsych/jsPsych.git",
30
- directory: "packages/plugin-html-keyboard-response"
31
- },
32
- author: "Josh de Leeuw",
33
- license: "MIT",
34
- bugs: {
35
- url: "https://github.com/jspsych/jsPsych/issues"
36
- },
37
- homepage: "https://www.jspsych.org/latest/plugins/html-keyboard-response",
38
- peerDependencies: {
39
- jspsych: ">=7.1.0"
40
- },
41
- devDependencies: {
42
- "@jspsych/config": "^3.0.0",
43
- "@jspsych/test-utils": "^1.2.0"
44
- }
45
- };
3
+ var version = "2.1.0";
46
4
 
47
5
  const info = {
48
6
  name: "html-keyboard-response",
49
- version: _package.version,
7
+ version,
50
8
  parameters: {
9
+ /**
10
+ * The string to be displayed.
11
+ */
51
12
  stimulus: {
52
13
  type: ParameterType.HTML_STRING,
53
14
  default: void 0
54
15
  },
16
+ /**
17
+ * This array contains the key(s) that the participant is allowed to press in order to respond
18
+ * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see
19
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}
20
+ * and
21
+ * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}
22
+ * for more examples. Any key presses that are not listed in the
23
+ * array will be ignored. The default value of `"ALL_KEYS"` means that all keys will be accepted as valid responses.
24
+ * Specifying `"NO_KEYS"` will mean that no responses are allowed.
25
+ */
55
26
  choices: {
56
27
  type: ParameterType.KEYS,
57
28
  default: "ALL_KEYS"
58
29
  },
30
+ /**
31
+ * This string can contain HTML markup. Any content here will be displayed below the stimulus.
32
+ * The intention is that it can be used to provide a reminder about the action the participant
33
+ * is supposed to take (e.g., which key to press).
34
+ */
59
35
  prompt: {
60
36
  type: ParameterType.HTML_STRING,
61
37
  default: null
62
38
  },
39
+ /**
40
+ * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus
41
+ * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will
42
+ * remain visible until the trial ends.
43
+ */
63
44
  stimulus_duration: {
64
45
  type: ParameterType.INT,
65
46
  default: null
66
47
  },
48
+ /**
49
+ * How long to wait for the participant to make a response before ending the trial in milliseconds.
50
+ * If the participant fails to make a response before this timer is reached, the participant's response
51
+ * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,
52
+ * then the trial will wait for a response indefinitely.
53
+ */
67
54
  trial_duration: {
68
55
  type: ParameterType.INT,
69
56
  default: null
70
57
  },
58
+ /**
59
+ * If true, then the trial will end whenever the participant makes a response (assuming they make their
60
+ * response before the cutoff specified by the trial_duration parameter). If false, then the trial will
61
+ * continue until the value for trial_duration is reached. You can set this parameter to false to force
62
+ * the participant to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
63
+ */
71
64
  response_ends_trial: {
72
65
  type: ParameterType.BOOL,
73
66
  default: true
74
67
  }
75
68
  },
76
69
  data: {
70
+ /** Indicates which key the participant pressed. */
77
71
  response: {
78
72
  type: ParameterType.STRING
79
73
  },
74
+ /** 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. */
80
75
  rt: {
81
76
  type: ParameterType.INT
82
77
  },
78
+ /** The HTML content that was displayed on the screen. */
83
79
  stimulus: {
84
80
  type: ParameterType.STRING
85
81
  }
82
+ },
83
+ // prettier-ignore
84
+ citations: {
85
+ "apa": "de Leeuw, J. R., Gilbert, R. A., & Luchterhandt, B. (2023). jsPsych: Enabling an Open-Source Collaborative Ecosystem of Behavioral Experiments. Journal of Open Source Software, 8(85), 5351. https://doi.org/10.21105/joss.05351 ",
86
+ "bibtex": '@article{Leeuw2023jsPsych, author = {de Leeuw, Joshua R. and Gilbert, Rebecca A. and Luchterhandt, Bj{\\" o}rn}, journal = {Journal of Open Source Software}, doi = {10.21105/joss.05351}, issn = {2475-9066}, number = {85}, year = {2023}, month = {may 11}, pages = {5351}, publisher = {Open Journals}, title = {jsPsych: Enabling an {Open}-{Source} {Collaborative} {Ecosystem} of {Behavioral} {Experiments}}, url = {https://joss.theoj.org/papers/10.21105/joss.05351}, volume = {8}, } '
86
87
  }
87
88
  };
88
89
  class HtmlKeyboardResponsePlugin {
89
90
  constructor(jsPsych) {
90
91
  this.jsPsych = jsPsych;
91
92
  }
93
+ static {
94
+ this.info = info;
95
+ }
92
96
  trial(display_element, trial) {
93
97
  var new_html = '<div id="jspsych-html-keyboard-response-stimulus">' + trial.stimulus + "</div>";
94
98
  if (trial.prompt !== null) {
@@ -172,7 +176,6 @@ class HtmlKeyboardResponsePlugin {
172
176
  }
173
177
  }
174
178
  }
175
- HtmlKeyboardResponsePlugin.info = info;
176
179
 
177
180
  export { HtmlKeyboardResponsePlugin as default };
178
181
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"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: \"html-keyboard-response\",\n version: version,\n parameters: {\n /**\n * The string to be displayed.\n */\n stimulus: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /**\n * This array contains the key(s) that the participant is allowed to press in order to respond\n * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n * and\n * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n * for more examples. Any key presses that are not listed in the\n * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n */\n choices: {\n type: ParameterType.KEYS,\n default: \"ALL_KEYS\",\n },\n /**\n * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n * The intention is that it can be used to provide a reminder about the action the participant\n * is supposed to take (e.g., which key to press).\n */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /**\n * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n * remain visible until the trial ends.\n */\n stimulus_duration: {\n type: ParameterType.INT,\n default: null,\n },\n /**\n * How long to wait for the participant to make a response before ending the trial in milliseconds.\n * If the participant fails to make a response before this timer is reached, the participant's response\n * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n * then the trial will wait for a response indefinitely.\n */\n trial_duration: {\n type: ParameterType.INT,\n default: null,\n },\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 set this parameter to false to force\n * the participant 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 },\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 when the stimulus first appears on the screen until the participant's response. */\n rt: {\n type: ParameterType.INT,\n },\n /** The HTML content that was displayed on the screen. */\n stimulus: {\n type: ParameterType.STRING,\n },\n },\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n static info = info;\n constructor(private jsPsych: JsPsych) {}\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n // add prompt\n if (trial.prompt !== null) {\n new_html += trial.prompt;\n }\n\n // draw\n display_element.innerHTML = new_html;\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-html-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-html-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(end_trial, 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 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 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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":["version","info"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../package.json","../src/index.ts"],"sourcesContent":["{\n \"name\": \"@jspsych/plugin-html-keyboard-response\",\n \"version\": \"2.1.0\",\n \"description\": \"jsPsych plugin for displaying a stimulus and getting a keyboard response\",\n \"type\": \"module\",\n \"main\": \"dist/index.cjs\",\n \"exports\": {\n \"import\": \"./dist/index.js\",\n \"require\": \"./dist/index.cjs\"\n },\n \"typings\": \"dist/index.d.ts\",\n \"unpkg\": \"dist/index.browser.min.js\",\n \"files\": [\n \"src\",\n \"dist\"\n ],\n \"source\": \"src/index.ts\",\n \"scripts\": {\n \"test\": \"jest\",\n \"test:watch\": \"npm test -- --watch\",\n \"tsc\": \"tsc\",\n \"build\": \"rollup --config\",\n \"build:watch\": \"npm run build -- --watch\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jspsych/jsPsych.git\",\n \"directory\": \"packages/plugin-html-keyboard-response\"\n },\n \"author\": \"Josh de Leeuw\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/jspsych/jsPsych/issues\"\n },\n \"homepage\": \"https://www.jspsych.org/latest/plugins/html-keyboard-response\",\n \"peerDependencies\": {\n \"jspsych\": \">=7.1.0\"\n },\n \"devDependencies\": {\n \"@jspsych/config\": \"^3.2.0\",\n \"@jspsych/test-utils\": \"^1.2.0\"\n }\n}\n","import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nimport { version } from \"../package.json\";\n\nconst info = <const>{\n name: \"html-keyboard-response\",\n version: version,\n parameters: {\n /**\n * The string to be displayed.\n */\n stimulus: {\n type: ParameterType.HTML_STRING,\n default: undefined,\n },\n /**\n * This array contains the key(s) that the participant is allowed to press in order to respond\n * to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values this page}\n * and\n * {@link https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ this page (event.key column)}\n * for more examples. Any key presses that are not listed in the\n * array will be ignored. The default value of `\"ALL_KEYS\"` means that all keys will be accepted as valid responses.\n * Specifying `\"NO_KEYS\"` will mean that no responses are allowed.\n */\n choices: {\n type: ParameterType.KEYS,\n default: \"ALL_KEYS\",\n },\n /**\n * This string can contain HTML markup. Any content here will be displayed below the stimulus.\n * The intention is that it can be used to provide a reminder about the action the participant\n * is supposed to take (e.g., which key to press).\n */\n prompt: {\n type: ParameterType.HTML_STRING,\n default: null,\n },\n /**\n * How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus\n * will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will\n * remain visible until the trial ends.\n */\n stimulus_duration: {\n type: ParameterType.INT,\n default: null,\n },\n /**\n * How long to wait for the participant to make a response before ending the trial in milliseconds.\n * If the participant fails to make a response before this timer is reached, the participant's response\n * will be recorded as null for the trial and the trial will end. If the value of this parameter is null,\n * then the trial will wait for a response indefinitely.\n */\n trial_duration: {\n type: ParameterType.INT,\n default: null,\n },\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 set this parameter to false to force\n * the participant 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 },\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 when the stimulus first appears on the screen until the participant's response. */\n rt: {\n type: ParameterType.INT,\n },\n /** The HTML content that was displayed on the screen. */\n stimulus: {\n type: ParameterType.STRING,\n },\n },\n // prettier-ignore\n citations: '__CITATIONS__',\n};\n\ntype Info = typeof info;\n\n/**\n * This plugin displays HTML content and records responses generated with the keyboard.\n * The stimulus can be displayed until a response is given, or for a pre-determined amount of time.\n * The trial can be ended automatically if the participant has failed to respond within a fixed length of time.\n *\n * @author Josh de Leeuw\n * @see {@link https://www.jspsych.org/latest/plugins/html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}\n */\nclass HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n static info = info;\n constructor(private jsPsych: JsPsych) {}\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n var new_html = '<div id=\"jspsych-html-keyboard-response-stimulus\">' + trial.stimulus + \"</div>\";\n\n // add prompt\n if (trial.prompt !== null) {\n new_html += trial.prompt;\n }\n\n // draw\n display_element.innerHTML = new_html;\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-html-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-html-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(end_trial, 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 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 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\nexport default HtmlKeyboardResponsePlugin;\n"],"names":[],"mappings":";;AAEE,IAAW,OAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECiFA,SAAA,EAAA;AAAA;;GAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jspsych/plugin-html-keyboard-response",
3
- "version": "2.0.0",
3
+ "version": "2.1.0",
4
4
  "description": "jsPsych plugin for displaying a stimulus and getting a keyboard response",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -37,7 +37,7 @@
37
37
  "jspsych": ">=7.1.0"
38
38
  },
39
39
  "devDependencies": {
40
- "@jspsych/config": "^3.0.0",
40
+ "@jspsych/config": "^3.2.0",
41
41
  "@jspsych/test-utils": "^1.2.0"
42
42
  }
43
43
  }
package/src/index.ts CHANGED
@@ -80,6 +80,8 @@ const info = <const>{
80
80
  type: ParameterType.STRING,
81
81
  },
82
82
  },
83
+ // prettier-ignore
84
+ citations: '__CITATIONS__',
83
85
  };
84
86
 
85
87
  type Info = typeof info;