jspsych 6.2.0 → 7.1.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.
Files changed (360) hide show
  1. package/README.md +43 -29
  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 -661
  59. package/docs/core_library/jspsych-data.md +0 -589
  60. package/docs/core_library/jspsych-pluginAPI.md +0 -510
  61. package/docs/core_library/jspsych-randomization.md +0 -397
  62. package/docs/core_library/jspsych-turk.md +0 -102
  63. package/docs/img/blue.png +0 -0
  64. package/docs/img/folder-setup.png +0 -0
  65. package/docs/img/folder-with-html.png +0 -0
  66. package/docs/img/githubreleases.jpg +0 -0
  67. package/docs/img/jspsych-favicon.png +0 -0
  68. package/docs/img/jspsych-logo-no-text-mono.svg +0 -493
  69. package/docs/img/jspsych-logo.jpg +0 -0
  70. package/docs/img/orange.png +0 -0
  71. package/docs/img/palmer_stim.png +0 -0
  72. package/docs/img/progress_bar.png +0 -0
  73. package/docs/img/visual_search_example.jpg +0 -0
  74. package/docs/index.md +0 -9
  75. package/docs/overview/browser-device-support.md +0 -35
  76. package/docs/overview/callbacks.md +0 -140
  77. package/docs/overview/data.md +0 -281
  78. package/docs/overview/exclude-browser.md +0 -32
  79. package/docs/overview/experiment-options.md +0 -121
  80. package/docs/overview/fullscreen.md +0 -36
  81. package/docs/overview/media-preloading.md +0 -91
  82. package/docs/overview/mturk.md +0 -77
  83. package/docs/overview/progress-bar.md +0 -110
  84. package/docs/overview/record-browser-interactions.md +0 -23
  85. package/docs/overview/running-experiments.md +0 -95
  86. package/docs/overview/timeline.md +0 -387
  87. package/docs/overview/trial.md +0 -142
  88. package/docs/plugins/creating-a-plugin.md +0 -79
  89. package/docs/plugins/jspsych-animation.md +0 -40
  90. package/docs/plugins/jspsych-audio-button-response.md +0 -60
  91. package/docs/plugins/jspsych-audio-keyboard-response.md +0 -58
  92. package/docs/plugins/jspsych-audio-slider-response.md +0 -53
  93. package/docs/plugins/jspsych-call-function.md +0 -81
  94. package/docs/plugins/jspsych-canvas-button-response.md +0 -66
  95. package/docs/plugins/jspsych-canvas-keyboard-response.md +0 -68
  96. package/docs/plugins/jspsych-canvas-slider-response.md +0 -89
  97. package/docs/plugins/jspsych-categorize-animation.md +0 -60
  98. package/docs/plugins/jspsych-categorize-html.md +0 -52
  99. package/docs/plugins/jspsych-categorize-image.md +0 -53
  100. package/docs/plugins/jspsych-cloze.md +0 -45
  101. package/docs/plugins/jspsych-external-html.md +0 -70
  102. package/docs/plugins/jspsych-free-sort.md +0 -55
  103. package/docs/plugins/jspsych-fullscreen.md +0 -57
  104. package/docs/plugins/jspsych-html-button-response.md +0 -42
  105. package/docs/plugins/jspsych-html-keyboard-response.md +0 -51
  106. package/docs/plugins/jspsych-html-slider-response.md +0 -45
  107. package/docs/plugins/jspsych-iat-html.md +0 -64
  108. package/docs/plugins/jspsych-iat-image.md +0 -64
  109. package/docs/plugins/jspsych-image-button-response.md +0 -46
  110. package/docs/plugins/jspsych-image-keyboard-response.md +0 -57
  111. package/docs/plugins/jspsych-image-slider-response.md +0 -52
  112. package/docs/plugins/jspsych-instructions.md +0 -58
  113. package/docs/plugins/jspsych-maxdiff.md +0 -42
  114. package/docs/plugins/jspsych-rdk.md +0 -119
  115. package/docs/plugins/jspsych-reconstruction.md +0 -48
  116. package/docs/plugins/jspsych-resize.md +0 -39
  117. package/docs/plugins/jspsych-same-different-html.md +0 -53
  118. package/docs/plugins/jspsych-same-different-image.md +0 -66
  119. package/docs/plugins/jspsych-serial-reaction-time-mouse.md +0 -50
  120. package/docs/plugins/jspsych-serial-reaction-time.md +0 -57
  121. package/docs/plugins/jspsych-survey-html-form.md +0 -50
  122. package/docs/plugins/jspsych-survey-likert.md +0 -70
  123. package/docs/plugins/jspsych-survey-multi-choice.md +0 -48
  124. package/docs/plugins/jspsych-survey-multi-select.md +0 -53
  125. package/docs/plugins/jspsych-survey-text.md +0 -63
  126. package/docs/plugins/jspsych-video-button-response.md +0 -52
  127. package/docs/plugins/jspsych-video-keyboard-response.md +0 -48
  128. package/docs/plugins/jspsych-video-slider-response.md +0 -58
  129. package/docs/plugins/jspsych-visual-search-circle.md +0 -52
  130. package/docs/plugins/jspsych-vsl-animate-occlusion.md +0 -55
  131. package/docs/plugins/jspsych-vsl-grid-scene.md +0 -62
  132. package/docs/plugins/overview.md +0 -111
  133. package/docs/tutorials/hello-world.md +0 -144
  134. package/docs/tutorials/rt-task.md +0 -1107
  135. package/examples/add-to-end-of-timeline.html +0 -32
  136. package/examples/conditional-and-loop-functions.html +0 -63
  137. package/examples/css/jquery-ui.css +0 -1225
  138. package/examples/data-add-properties.html +0 -40
  139. package/examples/data-as-function.html +0 -36
  140. package/examples/data-from-timeline.html +0 -45
  141. package/examples/data-from-url.html +0 -21
  142. package/examples/demo-flanker.html +0 -108
  143. package/examples/demo-simple-rt-task.html +0 -104
  144. package/examples/demos/demo_1.html +0 -29
  145. package/examples/demos/demo_2.html +0 -43
  146. package/examples/demos/demo_3.html +0 -58
  147. package/examples/display-element-to-embed-experiment.html +0 -73
  148. package/examples/end-active-node.html +0 -52
  149. package/examples/end-experiment.html +0 -43
  150. package/examples/exclusions.html +0 -32
  151. package/examples/external_html/simple_consent.html +0 -4
  152. package/examples/img/1.gif +0 -0
  153. package/examples/img/10.gif +0 -0
  154. package/examples/img/11.gif +0 -0
  155. package/examples/img/12.gif +0 -0
  156. package/examples/img/2.gif +0 -0
  157. package/examples/img/3.gif +0 -0
  158. package/examples/img/4.gif +0 -0
  159. package/examples/img/5.gif +0 -0
  160. package/examples/img/6.gif +0 -0
  161. package/examples/img/7.gif +0 -0
  162. package/examples/img/8.gif +0 -0
  163. package/examples/img/9.gif +0 -0
  164. package/examples/img/age/of1.jpg +0 -0
  165. package/examples/img/age/of2.jpg +0 -0
  166. package/examples/img/age/of3.jpg +0 -0
  167. package/examples/img/age/om1.jpg +0 -0
  168. package/examples/img/age/om2.jpg +0 -0
  169. package/examples/img/age/om3.jpg +0 -0
  170. package/examples/img/age/yf1.jpg +0 -0
  171. package/examples/img/age/yf4.jpg +0 -0
  172. package/examples/img/age/yf5.jpg +0 -0
  173. package/examples/img/age/ym2.jpg +0 -0
  174. package/examples/img/age/ym3.jpg +0 -0
  175. package/examples/img/age/ym5.jpg +0 -0
  176. package/examples/img/backwardN.gif +0 -0
  177. package/examples/img/blue.png +0 -0
  178. package/examples/img/con1.png +0 -0
  179. package/examples/img/con2.png +0 -0
  180. package/examples/img/fixation.gif +0 -0
  181. package/examples/img/happy_face_1.jpg +0 -0
  182. package/examples/img/happy_face_2.jpg +0 -0
  183. package/examples/img/happy_face_3.jpg +0 -0
  184. package/examples/img/happy_face_4.jpg +0 -0
  185. package/examples/img/inc1.png +0 -0
  186. package/examples/img/inc2.png +0 -0
  187. package/examples/img/normalN.gif +0 -0
  188. package/examples/img/orange.png +0 -0
  189. package/examples/img/redX.png +0 -0
  190. package/examples/img/ribbon.jpg +0 -0
  191. package/examples/img/sad_face_1.jpg +0 -0
  192. package/examples/img/sad_face_2.jpg +0 -0
  193. package/examples/img/sad_face_3.jpg +0 -0
  194. package/examples/img/sad_face_4.jpg +0 -0
  195. package/examples/js/snap.svg-min.js +0 -21
  196. package/examples/jspsych-RDK.html +0 -58
  197. package/examples/jspsych-animation.html +0 -33
  198. package/examples/jspsych-audio-button-response.html +0 -52
  199. package/examples/jspsych-audio-keyboard-response.html +0 -62
  200. package/examples/jspsych-audio-slider-response.html +0 -55
  201. package/examples/jspsych-call-function.html +0 -32
  202. package/examples/jspsych-canvas-button-response.html +0 -95
  203. package/examples/jspsych-canvas-keyboard-response.html +0 -78
  204. package/examples/jspsych-canvas-slider-response.html +0 -67
  205. package/examples/jspsych-categorize-animation.html +0 -46
  206. package/examples/jspsych-categorize-html.html +0 -38
  207. package/examples/jspsych-categorize-image.html +0 -38
  208. package/examples/jspsych-cloze.html +0 -42
  209. package/examples/jspsych-free-sort.html +0 -97
  210. package/examples/jspsych-fullscreen.html +0 -44
  211. package/examples/jspsych-html-button-response.html +0 -46
  212. package/examples/jspsych-html-keyboard-response.html +0 -42
  213. package/examples/jspsych-html-slider-response.html +0 -53
  214. package/examples/jspsych-iat.html +0 -510
  215. package/examples/jspsych-image-button-response.html +0 -84
  216. package/examples/jspsych-image-keyboard-response.html +0 -78
  217. package/examples/jspsych-image-slider-response.html +0 -76
  218. package/examples/jspsych-instructions.html +0 -37
  219. package/examples/jspsych-maxdiff.html +0 -33
  220. package/examples/jspsych-reconstruction.html +0 -43
  221. package/examples/jspsych-resize.html +0 -34
  222. package/examples/jspsych-same-different-html.html +0 -28
  223. package/examples/jspsych-same-different-image.html +0 -33
  224. package/examples/jspsych-serial-reaction-time-mouse.html +0 -98
  225. package/examples/jspsych-serial-reaction-time.html +0 -54
  226. package/examples/jspsych-survey-html-form.html +0 -33
  227. package/examples/jspsych-survey-likert.html +0 -42
  228. package/examples/jspsych-survey-multi-choice.html +0 -40
  229. package/examples/jspsych-survey-multi-select.html +0 -42
  230. package/examples/jspsych-survey-text.html +0 -34
  231. package/examples/jspsych-video-button-response.html +0 -57
  232. package/examples/jspsych-video-keyboard-response.html +0 -53
  233. package/examples/jspsych-video-slider-response.html +0 -55
  234. package/examples/jspsych-visual-search-circle.html +0 -58
  235. package/examples/jspsych-vsl-animate-occlusion.html +0 -29
  236. package/examples/jspsych-vsl-grid-scene.html +0 -41
  237. package/examples/lexical-decision.html +0 -132
  238. package/examples/manual-preloading.html +0 -53
  239. package/examples/pause-unpause.html +0 -33
  240. package/examples/progress-bar.html +0 -62
  241. package/examples/sound/hammer.mp3 +0 -0
  242. package/examples/sound/sound.mp3 +0 -0
  243. package/examples/sound/speech_blue.mp3 +0 -0
  244. package/examples/sound/speech_green.mp3 +0 -0
  245. package/examples/sound/speech_joke.mp3 +0 -0
  246. package/examples/sound/speech_red.mp3 +0 -0
  247. package/examples/sound/tone.mp3 +0 -0
  248. package/examples/timeline-variables-sampling.html +0 -50
  249. package/examples/timeline-variables.html +0 -55
  250. package/examples/video/sample_video.mp4 +0 -0
  251. package/jspsych.js +0 -2796
  252. package/license.txt +0 -21
  253. package/mkdocs.yml +0 -104
  254. package/plugins/jspsych-animation.js +0 -189
  255. package/plugins/jspsych-audio-button-response.js +0 -247
  256. package/plugins/jspsych-audio-keyboard-response.js +0 -204
  257. package/plugins/jspsych-audio-slider-response.js +0 -262
  258. package/plugins/jspsych-call-function.js +0 -58
  259. package/plugins/jspsych-canvas-button-response.js +0 -199
  260. package/plugins/jspsych-canvas-keyboard-response.js +0 -155
  261. package/plugins/jspsych-canvas-slider-response.js +0 -207
  262. package/plugins/jspsych-categorize-animation.js +0 -266
  263. package/plugins/jspsych-categorize-html.js +0 -220
  264. package/plugins/jspsych-categorize-image.js +0 -222
  265. package/plugins/jspsych-cloze.js +0 -112
  266. package/plugins/jspsych-external-html.js +0 -112
  267. package/plugins/jspsych-free-sort.js +0 -444
  268. package/plugins/jspsych-fullscreen.js +0 -104
  269. package/plugins/jspsych-html-button-response.js +0 -188
  270. package/plugins/jspsych-html-keyboard-response.js +0 -149
  271. package/plugins/jspsych-html-slider-response.js +0 -202
  272. package/plugins/jspsych-iat-html.js +0 -284
  273. package/plugins/jspsych-iat-image.js +0 -286
  274. package/plugins/jspsych-image-button-response.js +0 -311
  275. package/plugins/jspsych-image-keyboard-response.js +0 -247
  276. package/plugins/jspsych-image-slider-response.js +0 -353
  277. package/plugins/jspsych-instructions.js +0 -237
  278. package/plugins/jspsych-maxdiff.js +0 -174
  279. package/plugins/jspsych-rdk.js +0 -1373
  280. package/plugins/jspsych-reconstruction.js +0 -134
  281. package/plugins/jspsych-resize.js +0 -166
  282. package/plugins/jspsych-same-different-html.js +0 -168
  283. package/plugins/jspsych-same-different-image.js +0 -169
  284. package/plugins/jspsych-serial-reaction-time-mouse.js +0 -213
  285. package/plugins/jspsych-serial-reaction-time.js +0 -247
  286. package/plugins/jspsych-survey-html-form.js +0 -171
  287. package/plugins/jspsych-survey-likert.js +0 -195
  288. package/plugins/jspsych-survey-multi-choice.js +0 -208
  289. package/plugins/jspsych-survey-multi-select.js +0 -232
  290. package/plugins/jspsych-survey-text.js +0 -185
  291. package/plugins/jspsych-video-button-response.js +0 -320
  292. package/plugins/jspsych-video-keyboard-response.js +0 -279
  293. package/plugins/jspsych-video-slider-response.js +0 -351
  294. package/plugins/jspsych-visual-search-circle.js +0 -259
  295. package/plugins/jspsych-vsl-animate-occlusion.js +0 -196
  296. package/plugins/jspsych-vsl-grid-scene.js +0 -103
  297. package/plugins/template/jspsych-plugin-template.js +0 -35
  298. package/tests/README.md +0 -7
  299. package/tests/jsPsych/default-iti.test.js +0 -51
  300. package/tests/jsPsych/default-parameters.test.js +0 -58
  301. package/tests/jsPsych/endexperiment.test.js +0 -49
  302. package/tests/jsPsych/events.test.js +0 -369
  303. package/tests/jsPsych/init.test.js +0 -48
  304. package/tests/jsPsych/loads.test.js +0 -7
  305. package/tests/jsPsych/min-rt.test.js +0 -58
  306. package/tests/jsPsych/progressbar.test.js +0 -202
  307. package/tests/jsPsych/timeline-variables.test.js +0 -254
  308. package/tests/jsPsych/timelines.test.js +0 -498
  309. package/tests/jsPsych.data/datacollection.test.js +0 -116
  310. package/tests/jsPsych.data/datacolumn.test.js +0 -50
  311. package/tests/jsPsych.data/datamodule.test.js +0 -152
  312. package/tests/jsPsych.data/dataparameter.test.js +0 -251
  313. package/tests/jsPsych.data/interactions.test.js +0 -109
  314. package/tests/jsPsych.pluginAPI/pluginapi.test.js +0 -144
  315. package/tests/jsPsych.randomization/randomziation.test.js +0 -27
  316. package/tests/jsPsych.utils/utils.test.js +0 -58
  317. package/tests/media/blue.png +0 -0
  318. package/tests/media/orange.png +0 -0
  319. package/tests/media/sample_video.mp4 +0 -0
  320. package/tests/media/sound.mp3 +0 -0
  321. package/tests/plugins/plugin-animation.test.js +0 -35
  322. package/tests/plugins/plugin-audio-button-response.test.js +0 -15
  323. package/tests/plugins/plugin-audio-keyboard-response.test.js +0 -15
  324. package/tests/plugins/plugin-audio-slider-response.test.js +0 -15
  325. package/tests/plugins/plugin-call-function.test.js +0 -49
  326. package/tests/plugins/plugin-categorize-animation.test.js +0 -274
  327. package/tests/plugins/plugin-categorize-html.test.js +0 -17
  328. package/tests/plugins/plugin-categorize-image.test.js +0 -17
  329. package/tests/plugins/plugin-cloze.test.js +0 -140
  330. package/tests/plugins/plugin-free-sort.test.js +0 -112
  331. package/tests/plugins/plugin-fullscreen.test.js +0 -41
  332. package/tests/plugins/plugin-html-button-response.test.js +0 -161
  333. package/tests/plugins/plugin-html-keyboard-response.test.js +0 -139
  334. package/tests/plugins/plugin-html-slider-response.test.js +0 -155
  335. package/tests/plugins/plugin-iat-html.test.js +0 -328
  336. package/tests/plugins/plugin-iat-image.test.js +0 -308
  337. package/tests/plugins/plugin-image-button-response.test.js +0 -183
  338. package/tests/plugins/plugin-image-keyboard-response.test.js +0 -154
  339. package/tests/plugins/plugin-image-slider-response.test.js +0 -183
  340. package/tests/plugins/plugin-instructions.test.js +0 -66
  341. package/tests/plugins/plugin-maxdiff.test.js +0 -39
  342. package/tests/plugins/plugin-rdk.test.js +0 -17
  343. package/tests/plugins/plugin-reconstruction.test.js +0 -16
  344. package/tests/plugins/plugin-resize.test.js +0 -16
  345. package/tests/plugins/plugin-same-different-html.test.js +0 -17
  346. package/tests/plugins/plugin-same-different-image.test.js +0 -17
  347. package/tests/plugins/plugin-serial-reaction-time-mouse.test.js +0 -42
  348. package/tests/plugins/plugin-serial-reaction-time.test.js +0 -69
  349. package/tests/plugins/plugin-survey-html-form.test.js +0 -44
  350. package/tests/plugins/plugin-survey-likert.test.js +0 -48
  351. package/tests/plugins/plugin-survey-multi-choice.test.js +0 -48
  352. package/tests/plugins/plugin-survey-multi-select.test.js +0 -72
  353. package/tests/plugins/plugin-survey-text.test.js +0 -115
  354. package/tests/plugins/plugin-video-button-response.test.js +0 -35
  355. package/tests/plugins/plugin-video-keyboard-response.test.js +0 -35
  356. package/tests/plugins/plugin-video-slider-response.test.js +0 -34
  357. package/tests/plugins/plugin-visual-search-circle.test.js +0 -16
  358. package/tests/plugins/plugin-vsl-animate-occlusion.test.js +0 -16
  359. package/tests/plugins/plugin-vsl-grid-scene.test.js +0 -16
  360. package/tests/testing-utils.js +0 -13
