@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.
- package/dist/index.browser.js +146 -0
- package/dist/index.browser.js.map +1 -0
- package/dist/index.browser.min.js +2 -0
- package/dist/index.browser.min.js.map +1 -0
- package/dist/index.cjs +145 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +112 -0
- package/dist/index.js +143 -0
- package/dist/index.js.map +1 -0
- package/package.json +43 -0
- package/src/index.ts +160 -0
|
@@ -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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"}
|
package/dist/index.d.ts
ADDED
|
@@ -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;
|