jspsych 6.3.0 → 7.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (397) hide show
  1. package/README.md +36 -37
  2. package/css/jspsych.css +39 -39
  3. package/dist/JsPsych.d.ts +112 -0
  4. package/dist/TimelineNode.d.ts +34 -0
  5. package/dist/index.browser.js +3164 -0
  6. package/dist/index.browser.js.map +1 -0
  7. package/dist/index.browser.min.js +2 -0
  8. package/dist/index.browser.min.js.map +1 -0
  9. package/dist/index.cjs +3158 -0
  10. package/dist/index.cjs.map +1 -0
  11. package/dist/index.d.ts +11 -0
  12. package/dist/index.js +3152 -0
  13. package/dist/index.js.map +1 -0
  14. package/dist/migration.d.ts +3 -0
  15. package/dist/modules/data/DataCollection.d.ts +45 -0
  16. package/dist/modules/data/DataColumn.d.ts +15 -0
  17. package/dist/modules/data/index.d.ts +25 -0
  18. package/dist/modules/data/utils.d.ts +3 -0
  19. package/dist/modules/extensions.d.ts +22 -0
  20. package/dist/modules/plugin-api/HardwareAPI.d.ts +15 -0
  21. package/dist/modules/plugin-api/KeyboardListenerAPI.d.ts +34 -0
  22. package/dist/modules/plugin-api/MediaAPI.d.ts +27 -0
  23. package/dist/modules/plugin-api/SimulationAPI.d.ts +41 -0
  24. package/dist/modules/plugin-api/TimeoutAPI.d.ts +5 -0
  25. package/dist/modules/plugin-api/index.d.ts +8 -0
  26. package/dist/modules/plugins.d.ts +129 -0
  27. package/dist/modules/randomization.d.ts +35 -0
  28. package/dist/modules/turk.d.ts +40 -0
  29. package/dist/modules/utils.d.ts +7 -0
  30. package/package.json +32 -15
  31. package/src/JsPsych.ts +884 -0
  32. package/src/TimelineNode.ts +536 -0
  33. package/src/index.ts +71 -0
  34. package/src/migration.ts +37 -0
  35. package/src/modules/data/DataCollection.ts +198 -0
  36. package/src/modules/data/DataColumn.ts +86 -0
  37. package/src/modules/data/index.ts +174 -0
  38. package/src/modules/data/utils.ts +75 -0
  39. package/src/modules/extensions.ts +23 -0
  40. package/src/modules/plugin-api/HardwareAPI.ts +32 -0
  41. package/src/modules/plugin-api/KeyboardListenerAPI.ts +165 -0
  42. package/src/modules/plugin-api/MediaAPI.ts +337 -0
  43. package/src/modules/plugin-api/SimulationAPI.ts +181 -0
  44. package/src/modules/plugin-api/TimeoutAPI.ts +16 -0
  45. package/src/modules/plugin-api/index.ts +28 -0
  46. package/src/modules/plugins.ts +158 -0
  47. package/src/modules/randomization.ts +327 -0
  48. package/src/modules/turk.ts +99 -0
  49. package/src/modules/utils.ts +30 -0
  50. package/.github/workflows/jest.yml +0 -20
  51. package/code-of-conduct.md +0 -56
  52. package/contributors.md +0 -61
  53. package/docs/CNAME +0 -1
  54. package/docs/about/about.md +0 -18
  55. package/docs/about/contributing.md +0 -43
  56. package/docs/about/license.md +0 -25
  57. package/docs/about/support.md +0 -7
  58. package/docs/core_library/jspsych-core.md +0 -734
  59. package/docs/core_library/jspsych-data.md +0 -589
  60. package/docs/core_library/jspsych-pluginAPI.md +0 -610
  61. package/docs/core_library/jspsych-randomization.md +0 -397
  62. package/docs/core_library/jspsych-turk.md +0 -102
  63. package/docs/extensions/extensions.md +0 -83
  64. package/docs/extensions/jspsych-ext-webgazer.md +0 -106
  65. package/docs/img/blue.png +0 -0
  66. package/docs/img/devtools-change-css.png +0 -0
  67. package/docs/img/devtools-css-errors.png +0 -0
  68. package/docs/img/devtools-inspect-element.png +0 -0
  69. package/docs/img/folder-setup.png +0 -0
  70. package/docs/img/folder-with-html.png +0 -0
  71. package/docs/img/githubreleases.jpg +0 -0
  72. package/docs/img/jspsych-favicon.png +0 -0
  73. package/docs/img/jspsych-logo-no-text-mono.svg +0 -493
  74. package/docs/img/jspsych-logo.jpg +0 -0
  75. package/docs/img/orange.png +0 -0
  76. package/docs/img/palmer_stim.png +0 -0
  77. package/docs/img/progress_bar.png +0 -0
  78. package/docs/img/prolific-study-completion.png +0 -0
  79. package/docs/img/prolific-study-link.png +0 -0
  80. package/docs/img/visual_search_example.jpg +0 -0
  81. package/docs/index.md +0 -9
  82. package/docs/overview/browser-device-support.md +0 -35
  83. package/docs/overview/callbacks.md +0 -184
  84. package/docs/overview/data.md +0 -281
  85. package/docs/overview/dynamic-parameters.md +0 -147
  86. package/docs/overview/exclude-browser.md +0 -32
  87. package/docs/overview/experiment-options.md +0 -149
  88. package/docs/overview/eye-tracking.md +0 -237
  89. package/docs/overview/fullscreen.md +0 -36
  90. package/docs/overview/media-preloading.md +0 -369
  91. package/docs/overview/mturk.md +0 -77
  92. package/docs/overview/plugins.md +0 -320
  93. package/docs/overview/progress-bar.md +0 -110
  94. package/docs/overview/prolific.md +0 -78
  95. package/docs/overview/record-browser-interactions.md +0 -23
  96. package/docs/overview/running-experiments.md +0 -95
  97. package/docs/overview/style.md +0 -293
  98. package/docs/overview/timeline.md +0 -457
  99. package/docs/plugins/jspsych-animation.md +0 -40
  100. package/docs/plugins/jspsych-audio-button-response.md +0 -60
  101. package/docs/plugins/jspsych-audio-keyboard-response.md +0 -58
  102. package/docs/plugins/jspsych-audio-slider-response.md +0 -53
  103. package/docs/plugins/jspsych-call-function.md +0 -81
  104. package/docs/plugins/jspsych-canvas-button-response.md +0 -66
  105. package/docs/plugins/jspsych-canvas-keyboard-response.md +0 -68
  106. package/docs/plugins/jspsych-canvas-slider-response.md +0 -89
  107. package/docs/plugins/jspsych-categorize-animation.md +0 -60
  108. package/docs/plugins/jspsych-categorize-html.md +0 -53
  109. package/docs/plugins/jspsych-categorize-image.md +0 -53
  110. package/docs/plugins/jspsych-cloze.md +0 -45
  111. package/docs/plugins/jspsych-external-html.md +0 -70
  112. package/docs/plugins/jspsych-free-sort.md +0 -56
  113. package/docs/plugins/jspsych-fullscreen.md +0 -57
  114. package/docs/plugins/jspsych-html-button-response.md +0 -42
  115. package/docs/plugins/jspsych-html-keyboard-response.md +0 -51
  116. package/docs/plugins/jspsych-html-slider-response.md +0 -45
  117. package/docs/plugins/jspsych-iat-html.md +0 -64
  118. package/docs/plugins/jspsych-iat-image.md +0 -64
  119. package/docs/plugins/jspsych-image-button-response.md +0 -48
  120. package/docs/plugins/jspsych-image-keyboard-response.md +0 -58
  121. package/docs/plugins/jspsych-image-slider-response.md +0 -54
  122. package/docs/plugins/jspsych-instructions.md +0 -58
  123. package/docs/plugins/jspsych-maxdiff.md +0 -41
  124. package/docs/plugins/jspsych-preload.md +0 -128
  125. package/docs/plugins/jspsych-rdk.md +0 -119
  126. package/docs/plugins/jspsych-reconstruction.md +0 -48
  127. package/docs/plugins/jspsych-resize.md +0 -39
  128. package/docs/plugins/jspsych-same-different-html.md +0 -53
  129. package/docs/plugins/jspsych-same-different-image.md +0 -66
  130. package/docs/plugins/jspsych-serial-reaction-time-mouse.md +0 -52
  131. package/docs/plugins/jspsych-serial-reaction-time.md +0 -57
  132. package/docs/plugins/jspsych-survey-html-form.md +0 -50
  133. package/docs/plugins/jspsych-survey-likert.md +0 -70
  134. package/docs/plugins/jspsych-survey-multi-choice.md +0 -48
  135. package/docs/plugins/jspsych-survey-multi-select.md +0 -53
  136. package/docs/plugins/jspsych-survey-text.md +0 -63
  137. package/docs/plugins/jspsych-video-button-response.md +0 -54
  138. package/docs/plugins/jspsych-video-keyboard-response.md +0 -50
  139. package/docs/plugins/jspsych-video-slider-response.md +0 -60
  140. package/docs/plugins/jspsych-virtual-chinrest.md +0 -105
  141. package/docs/plugins/jspsych-visual-search-circle.md +0 -52
  142. package/docs/plugins/jspsych-vsl-animate-occlusion.md +0 -55
  143. package/docs/plugins/jspsych-vsl-grid-scene.md +0 -62
  144. package/docs/plugins/jspsych-webgazer-calibrate.md +0 -60
  145. package/docs/plugins/jspsych-webgazer-init-camera.md +0 -31
  146. package/docs/plugins/jspsych-webgazer-validate.md +0 -43
  147. package/docs/plugins/list-of-plugins.md +0 -54
  148. package/docs/tutorials/hello-world.md +0 -162
  149. package/docs/tutorials/rt-task.md +0 -1334
  150. package/docs/tutorials/video-tutorials.md +0 -11
  151. package/examples/add-to-end-of-timeline.html +0 -38
  152. package/examples/case-sensitive-responses.html +0 -45
  153. package/examples/conditional-and-loop-functions.html +0 -64
  154. package/examples/css/jquery-ui.css +0 -1225
  155. package/examples/css-classes-parameter.html +0 -145
  156. package/examples/data-add-properties.html +0 -44
  157. package/examples/data-as-function.html +0 -39
  158. package/examples/data-from-timeline.html +0 -52
  159. package/examples/data-from-url.html +0 -21
  160. package/examples/demo-flanker.html +0 -117
  161. package/examples/demo-simple-rt-task.html +0 -120
  162. package/examples/demos/demo_1.html +0 -35
  163. package/examples/demos/demo_2.html +0 -50
  164. package/examples/demos/demo_3.html +0 -63
  165. package/examples/display-element-to-embed-experiment.html +0 -79
  166. package/examples/end-active-node.html +0 -52
  167. package/examples/end-experiment.html +0 -45
  168. package/examples/exclusions.html +0 -32
  169. package/examples/external_html/simple_consent.html +0 -4
  170. package/examples/img/1.gif +0 -0
  171. package/examples/img/10.gif +0 -0
  172. package/examples/img/11.gif +0 -0
  173. package/examples/img/12.gif +0 -0
  174. package/examples/img/2.gif +0 -0
  175. package/examples/img/3.gif +0 -0
  176. package/examples/img/4.gif +0 -0
  177. package/examples/img/5.gif +0 -0
  178. package/examples/img/6.gif +0 -0
  179. package/examples/img/7.gif +0 -0
  180. package/examples/img/8.gif +0 -0
  181. package/examples/img/9.gif +0 -0
  182. package/examples/img/age/of1.jpg +0 -0
  183. package/examples/img/age/of2.jpg +0 -0
  184. package/examples/img/age/of3.jpg +0 -0
  185. package/examples/img/age/om1.jpg +0 -0
  186. package/examples/img/age/om2.jpg +0 -0
  187. package/examples/img/age/om3.jpg +0 -0
  188. package/examples/img/age/yf1.jpg +0 -0
  189. package/examples/img/age/yf4.jpg +0 -0
  190. package/examples/img/age/yf5.jpg +0 -0
  191. package/examples/img/age/ym2.jpg +0 -0
  192. package/examples/img/age/ym3.jpg +0 -0
  193. package/examples/img/age/ym5.jpg +0 -0
  194. package/examples/img/backwardN.gif +0 -0
  195. package/examples/img/blue.png +0 -0
  196. package/examples/img/card.png +0 -0
  197. package/examples/img/con1.png +0 -0
  198. package/examples/img/con2.png +0 -0
  199. package/examples/img/fixation.gif +0 -0
  200. package/examples/img/happy_face_1.jpg +0 -0
  201. package/examples/img/happy_face_2.jpg +0 -0
  202. package/examples/img/happy_face_3.jpg +0 -0
  203. package/examples/img/happy_face_4.jpg +0 -0
  204. package/examples/img/inc1.png +0 -0
  205. package/examples/img/inc2.png +0 -0
  206. package/examples/img/normalN.gif +0 -0
  207. package/examples/img/orange.png +0 -0
  208. package/examples/img/redX.png +0 -0
  209. package/examples/img/ribbon.jpg +0 -0
  210. package/examples/img/sad_face_1.jpg +0 -0
  211. package/examples/img/sad_face_2.jpg +0 -0
  212. package/examples/img/sad_face_3.jpg +0 -0
  213. package/examples/img/sad_face_4.jpg +0 -0
  214. package/examples/js/snap.svg-min.js +0 -21
  215. package/examples/js/webgazer.js +0 -88886
  216. package/examples/jspsych-RDK.html +0 -58
  217. package/examples/jspsych-animation.html +0 -39
  218. package/examples/jspsych-audio-button-response.html +0 -58
  219. package/examples/jspsych-audio-keyboard-response.html +0 -68
  220. package/examples/jspsych-audio-slider-response.html +0 -61
  221. package/examples/jspsych-call-function.html +0 -32
  222. package/examples/jspsych-canvas-button-response.html +0 -95
  223. package/examples/jspsych-canvas-keyboard-response.html +0 -78
  224. package/examples/jspsych-canvas-slider-response.html +0 -67
  225. package/examples/jspsych-categorize-animation.html +0 -49
  226. package/examples/jspsych-categorize-html.html +0 -33
  227. package/examples/jspsych-categorize-image.html +0 -44
  228. package/examples/jspsych-cloze.html +0 -37
  229. package/examples/jspsych-free-sort.html +0 -109
  230. package/examples/jspsych-fullscreen.html +0 -45
  231. package/examples/jspsych-html-button-response.html +0 -43
  232. package/examples/jspsych-html-keyboard-response.html +0 -42
  233. package/examples/jspsych-html-slider-response.html +0 -53
  234. package/examples/jspsych-iat.html +0 -520
  235. package/examples/jspsych-image-button-response.html +0 -91
  236. package/examples/jspsych-image-keyboard-response.html +0 -85
  237. package/examples/jspsych-image-slider-response.html +0 -85
  238. package/examples/jspsych-instructions.html +0 -37
  239. package/examples/jspsych-maxdiff.html +0 -33
  240. package/examples/jspsych-preload.html +0 -140
  241. package/examples/jspsych-reconstruction.html +0 -43
  242. package/examples/jspsych-resize.html +0 -34
  243. package/examples/jspsych-same-different-html.html +0 -28
  244. package/examples/jspsych-same-different-image.html +0 -39
  245. package/examples/jspsych-serial-reaction-time-mouse.html +0 -98
  246. package/examples/jspsych-serial-reaction-time.html +0 -54
  247. package/examples/jspsych-survey-html-form.html +0 -33
  248. package/examples/jspsych-survey-likert.html +0 -42
  249. package/examples/jspsych-survey-multi-choice.html +0 -40
  250. package/examples/jspsych-survey-multi-select.html +0 -42
  251. package/examples/jspsych-survey-text.html +0 -34
  252. package/examples/jspsych-video-button-response.html +0 -65
  253. package/examples/jspsych-video-keyboard-response.html +0 -61
  254. package/examples/jspsych-video-slider-response.html +0 -63
  255. package/examples/jspsych-virtual-chinrest.html +0 -69
  256. package/examples/jspsych-visual-search-circle.html +0 -64
  257. package/examples/jspsych-vsl-animate-occlusion.html +0 -35
  258. package/examples/jspsych-vsl-grid-scene.html +0 -47
  259. package/examples/lexical-decision.html +0 -134
  260. package/examples/manual-preloading.html +0 -59
  261. package/examples/pause-unpause.html +0 -33
  262. package/examples/progress-bar.html +0 -68
  263. package/examples/save-trial-parameters.html +0 -98
  264. package/examples/sound/hammer.mp3 +0 -0
  265. package/examples/sound/sound.mp3 +0 -0
  266. package/examples/sound/speech_blue.mp3 +0 -0
  267. package/examples/sound/speech_green.mp3 +0 -0
  268. package/examples/sound/speech_joke.mp3 +0 -0
  269. package/examples/sound/speech_red.mp3 +0 -0
  270. package/examples/sound/tone.mp3 +0 -0
  271. package/examples/timeline-variables-sampling.html +0 -50
  272. package/examples/timeline-variables.html +0 -64
  273. package/examples/video/sample_video.mp4 +0 -0
  274. package/examples/webgazer.html +0 -162
  275. package/examples/webgazer_image.html +0 -60
  276. package/extensions/jspsych-ext-webgazer.js +0 -185
  277. package/jspsych.js +0 -3015
  278. package/license.txt +0 -21
  279. package/mkdocs.yml +0 -118
  280. package/plugins/jspsych-animation.js +0 -189
  281. package/plugins/jspsych-audio-button-response.js +0 -269
  282. package/plugins/jspsych-audio-keyboard-response.js +0 -212
  283. package/plugins/jspsych-audio-slider-response.js +0 -278
  284. package/plugins/jspsych-call-function.js +0 -58
  285. package/plugins/jspsych-canvas-button-response.js +0 -199
  286. package/plugins/jspsych-canvas-keyboard-response.js +0 -155
  287. package/plugins/jspsych-canvas-slider-response.js +0 -207
  288. package/plugins/jspsych-categorize-animation.js +0 -266
  289. package/plugins/jspsych-categorize-html.js +0 -220
  290. package/plugins/jspsych-categorize-image.js +0 -222
  291. package/plugins/jspsych-cloze.js +0 -112
  292. package/plugins/jspsych-external-html.js +0 -112
  293. package/plugins/jspsych-free-sort.js +0 -478
  294. package/plugins/jspsych-fullscreen.js +0 -106
  295. package/plugins/jspsych-html-button-response.js +0 -188
  296. package/plugins/jspsych-html-keyboard-response.js +0 -149
  297. package/plugins/jspsych-html-slider-response.js +0 -202
  298. package/plugins/jspsych-iat-html.js +0 -284
  299. package/plugins/jspsych-iat-image.js +0 -286
  300. package/plugins/jspsych-image-button-response.js +0 -327
  301. package/plugins/jspsych-image-keyboard-response.js +0 -263
  302. package/plugins/jspsych-image-slider-response.js +0 -369
  303. package/plugins/jspsych-instructions.js +0 -237
  304. package/plugins/jspsych-maxdiff.js +0 -173
  305. package/plugins/jspsych-preload.js +0 -345
  306. package/plugins/jspsych-rdk.js +0 -1373
  307. package/plugins/jspsych-reconstruction.js +0 -134
  308. package/plugins/jspsych-resize.js +0 -166
  309. package/plugins/jspsych-same-different-html.js +0 -168
  310. package/plugins/jspsych-same-different-image.js +0 -169
  311. package/plugins/jspsych-serial-reaction-time-mouse.js +0 -212
  312. package/plugins/jspsych-serial-reaction-time.js +0 -247
  313. package/plugins/jspsych-survey-html-form.js +0 -171
  314. package/plugins/jspsych-survey-likert.js +0 -195
  315. package/plugins/jspsych-survey-multi-choice.js +0 -208
  316. package/plugins/jspsych-survey-multi-select.js +0 -232
  317. package/plugins/jspsych-survey-text.js +0 -185
  318. package/plugins/jspsych-video-button-response.js +0 -335
  319. package/plugins/jspsych-video-keyboard-response.js +0 -279
  320. package/plugins/jspsych-video-slider-response.js +0 -351
  321. package/plugins/jspsych-virtual-chinrest.js +0 -471
  322. package/plugins/jspsych-visual-search-circle.js +0 -259
  323. package/plugins/jspsych-vsl-animate-occlusion.js +0 -196
  324. package/plugins/jspsych-vsl-grid-scene.js +0 -103
  325. package/plugins/jspsych-webgazer-calibrate.js +0 -166
  326. package/plugins/jspsych-webgazer-init-camera.js +0 -95
  327. package/plugins/jspsych-webgazer-validate.js +0 -304
  328. package/plugins/template/jspsych-plugin-template.js +0 -35
  329. package/tests/README.md +0 -7
  330. package/tests/jsPsych/case-sensitive-responses.test.js +0 -53
  331. package/tests/jsPsych/css-classes-parameter.test.js +0 -107
  332. package/tests/jsPsych/default-iti.test.js +0 -51
  333. package/tests/jsPsych/default-parameters.test.js +0 -58
  334. package/tests/jsPsych/endexperiment.test.js +0 -49
  335. package/tests/jsPsych/events.test.js +0 -606
  336. package/tests/jsPsych/functions-as-parameters.test.js +0 -210
  337. package/tests/jsPsych/init.test.js +0 -48
  338. package/tests/jsPsych/loads.test.js +0 -7
  339. package/tests/jsPsych/min-rt.test.js +0 -58
  340. package/tests/jsPsych/progressbar.test.js +0 -202
  341. package/tests/jsPsych/timeline-variables.test.js +0 -531
  342. package/tests/jsPsych/timelines.test.js +0 -569
  343. package/tests/jsPsych.data/data-csv-conversion.test.js +0 -85
  344. package/tests/jsPsych.data/data-json-conversion.test.js +0 -120
  345. package/tests/jsPsych.data/datacollection.test.js +0 -117
  346. package/tests/jsPsych.data/datacolumn.test.js +0 -50
  347. package/tests/jsPsych.data/datamodule.test.js +0 -152
  348. package/tests/jsPsych.data/dataparameter.test.js +0 -251
  349. package/tests/jsPsych.data/interactions.test.js +0 -109
  350. package/tests/jsPsych.data/trialparameters.test.js +0 -175
  351. package/tests/jsPsych.extensions/extensions.test.js +0 -207
  352. package/tests/jsPsych.extensions/test-extension.js +0 -42
  353. package/tests/jsPsych.pluginAPI/pluginapi.test.js +0 -341
  354. package/tests/jsPsych.pluginAPI/preloads.test.js +0 -43
  355. package/tests/jsPsych.randomization/randomziation.test.js +0 -27
  356. package/tests/jsPsych.utils/utils.test.js +0 -58
  357. package/tests/plugins/plugin-animation.test.js +0 -34
  358. package/tests/plugins/plugin-audio-button-response.test.js +0 -15
  359. package/tests/plugins/plugin-audio-keyboard-response.test.js +0 -15
  360. package/tests/plugins/plugin-audio-slider-response.test.js +0 -15
  361. package/tests/plugins/plugin-call-function.test.js +0 -49
  362. package/tests/plugins/plugin-categorize-animation.test.js +0 -263
  363. package/tests/plugins/plugin-categorize-html.test.js +0 -17
  364. package/tests/plugins/plugin-categorize-image.test.js +0 -17
  365. package/tests/plugins/plugin-cloze.test.js +0 -157
  366. package/tests/plugins/plugin-free-sort.test.js +0 -106
  367. package/tests/plugins/plugin-fullscreen.test.js +0 -41
  368. package/tests/plugins/plugin-html-button-response.test.js +0 -161
  369. package/tests/plugins/plugin-html-keyboard-response.test.js +0 -139
  370. package/tests/plugins/plugin-html-slider-response.test.js +0 -155
  371. package/tests/plugins/plugin-iat-html.test.js +0 -299
  372. package/tests/plugins/plugin-iat-image.test.js +0 -298
  373. package/tests/plugins/plugin-image-button-response.test.js +0 -174
  374. package/tests/plugins/plugin-image-keyboard-response.test.js +0 -147
  375. package/tests/plugins/plugin-image-slider-response.test.js +0 -174
  376. package/tests/plugins/plugin-instructions.test.js +0 -85
  377. package/tests/plugins/plugin-maxdiff.test.js +0 -39
  378. package/tests/plugins/plugin-preload.test.js +0 -916
  379. package/tests/plugins/plugin-rdk.test.js +0 -61
  380. package/tests/plugins/plugin-reconstruction.test.js +0 -16
  381. package/tests/plugins/plugin-resize.test.js +0 -16
  382. package/tests/plugins/plugin-same-different-html.test.js +0 -17
  383. package/tests/plugins/plugin-same-different-image.test.js +0 -17
  384. package/tests/plugins/plugin-serial-reaction-time-mouse.test.js +0 -42
  385. package/tests/plugins/plugin-serial-reaction-time.test.js +0 -109
  386. package/tests/plugins/plugin-survey-html-form.test.js +0 -44
  387. package/tests/plugins/plugin-survey-likert.test.js +0 -48
  388. package/tests/plugins/plugin-survey-multi-choice.test.js +0 -47
  389. package/tests/plugins/plugin-survey-multi-select.test.js +0 -71
  390. package/tests/plugins/plugin-survey-text.test.js +0 -115
  391. package/tests/plugins/plugin-video-button-response.test.js +0 -32
  392. package/tests/plugins/plugin-video-keyboard-response.test.js +0 -32
  393. package/tests/plugins/plugin-video-slider-response.test.js +0 -31
  394. package/tests/plugins/plugin-visual-search-circle.test.js +0 -16
  395. package/tests/plugins/plugin-vsl-animate-occlusion.test.js +0 -16
  396. package/tests/plugins/plugin-vsl-grid-scene.test.js +0 -16
  397. package/tests/testing-utils.js +0 -13