package/examples/jspsych-audio-slider-response.html DELETED
@@ -1,55 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <script src="../jspsych.js"></script>
5
- <script src="../plugins/jspsych-audio-slider-response.js"></script>
6
- <script src="../plugins/jspsych-html-button-response.js"></script>
7
- <link rel="stylesheet" href="../css/jspsych.css">
8
- </head>
9
- <body></body>
10
- <script>
11
-
12
- var pre_audio = {
13
- type: 'html-button-response',
14
- stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
15
- 'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
16
- 'you want the first trial to include audio.</p></div>',
17
- choices: ['Continue']
18
- }
19
-
20
- var trial_1 = {
21
- type: 'audio-slider-response',
22
- stimulus: 'sound/speech_joke.mp3',
23
- labels: ['Not Funny', 'Funny'],
24
- slider_width: 500,
25
- prompt: '<p>How funny is the joke?</p>'
26
- }
27
-
28
- var trial_2 = {
29
- type: 'audio-slider-response',
30
- stimulus: 'sound/speech_red.mp3',
31
- labels: ['Hate it', 'It&quot;s OK', 'Love it'],
32
- slider_width: 500,
33
- prompt: '<p>How much do you like this color?</p><p>Slider movement is required, so you must interact with (click) the slider before you can continue.</p>',
34
- require_movement: true
35
- }
36
-
37
- var trial_3 = {
38
- type: 'audio-slider-response',
39
- stimulus: 'sound/hammer.mp3',
40
- labels: ['Unpleasant', 'OK', 'Very pleasant'],
41
- slider_width: 500,
42
- prompt: '<p>How pleasant was this sound?</p><p>The slider will be enabled after the audio ends.</p>',
43
- response_allowed_while_playing: false
44
- }
45
-
46
- jsPsych.init({
47
- timeline: [pre_audio, trial_1, trial_2, trial_3],
48
- on_finish: function() {
49
- jsPsych.data.displayData();
50
- },
51
- default_iti: 250
52
- });
53
- </script>
54
-
55
- </html>
package/examples/jspsych-call-function.html DELETED
@@ -1,32 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <script src="../jspsych.js"></script>
5
- <script src="../plugins/jspsych-call-function.js"></script>
6
- <link rel="stylesheet" href="../css/jspsych.css">
7
- </head>
8
- <body></body>
9
- <script>
10
-
11
- var trial = {
12
- type: 'call-function',
13
- func: function(){ return Date.now(); }
14
- };
15
-
16
- // this is to check if the plugin specific default for post_trial_gap works.
17
- // if it does, then the return values should be nearly identical.
18
- var next_trial = {
19
- type: 'call-function',
20
- func: function(){ return Date.now(); }
21
- };
22
-
23
-
24
- jsPsych.init({
25
- timeline: [trial, next_trial],
26
- on_finish: function(){ jsPsych.data.displayData(); },
27
- default_iti: 1000
28
- });
29
-
30
-
31
- </script>
32
- </html>
package/examples/jspsych-canvas-button-response.html DELETED
@@ -1,95 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <script src="../jspsych.js"></script>
5
- <script src="../plugins/jspsych-canvas-button-response.js"></script>
6
- <link rel="stylesheet" href="../css/jspsych.css">
7
- </head>
8
- <body></body>
9
- <script>
10
-
11
- // stimulus function that takes the canvas and additional parameters (radius, color)
12
- // this can be called inside of an anonymous stimulus function, which takes the canvas (c) as its only argument
13
- function filledCirc(canvas, radius, color) {
14
- var ctx = canvas.getContext("2d");
15
- ctx.beginPath();
16
- ctx.arc(250, 250, radius, 0, 2 * Math.PI);
17
- ctx.fillStyle = color;
18
- ctx.fill();
19
- }
20
-
21
- var circle_1 = {
22
- type: 'canvas-button-response',
23
- stimulus: function(c) {
24
- filledCirc(c, 100, 'blue');
25
- },
26
- choices: ['Red', 'Green', 'Blue'],
27
- prompt: '<p>What color is the circle?</p>',
28
- data: {color: 'blue', radius: 100}
29
- };
30
-
31
- var circle_2 = {
32
- type: 'canvas-button-response',
33
- stimulus: function(c) {
34
- filledCirc(c, 150, 'green');
35
- },
36
- choices: ['Larger', 'Smaller'],
37
- stimulus_duration: 1000,
38
- prompt: '<p>Is this circle larger or smaller than the last one?</p>'+
39
- '<p>Stimulus will be hidden after 1 second.</p>',
40
- data: {color: 'green', radius: 150}
41
- };
42
-
43
- // write the canvas stimulus drawing function without using a named function
44
- // the anonymous function must take the canvas as an argument
45
- var lines = {
46
- type: 'canvas-button-response',
47
- stimulus: function(c) {
48
- var ctx = c.getContext("2d");
49
- // first line
50
- ctx.beginPath();
51
- ctx.moveTo(300, 10);
52
- ctx.lineTo(300, 300);
53
- ctx.lineWidth = 10;
54
- ctx.strokeStyle = 'MediumBlue';
55
- ctx.stroke();
56
- // second line
57
- ctx.beginPath();
58
- ctx.moveTo(20, 200);
59
- ctx.lineTo(100, 350);
60
- ctx.lineWidth = 10;
61
- ctx.strokeStyle = 'MediumPurple';
62
- ctx.stroke();
63
- },
64
- choices: ['Blue line', 'Purple line'],
65
- prompt: '<p>Which line is longer?</p>',
66
- data: {line1_color: 'blue', line1_length: 290, line2_color: "purple", line2_length: 170}
67
- };
68
-
69
- // to use the canvas stimulus function with timeline variables,
70
- // use the jsPsych.timelineVariable() function inside your stimulus function with the second 'true' argument
71
- var circle_procedure = {
72
- timeline: [{
73
- type: 'canvas-button-response',
74
- stimulus: function(c) {
75
- filledCirc(c, jsPsych.timelineVariable('radius', true), jsPsych.timelineVariable('color', true));
76
- },
77
- choices: ['Red', 'Green', 'Blue'],
78
- prompt: '<p>What color is the circle?</p>',
79
- data: {radius: jsPsych.timelineVariable('radius'), color: jsPsych.timelineVariable('color')}
80
- }],
81
- timeline_variables: [
82
- {radius: 100, color: 'red'},
83
- {radius: 200, color: 'green'},
84
- {radius: 50, color: 'blue'}
85
- ]
86
- };
87
-
88
- jsPsych.init({
89
- timeline: [circle_1, circle_2, lines, circle_procedure],
90
- on_finish: function () {
91
- jsPsych.data.displayData();
92
- }
93
- });
94
- </script>
95
- </html>
package/examples/jspsych-canvas-keyboard-response.html DELETED
@@ -1,78 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <script src="../jspsych.js"></script>
5
- <script src="../plugins/jspsych-canvas-keyboard-response.js"></script>
6
- <link rel="stylesheet" href="../css/jspsych.css">
7
- </head>
8
- <body></body>
9
- <script>
10
-
11
- // stimulus functions that take the canvas as its only argument
12
- // these function names can be used as the value for the stimulus parameter
13
- function drawRect(c){
14
- var ctx = c.getContext('2d');
15
- ctx.beginPath();
16
- ctx.rect(150, 225, 200, 50);
17
- ctx.stroke();
18
- }
19
-
20
- function drawCirc(c) {
21
- var ctx = c.getContext('2d');
22
- ctx.beginPath();
23
- ctx.arc(250, 250, 200, 0, 2 * Math.PI);
24
- ctx.stroke();
25
- }
26
-
27
- var trial_1 = {
28
- type: 'canvas-keyboard-response',
29
- stimulus: drawRect,
30
- choices: ['e','i'],
31
- prompt: '<p>Is this a circle or a rectangle? Press "e" for circle and "i" for rectangle.</p>',
32
- data: {shape: 'rectangle'}
33
- };
34
-
35
- var trial_2 = {
36
- type: 'canvas-keyboard-response',
37
- stimulus: drawCirc,
38
- choices: ['e','i'],
39
- prompt: '<p>Is this a circle or a rectangle? Press "e" for circle and "i" for rectangle.</p>',
40
- data: {shape: 'circle'}
41
- }
42
-
43
- // to use the canvas stimulus function with timeline variables,
44
- // use the jsPsych.timelineVariable() function inside your stimulus function with the second 'true' argument
45
- var trial_procedure = {
46
- timeline: [{
47
- type: 'canvas-keyboard-response',
48
- stimulus: function(c) {
49
- var ctx = c.getContext('2d');
50
- ctx.beginPath();
51
- ctx.fillStyle = jsPsych.timelineVariable('color', true);
52
- ctx.fillRect(
53
- jsPsych.timelineVariable('upper_left_x', true),
54
- jsPsych.timelineVariable('upper_left_y', true),
55
- jsPsych.timelineVariable('width', true),
56
- jsPsych.timelineVariable('height', true)
57
- );
58
- ctx.stroke();
59
- },
60
- choices: ['r','b'],
61
- prompt: '<p>What color is the rectangle? Press "r" for red and "b" for blue.</p>',
62
- data: {color: jsPsych.timelineVariable('color')}
63
- }],
64
- timeline_variables: [
65
- {upper_left_x: 150, upper_left_y: 100, height: 100, width: 150, color: 'red'},
66
- {upper_left_x: 270, upper_left_y: 200, height: 300, width: 200, color: 'blue'},
67
- {upper_left_x: 150, upper_left_y: 130, height: 200, width: 50, color: 'blue'}
68
- ]
69
- };
70
-
71
- jsPsych.init({
72
- timeline: [trial_1, trial_2, trial_procedure],
73
- on_finish: function () {
74
- jsPsych.data.displayData();
75
- }
76
- });
77
- </script>
78
- </html>
package/examples/jspsych-canvas-slider-response.html DELETED
@@ -1,67 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <script src="../jspsych.js"></script>
5
- <script src="../plugins/jspsych-canvas-slider-response.js"></script>
6
- <link rel="stylesheet" href="../css/jspsych.css">
7
- </head>
8
- <body></body>
9
- <script>
10
-
11
- var colors;
12
-
13
- // stimulus function that takes the canvas as its only argument
14
- // this function name can be used as the value for the stimulus parameter
15
- function twoSquares(c) {
16
- var ctx = c.getContext('2d');
17
- ctx.fillStyle = '#FF3333';
18
- ctx.fillRect(200, 70, 40, 40);
19
- ctx.fillStyle = '#FF6A33';
20
- ctx.fillRect(260, 70, 40, 40);
21
- }
22
-
23
- var trial_1 = {
24
- type: 'canvas-slider-response',
25
- stimulus: twoSquares,
26
- labels: ['0','10'],
27
- canvas_size: [200, 500],
28
- prompt: '<p>How different would you say the colors of these two squares are on a scale from 0 (the same) to 10 (completely different)?</p>',
29
- data: {color1: '#FF3333', color2: '#FF6A33'}
30
- }
31
-
32
- // stimulus function that takes the canvas and additional parameters
33
- // this can be called inside of an anonymous stimulus function, which takes the canvas as its only argument
34
- function twoSquaresColors(c, colors) {
35
- var ctx = c.getContext('2d');
36
- ctx.fillStyle = colors[0];
37
- ctx.fillRect(200, 70, 40, 40);
38
- ctx.fillStyle = colors[1];
39
- ctx.fillRect(260, 70, 40, 40);
40
- }
41
-
42
- var trial_2 = {
43
- type: 'canvas-slider-response',
44
- stimulus: function(c) {
45
- colors = ['darkred', 'cyan'];
46
- twoSquaresColors(c, colors);
47
- },
48
- labels: ['Exactly<br>the same','Totally<br>different'],
49
- canvas_size: [200, 500],
50
- require_movement: true,
51
- stimulus_duration: 1000,
52
- prompt: '<p>How different would you say the colors of these two squares are on a scale from 0 (the same) to 10 (completely different)?</p>'+
53
- '<p>Interaction with the slider is required to continue. Stimulus will be hidden after 1 second.</p>',
54
- on_finish: function(data) {
55
- data.color1 = colors[0];
56
- data.color2 = colors[1];
57
- }
58
- };
59
-
60
- jsPsych.init({
61
- timeline: [trial_1, trial_2],
62
- on_finish: function () {
63
- jsPsych.data.displayData();
64
- }
65
- });
66
- </script>
67
- </html>
package/examples/jspsych-categorize-animation.html DELETED
@@ -1,46 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
5
- <script src="../jspsych.js"></script>
6
- <script src="../plugins/jspsych-categorize-animation.js"></script>
7
- <link rel="stylesheet" href="../css/jspsych.css">
8
- <style>
9
- img {
10
- width: 300px;
11
- }
12
- #jspsych-categorize-animation-stimulus {
13
- width: 300px;
14
- height: 225px;
15
- }
16
- </style>
17
- </head>
18
- <body></body>
19
- <script>
20
-
21
- // If render_on_canvas is false, the images will be shown via an <img> rather than <canvas> element.
22
- // In some browsers, the first time the images are shown, the <img> method (render_on_canvas: false) will produce a brief
23
- // blank screen (white flash) between images.
24
- var trials = {
25
- type: 'categorize-animation',
26
- stimuli: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'],
27
- key_answer: 68,
28
- choices: [68, 83],
29
- text_answer: 'different',
30
- feedback_duration: 1000,
31
- correct_text: "<p>Correct. The faces had %ANS% expressions.</p>",
32
- incorrect_text: "<p>Incorrect. The faces had %ANS% expressions.</p>",
33
- prompt: "<p>Press D if the faces had different emotional expressions. Press S if the faces had the same emotional expression.</p>",
34
- //render_on_canvas: false
35
- };
36
-
37
- jsPsych.init({
38
- timeline: [trials],
39
- on_finish: function() {
40
- jsPsych.data.displayData();
41
- }
42
- });
43
-
44
- </script>
45
-
46
- </html>
package/examples/jspsych-categorize-html.html DELETED
@@ -1,38 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
5
- <script src="../jspsych.js"></script>
6
- <script src="../plugins/jspsych-categorize-html.js"></script>
7
- <link rel="stylesheet" href="../css/jspsych.css">
8
- <style>
9
- img {
10
- width: 300px;
11
- }
12
- </style>
13
- </head>
14
- <body></body>
15
- <script>
16
- var trial = {
17
- type: 'categorize-html',
18
- stimulus: '<div style="margin: auto; width: 200px; height: 200px; background-color: blue;"></div>',
19
- key_answer: 66,
20
- choices: [66, 80],
21
- text_answer: 'blue',
22
- correct_text: "<p>Correct. This color is %ANS%.</p>",
23
- incorrect_text: "<p>Incorrect. This color is %ANS%. Please press the correct key to continue.</p>",
24
- prompt: "<p>Press B if the square is blue. Press P if the square is purple.</p>",
25
- trial_duration: 1500,
26
- show_feedback_on_timeout: false,
27
- force_correct_button_press: true
28
- };
29
-
30
- jsPsych.init({
31
- timeline: [trial],
32
- on_finish: function() {
33
- jsPsych.data.displayData();
34
- }
35
- });
36
- </script>
37
-
38
- </html>
package/examples/jspsych-categorize-image.html DELETED
@@ -1,38 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
5
- <script src="../jspsych.js"></script>
6
- <script src="../plugins/jspsych-categorize-image.js"></script>
7
- <link rel="stylesheet" href="../css/jspsych.css">
8
- <style>
9
- img {
10
- width: 300px;
11
- }
12
- </style>
13
- </head>
14
- <body></body>
15
- <script>
16
- var trials = {
17
- type: 'categorize-image',
18
- stimulus: 'img/happy_face_1.jpg',
19
- key_answer: 72,
20
- choices: [72, 83],
21
- text_answer: 'happy',
22
- correct_text: "<p>Correct. This face is %ANS%.</p>",
23
- incorrect_text: "<p>Incorrect. This face is %ANS%. Please press the correct key to continue.</p>",
24
- prompt: "<p>Press H if the face is happy. Press S if the face is sad.</p>",
25
- trial_duration: 1500,
26
- show_feedback_on_timeout: false,
27
- force_correct_button_press: true
28
- };
29
-
30
- jsPsych.init({
31
- timeline: [trials],
32
- on_finish: function() {
33
- jsPsych.data.displayData();
34
- }
35
- });
36
- </script>
37
-
38
- </html>
package/examples/jspsych-cloze.html DELETED
@@ -1,42 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
5
- <script src="../jspsych.js"></script>
6
- <script src="../plugins/jspsych-cloze.js"></script>
7
- <link rel="stylesheet" href="../css/jspsych.css">
8
- <style>
9
- img {
10
- width: 300px;
11
- }
12
- </style>
13
- </head>
14
-
15
- <body></body>
16
- <script>
17
-
18
- var timeline = [];
19
-
20
- // simple example using default settings (no check against correct solution, no custom button text)
21
- timeline.push({
22
- type: 'cloze',
23
- text: 'The %% is the largest terrestrial mammal. It lives in both %% and %%.'
24
- });
25
-
26
- // more elaborate example (with check against correct solution, custom error handling and modified button text)
27
- timeline.push({
28
- type: 'cloze',
29
- text: 'A rectangle has % 4 % corners and a triangle has % 3 %.',
30
- check_answers: true,
31
- button_text: 'Next',
32
- mistake_fn: function () { alert("Wrong answer. Please check again.") }
33
- });
34
-
35
- jsPsych.init({
36
- timeline: timeline,
37
- on_finish: function () { jsPsych.data.displayData(); }
38
- });
39
-
40
- </script>
41
-
42
- </html>
package/examples/jspsych-free-sort.html DELETED
@@ -1,97 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <script src="../jspsych.js"></script>
5
- <script src="../plugins/jspsych-free-sort.js"></script>
6
- <script src="../plugins/jspsych-canvas-keyboard-response.js"></script>
7
- <link rel="stylesheet" href="../css/jspsych.css">
8
- </head>
9
- <body></body>
10
- <script>
11
-
12
- var trial_1 = {
13
- type: 'free-sort',
14
- stimuli: ['img/happy_face_1.jpg','img/happy_face_3.jpg','img/sad_face_2.jpg','img/sad_face_4.jpg'],
15
- stim_height: 150,
16
- stim_width: 200,
17
- prompt: 'Please group similar expressions together. '
18
- };
19
-
20
- var trial_2 = {
21
- type: 'free-sort',
22
- stimuli: ['img/happy_face_1.jpg','img/happy_face_3.jpg','img/sad_face_2.jpg','img/sad_face_4.jpg'],
23
- stim_height: 120,
24
- stim_width: 160,
25
- prompt: '<p>Arrange the faces.</p>',
26
- prompt_location: "below",
27
- sort_area_height: 500,
28
- sort_area_width: 600,
29
- sort_area_shape: "square",
30
- scale_factor: 1.2,
31
- border_color_in: '#DCDCDC',
32
- border_color_out: 'red'
33
- };
34
-
35
- var trial_3 = {
36
- type: 'canvas-keyboard-response',
37
- stimulus: function(c) {
38
- c.style.border = "5px solid #A9A9A9";
39
- // present images on a canvas at specific locations
40
- var ctx = c.getContext('2d');
41
- var img1 = new Image();
42
- var img2 = new Image();
43
- var img3 = new Image();
44
- img1.src = 'img/1.gif';
45
- img2.src = 'img/2.gif';
46
- img3.src = 'img/3.gif';
47
- img1.addEventListener('load', function() {
48
- ctx.drawImage(img1, 0, 0, 90, 90);
49
- }, false);
50
- img2.addEventListener('load', function() {
51
- ctx.drawImage(img2, 500, 600, 90, 90);
52
- }, false);
53
- img3.addEventListener('load', function() {
54
- ctx.drawImage(img3, 300, 100, 90, 90);
55
- }, false);
56
- },
57
- canvas_size: [700,700],
58
- prompt: "Memorize the image locations (5s).",
59
- choices: jsPsych.NO_KEYS,
60
- trial_duration: 5000
61
- };
62
-
63
- var trial_4 = {
64
- type: 'free-sort',
65
- stimuli: ['img/1.gif','img/2.gif','img/3.gif'],
66
- stim_height: 90,
67
- stim_width: 90,
68
- scale_factor: 1.0,
69
- prompt: '<p>Where were the images?</p>',
70
- prompt_location: 'below',
71
- sort_area_shape: "square",
72
- change_border_background_color: false,
73
- border_width: 5,
74
- counter_text_unfinished: "Not done yet...",
75
- counter_text_finished: "Done!"
76
- };
77
-
78
- var trial_5 = {
79
- type: 'free-sort',
80
- stimuli: ['img/4.gif','img/5.gif','img/6.gif'],
81
- prompt: '<p>Arrange the images.</p><p>Images start at random locations inside the sort area.</p>',
82
- change_border_background_color: false,
83
- border_width: 3,
84
- counter_text_unfinished: "",
85
- counter_text_finished: "",
86
- stim_starts_inside: true,
87
- sort_area_shape: "square"
88
- };
89
-
90
- jsPsych.init({
91
- timeline: [trial_1, trial_2, trial_3, trial_4, trial_5],
92
- on_finish: function(){jsPsych.data.displayData();}
93
- });
94
-
95
-
96
- </script>
97
- </html>
package/examples/jspsych-fullscreen.html DELETED
@@ -1,44 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
5
-
6
- <script src="../jspsych.js"></script>
7
- <script src="../plugins/jspsych-fullscreen.js"></script>
8
- <script src="../plugins/jspsych-image-keyboard-response.js"></script>
9
- <link rel="stylesheet" href="../css/jspsych.css">
10
- <style>
11
- img {
12
- width: 300px;
13
- }
14
- </style>
15
- </head>
16
- <body></body>
17
- <script>
18
- var fullscreen_trial = {
19
- type: 'fullscreen',
20
- fullscreen_mode: true
21
- }
22
-
23
- var trial_1 = {
24
- type: 'image-keyboard-response',
25
- stimulus: 'img/happy_face_1.jpg',
26
- choices: [89, 78], // Y or N
27
- prompt: '<p>Have you seen this face before? Y or N.</p>'
28
- }
29
-
30
- var fullscreen_trial_exit = {
31
- type: 'fullscreen',
32
- fullscreen_mode: false
33
- }
34
-
35
-
36
- jsPsych.init({
37
- timeline: [ fullscreen_trial, trial_1, fullscreen_trial_exit ],
38
- on_finish: function() {
39
- jsPsych.data.displayData();
40
- }
41
- });
42
- </script>
43
-
44
- </html>
package/examples/jspsych-html-button-response.html DELETED
@@ -1,46 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <script src="../jspsych.js"></script>
5
- <script src="../plugins/jspsych-html-button-response.js"></script>
6
- <link rel="stylesheet" href="../css/jspsych.css">
7
- <style>
8
- img { width: 300px; }
9
- </style>
10
- </head>
11
- <body></body>
12
- <script>
13
-
14
- var timeline = [];
15
-
16
- timeline.push({
17
- type: 'html-button-response',
18
- stimulus: '<p style="color: red; font-size: 48px; font-weight: bold;">GREEN</p>',
19
- choices: ['Green', 'Blue', 'Red'],
20
- prompt: "<p>What color is this word?</p>"
21
- });
22
-
23
- timeline.push({
24
- type: 'html-button-response',
25
- stimulus: '<p style="color: green; font-size: 48px; font-weight: bold;">GREEN</p>',
26
- choices: ['Green', 'Blue', 'Red'],
27
- stimulus_duration: 1000,
28
- prompt: "<p>What color is this word? (word disappears after 1s)</p>"
29
- });
30
-
31
- timeline.push({
32
- type: 'html-button-response',
33
- stimulus: '<p style="color: blue; font-size: 48px; font-weight: bold;">RED</p>',
34
- choices: ['Green', 'Blue', 'Red'],
35
- trial_duration: 2000,
36
- response_ends_trial: false,
37
- prompt: "<p>What color is this word? (trial ends after 2s)</p>"
38
- });
39
-
40
- jsPsych.init({
41
- timeline: timeline,
42
- on_finish: function(){jsPsych.data.displayData();}
43
- });
44
-
45
- </script>
46
- </html>