@jspsych/plugin-canvas-keyboard-response 1.1.2 → 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 +8 -2
  2. package/dist/index.browser.js +169 -169
  3. package/dist/index.browser.min.js +2 -2
  4. package/dist/index.browser.min.js.map +1 -1
  5. package/dist/index.cjs +168 -168
  6. package/dist/index.d.ts +116 -116
  7. package/dist/index.js +168 -168
  8. package/package.json +2 -2
package/README.md CHANGED
@@ -27,9 +27,15 @@ See the [contributing to jsPsych](https://www.jspsych.org/latest/developers/cont
27
27
 
28
28
  ## Citation
29
29
 
30
- If you use this library in academic work, please cite the [paper that describes jsPsych](http://link.springer.com/article/10.3758%2Fs13428-014-0458-y):
30
+ If you use this library in academic work, the preferred citation is:
31
31
 
32
- de Leeuw, J.R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a Web browser. _Behavior Research Methods_, _47_(1), 1-12. doi:10.3758/s13428-014-0458-y
32
+ 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://joss.theoj.org/papers/10.21105/joss.05351](https://joss.theoj.org/papers/10.21105/joss.05351).
33
+
34
+ This paper is an updated description of jsPsych and includes all current core team members. It replaces the earlier paper that described jsPsych:
35
+
36
+ de Leeuw, J.R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a Web browser. *Behavior Research Methods*, _47_(1), 1-12. doi:[10.3758/s13428-014-0458-y](http://link.springer.com/article/10.3758%2Fs13428-014-0458-y)
37
+
38
+ Citations help us demonstrate that this library is used and valued, which allows us to continue working on it.
33
39
 
34
40
  ## Contributors
35
41
 
package/dist/index.browser.js CHANGED
@@ -1,177 +1,177 @@
1
1
  var jsPsychCanvasKeyboardResponse = (function (jspsych) {
2
2
  'use strict';
3
3
 
4
- const info = {
5
- name: "canvas-keyboard-response",
6
- parameters: {
7
- /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
8
- stimulus: {
9
- type: jspsych.ParameterType.FUNCTION,
10
- pretty_name: "Stimulus",
11
- default: undefined,
12
- },
13
- /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
14
- choices: {
15
- type: jspsych.ParameterType.KEYS,
16
- pretty_name: "Choices",
17
- default: "ALL_KEYS",
18
- },
19
- /** Any content here will be displayed below the stimulus. */
20
- prompt: {
21
- type: jspsych.ParameterType.HTML_STRING,
22
- pretty_name: "Prompt",
23
- default: null,
24
- },
25
- /** How long to show the stimulus. */
26
- stimulus_duration: {
27
- type: jspsych.ParameterType.INT,
28
- pretty_name: "Stimulus duration",
29
- default: null,
30
- },
31
- /** How long to show trial before it ends. */
32
- trial_duration: {
33
- type: jspsych.ParameterType.INT,
34
- pretty_name: "Trial duration",
35
- default: null,
36
- },
37
- /** If true, trial will end when subject makes a response. */
38
- response_ends_trial: {
39
- type: jspsych.ParameterType.BOOL,
40
- pretty_name: "Response ends trial",
41
- default: true,
42
- },
43
- /** Array containing the height (first value) and width (second value) of the canvas element. */
44
- canvas_size: {
45
- type: jspsych.ParameterType.INT,
46
- array: true,
47
- pretty_name: "Canvas size",
48
- default: [500, 500],
49
- },
50
- },
51
- };
52
- /**
53
- * **canvas-keyboard-response**
54
- *
55
- * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response
56
- *
57
- * @author Chris Jungerius (modified from Josh de Leeuw)
58
- * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}
59
- */
60
- class CanvasKeyboardResponsePlugin {
61
- constructor(jsPsych) {
62
- this.jsPsych = jsPsych;
63
- }
64
- trial(display_element, trial) {
65
- var new_html = '<div id="jspsych-canvas-keyboard-response-stimulus">' +
66
- '<canvas id="jspsych-canvas-stimulus" height="' +
67
- trial.canvas_size[0] +
68
- '" width="' +
69
- trial.canvas_size[1] +
70
- '"></canvas>' +
71
- "</div>";
72
- // add prompt
73
- if (trial.prompt !== null) {
74
- new_html += trial.prompt;
75
- }
76
- // draw
77
- display_element.innerHTML = new_html;
78
- let c = document.getElementById("jspsych-canvas-stimulus");
79
- trial.stimulus(c);
80
- // store response
81
- var response = {
82
- rt: null,
83
- key: null,
84
- };
85
- // function to end trial when it is time
86
- const end_trial = () => {
87
- // kill any remaining setTimeout handlers
88
- this.jsPsych.pluginAPI.clearAllTimeouts();
89
- // kill keyboard listeners
90
- if (typeof keyboardListener !== "undefined") {
91
- this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
92
- }
93
- // gather the data to store for the trial
94
- var trial_data = {
95
- rt: response.rt,
96
- response: response.key,
97
- };
98
- // clear the display
99
- display_element.innerHTML = "";
100
- // move on to the next trial
101
- this.jsPsych.finishTrial(trial_data);
102
- };
103
- // function to handle responses by the subject
104
- var after_response = (info) => {
105
- // after a valid response, the stimulus will have the CSS class 'responded'
106
- // which can be used to provide visual feedback that a response was recorded
107
- display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").className +=
108
- " responded";
109
- // only record the first response
110
- if (response.key == null) {
111
- response = info;
112
- }
113
- if (trial.response_ends_trial) {
114
- end_trial();
115
- }
116
- };
117
- // start the response listener
118
- if (trial.choices != "NO_KEYS") {
119
- var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({
120
- callback_function: after_response,
121
- valid_responses: trial.choices,
122
- rt_method: "performance",
123
- persist: false,
124
- allow_held_key: false,
125
- });
126
- }
127
- // hide stimulus if stimulus_duration is set
128
- if (trial.stimulus_duration !== null) {
129
- this.jsPsych.pluginAPI.setTimeout(() => {
130
- display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").style.visibility = "hidden";
131
- }, trial.stimulus_duration);
132
- }
133
- // end trial if trial_duration is set
134
- if (trial.trial_duration !== null) {
135
- this.jsPsych.pluginAPI.setTimeout(() => {
136
- end_trial();
137
- }, trial.trial_duration);
138
- }
139
- }
140
- simulate(trial, simulation_mode, simulation_options, load_callback) {
141
- if (simulation_mode == "data-only") {
142
- load_callback();
143
- this.simulate_data_only(trial, simulation_options);
144
- }
145
- if (simulation_mode == "visual") {
146
- this.simulate_visual(trial, simulation_options, load_callback);
147
- }
148
- }
149
- simulate_data_only(trial, simulation_options) {
150
- const data = this.create_simulation_data(trial, simulation_options);
151
- this.jsPsych.finishTrial(data);
152
- }
153
- simulate_visual(trial, simulation_options, load_callback) {
154
- const data = this.create_simulation_data(trial, simulation_options);
155
- const display_element = this.jsPsych.getDisplayElement();
156
- this.trial(display_element, trial);
157
- load_callback();
158
- if (data.rt !== null) {
159
- this.jsPsych.pluginAPI.pressKey(data.response, data.rt);
160
- }
161
- }
162
- create_simulation_data(trial, simulation_options) {
163
- const default_data = {
164
- rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
165
- response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
166
- };
167
- const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
168
- this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
169
- return data;
170
- }
171
- }
4
+ const info = {
5
+ name: "canvas-keyboard-response",
6
+ parameters: {
7
+ /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
8
+ stimulus: {
9
+ type: jspsych.ParameterType.FUNCTION,
10
+ pretty_name: "Stimulus",
11
+ default: undefined,
12
+ },
13
+ /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
14
+ choices: {
15
+ type: jspsych.ParameterType.KEYS,
16
+ pretty_name: "Choices",
17
+ default: "ALL_KEYS",
18
+ },
19
+ /** Any content here will be displayed below the stimulus. */
20
+ prompt: {
21
+ type: jspsych.ParameterType.HTML_STRING,
22
+ pretty_name: "Prompt",
23
+ default: null,
24
+ },
25
+ /** How long to show the stimulus. */
26
+ stimulus_duration: {
27
+ type: jspsych.ParameterType.INT,
28
+ pretty_name: "Stimulus duration",
29
+ default: null,
30
+ },
31
+ /** How long to show trial before it ends. */
32
+ trial_duration: {
33
+ type: jspsych.ParameterType.INT,
34
+ pretty_name: "Trial duration",
35
+ default: null,
36
+ },
37
+ /** If true, trial will end when subject makes a response. */
38
+ response_ends_trial: {
39
+ type: jspsych.ParameterType.BOOL,
40
+ pretty_name: "Response ends trial",
41
+ default: true,
42
+ },
43
+ /** Array containing the height (first value) and width (second value) of the canvas element. */
44
+ canvas_size: {
45
+ type: jspsych.ParameterType.INT,
46
+ array: true,
47
+ pretty_name: "Canvas size",
48
+ default: [500, 500],
49
+ },
50
+ },
51
+ };
52
+ /**
53
+ * **canvas-keyboard-response**
54
+ *
55
+ * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response
56
+ *
57
+ * @author Chris Jungerius (modified from Josh de Leeuw)
58
+ * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}
59
+ */
60
+ class CanvasKeyboardResponsePlugin {
61
+ constructor(jsPsych) {
62
+ this.jsPsych = jsPsych;
63
+ }
64
+ trial(display_element, trial) {
65
+ var new_html = '<div id="jspsych-canvas-keyboard-response-stimulus">' +
66
+ '<canvas id="jspsych-canvas-stimulus" height="' +
67
+ trial.canvas_size[0] +
68
+ '" width="' +
69
+ trial.canvas_size[1] +
70
+ '"></canvas>' +
71
+ "</div>";
72
+ // add prompt
73
+ if (trial.prompt !== null) {
74
+ new_html += trial.prompt;
75
+ }
76
+ // draw
77
+ display_element.innerHTML = new_html;
78
+ let c = document.getElementById("jspsych-canvas-stimulus");
79
+ trial.stimulus(c);
80
+ // store response
81
+ var response = {
82
+ rt: null,
83
+ key: null,
84
+ };
85
+ // function to end trial when it is time
86
+ const end_trial = () => {
87
+ // kill any remaining setTimeout handlers
88
+ this.jsPsych.pluginAPI.clearAllTimeouts();
89
+ // kill keyboard listeners
90
+ if (typeof keyboardListener !== "undefined") {
91
+ this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
92
+ }
93
+ // gather the data to store for the trial
94
+ var trial_data = {
95
+ rt: response.rt,
96
+ response: response.key,
97
+ };
98
+ // clear the display
99
+ display_element.innerHTML = "";
100
+ // move on to the next trial
101
+ this.jsPsych.finishTrial(trial_data);
102
+ };
103
+ // function to handle responses by the subject
104
+ var after_response = (info) => {
105
+ // after a valid response, the stimulus will have the CSS class 'responded'
106
+ // which can be used to provide visual feedback that a response was recorded
107
+ display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").className +=
108
+ " responded";
109
+ // only record the first response
110
+ if (response.key == null) {
111
+ response = info;
112
+ }
113
+ if (trial.response_ends_trial) {
114
+ end_trial();
115
+ }
116
+ };
117
+ // start the response listener
118
+ if (trial.choices != "NO_KEYS") {
119
+ var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({
120
+ callback_function: after_response,
121
+ valid_responses: trial.choices,
122
+ rt_method: "performance",
123
+ persist: false,
124
+ allow_held_key: false,
125
+ });
126
+ }
127
+ // hide stimulus if stimulus_duration is set
128
+ if (trial.stimulus_duration !== null) {
129
+ this.jsPsych.pluginAPI.setTimeout(() => {
130
+ display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").style.visibility = "hidden";
131
+ }, trial.stimulus_duration);
132
+ }
133
+ // end trial if trial_duration is set
134
+ if (trial.trial_duration !== null) {
135
+ this.jsPsych.pluginAPI.setTimeout(() => {
136
+ end_trial();
137
+ }, trial.trial_duration);
138
+ }
139
+ }
140
+ simulate(trial, simulation_mode, simulation_options, load_callback) {
141
+ if (simulation_mode == "data-only") {
142
+ load_callback();
143
+ this.simulate_data_only(trial, simulation_options);
144
+ }
145
+ if (simulation_mode == "visual") {
146
+ this.simulate_visual(trial, simulation_options, load_callback);
147
+ }
148
+ }
149
+ simulate_data_only(trial, simulation_options) {
150
+ const data = this.create_simulation_data(trial, simulation_options);
151
+ this.jsPsych.finishTrial(data);
152
+ }
153
+ simulate_visual(trial, simulation_options, load_callback) {
154
+ const data = this.create_simulation_data(trial, simulation_options);
155
+ const display_element = this.jsPsych.getDisplayElement();
156
+ this.trial(display_element, trial);
157
+ load_callback();
158
+ if (data.rt !== null) {
159
+ this.jsPsych.pluginAPI.pressKey(data.response, data.rt);
160
+ }
161
+ }
162
+ create_simulation_data(trial, simulation_options) {
163
+ const default_data = {
164
+ rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
165
+ response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
166
+ };
167
+ const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
168
+ this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
169
+ return data;
170
+ }
171
+ }
172
172
  CanvasKeyboardResponsePlugin.info = info;
173
173
 
174
174
  return CanvasKeyboardResponsePlugin;
175
175
 
176
176
  })(jsPsychModule);
177
- //# sourceMappingURL=index.browser.js.map
177
+ //# sourceMappingURL=https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@1.1.3/dist/index.browser.js.map
package/dist/index.browser.min.js CHANGED
@@ -1,2 +1,2 @@
1
- var jsPsychCanvasKeyboardResponse=function(e){"use strict";function s(e,s){for(var t=0;t<s.length;t++){var a=s[t];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var t={name:"canvas-keyboard-response",parameters:{stimulus:{type:e.ParameterType.FUNCTION,pretty_name:"Stimulus",default:void 0},choices:{type:e.ParameterType.KEYS,pretty_name:"Choices",default:"ALL_KEYS"},prompt:{type:e.ParameterType.HTML_STRING,pretty_name:"Prompt",default:null},stimulus_duration:{type:e.ParameterType.INT,pretty_name:"Stimulus duration",default:null},trial_duration:{type:e.ParameterType.INT,pretty_name:"Trial duration",default:null},response_ends_trial:{type:e.ParameterType.BOOL,pretty_name:"Response ends trial",default:!0},canvas_size:{type:e.ParameterType.INT,array:!0,pretty_name:"Canvas size",default:[500,500]}}},a=function(){function e(s){!function(e,s){if(!(e instanceof s))throw new TypeError("Cannot call a class as a function")}(this,e),this.jsPsych=s}var t,a,i;return t=e,a=[{key:"trial",value:function(e,s){var t=this,a='<div id="jspsych-canvas-keyboard-response-stimulus"><canvas id="jspsych-canvas-stimulus" height="'+s.canvas_size[0]+'" width="'+s.canvas_size[1]+'"></canvas></div>';null!==s.prompt&&(a+=s.prompt),e.innerHTML=a;var i=document.getElementById("jspsych-canvas-stimulus");s.stimulus(i);var n={rt:null,key:null},r=function(){t.jsPsych.pluginAPI.clearAllTimeouts(),void 0!==l&&t.jsPsych.pluginAPI.cancelKeyboardResponse(l);var s={rt:n.rt,response:n.key};e.innerHTML="",t.jsPsych.finishTrial(s)};if("NO_KEYS"!=s.choices)var l=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:function(t){e.querySelector("#jspsych-canvas-keyboard-response-stimulus").className+=" responded",null==n.key&&(n=t),s.response_ends_trial&&r()},valid_responses:s.choices,rt_method:"performance",persist:!1,allow_held_key:!1});null!==s.stimulus_duration&&this.jsPsych.pluginAPI.setTimeout((function(){e.querySelector("#jspsych-canvas-keyboard-response-stimulus").style.visibility="hidden"}),s.stimulus_duration),null!==s.trial_duration&&this.jsPsych.pluginAPI.setTimeout((function(){r()}),s.trial_duration)}},{key:"simulate",value:function(e,s,t,a){"data-only"==s&&(a(),this.simulate_data_only(e,t)),"visual"==s&&this.simulate_visual(e,t,a)}},{key:"simulate_data_only",value:function(e,s){var t=this.create_simulation_data(e,s);this.jsPsych.finishTrial(t)}},{key:"simulate_visual",value:function(e,s,t){var a=this.create_simulation_data(e,s),i=this.jsPsych.getDisplayElement();this.trial(i,e),t(),null!==a.rt&&this.jsPsych.pluginAPI.pressKey(a.response,a.rt)}},{key:"create_simulation_data",value:function(e,s){var t={rt:this.jsPsych.randomization.sampleExGaussian(500,50,1/150,!0),response:this.jsPsych.pluginAPI.getValidKey(e.choices)},a=this.jsPsych.pluginAPI.mergeSimulationData(t,s);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(e,a),a}}],a&&s(t.prototype,a),i&&s(t,i),Object.defineProperty(t,"prototype",{writable:!1}),e}();return a.info=t,a}(jsPsychModule);
2
- //# sourceMappingURL=index.browser.min.js.map
1
+ var jsPsychCanvasKeyboardResponse=function(e){"use strict";function t(e,t){for(var s=0;s<t.length;s++){var a=t[s];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,(i=a.key,n=void 0,"symbol"==typeof(n=function(e,t){if("object"!=typeof e||null===e)return e;var s=e[Symbol.toPrimitive];if(void 0!==s){var a=s.call(e,t||"default");if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(i,"string"))?n:String(n)),a)}var i,n}var s={name:"canvas-keyboard-response",parameters:{stimulus:{type:e.ParameterType.FUNCTION,pretty_name:"Stimulus",default:void 0},choices:{type:e.ParameterType.KEYS,pretty_name:"Choices",default:"ALL_KEYS"},prompt:{type:e.ParameterType.HTML_STRING,pretty_name:"Prompt",default:null},stimulus_duration:{type:e.ParameterType.INT,pretty_name:"Stimulus duration",default:null},trial_duration:{type:e.ParameterType.INT,pretty_name:"Trial duration",default:null},response_ends_trial:{type:e.ParameterType.BOOL,pretty_name:"Response ends trial",default:!0},canvas_size:{type:e.ParameterType.INT,array:!0,pretty_name:"Canvas size",default:[500,500]}}},a=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.jsPsych=t}var s,a,i;return s=e,a=[{key:"trial",value:function(e,t){var s=this,a='<div id="jspsych-canvas-keyboard-response-stimulus"><canvas id="jspsych-canvas-stimulus" height="'+t.canvas_size[0]+'" width="'+t.canvas_size[1]+'"></canvas></div>';null!==t.prompt&&(a+=t.prompt),e.innerHTML=a;var i=document.getElementById("jspsych-canvas-stimulus");t.stimulus(i);var n={rt:null,key:null},r=function(){s.jsPsych.pluginAPI.clearAllTimeouts(),void 0!==l&&s.jsPsych.pluginAPI.cancelKeyboardResponse(l);var t={rt:n.rt,response:n.key};e.innerHTML="",s.jsPsych.finishTrial(t)};if("NO_KEYS"!=t.choices)var l=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:function(s){e.querySelector("#jspsych-canvas-keyboard-response-stimulus").className+=" responded",null==n.key&&(n=s),t.response_ends_trial&&r()},valid_responses:t.choices,rt_method:"performance",persist:!1,allow_held_key:!1});null!==t.stimulus_duration&&this.jsPsych.pluginAPI.setTimeout((function(){e.querySelector("#jspsych-canvas-keyboard-response-stimulus").style.visibility="hidden"}),t.stimulus_duration),null!==t.trial_duration&&this.jsPsych.pluginAPI.setTimeout((function(){r()}),t.trial_duration)}},{key:"simulate",value:function(e,t,s,a){"data-only"==t&&(a(),this.simulate_data_only(e,s)),"visual"==t&&this.simulate_visual(e,s,a)}},{key:"simulate_data_only",value:function(e,t){var s=this.create_simulation_data(e,t);this.jsPsych.finishTrial(s)}},{key:"simulate_visual",value:function(e,t,s){var a=this.create_simulation_data(e,t),i=this.jsPsych.getDisplayElement();this.trial(i,e),s(),null!==a.rt&&this.jsPsych.pluginAPI.pressKey(a.response,a.rt)}},{key:"create_simulation_data",value:function(e,t){var s={rt:this.jsPsych.randomization.sampleExGaussian(500,50,1/150,!0),response:this.jsPsych.pluginAPI.getValidKey(e.choices)},a=this.jsPsych.pluginAPI.mergeSimulationData(s,t);return this.jsPsych.pluginAPI.ensureSimulationDataConsistency(e,a),a}}],a&&t(s.prototype,a),i&&t(s,i),Object.defineProperty(s,"prototype",{writable:!1}),e}();return a.info=s,a}(jsPsychModule);
2
+ //# sourceMappingURL=https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@1.1.3/dist/index.browser.min.js.map
package/dist/index.browser.min.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.browser.min.js","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nconst info = <const>{\n name: \"canvas-keyboard-response\",\n parameters: {\n /** The drawing function to apply to the canvas. Should take the canvas object as argument. */\n stimulus: {\n type: ParameterType.FUNCTION,\n pretty_name: \"Stimulus\",\n default: undefined,\n },\n /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */\n choices: {\n type: ParameterType.KEYS,\n pretty_name: \"Choices\",\n default: \"ALL_KEYS\",\n },\n /** Any content here will be displayed below the stimulus. */\n prompt: {\n type: ParameterType.HTML_STRING,\n pretty_name: \"Prompt\",\n default: null,\n },\n /** How long to show the stimulus. */\n stimulus_duration: {\n type: ParameterType.INT,\n pretty_name: \"Stimulus duration\",\n default: null,\n },\n /** How long to show trial before it ends. */\n trial_duration: {\n type: ParameterType.INT,\n pretty_name: \"Trial duration\",\n default: null,\n },\n /** If true, trial will end when subject makes a response. */\n response_ends_trial: {\n type: ParameterType.BOOL,\n pretty_name: \"Response ends trial\",\n default: true,\n },\n /** Array containing the height (first value) and width (second value) of the canvas element. */\n canvas_size: {\n type: ParameterType.INT,\n array: true,\n pretty_name: \"Canvas size\",\n default: [500, 500],\n },\n },\n};\n\ntype Info = typeof info;\n\n/**\n * **canvas-keyboard-response**\n *\n * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response\n *\n * @author Chris Jungerius (modified from Josh de Leeuw)\n * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}\n */\nclass CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n static info = info;\n\n constructor(private jsPsych: JsPsych) {}\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n var new_html =\n '<div id=\"jspsych-canvas-keyboard-response-stimulus\">' +\n '<canvas id=\"jspsych-canvas-stimulus\" height=\"' +\n trial.canvas_size[0] +\n '\" width=\"' +\n trial.canvas_size[1] +\n '\"></canvas>' +\n \"</div>\";\n // add prompt\n if (trial.prompt !== null) {\n new_html += trial.prompt;\n }\n\n // draw\n display_element.innerHTML = new_html;\n let c = document.getElementById(\"jspsych-canvas-stimulus\");\n trial.stimulus(c);\n // store response\n var response = {\n rt: null,\n key: null,\n };\n\n // function to end trial when it is time\n const end_trial = () => {\n // kill any remaining setTimeout handlers\n this.jsPsych.pluginAPI.clearAllTimeouts();\n\n // kill keyboard listeners\n if (typeof keyboardListener !== \"undefined\") {\n this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n }\n\n // gather the data to store for the trial\n var trial_data = {\n rt: response.rt,\n response: response.key,\n };\n\n // clear the display\n display_element.innerHTML = \"\";\n\n // move on to the next trial\n this.jsPsych.finishTrial(trial_data);\n };\n\n // function to handle responses by the subject\n var after_response = (info) => {\n // after a valid response, the stimulus will have the CSS class 'responded'\n // which can be used to provide visual feedback that a response was recorded\n display_element.querySelector(\"#jspsych-canvas-keyboard-response-stimulus\").className +=\n \" responded\";\n\n // only record the first response\n if (response.key == null) {\n response = info;\n }\n\n if (trial.response_ends_trial) {\n end_trial();\n }\n };\n\n // start the response listener\n if (trial.choices != \"NO_KEYS\") {\n var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n callback_function: after_response,\n valid_responses: trial.choices,\n rt_method: \"performance\",\n persist: false,\n allow_held_key: false,\n });\n }\n\n // hide stimulus if stimulus_duration is set\n if (trial.stimulus_duration !== null) {\n this.jsPsych.pluginAPI.setTimeout(() => {\n display_element.querySelector<HTMLElement>(\n \"#jspsych-canvas-keyboard-response-stimulus\"\n ).style.visibility = \"hidden\";\n }, trial.stimulus_duration);\n }\n\n // end trial if trial_duration is set\n if (trial.trial_duration !== null) {\n this.jsPsych.pluginAPI.setTimeout(() => {\n end_trial();\n }, trial.trial_duration);\n }\n }\n\n simulate(\n trial: TrialType<Info>,\n simulation_mode,\n simulation_options: any,\n load_callback: () => void\n ) {\n if (simulation_mode == \"data-only\") {\n load_callback();\n this.simulate_data_only(trial, simulation_options);\n }\n if (simulation_mode == \"visual\") {\n this.simulate_visual(trial, simulation_options, load_callback);\n }\n }\n\n private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n this.jsPsych.finishTrial(data);\n }\n\n private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n const display_element = this.jsPsych.getDisplayElement();\n\n this.trial(display_element, trial);\n load_callback();\n\n if (data.rt !== null) {\n this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n }\n }\n\n private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n const default_data = {\n rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n };\n\n const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n return data;\n }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":["info","name","parameters","stimulus","type","ParameterType","FUNCTION","pretty_name","default","undefined","choices","KEYS","prompt","HTML_STRING","stimulus_duration","INT","trial_duration","response_ends_trial","BOOL","canvas_size","array","CanvasKeyboardResponsePlugin","jsPsych","_classCallCheck","this","display_element","trial","_this","new_html","innerHTML","c","document","getElementById","response","rt","key","end_trial","pluginAPI","clearAllTimeouts","keyboardListener","cancelKeyboardResponse","trial_data","finishTrial","getKeyboardResponse","callback_function","querySelector","className","valid_responses","rt_method","persist","allow_held_key","setTimeout","style","visibility","value","simulation_mode","simulation_options","load_callback","simulate_data_only","simulate_visual","data","create_simulation_data","getDisplayElement","pressKey","default_data","randomization","sampleExGaussian","getValidKey","mergeSimulationData","ensureSimulationDataConsistency"],"mappings":"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"}
1
+ {"version":3,"file":"index.browser.min.js","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nconst info = <const>{\n name: \"canvas-keyboard-response\",\n parameters: {\n /** The drawing function to apply to the canvas. Should take the canvas object as argument. */\n stimulus: {\n type: ParameterType.FUNCTION,\n pretty_name: \"Stimulus\",\n default: undefined,\n },\n /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */\n choices: {\n type: ParameterType.KEYS,\n pretty_name: \"Choices\",\n default: \"ALL_KEYS\",\n },\n /** Any content here will be displayed below the stimulus. */\n prompt: {\n type: ParameterType.HTML_STRING,\n pretty_name: \"Prompt\",\n default: null,\n },\n /** How long to show the stimulus. */\n stimulus_duration: {\n type: ParameterType.INT,\n pretty_name: \"Stimulus duration\",\n default: null,\n },\n /** How long to show trial before it ends. */\n trial_duration: {\n type: ParameterType.INT,\n pretty_name: \"Trial duration\",\n default: null,\n },\n /** If true, trial will end when subject makes a response. */\n response_ends_trial: {\n type: ParameterType.BOOL,\n pretty_name: \"Response ends trial\",\n default: true,\n },\n /** Array containing the height (first value) and width (second value) of the canvas element. */\n canvas_size: {\n type: ParameterType.INT,\n array: true,\n pretty_name: \"Canvas size\",\n default: [500, 500],\n },\n },\n};\n\ntype Info = typeof info;\n\n/**\n * **canvas-keyboard-response**\n *\n * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response\n *\n * @author Chris Jungerius (modified from Josh de Leeuw)\n * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}\n */\nclass CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n static info = info;\n\n constructor(private jsPsych: JsPsych) {}\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n var new_html =\n '<div id=\"jspsych-canvas-keyboard-response-stimulus\">' +\n '<canvas id=\"jspsych-canvas-stimulus\" height=\"' +\n trial.canvas_size[0] +\n '\" width=\"' +\n trial.canvas_size[1] +\n '\"></canvas>' +\n \"</div>\";\n // add prompt\n if (trial.prompt !== null) {\n new_html += trial.prompt;\n }\n\n // draw\n display_element.innerHTML = new_html;\n let c = document.getElementById(\"jspsych-canvas-stimulus\");\n trial.stimulus(c);\n // store response\n var response = {\n rt: null,\n key: null,\n };\n\n // function to end trial when it is time\n const end_trial = () => {\n // kill any remaining setTimeout handlers\n this.jsPsych.pluginAPI.clearAllTimeouts();\n\n // kill keyboard listeners\n if (typeof keyboardListener !== \"undefined\") {\n this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n }\n\n // gather the data to store for the trial\n var trial_data = {\n rt: response.rt,\n response: response.key,\n };\n\n // clear the display\n display_element.innerHTML = \"\";\n\n // move on to the next trial\n this.jsPsych.finishTrial(trial_data);\n };\n\n // function to handle responses by the subject\n var after_response = (info) => {\n // after a valid response, the stimulus will have the CSS class 'responded'\n // which can be used to provide visual feedback that a response was recorded\n display_element.querySelector(\"#jspsych-canvas-keyboard-response-stimulus\").className +=\n \" responded\";\n\n // only record the first response\n if (response.key == null) {\n response = info;\n }\n\n if (trial.response_ends_trial) {\n end_trial();\n }\n };\n\n // start the response listener\n if (trial.choices != \"NO_KEYS\") {\n var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({\n callback_function: after_response,\n valid_responses: trial.choices,\n rt_method: \"performance\",\n persist: false,\n allow_held_key: false,\n });\n }\n\n // hide stimulus if stimulus_duration is set\n if (trial.stimulus_duration !== null) {\n this.jsPsych.pluginAPI.setTimeout(() => {\n display_element.querySelector<HTMLElement>(\n \"#jspsych-canvas-keyboard-response-stimulus\"\n ).style.visibility = \"hidden\";\n }, trial.stimulus_duration);\n }\n\n // end trial if trial_duration is set\n if (trial.trial_duration !== null) {\n this.jsPsych.pluginAPI.setTimeout(() => {\n end_trial();\n }, trial.trial_duration);\n }\n }\n\n simulate(\n trial: TrialType<Info>,\n simulation_mode,\n simulation_options: any,\n load_callback: () => void\n ) {\n if (simulation_mode == \"data-only\") {\n load_callback();\n this.simulate_data_only(trial, simulation_options);\n }\n if (simulation_mode == \"visual\") {\n this.simulate_visual(trial, simulation_options, load_callback);\n }\n }\n\n private simulate_data_only(trial: TrialType<Info>, simulation_options) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n this.jsPsych.finishTrial(data);\n }\n\n private simulate_visual(trial: TrialType<Info>, simulation_options, load_callback: () => void) {\n const data = this.create_simulation_data(trial, simulation_options);\n\n const display_element = this.jsPsych.getDisplayElement();\n\n this.trial(display_element, trial);\n load_callback();\n\n if (data.rt !== null) {\n this.jsPsych.pluginAPI.pressKey(data.response, data.rt);\n }\n }\n\n private create_simulation_data(trial: TrialType<Info>, simulation_options) {\n const default_data = {\n rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),\n response: this.jsPsych.pluginAPI.getValidKey(trial.choices),\n };\n\n const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);\n\n this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);\n\n return data;\n }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":["info","name","parameters","stimulus","type","ParameterType","FUNCTION","pretty_name","default","undefined","choices","KEYS","prompt","HTML_STRING","stimulus_duration","INT","trial_duration","response_ends_trial","BOOL","canvas_size","array","CanvasKeyboardResponsePlugin","jsPsych","_classCallCheck","this","key","value","display_element","trial","_this","new_html","innerHTML","c","document","getElementById","response","rt","end_trial","pluginAPI","clearAllTimeouts","keyboardListener","cancelKeyboardResponse","trial_data","finishTrial","getKeyboardResponse","callback_function","querySelector","className","valid_responses","rt_method","persist","allow_held_key","setTimeout","style","visibility","simulation_mode","simulation_options","load_callback","simulate_data_only","simulate_visual","data","create_simulation_data","getDisplayElement","pressKey","default_data","randomization","sampleExGaussian","getValidKey","mergeSimulationData","ensureSimulationDataConsistency"],"mappings":"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"}