package/docs/tutorials/rt-task.md DELETED
@@ -1,1334 +0,0 @@
1
- # Summary of Tutorial Content
2
-
3
- This tutorial will work through the creation of a simple response time task. The task is to press one key for a blue colored circle and another key for an orange colored circle. Despite this simple task, the tutorial covers many of the key features of jsPsych, including:
4
-
5
- * Using a plugin to create a standard trial.
6
- * Combining plugins together to create new kinds of trials.
7
- * Using timeline variables to maximize code reuse.
8
- * Preloading media
9
- * Randomizing presentation order.
10
- * Manipulating, filtering, and aggregating data.
11
- * Using dynamic content to change the experiment parameters based on the subject's responses.
12
-
13
- ## Part 1: Creating a blank experiment
14
-
15
- Start by downloading jsPsych and setting up a folder to contain your experiment files. If you are unsure how to do this, follow steps 1-5 in the [Hello World tutorial](hello-world.md). At the end of step 5 in the Hello World tutorial, you should have an experiment page that looks like this:
16
-
17
- ```html
18
- <!DOCTYPE html>
19
- <html>
20
- <head>
21
- <title>My experiment</title>
22
- <script src="jspsych-6.3.0/jspsych.js"></script>
23
- <script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
24
- <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
25
- </head>
26
- <body></body>
27
- </html>
28
- ```
29
-
30
- This will be our starting point for building the rest of the experiment.
31
-
32
- ## Part 2: Display welcome message
33
-
34
- All jsPsych experiments are defined by a timeline. The timeline is an array that contains the set of trials we want to run in the experiment. We can start by defining the timeline array.
35
-
36
- ```javascript
37
- var timeline = [];
38
- ```
39
-
40
- Let's greet the subject with a simple welcome message using the [jspsych-html-keyboard-response](/plugins/jspsych-html-keyboard-response.md) plugin.
41
-
42
- First, we create a trial that uses the `jspsych-html-keyboard-response` plugin and contains a simple string to show the subject.
43
-
44
- ```javascript
45
- var welcome = {
46
- type: "html-keyboard-response",
47
- stimulus: "Welcome to the experiment. Press any key to begin."
48
- };
49
- ```
50
-
51
- Next, we push the welcome trial to the timeline, which adds it to the end of the array.
52
-
53
- ```javascript
54
- timeline.push(welcome);
55
- ```
56
-
57
- Finally, we tell jsPsych to run the experiment by calling the [jsPsych.init() function](../core_library/jspsych-core.md#jspsychinit) and passing in the array that defines the experiment timeline.
58
-
59
- ```javascript
60
- jsPsych.init({
61
- timeline: timeline
62
- });
63
- ```
64
- After each step in the tutorial you can view the complete code up to that point by clicking on the expandable box below.
65
-
66
- ??? example "The complete code so far"
67
- ``` html
68
- <!DOCTYPE html>
69
- <html>
70
- <head>
71
- <title>My experiment</title>
72
- <script src="jspsych-6.3.0/jspsych.js"></script>
73
- <script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
74
- <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
75
- </head>
76
- <body></body>
77
- <script>
78
-
79
- /* create timeline */
80
- var timeline = [];
81
-
82
- /* define welcome message trial */
83
- var welcome = {
84
- type: "html-keyboard-response",
85
- stimulus: "Welcome to the experiment. Press any key to begin."
86
- };
87
- timeline.push(welcome);
88
-
89
- /* start the experiment */
90
- jsPsych.init({
91
- timeline: timeline
92
- });
93
- </script>
94
- </html>
95
- ```
96
-
97
- ## Part 3: Show instructions
98
-
99
- We can use the same basic structure from part 2 to create a new trial that shows instructions to the subject. The only difference in this trial is that we will use HTML formatting to control how the instructions display and we will add a two second gap after the trial using the `post_trial_gap` parameter.
100
-
101
- The trial definition looks like this:
102
-
103
- ```javascript
104
- var instructions = {
105
- type: "html-keyboard-response",
106
- stimulus: `
107
- <p>In this experiment, a circle will appear in the center
108
- of the screen.</p><p>If the circle is <strong>blue</strong>,
109
- press the letter F on the keyboard as fast as you can.</p>
110
- <p>If the circle is <strong>orange</strong>, press the letter J
111
- as fast as you can.</p>
112
- <div style='width: 700px;'>
113
- <div style='float: left;'><img src='img/blue.png'></img>
114
- <p class='small'><strong>Press the F key</strong></p></div>
115
- <div class='float: right;'><img src='img/orange.png'></img>
116
- <p class='small'><strong>Press the J key</strong></p></div>
117
- </div>
118
- <p>Press any key to begin.</p>
119
- `,
120
- post_trial_gap: 2000
121
- };
122
- ```
123
-
124
- !!! tip
125
- In JavaScript there are three different ways to define a `string`. You can use single quotes `'`, double quotes `"`, or backticks `` ` ``. Using backticks has two advantages over the other approaches, especially when you are creating long strings with HTML. You can extend the `string` across multiple lines and you can use [template strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to easily incorporate variables.
126
-
127
- Notice that the HTML includes `<img>` tags to display the images that the subject will be responding to. You'll need to download these image files. Right-click on each image below and select *Save image as...*. Put the images in a folder called `img` in the experiment folder you created in part 1.
128
-
129
- ![blue circle](../img/blue.png)
130
- ![orange circle](../img/orange.png)
131
-
132
- Don't forget to add the trial to the timeline:
133
-
134
- ```javascript
135
- timeline.push(instructions);
136
- ```
137
-
138
- ??? example "The complete code so far"
139
- ```html
140
- <!DOCTYPE html>
141
- <html>
142
- <head>
143
- <title>My experiment</title>
144
- <script src="jspsych-6.3.0/jspsych.js"></script>
145
- <script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
146
- <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
147
- </head>
148
- <body></body>
149
- <script>
150
-
151
- /* create timeline */
152
- var timeline = [];
153
-
154
- /* define welcome message trial */
155
- var welcome = {
156
- type: "html-keyboard-response",
157
- stimulus: "Welcome to the experiment. Press any key to begin."
158
- };
159
- timeline.push(welcome);
160
-
161
- /* define instructions trial */
162
- var instructions = {
163
- type: "html-keyboard-response",
164
- stimulus: `
165
- <p>In this experiment, a circle will appear in the center
166
- of the screen.</p><p>If the circle is <strong>blue</strong>,
167
- press the letter F on the keyboard as fast as you can.</p>
168
- <p>If the circle is <strong>orange</strong>, press the letter J
169
- as fast as you can.</p>
170
- <div style='width: 700px;'>
171
- <div style='float: left;'><img src='img/blue.png'></img>
172
- <p class='small'><strong>Press the F key</strong></p></div>
173
- <div class='float: right;'><img src='img/orange.png'></img>
174
- <p class='small'><strong>Press the J key</strong></p></div>
175
- </div>
176
- <p>Press any key to begin.</p>
177
- `,
178
- post_trial_gap: 2000
179
- };
180
- timeline.push(instructions);
181
-
182
- /* start the experiment */
183
- jsPsych.init({
184
- timeline: timeline
185
- });
186
- </script>
187
- </html>
188
- ```
189
-
190
- ## Part 4: Displaying stimuli and getting responses
191
-
192
- Creating trials to show the stimuli is conceptually the same as creating a trial to show instructions, except that now we are displaying an image instead of text or html. This means we need to use a different plugin: jspsych-image-keyboard-response. We need to start by loading this plugin by adding a `<script>` tag to the document.
193
-
194
- ```html hl_lines="5"
195
- <head>
196
- <title>My experiment</title>
197
- <script src="jspsych-6.3.0/jspsych.js"></script>
198
- <script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
199
- <script src="jspsych-6.3.0/plugins/jspsych-image-keyboard-response.js"></script>
200
- <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
201
- </head>
202
- ```
203
-
204
- For now, we will just show each image once. The path to the image file should be set as the `stimulus` parameter. We will also set the option for which keys the subject is allowed to use to respond (`choices`) so that only the 'f' and 'j' keys are valid responses.
205
-
206
- ```javascript
207
- var blue_trial = {
208
- type: 'image-keyboard-response',
209
- stimulus: 'img/blue.png',
210
- choices: ['f', 'j']
211
- };
212
-
213
- var orange_trial = {
214
- type: 'image-keyboard-response',
215
- stimulus: 'img/orange.png',
216
- choices: ['f', 'j']
217
- }
218
- ```
219
-
220
- As usual, we need to add the trials to the timeline.
221
-
222
- ```javascript
223
- timeline.push(blue_trial, orange_trial);
224
- ```
225
-
226
- ??? example "The complete code so far"
227
-
228
- ```html
229
- <!DOCTYPE html>
230
- <html>
231
- <head>
232
- <title>My experiment</title>
233
- <script src="jspsych-6.3.0/jspsych.js"></script>
234
- <script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
235
- <script src="jspsych-6.3.0/plugins/jspsych-image-keyboard-response.js"></script>
236
- <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
237
- </head>
238
- <body></body>
239
- <script>
240
-
241
- /* create timeline */
242
- var timeline = [];
243
-
244
- /* define welcome message trial */
245
- var welcome = {
246
- type: "html-keyboard-response",
247
- stimulus: "Welcome to the experiment. Press any key to begin."
248
- };
249
- timeline.push(welcome);
250
-
251
- /* define instructions trial */
252
- var instructions = {
253
- type: "html-keyboard-response",
254
- stimulus: `
255
- <p>In this experiment, a circle will appear in the center
256
- of the screen.</p><p>If the circle is <strong>blue</strong>,
257
- press the letter F on the keyboard as fast as you can.</p>
258
- <p>If the circle is <strong>orange</strong>, press the letter J
259
- as fast as you can.</p>
260
- <div style='width: 700px;'>
261
- <div style='float: left;'><img src='img/blue.png'></img>
262
- <p class='small'><strong>Press the F key</strong></p></div>
263
- <div class='float: right;'><img src='img/orange.png'></img>
264
- <p class='small'><strong>Press the J key</strong></p></div>
265
- </div>
266
- <p>Press any key to begin.</p>
267
- `,
268
- post_trial_gap: 2000
269
- };
270
- timeline.push(instructions);
271
-
272
- /* test trials */
273
- var blue_trial = {
274
- type: 'image-keyboard-response',
275
- stimulus: 'img/blue.png',
276
- choices: ['f', 'j']
277
- };
278
-
279
- var orange_trial = {
280
- type: 'image-keyboard-response',
281
- stimulus: 'img/orange.png',
282
- choices: ['f', 'j']
283
- }
284
-
285
- timeline.push(blue_trial, orange_trial);
286
-
287
- /* start the experiment */
288
- jsPsych.init({
289
- timeline: timeline
290
- });
291
- </script>
292
- </html>
293
- ```
294
-
295
- ## Part 5: Preloading media
296
-
297
- Whenever we use media elements (images, audio, or video) in an experiment it is a good idea to preload them prior to needing them for a trial. By preloading media we ask the participant's browser to download the media ahead of needing it, so that when we do need to display or play it there is no lag from needing to download it.
298
-
299
- We are going to use the [jspsych-preload plugin](/plugins/jspsych-preload.md) to preload the two images. The [media preloading section](/overview/media-preloading.md) goes into a lot of detail about various options for preloading and different ways that you can use this plugin. Here we are simply going to give the plugin a list of the files that we want to be preloaded.
300
-
301
- First we need to add the preload plugin to our `<head>` section.
302
-
303
- ```html hl_lines="6"
304
- <head>
305
- <title>My experiment</title>
306
- <script src="jspsych-6.3.0/jspsych.js"></script>
307
- <script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
308
- <script src="jspsych-6.3.0/plugins/jspsych-image-keyboard-response.js"></script>
309
- <script src="jspsych-6.3.0/plugins/jspsych-preload.js"></script>
310
- <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
311
- </head>
312
- ```
313
-
314
-
315
- We'll put this trial at the very start of the experiment, so add this code before the `welcome` trial.
316
-
317
- ```js
318
- var preload = {
319
- type: 'preload',
320
- images: ['img/blue.png', 'img/orange.png']
321
- }
322
- ```
323
-
324
- As always, add the trial to the timeline.
325
-
326
- ```js
327
- timeline.push(preload);
328
- ```
329
-
330
- ??? example "The complete code so far"
331
-
332
- ```html
333
- <!DOCTYPE html>
334
- <html>
335
- <head>
336
- <title>My experiment</title>
337
- <script src="jspsych-6.3.0/jspsych.js"></script>
338
- <script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
339
- <script src="jspsych-6.3.0/plugins/jspsych-image-keyboard-response.js"></script>
340
- <script src="jspsych-6.3.0/plugins/jspsych-preload.js"></script>
341
- <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
342
- </head>
343
- <body></body>
344
- <script>
345
-
346
- /* create timeline */
347
- var timeline = [];
348
-
349
- /* preload images */
350
- var preload = {
351
- type: 'preload',
352
- images: ['img/blue.png', 'img/orange.png']
353
- }
354
- timeline.push(preload);
355
-
356
- /* define welcome message trial */
357
- var welcome = {
358
- type: "html-keyboard-response",
359
- stimulus: "Welcome to the experiment. Press any key to begin."
360
- };
361
- timeline.push(welcome);
362
-
363
- /* define instructions trial */
364
- var instructions = {
365
- type: "html-keyboard-response",
366
- stimulus: `
367
- <p>In this experiment, a circle will appear in the center
368
- of the screen.</p><p>If the circle is <strong>blue</strong>,
369
- press the letter F on the keyboard as fast as you can.</p>
370
- <p>If the circle is <strong>orange</strong>, press the letter J
371
- as fast as you can.</p>
372
- <div style='width: 700px;'>
373
- <div style='float: left;'><img src='img/blue.png'></img>
374
- <p class='small'><strong>Press the F key</strong></p></div>
375
- <div class='float: right;'><img src='img/orange.png'></img>
376
- <p class='small'><strong>Press the J key</strong></p></div>
377
- </div>
378
- <p>Press any key to begin.</p>
379
- `,
380
- post_trial_gap: 2000
381
- };
382
- timeline.push(instructions);
383
-
384
- /* test trials */
385
- var blue_trial = {
386
- type: 'image-keyboard-response',
387
- stimulus: 'img/blue.png',
388
- choices: ['f', 'j']
389
- };
390
-
391
- var orange_trial = {
392
- type: 'image-keyboard-response',
393
- stimulus: 'img/orange.png',
394
- choices: ['f', 'j']
395
- }
396
-
397
- timeline.push(blue_trial, orange_trial);
398
-
399
- /* start the experiment */
400
- jsPsych.init({
401
- timeline: timeline
402
- });
403
- </script>
404
- </html>
405
- ```
406
-
407
- ## Part 6: Timeline variables
408
-
409
- In the full experiment, we will want more than two trials. One way we could do this is to create many more objects that define trials and push them all onto the timeline, but there is a more efficient way: using timeline variables.
410
-
411
- The parameters for showing the blue and orange circle are very similar. The only difference is which image is displayed. Timeline variables allow us to define the procedure for showing the stimulus once, and then repeatedly use it with different variables. We'll see how, even in this relatively simple case, this can save us a lot of lines of code.
412
-
413
- To start, let's make an array that contains all the different trials we want to run in the test phase. There are only two for the experiment: blue trials and orange trials.
414
-
415
- ```javascript
416
- var test_stimuli = [
417
- { stimulus: "img/blue.png"},
418
- { stimulus: "img/orange.png"}
419
- ];
420
- ```
421
-
422
- Instead of just showing the blue and orange circles, let's also set up the experiment to show a fixation cross (+) in between trials. We can define a trial to show the fixation cross for a fixed amount of time by using the `trial_duration` parameter of the html-keyboard-response plugin and setting the `choices` parameter to the special value `jsPsych.NO_KEYS`, which means that no responses will be accepted as a valid response and the trial will last however long the `trial_duration` parameter specifies.
423
-
424
- ```javascript
425
- var fixation = {
426
- type: 'html-keyboard-response',
427
- stimulus: '<div style="font-size:60px;">+</div>',
428
- choices: jsPsych.NO_KEYS,
429
- trial_duration: 1000,
430
- }
431
- ```
432
-
433
- To show the circles, we'll set up another trial with the html-keyboard-response plugin, but we'll use the function `jsPsych.timelineVariable()` to indicate that we want jsPsych to substitute the value of the parameter in from the timeline variables.
434
-
435
- ```javascript
436
- var test = {
437
- type: "image-keyboard-response",
438
- stimulus: jsPsych.timelineVariable('stimulus'),
439
- choices: ['f', 'j']
440
- }
441
- ```
442
-
443
- To link the variables that we declared in the `test_stimuli` array with the call to `jsPsych.timelineVariable()` we need to create a new timeline and set the `timeline_variables` property:
444
-
445
- ```javascript
446
- var test_procedure = {
447
- timeline: [fixation, test],
448
- timeline_variables: test_stimuli
449
- }
450
- ```
451
-
452
- We have to add the `test_procedure` to the main `timeline` array, but the `fixation` and `test` trial do not need to be added to `timeline` because they already exist on the `test_procedure` timeline.
453
-
454
- ```javascript
455
- timeline.push(test_procedure);
456
- ```
457
-
458
- What happens when the experiment reaches the test procedure? jsPsych will run the `test_procedure` timeline one time for each entry in the `test_stimuli` array (two times total, in this case). The first time through, jsPsych will substitute the timeline variables from the first array entry (blue image), and the second time through the second array entry will be used (orange image). Notice that the fixation trial occurs before both the orange and the blue circles, because the entire timeline of the `test_procedure` is repeated for each entry in the `timeline_variables` array.
459
-
460
- ??? example "The complete code so far"
461
-
462
- ```html
463
- <!DOCTYPE html>
464
- <html>
465
- <head>
466
- <title>My experiment</title>
467
- <script src="jspsych-6.3.0/jspsych.js"></script>
468
- <script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
469
- <script src="jspsych-6.3.0/plugins/jspsych-image-keyboard-response.js"></script>
470
- <script src="jspsych-6.3.0/plugins/jspsych-preload.js"></script>
471
- <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
472
- </head>
473
- <body></body>
474
- <script>
475
-
476
- /* create timeline */
477
- var timeline = [];
478
-
479
- /* preload images */
480
- var preload = {
481
- type: 'preload',
482
- images: ['img/blue.png', 'img/orange.png']
483
- }
484
- timeline.push(preload);
485
-
486
- /* define welcome message trial */
487
- var welcome = {
488
- type: "html-keyboard-response",
489
- stimulus: "Welcome to the experiment. Press any key to begin."
490
- };
491
- timeline.push(welcome);
492
-
493
- /* define instructions trial */
494
- var instructions = {
495
- type: "html-keyboard-response",
496
- stimulus: `
497
- <p>In this experiment, a circle will appear in the center
498
- of the screen.</p><p>If the circle is <strong>blue</strong>,
499
- press the letter F on the keyboard as fast as you can.</p>
500
- <p>If the circle is <strong>orange</strong>, press the letter J
501
- as fast as you can.</p>
502
- <div style='width: 700px;'>
503
- <div style='float: left;'><img src='img/blue.png'></img>
504
- <p class='small'><strong>Press the F key</strong></p></div>
505
- <div class='float: right;'><img src='img/orange.png'></img>
506
- <p class='small'><strong>Press the J key</strong></p></div>
507
- </div>
508
- <p>Press any key to begin.</p>
509
- `,
510
- post_trial_gap: 2000
511
- };
512
- timeline.push(instructions);
513
-
514
- /* test trials */
515
- var test_stimuli = [
516
- { stimulus: "img/blue.png"},
517
- { stimulus: "img/orange.png"}
518
- ];
519
-
520
- var fixation = {
521
- type: 'html-keyboard-response',
522
- stimulus: '<div style="font-size:60px;">+</div>',
523
- choices: jsPsych.NO_KEYS,
524
- trial_duration: 1000,
525
- }
526
-
527
- var test = {
528
- type: "image-keyboard-response",
529
- stimulus: jsPsych.timelineVariable('stimulus'),
530
- choices: ['f', 'j']
531
- }
532
-
533
- var test_procedure = {
534
- timeline: [fixation, test],
535
- timeline_variables: test_stimuli
536
- }
537
-
538
- timeline.push(test_procedure);
539
-
540
- /* start the experiment */
541
- jsPsych.init({
542
- timeline: timeline
543
- });
544
- </script>
545
- </html>
546
- ```
547
-
548
-
549
- ## Part 7: Parameters for timelines with timeline variables
550
-
551
- Right now our experiment is a measly two trials long. Even worse is that the order of the stimuli is the same every time! When we use timeline variables, we get access to some methods to randomize the order and repeat the trials. To randomize the order, simply set `randomize_order: true` on the object with the `timeline_variables`:
552
-
553
- ```javascript
554
- var test_procedure = {
555
- timeline: [fixation, test],
556
- timeline_variables: test_stimuli,
557
- randomize_order: true
558
- }
559
- ```
560
-
561
- We can also easily make the test phase longer by setting the `repetitions` parameter. This parameter controls how many times the experiment will loop through all of the entries in the timeline_variables array. For example, if we set `repetitions: 5`, then the experiment will loop through the two entries in the timeline_variables 5 times, for a total of 10 test trials.
562
-
563
- ```javascript
564
- var test_procedure = {
565
- timeline: [fixation, test],
566
- timeline_variables: test_stimuli,
567
- randomize_order: true,
568
- repetitions: 5
569
- }
570
- ```
571
- ??? example "The complete code so far"
572
-
573
- ```html
574
- <!DOCTYPE html>
575
- <html>
576
- <head>
577
- <title>My experiment</title>
578
- <script src="jspsych-6.3.0/jspsych.js"></script>
579
- <script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
580
- <script src="jspsych-6.3.0/plugins/jspsych-image-keyboard-response.js"></script>
581
- <script src="jspsych-6.3.0/plugins/jspsych-preload.js"></script>
582
- <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
583
- </head>
584
- <body></body>
585
- <script>
586
-
587
- /* create timeline */
588
- var timeline = [];
589
-
590
- /* preload images */
591
- var preload = {
592
- type: 'preload',
593
- images: ['img/blue.png', 'img/orange.png']
594
- }
595
- timeline.push(preload);
596
-
597
- /* define welcome message trial */
598
- var welcome = {
599
- type: "html-keyboard-response",
600
- stimulus: "Welcome to the experiment. Press any key to begin."
601
- };
602
- timeline.push(welcome);
603
-
604
- /* define instructions trial */
605
- var instructions = {
606
- type: "html-keyboard-response",
607
- stimulus: `
608
- <p>In this experiment, a circle will appear in the center
609
- of the screen.</p><p>If the circle is <strong>blue</strong>,
610
- press the letter F on the keyboard as fast as you can.</p>
611
- <p>If the circle is <strong>orange</strong>, press the letter J
612
- as fast as you can.</p>
613
- <div style='width: 700px;'>
614
- <div style='float: left;'><img src='img/blue.png'></img>
615
- <p class='small'><strong>Press the F key</strong></p></div>
616
- <div class='float: right;'><img src='img/orange.png'></img>
617
- <p class='small'><strong>Press the J key</strong></p></div>
618
- </div>
619
- <p>Press any key to begin.</p>
620
- `,
621
- post_trial_gap: 2000
622
- };
623
- timeline.push(instructions);
624
-
625
- /* test trials */
626
- var test_stimuli = [
627
- { stimulus: "img/blue.png"},
628
- { stimulus: "img/orange.png"}
629
- ];
630
-
631
- var fixation = {
632
- type: 'html-keyboard-response',
633
- stimulus: '<div style="font-size:60px;">+</div>',
634
- choices: jsPsych.NO_KEYS,
635
- trial_duration: 1000,
636
- }
637
-
638
- var test = {
639
- type: "image-keyboard-response",
640
- stimulus: jsPsych.timelineVariable('stimulus'),
641
- choices: ['f', 'j']
642
- }
643
-
644
- var test_procedure = {
645
- timeline: [fixation, test],
646
- timeline_variables: test_stimuli,
647
- randomize_order: true,
648
- repetitions: 5
649
- }
650
-
651
- timeline.push(test_procedure);
652
-
653
- /* start the experiment */
654
- jsPsych.init({
655
- timeline: timeline
656
- });
657
- </script>
658
- </html>
659
- ```
660
-
661
- ## Part 8: Using functions to generate parameters
662
-
663
- One aspect of the experiment that could be improved is the duration of the fixation cross. As the experiment stands right now, the timing of the circles appearing is very predictable. We can change that by using a different value for the `trial_duration` parameter in the `fixation` trial for each trial. But how can we do that and keep the simple code structure we have now where we only have to define the fixation trial once? One option would be to add another timeline variable, like `"fixation_duration"` and use that to control the timing. But another option is to specify the `trial_duration` parameter as a function. If a parameter is a function, jsPsych will execute the function every time the trial runs. That means that if the function returns different results probabilistically, we can get a different parameter value every time the trial runs.
664
-
665
- To do that here, we'll use one of the built-in randomization methods in [jsPsych's randomization module](/core_library/jspsych-randomization.md). `jsPsych.randomization.sampleWithoutReplacement()` takes an array of items to sample from and generates a new array of length *N* by sampling without replacement.
666
-
667
- ```javascript
668
- var fixation = {
669
- type: 'html-keyboard-response',
670
- stimulus: '<div style="font-size:60px;">+</div>',
671
- choices: jsPsych.NO_KEYS,
672
- trial_duration: function(){
673
- return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
674
- }
675
- }
676
- ```
677
-
678
- In the code above, we replaced the `trial_duration: 1000` parameter in `fixation` with a function. Inside the function, we take a sample from the array `[250, 500, 750, 1000, 1250, 1500, 1750, 2000]` of size 1 (second parameter to `jsPsych.randomization.sampleWithoutReplacement`). The return value from calling `jsPsych.randomization.sampleWithoutReplacement` is an array of length 1, so we add the `[0]` selection at the end to get the value out of the array.
679
-
680
- ??? example "The complete code so far"
681
-
682
- ```html
683
- <!DOCTYPE html>
684
- <html>
685
- <head>
686
- <title>My experiment</title>
687
- <script src="jspsych-6.3.0/jspsych.js"></script>
688
- <script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
689
- <script src="jspsych-6.3.0/plugins/jspsych-image-keyboard-response.js"></script>
690
- <script src="jspsych-6.3.0/plugins/jspsych-preload.js"></script>
691
- <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
692
- </head>
693
- <body></body>
694
- <script>
695
-
696
- /* create timeline */
697
- var timeline = [];
698
-
699
- /* preload images */
700
- var preload = {
701
- type: 'preload',
702
- images: ['img/blue.png', 'img/orange.png']
703
- }
704
- timeline.push(preload);
705
-
706
- /* define welcome message trial */
707
- var welcome = {
708
- type: "html-keyboard-response",
709
- stimulus: "Welcome to the experiment. Press any key to begin."
710
- };
711
- timeline.push(welcome);
712
-
713
- /* define instructions trial */
714
- var instructions = {
715
- type: "html-keyboard-response",
716
- stimulus: `
717
- <p>In this experiment, a circle will appear in the center
718
- of the screen.</p><p>If the circle is <strong>blue</strong>,
719
- press the letter F on the keyboard as fast as you can.</p>
720
- <p>If the circle is <strong>orange</strong>, press the letter J
721
- as fast as you can.</p>
722
- <div style='width: 700px;'>
723
- <div style='float: left;'><img src='img/blue.png'></img>
724
- <p class='small'><strong>Press the F key</strong></p></div>
725
- <div class='float: right;'><img src='img/orange.png'></img>
726
- <p class='small'><strong>Press the J key</strong></p></div>
727
- </div>
728
- <p>Press any key to begin.</p>
729
- `,
730
- post_trial_gap: 2000
731
- };
732
- timeline.push(instructions);
733
-
734
- /* test trials */
735
- var test_stimuli = [
736
- { stimulus: "img/blue.png"},
737
- { stimulus: "img/orange.png"}
738
- ];
739
-
740
- var fixation = {
741
- type: 'html-keyboard-response',
742
- stimulus: '<div style="font-size:60px;">+</div>',
743
- choices: jsPsych.NO_KEYS,
744
- trial_duration: function(){
745
- return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
746
- }
747
- }
748
-
749
- var test = {
750
- type: "image-keyboard-response",
751
- stimulus: jsPsych.timelineVariable('stimulus'),
752
- choices: ['f', 'j']
753
- }
754
-
755
- var test_procedure = {
756
- timeline: [fixation, test],
757
- timeline_variables: test_stimuli,
758
- randomize_order: true,
759
- repetitions: 5
760
- }
761
-
762
- timeline.push(test_procedure);
763
-
764
- /* start the experiment */
765
- jsPsych.init({
766
- timeline: timeline
767
- });
768
- </script>
769
- </html>
770
- ```
771
-
772
- ## Part 10: Displaying the data
773
-
774
- We have created a complete, if simple, experiment at this point, so let's take a look at the data being generated. jsPsych has a built-in [function called `jsPsych.data.displayData()`](/core_library/jspsych-data.md#jspsychdatadisplaydata) that is useful for debugging your experiment. It will remove all of the information on the screen and replace it with the raw data collected so far. This isn't terribly useful when you are actually running an experiment, but it's nice for checking the data during development.
775
-
776
- We need the `displayData` function to execute when the experiment ends. One way to do this is to use the [`on_finish` callback function](/overview/callbacks.md#on_finish-experiment). This function will automatically execute once all the trials in the experiment are finished. We can specify a function to call in the `init` method.
777
-
778
- ```javascript
779
- jsPsych.init({
780
- timeline: timeline,
781
- on_finish: function() {
782
- jsPsych.data.displayData();
783
- }
784
- });
785
- ```
786
-
787
- ??? example "The complete code so far"
788
-
789
- ```html
790
- <!DOCTYPE html>
791
- <html>
792
- <head>
793
- <title>My experiment</title>
794
- <script src="jspsych-6.3.0/jspsych.js"></script>
795
- <script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
796
- <script src="jspsych-6.3.0/plugins/jspsych-image-keyboard-response.js"></script>
797
- <script src="jspsych-6.3.0/plugins/jspsych-preload.js"></script>
798
- <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
799
- </head>
800
- <body></body>
801
- <script>
802
-
803
- /* create timeline */
804
- var timeline = [];
805
-
806
- /* preload images */
807
- var preload = {
808
- type: 'preload',
809
- images: ['img/blue.png', 'img/orange.png']
810
- }
811
- timeline.push(preload);
812
-
813
- /* define welcome message trial */
814
- var welcome = {
815
- type: "html-keyboard-response",
816
- stimulus: "Welcome to the experiment. Press any key to begin."
817
- };
818
- timeline.push(welcome);
819
-
820
- /* define instructions trial */
821
- var instructions = {
822
- type: "html-keyboard-response",
823
- stimulus: `
824
- <p>In this experiment, a circle will appear in the center
825
- of the screen.</p><p>If the circle is <strong>blue</strong>,
826
- press the letter F on the keyboard as fast as you can.</p>
827
- <p>If the circle is <strong>orange</strong>, press the letter J
828
- as fast as you can.</p>
829
- <div style='width: 700px;'>
830
- <div style='float: left;'><img src='img/blue.png'></img>
831
- <p class='small'><strong>Press the F key</strong></p></div>
832
- <div class='float: right;'><img src='img/orange.png'></img>
833
- <p class='small'><strong>Press the J key</strong></p></div>
834
- </div>
835
- <p>Press any key to begin.</p>
836
- `,
837
- post_trial_gap: 2000
838
- };
839
- timeline.push(instructions);
840
-
841
- /* test trials */
842
- var test_stimuli = [
843
- { stimulus: "img/blue.png"},
844
- { stimulus: "img/orange.png"}
845
- ];
846
-
847
- var fixation = {
848
- type: 'html-keyboard-response',
849
- stimulus: '<div style="font-size:60px;">+</div>',
850
- choices: jsPsych.NO_KEYS,
851
- trial_duration: function(){
852
- return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
853
- }
854
- }
855
-
856
- var test = {
857
- type: "image-keyboard-response",
858
- stimulus: jsPsych.timelineVariable('stimulus'),
859
- choices: ['f', 'j']
860
- }
861
-
862
- var test_procedure = {
863
- timeline: [fixation, test],
864
- timeline_variables: test_stimuli,
865
- randomize_order: true,
866
- repetitions: 5
867
- }
868
-
869
- timeline.push(test_procedure);
870
-
871
- /* start the experiment */
872
- jsPsych.init({
873
- timeline: timeline,
874
- on_finish: function() {
875
- jsPsych.data.displayData();
876
- }
877
- });
878
- </script>
879
- </html>
880
- ```
881
-
882
- ## Part 11: Tagging trials with additional data
883
-
884
- All trials in jsPsych can be tagged with additional arbitrary data. This data will get stored alongside the data that the plugin normally generates, which allows experimenters to record properties of a trial along with the data from the trial.
885
-
886
- When might you use this feature? In this experiment, it would be nice to tag each trial with a circle as a `response` trial, so that the resulting data can be easily filtered to look at only the critical trials. We can do that like this.
887
-
888
- ```javascript
889
- var test = {
890
- type: "image-keyboard-response",
891
- stimulus: jsPsych.timelineVariable('stimulus'),
892
- choices: ['f', 'j'],
893
- data: {
894
- task: 'response'
895
- }
896
- }
897
- ```
898
-
899
- We also could tag the test trials with a property that indicates what the correct response should be (F for the blue circles, J for the orange). In our current code, we are using the timeline variables feature of jsPsych to choose which circle gets presented on a trial. Since we want to tag the trials differently based on which circle is presented, we need to add the tagging data to the `test_stimuli` array, and then use the `jsPsych.timelineVariable()` function to get the value and assign it to a property in the `data` of the trial.
900
-
901
- We start by modifying `test_stimuli`:
902
-
903
- ```javascript
904
- var test_stimuli = [
905
- { stimulus: "img/blue.png", correct_response: 'f'},
906
- { stimulus: "img/orange.png", correct_response: 'j'}
907
- ];
908
- ```
909
-
910
- Now we can use `timelineVariable()` in the `data` parameter of the `test` trial.
911
-
912
- ```javascript
913
- var test = {
914
- type: "image-keyboard-response",
915
- stimulus: jsPsych.timelineVariable('stimulus'),
916
- choices: ['f', 'j'],
917
- data: {
918
- task: 'response',
919
- correct_response: jsPsych.timelineVariable('correct_response')
920
- }
921
- }
922
- ```
923
-
924
- Another kind of tagging that would be useful is to mark each fixation trial as such, to make removing the data from fixation trials easier.
925
-
926
- ```js
927
- var fixation = {
928
- type: 'html-keyboard-response',
929
- stimulus: '<div style="font-size:60px;">+</div>',
930
- choices: jsPsych.NO_KEYS,
931
- trial_duration: function(){
932
- return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
933
- },
934
- data: {
935
- task: 'fixation'
936
- }
937
- }
938
- ```
939
-
940
- ??? example "The complete code so far"
941
-
942
- ```html
943
- <!DOCTYPE html>
944
- <html>
945
- <head>
946
- <title>My experiment</title>
947
- <script src="jspsych-6.3.0/jspsych.js"></script>
948
- <script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
949
- <script src="jspsych-6.3.0/plugins/jspsych-image-keyboard-response.js"></script>
950
- <script src="jspsych-6.3.0/plugins/jspsych-preload.js"></script>
951
- <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
952
- </head>
953
- <body></body>
954
- <script>
955
-
956
- /* create timeline */
957
- var timeline = [];
958
-
959
- /* preload images */
960
- var preload = {
961
- type: 'preload',
962
- images: ['img/blue.png', 'img/orange.png']
963
- }
964
- timeline.push(preload);
965
-
966
- /* define welcome message trial */
967
- var welcome = {
968
- type: "html-keyboard-response",
969
- stimulus: "Welcome to the experiment. Press any key to begin."
970
- };
971
- timeline.push(welcome);
972
-
973
- /* define instructions trial */
974
- var instructions = {
975
- type: "html-keyboard-response",
976
- stimulus: `
977
- <p>In this experiment, a circle will appear in the center
978
- of the screen.</p><p>If the circle is <strong>blue</strong>,
979
- press the letter F on the keyboard as fast as you can.</p>
980
- <p>If the circle is <strong>orange</strong>, press the letter J
981
- as fast as you can.</p>
982
- <div style='width: 700px;'>
983
- <div style='float: left;'><img src='img/blue.png'></img>
984
- <p class='small'><strong>Press the F key</strong></p></div>
985
- <div class='float: right;'><img src='img/orange.png'></img>
986
- <p class='small'><strong>Press the J key</strong></p></div>
987
- </div>
988
- <p>Press any key to begin.</p>
989
- `,
990
- post_trial_gap: 2000
991
- };
992
- timeline.push(instructions);
993
-
994
- /* test trials */
995
- var test_stimuli = [
996
- { stimulus: "img/blue.png", correct_response: 'f'},
997
- { stimulus: "img/orange.png", correct_response: 'j'}
998
- ];
999
-
1000
- var fixation = {
1001
- type: 'html-keyboard-response',
1002
- stimulus: '<div style="font-size:60px;">+</div>',
1003
- choices: jsPsych.NO_KEYS,
1004
- trial_duration: function(){
1005
- return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
1006
- },
1007
- data: {
1008
- task: 'fixation'
1009
- }
1010
- }
1011
-
1012
- var test = {
1013
- type: "image-keyboard-response",
1014
- stimulus: jsPsych.timelineVariable('stimulus'),
1015
- choices: ['f', 'j'],
1016
- data: {
1017
- task: 'response',
1018
- correct_response: jsPsych.timelineVariable('correct_response')
1019
- }
1020
- }
1021
-
1022
- var test_procedure = {
1023
- timeline: [fixation, test],
1024
- timeline_variables: test_stimuli,
1025
- randomize_order: true,
1026
- repetitions: 5
1027
- }
1028
-
1029
- timeline.push(test_procedure);
1030
-
1031
- /* start the experiment */
1032
- jsPsych.init({
1033
- timeline: timeline,
1034
- on_finish: function() {
1035
- jsPsych.data.displayData();
1036
- }
1037
- });
1038
- </script>
1039
- </html>
1040
- ```
1041
-
1042
- ## Part 12: Manipulating data during the experiment
1043
-
1044
- Now that the data from the test trials has a tag that describes the correct response, it would be easy to analyze the data after the fact and calculate whether the participant responded correctly.
1045
-
1046
- But, we can also do this in jsPsych as the experiment runs to save time later and enable a limited set of data analysis directly in the experiment code.
1047
-
1048
- To do this, we'll use the `on_finish` event of the test trial. We can assign a function to `on_finish`, and that function will receive an object containing the data generated by the trial. This object can be manipulated inside the function, and any changes made to the object will be stored in jsPsych's internal representation of the data.
1049
-
1050
- For this example, we'll calculate whether the subject responded correctly, and add a new `correct` property to the data object.
1051
-
1052
- ```javascript
1053
- var test = {
1054
- type: "image-keyboard-response",
1055
- stimulus: jsPsych.timelineVariable('stimulus'),
1056
- choices: ['f', 'j'],
1057
- data: {
1058
- task: 'response',
1059
- correct_response: jsPsych.timelineVariable('correct_response')
1060
- },
1061
- on_finish: function(data){
1062
- data.correct = jsPsych.pluginAPI.compareKeys(data.response, data.correct_response);
1063
- }
1064
- }
1065
- ```
1066
-
1067
- The `data.response` value is a string representation of the key the subject pressed. We can compare this with the `data.correct_response` value, and assign this computed value to a new property `data.correct`.
1068
-
1069
- ??? example "The complete code so far"
1070
-
1071
- ```html
1072
- <!DOCTYPE html>
1073
- <html>
1074
- <head>
1075
- <title>My experiment</title>
1076
- <script src="jspsych-6.3.0/jspsych.js"></script>
1077
- <script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
1078
- <script src="jspsych-6.3.0/plugins/jspsych-image-keyboard-response.js"></script>
1079
- <script src="jspsych-6.3.0/plugins/jspsych-preload.js"></script>
1080
- <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
1081
- </head>
1082
- <body></body>
1083
- <script>
1084
-
1085
- /* create timeline */
1086
- var timeline = [];
1087
-
1088
- /* preload images */
1089
- var preload = {
1090
- type: 'preload',
1091
- images: ['img/blue.png', 'img/orange.png']
1092
- }
1093
- timeline.push(preload);
1094
-
1095
- /* define welcome message trial */
1096
- var welcome = {
1097
- type: "html-keyboard-response",
1098
- stimulus: "Welcome to the experiment. Press any key to begin."
1099
- };
1100
- timeline.push(welcome);
1101
-
1102
- /* define instructions trial */
1103
- var instructions = {
1104
- type: "html-keyboard-response",
1105
- stimulus: `
1106
- <p>In this experiment, a circle will appear in the center
1107
- of the screen.</p><p>If the circle is <strong>blue</strong>,
1108
- press the letter F on the keyboard as fast as you can.</p>
1109
- <p>If the circle is <strong>orange</strong>, press the letter J
1110
- as fast as you can.</p>
1111
- <div style='width: 700px;'>
1112
- <div style='float: left;'><img src='img/blue.png'></img>
1113
- <p class='small'><strong>Press the F key</strong></p></div>
1114
- <div class='float: right;'><img src='img/orange.png'></img>
1115
- <p class='small'><strong>Press the J key</strong></p></div>
1116
- </div>
1117
- <p>Press any key to begin.</p>
1118
- `,
1119
- post_trial_gap: 2000
1120
- };
1121
- timeline.push(instructions);
1122
-
1123
- /* test trials */
1124
- var test_stimuli = [
1125
- { stimulus: "img/blue.png", correct_response: 'f'},
1126
- { stimulus: "img/orange.png", correct_response: 'j'}
1127
- ];
1128
-
1129
- var fixation = {
1130
- type: 'html-keyboard-response',
1131
- stimulus: '<div style="font-size:60px;">+</div>',
1132
- choices: jsPsych.NO_KEYS,
1133
- trial_duration: function(){
1134
- return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
1135
- },
1136
- data: {
1137
- task: 'fixation'
1138
- }
1139
- }
1140
-
1141
- var test = {
1142
- type: "image-keyboard-response",
1143
- stimulus: jsPsych.timelineVariable('stimulus'),
1144
- choices: ['f', 'j'],
1145
- data: {
1146
- task: 'response',
1147
- correct_response: jsPsych.timelineVariable('correct_response')
1148
- },
1149
- on_finish: function(data){
1150
- data.correct = jsPsych.pluginAPI.compareKeys(data.response, data.correct_response);
1151
- }
1152
- }
1153
-
1154
- var test_procedure = {
1155
- timeline: [fixation, test],
1156
- timeline_variables: test_stimuli,
1157
- randomize_order: true,
1158
- repetitions: 5
1159
- }
1160
-
1161
- timeline.push(test_procedure);
1162
-
1163
- /* start the experiment */
1164
- jsPsych.init({
1165
- timeline: timeline,
1166
- on_finish: function() {
1167
- jsPsych.data.displayData();
1168
- }
1169
- });
1170
- </script>
1171
- </html>
1172
- ```
1173
-
1174
-
1175
- ## Part 13: Data aggregation
1176
-
1177
- jsPsych provides a limited set of analysis functions to allow you to calculate things like mean response times for a selected set of trials. In this part, we'll use these functions to add a final trial to the experiment that tells the subject their accuracy and their mean response time for correct responses.
1178
-
1179
- We'll use the `html-keyboard-response` plugin. Because the text that we want to display changes based on the subject's performance in the experiment, we need to use a function for the `stimulus` parameter and return the desired text.
1180
-
1181
- Here's what the code looks like, and a description follows below.
1182
-
1183
- ```js
1184
- var debrief_block = {
1185
- type: "html-keyboard-response",
1186
- stimulus: function() {
1187
-
1188
- var trials = jsPsych.data.get().filter({task: 'response'});
1189
- var correct_trials = trials.filter({correct: true});
1190
- var accuracy = Math.round(correct_trials.count() / trials.count() * 100);
1191
- var rt = Math.round(correct_trials.select('rt').mean());
1192
-
1193
- return `<p>You responded correctly on ${accuracy}% of the trials.</p>
1194
- <p>Your average response time was ${rt}ms.</p>
1195
- <p>Press any key to complete the experiment. Thank you!</p>`;
1196
-
1197
- }
1198
- };
1199
-
1200
- timeline.push(debrief_block);
1201
- ```
1202
-
1203
- To create the variable `trials`, we use `jsPsych.data.get()` which returns a jsPsych data collection containing all of the data from the experiment. We can then use `.filter` to select only the trials where `task` is `'response'` (a benefit of tagging the trials in part 11). `trials` contains all of the data from the trials where a circle was shown.
1204
-
1205
- To get only the correct trials, we can use `.filter()` again to select only the trials from the `trials` data collection where the property `correct` is `true`.
1206
-
1207
- To calculate accuracy, we can use the `.count()` method to determine how many trials were correct and how many trials there were total. We also use `Math.round()` to avoid extra digits after the decimal.
1208
-
1209
- Finally, to calculate the mean response time on correct trials, we use the `.select` method on the `correct_trials` data collection to select only the `'rt'` property of those trials. We can then use the `.mean()` method to find the mean of all the RT values.
1210
-
1211
- ## The final code
1212
-
1213
- This code is available in the `/examples` folder in the jsPsych release download. It is called `demo-simple-rt-task.html`.
1214
-
1215
- ```html
1216
- <!DOCTYPE html>
1217
- <html>
1218
- <head>
1219
- <title>My experiment</title>
1220
- <script src="jspsych-6.3.0/jspsych.js"></script>
1221
- <script src="jspsych-6.3.0/plugins/jspsych-html-keyboard-response.js"></script>
1222
- <script src="jspsych-6.3.0/plugins/jspsych-image-keyboard-response.js"></script>
1223
- <script src="jspsych-6.3.0/plugins/jspsych-preload.js"></script>
1224
- <link href="jspsych-6.3.0/css/jspsych.css" rel="stylesheet" type="text/css">
1225
- </head>
1226
- <body></body>
1227
- <script>
1228
-
1229
- /* create timeline */
1230
- var timeline = [];
1231
-
1232
- /* preload images */
1233
- var preload = {
1234
- type: 'preload',
1235
- images: ['img/blue.png', 'img/orange.png']
1236
- }
1237
- timeline.push(preload);
1238
-
1239
- /* define welcome message trial */
1240
- var welcome = {
1241
- type: "html-keyboard-response",
1242
- stimulus: "Welcome to the experiment. Press any key to begin."
1243
- };
1244
- timeline.push(welcome);
1245
-
1246
- /* define instructions trial */
1247
- var instructions = {
1248
- type: "html-keyboard-response",
1249
- stimulus: `
1250
- <p>In this experiment, a circle will appear in the center
1251
- of the screen.</p><p>If the circle is <strong>blue</strong>,
1252
- press the letter F on the keyboard as fast as you can.</p>
1253
- <p>If the circle is <strong>orange</strong>, press the letter J
1254
- as fast as you can.</p>
1255
- <div style='width: 700px;'>
1256
- <div style='float: left;'><img src='img/blue.png'></img>
1257
- <p class='small'><strong>Press the F key</strong></p></div>
1258
- <div class='float: right;'><img src='img/orange.png'></img>
1259
- <p class='small'><strong>Press the J key</strong></p></div>
1260
- </div>
1261
- <p>Press any key to begin.</p>
1262
- `,
1263
- post_trial_gap: 2000
1264
- };
1265
- timeline.push(instructions);
1266
-
1267
- /* test trials */
1268
- var test_stimuli = [
1269
- { stimulus: "img/blue.png", correct_response: 'f'},
1270
- { stimulus: "img/orange.png", correct_response: 'j'}
1271
- ];
1272
-
1273
- var fixation = {
1274
- type: 'html-keyboard-response',
1275
- stimulus: '<div style="font-size:60px;">+</div>',
1276
- choices: jsPsych.NO_KEYS,
1277
- trial_duration: function(){
1278
- return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
1279
- },
1280
- data: {
1281
- task: 'fixation'
1282
- }
1283
- }
1284
-
1285
- var test = {
1286
- type: "image-keyboard-response",
1287
- stimulus: jsPsych.timelineVariable('stimulus'),
1288
- choices: ['f', 'j'],
1289
- data: {
1290
- task: 'response',
1291
- correct_response: jsPsych.timelineVariable('correct_response')
1292
- },
1293
- on_finish: function(data){
1294
- data.correct = jsPsych.pluginAPI.compareKeys(data.response, data.correct_response);
1295
- }
1296
- }
1297
-
1298
- var test_procedure = {
1299
- timeline: [fixation, test],
1300
- timeline_variables: test_stimuli,
1301
- repetitions: 5,
1302
- randomize_order: true
1303
- }
1304
- timeline.push(test_procedure);
1305
-
1306
- /* define debrief */
1307
-
1308
- var debrief_block = {
1309
- type: "html-keyboard-response",
1310
- stimulus: function() {
1311
-
1312
- var trials = jsPsych.data.get().filter({task: 'response'});
1313
- var correct_trials = trials.filter({correct: true});
1314
- var accuracy = Math.round(correct_trials.count() / trials.count() * 100);
1315
- var rt = Math.round(correct_trials.select('rt').mean());
1316
-
1317
- return `<p>You responded correctly on ${accuracy}% of the trials.</p>
1318
- <p>Your average response time was ${rt}ms.</p>
1319
- <p>Press any key to complete the experiment. Thank you!</p>`;
1320
-
1321
- }
1322
- };
1323
- timeline.push(debrief_block);
1324
-
1325
- /* start the experiment */
1326
- jsPsych.init({
1327
- timeline: timeline,
1328
- on_finish: function() {
1329
- jsPsych.data.displayData();
1330
- }
1331
- });
1332
- </script>
1333
- </html>
1334
- ```