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

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.
Files changed (8) hide show
  1. package/README.md +47 -0
  2. package/dist/index.browser.js +166 -166
  3. package/dist/index.browser.min.js +2 -2
  4. package/dist/index.browser.min.js.map +1 -1
  5. package/dist/index.cjs +165 -165
  6. package/dist/index.d.ts +126 -126
  7. package/dist/index.js +165 -165
  8. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -1,170 +1,170 @@
1
1
  import { ParameterType } from 'jspsych';
2
2
 
3
- const info = {
4
- name: "html-keyboard-response",
5
- parameters: {
6
- /**
7
- * The HTML string to be displayed.
8
- */
9
- stimulus: {
10
- type: ParameterType.HTML_STRING,
11
- pretty_name: "Stimulus",
12
- default: undefined,
13
- },
14
- /**
15
- * Array containing the key(s) the subject is allowed to press to respond to the stimulus.
16
- */
17
- choices: {
18
- type: ParameterType.KEYS,
19
- pretty_name: "Choices",
20
- default: "ALL_KEYS",
21
- },
22
- /**
23
- * Any content here will be displayed below the stimulus.
24
- */
25
- prompt: {
26
- type: ParameterType.HTML_STRING,
27
- pretty_name: "Prompt",
28
- default: null,
29
- },
30
- /**
31
- * How long to show the stimulus.
32
- */
33
- stimulus_duration: {
34
- type: ParameterType.INT,
35
- pretty_name: "Stimulus duration",
36
- default: null,
37
- },
38
- /**
39
- * How long to show trial before it ends.
40
- */
41
- trial_duration: {
42
- type: ParameterType.INT,
43
- pretty_name: "Trial duration",
44
- default: null,
45
- },
46
- /**
47
- * If true, trial will end when subject makes a response.
48
- */
49
- response_ends_trial: {
50
- type: ParameterType.BOOL,
51
- pretty_name: "Response ends trial",
52
- default: true,
53
- },
54
- },
55
- };
56
- /**
57
- * **html-keyboard-response**
58
- *
59
- * jsPsych plugin for displaying a stimulus and getting a keyboard response
60
- *
61
- * @author Josh de Leeuw
62
- * @see {@link https://www.jspsych.org/plugins/jspsych-html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}
63
- */
64
- class HtmlKeyboardResponsePlugin {
65
- constructor(jsPsych) {
66
- this.jsPsych = jsPsych;
67
- }
68
- trial(display_element, trial) {
69
- var new_html = '<div id="jspsych-html-keyboard-response-stimulus">' + trial.stimulus + "</div>";
70
- // add prompt
71
- if (trial.prompt !== null) {
72
- new_html += trial.prompt;
73
- }
74
- // draw
75
- display_element.innerHTML = new_html;
76
- // store response
77
- var response = {
78
- rt: null,
79
- key: null,
80
- };
81
- // function to end trial when it is time
82
- const end_trial = () => {
83
- // kill any remaining setTimeout handlers
84
- this.jsPsych.pluginAPI.clearAllTimeouts();
85
- // kill keyboard listeners
86
- if (typeof keyboardListener !== "undefined") {
87
- this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
88
- }
89
- // gather the data to store for the trial
90
- var trial_data = {
91
- rt: response.rt,
92
- stimulus: trial.stimulus,
93
- response: response.key,
94
- };
95
- // clear the display
96
- display_element.innerHTML = "";
97
- // move on to the next trial
98
- this.jsPsych.finishTrial(trial_data);
99
- };
100
- // function to handle responses by the subject
101
- var after_response = (info) => {
102
- // after a valid response, the stimulus will have the CSS class 'responded'
103
- // which can be used to provide visual feedback that a response was recorded
104
- display_element.querySelector("#jspsych-html-keyboard-response-stimulus").className +=
105
- " responded";
106
- // only record the first response
107
- if (response.key == null) {
108
- response = info;
109
- }
110
- if (trial.response_ends_trial) {
111
- end_trial();
112
- }
113
- };
114
- // start the response listener
115
- if (trial.choices != "NO_KEYS") {
116
- var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({
117
- callback_function: after_response,
118
- valid_responses: trial.choices,
119
- rt_method: "performance",
120
- persist: false,
121
- allow_held_key: false,
122
- });
123
- }
124
- // hide stimulus if stimulus_duration is set
125
- if (trial.stimulus_duration !== null) {
126
- this.jsPsych.pluginAPI.setTimeout(() => {
127
- display_element.querySelector("#jspsych-html-keyboard-response-stimulus").style.visibility = "hidden";
128
- }, trial.stimulus_duration);
129
- }
130
- // end trial if trial_duration is set
131
- if (trial.trial_duration !== null) {
132
- this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
133
- }
134
- }
135
- simulate(trial, simulation_mode, simulation_options, load_callback) {
136
- if (simulation_mode == "data-only") {
137
- load_callback();
138
- this.simulate_data_only(trial, simulation_options);
139
- }
140
- if (simulation_mode == "visual") {
141
- this.simulate_visual(trial, simulation_options, load_callback);
142
- }
143
- }
144
- create_simulation_data(trial, simulation_options) {
145
- const default_data = {
146
- stimulus: trial.stimulus,
147
- rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
148
- response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
149
- };
150
- const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
151
- this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
152
- return data;
153
- }
154
- simulate_data_only(trial, simulation_options) {
155
- const data = this.create_simulation_data(trial, simulation_options);
156
- this.jsPsych.finishTrial(data);
157
- }
158
- simulate_visual(trial, simulation_options, load_callback) {
159
- const data = this.create_simulation_data(trial, simulation_options);
160
- const display_element = this.jsPsych.getDisplayElement();
161
- this.trial(display_element, trial);
162
- load_callback();
163
- if (data.rt !== null) {
164
- this.jsPsych.pluginAPI.pressKey(data.response, data.rt);
165
- }
166
- }
167
- }
3
+ const info = {
4
+ name: "html-keyboard-response",
5
+ parameters: {
6
+ /**
7
+ * The HTML string to be displayed.
8
+ */
9
+ stimulus: {
10
+ type: ParameterType.HTML_STRING,
11
+ pretty_name: "Stimulus",
12
+ default: undefined,
13
+ },
14
+ /**
15
+ * Array containing the key(s) the subject is allowed to press to respond to the stimulus.
16
+ */
17
+ choices: {
18
+ type: ParameterType.KEYS,
19
+ pretty_name: "Choices",
20
+ default: "ALL_KEYS",
21
+ },
22
+ /**
23
+ * Any content here will be displayed below the stimulus.
24
+ */
25
+ prompt: {
26
+ type: ParameterType.HTML_STRING,
27
+ pretty_name: "Prompt",
28
+ default: null,
29
+ },
30
+ /**
31
+ * How long to show the stimulus.
32
+ */
33
+ stimulus_duration: {
34
+ type: ParameterType.INT,
35
+ pretty_name: "Stimulus duration",
36
+ default: null,
37
+ },
38
+ /**
39
+ * How long to show trial before it ends.
40
+ */
41
+ trial_duration: {
42
+ type: ParameterType.INT,
43
+ pretty_name: "Trial duration",
44
+ default: null,
45
+ },
46
+ /**
47
+ * If true, trial will end when subject makes a response.
48
+ */
49
+ response_ends_trial: {
50
+ type: ParameterType.BOOL,
51
+ pretty_name: "Response ends trial",
52
+ default: true,
53
+ },
54
+ },
55
+ };
56
+ /**
57
+ * **html-keyboard-response**
58
+ *
59
+ * jsPsych plugin for displaying a stimulus and getting a keyboard response
60
+ *
61
+ * @author Josh de Leeuw
62
+ * @see {@link https://www.jspsych.org/plugins/jspsych-html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}
63
+ */
64
+ class HtmlKeyboardResponsePlugin {
65
+ constructor(jsPsych) {
66
+ this.jsPsych = jsPsych;
67
+ }
68
+ trial(display_element, trial) {
69
+ var new_html = '<div id="jspsych-html-keyboard-response-stimulus">' + trial.stimulus + "</div>";
70
+ // add prompt
71
+ if (trial.prompt !== null) {
72
+ new_html += trial.prompt;
73
+ }
74
+ // draw
75
+ display_element.innerHTML = new_html;
76
+ // store response
77
+ var response = {
78
+ rt: null,
79
+ key: null,
80
+ };
81
+ // function to end trial when it is time
82
+ const end_trial = () => {
83
+ // kill any remaining setTimeout handlers
84
+ this.jsPsych.pluginAPI.clearAllTimeouts();
85
+ // kill keyboard listeners
86
+ if (typeof keyboardListener !== "undefined") {
87
+ this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
88
+ }
89
+ // gather the data to store for the trial
90
+ var trial_data = {
91
+ rt: response.rt,
92
+ stimulus: trial.stimulus,
93
+ response: response.key,
94
+ };
95
+ // clear the display
96
+ display_element.innerHTML = "";
97
+ // move on to the next trial
98
+ this.jsPsych.finishTrial(trial_data);
99
+ };
100
+ // function to handle responses by the subject
101
+ var after_response = (info) => {
102
+ // after a valid response, the stimulus will have the CSS class 'responded'
103
+ // which can be used to provide visual feedback that a response was recorded
104
+ display_element.querySelector("#jspsych-html-keyboard-response-stimulus").className +=
105
+ " responded";
106
+ // only record the first response
107
+ if (response.key == null) {
108
+ response = info;
109
+ }
110
+ if (trial.response_ends_trial) {
111
+ end_trial();
112
+ }
113
+ };
114
+ // start the response listener
115
+ if (trial.choices != "NO_KEYS") {
116
+ var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({
117
+ callback_function: after_response,
118
+ valid_responses: trial.choices,
119
+ rt_method: "performance",
120
+ persist: false,
121
+ allow_held_key: false,
122
+ });
123
+ }
124
+ // hide stimulus if stimulus_duration is set
125
+ if (trial.stimulus_duration !== null) {
126
+ this.jsPsych.pluginAPI.setTimeout(() => {
127
+ display_element.querySelector("#jspsych-html-keyboard-response-stimulus").style.visibility = "hidden";
128
+ }, trial.stimulus_duration);
129
+ }
130
+ // end trial if trial_duration is set
131
+ if (trial.trial_duration !== null) {
132
+ this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
133
+ }
134
+ }
135
+ simulate(trial, simulation_mode, simulation_options, load_callback) {
136
+ if (simulation_mode == "data-only") {
137
+ load_callback();
138
+ this.simulate_data_only(trial, simulation_options);
139
+ }
140
+ if (simulation_mode == "visual") {
141
+ this.simulate_visual(trial, simulation_options, load_callback);
142
+ }
143
+ }
144
+ create_simulation_data(trial, simulation_options) {
145
+ const default_data = {
146
+ stimulus: trial.stimulus,
147
+ rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
148
+ response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
149
+ };
150
+ const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
151
+ this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
152
+ return data;
153
+ }
154
+ simulate_data_only(trial, simulation_options) {
155
+ const data = this.create_simulation_data(trial, simulation_options);
156
+ this.jsPsych.finishTrial(data);
157
+ }
158
+ simulate_visual(trial, simulation_options, load_callback) {
159
+ const data = this.create_simulation_data(trial, simulation_options);
160
+ const display_element = this.jsPsych.getDisplayElement();
161
+ this.trial(display_element, trial);
162
+ load_callback();
163
+ if (data.rt !== null) {
164
+ this.jsPsych.pluginAPI.pressKey(data.response, data.rt);
165
+ }
166
+ }
167
+ }
168
168
  HtmlKeyboardResponsePlugin.info = info;
169
169
 
170
170
  export { HtmlKeyboardResponsePlugin as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jspsych/plugin-html-keyboard-response",
3
- "version": "1.1.1",
3
+ "version": "1.1.3",
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": "^1.3.0",
41
- "@jspsych/test-utils": "^1.1.0"
40
+ "@jspsych/config": "^2.0.0",
41
+ "@jspsych/test-utils": "^1.1.2"
42
42
  }
43
43
  }