@jspsych/plugin-canvas-keyboard-response 1.0.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.
@@ -0,0 +1,146 @@
1
+ var jsPsychCanvasKeyboardResponse = (function (jspsych) {
2
+ 'use strict';
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 = function (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(function () {
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(function () {
136
+ end_trial();
137
+ }, trial.trial_duration);
138
+ }
139
+ }
140
+ }
141
+ CanvasKeyboardResponsePlugin.info = info;
142
+
143
+ return CanvasKeyboardResponsePlugin;
144
+
145
+ })(jsPsychModule);
146
+ //# sourceMappingURL=index.browser.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.browser.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 = function (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(function () {\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(function () {\n end_trial();\n }, trial.trial_duration);\n }\n }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":["ParameterType"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ var jsPsychCanvasKeyboardResponse=function(e){"use strict";const 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]}}};class t{constructor(e){this.jsPsych=e}trial(e,s){var t='<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&&(t+=s.prompt),e.innerHTML=t;let a=document.getElementById("jspsych-canvas-stimulus");s.stimulus(a);var r={rt:null,key:null};const n=()=>{this.jsPsych.pluginAPI.clearAllTimeouts(),void 0!==i&&this.jsPsych.pluginAPI.cancelKeyboardResponse(i);var s={rt:r.rt,response:r.key};e.innerHTML="",this.jsPsych.finishTrial(s)};if("NO_KEYS"!=s.choices)var i=this.jsPsych.pluginAPI.getKeyboardResponse({callback_function:function(t){e.querySelector("#jspsych-canvas-keyboard-response-stimulus").className+=" responded",null==r.key&&(r=t),s.response_ends_trial&&n()},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(){n()}),s.trial_duration)}}return t.info=s,t}(jsPsychModule);
2
+ //# sourceMappingURL=index.browser.min.js.map
@@ -0,0 +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 = function (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(function () {\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(function () {\n end_trial();\n }, trial.trial_duration);\n }\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","constructor","jsPsych","this","trial","display_element","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"],"mappings":"2DAEA,MAAMA,EAAc,CAClBC,KAAM,2BACNC,WAAY,CAEVC,SAAU,CACRC,KAAMC,gBAAcC,SACpBC,YAAa,WACbC,aAASC,GAGXC,QAAS,CACPN,KAAMC,gBAAcM,KACpBJ,YAAa,UACbC,QAAS,YAGXI,OAAQ,CACNR,KAAMC,gBAAcQ,YACpBN,YAAa,SACbC,QAAS,MAGXM,kBAAmB,CACjBV,KAAMC,gBAAcU,IACpBR,YAAa,oBACbC,QAAS,MAGXQ,eAAgB,CACdZ,KAAMC,gBAAcU,IACpBR,YAAa,iBACbC,QAAS,MAGXS,oBAAqB,CACnBb,KAAMC,gBAAca,KACpBX,YAAa,sBACbC,SAAS,GAGXW,YAAa,CACXf,KAAMC,gBAAcU,IACpBK,OAAO,EACPb,YAAa,cACbC,QAAS,CAAC,IAAK,QAerB,MAAMa,EAGJC,YAAoBC,GAAAC,aAAAD,EAEpBE,MAAMC,EAA8BD,GAClC,IAAIE,EACF,oGAEAF,EAAMN,YAAY,GAClB,YACAM,EAAMN,YAAY,GAJlB,oBAQmB,OAAjBM,EAAMb,SACRe,GAAYF,EAAMb,QAIpBc,EAAgBE,UAAYD,EAC5B,IAAIE,EAAIC,SAASC,eAAe,2BAChCN,EAAMtB,SAAS0B,GAEf,IAAIG,EAAW,CACbC,GAAI,KACJC,IAAK,MAIP,MAAMC,EAAY,KAEhBX,KAAKD,QAAQa,UAAUC,wBAGS,IAArBC,GACTd,KAAKD,QAAQa,UAAUG,uBAAuBD,GAIhD,IAAIE,EAAa,CACfP,GAAID,EAASC,GACbD,SAAUA,EAASE,KAIrBR,EAAgBE,UAAY,GAG5BJ,KAAKD,QAAQkB,YAAYD,IAqB3B,GAAqB,WAAjBf,EAAMf,QACR,IAAI4B,EAAmBd,KAAKD,QAAQa,UAAUM,oBAAoB,CAChEC,kBAnBiB,SAAU3C,GAG7B0B,EAAgBkB,cAAc,8CAA8CC,WAC1E,aAGkB,MAAhBb,EAASE,MACXF,EAAWhC,GAGTyB,EAAMR,qBACRkB,KAQAW,gBAAiBrB,EAAMf,QACvBqC,UAAW,cACXC,SAAS,EACTC,gBAAgB,IAKY,OAA5BxB,EAAMX,mBACRU,KAAKD,QAAQa,UAAUc,YAAW,WAChCxB,EAAgBkB,cACd,8CACAO,MAAMC,WAAa,WACpB3B,EAAMX,mBAIkB,OAAzBW,EAAMT,gBACRQ,KAAKD,QAAQa,UAAUc,YAAW,WAChCf,MACCV,EAAMT,wBA5FNK,OAAOrB"}
package/dist/index.cjs ADDED
@@ -0,0 +1,145 @@
1
+ 'use strict';
2
+
3
+ var jspsych = require('jspsych');
4
+
5
+ const info = {
6
+ name: "canvas-keyboard-response",
7
+ parameters: {
8
+ /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
9
+ stimulus: {
10
+ type: jspsych.ParameterType.FUNCTION,
11
+ pretty_name: "Stimulus",
12
+ default: undefined,
13
+ },
14
+ /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
15
+ choices: {
16
+ type: jspsych.ParameterType.KEYS,
17
+ pretty_name: "Choices",
18
+ default: "ALL_KEYS",
19
+ },
20
+ /** Any content here will be displayed below the stimulus. */
21
+ prompt: {
22
+ type: jspsych.ParameterType.HTML_STRING,
23
+ pretty_name: "Prompt",
24
+ default: null,
25
+ },
26
+ /** How long to show the stimulus. */
27
+ stimulus_duration: {
28
+ type: jspsych.ParameterType.INT,
29
+ pretty_name: "Stimulus duration",
30
+ default: null,
31
+ },
32
+ /** How long to show trial before it ends. */
33
+ trial_duration: {
34
+ type: jspsych.ParameterType.INT,
35
+ pretty_name: "Trial duration",
36
+ default: null,
37
+ },
38
+ /** If true, trial will end when subject makes a response. */
39
+ response_ends_trial: {
40
+ type: jspsych.ParameterType.BOOL,
41
+ pretty_name: "Response ends trial",
42
+ default: true,
43
+ },
44
+ /** Array containing the height (first value) and width (second value) of the canvas element. */
45
+ canvas_size: {
46
+ type: jspsych.ParameterType.INT,
47
+ array: true,
48
+ pretty_name: "Canvas size",
49
+ default: [500, 500],
50
+ },
51
+ },
52
+ };
53
+ /**
54
+ * **canvas-keyboard-response**
55
+ *
56
+ * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response
57
+ *
58
+ * @author Chris Jungerius (modified from Josh de Leeuw)
59
+ * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}
60
+ */
61
+ class CanvasKeyboardResponsePlugin {
62
+ constructor(jsPsych) {
63
+ this.jsPsych = jsPsych;
64
+ }
65
+ trial(display_element, trial) {
66
+ var new_html = '<div id="jspsych-canvas-keyboard-response-stimulus">' +
67
+ '<canvas id="jspsych-canvas-stimulus" height="' +
68
+ trial.canvas_size[0] +
69
+ '" width="' +
70
+ trial.canvas_size[1] +
71
+ '"></canvas>' +
72
+ "</div>";
73
+ // add prompt
74
+ if (trial.prompt !== null) {
75
+ new_html += trial.prompt;
76
+ }
77
+ // draw
78
+ display_element.innerHTML = new_html;
79
+ let c = document.getElementById("jspsych-canvas-stimulus");
80
+ trial.stimulus(c);
81
+ // store response
82
+ var response = {
83
+ rt: null,
84
+ key: null,
85
+ };
86
+ // function to end trial when it is time
87
+ const end_trial = () => {
88
+ // kill any remaining setTimeout handlers
89
+ this.jsPsych.pluginAPI.clearAllTimeouts();
90
+ // kill keyboard listeners
91
+ if (typeof keyboardListener !== "undefined") {
92
+ this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
93
+ }
94
+ // gather the data to store for the trial
95
+ var trial_data = {
96
+ rt: response.rt,
97
+ response: response.key,
98
+ };
99
+ // clear the display
100
+ display_element.innerHTML = "";
101
+ // move on to the next trial
102
+ this.jsPsych.finishTrial(trial_data);
103
+ };
104
+ // function to handle responses by the subject
105
+ var after_response = function (info) {
106
+ // after a valid response, the stimulus will have the CSS class 'responded'
107
+ // which can be used to provide visual feedback that a response was recorded
108
+ display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").className +=
109
+ " responded";
110
+ // only record the first response
111
+ if (response.key == null) {
112
+ response = info;
113
+ }
114
+ if (trial.response_ends_trial) {
115
+ end_trial();
116
+ }
117
+ };
118
+ // start the response listener
119
+ if (trial.choices != "NO_KEYS") {
120
+ var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({
121
+ callback_function: after_response,
122
+ valid_responses: trial.choices,
123
+ rt_method: "performance",
124
+ persist: false,
125
+ allow_held_key: false,
126
+ });
127
+ }
128
+ // hide stimulus if stimulus_duration is set
129
+ if (trial.stimulus_duration !== null) {
130
+ this.jsPsych.pluginAPI.setTimeout(function () {
131
+ display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").style.visibility = "hidden";
132
+ }, trial.stimulus_duration);
133
+ }
134
+ // end trial if trial_duration is set
135
+ if (trial.trial_duration !== null) {
136
+ this.jsPsych.pluginAPI.setTimeout(function () {
137
+ end_trial();
138
+ }, trial.trial_duration);
139
+ }
140
+ }
141
+ }
142
+ CanvasKeyboardResponsePlugin.info = info;
143
+
144
+ module.exports = CanvasKeyboardResponsePlugin;
145
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs","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 = function (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(function () {\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(function () {\n end_trial();\n }, trial.trial_duration);\n }\n }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":["ParameterType"],"mappings":"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"}
@@ -0,0 +1,112 @@
1
+ import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
2
+ declare const info: {
3
+ readonly name: "canvas-keyboard-response";
4
+ readonly parameters: {
5
+ /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
6
+ readonly stimulus: {
7
+ readonly type: ParameterType.FUNCTION;
8
+ readonly pretty_name: "Stimulus";
9
+ readonly default: any;
10
+ };
11
+ /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
12
+ readonly choices: {
13
+ readonly type: ParameterType.KEYS;
14
+ readonly pretty_name: "Choices";
15
+ readonly default: "ALL_KEYS";
16
+ };
17
+ /** Any content here will be displayed below the stimulus. */
18
+ readonly prompt: {
19
+ readonly type: ParameterType.HTML_STRING;
20
+ readonly pretty_name: "Prompt";
21
+ readonly default: any;
22
+ };
23
+ /** How long to show the stimulus. */
24
+ readonly stimulus_duration: {
25
+ readonly type: ParameterType.INT;
26
+ readonly pretty_name: "Stimulus duration";
27
+ readonly default: any;
28
+ };
29
+ /** How long to show trial before it ends. */
30
+ readonly trial_duration: {
31
+ readonly type: ParameterType.INT;
32
+ readonly pretty_name: "Trial duration";
33
+ readonly default: any;
34
+ };
35
+ /** If true, trial will end when subject makes a response. */
36
+ readonly response_ends_trial: {
37
+ readonly type: ParameterType.BOOL;
38
+ readonly pretty_name: "Response ends trial";
39
+ readonly default: true;
40
+ };
41
+ /** Array containing the height (first value) and width (second value) of the canvas element. */
42
+ readonly canvas_size: {
43
+ readonly type: ParameterType.INT;
44
+ readonly array: true;
45
+ readonly pretty_name: "Canvas size";
46
+ readonly default: readonly [500, 500];
47
+ };
48
+ };
49
+ };
50
+ declare type Info = typeof info;
51
+ /**
52
+ * **canvas-keyboard-response**
53
+ *
54
+ * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response
55
+ *
56
+ * @author Chris Jungerius (modified from Josh de Leeuw)
57
+ * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}
58
+ */
59
+ declare class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
60
+ private jsPsych;
61
+ static info: {
62
+ readonly name: "canvas-keyboard-response";
63
+ readonly parameters: {
64
+ /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
65
+ readonly stimulus: {
66
+ readonly type: ParameterType.FUNCTION;
67
+ readonly pretty_name: "Stimulus";
68
+ readonly default: any;
69
+ };
70
+ /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
71
+ readonly choices: {
72
+ readonly type: ParameterType.KEYS;
73
+ readonly pretty_name: "Choices";
74
+ readonly default: "ALL_KEYS";
75
+ };
76
+ /** Any content here will be displayed below the stimulus. */
77
+ readonly prompt: {
78
+ readonly type: ParameterType.HTML_STRING;
79
+ readonly pretty_name: "Prompt";
80
+ readonly default: any;
81
+ };
82
+ /** How long to show the stimulus. */
83
+ readonly stimulus_duration: {
84
+ readonly type: ParameterType.INT;
85
+ readonly pretty_name: "Stimulus duration";
86
+ readonly default: any;
87
+ };
88
+ /** How long to show trial before it ends. */
89
+ readonly trial_duration: {
90
+ readonly type: ParameterType.INT;
91
+ readonly pretty_name: "Trial duration";
92
+ readonly default: any;
93
+ };
94
+ /** If true, trial will end when subject makes a response. */
95
+ readonly response_ends_trial: {
96
+ readonly type: ParameterType.BOOL;
97
+ readonly pretty_name: "Response ends trial";
98
+ readonly default: true;
99
+ };
100
+ /** Array containing the height (first value) and width (second value) of the canvas element. */
101
+ readonly canvas_size: {
102
+ readonly type: ParameterType.INT;
103
+ readonly array: true;
104
+ readonly pretty_name: "Canvas size";
105
+ readonly default: readonly [500, 500];
106
+ };
107
+ };
108
+ };
109
+ constructor(jsPsych: JsPsych);
110
+ trial(display_element: HTMLElement, trial: TrialType<Info>): void;
111
+ }
112
+ export default CanvasKeyboardResponsePlugin;
package/dist/index.js ADDED
@@ -0,0 +1,143 @@
1
+ import { ParameterType } from 'jspsych';
2
+
3
+ const info = {
4
+ name: "canvas-keyboard-response",
5
+ parameters: {
6
+ /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
7
+ stimulus: {
8
+ type: ParameterType.FUNCTION,
9
+ pretty_name: "Stimulus",
10
+ default: undefined,
11
+ },
12
+ /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
13
+ choices: {
14
+ type: ParameterType.KEYS,
15
+ pretty_name: "Choices",
16
+ default: "ALL_KEYS",
17
+ },
18
+ /** Any content here will be displayed below the stimulus. */
19
+ prompt: {
20
+ type: ParameterType.HTML_STRING,
21
+ pretty_name: "Prompt",
22
+ default: null,
23
+ },
24
+ /** How long to show the stimulus. */
25
+ stimulus_duration: {
26
+ type: ParameterType.INT,
27
+ pretty_name: "Stimulus duration",
28
+ default: null,
29
+ },
30
+ /** How long to show trial before it ends. */
31
+ trial_duration: {
32
+ type: ParameterType.INT,
33
+ pretty_name: "Trial duration",
34
+ default: null,
35
+ },
36
+ /** If true, trial will end when subject makes a response. */
37
+ response_ends_trial: {
38
+ type: ParameterType.BOOL,
39
+ pretty_name: "Response ends trial",
40
+ default: true,
41
+ },
42
+ /** Array containing the height (first value) and width (second value) of the canvas element. */
43
+ canvas_size: {
44
+ type: ParameterType.INT,
45
+ array: true,
46
+ pretty_name: "Canvas size",
47
+ default: [500, 500],
48
+ },
49
+ },
50
+ };
51
+ /**
52
+ * **canvas-keyboard-response**
53
+ *
54
+ * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response
55
+ *
56
+ * @author Chris Jungerius (modified from Josh de Leeuw)
57
+ * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}
58
+ */
59
+ class CanvasKeyboardResponsePlugin {
60
+ constructor(jsPsych) {
61
+ this.jsPsych = jsPsych;
62
+ }
63
+ trial(display_element, trial) {
64
+ var new_html = '<div id="jspsych-canvas-keyboard-response-stimulus">' +
65
+ '<canvas id="jspsych-canvas-stimulus" height="' +
66
+ trial.canvas_size[0] +
67
+ '" width="' +
68
+ trial.canvas_size[1] +
69
+ '"></canvas>' +
70
+ "</div>";
71
+ // add prompt
72
+ if (trial.prompt !== null) {
73
+ new_html += trial.prompt;
74
+ }
75
+ // draw
76
+ display_element.innerHTML = new_html;
77
+ let c = document.getElementById("jspsych-canvas-stimulus");
78
+ trial.stimulus(c);
79
+ // store response
80
+ var response = {
81
+ rt: null,
82
+ key: null,
83
+ };
84
+ // function to end trial when it is time
85
+ const end_trial = () => {
86
+ // kill any remaining setTimeout handlers
87
+ this.jsPsych.pluginAPI.clearAllTimeouts();
88
+ // kill keyboard listeners
89
+ if (typeof keyboardListener !== "undefined") {
90
+ this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
91
+ }
92
+ // gather the data to store for the trial
93
+ var trial_data = {
94
+ rt: response.rt,
95
+ response: response.key,
96
+ };
97
+ // clear the display
98
+ display_element.innerHTML = "";
99
+ // move on to the next trial
100
+ this.jsPsych.finishTrial(trial_data);
101
+ };
102
+ // function to handle responses by the subject
103
+ var after_response = function (info) {
104
+ // after a valid response, the stimulus will have the CSS class 'responded'
105
+ // which can be used to provide visual feedback that a response was recorded
106
+ display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").className +=
107
+ " responded";
108
+ // only record the first response
109
+ if (response.key == null) {
110
+ response = info;
111
+ }
112
+ if (trial.response_ends_trial) {
113
+ end_trial();
114
+ }
115
+ };
116
+ // start the response listener
117
+ if (trial.choices != "NO_KEYS") {
118
+ var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({
119
+ callback_function: after_response,
120
+ valid_responses: trial.choices,
121
+ rt_method: "performance",
122
+ persist: false,
123
+ allow_held_key: false,
124
+ });
125
+ }
126
+ // hide stimulus if stimulus_duration is set
127
+ if (trial.stimulus_duration !== null) {
128
+ this.jsPsych.pluginAPI.setTimeout(function () {
129
+ display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").style.visibility = "hidden";
130
+ }, trial.stimulus_duration);
131
+ }
132
+ // end trial if trial_duration is set
133
+ if (trial.trial_duration !== null) {
134
+ this.jsPsych.pluginAPI.setTimeout(function () {
135
+ end_trial();
136
+ }, trial.trial_duration);
137
+ }
138
+ }
139
+ }
140
+ CanvasKeyboardResponsePlugin.info = info;
141
+
142
+ export { CanvasKeyboardResponsePlugin as default };
143
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from \"jspsych\";\n\nconst info = <const>{\n name: \"canvas-keyboard-response\",\n parameters: {\n /** The drawing function to apply to the canvas. Should take the canvas object as argument. */\n stimulus: {\n type: ParameterType.FUNCTION,\n pretty_name: \"Stimulus\",\n default: undefined,\n },\n /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */\n choices: {\n type: ParameterType.KEYS,\n pretty_name: \"Choices\",\n default: \"ALL_KEYS\",\n },\n /** Any content here will be displayed below the stimulus. */\n prompt: {\n type: ParameterType.HTML_STRING,\n pretty_name: \"Prompt\",\n default: null,\n },\n /** How long to show the stimulus. */\n stimulus_duration: {\n type: ParameterType.INT,\n pretty_name: \"Stimulus duration\",\n default: null,\n },\n /** How long to show trial before it ends. */\n trial_duration: {\n type: ParameterType.INT,\n pretty_name: \"Trial duration\",\n default: null,\n },\n /** If true, trial will end when subject makes a response. */\n response_ends_trial: {\n type: ParameterType.BOOL,\n pretty_name: \"Response ends trial\",\n default: true,\n },\n /** Array containing the height (first value) and width (second value) of the canvas element. */\n canvas_size: {\n type: ParameterType.INT,\n array: true,\n pretty_name: \"Canvas size\",\n default: [500, 500],\n },\n },\n};\n\ntype Info = typeof info;\n\n/**\n * **canvas-keyboard-response**\n *\n * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response\n *\n * @author Chris Jungerius (modified from Josh de Leeuw)\n * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}\n */\nclass CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {\n static info = info;\n\n constructor(private jsPsych: JsPsych) {}\n\n trial(display_element: HTMLElement, trial: TrialType<Info>) {\n var new_html =\n '<div id=\"jspsych-canvas-keyboard-response-stimulus\">' +\n '<canvas id=\"jspsych-canvas-stimulus\" height=\"' +\n trial.canvas_size[0] +\n '\" width=\"' +\n trial.canvas_size[1] +\n '\"></canvas>' +\n \"</div>\";\n // add prompt\n if (trial.prompt !== null) {\n new_html += trial.prompt;\n }\n\n // draw\n display_element.innerHTML = new_html;\n let c = document.getElementById(\"jspsych-canvas-stimulus\");\n trial.stimulus(c);\n // store response\n var response = {\n rt: null,\n key: null,\n };\n\n // function to end trial when it is time\n const end_trial = () => {\n // kill any remaining setTimeout handlers\n this.jsPsych.pluginAPI.clearAllTimeouts();\n\n // kill keyboard listeners\n if (typeof keyboardListener !== \"undefined\") {\n this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);\n }\n\n // gather the data to store for the trial\n var trial_data = {\n rt: response.rt,\n response: response.key,\n };\n\n // clear the display\n display_element.innerHTML = \"\";\n\n // move on to the next trial\n this.jsPsych.finishTrial(trial_data);\n };\n\n // function to handle responses by the subject\n var after_response = function (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(function () {\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(function () {\n end_trial();\n }, trial.trial_duration);\n }\n }\n}\n\nexport default CanvasKeyboardResponsePlugin;\n"],"names":[],"mappings":"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"}
package/package.json ADDED
@@ -0,0 +1,43 @@
1
+ {
2
+ "name": "@jspsych/plugin-canvas-keyboard-response",
3
+ "version": "1.0.0",
4
+ "description": "jsPsych plugin for displaying a canvas stimulus and getting a keyboard response",
5
+ "type": "module",
6
+ "main": "dist/index.cjs",
7
+ "exports": {
8
+ "import": "./dist/index.js",
9
+ "require": "./dist/index.cjs"
10
+ },
11
+ "typings": "dist/index.d.ts",
12
+ "unpkg": "dist/index.browser.min.js",
13
+ "files": [
14
+ "src",
15
+ "dist"
16
+ ],
17
+ "source": "src/index.ts",
18
+ "scripts": {
19
+ "test": "jest --passWithNoTests",
20
+ "test:watch": "npm test -- --watch",
21
+ "tsc": "tsc",
22
+ "build": "rollup --config",
23
+ "build:watch": "npm run build -- --watch"
24
+ },
25
+ "repository": {
26
+ "type": "git",
27
+ "url": "git+https://github.com/jspsych/jsPsych.git",
28
+ "directory": "packages/plugin-canvas-keyboard-response"
29
+ },
30
+ "author": "Chris Jungerius, Josh de Leeuw",
31
+ "license": "MIT",
32
+ "bugs": {
33
+ "url": "https://github.com/jspsych/jsPsych/issues"
34
+ },
35
+ "homepage": "https://www.jspsych.org/latest/plugins/canvas-keyboard-response",
36
+ "peerDependencies": {
37
+ "jspsych": ">=7.0.0"
38
+ },
39
+ "devDependencies": {
40
+ "@jspsych/config": "^1.0.0",
41
+ "@jspsych/test-utils": "^1.0.0"
42
+ }
43
+ }
package/src/index.ts ADDED
@@ -0,0 +1,160 @@
1
+ import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
2
+
3
+ const info = <const>{
4
+ name: "canvas-keyboard-response",
5
+ parameters: {
6
+ /** The drawing function to apply to the canvas. Should take the canvas object as argument. */
7
+ stimulus: {
8
+ type: ParameterType.FUNCTION,
9
+ pretty_name: "Stimulus",
10
+ default: undefined,
11
+ },
12
+ /** Array containing the key(s) the subject is allowed to press to respond to the stimulus. */
13
+ choices: {
14
+ type: ParameterType.KEYS,
15
+ pretty_name: "Choices",
16
+ default: "ALL_KEYS",
17
+ },
18
+ /** Any content here will be displayed below the stimulus. */
19
+ prompt: {
20
+ type: ParameterType.HTML_STRING,
21
+ pretty_name: "Prompt",
22
+ default: null,
23
+ },
24
+ /** How long to show the stimulus. */
25
+ stimulus_duration: {
26
+ type: ParameterType.INT,
27
+ pretty_name: "Stimulus duration",
28
+ default: null,
29
+ },
30
+ /** How long to show trial before it ends. */
31
+ trial_duration: {
32
+ type: ParameterType.INT,
33
+ pretty_name: "Trial duration",
34
+ default: null,
35
+ },
36
+ /** If true, trial will end when subject makes a response. */
37
+ response_ends_trial: {
38
+ type: ParameterType.BOOL,
39
+ pretty_name: "Response ends trial",
40
+ default: true,
41
+ },
42
+ /** Array containing the height (first value) and width (second value) of the canvas element. */
43
+ canvas_size: {
44
+ type: ParameterType.INT,
45
+ array: true,
46
+ pretty_name: "Canvas size",
47
+ default: [500, 500],
48
+ },
49
+ },
50
+ };
51
+
52
+ type Info = typeof info;
53
+
54
+ /**
55
+ * **canvas-keyboard-response**
56
+ *
57
+ * jsPsych plugin for displaying a canvas stimulus and getting a keyboard response
58
+ *
59
+ * @author Chris Jungerius (modified from Josh de Leeuw)
60
+ * @see {@link https://www.jspsych.org/plugins/jspsych-canvas-keyboard-response/ canvas-keyboard-response plugin documentation on jspsych.org}
61
+ */
62
+ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
63
+ static info = info;
64
+
65
+ constructor(private jsPsych: JsPsych) {}
66
+
67
+ trial(display_element: HTMLElement, trial: TrialType<Info>) {
68
+ var new_html =
69
+ '<div id="jspsych-canvas-keyboard-response-stimulus">' +
70
+ '<canvas id="jspsych-canvas-stimulus" height="' +
71
+ trial.canvas_size[0] +
72
+ '" width="' +
73
+ trial.canvas_size[1] +
74
+ '"></canvas>' +
75
+ "</div>";
76
+ // add prompt
77
+ if (trial.prompt !== null) {
78
+ new_html += trial.prompt;
79
+ }
80
+
81
+ // draw
82
+ display_element.innerHTML = new_html;
83
+ let c = document.getElementById("jspsych-canvas-stimulus");
84
+ trial.stimulus(c);
85
+ // store response
86
+ var response = {
87
+ rt: null,
88
+ key: null,
89
+ };
90
+
91
+ // function to end trial when it is time
92
+ const end_trial = () => {
93
+ // kill any remaining setTimeout handlers
94
+ this.jsPsych.pluginAPI.clearAllTimeouts();
95
+
96
+ // kill keyboard listeners
97
+ if (typeof keyboardListener !== "undefined") {
98
+ this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
99
+ }
100
+
101
+ // gather the data to store for the trial
102
+ var trial_data = {
103
+ rt: response.rt,
104
+ response: response.key,
105
+ };
106
+
107
+ // clear the display
108
+ display_element.innerHTML = "";
109
+
110
+ // move on to the next trial
111
+ this.jsPsych.finishTrial(trial_data);
112
+ };
113
+
114
+ // function to handle responses by the subject
115
+ var after_response = function (info) {
116
+ // after a valid response, the stimulus will have the CSS class 'responded'
117
+ // which can be used to provide visual feedback that a response was recorded
118
+ display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").className +=
119
+ " responded";
120
+
121
+ // only record the first response
122
+ if (response.key == null) {
123
+ response = info;
124
+ }
125
+
126
+ if (trial.response_ends_trial) {
127
+ end_trial();
128
+ }
129
+ };
130
+
131
+ // start the response listener
132
+ if (trial.choices != "NO_KEYS") {
133
+ var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({
134
+ callback_function: after_response,
135
+ valid_responses: trial.choices,
136
+ rt_method: "performance",
137
+ persist: false,
138
+ allow_held_key: false,
139
+ });
140
+ }
141
+
142
+ // hide stimulus if stimulus_duration is set
143
+ if (trial.stimulus_duration !== null) {
144
+ this.jsPsych.pluginAPI.setTimeout(function () {
145
+ display_element.querySelector<HTMLElement>(
146
+ "#jspsych-canvas-keyboard-response-stimulus"
147
+ ).style.visibility = "hidden";
148
+ }, trial.stimulus_duration);
149
+ }
150
+
151
+ // end trial if trial_duration is set
152
+ if (trial.trial_duration !== null) {
153
+ this.jsPsych.pluginAPI.setTimeout(function () {
154
+ end_trial();
155
+ }, trial.trial_duration);
156
+ }
157
+ }
158
+ }
159
+
160
+ export default CanvasKeyboardResponsePlugin;