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.
- package/README.md +36 -37
- package/css/jspsych.css +39 -39
- package/dist/JsPsych.d.ts +112 -0
- package/dist/TimelineNode.d.ts +34 -0
- package/dist/index.browser.js +3164 -0
- package/dist/index.browser.js.map +1 -0
- package/dist/index.browser.min.js +2 -0
- package/dist/index.browser.min.js.map +1 -0
- package/dist/index.cjs +3158 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +11 -0
- package/dist/index.js +3152 -0
- package/dist/index.js.map +1 -0
- package/dist/migration.d.ts +3 -0
- package/dist/modules/data/DataCollection.d.ts +45 -0
- package/dist/modules/data/DataColumn.d.ts +15 -0
- package/dist/modules/data/index.d.ts +25 -0
- package/dist/modules/data/utils.d.ts +3 -0
- package/dist/modules/extensions.d.ts +22 -0
- package/dist/modules/plugin-api/HardwareAPI.d.ts +15 -0
- package/dist/modules/plugin-api/KeyboardListenerAPI.d.ts +34 -0
- package/dist/modules/plugin-api/MediaAPI.d.ts +27 -0
- package/dist/modules/plugin-api/SimulationAPI.d.ts +41 -0
- package/dist/modules/plugin-api/TimeoutAPI.d.ts +5 -0
- package/dist/modules/plugin-api/index.d.ts +8 -0
- package/dist/modules/plugins.d.ts +129 -0
- package/dist/modules/randomization.d.ts +35 -0
- package/dist/modules/turk.d.ts +40 -0
- package/dist/modules/utils.d.ts +7 -0
- package/package.json +32 -15
- package/src/JsPsych.ts +884 -0
- package/src/TimelineNode.ts +536 -0
- package/src/index.ts +71 -0
- package/src/migration.ts +37 -0
- package/src/modules/data/DataCollection.ts +198 -0
- package/src/modules/data/DataColumn.ts +86 -0
- package/src/modules/data/index.ts +174 -0
- package/src/modules/data/utils.ts +75 -0
- package/src/modules/extensions.ts +23 -0
- package/src/modules/plugin-api/HardwareAPI.ts +32 -0
- package/src/modules/plugin-api/KeyboardListenerAPI.ts +165 -0
- package/src/modules/plugin-api/MediaAPI.ts +337 -0
- package/src/modules/plugin-api/SimulationAPI.ts +181 -0
- package/src/modules/plugin-api/TimeoutAPI.ts +16 -0
- package/src/modules/plugin-api/index.ts +28 -0
- package/src/modules/plugins.ts +158 -0
- package/src/modules/randomization.ts +327 -0
- package/src/modules/turk.ts +99 -0
- package/src/modules/utils.ts +30 -0
- package/.github/workflows/jest.yml +0 -20
- package/code-of-conduct.md +0 -56
- package/contributors.md +0 -61
- package/docs/CNAME +0 -1
- package/docs/about/about.md +0 -18
- package/docs/about/contributing.md +0 -43
- package/docs/about/license.md +0 -25
- package/docs/about/support.md +0 -7
- package/docs/core_library/jspsych-core.md +0 -734
- package/docs/core_library/jspsych-data.md +0 -589
- package/docs/core_library/jspsych-pluginAPI.md +0 -610
- package/docs/core_library/jspsych-randomization.md +0 -397
- package/docs/core_library/jspsych-turk.md +0 -102
- package/docs/extensions/extensions.md +0 -83
- package/docs/extensions/jspsych-ext-webgazer.md +0 -106
- package/docs/img/blue.png +0 -0
- package/docs/img/devtools-change-css.png +0 -0
- package/docs/img/devtools-css-errors.png +0 -0
- package/docs/img/devtools-inspect-element.png +0 -0
- package/docs/img/folder-setup.png +0 -0
- package/docs/img/folder-with-html.png +0 -0
- package/docs/img/githubreleases.jpg +0 -0
- package/docs/img/jspsych-favicon.png +0 -0
- package/docs/img/jspsych-logo-no-text-mono.svg +0 -493
- package/docs/img/jspsych-logo.jpg +0 -0
- package/docs/img/orange.png +0 -0
- package/docs/img/palmer_stim.png +0 -0
- package/docs/img/progress_bar.png +0 -0
- package/docs/img/prolific-study-completion.png +0 -0
- package/docs/img/prolific-study-link.png +0 -0
- package/docs/img/visual_search_example.jpg +0 -0
- package/docs/index.md +0 -9
- package/docs/overview/browser-device-support.md +0 -35
- package/docs/overview/callbacks.md +0 -184
- package/docs/overview/data.md +0 -281
- package/docs/overview/dynamic-parameters.md +0 -147
- package/docs/overview/exclude-browser.md +0 -32
- package/docs/overview/experiment-options.md +0 -149
- package/docs/overview/eye-tracking.md +0 -237
- package/docs/overview/fullscreen.md +0 -36
- package/docs/overview/media-preloading.md +0 -369
- package/docs/overview/mturk.md +0 -77
- package/docs/overview/plugins.md +0 -320
- package/docs/overview/progress-bar.md +0 -110
- package/docs/overview/prolific.md +0 -78
- package/docs/overview/record-browser-interactions.md +0 -23
- package/docs/overview/running-experiments.md +0 -95
- package/docs/overview/style.md +0 -293
- package/docs/overview/timeline.md +0 -457
- package/docs/plugins/jspsych-animation.md +0 -40
- package/docs/plugins/jspsych-audio-button-response.md +0 -60
- package/docs/plugins/jspsych-audio-keyboard-response.md +0 -58
- package/docs/plugins/jspsych-audio-slider-response.md +0 -53
- package/docs/plugins/jspsych-call-function.md +0 -81
- package/docs/plugins/jspsych-canvas-button-response.md +0 -66
- package/docs/plugins/jspsych-canvas-keyboard-response.md +0 -68
- package/docs/plugins/jspsych-canvas-slider-response.md +0 -89
- package/docs/plugins/jspsych-categorize-animation.md +0 -60
- package/docs/plugins/jspsych-categorize-html.md +0 -53
- package/docs/plugins/jspsych-categorize-image.md +0 -53
- package/docs/plugins/jspsych-cloze.md +0 -45
- package/docs/plugins/jspsych-external-html.md +0 -70
- package/docs/plugins/jspsych-free-sort.md +0 -56
- package/docs/plugins/jspsych-fullscreen.md +0 -57
- package/docs/plugins/jspsych-html-button-response.md +0 -42
- package/docs/plugins/jspsych-html-keyboard-response.md +0 -51
- package/docs/plugins/jspsych-html-slider-response.md +0 -45
- package/docs/plugins/jspsych-iat-html.md +0 -64
- package/docs/plugins/jspsych-iat-image.md +0 -64
- package/docs/plugins/jspsych-image-button-response.md +0 -48
- package/docs/plugins/jspsych-image-keyboard-response.md +0 -58
- package/docs/plugins/jspsych-image-slider-response.md +0 -54
- package/docs/plugins/jspsych-instructions.md +0 -58
- package/docs/plugins/jspsych-maxdiff.md +0 -41
- package/docs/plugins/jspsych-preload.md +0 -128
- package/docs/plugins/jspsych-rdk.md +0 -119
- package/docs/plugins/jspsych-reconstruction.md +0 -48
- package/docs/plugins/jspsych-resize.md +0 -39
- package/docs/plugins/jspsych-same-different-html.md +0 -53
- package/docs/plugins/jspsych-same-different-image.md +0 -66
- package/docs/plugins/jspsych-serial-reaction-time-mouse.md +0 -52
- package/docs/plugins/jspsych-serial-reaction-time.md +0 -57
- package/docs/plugins/jspsych-survey-html-form.md +0 -50
- package/docs/plugins/jspsych-survey-likert.md +0 -70
- package/docs/plugins/jspsych-survey-multi-choice.md +0 -48
- package/docs/plugins/jspsych-survey-multi-select.md +0 -53
- package/docs/plugins/jspsych-survey-text.md +0 -63
- package/docs/plugins/jspsych-video-button-response.md +0 -54
- package/docs/plugins/jspsych-video-keyboard-response.md +0 -50
- package/docs/plugins/jspsych-video-slider-response.md +0 -60
- package/docs/plugins/jspsych-virtual-chinrest.md +0 -105
- package/docs/plugins/jspsych-visual-search-circle.md +0 -52
- package/docs/plugins/jspsych-vsl-animate-occlusion.md +0 -55
- package/docs/plugins/jspsych-vsl-grid-scene.md +0 -62
- package/docs/plugins/jspsych-webgazer-calibrate.md +0 -60
- package/docs/plugins/jspsych-webgazer-init-camera.md +0 -31
- package/docs/plugins/jspsych-webgazer-validate.md +0 -43
- package/docs/plugins/list-of-plugins.md +0 -54
- package/docs/tutorials/hello-world.md +0 -162
- package/docs/tutorials/rt-task.md +0 -1334
- package/docs/tutorials/video-tutorials.md +0 -11
- package/examples/add-to-end-of-timeline.html +0 -38
- package/examples/case-sensitive-responses.html +0 -45
- package/examples/conditional-and-loop-functions.html +0 -64
- package/examples/css/jquery-ui.css +0 -1225
- package/examples/css-classes-parameter.html +0 -145
- package/examples/data-add-properties.html +0 -44
- package/examples/data-as-function.html +0 -39
- package/examples/data-from-timeline.html +0 -52
- package/examples/data-from-url.html +0 -21
- package/examples/demo-flanker.html +0 -117
- package/examples/demo-simple-rt-task.html +0 -120
- package/examples/demos/demo_1.html +0 -35
- package/examples/demos/demo_2.html +0 -50
- package/examples/demos/demo_3.html +0 -63
- package/examples/display-element-to-embed-experiment.html +0 -79
- package/examples/end-active-node.html +0 -52
- package/examples/end-experiment.html +0 -45
- package/examples/exclusions.html +0 -32
- package/examples/external_html/simple_consent.html +0 -4
- package/examples/img/1.gif +0 -0
- package/examples/img/10.gif +0 -0
- package/examples/img/11.gif +0 -0
- package/examples/img/12.gif +0 -0
- package/examples/img/2.gif +0 -0
- package/examples/img/3.gif +0 -0
- package/examples/img/4.gif +0 -0
- package/examples/img/5.gif +0 -0
- package/examples/img/6.gif +0 -0
- package/examples/img/7.gif +0 -0
- package/examples/img/8.gif +0 -0
- package/examples/img/9.gif +0 -0
- package/examples/img/age/of1.jpg +0 -0
- package/examples/img/age/of2.jpg +0 -0
- package/examples/img/age/of3.jpg +0 -0
- package/examples/img/age/om1.jpg +0 -0
- package/examples/img/age/om2.jpg +0 -0
- package/examples/img/age/om3.jpg +0 -0
- package/examples/img/age/yf1.jpg +0 -0
- package/examples/img/age/yf4.jpg +0 -0
- package/examples/img/age/yf5.jpg +0 -0
- package/examples/img/age/ym2.jpg +0 -0
- package/examples/img/age/ym3.jpg +0 -0
- package/examples/img/age/ym5.jpg +0 -0
- package/examples/img/backwardN.gif +0 -0
- package/examples/img/blue.png +0 -0
- package/examples/img/card.png +0 -0
- package/examples/img/con1.png +0 -0
- package/examples/img/con2.png +0 -0
- package/examples/img/fixation.gif +0 -0
- package/examples/img/happy_face_1.jpg +0 -0
- package/examples/img/happy_face_2.jpg +0 -0
- package/examples/img/happy_face_3.jpg +0 -0
- package/examples/img/happy_face_4.jpg +0 -0
- package/examples/img/inc1.png +0 -0
- package/examples/img/inc2.png +0 -0
- package/examples/img/normalN.gif +0 -0
- package/examples/img/orange.png +0 -0
- package/examples/img/redX.png +0 -0
- package/examples/img/ribbon.jpg +0 -0
- package/examples/img/sad_face_1.jpg +0 -0
- package/examples/img/sad_face_2.jpg +0 -0
- package/examples/img/sad_face_3.jpg +0 -0
- package/examples/img/sad_face_4.jpg +0 -0
- package/examples/js/snap.svg-min.js +0 -21
- package/examples/js/webgazer.js +0 -88886
- package/examples/jspsych-RDK.html +0 -58
- package/examples/jspsych-animation.html +0 -39
- package/examples/jspsych-audio-button-response.html +0 -58
- package/examples/jspsych-audio-keyboard-response.html +0 -68
- package/examples/jspsych-audio-slider-response.html +0 -61
- package/examples/jspsych-call-function.html +0 -32
- package/examples/jspsych-canvas-button-response.html +0 -95
- package/examples/jspsych-canvas-keyboard-response.html +0 -78
- package/examples/jspsych-canvas-slider-response.html +0 -67
- package/examples/jspsych-categorize-animation.html +0 -49
- package/examples/jspsych-categorize-html.html +0 -33
- package/examples/jspsych-categorize-image.html +0 -44
- package/examples/jspsych-cloze.html +0 -37
- package/examples/jspsych-free-sort.html +0 -109
- package/examples/jspsych-fullscreen.html +0 -45
- package/examples/jspsych-html-button-response.html +0 -43
- package/examples/jspsych-html-keyboard-response.html +0 -42
- package/examples/jspsych-html-slider-response.html +0 -53
- package/examples/jspsych-iat.html +0 -520
- package/examples/jspsych-image-button-response.html +0 -91
- package/examples/jspsych-image-keyboard-response.html +0 -85
- package/examples/jspsych-image-slider-response.html +0 -85
- package/examples/jspsych-instructions.html +0 -37
- package/examples/jspsych-maxdiff.html +0 -33
- package/examples/jspsych-preload.html +0 -140
- package/examples/jspsych-reconstruction.html +0 -43
- package/examples/jspsych-resize.html +0 -34
- package/examples/jspsych-same-different-html.html +0 -28
- package/examples/jspsych-same-different-image.html +0 -39
- package/examples/jspsych-serial-reaction-time-mouse.html +0 -98
- package/examples/jspsych-serial-reaction-time.html +0 -54
- package/examples/jspsych-survey-html-form.html +0 -33
- package/examples/jspsych-survey-likert.html +0 -42
- package/examples/jspsych-survey-multi-choice.html +0 -40
- package/examples/jspsych-survey-multi-select.html +0 -42
- package/examples/jspsych-survey-text.html +0 -34
- package/examples/jspsych-video-button-response.html +0 -65
- package/examples/jspsych-video-keyboard-response.html +0 -61
- package/examples/jspsych-video-slider-response.html +0 -63
- package/examples/jspsych-virtual-chinrest.html +0 -69
- package/examples/jspsych-visual-search-circle.html +0 -64
- package/examples/jspsych-vsl-animate-occlusion.html +0 -35
- package/examples/jspsych-vsl-grid-scene.html +0 -47
- package/examples/lexical-decision.html +0 -134
- package/examples/manual-preloading.html +0 -59
- package/examples/pause-unpause.html +0 -33
- package/examples/progress-bar.html +0 -68
- package/examples/save-trial-parameters.html +0 -98
- package/examples/sound/hammer.mp3 +0 -0
- package/examples/sound/sound.mp3 +0 -0
- package/examples/sound/speech_blue.mp3 +0 -0
- package/examples/sound/speech_green.mp3 +0 -0
- package/examples/sound/speech_joke.mp3 +0 -0
- package/examples/sound/speech_red.mp3 +0 -0
- package/examples/sound/tone.mp3 +0 -0
- package/examples/timeline-variables-sampling.html +0 -50
- package/examples/timeline-variables.html +0 -64
- package/examples/video/sample_video.mp4 +0 -0
- package/examples/webgazer.html +0 -162
- package/examples/webgazer_image.html +0 -60
- package/extensions/jspsych-ext-webgazer.js +0 -185
- package/jspsych.js +0 -3015
- package/license.txt +0 -21
- package/mkdocs.yml +0 -118
- package/plugins/jspsych-animation.js +0 -189
- package/plugins/jspsych-audio-button-response.js +0 -269
- package/plugins/jspsych-audio-keyboard-response.js +0 -212
- package/plugins/jspsych-audio-slider-response.js +0 -278
- package/plugins/jspsych-call-function.js +0 -58
- package/plugins/jspsych-canvas-button-response.js +0 -199
- package/plugins/jspsych-canvas-keyboard-response.js +0 -155
- package/plugins/jspsych-canvas-slider-response.js +0 -207
- package/plugins/jspsych-categorize-animation.js +0 -266
- package/plugins/jspsych-categorize-html.js +0 -220
- package/plugins/jspsych-categorize-image.js +0 -222
- package/plugins/jspsych-cloze.js +0 -112
- package/plugins/jspsych-external-html.js +0 -112
- package/plugins/jspsych-free-sort.js +0 -478
- package/plugins/jspsych-fullscreen.js +0 -106
- package/plugins/jspsych-html-button-response.js +0 -188
- package/plugins/jspsych-html-keyboard-response.js +0 -149
- package/plugins/jspsych-html-slider-response.js +0 -202
- package/plugins/jspsych-iat-html.js +0 -284
- package/plugins/jspsych-iat-image.js +0 -286
- package/plugins/jspsych-image-button-response.js +0 -327
- package/plugins/jspsych-image-keyboard-response.js +0 -263
- package/plugins/jspsych-image-slider-response.js +0 -369
- package/plugins/jspsych-instructions.js +0 -237
- package/plugins/jspsych-maxdiff.js +0 -173
- package/plugins/jspsych-preload.js +0 -345
- package/plugins/jspsych-rdk.js +0 -1373
- package/plugins/jspsych-reconstruction.js +0 -134
- package/plugins/jspsych-resize.js +0 -166
- package/plugins/jspsych-same-different-html.js +0 -168
- package/plugins/jspsych-same-different-image.js +0 -169
- package/plugins/jspsych-serial-reaction-time-mouse.js +0 -212
- package/plugins/jspsych-serial-reaction-time.js +0 -247
- package/plugins/jspsych-survey-html-form.js +0 -171
- package/plugins/jspsych-survey-likert.js +0 -195
- package/plugins/jspsych-survey-multi-choice.js +0 -208
- package/plugins/jspsych-survey-multi-select.js +0 -232
- package/plugins/jspsych-survey-text.js +0 -185
- package/plugins/jspsych-video-button-response.js +0 -335
- package/plugins/jspsych-video-keyboard-response.js +0 -279
- package/plugins/jspsych-video-slider-response.js +0 -351
- package/plugins/jspsych-virtual-chinrest.js +0 -471
- package/plugins/jspsych-visual-search-circle.js +0 -259
- package/plugins/jspsych-vsl-animate-occlusion.js +0 -196
- package/plugins/jspsych-vsl-grid-scene.js +0 -103
- package/plugins/jspsych-webgazer-calibrate.js +0 -166
- package/plugins/jspsych-webgazer-init-camera.js +0 -95
- package/plugins/jspsych-webgazer-validate.js +0 -304
- package/plugins/template/jspsych-plugin-template.js +0 -35
- package/tests/README.md +0 -7
- package/tests/jsPsych/case-sensitive-responses.test.js +0 -53
- package/tests/jsPsych/css-classes-parameter.test.js +0 -107
- package/tests/jsPsych/default-iti.test.js +0 -51
- package/tests/jsPsych/default-parameters.test.js +0 -58
- package/tests/jsPsych/endexperiment.test.js +0 -49
- package/tests/jsPsych/events.test.js +0 -606
- package/tests/jsPsych/functions-as-parameters.test.js +0 -210
- package/tests/jsPsych/init.test.js +0 -48
- package/tests/jsPsych/loads.test.js +0 -7
- package/tests/jsPsych/min-rt.test.js +0 -58
- package/tests/jsPsych/progressbar.test.js +0 -202
- package/tests/jsPsych/timeline-variables.test.js +0 -531
- package/tests/jsPsych/timelines.test.js +0 -569
- package/tests/jsPsych.data/data-csv-conversion.test.js +0 -85
- package/tests/jsPsych.data/data-json-conversion.test.js +0 -120
- package/tests/jsPsych.data/datacollection.test.js +0 -117
- package/tests/jsPsych.data/datacolumn.test.js +0 -50
- package/tests/jsPsych.data/datamodule.test.js +0 -152
- package/tests/jsPsych.data/dataparameter.test.js +0 -251
- package/tests/jsPsych.data/interactions.test.js +0 -109
- package/tests/jsPsych.data/trialparameters.test.js +0 -175
- package/tests/jsPsych.extensions/extensions.test.js +0 -207
- package/tests/jsPsych.extensions/test-extension.js +0 -42
- package/tests/jsPsych.pluginAPI/pluginapi.test.js +0 -341
- package/tests/jsPsych.pluginAPI/preloads.test.js +0 -43
- package/tests/jsPsych.randomization/randomziation.test.js +0 -27
- package/tests/jsPsych.utils/utils.test.js +0 -58
- package/tests/plugins/plugin-animation.test.js +0 -34
- package/tests/plugins/plugin-audio-button-response.test.js +0 -15
- package/tests/plugins/plugin-audio-keyboard-response.test.js +0 -15
- package/tests/plugins/plugin-audio-slider-response.test.js +0 -15
- package/tests/plugins/plugin-call-function.test.js +0 -49
- package/tests/plugins/plugin-categorize-animation.test.js +0 -263
- package/tests/plugins/plugin-categorize-html.test.js +0 -17
- package/tests/plugins/plugin-categorize-image.test.js +0 -17
- package/tests/plugins/plugin-cloze.test.js +0 -157
- package/tests/plugins/plugin-free-sort.test.js +0 -106
- package/tests/plugins/plugin-fullscreen.test.js +0 -41
- package/tests/plugins/plugin-html-button-response.test.js +0 -161
- package/tests/plugins/plugin-html-keyboard-response.test.js +0 -139
- package/tests/plugins/plugin-html-slider-response.test.js +0 -155
- package/tests/plugins/plugin-iat-html.test.js +0 -299
- package/tests/plugins/plugin-iat-image.test.js +0 -298
- package/tests/plugins/plugin-image-button-response.test.js +0 -174
- package/tests/plugins/plugin-image-keyboard-response.test.js +0 -147
- package/tests/plugins/plugin-image-slider-response.test.js +0 -174
- package/tests/plugins/plugin-instructions.test.js +0 -85
- package/tests/plugins/plugin-maxdiff.test.js +0 -39
- package/tests/plugins/plugin-preload.test.js +0 -916
- package/tests/plugins/plugin-rdk.test.js +0 -61
- package/tests/plugins/plugin-reconstruction.test.js +0 -16
- package/tests/plugins/plugin-resize.test.js +0 -16
- package/tests/plugins/plugin-same-different-html.test.js +0 -17
- package/tests/plugins/plugin-same-different-image.test.js +0 -17
- package/tests/plugins/plugin-serial-reaction-time-mouse.test.js +0 -42
- package/tests/plugins/plugin-serial-reaction-time.test.js +0 -109
- package/tests/plugins/plugin-survey-html-form.test.js +0 -44
- package/tests/plugins/plugin-survey-likert.test.js +0 -48
- package/tests/plugins/plugin-survey-multi-choice.test.js +0 -47
- package/tests/plugins/plugin-survey-multi-select.test.js +0 -71
- package/tests/plugins/plugin-survey-text.test.js +0 -115
- package/tests/plugins/plugin-video-button-response.test.js +0 -32
- package/tests/plugins/plugin-video-keyboard-response.test.js +0 -32
- package/tests/plugins/plugin-video-slider-response.test.js +0 -31
- package/tests/plugins/plugin-visual-search-circle.test.js +0 -16
- package/tests/plugins/plugin-vsl-animate-occlusion.test.js +0 -16
- package/tests/plugins/plugin-vsl-grid-scene.test.js +0 -16
- package/tests/testing-utils.js +0 -13
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
# jspsych-virtual-chinrest
|
|
2
|
-
|
|
3
|
-
This plugin provides a "virtual chinrest" that can measure the distance between the participant and the screen. It can also standardize the jsPsych page content to a known physical dimension (e.g., ensuring that a 200px wide stimulus is 2.2cm wide on the participant's monitor). This is based on the work of [Li, Joo, Yeatman, and Reinecke (2020)](https://doi.org/10.1038/s41598-019-57204-1), and the plugin code is a modified version of [their implementation](https://github.com/QishengLi/virtual_chinrest). We recommend citing their work in any paper that makes use of this plugin.
|
|
4
|
-
|
|
5
|
-
!!! note "Citation"
|
|
6
|
-
Li, Q., Joo, S. J., Yeatman, J. D., & Reinecke, K. (2020). Controlling for Participants’ Viewing Distance in Large-Scale, Psychophysical Online Experiments Using a Virtual Chinrest. _Scientific Reports, 10_(1), 1-11. doi: [10.1038/s41598-019-57204-1](https://doi.org/10.1038/s41598-019-57204-1)
|
|
7
|
-
|
|
8
|
-
The plugin works in two phases.
|
|
9
|
-
|
|
10
|
-
**Phase 1**. To calculate the pixel-to-cm conversion rate for a participant’s display, participants are asked to place a credit card or other item of the same size on the screen and resize an image until it is the same size as the credit card. Since we know the physical dimensions of the card, we can find the conversion rate for the participant's display.
|
|
11
|
-
|
|
12
|
-
**Phase 2**. To measure the participant's viewing distance from their screen we use a [blind spot](<https://en.wikipedia.org/wiki/Blind_spot_(vision)>) task. Participants are asked to focus on a black square on the screen with their right eye closed, while a red dot repeatedly sweeps from right to left. They press the spacebar on their keyboard whenever they perceive that the red dot has disappeared. This part allows the plugin to use the distance between the black square and the red dot when it disappears from eyesight to estimate how far the participant is from the monitor. This estimation assumes that the blind spot is located at 13.5° temporally.
|
|
13
|
-
|
|
14
|
-
## Dependency
|
|
15
|
-
|
|
16
|
-
This plugin requires the SVG.js library, available at [https://svgjs.com](https://svgjs.com/docs/3.0/). You must include the library in the `<head>` section of your experiment page.
|
|
17
|
-
|
|
18
|
-
## Parameters
|
|
19
|
-
|
|
20
|
-
Parameters can be left unspecified if the default value is acceptable.
|
|
21
|
-
|
|
22
|
-
| Parameter | Type | Default Value | Descripton |
|
|
23
|
-
| ----------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
24
|
-
| resize_units | string | "none" | Units to resize the jsPsych content to after the trial is over: `"none"` `"cm"` `"inch"` or `"deg"`. If `"none"`, no resizing will be done to the jsPsych content after the virtual-chinrest trial ends. |
|
|
25
|
-
| pixels_per_unit | numeric | 100 | After the scaling factor is applied, this many pixels will equal one unit of measurement, where the units are indicated by `resize_units`. This is only used when resizing is done after the trial ends (i.e. the `resize_units` parameter is not "none"). |
|
|
26
|
-
| adjustment_prompt | HTML string | "Click and drag the lower right corner of the image until it is the same size as a credit card held up to the screen. You can use any card that is the same size as a credit card, like a membership card or driver's license. If you do not have access to a real card you can use a ruler to measure the image width to 3.37 inches or 85.6 mm." | This string can contain HTML markup. Any content here will be displayed **below the card stimulus** during the resizing phase. |
|
|
27
|
-
| adjustment_button_prompt | HTML string | "Click here when the image is the correct size" | Content of the button displayed below the card stimulus during the resizing phase. |
|
|
28
|
-
| item_path | string | "img/card.png" | Path of the item to be presented in the card stimulus during the resizing phase. _The default image is available in `/examples/img/card.png`_ |
|
|
29
|
-
| item_height_mm | numeric | 53.98 | The known height of the physical item (e.g. credit card) to be measured, in mm. |
|
|
30
|
-
| item_width_mm | numeric | 85.6 | The known width of the physical item (e.g. credit card) to be measured, in mm. |
|
|
31
|
-
| item_init_size | numeric | 250 | The initial size of the card stimulus, in pixels, along its largest dimension. |
|
|
32
|
-
| blindspot_reps | numeric | 5 | How many times to measure the blindspot location. If `0`, blindspot will not be detected, and viewing distance and degree data will not be computed. |
|
|
33
|
-
| blindspot_prompt | HTML string | "Now we will quickly measure how far away you are sitting. Put your left hand on the space bar. Cover your right eye with your right hand. Using your left eye, focus on the black square. Keep your focus on the black square. The red ball will disappear as it moves from right to left. Press the space bar as soon as the ball disappears. Press the space bar when you are ready to begin. | This string can contain HTML markup. Any content here will be displayed **above the blindspot task**. | |
|
|
34
|
-
| redo_measurement_button_label | HTML string | 'No, that is not close. Try again' | Text for the button on the viewing distance report page to re-do the viewing distance estimate. If the participant click this button, the blindspot task starts again. |
|
|
35
|
-
| blindspot_done_prompt | HTML string | "Yes" | Text for the button on the viewing distance report page that can be clicked to accept the viewing distance estimate. |
|
|
36
|
-
| blindspot_measurements_prompt | HTML string | 'Remaining measurements: ' | Text accompanying the remaining measurements counter that appears below the blindspot task. |
|
|
37
|
-
| viewing_distance_report | HTML string | "Based on your responses, you are sitting about `<span id='distance-estimate' style='font-weight: bold;'></span>` from the screen. Does that seem about right?" | Estimated viewing distance data displayed after blindspot task. If `"none"` is given, viewing distance will not be reported to the participant. The HTML `span` element with `id = distance-estimate` returns the distance. |
|
|
38
|
-
|
|
39
|
-
## Data Generated
|
|
40
|
-
|
|
41
|
-
In addition to the [default data collected by all plugins](overview#datacollectedbyplugins), this plugin collects the following data for each trial.
|
|
42
|
-
|
|
43
|
-
_Note: The deg data are **only** returned if viewing distance is estimated with the blindspot method (px2deg, win_height_deg, win_width_deg, item_width_deg)._
|
|
44
|
-
|
|
45
|
-
| Name | Type | Value |
|
|
46
|
-
| --------------- | ------- | -------------------------------------------------------------------------- |
|
|
47
|
-
| rt | numeric | The response time in milliseconds. |
|
|
48
|
-
| item_height_mm | numeric | The height in millimeters of the item to be measured. |
|
|
49
|
-
| item_width_mm | numeric | The width in millimeters of the item to be measured |
|
|
50
|
-
| item_height_deg | numeric | Final height of the resizable div container, in degrees. |
|
|
51
|
-
| item_width_deg | numeric | Final width of the resizable div container, in degrees. |
|
|
52
|
-
| item_width_px | numeric | Final width of the resizable div container, in pixels. |
|
|
53
|
-
| px2deg | numeric | Pixels to degrees conversion factor. |
|
|
54
|
-
| px2mm | numeric | Pixels to millimeters conversion factor. |
|
|
55
|
-
| scale_factor | numeric | Scaling factor that will be applied to the div containing jsPsych content. |
|
|
56
|
-
| win_width_deg | numeric | The interior width of the window in degrees. |
|
|
57
|
-
| win_height_deg | numeric | The interior height of the window in degrees. |
|
|
58
|
-
| view_dist_mm | numeric | Estimated distance to the screen in millimeters. |
|
|
59
|
-
|
|
60
|
-
## Example
|
|
61
|
-
|
|
62
|
-
```javascript
|
|
63
|
-
// two blindspot measurements
|
|
64
|
-
// measure px2mm, viewing distance and px2deg
|
|
65
|
-
// do not resize the jsPsych content after this trial
|
|
66
|
-
// note: pixels_per_unit will be ignored since there is no resizing (resize_units: "none")
|
|
67
|
-
let no_resize = {
|
|
68
|
-
type: "virtual-chinrest",
|
|
69
|
-
blindspot_reps: 3,
|
|
70
|
-
resize_units: "none",
|
|
71
|
-
pixels_per_unit: 50,
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
// no blindspot task
|
|
75
|
-
// resize to cm (50 pixels per unit)
|
|
76
|
-
// measure px2mm, but not viewing distance and px2deg (because blindspot_reps is 0)
|
|
77
|
-
// note: you may still choose to estimate viewing distance even if resizing to cm or inches
|
|
78
|
-
let cm_resize = {
|
|
79
|
-
type: "virtual-chinrest",
|
|
80
|
-
blindspot_reps: 0,
|
|
81
|
-
resize_units: "cm",
|
|
82
|
-
pixels_per_unit: 50,
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
// three blindspot measurements
|
|
86
|
-
// measure px2mm, viewing distance and px2deg
|
|
87
|
-
// resize to degrees of visual angle (50 pixels per unit)
|
|
88
|
-
// don't report viewing distance to subject
|
|
89
|
-
let deg_resize = {
|
|
90
|
-
type: "virtual-chinrest",
|
|
91
|
-
blindspot_reps: 3,
|
|
92
|
-
resize_units: "deg",
|
|
93
|
-
pixels_per_unit: 50,
|
|
94
|
-
viewing_distance_report: "none",
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
// resizing to degrees with no blindspot measurment is not possible
|
|
98
|
-
// this trial will throw an error
|
|
99
|
-
let error_trial = {
|
|
100
|
-
type: "virtual-chinrest",
|
|
101
|
-
blindspot_reps: 0,
|
|
102
|
-
resize_units: "deg",
|
|
103
|
-
pixels_per_unit: 50,
|
|
104
|
-
};
|
|
105
|
-
```
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
# jspsych-visual-search-circle plugin
|
|
2
|
-
|
|
3
|
-
This plugin presents a customizable visual-search task modelled after [Wang, Cavanagh, & Green (1994)](http://dx.doi.org/10.3758/BF03206946). The subject indicates whether or not a target is present among a set of distractors. The stimuli are displayed in a circle, evenly-spaced, equidistant from a fixation point. Here is an example using normal and backward Ns:
|
|
4
|
-
|
|
5
|
-

|
|
6
|
-
|
|
7
|
-
## Parameters
|
|
8
|
-
|
|
9
|
-
In addition to the [parameters available in all plugins](/overview/plugins#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable.
|
|
10
|
-
|
|
11
|
-
| Parameter | Type | Default Value | Description |
|
|
12
|
-
| ------------------ | --------------- | ------------- | ---------------------------------------- |
|
|
13
|
-
| target_present | boolean | *undefined* | Is the target present? |
|
|
14
|
-
| set_size | numeric | *undefined* | How many items should be displayed? |
|
|
15
|
-
| target | string | *undefined* | Path to image file that is the search target. |
|
|
16
|
-
| foil | string or array | *undefined* | Path to image file that is the foil/distractor. Can specify an array of distractors if the distractors are all different images. |
|
|
17
|
-
| fixation_image | string | *undefined* | Path to image file that is a fixation target. |
|
|
18
|
-
| target_size | array | `[50, 50]` | Two element array indicating the height and width of the search array element images. |
|
|
19
|
-
| fixation_size | array | `[16, 16]` | Two element array indicating the height and width of the fixation image. |
|
|
20
|
-
| circle_diameter | numeric | 250 | The diameter of the search array circle in pixels. |
|
|
21
|
-
| target_present_key | string | 'j' | The key to press if the target is present in the search array. |
|
|
22
|
-
| target_absent_key | string | 'f' | The key to press if the target is not present in the search array. |
|
|
23
|
-
| trial_duration | numeric | null | The maximum amount of time the subject is allowed to search before the trial will continue. A value of null will allow the subject to search indefinitely. |
|
|
24
|
-
| fixation_duration | numeric | 1000 | How long to show the fixation image for before the search array (in milliseconds). |
|
|
25
|
-
|
|
26
|
-
## Data Generated
|
|
27
|
-
|
|
28
|
-
In addition to the [default data collected by all plugins](/overview/plugins#data-collected-by-all-plugins), this plugin collects the following data for each trial.
|
|
29
|
-
|
|
30
|
-
| Name | Type | Value |
|
|
31
|
-
| -------------- | ----------- | ---------------------------------------- |
|
|
32
|
-
| correct | boolean | True if the subject gave the correct response. |
|
|
33
|
-
| response | string | Indicates which key the subject pressed. |
|
|
34
|
-
| rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the stimulus first appears on the screen until the subject's response. |
|
|
35
|
-
| set_size | numeric | The number of items in the search array |
|
|
36
|
-
| target_present | boolean | True if the target is present in the search array |
|
|
37
|
-
| locations | array | Array where each element is the pixel value of the center of an image in the search array. If the target is present, then the first element will represent the location of the target. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. |
|
|
38
|
-
|
|
39
|
-
## Example
|
|
40
|
-
|
|
41
|
-
#### Search for the backward N
|
|
42
|
-
|
|
43
|
-
```javascript
|
|
44
|
-
var trial_1 = {
|
|
45
|
-
type: 'visual-search-circle',
|
|
46
|
-
target: 'img/backwardN.gif',
|
|
47
|
-
foil: 'img/normalN.gif',
|
|
48
|
-
fixation_image: 'img/fixation.gif',
|
|
49
|
-
target_present: true,
|
|
50
|
-
set_size: 4
|
|
51
|
-
}
|
|
52
|
-
```
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
# jspsych-vsl-animate-occlusion plugin
|
|
2
|
-
|
|
3
|
-
The VSL (visual statistical learning) animate occlusion plugin displays an animated sequence of shapes that disappear behind an occluding rectangle while they change from one shape to another. This plugin can be used to replicate the experiments described in:
|
|
4
|
-
|
|
5
|
-
Fiser, J., & Aslin, R. N. (2002). Statistical learning of higher-order temporal structure from visual shape sequences. *Journal of Experimental Psychology: Learning, Memory, and Cognition, 28*(3), 458.
|
|
6
|
-
|
|
7
|
-
## Dependency
|
|
8
|
-
|
|
9
|
-
This plugin requires the Snap.svg library, available at [http://www.snapsvg.io](http://www.snapsvg.io). You must include the library in the `<head>` section of your experiment page.
|
|
10
|
-
|
|
11
|
-
## Parameters
|
|
12
|
-
|
|
13
|
-
In addition to the [parameters available in all plugins](/overview/plugins#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable.
|
|
14
|
-
|
|
15
|
-
| Parameter | Type | Default Value | Description |
|
|
16
|
-
| --------------------- | ---------------- | ------------------ | ---------------------------------------- |
|
|
17
|
-
| stimuli | array | *undefined* | Each element of the array is a stimulus. A stimulus is a path to an image file. The order of stimuli in the array determines the order of the animation sequence. |
|
|
18
|
-
| canvas_size | array | `[400, 400]` | Array specifying the width and height of the area that the animation will display in. Stimuli will move to the edges of this area, so increasing the width without increasing the `timing_cycle` parameter will speed up the images. |
|
|
19
|
-
| image_size | array | `[100, 100]` | Array specifying the width and height of the images to show. The occluding rectangle will have a width equal to the width of image_size. |
|
|
20
|
-
| initial_direction | string | "left" | Which direction the stimulus should move first (subsequent directions will alternate). Choices are "left" or "right". |
|
|
21
|
-
| occlude_center | boolean | true | If true, display a rectangle in the center of the screen that is just wide enough to occlude the image completely as it passes behind. |
|
|
22
|
-
| choices | array of strings | `jsPsych.ALL_KEYS` | This array contains the key(s) that the subject is allowed to press in order to respond to the stimulus. Keys should be specified as characters (e.g., `'a'`, `'q'`, `' '`, `'Enter'`, `'ArrowDown'`) - see [this page](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) and [this page (event.key column)](https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/) for more examples. Any key presses that are not listed in the array will be ignored. The default value of `jsPsych.ALL_KEYS` means that all keys will be accepted as valid responses. Specifying `jsPsych.NO_KEYS` will mean that no responses are allowed. |
|
|
23
|
-
| cycle_duration | numeric | 1000 | How long it takes for a stimulus in the sequence to make a complete cycle (move to the edge and back to the center) in milliseconds. |
|
|
24
|
-
| pre_movement_duration | numeric | 500 | How long to wait before the stimuli starts moving from behind the center rectangle. |
|
|
25
|
-
|
|
26
|
-
## Data Generated
|
|
27
|
-
|
|
28
|
-
In addition to the [default data collected by all plugins](/overview/plugins#data-collected-by-all-plugins), this plugin collects the following data for each trial.
|
|
29
|
-
|
|
30
|
-
| Name | Type | Value |
|
|
31
|
-
| --------- | ----------- | ---------------------------------------- |
|
|
32
|
-
| stimulus | array | Array where each element is a stimulus from the sequence, in the order that they were shown. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. |
|
|
33
|
-
| response | array | Array containing all response information. Each element in the array is an object representing each valid response. Each response item has three properties: `key` the key that was pressed, `stimulus` the index of the stimulus that was displayed when the response was made, and `rt` the response time measured since the start of the sequence. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. |
|
|
34
|
-
|
|
35
|
-
## Examples
|
|
36
|
-
|
|
37
|
-
#### Displaying a simple sequence.
|
|
38
|
-
|
|
39
|
-
```javascript
|
|
40
|
-
var trial = {
|
|
41
|
-
type: 'vsl-animate-occlusion',
|
|
42
|
-
stimuli: [
|
|
43
|
-
"img/1.gif",
|
|
44
|
-
"img/2.gif",
|
|
45
|
-
"img/3.gif",
|
|
46
|
-
"img/4.gif",
|
|
47
|
-
"img/5.gif",
|
|
48
|
-
"img/6.gif",
|
|
49
|
-
"img/7.gif",
|
|
50
|
-
"img/8.gif",
|
|
51
|
-
"img/9.gif",
|
|
52
|
-
"img/10.gif"
|
|
53
|
-
]
|
|
54
|
-
}
|
|
55
|
-
```
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
# jspsych-vsl-grid-scene plugin
|
|
2
|
-
|
|
3
|
-
The VSL (visual statistical learning) grid scene plugin displays images arranged in a grid. This plugin can be used to replicate the experiments described in:
|
|
4
|
-
|
|
5
|
-
Fiser, J., & Aslin, R. N. (2001). Unsupervised statistical learning of higher-order spatial structures from visual scenes. *Psychological Science, 12*(6), 499-504.
|
|
6
|
-
|
|
7
|
-
## Parameters
|
|
8
|
-
|
|
9
|
-
In addition to the [parameters available in all plugins](/overview/plugins#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable.
|
|
10
|
-
|
|
11
|
-
| Parameter | Type | Default Value | Description |
|
|
12
|
-
| -------------- | ------- | ------------- | ---------------------------------------- |
|
|
13
|
-
| stimuli | array | *undefined* | An array that defines a grid. Grids should be declared as two dimensional arrays in `[row][col]` order, with paths to image files in the locations where images are displayed, and 0 in blank spaces. See example below. |
|
|
14
|
-
| image_size | array | `[100, 100]` | Array specifying the width and height of the images to show. Grid cells will also be this size, with 10% padding. |
|
|
15
|
-
| trial_duration | numeric | 2000 | How long to show the stimulus for in milliseconds. |
|
|
16
|
-
|
|
17
|
-
## Data Generated
|
|
18
|
-
|
|
19
|
-
In addition to the [default data collected by all plugins](/overview/plugins#data-collected-by-all-plugins), this plugin collects the following data for each trial.
|
|
20
|
-
|
|
21
|
-
| Name | Type | Value |
|
|
22
|
-
| -------- | ----------- | ---------------------------------------- |
|
|
23
|
-
| stimulus | array | Two dimensional array representing the stimulus shown on the trial. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. |
|
|
24
|
-
|
|
25
|
-
### Stimulus Creation Method
|
|
26
|
-
|
|
27
|
-
The plugin also includes a public method for generating the grid scene stimuli that the plugin uses. You can use this method to create HTML strings that produce the stimuli, and then incorporate the stimuli in other plugins. To use this method, include the plugin script on the page and then call the method like this:
|
|
28
|
-
|
|
29
|
-
```javascript
|
|
30
|
-
|
|
31
|
-
var pattern = [
|
|
32
|
-
["img/1.gif", "img/2.gif", 0],
|
|
33
|
-
[ 0, "img/3.gif", 0],
|
|
34
|
-
["img/5.gif", "img/4.gif", 0]
|
|
35
|
-
];
|
|
36
|
-
|
|
37
|
-
var image_size = 100; // pixels
|
|
38
|
-
|
|
39
|
-
var grid_stimulus = jsPsych.plugins['vsl-grid-scene'].generate_stimulus(pattern, image_size);
|
|
40
|
-
|
|
41
|
-
// grid_stimulus will now contain a string (NOT an HTML DOM object) that you can
|
|
42
|
-
// pass into other plugins that accept HTML stimuli as input, such as jspsych-html-keyboard-response.
|
|
43
|
-
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
## Example
|
|
47
|
-
|
|
48
|
-
#### Basic example
|
|
49
|
-
|
|
50
|
-
```javascript
|
|
51
|
-
var scene = [
|
|
52
|
-
["img/1.gif", "img/2.gif", 0],
|
|
53
|
-
[ 0, "img/3.gif", 0],
|
|
54
|
-
["img/5.gif", "img/4.gif", 0]
|
|
55
|
-
]
|
|
56
|
-
|
|
57
|
-
var trial = {
|
|
58
|
-
type: 'vsl-grid-scene',
|
|
59
|
-
stimuli: scene
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
```
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
# jspsych-webgazer-calibrate
|
|
2
|
-
|
|
3
|
-
This plugin can be used to calibrate the [WebGazer extension](/extensions/jspsych-ext-webgazer). For a narrative description of eye tracking with jsPsych, see the [eye tracking overview](/overview/eye-tracking).
|
|
4
|
-
|
|
5
|
-
## Parameters
|
|
6
|
-
|
|
7
|
-
In addition to the [parameters available in all plugins](/overview/plugins#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable.
|
|
8
|
-
|
|
9
|
-
Parameter | Type | Default Value | Description
|
|
10
|
-
----------|------|---------------|------------
|
|
11
|
-
calibration_points | array | `[[10,10], [10,50], [10,90], [50,10], [50,50], [50,90], [90,10], [90,50], [90,90]]` | Array of points in `[x,y]` coordinates. Specified as a percentage of the screen width and height, from the left and top edge. The default grid is 9 points.
|
|
12
|
-
calibration_mode | string | `'click'` | Can specify `click` to have subjects click on calibration points or `view` to have subjects passively watch calibration points.
|
|
13
|
-
repetitions_per_point | numeric | 1 | The number of times to repeat the sequence of calibration points.
|
|
14
|
-
randomize_calibration_order | bool | `false` | Whether to randomize the order of the calibration points.
|
|
15
|
-
time_to_saccade | numeric | 1000 | If `calibration_mode` is set to `view`, then this is the delay before calibrating after showing a point. Gives the participant time to fixate on the new target before assuming that the participant is looking at the target.
|
|
16
|
-
time_per_point | numeric | 1000 | If `calibration_mode` is set to `view`, then this is the length of time to show a point while calibrating. Note that if `click` calibration is used then the point will remain on the screen until clicked.
|
|
17
|
-
|
|
18
|
-
## Data Generated
|
|
19
|
-
|
|
20
|
-
In addition to the [default data collected by all plugins](/overview/plugins#data-collected-by-all-plugins), this plugin collects the following data for each trial.
|
|
21
|
-
|
|
22
|
-
Name | Type | Value
|
|
23
|
-
-----|------|------
|
|
24
|
-
|
|
25
|
-
No data currently added by this plugin. Use the [webgazer-validate](/plugins/jspsych-webgazer-validate) plugin to measure the precision and accuracy of calibration.
|
|
26
|
-
|
|
27
|
-
## Example
|
|
28
|
-
|
|
29
|
-
#### Click-based calibration with 5 points
|
|
30
|
-
|
|
31
|
-
```javascript
|
|
32
|
-
var calibration = {
|
|
33
|
-
type: 'webgazer-calibrate',
|
|
34
|
-
calibration_points: [[50,50], [25,25], [25,75], [75,25], [75,75]],
|
|
35
|
-
repetitions_per_point: 2,
|
|
36
|
-
randomize_calibration_order: true
|
|
37
|
-
}
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
### View-based calibration with 33 points, concentrated in the center
|
|
41
|
-
|
|
42
|
-
```javascript
|
|
43
|
-
var calibration = {
|
|
44
|
-
type: 'webgazer-calibrate',
|
|
45
|
-
calibration_points: [
|
|
46
|
-
[10,10],[10,50],[10,90],
|
|
47
|
-
[30,10],[30,50],[30,90],
|
|
48
|
-
[40,10],[40,30],[40,40],[40,45],[40,50],[40,55],[40,60],[40,70],[40,90],
|
|
49
|
-
[50,10],[50,30],[50,40],[50,45],[50,50],[50,55],[50,60],[50,70],[50,90],
|
|
50
|
-
[60,10],[60,30],[60,40],[60,45],[60,50],[60,55],[60,60],[60,70],[60,90],
|
|
51
|
-
[70,10],[70,50],[70,90],
|
|
52
|
-
[90,10],[90,50],[90,90]
|
|
53
|
-
],
|
|
54
|
-
repetitions_per_point: 1,
|
|
55
|
-
randomize_calibration_order: true,
|
|
56
|
-
calibration_mode: 'view',
|
|
57
|
-
time_per_point: 500,
|
|
58
|
-
time_to_saccade: 1000
|
|
59
|
-
}
|
|
60
|
-
```
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
# jspsych-webgazer-init-camera
|
|
2
|
-
|
|
3
|
-
This plugin initializes the camera and helps the participant center their face in the camera view for using the the [WebGazer extension](/extensions/jspsych-ext-webgazer). For a narrative description of eye tracking with jsPsych, see the [eye tracking overview](/overview/eye-tracking).
|
|
4
|
-
|
|
5
|
-
## Parameters
|
|
6
|
-
|
|
7
|
-
In addition to the [parameters available in all plugins](/overview/plugins#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable.
|
|
8
|
-
|
|
9
|
-
Parameter | Type | Default Value | Description
|
|
10
|
-
----------|------|---------------|------------
|
|
11
|
-
instructions | string | too long to put here | Instructions for the participant to follow.
|
|
12
|
-
button_text | string | Continue | The text for the button that participants click to end the trial.
|
|
13
|
-
|
|
14
|
-
## Data Generated
|
|
15
|
-
|
|
16
|
-
In addition to the [default data collected by all plugins](/overview/plugins#data-collected-by-all-plugins), this plugin collects the following data for each trial.
|
|
17
|
-
|
|
18
|
-
Name | Type | Value
|
|
19
|
-
-----|------|------
|
|
20
|
-
|
|
21
|
-
No additional data collected.
|
|
22
|
-
|
|
23
|
-
## Example
|
|
24
|
-
|
|
25
|
-
#### Parameterless use
|
|
26
|
-
|
|
27
|
-
```javascript
|
|
28
|
-
var init_camera = {
|
|
29
|
-
type: 'webgazer-init-camera'
|
|
30
|
-
}
|
|
31
|
-
```
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
# jspsych-webgazer-calibrate
|
|
2
|
-
|
|
3
|
-
This plugin can be used to measure the accuracy and precision of gaze predictions made by the [WebGazer extension](/extensions/jspsych-ext-webgazer). For a narrative description of eye tracking with jsPsych, see the [eye tracking overview](/overview/eye-tracking).
|
|
4
|
-
|
|
5
|
-
## Parameters
|
|
6
|
-
|
|
7
|
-
In addition to the [parameters available in all plugins](/overview/plugins#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable.
|
|
8
|
-
|
|
9
|
-
Parameter | Type | Default Value | Description
|
|
10
|
-
----------|------|---------------|------------
|
|
11
|
-
validation_points | array | `[[10,10], [10,50], [10,90], [50,10], [50,50], [50,90], [90,10], [90,50], [90,90]]` | Array of points in `[x,y]` coordinates. The default grid is 9 points. Meaning of coordinates controlled by `validation_point_coordinates` parameter.
|
|
12
|
-
validation_point_coordinates | string | `'percent'` | Can specify `percent` to have validation point coordinates specified in percentage of screen width and height, or `center-offset-pixels` to specify each point as the distance in pixels from the center of the screen.
|
|
13
|
-
roi_radius | numeric | 200 | Tolerance around the validation point in pixels when calculating the percent of gaze measurements within the acceptable range.
|
|
14
|
-
repetitions_per_point | numeric | 1 | The number of times to repeat the sequence of calibration points.
|
|
15
|
-
randomize_validation_order | bool | `false` | Whether to randomize the order of the validation points.
|
|
16
|
-
time_to_saccade | numeric | 1000 | The delay before validating after showing a point. Gives the participant time to fixate on the new target before assuming that the participant is looking at the target.
|
|
17
|
-
validation_duration | numeric | 2000 | If `calibration_mode` is set to `view`, then this is the length of time to show a point while calibrating. Note that if `click` calibration is used then the point will remain on the screen until clicked.
|
|
18
|
-
point_size | numeric | 10 | Diameter of the validation points in pixels.
|
|
19
|
-
show_validation_data | bool | false | If `true` then a visualization of the validation data will be shown on the screen after the validation is complete. This will show each measured gaze location color coded by whether it is within the `roi_radius` of the target point. This is mainly intended for testing and debugging.
|
|
20
|
-
|
|
21
|
-
## Data Generated
|
|
22
|
-
|
|
23
|
-
In addition to the [default data collected by all plugins](/overview/plugins#data-collected-by-all-plugins), this plugin collects the following data for each trial.
|
|
24
|
-
|
|
25
|
-
Name | Type | Value
|
|
26
|
-
-----|------|------
|
|
27
|
-
raw_gaze | array | Raw gaze data for the trial. The array will contain a nested array for each validation point. Within each nested array will be a list of `{dx,dy}` values specifying the distance from the target for that gaze point.
|
|
28
|
-
percent_in_roi | array | The percentage of samples within the `roi_radius` for each validation point.
|
|
29
|
-
average_offset | array | The average `x` and `y` distance from each validation point, plus the median distance `r` of the points from this average offset.
|
|
30
|
-
samples_per_sec | numeric | The average number of samples per second. Calculated by finding samples per second for each point and then averaging these estimates together.
|
|
31
|
-
|
|
32
|
-
## Example
|
|
33
|
-
|
|
34
|
-
#### 4 point validation using center offset mode
|
|
35
|
-
|
|
36
|
-
```javascript
|
|
37
|
-
var validation = {
|
|
38
|
-
type: 'webgazer-validate',
|
|
39
|
-
validation_points: [[-200,-200], [-200,200], [200,-200], [200,200]],
|
|
40
|
-
validation_point_coordinates: 'center-offset-pixels',
|
|
41
|
-
show_validation_data: true
|
|
42
|
-
}
|
|
43
|
-
```
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
# List of Plugins
|
|
2
|
-
|
|
3
|
-
These are the plugins that are included in the jsPsych release. If you don't see a plugin that will work for your needs, you can post on [GitHub Discussions](https://github.com/jspsych/jsPsych/discussions) to see if anyone else in the community has an unofficial plugin to share or to get help creating a new plugin. You can also view the [documentation on creating a new plugin](/overview/plugins/#creating-a-new-plugin) or [watch a video tutorial on creating a new plugin](https://www.youtube.com/watch?v=XQcsFwAmbiw&list=PLnfo1lBY1P2Mf_o6rV5wiqqn92Mw3UTGh&index=4).
|
|
4
|
-
|
|
5
|
-
Plugin | Description
|
|
6
|
-
------ | -----------
|
|
7
|
-
[jspsych‑animation](/plugins/jspsych-animation) | Shows a sequence of images at a specified frame rate. Records key presses (including timing information) made by the subject while they are viewing the animation.
|
|
8
|
-
[jspsych‑audio‑button‑response](/plugins/jspsych-audio-button-response) | Play an audio file and allow the subject to respond by choosing a button to click. The button can be customized extensively, e.g., using images in place of standard buttons.
|
|
9
|
-
[jspsych‑audio‑keyboard‑response](/plugins/jspsych-audio-keyboard-response) | Play an audio file and allow the subject to respond by pressing a key.
|
|
10
|
-
[jspsych‑audio‑slider‑response](/plugins/jspsych-audio-slider-response) | Play an audio file and allow the subject to respond by moving a slider to indicate a value.
|
|
11
|
-
[jspsych‑call‑function](/plugins/jspsych-call-function) | Executes an arbitrary function call. Doesn't display anything to the subject, and the subject is usually unaware that this plugin has even executed. It's useful for performing tasks at specified times in the experiment, such as saving data.
|
|
12
|
-
[jspsych‑canvas‑button‑response](/plugins/jspsych-canvas-button-response) | Draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp), and record a button click response. Useful for displaying dynamic, parametrically-defined graphics, and for controlling the positioning of multiple graphical elements (shapes, text, images).
|
|
13
|
-
[jspsych‑canvas‑keyboard‑response](/plugins/jspsych-canvas-keyboard-response) | Draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp), and record a key press response. Useful for displaying dynamic, parametrically-defined graphics, and for controlling the positioning of multiple graphical elements (shapes, text, images).
|
|
14
|
-
[jspsych‑canvas‑slider‑response](/plugins/jspsych-canvas-slider-response) | Draw a stimulus on a [HTML canvas element](https://www.w3schools.com/html/html5_canvas.asp), and ask the subject to respond by moving a slider to indicate a value. Useful for displaying dynamic, parametrically-defined graphics, and for controlling the positioning of multiple graphical elements (shapes, text, images).
|
|
15
|
-
[jspsych‑categorize‑animation](/plugins/jspsych-categorize-animation) | The subject responds to an animation and can be given feedback about their response.
|
|
16
|
-
[jspsych‑categorize‑html](/plugins/jspsych-categorize-html) | The subject responds to an HTML-formatted stimulus using the keyboard and can be given feedback about the correctness of their response.
|
|
17
|
-
[jspsych‑categorize‑image](/plugins/jspsych-categorize-image) | The subject responds to an image using the keyboard and can be given feedback about the correctness of their response.
|
|
18
|
-
[jspsych‑cloze](/plugins/jspsych-cloze) | Plugin for displaying a cloze test and checking participants answers against a correct solution.
|
|
19
|
-
[jspsych‑external‑html](/plugins/jspsych-external-html) | Displays an external HTML page (such as a consent form) and lets the subject respond by clicking a button or pressing a key. Plugin can validate their response, which is useful for making sure that a subject has granted consent before starting the experiment.
|
|
20
|
-
[jspsych‑free‑sort](/plugins/jspsych-free-sort) | Displays a set of images on the screen in random locations. Subjects can click and drag the images to move them around the screen. Records all the moves made by the subject, so the sequence of moves can be recovered from the data.
|
|
21
|
-
[jspsych‑fullscreen](/plugins/jspsych-fullscreen) | Toggles the experiment in and out of fullscreen mode.
|
|
22
|
-
[jspsych‑html‑button‑response](/plugins/jspsych-html-button-response) | Display an HTML-formatted stimulus and allow the subject to respond by choosing a button to click. The button can be customized extensively, e.g., using images in place of standard buttons.
|
|
23
|
-
[jspsych‑html‑keyboard‑response](/plugins/jspsych-html-keyboard-response) | Display an HTML-formatted stimulus and allow the subject to respond by pressing a key.
|
|
24
|
-
[jspsych‑html‑slider‑response](/plugins/jspsych-html-slider-response) | Display an HTML-formatted stimulus and allow the subject to respond by moving a slider to indicate a value.
|
|
25
|
-
[jspsych‑iat‑html](/plugins/jspsych-iat-html) | The implicit association task, using HTML-formatted stimuli.
|
|
26
|
-
[jspsych‑iat‑image](/plugins/jspsych-iat-image) | The implicit association task, using images as stimuli.
|
|
27
|
-
[jspsych‑image‑button‑response](/plugins/jspsych-image-button-response) | Display an image and allow the subject to respond by choosing a button to click. The button can be customized extensively, e.g., using images in place of standard buttons.
|
|
28
|
-
[jspsych‑image‑keyboard‑response](/plugins/jspsych-image-keyboard-response) | Display an image and allow the subject to respond by pressing a key.
|
|
29
|
-
[jspsych‑image‑slider‑response](/plugins/jspsych-image-slider-response) | Display an image and allow the subject to respond by moving a slider to indicate a value.
|
|
30
|
-
[jspsych‑instructions](/plugins/jspsych-instructions) | For displaying instructions to the subject. Allows the subject to navigate between pages of instructions using keys or buttons.
|
|
31
|
-
[jspsych‑maxdiff](/plugins/jspsych-maxdiff) | Displays rows of alternatives to be selected for two mutually-exclusive categories, typically as 'most' or 'least' on a particular criteria (e.g. importance, preference, similarity). The participant responds by selecting one radio button corresponding to an alternative in both the left and right response columns.
|
|
32
|
-
[jspsych‑preload](/plugins/jspsych-preload) | This plugin loads images, audio, and video files into the browser's memory before they are needed in the experiment, in order to improve stimulus and response timing, and to avoid disrupting the flow of the experiment.
|
|
33
|
-
[jspsych‑rdk](/plugins/jspsych-rdk) | This plugin displays a Random Dot Kinematogram (RDK) and allows the subject to report the primary direction of motion by pressing a key on the keyboard.
|
|
34
|
-
[jspsych‑reconstruction](/plugins/jspsych-reconstruction) | The subject interacts with a stimulus by modifying a parameter of the stimulus and observing the change in the stimulus in real-time.
|
|
35
|
-
[jspsych‑resize](/plugins/jspsych-resize) | Calibrate the display so that materials display with a known physical size.
|
|
36
|
-
[jspsych‑same‑different‑html](/plugins/jspsych-same-different-html) | A same-different judgment task. An HTML-formatted stimulus is shown, followed by a brief gap, and then another stimulus is shown. The subject indicates whether the stimuli are the same or different.
|
|
37
|
-
[jspsych‑same‑different‑image](/plugins/jspsych-same-different-image) | A same-different judgment task. An image is shown, followed by a brief gap, and then another stimulus is shown. The subject indicates whether the stimuli are the same or different.
|
|
38
|
-
[jspsych‑serial‑reaction‑time](/plugins/jspsych-serial-reaction-time) | A set of boxes are displayed on the screen and one of them changes color. The subject presses a key that corresponds to the different color box as fast as possible.
|
|
39
|
-
[jspsych‑serial‑reaction‑time‑mouse](/plugins/jspsych-serial-reaction-time-mouse) | A set of boxes are displayed on the screen and one of them changes color. The subjects clicks the box that changed color as fast as possible.
|
|
40
|
-
[jspsych‑survey‑html‑form](/plugins/jspsych-survey-html-form) | Renders a custom HTML form. Allows for mixing multiple kinds of form input.
|
|
41
|
-
[jspsych‑survey‑likert](/plugins/jspsych-survey-likert) | Displays likert-style questions.
|
|
42
|
-
[jspsych‑survey‑multi‑choice](/plugins/jspsych-survey-multi-choice) | Displays multiple choice questions with one answer allowed per question.
|
|
43
|
-
[jspsych‑survey‑multi‑select](/plugins/jspsych-survey-multi-select) | Displays multiple choice questions with multiple answes allowed per question.
|
|
44
|
-
[jspsych‑survey‑text](/plugins/jspsych-survey-text) | Shows a prompt with a text box. The subject writes a response and then submits by clicking a button.
|
|
45
|
-
[jspsych‑video‑button‑response](/plugins/jspsych-video-button-response) | Displays a video file with many options for customizing playback. Subject responds to the video by pressing a button.
|
|
46
|
-
[jspsych‑video‑keyboard‑response](/plugins/jspsych-video-keyboard-response) | Displays a video file with many options for customizing playback. Subject responds to the video by pressing a key.
|
|
47
|
-
[jspsych‑video‑slider‑response](/plugins/jspsych-video-slider-response) | Displays a video file with many options for customizing playback. Subject responds to the video by moving a slider.
|
|
48
|
-
[jspsych‑virtual‑chinrest](/plugins/jspsych-virtual-chinrest) | An implementation of the "virutal chinrest" procedure developed by [Li, Joo, Yeatman, and Reinecke (2020)](https://doi.org/10.1038/s41598-019-57204-1). Calibrates the monitor to display items at a known physical size by having participants scale an image to be the same size as a physical credit card. Then uses a blind spot task to estimate the distance between the participant and the display.
|
|
49
|
-
[jspsych‑visual‑search‑circle](/plugins/jspsych-visual-search-circle) | A customizable visual-search task modelled after [Wang, Cavanagh, & Green (1994)](http://dx.doi.org/10.3758/BF03206946). The subject indicates whether or not a target is present among a set of distractors. The stimuli are displayed in a circle, evenly-spaced, equidistant from a fixation point.
|
|
50
|
-
[jspsych‑vsl‑animate‑occlusion](/plugins/jspsych-vsl-animate-occlusion) | A visual statistical learning paradigm based on [Fiser & Aslin (2002)](http://dx.doi.org/10.1037//0278-7393.28.3.458). A sequence of stimuli are shown in an oscillatory motion. An occluding rectangle is in the center of the display, and the stimuli change when they are behind the rectangle.
|
|
51
|
-
[jspsych‑vsl‑grid‑scene](/plugins/jspsych-vsl-grid-scene) | A visual statistical learning paradigm based on [Fiser & Aslin (2001)](http://dx.doi.org/10.1111/1467-9280.00392). A scene made up of individual stimuli arranged in a grid is shown. This plugin can also generate the HTML code to render the stimuli for use in other plugins.
|
|
52
|
-
[jspsych‑webgazer‑calibrate](/plugins/jspsych-webgazer-calibrate) | Calibrates the WebGazer extension for eye tracking.
|
|
53
|
-
[jspsych‑webgazer‑init‑camera](/plugins/jspsych-webgazer-init-camera) | Initializes the camera and helps the participant center their face for eye tracking.
|
|
54
|
-
[jspsych‑webgazer‑validate](/plugins/jspsych-webgazer-validate) | Performs validation to measure precision and accuracy of WebGazer eye tracking predictions.
|