diff --git a/docs/demos/external_page.html b/docs/demos/external_page.html new file mode 100644 index 00000000..525e75bf --- /dev/null +++ b/docs/demos/external_page.html @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/docs/demos/eye-tracking-with-webgazer.html b/docs/demos/eye-tracking-with-webgazer.html new file mode 100644 index 00000000..e6e8b294 --- /dev/null +++ b/docs/demos/eye-tracking-with-webgazer.html @@ -0,0 +1,174 @@ + + + + + + + + + + + + + + + + + + + diff --git a/docs/demos/img/1.gif b/docs/demos/img/1.gif new file mode 100644 index 00000000..f4511d92 Binary files /dev/null and b/docs/demos/img/1.gif differ diff --git a/docs/demos/img/10.gif b/docs/demos/img/10.gif new file mode 100644 index 00000000..1f25f1a2 Binary files /dev/null and b/docs/demos/img/10.gif differ diff --git a/docs/demos/img/11.gif b/docs/demos/img/11.gif new file mode 100644 index 00000000..f54b3d68 Binary files /dev/null and b/docs/demos/img/11.gif differ diff --git a/docs/demos/img/12.gif b/docs/demos/img/12.gif new file mode 100644 index 00000000..053ecf66 Binary files /dev/null and b/docs/demos/img/12.gif differ diff --git a/docs/demos/img/2.gif b/docs/demos/img/2.gif new file mode 100644 index 00000000..89000901 Binary files /dev/null and b/docs/demos/img/2.gif differ diff --git a/docs/demos/img/3.gif b/docs/demos/img/3.gif new file mode 100644 index 00000000..b6205d1b Binary files /dev/null and b/docs/demos/img/3.gif differ diff --git a/docs/demos/img/4.gif b/docs/demos/img/4.gif new file mode 100644 index 00000000..1d2de35a Binary files /dev/null and b/docs/demos/img/4.gif differ diff --git a/docs/demos/img/5.gif b/docs/demos/img/5.gif new file mode 100644 index 00000000..0c8ce98f Binary files /dev/null and b/docs/demos/img/5.gif differ diff --git a/docs/demos/img/6.gif b/docs/demos/img/6.gif new file mode 100644 index 00000000..59149da1 Binary files /dev/null and b/docs/demos/img/6.gif differ diff --git a/docs/demos/img/7.gif b/docs/demos/img/7.gif new file mode 100644 index 00000000..6b3ea1b1 Binary files /dev/null and b/docs/demos/img/7.gif differ diff --git a/docs/demos/img/8.gif b/docs/demos/img/8.gif new file mode 100644 index 00000000..723ab759 Binary files /dev/null and b/docs/demos/img/8.gif differ diff --git a/docs/demos/img/9.gif b/docs/demos/img/9.gif new file mode 100644 index 00000000..dabe68de Binary files /dev/null and b/docs/demos/img/9.gif differ diff --git a/docs/demos/img/backwardN.gif b/docs/demos/img/backwardN.gif new file mode 100644 index 00000000..38a21647 Binary files /dev/null and b/docs/demos/img/backwardN.gif differ diff --git a/docs/demos/img/blue.png b/docs/demos/img/blue.png new file mode 100644 index 00000000..820bdce8 Binary files /dev/null and b/docs/demos/img/blue.png differ diff --git a/docs/demos/img/card.png b/docs/demos/img/card.png new file mode 100644 index 00000000..ca8de4f2 Binary files /dev/null and b/docs/demos/img/card.png differ diff --git a/docs/demos/img/elephant.png b/docs/demos/img/elephant.png new file mode 100644 index 00000000..b38c53d9 Binary files /dev/null and b/docs/demos/img/elephant.png differ diff --git a/docs/demos/img/fixation.gif b/docs/demos/img/fixation.gif new file mode 100644 index 00000000..ff76c92a Binary files /dev/null and b/docs/demos/img/fixation.gif differ diff --git a/docs/demos/img/happy_face_1.jpg b/docs/demos/img/happy_face_1.jpg new file mode 100644 index 00000000..3e8e8911 Binary files /dev/null and b/docs/demos/img/happy_face_1.jpg differ diff --git a/docs/demos/img/happy_face_2.jpg b/docs/demos/img/happy_face_2.jpg new file mode 100644 index 00000000..6fe9ef2b Binary files /dev/null and b/docs/demos/img/happy_face_2.jpg differ diff --git a/docs/demos/img/happy_face_3.jpg b/docs/demos/img/happy_face_3.jpg new file mode 100644 index 00000000..6c111970 Binary files /dev/null and b/docs/demos/img/happy_face_3.jpg differ diff --git a/docs/demos/img/happy_face_4.jpg b/docs/demos/img/happy_face_4.jpg new file mode 100644 index 00000000..3e939c8c Binary files /dev/null and b/docs/demos/img/happy_face_4.jpg differ diff --git a/docs/demos/img/lion.png b/docs/demos/img/lion.png new file mode 100644 index 00000000..b1cc466e Binary files /dev/null and b/docs/demos/img/lion.png differ diff --git a/docs/demos/img/monkey.png b/docs/demos/img/monkey.png new file mode 100644 index 00000000..461fcf00 Binary files /dev/null and b/docs/demos/img/monkey.png differ diff --git a/docs/demos/img/navarro_burst_03.jpg b/docs/demos/img/navarro_burst_03.jpg new file mode 100644 index 00000000..5fed5eda Binary files /dev/null and b/docs/demos/img/navarro_burst_03.jpg differ diff --git a/docs/demos/img/normalN.gif b/docs/demos/img/normalN.gif new file mode 100644 index 00000000..dc5593dd Binary files /dev/null and b/docs/demos/img/normalN.gif differ diff --git a/docs/demos/img/orange.png b/docs/demos/img/orange.png new file mode 100644 index 00000000..108e6e57 Binary files /dev/null and b/docs/demos/img/orange.png differ diff --git a/docs/demos/img/sad_face_1.jpg b/docs/demos/img/sad_face_1.jpg new file mode 100644 index 00000000..7a210963 Binary files /dev/null and b/docs/demos/img/sad_face_1.jpg differ diff --git a/docs/demos/img/sad_face_2.jpg b/docs/demos/img/sad_face_2.jpg new file mode 100644 index 00000000..b3dbb611 Binary files /dev/null and b/docs/demos/img/sad_face_2.jpg differ diff --git a/docs/demos/img/sad_face_3.jpg b/docs/demos/img/sad_face_3.jpg new file mode 100644 index 00000000..ab3aa2cb Binary files /dev/null and b/docs/demos/img/sad_face_3.jpg differ diff --git a/docs/demos/img/sad_face_4.jpg b/docs/demos/img/sad_face_4.jpg new file mode 100644 index 00000000..6be58cce Binary files /dev/null and b/docs/demos/img/sad_face_4.jpg differ diff --git a/docs/demos/jspsych-animation-demo.html b/docs/demos/jspsych-animation-demo.html new file mode 100644 index 00000000..32bbbedc --- /dev/null +++ b/docs/demos/jspsych-animation-demo.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-audio-button-response-demo-1.html b/docs/demos/jspsych-audio-button-response-demo-1.html new file mode 100644 index 00000000..042a1d12 --- /dev/null +++ b/docs/demos/jspsych-audio-button-response-demo-1.html @@ -0,0 +1,62 @@ + + + + + + + + + + + + diff --git a/docs/demos/jspsych-audio-button-response-demo-2.html b/docs/demos/jspsych-audio-button-response-demo-2.html new file mode 100644 index 00000000..320e5362 --- /dev/null +++ b/docs/demos/jspsych-audio-button-response-demo-2.html @@ -0,0 +1,68 @@ + + + + + + + + + + + + diff --git a/docs/demos/jspsych-audio-keyboard-response-demo-1.html b/docs/demos/jspsych-audio-keyboard-response-demo-1.html new file mode 100644 index 00000000..052183e8 --- /dev/null +++ b/docs/demos/jspsych-audio-keyboard-response-demo-1.html @@ -0,0 +1,61 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-audio-keyboard-response-demo-2.html b/docs/demos/jspsych-audio-keyboard-response-demo-2.html new file mode 100644 index 00000000..09aab83f --- /dev/null +++ b/docs/demos/jspsych-audio-keyboard-response-demo-2.html @@ -0,0 +1,60 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-audio-slider-response-demo-1.html b/docs/demos/jspsych-audio-slider-response-demo-1.html new file mode 100644 index 00000000..f53447a6 --- /dev/null +++ b/docs/demos/jspsych-audio-slider-response-demo-1.html @@ -0,0 +1,60 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-audio-slider-response-demo-2.html b/docs/demos/jspsych-audio-slider-response-demo-2.html new file mode 100644 index 00000000..e50b32ad --- /dev/null +++ b/docs/demos/jspsych-audio-slider-response-demo-2.html @@ -0,0 +1,62 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-call-function-demo1.html b/docs/demos/jspsych-call-function-demo1.html new file mode 100644 index 00000000..f91628b8 --- /dev/null +++ b/docs/demos/jspsych-call-function-demo1.html @@ -0,0 +1,59 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-call-function-demo2.html b/docs/demos/jspsych-call-function-demo2.html new file mode 100644 index 00000000..b77766eb --- /dev/null +++ b/docs/demos/jspsych-call-function-demo2.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-call-function-demo3.html b/docs/demos/jspsych-call-function-demo3.html new file mode 100644 index 00000000..9e0721db --- /dev/null +++ b/docs/demos/jspsych-call-function-demo3.html @@ -0,0 +1,64 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-canvas-button-response-demo1.html b/docs/demos/jspsych-canvas-button-response-demo1.html new file mode 100644 index 00000000..8442f5ed --- /dev/null +++ b/docs/demos/jspsych-canvas-button-response-demo1.html @@ -0,0 +1,85 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-canvas-button-response-demo2.html b/docs/demos/jspsych-canvas-button-response-demo2.html new file mode 100644 index 00000000..12ca3230 --- /dev/null +++ b/docs/demos/jspsych-canvas-button-response-demo2.html @@ -0,0 +1,76 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-canvas-button-response-demo3.html b/docs/demos/jspsych-canvas-button-response-demo3.html new file mode 100644 index 00000000..20377d2c --- /dev/null +++ b/docs/demos/jspsych-canvas-button-response-demo3.html @@ -0,0 +1,87 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-canvas-keyboard-response-demo1.html b/docs/demos/jspsych-canvas-keyboard-response-demo1.html new file mode 100644 index 00000000..d8d9212d --- /dev/null +++ b/docs/demos/jspsych-canvas-keyboard-response-demo1.html @@ -0,0 +1,67 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-canvas-keyboard-response-demo2.html b/docs/demos/jspsych-canvas-keyboard-response-demo2.html new file mode 100644 index 00000000..696bdd39 --- /dev/null +++ b/docs/demos/jspsych-canvas-keyboard-response-demo2.html @@ -0,0 +1,67 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-canvas-slider-response-demo1.html b/docs/demos/jspsych-canvas-slider-response-demo1.html new file mode 100644 index 00000000..37197c3f --- /dev/null +++ b/docs/demos/jspsych-canvas-slider-response-demo1.html @@ -0,0 +1,70 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-canvas-slider-response-demo2.html b/docs/demos/jspsych-canvas-slider-response-demo2.html new file mode 100644 index 00000000..41804372 --- /dev/null +++ b/docs/demos/jspsych-canvas-slider-response-demo2.html @@ -0,0 +1,76 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-categorize-animation-demo1.html b/docs/demos/jspsych-categorize-animation-demo1.html new file mode 100644 index 00000000..f28ca694 --- /dev/null +++ b/docs/demos/jspsych-categorize-animation-demo1.html @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-categorize-animation-demo2.html b/docs/demos/jspsych-categorize-animation-demo2.html new file mode 100644 index 00000000..2e3e1a0e --- /dev/null +++ b/docs/demos/jspsych-categorize-animation-demo2.html @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-categorize-html-demo1.html b/docs/demos/jspsych-categorize-html-demo1.html new file mode 100644 index 00000000..71bccd1f --- /dev/null +++ b/docs/demos/jspsych-categorize-html-demo1.html @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-categorize-image-demo1.html b/docs/demos/jspsych-categorize-image-demo1.html new file mode 100644 index 00000000..1d8e1f3c --- /dev/null +++ b/docs/demos/jspsych-categorize-image-demo1.html @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-cloze-demo1.html b/docs/demos/jspsych-cloze-demo1.html new file mode 100644 index 00000000..a99f508d --- /dev/null +++ b/docs/demos/jspsych-cloze-demo1.html @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-cloze-demo2.html b/docs/demos/jspsych-cloze-demo2.html new file mode 100644 index 00000000..2d8fd3f1 --- /dev/null +++ b/docs/demos/jspsych-cloze-demo2.html @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-external-html-demo1.html b/docs/demos/jspsych-external-html-demo1.html new file mode 100644 index 00000000..3ae8811c --- /dev/null +++ b/docs/demos/jspsych-external-html-demo1.html @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-free-sort-demo1.html b/docs/demos/jspsych-free-sort-demo1.html new file mode 100644 index 00000000..95a70b17 --- /dev/null +++ b/docs/demos/jspsych-free-sort-demo1.html @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-fullscreen-demo1.html b/docs/demos/jspsych-fullscreen-demo1.html new file mode 100644 index 00000000..aad0cd83 --- /dev/null +++ b/docs/demos/jspsych-fullscreen-demo1.html @@ -0,0 +1,76 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-html-button-response-demo1.html b/docs/demos/jspsych-html-button-response-demo1.html new file mode 100644 index 00000000..73351b5b --- /dev/null +++ b/docs/demos/jspsych-html-button-response-demo1.html @@ -0,0 +1,56 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-html-keyboard-response-demo1.html b/docs/demos/jspsych-html-keyboard-response-demo1.html new file mode 100644 index 00000000..ac533f23 --- /dev/null +++ b/docs/demos/jspsych-html-keyboard-response-demo1.html @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-html-keyboard-response-demo2.html b/docs/demos/jspsych-html-keyboard-response-demo2.html new file mode 100644 index 00000000..dcc42e6b --- /dev/null +++ b/docs/demos/jspsych-html-keyboard-response-demo2.html @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-html-slider-response-demo1.html b/docs/demos/jspsych-html-slider-response-demo1.html new file mode 100644 index 00000000..de6f1814 --- /dev/null +++ b/docs/demos/jspsych-html-slider-response-demo1.html @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-iat-html-demo1.html b/docs/demos/jspsych-iat-html-demo1.html new file mode 100644 index 00000000..d4264ee3 --- /dev/null +++ b/docs/demos/jspsych-iat-html-demo1.html @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-iat-image-demo1.html b/docs/demos/jspsych-iat-image-demo1.html new file mode 100644 index 00000000..2c147aa8 --- /dev/null +++ b/docs/demos/jspsych-iat-image-demo1.html @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-image-button-response-demo1.html b/docs/demos/jspsych-image-button-response-demo1.html new file mode 100644 index 00000000..6c5d74c8 --- /dev/null +++ b/docs/demos/jspsych-image-button-response-demo1.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-image-keyboard-response-demo1.html b/docs/demos/jspsych-image-keyboard-response-demo1.html new file mode 100644 index 00000000..e39de7a6 --- /dev/null +++ b/docs/demos/jspsych-image-keyboard-response-demo1.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-image-keyboard-response-demo2.html b/docs/demos/jspsych-image-keyboard-response-demo2.html new file mode 100644 index 00000000..06cd7520 --- /dev/null +++ b/docs/demos/jspsych-image-keyboard-response-demo2.html @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-image-slider-response-demo1.html b/docs/demos/jspsych-image-slider-response-demo1.html new file mode 100644 index 00000000..eeca33c2 --- /dev/null +++ b/docs/demos/jspsych-image-slider-response-demo1.html @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-instructions-demo-1.html b/docs/demos/jspsych-instructions-demo-1.html new file mode 100644 index 00000000..a9df6dce --- /dev/null +++ b/docs/demos/jspsych-instructions-demo-1.html @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-instructions-demo-2.html b/docs/demos/jspsych-instructions-demo-2.html new file mode 100644 index 00000000..172449d9 --- /dev/null +++ b/docs/demos/jspsych-instructions-demo-2.html @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-instructions-demo-3.html b/docs/demos/jspsych-instructions-demo-3.html new file mode 100644 index 00000000..1b15666f --- /dev/null +++ b/docs/demos/jspsych-instructions-demo-3.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-maxdiff-demo1.html b/docs/demos/jspsych-maxdiff-demo1.html new file mode 100644 index 00000000..46ef84a8 --- /dev/null +++ b/docs/demos/jspsych-maxdiff-demo1.html @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-preload-demo1.html b/docs/demos/jspsych-preload-demo1.html new file mode 100644 index 00000000..cb2d234e --- /dev/null +++ b/docs/demos/jspsych-preload-demo1.html @@ -0,0 +1,76 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-preload-demo2.html b/docs/demos/jspsych-preload-demo2.html new file mode 100644 index 00000000..60530deb --- /dev/null +++ b/docs/demos/jspsych-preload-demo2.html @@ -0,0 +1,67 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-preload-demo3.html b/docs/demos/jspsych-preload-demo3.html new file mode 100644 index 00000000..806c702c --- /dev/null +++ b/docs/demos/jspsych-preload-demo3.html @@ -0,0 +1,109 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-preload-demo4.html b/docs/demos/jspsych-preload-demo4.html new file mode 100644 index 00000000..6511b8ae --- /dev/null +++ b/docs/demos/jspsych-preload-demo4.html @@ -0,0 +1,59 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-rdk-demo1.html b/docs/demos/jspsych-rdk-demo1.html new file mode 100644 index 00000000..02a2f7a0 --- /dev/null +++ b/docs/demos/jspsych-rdk-demo1.html @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-rdk-demo2.html b/docs/demos/jspsych-rdk-demo2.html new file mode 100644 index 00000000..76450f22 --- /dev/null +++ b/docs/demos/jspsych-rdk-demo2.html @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-rdk-demo3.html b/docs/demos/jspsych-rdk-demo3.html new file mode 100644 index 00000000..9b6aaa34 --- /dev/null +++ b/docs/demos/jspsych-rdk-demo3.html @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-reconstruction-demo1.html b/docs/demos/jspsych-reconstruction-demo1.html new file mode 100644 index 00000000..251568f3 --- /dev/null +++ b/docs/demos/jspsych-reconstruction-demo1.html @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-resize-demo1.html b/docs/demos/jspsych-resize-demo1.html new file mode 100644 index 00000000..aad30967 --- /dev/null +++ b/docs/demos/jspsych-resize-demo1.html @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-same-different-html-demo1.html b/docs/demos/jspsych-same-different-html-demo1.html new file mode 100644 index 00000000..eb75c910 --- /dev/null +++ b/docs/demos/jspsych-same-different-html-demo1.html @@ -0,0 +1,66 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-same-different-image-demo1.html b/docs/demos/jspsych-same-different-image-demo1.html new file mode 100644 index 00000000..438ab0fd --- /dev/null +++ b/docs/demos/jspsych-same-different-image-demo1.html @@ -0,0 +1,75 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-serial-reaction-time-demo1.html b/docs/demos/jspsych-serial-reaction-time-demo1.html new file mode 100644 index 00000000..d368565f --- /dev/null +++ b/docs/demos/jspsych-serial-reaction-time-demo1.html @@ -0,0 +1,91 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-serial-reaction-time-demo2.html b/docs/demos/jspsych-serial-reaction-time-demo2.html new file mode 100644 index 00000000..30b98f32 --- /dev/null +++ b/docs/demos/jspsych-serial-reaction-time-demo2.html @@ -0,0 +1,101 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-serial-reaction-time-mouse-demo1.html b/docs/demos/jspsych-serial-reaction-time-mouse-demo1.html new file mode 100644 index 00000000..45e0858a --- /dev/null +++ b/docs/demos/jspsych-serial-reaction-time-mouse-demo1.html @@ -0,0 +1,77 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-serial-reaction-time-mouse-demo2.html b/docs/demos/jspsych-serial-reaction-time-mouse-demo2.html new file mode 100644 index 00000000..593a329e --- /dev/null +++ b/docs/demos/jspsych-serial-reaction-time-mouse-demo2.html @@ -0,0 +1,83 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-survey-html-form-demo1.html b/docs/demos/jspsych-survey-html-form-demo1.html new file mode 100644 index 00000000..5e7441d0 --- /dev/null +++ b/docs/demos/jspsych-survey-html-form-demo1.html @@ -0,0 +1,57 @@ + + + + + + + + + + + + diff --git a/docs/demos/jspsych-survey-html-form-demo2.html b/docs/demos/jspsych-survey-html-form-demo2.html new file mode 100644 index 00000000..640b23dc --- /dev/null +++ b/docs/demos/jspsych-survey-html-form-demo2.html @@ -0,0 +1,58 @@ + + + + + + + + + + + + diff --git a/docs/demos/jspsych-survey-likert-demo1.html b/docs/demos/jspsych-survey-likert-demo1.html new file mode 100644 index 00000000..d8b195d7 --- /dev/null +++ b/docs/demos/jspsych-survey-likert-demo1.html @@ -0,0 +1,67 @@ + + + + + + + + + + + + diff --git a/docs/demos/jspsych-survey-likert-demo2.html b/docs/demos/jspsych-survey-likert-demo2.html new file mode 100644 index 00000000..1d064594 --- /dev/null +++ b/docs/demos/jspsych-survey-likert-demo2.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + diff --git a/docs/demos/jspsych-survey-multi-choice-demo1.html b/docs/demos/jspsych-survey-multi-choice-demo1.html new file mode 100644 index 00000000..28a5fc81 --- /dev/null +++ b/docs/demos/jspsych-survey-multi-choice-demo1.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + diff --git a/docs/demos/jspsych-survey-multi-choice-demo2.html b/docs/demos/jspsych-survey-multi-choice-demo2.html new file mode 100644 index 00000000..fa928b96 --- /dev/null +++ b/docs/demos/jspsych-survey-multi-choice-demo2.html @@ -0,0 +1,71 @@ + + + + + + + + + + + + diff --git a/docs/demos/jspsych-survey-multi-select-demo1.html b/docs/demos/jspsych-survey-multi-select-demo1.html new file mode 100644 index 00000000..0aaa05b3 --- /dev/null +++ b/docs/demos/jspsych-survey-multi-select-demo1.html @@ -0,0 +1,72 @@ + + + + + + + + + + + + diff --git a/docs/demos/jspsych-survey-text-demo1.html b/docs/demos/jspsych-survey-text-demo1.html new file mode 100644 index 00000000..558b2807 --- /dev/null +++ b/docs/demos/jspsych-survey-text-demo1.html @@ -0,0 +1,59 @@ + + + + + + + + + + + + diff --git a/docs/demos/jspsych-survey-text-demo2.html b/docs/demos/jspsych-survey-text-demo2.html new file mode 100644 index 00000000..dd91e310 --- /dev/null +++ b/docs/demos/jspsych-survey-text-demo2.html @@ -0,0 +1,60 @@ + + + + + + + + + + + + diff --git a/docs/demos/jspsych-survey-text-demo3.html b/docs/demos/jspsych-survey-text-demo3.html new file mode 100644 index 00000000..bf96fb43 --- /dev/null +++ b/docs/demos/jspsych-survey-text-demo3.html @@ -0,0 +1,60 @@ + + + + + + + + + + + + diff --git a/docs/demos/jspsych-survey-text-demo4.html b/docs/demos/jspsych-survey-text-demo4.html new file mode 100644 index 00000000..db257469 --- /dev/null +++ b/docs/demos/jspsych-survey-text-demo4.html @@ -0,0 +1,66 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-video-button-response-demo1.html b/docs/demos/jspsych-video-button-response-demo1.html new file mode 100644 index 00000000..1048fdc4 --- /dev/null +++ b/docs/demos/jspsych-video-button-response-demo1.html @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-video-keyboard-response-demo1.html b/docs/demos/jspsych-video-keyboard-response-demo1.html new file mode 100644 index 00000000..7d19d251 --- /dev/null +++ b/docs/demos/jspsych-video-keyboard-response-demo1.html @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-video-slider-response-demo1.html b/docs/demos/jspsych-video-slider-response-demo1.html new file mode 100644 index 00000000..36d21f16 --- /dev/null +++ b/docs/demos/jspsych-video-slider-response-demo1.html @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-virtual-chinrest-demo1.html b/docs/demos/jspsych-virtual-chinrest-demo1.html new file mode 100644 index 00000000..9acd7d3c --- /dev/null +++ b/docs/demos/jspsych-virtual-chinrest-demo1.html @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-virtual-chinrest-demo2.html b/docs/demos/jspsych-virtual-chinrest-demo2.html new file mode 100644 index 00000000..f4d198d2 --- /dev/null +++ b/docs/demos/jspsych-virtual-chinrest-demo2.html @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-virtual-chinrest-demo3.html b/docs/demos/jspsych-virtual-chinrest-demo3.html new file mode 100644 index 00000000..189a7bec --- /dev/null +++ b/docs/demos/jspsych-virtual-chinrest-demo3.html @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-visual-search-circle-demo1.html b/docs/demos/jspsych-visual-search-circle-demo1.html new file mode 100644 index 00000000..821b6285 --- /dev/null +++ b/docs/demos/jspsych-visual-search-circle-demo1.html @@ -0,0 +1,74 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-visual-search-circle-demo2.html b/docs/demos/jspsych-visual-search-circle-demo2.html new file mode 100644 index 00000000..ae7b9307 --- /dev/null +++ b/docs/demos/jspsych-visual-search-circle-demo2.html @@ -0,0 +1,76 @@ + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-vsl-animate-occlusion-demo1.html b/docs/demos/jspsych-vsl-animate-occlusion-demo1.html new file mode 100644 index 00000000..0fb1564d --- /dev/null +++ b/docs/demos/jspsych-vsl-animate-occlusion-demo1.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + diff --git a/docs/demos/jspsych-vsl-grid-scene-demo1.html b/docs/demos/jspsych-vsl-grid-scene-demo1.html new file mode 100644 index 00000000..5143edb9 --- /dev/null +++ b/docs/demos/jspsych-vsl-grid-scene-demo1.html @@ -0,0 +1,70 @@ + + + + + + + + + + + + + diff --git a/docs/demos/sound/roar.mp3 b/docs/demos/sound/roar.mp3 new file mode 100644 index 00000000..a1b66add Binary files /dev/null and b/docs/demos/sound/roar.mp3 differ diff --git a/docs/demos/video/fish.mp4 b/docs/demos/video/fish.mp4 new file mode 100644 index 00000000..8d2fba01 Binary files /dev/null and b/docs/demos/video/fish.mp4 differ diff --git a/docs/overview/data.md b/docs/overview/data.md index b4531837..378f19c0 100644 --- a/docs/overview/data.md +++ b/docs/overview/data.md @@ -141,45 +141,53 @@ jsPsych.data.get().select('rt').count(); This is one of the simplest methods for saving jsPsych data on the server that is running the experiment. It involves a short PHP script and a few lines of JavaScript code. This method will save each participant's data as a CSV file on the server. **This method will only work if you are running on a web server with PHP installed, or a local server with PHP (e.g., [XAMPP](https://www.apachefriends.org/index.html)).** -This method uses a simple PHP script to write files to the server: +This method uses a short PHP script to write files to the server: ```php ``` -The `file_put_contents($filename, $data)` method requires permission to write new files. An easy way to solve this is to create a directory on the server that will store the data and use the chmod command to give all users write permission to that directory. In the above example, the directory `data/` is used to store files. +The `file_put_contents($name, $data)` method requires permission to write new files. An easy way to solve this is to create a directory on the server that will store the data and use the chmod command to give all users write permission to that directory. In the above example, the directory `data/` is used to store files. -To use the PHP script, the JavaScript that runs jsPsych needs to send the `filename` and `filedata` information. This is done through an [AJAX](http://www.w3schools.com/xml/ajax_intro.asp) call. +To use the PHP script, the JavaScript that runs jsPsych needs to send the `filedata` information. This is done through an [AJAX](http://www.w3schools.com/xml/ajax_intro.asp) call. ```javascript function saveData(name, data){ var xhr = new XMLHttpRequest(); xhr.open('POST', 'write_data.php'); // 'write_data.php' is the path to the php file described above. xhr.setRequestHeader('Content-Type', 'application/json'); - xhr.send(JSON.stringify({filename: name, filedata: data})); + xhr.send(JSON.stringify({filedata: data})); } // call the saveData function after the experiment is over jsPsych.init({ // code to define the experiment structure would go here... - on_finish: function(){ saveData("experiment_data", jsPsych.data.get().csv()); } + on_finish: function(){ saveData(jsPsych.data.get().csv()); } }); ``` -To use this in an actual experiment, it would be important to tie the filename to some unique identifier like a subject number. Otherwise the file may be overwritten by collecting new data. +!!! danger + The example above has minimal security and should probably not be used without additional security measures put in place. The risk is that someone can write arbitrary data using the `saveData()` function and store it to a file on your webserver. If they can guess the file name generated by the PHP script, or access a directory listing containing all of the filenames, then they can potentially write executable code to your server and run it. -Note that, depending on file permissions, storing the CSV files this way may make them publicly accessible. One fix is to store the CSV files outside the web directory on the server. This requires changing the path in the PHP script above from `/data` to a non-accessible folder. You should only use this solution if you have access to more than just the web directory on your server. + One fix is to store the CSV files outside the web directory on the server. This requires changing the path in the PHP script above from `/data` to a folder that is not accessible on the web. You should only use this solution if you have access to more than just the web directory on your server. + + You can also [configure your web server to block access to the folder you are storing data in](https://stackoverflow.com/q/5046100/3726673). + + The MySQL option below is more secure. ## Storing data permanently in a MySQL database -The ideal solution for storing data generated by jsPsych is to write it to a database. +Another solution for storing data generated by jsPsych is to write it to a database. There are dozens of database options. MySQL is one of the most popular [relational databases](http://en.wikipedia.org/wiki/Relational_database), is free to use, and relatively easy [to install](https://www.google.com/search?q=how+to+install+mysql). This code will assume that you have a MySQL database installed on your server that is hosting the jsPsych experiment, and that your server is able to execute PHP code. If you are trying to run on a local machine, you'll need to install a local server environment like [XAMPP](https://www.apachefriends.org/index.html). @@ -249,7 +257,7 @@ $conn = null; ?> ``` -To send the data, we use an AJAX request in JavaScript. +To send the data, we use an `XMLHttpRequest` request in JavaScript. ```JavaScript function saveData() { var xhr = new XMLHttpRequest(); @@ -265,17 +273,24 @@ function saveData() { } ``` -You can call the `saveData()` function using the `on_finish` handler for the experiment, or by using the `call-function` plugin. +It's important that the `XMLHttpRequest` is able to complete before the experiment is closed. If you invoke the `saveData()` function at the end of your experiment and the subject closes the window before all of the data has been transferred you will lose that data. To mitigate this risk, you can use the `call-function` plugin's `async` option to prevent the experiment from progressing until the request is complete. ```javascript -// with on_finish handler -jsPsych.init({ - on_finish: saveData -}); - -// with call-function plugin -timeline.push({ +var trial = { type: 'call-function', - func: saveData -}); + async: true, + func: function(done){ + var xhr = new XMLHttpRequest(); + xhr.open('POST', 'write_data.php'); + xhr.setRequestHeader('Content-Type', 'application/json'); + xhr.onload = function() { + if(xhr.status == 200){ + var response = JSON.parse(xhr.responseText); + console.log(response.success); + } + done(); // invoking done() causes experiment to progress to next trial. + }; + xhr.send(jsPsych.data.get().json()); + } +} ``` diff --git a/docs/overview/eye-tracking.md b/docs/overview/eye-tracking.md index 5cd76380..5537bc7e 100644 --- a/docs/overview/eye-tracking.md +++ b/docs/overview/eye-tracking.md @@ -43,10 +43,6 @@ jsPsych.init({ }) ``` - -!!! tip - Example experiments using WebGazer are available in the **/examples** folder of the jsPsych release. See `webgazer.html`, `webgazer_image.html`, and `webgazer_audio.html`. - ### Initialize the camera To help the participant position their face correctly for eye tracking you can use the [jspsych-webgazer-init-camera plugin](/plugins/jspsych-webgazer-init-camera.ms). This will show the participant what the camera sees, including facial feature landmarks, and prevent the participant from continuing until their face is in good position for eye tracking. This plugin will also trigger the experiment to request permission to access the user's webcam if it hasn't already been granted. @@ -155,117 +151,234 @@ If you have tips based on your own experience please consider sharing them on ou ## Example -The code below shows a basic example of what it looks like when you put all of these things together in your experiment's HTML file. +!!! tip + Additional example experiments using WebGazer are available in the **/examples** folder of the jsPsych release. See `webgazer.html`, `webgazer_image.html`, and `webgazer_audio.html`. -```html - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + ``` + + Below is example data from the image-keyboard-response trial taken from the experiment above. In addition to the standard data that is collected for this plugin, you can see the additional `webgazer_data` and `webgazer_targets` arrays. The `webgazer_data` shows 21 gaze location estimates during the 1-second image presentation. The `webgazer_targets` array shows that there was one target, the image-keyboard-response stimulus, and tells you the x- and y-coordinate boundaries for the target (image) rectangle. By comparing each of the x/y locations from the `webgazer_data` locations array with the target boundaries in `webgazer_targets`, you can determine if/when the estimated gaze location was inside the target area. + + ```js { - type: 'webgazer', - params: {targets: ['#jspsych-image-keyboard-response-stimulus']} + "rt": null, + "stimulus": "img/blue.png", + "response": null, + "trial_type": "image-keyboard-response", + "trial_index": 4, + "time_elapsed": 30701, + "internal_node_id": "0.0-4.0", + "webgazer_data": [ + { "x": 1065, "y": 437, "t": 39}, + { "x": 943, "y": 377, "t": 79}, + { "x": 835, "y": 332, "t": 110}, + { "x": 731, "y": 299, "t": 146}, + { "x": 660, "y": 271, "t": 189}, + { "x": 606, "y": 251, "t": 238}, + { "x": 582, "y": 213, "t": 288}, + { "x": 551, "y": 200, "t": 335}, + { "x": 538, "y": 183, "t": 394}, + { "x": 514, "y": 177, "t": 436}, + { "x": 500, "y": 171, "t": 493}, + { "x": 525, "y": 178, "t": 542}, + { "x": 537, "y": 182, "t": 592}, + { "x": 543, "y": 178, "t": 633}, + { "x": 547, "y": 177, "t": 691}, + { "x": 558, "y": 174, "t": 739}, + { "x": 574, "y": 183, "t": 789}, + { "x": 577, "y": 197, "t": 838}, + { "x": 584, "y": 214, "t": 889}, + { "x": 603, "y": 218, "t": 937}, + { "x": 606, "y": 221, "t": 987} + ], + "webgazer_targets": [ + "#jspsych-image-keyboard-response-stimulus": { + "x": 490, + "y": 135, + "height": 300, + "width": 300, + "top": 135, + "bottom": 435, + "left": 490, + "right": 790 + } + ] } - ] -} - -jsPsych.init({ - timeline: [init_camera, calibration, validation, start, trial], - preload_images: ['img/blue.png'], - extensions: [ - {type: 'webgazer'} - ] -}) - - - -``` - -Below is example data from the image-keyboard-response trial taken from the experiment above. In addition to the standard data that is collected for this plugin, you can see the additional `webgazer_data` and `webgazer_targets` arrays. The `webgazer_data` shows 21 gaze location estimates during the 1-second image presentation. The `webgazer_targets` array shows that there was one target, the image-keyboard-response stimulus, and tells you the x- and y-coordinate boundaries for the target (image) rectangle. By comparing each of the x/y locations from the `webgazer_data` locations array with the target boundaries in `webgazer_targets`, you can determine if/when the estimated gaze location was inside the target area. - -```js -{ - "rt": null, - "stimulus": "img/blue.png", - "response": null, - "trial_type": "image-keyboard-response", - "trial_index": 4, - "time_elapsed": 30701, - "internal_node_id": "0.0-4.0", - "webgazer_data": [ - { "x": 1065, "y": 437, "t": 39}, - { "x": 943, "y": 377, "t": 79}, - { "x": 835, "y": 332, "t": 110}, - { "x": 731, "y": 299, "t": 146}, - { "x": 660, "y": 271, "t": 189}, - { "x": 606, "y": 251, "t": 238}, - { "x": 582, "y": 213, "t": 288}, - { "x": 551, "y": 200, "t": 335}, - { "x": 538, "y": 183, "t": 394}, - { "x": 514, "y": 177, "t": 436}, - { "x": 500, "y": 171, "t": 493}, - { "x": 525, "y": 178, "t": 542}, - { "x": 537, "y": 182, "t": 592}, - { "x": 543, "y": 178, "t": 633}, - { "x": 547, "y": 177, "t": 691}, - { "x": 558, "y": 174, "t": 739}, - { "x": 574, "y": 183, "t": 789}, - { "x": 577, "y": 197, "t": 838}, - { "x": 584, "y": 214, "t": 889}, - { "x": 603, "y": 218, "t": 937}, - { "x": 606, "y": 221, "t": 987} - ], - "webgazer_targets": [ - "#jspsych-image-keyboard-response-stimulus": { - "x": 490, - "y": 135, - "height": 300, - "width": 300, - "top": 135, - "bottom": 435, - "left": 490, - "right": 790 - } - ] -} -``` \ No newline at end of file + ``` \ No newline at end of file diff --git a/docs/overview/running-experiments.md b/docs/overview/running-experiments.md index f6b81cd6..49586f73 100644 --- a/docs/overview/running-experiments.md +++ b/docs/overview/running-experiments.md @@ -8,7 +8,10 @@ You can run your jsPsych experiment: The way that you run your experiment will have consequences for certain aspects about how the experiment works, and what your experiment will be able to do. This page explains what you need to know about both of these options. - +!!! info + If you are looking for a tool to automate deployment-related tasks, check out the [jsPsych Builder](https://github.com/bjoluc/jspsych-builder) CLI utility. + It automatically bundles scripts and style sheets, configures media preloading, and yields a zip file that contains all files for deployment (online or offline). + jsPsych Builder can also directly build JATOS experiment files (.jzip) that you can upload to a JATOS server (see [this section](#hosting-the-experiment-and-saving-the-data) below for more info about JATOS and other server options). ## Offline diff --git a/docs/plugins/jspsych-animation.md b/docs/plugins/jspsych-animation.md index c95568d8..257505eb 100644 --- a/docs/plugins/jspsych-animation.md +++ b/docs/plugins/jspsych-animation.md @@ -27,14 +27,24 @@ response | array | An array, where each element is an object representing a resp ## Examples -#### Displaying a single sequence multiple times +???+ example "Displaying a single sequence multiple times" + === "Code" + ```javascript + var animation_sequence = ["img/happy_face_1.jpg", "img/happy_face_2.jpg", "img/happy_face_3.jpg", "img/happy_face_4.jpg"]; -```javascript -var animation_sequence = ["img/face_1.jpg", "img/face_2.jpg", "img/face_3.jpg", "img/face_4.jpg", "img/face_3.jpg", "img/face_2.jpg"]; + var animation_trial = { + type: 'animation', + stimuli: animation_sequence, + sequence_reps: 3, + frame_time: 300, + prompt: '

Watch the faces.

', + }; + ``` -var animation_trial = { - type: 'animation', - stimuli: animation_sequence, - sequence_reps: 3 -}; -``` + === "Demo" +
+ +
+ + + Open demo in new tab \ No newline at end of file diff --git a/docs/plugins/jspsych-audio-button-response.md b/docs/plugins/jspsych-audio-button-response.md index 7b240fd6..ab8cf287 100644 --- a/docs/plugins/jspsych-audio-button-response.md +++ b/docs/plugins/jspsych-audio-button-response.md @@ -36,25 +36,39 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -#### Displaying question until subject gives a response +???+ example "Displaying question until subject gives a response" + === "Code" + ```javascript + var trial = { + type: 'audio-button-response', + stimulus: 'sound/tone.mp3', + choices: ['Low', 'High'], + prompt: "

Is the pitch high or low?

" + }; + ``` -```javascript -var trial = { - type: 'audio-button-response', - stimulus: 'sound/tone.mp3', - choices: ['Low', 'High'], - prompt: "

Is the pitch high or low?

" -}; -``` + === "Demo" +
+ +
-#### Using custom button HTML to use images as buttons + Open demo in new tab -```javascript -var trial = { - type: 'audio-button-response', - stimulus: 'sound/roar.mp3', - choices: ['lion.png', 'elephant.png', 'monkey.png'], - prompt: "

Which animal made the sound?

", - button_html: '' -}; -``` +???+ example "Using custom button HTML to use images as buttons" + === "Code" + ```javascript + var trial = { + type: 'audio-button-response', + stimulus: 'sound/roar.mp3', + choices: ['lion.png', 'elephant.png', 'monkey.png'], + prompt: "

Which animal made the sound?

", + button_html: '' + }; + ``` + + === "Demo" +
+ +
+ + Open demo in new tab \ No newline at end of file diff --git a/docs/plugins/jspsych-audio-keyboard-response.md b/docs/plugins/jspsych-audio-keyboard-response.md index e7e92902..fb857778 100644 --- a/docs/plugins/jspsych-audio-keyboard-response.md +++ b/docs/plugins/jspsych-audio-keyboard-response.md @@ -34,25 +34,40 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -#### Displaying trial until subject gives a response +???+ example "Trial continues until subject gives a response" + === "Code" + ```javascript + var trial = { + type: 'audio-keyboard-response', + stimulus: 'sound/tone.mp3', + choices: ['e', 'i'], + prompt: "

Is the pitch high or low? Press 'e' for low and 'i' for high.

", + response_ends_trial: true + }; + ``` + + === "Demo" +
+ +
-```javascript -var trial = { - type: 'audio-keyboard-response', - stimulus: 'sound/tone.mp3', - choices: ['e', 'i'], - prompt: "

Is the pitch high or low? Press 'e' for low and 'i' for high.

", - response_ends_trial: false -}; -``` + Open demo in new tab -#### Play a sound with no user response; trial ends after sound plays -```javascript -var trial = { - type: 'audio-keyboard-response', - stimulus: 'sound/tone.mp3', - choices: jsPsych.NO_KEYS, - trial_ends_after_audio: true -}; -``` +???+ example "Play a sound with no user response; trial ends after sound plays" + === "Code" + ```javascript + var trial = { + type: 'audio-keyboard-response', + stimulus: 'sound/tone.mp3', + choices: jsPsych.NO_KEYS, + trial_ends_after_audio: true + }; + ``` + + === "Demo" +
+ +
+ + Open demo in new tab diff --git a/docs/plugins/jspsych-audio-slider-response.md b/docs/plugins/jspsych-audio-slider-response.md index 6326d20b..d374ff03 100644 --- a/docs/plugins/jspsych-audio-slider-response.md +++ b/docs/plugins/jspsych-audio-slider-response.md @@ -41,13 +41,40 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -#### A simple rating scale +???+ example "A simple rating scale" + === "Code" + ```javascript + var trial = { + type: 'audio-slider-response', + stimulus: 'sound/speech_joke.mp3', + labels: ['Not Funny', 'Funny'], + prompt: '

How funny is the joke?

' + } + ``` -```javascript -var trial_1 = { - type: 'audio-slider-response', - stimulus: 'sound/speech_joke.mp3', - labels: ['Not Funny', 'Funny'], - prompt: '

How funny is the joke?

' -} -``` + === "Demo" +
+ +
+ + Open demo in new tab + +???+ example "No response allowed until audio finishes; subject must interact with slider to continue" + === "Code" + ```javascript + var trial = { + type: 'audio-slider-response', + stimulus: 'sound/speech_joke.mp3', + labels: ['Not Funny', 'Funny'], + prompt: '

How funny is the joke?

', + response_allowed_while_playing: false, + require_movement: true + } + ``` + + === "Demo" +
+ +
+ + Open demo in new tab \ No newline at end of file diff --git a/docs/plugins/jspsych-call-function.md b/docs/plugins/jspsych-call-function.md index b1ffba32..3465286b 100644 --- a/docs/plugins/jspsych-call-function.md +++ b/docs/plugins/jspsych-call-function.md @@ -24,58 +24,100 @@ value | any | The return value of the called function. ## Examples -#### Calling a simple function +???+ example "Calling a simple function" + === "Code" + ```javascript + var myfunc = function() { + return 'you called?'; + } -```javascript + var trial = { + type: 'call-function', + func: myfunc + } + ``` -var myfunc = function() { - return 'you called?'; -} + === "Demo" +
+ +
-var trial = { - type: 'call-function', - func: myfunc -} -``` + Open demo in new tab + -#### Using an anonymous function to pass variables +???+ example "Using an anonymous function to pass variables" + === "Code" + ```javascript + var myfunc = function(data){ + // data contains all the experiment data so far, + // so this function could implement code to write + // the data to a database. + console.log(data.values()) + } -```javascript + var trial = { + type: 'call-function', + func: function(){ myfunc(jsPsych.data.get()) } + } + ``` -var myfunc = function(data){ - // data contains all the experiment data so far, - // so this function could implement code to write - // the data to a database. -} + === "Demo" +
+ +
-var trial = { - type: 'call-function', - func: function(){ myfunc(jsPsych.data.get())} -} -``` + Open demo in new tab -#### Async function call +???+ example "Async function call: wait for data to be saved to a server" + === "Code" + There's no demo for this code, because it requires a server to communicate with. + ```javascript + var trial = { + type: 'call-function', + async: true, + func: function(done){ + // can perform async operations here like + // creating an XMLHttpRequest to communicate + // with a server + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + var response_data = xhttp.responseText; + // line below is what causes jsPsych to + // continue to next trial. response_data + // will be stored in jsPsych data object. + done(response_data); + } + }; + xhttp.open("GET", "path_to_server_script.php", true); + xhttp.send(); + } + } + ``` -```javascript -var trial = { - type: 'call-function', - async: true, - func: function(done){ - // can perform async operations here like - // creating an XMLHttpRequest to communicate - // with a server - var xhttp = new XMLHttpRequest(); - xhttp.onreadystatechange = function() { - if (this.readyState == 4 && this.status == 200) { - var response_data = xhttp.responseText; - // line below is what causes jsPsych to - // continue to next trial. response_data - // will be stored in jsPsych data object. - done(response_data); +???+ example "Async function call: simulate waiting for an event to finish" + === "Code" + ```javascript + var trial = { + type: 'call-function', + async: true, + func: function(done){ + // generate a delay between 1500 and 3000 milliseconds to simulate + // waiting for an event to finish after an unknown duration, + // then move on with the experiment + var rand_delay = (Math.floor(Math.random() * (3000 - 1500 + 1) + 1500)); + jsPsych.pluginAPI.setTimeout(function() { + // end the trial and save the delay duration to the data + done(rand_delay.toString()+"ms"); + }, rand_delay) } }; - xhttp.open("GET", "path_to_server_script.php", true); - xhttp.send(); - } -} -``` \ No newline at end of file + ``` + === "Demo" +
+ +
+ + Open demo in new tab + + diff --git a/docs/plugins/jspsych-canvas-button-response.md b/docs/plugins/jspsych-canvas-button-response.md index 30e5006f..13a1479e 100644 --- a/docs/plugins/jspsych-canvas-button-response.md +++ b/docs/plugins/jspsych-canvas-button-response.md @@ -32,35 +32,129 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu ## Examples -### Drawing circles based on parameters +???+ example "Drawing circles based on parameters" + === "Code" + ```javascript + function filledCirc(canvas, radius, color) { + var ctx = canvas.getContext("2d"); + ctx.beginPath(); + ctx.arc(150, 150, radius, 0, 2 * Math.PI); + ctx.fillStyle = color; + ctx.fill(); + } -```javascript -function filledCirc(canvas, radius, color){ - var ctx = canvas.getContext("2d"); - ctx.beginPath(); - ctx.arc(250, 250, radius, 0, 2 * Math.PI); - ctx.fillStyle = color; - ctx.fill() -} + var circle_1 = { + type: 'canvas-button-response', + stimulus: function(c) { + filledCirc(c, 100, 'blue'); + }, + canvas_size: [300, 300], + choices: ['Red', 'Green', 'Blue'], + prompt: '

What color is the circle?

', + data: {color: 'blue', radius: 100} + }; -var circle_1 = { - type: 'canvas-button-response', - stimulus: function (c) { - filledCirc(c, 100, 'blue'); - }, - choices: ['Red', 'Green', 'Blue'], - prompt: '

What color is the circle?

', - data: {color: 'blue', radius: 100} -}; + var circle_2 = { + type: 'canvas-button-response', + stimulus: function(c) { + filledCirc(c, 150, 'green'); + }, + canvas_size: [300, 300], + choices: ['Larger', 'Smaller'], + stimulus_duration: 1000, + prompt: '

Is this circle larger or smaller than the last one?

'+ + '

Stimulus will be hidden after 1 second.

', + data: {color: 'green', radius: 150} + }; + ``` -var circle_2 = { - type: 'canvas-button-response', - stimulus: function (c) { - filledCirc(c, 150, 'green'); - }, - choices: ['Larger', 'Smaller'], - prompt: '

Is this circle larger or smaller than the last one?

', - data: {color: 'green', radius: 150} -}; + === "Demo" +
+ +
-``` \ No newline at end of file + Open demo in new tab + +???+ example "Using an anonymous stimulus function" + === "Code" + ```javascript + var lines = { + type: 'canvas-button-response', + stimulus: function(c) { + var ctx = c.getContext("2d"); + // first line + ctx.beginPath(); + ctx.moveTo(200, 10); + ctx.lineTo(200, 250); + ctx.lineWidth = 10; + ctx.strokeStyle = 'MediumBlue'; + ctx.stroke(); + // second line + ctx.beginPath(); + ctx.moveTo(20, 100); + ctx.lineTo(100, 250); + ctx.lineWidth = 10; + ctx.strokeStyle = 'MediumPurple'; + ctx.stroke(); + }, + canvas_size: [300, 300], + choices: ['Blue line', 'Purple line'], + prompt: '

Which line is longer?

', + data: {line1_color: 'blue', line1_length: 290, line2_color: "purple", line2_length: 170} + }; + ``` + + === "Demo" +
+ +
+ + Open demo in new tab + + +???+ example "Using the canvas stimulus function with timeline variables, and recording the correctness of responses" + === "Code" + ```javascript + function filledCirc(canvas, radius, color) { + var ctx = canvas.getContext("2d"); + ctx.beginPath(); + ctx.arc(150, 150, radius, 0, 2 * Math.PI); + ctx.fillStyle = color; + ctx.fill(); + } + + var circle_procedure = { + timeline: [ + { + type: 'canvas-button-response', + stimulus: function(c) { + filledCirc(c, jsPsych.timelineVariable('radius'), jsPsych.timelineVariable('color')); + }, + canvas_size: [300, 300], + choices: ['Red', 'Green', 'Blue'], + prompt: '

What color is the circle?

', + data: { + radius: jsPsych.timelineVariable('radius'), + color: jsPsych.timelineVariable('color'), + correct_response: jsPsych.timelineVariable('correct_response') + }, + on_finish: function(data){ + data.correct = data.response == data.correct_response; + } + } + ], + timeline_variables: [ + {radius: 80, color: 'red', correct_response: 0}, + {radius: 100, color: 'green', correct_response: 1}, + {radius: 50, color: 'blue', correct_response: 2} + ], + randomize_order: true + }; + ``` + + === "Demo" +
+ +
+ + Open demo in new tab diff --git a/docs/plugins/jspsych-canvas-keyboard-response.md b/docs/plugins/jspsych-canvas-keyboard-response.md index f0347839..0cbdc0cd 100644 --- a/docs/plugins/jspsych-canvas-keyboard-response.md +++ b/docs/plugins/jspsych-canvas-keyboard-response.md @@ -29,40 +29,56 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu ## Examples -### Draw rectangle and wait for response +???+ example "Draw rectangle and wait for response" + === "Code" + ```javascript + function drawRect(c){ + var ctx = c.getContext('2d'); + ctx.beginPath(); + ctx.rect(30, 30, 200, 50); + ctx.stroke(); + } -```javascript -function drawRect(c){ - var ctx = c.getContext('2d'); - ctx.beginPath(); - ctx.rect(30, 30, 200, 50); - ctx.stroke(); -} + var trial = { + type: 'canvas-keyboard-response', + canvas_size: [300, 300], + stimulus: drawRect, + choices: ['e','i'], + prompt: '

Is this a circle or a rectangle? Press "e" for circle and "i" for rectangle.

', + data: {shape: 'rectangle'} + } + ``` + === "Demo" +
+ +
-var trial = { - type: 'canvas-keyboard-response', - stimulus: drawRect, - choices: ['e','i'], - prompt: '

Is this a circle or a rectangle? Press "e" for circle and "i" for rectangle.

', - data: {shape: 'rectangle'} -} -``` + Open demo in new tab + +???+ example "Draw circle, no response allowed" + === "Code" + ```javascript + function drawCirc(c){ + var ctx = c.getContext('2d'); + ctx.beginPath(); + ctx.arc(100, 75, 50, 0, 2 * Math.PI); + ctx.stroke(); + } -### Draw circle, no response allowed + var trial = { + type: 'canvas-keyboard-response', + canvas_size: [300, 300], + stimulus: drawCirc, + prompt: '

No key response is allowed.

The stimulus disappears after 3 seconds.

', + choices: jsPsych.NO_KEYS, + trial_duration: 3000, + data: {shape: 'circle', radius: 50} + } + ``` + + === "Demo" +
+ +
-```javascript -function drawCirc(c){ - var ctx = c.getContext('2d'); - ctx.beginPath(); - ctx.arc(100, 75, 50, 0, 2 * Math.PI); - ctx.stroke(); -} - -var trial = { - type: 'canvas-keyboard-response', - stimulus: drawCirc, - choices: jsPsych.NO_KEYS, - trial_duration: 1000, - data: {shape: 'circle', radius: 50} -} -``` \ No newline at end of file + Open demo in new tab diff --git a/docs/plugins/jspsych-canvas-slider-response.md b/docs/plugins/jspsych-canvas-slider-response.md index e96942e9..efdf6cb1 100644 --- a/docs/plugins/jspsych-canvas-slider-response.md +++ b/docs/plugins/jspsych-canvas-slider-response.md @@ -36,54 +36,72 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu ## Examples -### Draw two squares +???+ example "Draw two squares" + === "Code" + ```javascript + var colors = ['#FF3333', '#FF6A33']; -```javascript -var colors = [#'FF3333', '#FF6A33']; + function twoSquares(c) { + var ctx = c.getContext('2d'); + ctx.fillStyle = colors[0]; + ctx.fillRect(200, 70, 40, 40); + ctx.fillStyle = colors[1]; + ctx.fillRect(260, 70, 40, 40); + } -function twoSquares(c) { - var ctx = c.getContext('2d'); - ctx.fillStyle = colors[0]; - ctx.fillRect(200, 70, 40, 40); - ctx.fillStyle = colors[1]; - ctx.fillRect(260, 70, 40, 40); -} + var trial = { + type: 'canvas-slider-response', + stimulus: twoSquares, + labels: ['0','10'], + canvas_size: [150, 500], + prompt: '

How different would you say the colors of these two squares are on a scale from 0 (the same) to 10 (completely different)

', + data: {color1: colors[0], color2: colors[1]} + } + ``` -var trial = { - type: 'canvas-slider-response', - stimulus: twoSquares, - labels: ['0','10'], - canvas_size: [200, 500], - prompt: '

How different would you say the colors of these two squares are on a scale from 0 (the same) to 10 (completely different)

', - data: {color1: colors[0], color2: colors[1]} -} -``` + === "Demo" +
+ +
-### Draw two squares with additional parameters + Open demo in new tab -```javascript -var colors; -function twoSquares(c, colors) { - var ctx = c.getContext('2d'); - ctx.fillStyle = colors[0]; - ctx.fillRect(200, 70, 40, 40); - ctx.fillStyle = colors[1]; - ctx.fillRect(260, 70, 40, 40); -} +???+ example "Draw two squares with additional parameters" + === "Code" + ```javascript + var colors; + + function twoSquares(c, colors) { + var ctx = c.getContext('2d'); + ctx.fillStyle = colors[0]; + ctx.fillRect(200, 70, 40, 40); + ctx.fillStyle = colors[1]; + ctx.fillRect(260, 70, 40, 40); + } + + var trial = { + type: 'canvas-slider-response', + stimulus: function(c) { + colors = ['darkred', 'cyan']; + twoSquares(c, colors); + }, + labels: ['Exactly
the same','Totally
different'], + canvas_size: [200, 500], + prompt: '

How different would you say the colors of these two squares are?

', + on_finish: function(data) { + data.color1 = colors[0]; + data.color2 = colors[1]; + } + }; + + ``` + + === "Demo" +
+ +
+ + Open demo in new tab + -var trial = { - type: 'canvas-slider-response', - stimulus: function(c) { - colors = ['darkred', 'cyan']; - twoSquares(c, colors); - }, - labels: ['Exactly
the same','Totally
different'], - canvas_size: [200, 500], - prompt: '

How different would you say the colors of these two squares are?

', - on_finish: function(data) { - data.color1 = colors[0]; - data.color2 = colors[1]; - } -}; -``` \ No newline at end of file diff --git a/docs/plugins/jspsych-categorize-animation.md b/docs/plugins/jspsych-categorize-animation.md index 88c6a480..bf8b6479 100644 --- a/docs/plugins/jspsych-categorize-animation.md +++ b/docs/plugins/jspsych-categorize-animation.md @@ -17,7 +17,7 @@ In addition to the [parameters available in all plugins](/overview/plugins#param | frame_time | numeric | 500 | How long to display each image (in milliseconds). | | sequence_reps | numeric | 1 | How many times to show the entire sequence. | | allow_response_before_complete | boolean | false | If true, the subject can respond before the animation sequence finishes. | -| prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g., which key to press). | +| prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus or the end of the animation depending on the allow_response_before_complete parameter. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g., which key to press). | | feedback_duration | numeric | 2000 | How long to show the feedback (milliseconds). | | render_on_canvas | boolean | true | If true, the images will be drawn onto a canvas element. This prevents a blank screen (white flash) between consecutive images in some browsers, like Firefox and Edge. If false, the image will be shown via an img element, as in previous versions of jsPsych. | @@ -34,27 +34,53 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -#### Basic example +???+ example "Basic example" + === "Code" + ```javascript + var animation_trial = { + type: 'categorize-animation', + stimuli: [ + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg', + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg', + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg', + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_4.jpg' + ], + prompt: `Press the P or Q key.`, + choices: ['p', 'q'], + key_answer: 'q', + }; + ``` + === "Demo" +
+ +
-```javascript -var animation_trial = { - type: 'categorize-animation', - stimuli: ["img/face_3.jpg", "img/face_2.jpg", "img/face_4.jpg", "img/face_1.jpg"], - choices: ['p', 'q'], - key_answer: 'q', -}; -``` + Open demo in new tab -#### Giving feedback with `%ANS%` string +???+ example "Giving feedback with `%ANS%` string" + === "Code" + ```javascript + var images = [ + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg', + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg', + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg', + 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_4.jpg' + ]; -```javascript -var animation_trial = { - type: 'categorize-animation', - stimuli: ["img/face_3.jpg", "img/face_2.jpg", "img/face_4.jpg", "img/face_1.jpg"], - choices: ['p', 'q'], - key_answer: 'q', - text_answer: 'Dax', // the label for the sequence is 'Dax' - correct_text: 'Correct! This was a %ANS%.', - incorrect_text: 'Incorrect. This was a %ANS%.' -}; -``` + var animation_trial = { + type: 'categorize-animation', + stimuli: images, + choices: ['p', 'q'], + prompt: `Press the P or Q key.`, + key_answer: 'q', + text_answer: 'Dax', // the label for the sequence is 'Dax' + correct_text: 'Correct! This was a %ANS%.', + incorrect_text: 'Incorrect. This was a %ANS%.' + }; + ``` + === "Demo" +
+ +
+ + Open demo in new tab diff --git a/docs/plugins/jspsych-categorize-html.md b/docs/plugins/jspsych-categorize-html.md index 6453b7cc..73c91dbf 100644 --- a/docs/plugins/jspsych-categorize-html.md +++ b/docs/plugins/jspsych-categorize-html.md @@ -36,18 +36,23 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -#### Categorizing HTML content - -```javascript -var categorization_trial = { - type: 'categorize', - stimulus: '

B

', - key_answer: 'p', - text_answer: 'letter', - choices: ['p', 'q'], - correct_text: "

Correct, this is a %ANS%.

", - incorrect_text: "

Incorrect, this is a %ANS%.

", - prompt: "

Press p for letter. Press q for number.

" -}; -``` +???+ example "Categorizing HTML content" + === "Code" + ```javascript + var categorization_trial = { + type: 'categorize-html', + stimulus: '

B

', + key_answer: 'p', + text_answer: 'letter', + choices: ['p', 'q'], + correct_text: "

Correct, this is a %ANS%.

", + incorrect_text: "

Incorrect, this is a %ANS%.

", + prompt: "

Press p for letter. Press q for number.

" + }; + ``` + === "Demo" +
+ +
+ Open demo in new tab diff --git a/docs/plugins/jspsych-categorize-image.md b/docs/plugins/jspsych-categorize-image.md index a63e5ad4..fe93e0f2 100644 --- a/docs/plugins/jspsych-categorize-image.md +++ b/docs/plugins/jspsych-categorize-image.md @@ -37,17 +37,23 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -#### Categorizing an image +???+ example "Categorizing an image" + === "Code" + ```javascript + var categorization_trial = { + type: 'categorize-image', + stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/blue.png', + key_answer: 'b', + text_answer: 'Blue', + choices: ['r', 'g', 'b'], + correct_text: "

Correct! The color is %ANS%.

", + incorrect_text: "

Incorrect. The color is %ANS%.

", + prompt: "

Is the color of this circle (R)ed, (G)reen, or (B)lue?

" + }; + ``` + === "Demo" +
+ +
-```javascript -var categorization_trial = { - type: 'categorize-image', - stimulus: 'img/harrypotter.png', - key_answer: 'g', - text_answer: 'Gryffindor', - choices: ['g', 'h', 'r', 's'], - correct_text: "

Correct! This person is a %ANS%.

", - incorrect_text: "

Incorrect. This person is a %ANS%.

", - prompt: "

Is this person a (G)ryffindor, (H)ufflepuff, (R)avenclaw, or (S)lytherin?

" -}; -``` + Open demo in new tab diff --git a/docs/plugins/jspsych-cloze.md b/docs/plugins/jspsych-cloze.md index 3e78acb6..c0678690 100644 --- a/docs/plugins/jspsych-cloze.md +++ b/docs/plugins/jspsych-cloze.md @@ -23,23 +23,36 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -#### Simple cloze using default settings (no check against correct solution, no custom button text) +???+ example "Simple cloze using default settings (no check against correct solution, no custom button text)" + === "Code" + ```javascript + var cloze_trial = { + type: 'cloze', + text: 'The %% is the largest terrestrial mammal. It lives in both %% and %%.' + }; + ``` + === "Demo" +
+ +
-```javascript -var trial = { - type: 'cloze', - text: 'The %% is the largest terrestrial mammal. It lives in both %% and %%.' -}; -``` + Open demo in new tab -#### More elaborate example (with check against correct solution, custom error handling and modified button text) -```javascript -var trial = { - type: 'cloze', - text: 'A rectangle has % 4 % corners and a triangle has % 3 %.', - check_answers: true, - button_text: 'Next', - mistake_fn: function(){alert("Wrong answer. Please check again.")} -}; -``` \ No newline at end of file +???+ example "More elaborate example (with check against correct solution, custom error handling and modified button text)" + === "Code" + ```javascript + var cloze_trial = { + type: 'cloze', + text: 'A rectangle has % 4 % corners and a triangle has % 3 %.', + check_answers: true, + button_text: 'Next', + mistake_fn: function(){alert("Wrong answer. Please check again.")} + }; + ``` + === "Demo" +
+ +
+ + Open demo in new tab diff --git a/docs/plugins/jspsych-external-html.md b/docs/plugins/jspsych-external-html.md index ca00aea0..d85f0dcc 100644 --- a/docs/plugins/jspsych-external-html.md +++ b/docs/plugins/jspsych-external-html.md @@ -44,27 +44,33 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ``` -##### jsPsych code to load above page. -```javascript -// sample function that might be used to check if a subject has given -// consent to participate. -var check_consent = function(elem) { - if (document.getElementById('consent_checkbox').checked) { - return true; - } - else { - alert("If you wish to participate, you must check the box next to the statement 'I agree to participate in this study.'"); - return false; - } - return false; -}; +???+ example "jsPsych code to load above page." + === "Code" + ```javascript + // sample function that might be used to check if a subject has given + // consent to participate. + var check_consent = function(elem) { + if (document.getElementById('consent_checkbox').checked) { + return true; + } + else { + alert("If you wish to participate, you must check the box next to the statement 'I agree to participate in this study.'"); + return false; + } + return false; + }; + // declare the block. + var trial = { + type:'external-html', + url: "external_page.html", + cont_btn: "start", + check_fn: check_consent + }; + ``` + === "Demo" +
+ +
-// declare the block. -var trial = { - type:'external-html', - url: "external_page.html", - cont_btn: "start", - check_fn: check_consent -}; -``` + Open demo in new tab diff --git a/docs/plugins/jspsych-free-sort.md b/docs/plugins/jspsych-free-sort.md index 2902863c..0c011aa9 100644 --- a/docs/plugins/jspsych-free-sort.md +++ b/docs/plugins/jspsych-free-sort.md @@ -40,17 +40,23 @@ rt | numeric | The response time in milliseconds for the participant to finish a ## Examples -#### Basic example +???+ example "Basic example" + === "Code" + ```javascript + var sort_trial = { + type: 'free-sort', + stimuli: sorting_stimuli, + stim_width: 80, + stim_height: 60, + sort_area_width: 500, + sort_area_height: 500, + prompt: "

Click and drag the images below to sort them so that similar items are close together.

" + }; + ``` + === "Demo" +
+ +
-```javascript -var sorting_stimuli = []; -for (var i = 1; i <= 12; i++) { - sorting_stimuli.push("img/cell_img_" + i + ".jpg"); -} + Open demo in new tab -var sort_trial = { - type: 'free-sort', - stimuli: sorting_stimuli, - prompt: "

Click and drag the images below to sort them so that similar items are close together.

" -}; -``` diff --git a/docs/plugins/jspsych-fullscreen.md b/docs/plugins/jspsych-fullscreen.md index 9f668566..2935e34a 100644 --- a/docs/plugins/jspsych-fullscreen.md +++ b/docs/plugins/jspsych-fullscreen.md @@ -2,7 +2,8 @@ The fullscreen plugin allows the experiment to enter or exit fullscreen mode. For security reasons, all browsers require that entry into fullscreen mode is triggered by a user action. To enter fullscreen mode, this plugin has the user click a button. Exiting fullscreen mode can be done without user input. -Safari does not support keyboard input when the browser is in fullscreen mode. Therefore, the function will not launch fullscreen mode on Safari. The experiment will ignore any trials using the fullscreen plugin in Safari. +!!! warning + Safari does not support keyboard input when the browser is in fullscreen mode. Therefore, the function will not launch fullscreen mode on Safari. The experiment will ignore any trials using the fullscreen plugin in Safari. ## Parameters @@ -25,33 +26,37 @@ success | boolean | true if the browser supports fullscreen mode (i.e., is not S ## Examples -#### Entering and exiting fullscreen -```javascript -var timeline = []; +???+ example "Entering and exiting fullscreen" + === "Code" + ```javascript + var enter_fullscreen = { + type: 'fullscreen', + fullscreen_mode: true + } -timeline.push({ - type: 'fullscreen', - fullscreen_mode: true -}); + var trial_in_fullscreen = { + type: 'html-button-response', + stimulus: 'This trial will be in fullscreen mode.', + choices: ['Continue'] + } -timeline.push({ - type: 'html-keyboard-response', - stimulus: 'This trial will be in fullscreen mode.' -}); + var exit_fullscreen = { + type: 'fullscreen', + fullscreen_mode: false, + delay_after: 0 + } -// exit fullscreen mode -timeline.push({ - type: 'fullscreen', - fullscreen_mode: false -}); + var trial_after_fullscreen = { + type: 'html-button-response', + stimulus: 'This trial will NOT be in fullscreen mode.', + choices: ['Continue'] + } + ``` -timeline.push({ - type: 'html-keyboard-response', - stimulus: 'This trial will NOT be in fullscreen mode.' -}); + === "Demo" +
+ +
-jsPsych.init({ - timeline: timeline -}); -``` + Open demo in new tab diff --git a/docs/plugins/jspsych-html-button-response.md b/docs/plugins/jspsych-html-button-response.md index 951b948a..7ccb701c 100644 --- a/docs/plugins/jspsych-html-button-response.md +++ b/docs/plugins/jspsych-html-button-response.md @@ -30,13 +30,21 @@ stimulus | string | The HTML content that was displayed on the screen. ## Examples -#### Displaying question until subject gives a response +???+ example "Displaying question until subject gives a response" + === "Code" + ```javascript + var trial = { + type: 'html-button-response', + stimulus: '

Running

', + choices: ['Healthy', 'Unhealthy'], + prompt: "

Is this activity healthy or unhealthy?

" + }; + ``` + === "Demo" +
+ +
+ + Open demo in new tab + -```javascript -var trial = { - type: 'html-button-response', - stimulus: '

Running

', - choices: ['Healthy', 'Unhealthy'], - prompt: "

Is this activity healthy or unhealthy?

" -}; -``` diff --git a/docs/plugins/jspsych-html-keyboard-response.md b/docs/plugins/jspsych-html-keyboard-response.md index 201d0a87..20b3af3a 100644 --- a/docs/plugins/jspsych-html-keyboard-response.md +++ b/docs/plugins/jspsych-html-keyboard-response.md @@ -28,24 +28,36 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -#### Displaying trial until subject gives a response +???+ example "Displaying trial until subject gives a response" + === "Code" + ```javascript + var trial = { + type: 'html-keyboard-response', + stimulus: '

Running

', + choices: ['e', 'i'], + prompt: "

Is this activity healthy or unhealthy?

Press 'e' for healthy and 'i' for unhealthy.

" + }; + ``` + === "Demo" +
+ +
-```javascript -var trial = { - type: 'html-keyboard-response', - stimulus: '

Running

', - choices: ['e', 'i'], - prompt: "

Is this activity healthy or unhealthy? Press 'e' for healthy and 'i' for unhealthy.

" -}; -``` + Open demo in new tab -#### Showing a 1 second fixation cross; no response allowed +???+ example "Showing a 1 second fixation cross; no response allowed" + === "Code" + ```javascript + var trial = { + type: 'html-keyboard-response', + stimulus: '

+

', + choices: jsPsych.NO_KEYS, + trial_duration: 1000, + }; + ``` + === "Demo" +
+ +
-```javascript -var trial = { - type: 'html-keyboard-response', - stimulus: '

+

', - choices: jsPsych.NO_KEYS, - trial_duration: 1000, -}; -``` + Open demo in new tab diff --git a/docs/plugins/jspsych-html-slider-response.md b/docs/plugins/jspsych-html-slider-response.md index 956ba87d..f7e89708 100644 --- a/docs/plugins/jspsych-html-slider-response.md +++ b/docs/plugins/jspsych-html-slider-response.md @@ -35,11 +35,20 @@ slider_start | numeric | The starting value of the slider. ## Examples -```javascript -var trial = { - type: 'html-slider-response', - stimulus: '

Running

', - labels: ['healthy', 'unhealthy'], - prompt: "

How healthy/unhealthy is this activity?

" -}; -``` +???+ example "Displaying question until subject move the slider" + === "Code" + ```javascript + var trial = { + type: 'html-slider-response', + stimulus: '

Running

', + require_movement: true, + labels: ['healthy', 'unhealthy'], + prompt: "

How healthy/unhealthy is this activity?

" + }; + ``` + === "Demo" +
+ +
+ + Open demo in new tab diff --git a/docs/plugins/jspsych-iat-html.md b/docs/plugins/jspsych-iat-html.md index bd69950c..bc3c67bc 100644 --- a/docs/plugins/jspsych-iat-html.md +++ b/docs/plugins/jspsych-iat-html.md @@ -35,30 +35,28 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -```javascript -var trial_block = { - type: 'iat-html', - stimulus: 'Golf', - stim_key_association: 'left', - html_when_wrong: 'X', - bottom_instructions: '

If you press the wrong key, a red X will appear. Press the other key to continue

', - force_correct_key_press: true, - display_feedback: true, - trial_duration: 3000, //Only if display_feedback is false - left_category_key: 'e', - right_category_key: 'i', - left_category_label: ['OLD'], - right_category_label: ['YOUNG'], - response_ends_trial: true -} +???+ example "Displaying IAT question using html" + === "Code" + ```javascript + var trial = { + type: 'iat-html', + stimulus: 'Golf', + stim_key_association: 'left', + html_when_wrong: 'X', + bottom_instructions: '

If you press the wrong key, a red X will appear. Press the other key to continue

', + force_correct_key_press: true, + display_feedback: true, + trial_duration: 3000, //Only if display_feedback is false + left_category_key: 'e', + right_category_key: 'i', + left_category_label: ['OLD'], + right_category_label: ['YOUNG'], + response_ends_trial: true + } + ``` + === "Demo" +
+ +
-var timeline = []; -timeline.push(trial_block); - -jsPsych.init({ - timeline: timeline, - on_finish: function() { - jsPsych.data.displayData(); - } -}); -``` + Open demo in new tab diff --git a/docs/plugins/jspsych-iat-image.md b/docs/plugins/jspsych-iat-image.md index 943b503b..7dab4048 100644 --- a/docs/plugins/jspsych-iat-image.md +++ b/docs/plugins/jspsych-iat-image.md @@ -35,30 +35,28 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -```javascript -var trial_block = { - type: 'iat-image', - stimulus: 'img/blue.png', - stim_key_association: 'left', - html_when_wrong: 'X', - bottom_instructions: '

If you press the wrong key, a red X will appear. Press the other key to continue

', - force_correct_key_press: true, - display_feedback: true, - trial_duration: 3000, //Only if display_feedback is false - left_category_key: 'e', - right_category_key: 'i', - left_category_label: ['OLD'], - right_category_label: ['YOUNG'], - response_ends_trial: true -} +???+ example "Displaying IAT question using image files" + === "Code" + ```javascript + var trial_block = { + type: 'iat-image', + stimulus: 'img/blue.png', + stim_key_association: 'left', + html_when_wrong: 'X', + bottom_instructions: '

If you press the wrong key, a red X will appear. Press the other key to continue

', + force_correct_key_press: true, + display_feedback: true, + trial_duration: 3000, //Only if display_feedback is false + left_category_key: 'e', + right_category_key: 'i', + left_category_label: ['OLD'], + right_category_label: ['YOUNG'], + response_ends_trial: true + } + ``` + === "Demo" +
+ +
-var timeline = []; -timeline.push(trial_block); - -jsPsych.init({ - timeline: timeline, - on_finish: function() { - jsPsych.data.displayData(); - } -}); -``` + Open demo in new tab diff --git a/docs/plugins/jspsych-image-button-response.md b/docs/plugins/jspsych-image-button-response.md index 10a4f3bd..741ad681 100644 --- a/docs/plugins/jspsych-image-button-response.md +++ b/docs/plugins/jspsych-image-button-response.md @@ -13,7 +13,7 @@ Parameter | Type | Default Value | Description stimulus | string | undefined | The path of the image file to be displayed. stimulus_height | integer | null | Set the height of the image in pixels. If left null (no value specified), then the image will display at its natural height. stimulus_width | integer | null | Set the width of the image in pixels. If left null (no value specified), then the image will display at its natural width. -maintain_aspect_ration | boolean | true | If setting *only* the width or *only* the height and this parameter is true, then the other dimension will be scaled to maintain the image's aspect ratio. +maintain_aspect_ratio | boolean | true | If setting *only* the width or *only* the height and this parameter is true, then the other dimension will be scaled to maintain the image's aspect ratio. choices | array of strings | [] | Labels for the buttons. Each different string in the array will generate a different button. button_html | HTML string | `''` | A template of HTML for generating the button elements. You can override this to create customized buttons of various kinds. The string `%choice%` will be changed to the corresponding element of the `choices` array. You may also specify an array of strings, if you need different HTML to render for each button. If you do specify an array, the `choices` array and this array must have the same length. The HTML from position 0 in the `button_html` array will be used to create the button for element 0 in the `choices` array, and so on. prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g., which key to press). @@ -36,13 +36,19 @@ stimulus | string | The path of the image that was displayed. ## Examples -#### Displaying question until subject gives a response +???+ example "Displaying question until subject gives a response" + === "Code" + ```javascript + var trial = { + type: 'image-button-response', + stimulus: 'img/happy_face_1.png', + choices: ['Happy', 'Sad'], + prompt: "

Is this person happy or sad?

" + }; + ``` + === "Demo" +
+ +
-```javascript -var trial = { - type: 'image-button-response', - stimulus: 'img/happy_face_1.png', - choices: ['Happy', 'Sad'], - prompt: "

Is this person happy or sad?

" -}; -``` + Open demo in new tab diff --git a/docs/plugins/jspsych-image-keyboard-response.md b/docs/plugins/jspsych-image-keyboard-response.md index 1fcd20b3..5d044549 100644 --- a/docs/plugins/jspsych-image-keyboard-response.md +++ b/docs/plugins/jspsych-image-keyboard-response.md @@ -33,26 +33,37 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -#### Displaying trial until subject gives a response +???+ example "Displaying trial until subject gives a response" + === "Code" + ```javascript + var trial = { + type: 'image-keyboard-response', + stimulus: 'img/happy_face_1.png', + choices: ['e', 'i'], + prompt: "

Is this person happy or sad? Press 'e' for happy and 'i' for sad.

", + }; + ``` + === "Demo" +
+ +
-```javascript -var trial = { - type: 'image-keyboard-response', - stimulus: 'img/happy_face_1.png', - choices: ['e', 'i'], - prompt: "

Is this person happy or sad? Press 'e' for happy and 'i' for sad.

", - response_ends_trial: false -}; -``` + Open demo in new tab -#### Displaying image for a fixed duration; no response allowed +???+ example "Displaying image for a fixed duration; no response allowed" + === "Code" + ```javascript + var trial = { + type: 'image-keyboard-response', + stimulus: 'img/happy_face_1.png', + choices: jsPsych.NO_KEYS, + prompt: "

Study this face for 5 seconds.

", + trial_duration: 5000 + }; + ``` + === "Demo" +
+ +
-```javascript -var trial = { - type: 'image-button-response', - stimulus: 'img/happy_face_1.png', - choices: jsPsych.NO_KEYS, - prompt: "

Study this face for 5 seconds.

", - trial_duration: 5000 -}; -``` + Open demo in new tab diff --git a/docs/plugins/jspsych-image-slider-response.md b/docs/plugins/jspsych-image-slider-response.md index b9f56976..83959072 100644 --- a/docs/plugins/jspsych-image-slider-response.md +++ b/docs/plugins/jspsych-image-slider-response.md @@ -41,14 +41,19 @@ slider_start | numeric | The starting value of the slider. ## Examples -#### Displaying trial until subject gives a response +???+ example "Displaying trial until subject gives a response" + === "Code" + ```javascript + var trial = { + type: 'image-slider-response', + stimulus: 'img/happy_face_1.png', + labels: ['happy', 'sad'], + prompt: "

How happy/sad is this person?

", + }; + ``` + === "Demo" +
+ +
-```javascript -var trial = { - type: 'image-slider-response', - stimulus: 'img/happy_face_1.png', - labels: ['happy', 'sad'], - prompt: "

How happy/sad is this person?

", - response_ends_trial: false -}; -``` + Open demo in new tab diff --git a/docs/plugins/jspsych-instructions.md b/docs/plugins/jspsych-instructions.md index efb063fc..07362d86 100644 --- a/docs/plugins/jspsych-instructions.md +++ b/docs/plugins/jspsych-instructions.md @@ -28,31 +28,76 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat | view_history | array | An array containing the order of pages the subject viewed (including when the subject returned to previous pages) and the time spent viewing each page. Each object in the array represents a single page view, and contains keys called `page_index` (the page number, starting with 0) and `viewing_time` (duration of the page view). This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. | | rt | numeric | The response time in milliseconds for the subject to view all of the pages. | -## Example +## Examples #### Showing simple text instructions -```javascript -var trial = { - type: 'instructions', - pages: [ - 'Welcome to the experiment. Click next to begin.', - 'This is the second page of instructions.', - 'This is the final page.' - ], - show_clickable_nav: true -} -``` +???+ example "Showing simple text instructions" + === "Code" + ```javascript + var trial = { + type: 'instructions', + pages: [ + 'Welcome to the experiment. Click next to begin.', + 'This is the second page of instructions.', + 'This is the final page.' + ], + show_clickable_nav: true + } + ``` + + === "Demo" +
+ +
+ + Open demo in new tab #### Including images -```javascript -var trial = { - type: 'instructions', - pages: [ - 'Welcome to the experiment. Click next to begin.', - 'Here is a picture of what you will do: ' - ], - show_clickable_nav: true -} -``` +???+ example "Including Images" + === "Code" + ```javascript + var trial = { + type: 'instructions', + pages: [ + 'Welcome to the experiment. Click next to begin.', + 'You will be looking at images of arrows: ' + + '
' + + '' + ], + show_clickable_nav: true + } + ``` + + === "Demo" +
+ +
+ + Open demo in new tab + +#### Changing Button Text + +???+ example "Changing Button Text" + === "Code" + ```javascript + var trial = { + type: 'instructions', + pages: [ + 'Welcome to the experiment. Click next to begin.', + 'This is the second page of instructions.', + 'This is the final page.' + ], + button_label_next: "Continue", + button_label_previous: "Return to the dark side", + show_clickable_nav: true + } + ``` + + === "Demo" +
+ +
+ + Open demo in new tab \ No newline at end of file diff --git a/docs/plugins/jspsych-maxdiff.md b/docs/plugins/jspsych-maxdiff.md index 3792f89c..9b20e1b0 100644 --- a/docs/plugins/jspsych-maxdiff.md +++ b/docs/plugins/jspsych-maxdiff.md @@ -29,13 +29,20 @@ response | object | An object with two keys, `left` and `right`, containing the ## Examples -#### Basic example +???+ example "Basic example" + === "Code" + ```javascript + var maxdiff_page = { + type: 'maxdiff', + alternatives: ['apple', 'orange', 'pear', 'banana'], + labels: ['Most Preferred', 'Least Preferred'], + preamble: '

Please select your most preferred and least preferred fruits.

' + }; + ``` + === "Demo" +
+ +
+ + Open demo in new tab -```javascript -var maxdiff_page = { - type: 'maxdiff', - alternatives: ['apple', 'orange', 'pear', 'banana'], - labels: ['Most Preferred', 'Least Preferred'], - preamble: '

Please select your most preferred and least preferred fruits.

' -}; -``` \ No newline at end of file diff --git a/docs/plugins/jspsych-preload.md b/docs/plugins/jspsych-preload.md index ed8e2a3e..a723e52b 100644 --- a/docs/plugins/jspsych-preload.md +++ b/docs/plugins/jspsych-preload.md @@ -41,88 +41,153 @@ In addition to the [default data collected by all plugins](/overview/plugins/#da ## Examples -#### Loading files automatically based on the main timeline +???+ example "Automatically preloading based on other trials" + === "Code" + ```javascript + var preload = { + type: 'preload', + auto_preload: true + } -```javascript -var preload = { - type: 'preload', - auto_preload: true // automatically load all files based on the main timeline -}; + var trial_1 = { + type: 'image-button-response', + stimulus: 'img/happy_face_1.jpg', + choices: ['Next'] + } -// define other trials to add to the timeline... + var trial_2 = { + type: 'image-button-response', + stimulus: 'img/happy_face_2.jpg', + choices: ['Next'] + } -jsPsych.init({ - timeline: [preload, trial1, trial2, trial3] -}); -``` + var trial_3 = { + type: 'image-button-response', + stimulus: 'img/happy_face_3.jpg', + choices: ['Next'] + } + ``` + The `stimulus` parameter from the `image-button-response` trials will be automatically preloaded. -#### Loading files manually + === "Demo" +
+ +
-```javascript -var preload = { - type: 'preload', - images: ['file1.png'] -}; -``` + Open demo in new tab -#### Combining automatic and manual methods +???+ example "Manually preloading an image" + === "Code" + ```javascript + var preload = { + type: 'preload', + images: ['img/sad_face_1.jpg'] + } -```javascript -// automatically load stimuli from the main timeline, -// and manually add any other stimuli files that can't be loaded automatically -var preload = { - type: 'preload', - auto_preload: true, - images: ['image1.png','image2.png'] -}; + var trial_1 = { + type: 'html-button-response', + stimulus: ` +

Study this face

+ + `, + choices: ['Next'] + } + ``` + Because the image is embedded inside HTML from the `html-button-response` plugin, it will not be automatically preloaded. Instead we can preload manually. -// define other trials to add to the timeline... + === "Demo" +
+ +
-jsPsych.init({ - timeline: [preload, trial1, trial2, trial3] -}); -``` + Open demo in new tab -#### Loading files in batches +???+ example "Loading files in batches" + === "Code" + ```javascript + var trial_1 = { + type: 'image-button-response', + stimulus: 'img/happy_face_1.jpg', + choices: ['Next'] + } -```javascript -var block_1 = { - timeline: [...] -} + var trial_2 = { + type: 'image-button-response', + stimulus: 'img/happy_face_2.jpg', + choices: ['Next'] + } -var block_2 = { - timeline: [...] -} + var trial_3 = { + type: 'image-button-response', + stimulus: 'img/happy_face_3.jpg', + choices: ['Next'] + } -var preload_1 = { - type: 'preload', - trials: block_1 // automatically load block_1 stimuli -}; + var block_1 = { + timeline: [trial_1, trial_2, trial_3] + } -var preload_2 = { - type: 'preload', - trials: block_2 // automatically load block_2 stimuli -}; + var trial_4 = { + type: 'image-button-response', + stimulus: 'img/sad_face_1.jpg', + choices: ['Next'] + } -jsPsych.init( - // add each preload trial to the timeline before the appropriate trial block - timeline: [preload_1, block_1, preload_2, block_2] -) -``` + var trial_5 = { + type: 'image-button-response', + stimulus: 'img/sad_face_2.jpg', + choices: ['Next'] + } -#### Using the on_success and on_error functions + var trial_6 = { + type: 'image-button-response', + stimulus: 'img/sad_face_3.jpg', + choices: ['Next'] + } -```javascript -var preload = { - type: 'preload', - audio: ['sound.mp3'], - on_success: function(file) { - console.log('File loaded: ',file); - }, - on_error: function(file) { - console.log('Error loading file: ',file); - } -}; -``` + var block_2 = { + timeline: [trial_4, trial_5, trial_6] + } -For more examples, see the jspsych-preload.html file in the jsPsych examples folder and the [Media Preloading](/overview/media-preloading) documentation page. \ No newline at end of file + var preload_block_1 = { + type: 'preload', + trials: [block_1] + } + + var preload_block_2 = { + type: 'preload', + trials: [block_2] + } + + jsPsych.init({ + timeline: [preload_block_1, block_1, preload_block_2, block_2] + }) + ``` + You can put trials using the `preload` plugin throughout your experiment to distribute when files are loaded. In the example above, there are two blocks of trials and the images for each are preloaded just before the corresponding block. + + === "Demo" +
+ +
+ + Open demo in new tab + +???+ example "Showing a detailed error message for debugging loading issues" + === "Code" + ```javascript + var preload = { + type: 'preload', + images: ['img/bad_file_path.png'], + show_detailed_errors: true + } + ``` + + === "Demo" +
+ +
+ + Open demo in new tab + + +For more examples, see the `jspsych-preload.html` file in the `/examples` folder of the release and the [Media Preloading](/overview/media-preloading) documentation page. \ No newline at end of file diff --git a/docs/plugins/jspsych-rdk.md b/docs/plugins/jspsych-rdk.md index 81b1ed4a..dcea56eb 100644 --- a/docs/plugins/jspsych-rdk.md +++ b/docs/plugins/jspsych-rdk.md @@ -2,8 +2,10 @@ 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. The stimulus can be displayed until a keyboard response is given or until a certain duration of time has passed. The RDK is fully customizable (see documentation below) and can display multiple apertures at the same time, each with its own parameters. -We would appreciate it if you cited this paper when you use the RDK: -Rajananda, S., Lau, H. & Odegaard, B., (2018). A Random-Dot Kinematogram for Web-Based Vision Research. Journal of Open Research Software. 6(1), p.6. DOI: [http://doi.org/10.5334/jors.194] +!!! citation + We would appreciate it if you cited this paper when you use the RDK plugin + + Rajananda, S., Lau, H. & Odegaard, B., (2018). A Random-Dot Kinematogram for Web-Based Vision Research. *Journal of Open Research Software. 6*(1), p.6. doi:[10.5334/jors.194](http://doi.org/10.5334/jors.194) For optimal performance, fullscreen mode should be manually triggered by the user (e.g. F11 key in Chrome for Windows). Usage of the default Fullscreen trigger from the jsPsych API library with this plugin might result in the stimuli being displayed incorrectly. @@ -45,16 +47,16 @@ In addition to the [parameters available in all plugins](/overview/plugins#param | border_color | string | "black" | The color of the border.
| ### RDK type parameter -** See Fig. 1 in Scase, Braddick, and Raymond (1996) for a visual depiction of these different signal selection rules and noise types. +*See Fig. 1 in [Scase, Braddick, and Raymond (1996)](https://doi.org/10.1016/0042-6989(95)00325-8) for a visual depiction of these different signal selection rules and noise types.* #### Signal Selection rule: --**Same**: Each dot is designated to be either a coherent dot (signal) or incoherent dot (noise) and will remain so throughout all frames in the display. Coherent dots will always move in the direction of coherent motion in all frames. --**Different**: Each dot can be either a coherent dot (signal) or incoherent dot (noise) and will be designated randomly (weighted based on the coherence level) at each frame. Only the dots that are designated to be coherent dots will move in the direction of coherent motion, but only in that frame. In the next frame, each dot will be designated randomly again on whether it is a coherent or incoherent dot. +- **Same**: Each dot is designated to be either a coherent dot (signal) or incoherent dot (noise) and will remain so throughout all frames in the display. Coherent dots will always move in the direction of coherent motion in all frames. +- **Different**: Each dot can be either a coherent dot (signal) or incoherent dot (noise) and will be designated randomly (weighted based on the coherence level) at each frame. Only the dots that are designated to be coherent dots will move in the direction of coherent motion, but only in that frame. In the next frame, each dot will be designated randomly again on whether it is a coherent or incoherent dot. #### Noise Type: --**Random position**: The incoherent dots appear in a random location in the aperture in each frame.
--**Random walk**: The incoherent dots will move in a random direction (designated randomly in each frame) in each frame.
--**Random direction**: Each incoherent dot has its own alternative direction of motion (designated randomly at the beginning of the trial), and moves in that direction in each frame.
+- **Random position**: The incoherent dots appear in a random location in the aperture in each frame.
+- **Random walk**: The incoherent dots will move in a random direction (designated randomly in each frame) in each frame.
+- **Random direction**: Each incoherent dot has its own alternative direction of motion (designated randomly at the beginning of the trial), and moves in that direction in each frame.
## Data Generated @@ -74,46 +76,54 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Example -#### Setting the correct_choice parameter by linking it to the coherent_direction parameter: +???+ example "Setting the correct_choice parameter by linking it to the coherent_direction parameter" + === "Code" + ```javascript + var trial = { + type: "rdk", + coherent_direction: 0, + correct_choice: "p" + }; + ``` + === "Demo" + This demo requires a larger viewing area to complete. Please open the demo in a new tab -```javascript -var trial_right = { - coherent_direction: 0, - correct_choice: "p" -}; + Open demo in new tab -var trial_left = { - coherent_direction: 180, - correct_choice: "q" -}; -``` +???+ example "Displaying a trial with 2 choices and 1 correct choice" + === "Code" + ```javascript + var trial = { + type: "rdk", + post_trial_gap: 0, + number_of_dots: 200, + RDK_type: 3, + choices: ["a", "l"], + correct_choice: "a", + coherent_direction: 180, + trial_duration: 1000 + }; + ``` + === "Demo" + This demo requires a larger viewing area to complete. Please open the demo in a new tab -#### Displaying a trial with 2 choices and 1 correct choice + Open demo in new tab -```javascript -var test_block = { - type: "rdk", - post_trial_gap: 0, - number_of_dots: 200, - RDK_type: 3, - choices: ["a", "l"], - correct_choice: "a", - coherent_direction: 180, - trial_duration: 1000 -}; -``` - -#### Displaying a trial with multiple apertures - -```javascript -var test_block = { - type: "rdk", - number_of_apertures: 3, //This needs to be set if more than one aperture - trial_duration: 10000, - RDK_type: 3, //Applied to all apertures if only one value - aperture_width: 200, //Applied to all apertures if only one value - number_of_dots: [50, 200, 100], //Different parameter for each aperture. Array length must equal number_of_apertures - aperture_center_x: [(window.innerWidth/2)-300,window.innerWidth/2,(window.innerWidth/2)+300] //Separate the apertures on the screen (window.innerWidth/2 is the middle of the screen) -}; -``` +???+ example "Displaying a trial with multiple apertures" + === "Code" + ```javascript + var trial = { + type: "rdk", + number_of_apertures: 3, //This needs to be set if more than one aperture + trial_duration: 10000, + correct_choice: "a", + RDK_type: 3, //Applied to all apertures if only one value + aperture_width: 200, //Applied to all apertures if only one value + number_of_dots: [50, 200, 100], //Different parameter for each aperture. Array length must equal number_of_apertures + aperture_center_x: [(window.innerWidth/2)-300,window.innerWidth/2,(window.innerWidth/2)+300] //Separate the apertures on the screen (window.innerWidth/2 is the middle of the screen) + }; + ``` + === "Demo" + This demo requires a larger viewing area to complete. Please open the demo in a new tab + Open demo in new tab diff --git a/docs/plugins/jspsych-reconstruction.md b/docs/plugins/jspsych-reconstruction.md index 471d9c23..1386df42 100644 --- a/docs/plugins/jspsych-reconstruction.md +++ b/docs/plugins/jspsych-reconstruction.md @@ -29,20 +29,37 @@ rt | numeric | The length of time, in milliseconds, that the trial lasted. ## Examples -#### Make a block larger and smaller +???+ example "Make a block larger and smaller" + === "Code" + ```javascript + var sample_function = function(param){ + var size = 50 + Math.floor(param*250); + var html = '
'+ + '

Press "h" to make the square larger. Press "g" to make the square smaller.

'+ + '

When the square is the same size as the previous one, click Continue.

'; + return html; + } -```javascript -var sample_function = function(param){ - var size = 50 + Math.floor(param*250); - var html = '
'+ - '
'; - return html; -} + var match_item = { + type: 'html-keyboard-response', + stimulus: '
'+ + '
', + choices: ['c'], + post_trial_gap: 1250, + prompt: '

Study the size of this square carefully. On the next screen you will have to recreate it. When you are ready, press "c".

' + } -var trial = { - type: 'reconstruction', - stim_function: sample_function, - starting_value: 0.25 -} -``` + var reconstruction = { + type: 'reconstruction', + stim_function: sample_function, + starting_value: 0.5, + } + ``` + === "Demo" +
+ +
+ + Open demo in new tab diff --git a/docs/plugins/jspsych-resize.md b/docs/plugins/jspsych-resize.md index 26f6403f..5c6cef77 100644 --- a/docs/plugins/jspsych-resize.md +++ b/docs/plugins/jspsych-resize.md @@ -26,14 +26,20 @@ scale_factor | numeric | Scaling factor that will be applied to the div containi ## Examples -#### Measuring a credit card and resizing the display to have 150 pixels equal an inch. +???+ example "Measuring a credit card and resizing the display to have 150 pixels equal an inch." + === "Code" + ```javascript + var inputs = { + type: 'resize', + item_width: 3 + 3/8, + item_height: 2 + 1/8, + prompt: "

Click and drag the lower right corner of the box until the box is the same size as a credit card held up to the screen.

", + pixels_per_unit: 150 + }; + ``` + === "Demo" +
+ +
-```javascript -var inputs = { - type: 'resize', - item_width: 3 + 3/8, - item_height: 2 + 1/8, - prompt: "

Click and drag the lower right corner of the box until the box is the same size as a credit card held up to the screen.

", - pixels_per_unit: 150 -}; -``` + Open demo in new tab diff --git a/docs/plugins/jspsych-same-different-html.md b/docs/plugins/jspsych-same-different-html.md index 3df3493f..4e5b55b8 100644 --- a/docs/plugins/jspsych-same-different-html.md +++ b/docs/plugins/jspsych-same-different-html.md @@ -39,15 +39,27 @@ Additionally, if `first_stim_duration` is null, then the following data is also ## Examples -#### Basic example +???+ example "Two text choices" + === "Code" + ```javascript + var trial = { + type: 'same-different-html', + stimuli: [ + '

Climbing

', + '

Walking

' + ], + prompt: `

Press 's' if the activities require the same amount of physical exertion.

+

Press 'd' if the activities require different amount of physical exertion.

`, + same_key: 's', + different_key: 'd', + first_stim_duration: 800, + answer: 'different' + } + ``` -```javascript - var trial = { - type: 'same-different-html', - stimuli: ['

Climbing

', '

Walking

'], - prompt: "

Press 's' if the texts imply the same amount of physical exertion. Press 'd' if the texts imply different amount of physical exertion.

", - same_key: 's', - different_key: 'd', - answer: 'different' - } -``` + === "Demo" +
+ +
+ + Open demo in new tab diff --git a/docs/plugins/jspsych-same-different-image.md b/docs/plugins/jspsych-same-different-image.md index d066b625..0359afde 100644 --- a/docs/plugins/jspsych-same-different-image.md +++ b/docs/plugins/jspsych-same-different-image.md @@ -1,6 +1,6 @@ -# jspsych-same-different plugin +# jspsych-same-different-image plugin -The same-different plugin displays two stimuli sequentially. Stimuli are image objects. The subject responds using the keyboard, and indicates whether the stimuli were the same or different. Same does not necessarily mean identical; a category judgment could be made, for example. +The same-different-image plugin displays two stimuli sequentially. Stimuli are images. The subject responds using the keyboard, and indicates whether the stimuli were the same or different. Same does not necessarily mean identical; a category judgment could be made, for example. ## Parameters @@ -39,28 +39,27 @@ Additionally, if `first_stim_duration` is null, then the following data is also ## Examples -#### Presenting two different emotional expressions +???+ example "Identifying emotional expressions" + === "Code" + ```javascript + var trial = { + type: 'same-different-image', + stimuli: [ + 'img/happy_face_1.jpg', + 'img/sad_face_3.jpg' + ], + prompt: `

Press s if the faces had the same emotional expression.

+

Press d if the faces had different emotional expressions.

`, + same_key: 's', + different_key: 'd', + first_stim_duration: 800, + answer: 'different' + } + ``` -```javascript -var block = { - type: 'same-different-image', - stimuli: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'], - prompt: "

Press s if the faces had the same emotional expression. Press d if the faces had different emotional expressions.

", - same_key: 's', - different_key: 'd', - answer: 'different' -} -``` + === "Demo" +
+ +
-#### Presenting the same emotional expression - -```javascript -var block = { - type: 'same-different-image', - stimuli: ['img/happy_face_1.jpg', 'img/happy_face_3.jpg'], - prompt: "

Press s if the faces had the same emotional expression. Press d if the faces had different emotional expressions.

", - same_key: 's', - different_key: 'd', - answer: 'same' -} -``` + Open demo in new tab diff --git a/docs/plugins/jspsych-serial-reaction-time-mouse.md b/docs/plugins/jspsych-serial-reaction-time-mouse.md index fb335640..e0c25162 100644 --- a/docs/plugins/jspsych-serial-reaction-time-mouse.md +++ b/docs/plugins/jspsych-serial-reaction-time-mouse.md @@ -33,20 +33,80 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -#### Basic example with four squares in a single row -```javascript -var trial = { - type: 'serial-reaction-time-mouse', - grid: [[1,1,1,1]], - target: [0,1] -} -``` +???+ example "A classic version of the SRT" + === "Code" + ```javascript + var grid = [ + [1,1,1,1] + ] -#### 2x2 grid with extra space in the middle -```javascript -var trial = { - type: 'serial-reaction-time-mouse', - grid: [[1,0,1],[0,0,0],[1,0,1]], - target: [0,2] -} -``` + var trial_1 = { + type: 'serial-reaction-time-mouse', + grid: grid, + target: [0,0] + } + var trial_2 = { + type: 'serial-reaction-time-mouse', + grid: grid, + target: [0,1] + } + var trial_3 = { + type: 'serial-reaction-time-mouse', + grid: grid, + target: [0,2] + } + var trial_4 = { + type: 'serial-reaction-time-mouse', + grid: grid, + target: [0,3] + } + ``` + + === "Demo" +
+ +
+ + Open demo in new tab + +???+ example "A 2x2 grid with extra space and different colors" + === "Code" + ```javascript + var grid = [ + [1,0,1], + [0,0,0], + [1,0,1] + ] + + var trial_1 = { + type: 'serial-reaction-time-mouse', + grid: grid, + target: [0,0], + target_color: '#006738' + } + var trial_2 = { + type: 'serial-reaction-time-mouse', + grid: grid, + target: [0,2], + target_color: '#F78F1E' + } + var trial_3 = { + type: 'serial-reaction-time-mouse', + grid: grid, + target: [2,2], + target_color: '#13B24B' + } + var trial_4 = { + type: 'serial-reaction-time-mouse', + grid: grid, + target: [2,0], + target_color: '#E74921' + } + ``` + + === "Demo" +
+ +
+ + Open demo in new tab diff --git a/docs/plugins/jspsych-serial-reaction-time.md b/docs/plugins/jspsych-serial-reaction-time.md index fd39ea81..2795ece6 100644 --- a/docs/plugins/jspsych-serial-reaction-time.md +++ b/docs/plugins/jspsych-serial-reaction-time.md @@ -35,23 +35,112 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -#### Basic example with four squares in a single row -```javascript -var trial = { - type: 'serial-reaction-time', - grid: [[1,1,1,1]], - target: [0,1] -} -``` +???+ example "A classic SRT" + === "Code" + ```javascript + var instructions = { + type: 'html-button-response', + stimulus: '

Use the S, F, H, and K keys to respond.

', + choices: ['Continue'] + } -#### 2x2 grid, Showing feedback for 500ms -```javascript -var trial = { - type: 'serial-reaction-time', - grid: [[1,1],[1,1]], - choices: [['r','t'],['f','g']], - target: [1,0], - show_response_feedback: true, - feedback_duration: 500 -} -``` + var grid = [ + [1,1,1,1] + ] + + var response_map = [ + ['s','f','h','k'] + ] + + var trial_1 = { + type: 'serial-reaction-time', + grid: grid, + choices: response_map, + target: [0,0] + } + var trial_2 = { + type: 'serial-reaction-time', + grid: grid, + choices: response_map, + target: [0,1] + } + var trial_3 = { + type: 'serial-reaction-time', + grid: grid, + choices: response_map, + target: [0,2] + } + var trial_4 = { + type: 'serial-reaction-time', + grid: grid, + choices: response_map, + target: [0,3] + } + ``` + + === "Demo" +
+ +
+ + Open demo in new tab + +???+ example "2x2 grid with feedback" + === "Code" + ```javascript + var instructions = { + type: 'html-button-response', + stimulus: '

Use the R, I, V, and M keys to respond.

', + choices: ['Continue'] + } + + var grid = [ + [1,1], + [1,1] + ] + + var response_map = [ + ['r','i'], + ['v','m'] + ] + + var trial_1 = { + type: 'serial-reaction-time', + grid: grid, + choices: response_map, + target: [0,0], + show_response_feedback: true, + feedback_duration: 500 + } + var trial_2 = { + type: 'serial-reaction-time', + grid: grid, + choices: response_map, + target: [0,1], + show_response_feedback: true, + feedback_duration: 500 + } + var trial_3 = { + type: 'serial-reaction-time', + grid: grid, + choices: response_map, + target: [1,1], + show_response_feedback: true, + feedback_duration: 500 + } + var trial_4 = { + type: 'serial-reaction-time', + grid: grid, + choices: response_map, + target: [1,0], + show_response_feedback: true, + feedback_duration: 500 + } + ``` + + === "Demo" +
+ +
+ + Open demo in new tab \ No newline at end of file diff --git a/docs/plugins/jspsych-survey-html-form.md b/docs/plugins/jspsych-survey-html-form.md index 317d6fc2..bbf74b70 100644 --- a/docs/plugins/jspsych-survey-html-form.md +++ b/docs/plugins/jspsych-survey-html-form.md @@ -26,25 +26,38 @@ rt | numeric | The response time in milliseconds for the subject to make a respo ## Examples -### Basic example +???+ example "Fill in the blanks" + === "Code" + ```javascript + var trial = { + type: 'survey-html-form', + preamble: '

How are you feeling right now?

', + html: '

I am feeling , , and .

' + }; + ``` -```javascript -var form_trial = { - type: 'survey-html-form', - preamble: '

How are you feeling right now?

', - html: '

I am feeling , , and .

' -}; -``` + === "Demo" +
+ +
-### Example using the autofocus parameter + Open demo in new tab -In this example, the browser will focus on the element with the ID `test-resp-box` when the trial loads. For `` elements, this means that the cursor will appear inside the text box. +???+ example "Using the autofocus parameter" + === "Code" + ```javascript + var trial = { + type: 'survey-html-form', + preamble: '

What is your favorite bird?

', + html: '

My favorite bird is

', + autofocus: 'test-resp-box' + }; + ``` + In this example, the browser will focus on the element with the ID `test-resp-box` when the trial loads. For `` elements, this means that the cursor will appear inside the text box. -```javascript -var autofocus_trial = { - type: 'survey-html-form', - preamble: '

What is your favorite bird?

', - html: '

My favorite bird is

', - autofocus: 'test-resp-box' -}; -``` \ No newline at end of file + === "Demo" +
+ +
+ + Open demo in new tab diff --git a/docs/plugins/jspsych-survey-likert.md b/docs/plugins/jspsych-survey-likert.md index 07adb516..ed4a6d18 100644 --- a/docs/plugins/jspsych-survey-likert.md +++ b/docs/plugins/jspsych-survey-likert.md @@ -27,44 +27,60 @@ question_order | array | An array with the order of questions. For example `[2,0 ## Examples -#### Basic example +???+ example "Single Question" + === "Code" + ```javascript + var trial = { + type: 'survey-likert', + questions: [ + { + prompt: "I like vegetables.", + labels: [ + "Strongly Disagree", + "Disagree", + "Neutral", + "Agree", + "Strongly Agree" + ] + } + ] + }; + ``` -```javascript -var scale_1 = [ - "Strongly Disagree", - "Disagree", - "Neutral", - "Agree", - "Strongly Agree" -]; + === "Demo" +
+ +
-var likert_page = { - type: 'survey-likert', - questions: [ - {prompt: "I like vegetables.", labels: scale_1} - ] -}; -``` + Open demo in new tab -#### Multiple questions in a random order +???+ example "Multiple questions in a random order" + === "Code" + ```javascript + var likert_scale = [ + "Strongly Disagree", + "Disagree", + "Neutral", + "Agree", + "Strongly Agree" + ]; -```javascript -var scale_1 = [ - "Strongly Disagree", - "Disagree", - "Neutral", - "Agree", - "Strongly Agree" -]; + var trial = { + type: 'survey-likert', + questions: [ + {prompt: "I like vegetables.", name: 'Vegetables', labels: likert_scale}, + {prompt: "I like fruit.", name: 'Fruit', labels: likert_scale}, + {prompt: "I like meat.", name: 'Meat', labels: likert_scale}, + ], + randomize_question_order: true + }; + ``` -var likert_page = { - type: 'survey-likert', - questions: [ - {prompt: "I like vegetables.", name: 'Vegetables', labels: scale_1}, - {prompt: "I like fruit.", name: 'Fruit', labels: scale_1}, - {prompt: "I like meat.", name: 'Meat', labels: scale_1}, - {prompt: "I like dairy.", name: 'Dairy', labels: scale_1} - ], - randomize_question_order: true -}; -``` + === "Demo" +
+ +
+ + Open demo in new tab + + diff --git a/docs/plugins/jspsych-survey-multi-choice.md b/docs/plugins/jspsych-survey-multi-choice.md index 32eadb59..fd678aeb 100644 --- a/docs/plugins/jspsych-survey-multi-choice.md +++ b/docs/plugins/jspsych-survey-multi-choice.md @@ -26,23 +26,62 @@ question_order | array | An array with the order of questions. For example `[2,0 ## Examples -```javascript -var page_1_options = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly Agree"]; -var page_2_options = ["Strongly Disagree", "Disagree", "Somewhat Disagree", "Neutral", "Somewhat Agree", "Agree", "Strongly Agree"]; +???+ example "Vertical Question Alignment" + === "Code" + ```javascript + var trial = { + type: 'survey-multi-choice', + questions: [ + { + prompt: "Which of the following do you like the most?", + name: 'VegetablesLike', + options: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas'], + required: true + }, + { + prompt: "Which of the following do you like the least?", + name: 'FruitDislike', + options: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry'], + required: false + } + ], + }; + ``` -var multi_choice_block = { - type: 'survey-multi-choice', - questions: [ - {prompt: "I like vegetables", name: 'Vegetables', options: page_1_options, required:true}, - {prompt: "I like fruit", name: 'Fruit', options: page_2_options, required: false} - ], -}; + === "Demo" +
+ +
-var multi_choice_block_horizontal = { - type: 'survey-multi-choice', - questions: [ - {prompt: "I like vegetables", options: page_1_options, required: true, horizontal: true,}, - {prompt: "I like fruit", options: page_2_options, required: false, horizontal: true} - ], -}; -``` + Open demo in new tab + +???+ example "Horizontal Question Alignment" + === "Code" + ```javascript + var trial = { + type: 'survey-multi-choice', + questions: [ + { + prompt: "Which of the following do you like the most?", + name: 'VegetablesLike', + options: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas'], + required: true, + horizontal: true + }, + { + prompt: "Which of the following do you like the least?", + name: 'FruitDislike', + options: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry'], + required: false, + horizontal: true + } + ], + }; + ``` + + === "Demo" +
+ +
+ + Open demo in new tab diff --git a/docs/plugins/jspsych-survey-multi-select.md b/docs/plugins/jspsych-survey-multi-select.md index 1e5b4c75..5054eae3 100644 --- a/docs/plugins/jspsych-survey-multi-select.md +++ b/docs/plugins/jspsych-survey-multi-select.md @@ -27,27 +27,34 @@ question_order | array | An array with the order of questions. For example `[2,0 ## Examples -#### Basic example with multiple questions on a page. +???+ example "Multiple Questions on a Page" + === "Code" + ```javascript + var trial = { + type: 'survey-multi-select', + questions: [ + { + prompt: "Which of these colors do you like?", + options: ["Red", "Yellow", "Green", "Blue", "Black"], + horizontal: true, + required: true, + name: 'Colors' + }, + { + prompt: "Which of these foods do you like?", + options: ["Apples", "Bananas", "Carrots", "Donuts", "Eggplant"], + horizontal: true, + required: true, + name: 'Foods' + } + ], + randomize_question_order: true + }; + ``` -```javascript -var multi_select_block = { - type: 'survey-multi-select', - questions: [ - { - prompt: "Which of these colors do you like?", - options: ["Red", "Yellow", "Green", "Blue", "Black"], - horizontal: true, - required: true, - name: 'Colors' - }, - { - prompt: "Which of these foods do you like?", - options: ["Apples", "Bananas", "Carrots", "Donuts", "Eggplant"], - horizontal: true, - required: true, - name: 'Foods' - } - ], - randomize_question_order: true -}; -``` + === "Demo" +
+ +
+ + Open demo in new tab diff --git a/docs/plugins/jspsych-survey-text.md b/docs/plugins/jspsych-survey-text.md index 5a107088..d2ebff35 100644 --- a/docs/plugins/jspsych-survey-text.md +++ b/docs/plugins/jspsych-survey-text.md @@ -26,38 +26,81 @@ question_order | array | An array with the order of questions. For example `[2,0 ## Examples -### Basic example +???+ example "Single question and response" + === "Code" + ```javascript + var trial = { + type: 'survey-text', + questions: [ + {prompt: 'How old are you?'} + ] + } + ``` + + === "Demo" +
+ +
-```javascript -var survey_trial = { - type: 'survey-text', - questions: [ - {prompt: "How old are you?"}, - {prompt: "Where were you born?", placeholder: "City, State/Province, Country"} - ], -}; -``` + Open demo in new tab -### Custom number of rows and columns +???+ example "Multiple questions, with an optional placeholder and a required question" + === "Code" + ```javascript + var trial = { + type: 'survey-text', + questions: [ + {prompt: 'What is your date of birth?', placeholder: 'mm/dd/yyyy', required: true}, + {prompt: 'What country do you currently live in?'} + ] + } + ``` + + === "Demo" +
+ +
-```javascript -var survey_trial = { - type: 'survey-text', - questions: [ - {prompt: "How old are you?", rows: 5, columns: 40}, - {prompt: "Where were you born?", rows: 3, columns: 50} - ], -}; -``` + Open demo in new tab -### Defining the name of questions +???+ example "Naming questions to improve readability of the stored data" + === "Code" + ```javascript + var trial = { + type: 'survey-text', + questions: [ + {prompt: 'What did you eat for breakfast?', name: 'Breakfast'}, + {prompt: 'What did you eat for lunch?', name: 'Lunch'} + ] + } + ``` + + === "Demo" +
+ +
+ + Open demo in new tab + + +???+ example "Using the preamble and a longer textbox response" + === "Code" + ```javascript + var trial = { + type: 'survey-text', + preamble: ``, + questions: [ + {prompt: 'Describe your reaction to the image above', rows: 5} + ] + } + ``` + + *The artwork in this demo is by [Danielle Navarro](https://art.djnavarro.net/)* + + === "Demo" +
+ +
+ + Open demo in new tab -```javascript -var survey_trial = { - type: 'survey-text', - questions: [ - {prompt: "How old are you?", name: 'Age'}, - {prompt: "Where were you born?", name: 'BirthLocation'} - ], -}; -``` diff --git a/docs/plugins/jspsych-video-button-response.md b/docs/plugins/jspsych-video-button-response.md index 50618bc7..81ca0987 100644 --- a/docs/plugins/jspsych-video-button-response.md +++ b/docs/plugins/jspsych-video-button-response.md @@ -41,14 +41,25 @@ stimulus | array | The `stimulus` array. This will be encoded as a JSON string w ## Example -```javascript -var trial = { - type: 'video-button-response', - stimulus: [ - 'video/sample_video.mp4', - 'video/sample_video.ogg' - ], - choices: ['Happy','Sad','Angry','Peaceful'], - prompt: '

Which emotion the best descriptor of the main character\'s feelings?

' -} -``` +???+ example "Responses disabled until the video is complete" + === "Code" + ```javascript + var trial = { + type: 'video-button-response', + stimulus: [ + 'video/fish.mp4' + ], + choices: ['0-5', '6-10','11-15','16-20','21-25','25+'], + prompt: "

How many different fish are shown in the video?

", + response_allowed_while_playing: false + }; + ``` + + *[Stock Footage](https://www.pond5.com/stock-footage/item/721819-school-yellowtail-snappers) provided by rjt98, from [Pond5](https://www.pond5.com/)* + + === "Demo" +
+ +
+ + Open demo in new tab diff --git a/docs/plugins/jspsych-video-keyboard-response.md b/docs/plugins/jspsych-video-keyboard-response.md index e450f01a..00ee4901 100644 --- a/docs/plugins/jspsych-video-keyboard-response.md +++ b/docs/plugins/jspsych-video-keyboard-response.md @@ -35,16 +35,26 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat | 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. | stimulus | array | The `stimulus` array. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. | -## Example +## Examples -```javascript -var trial = { - type: 'video-keyboard-response', - stimulus: [ - 'video/sample_video.mp4', - 'video/sample_video.ogg' - ], - choices: ['y','n'], - width: 640 -} -``` +???+ example "Show a video and advance to next trial automatically" + === "Code" + ```javascript + var trial = { + type: 'video-keyboard-response', + stimulus: [ + 'video/fish.mp4' + ], + choices: jsPsych.NO_KEYS, + trial_ends_after_video: true + }; + ``` + + *[Stock Footage](https://www.pond5.com/stock-footage/item/721819-school-yellowtail-snappers) provided by rjt98, from [Pond5](https://www.pond5.com/)* + + === "Demo" +
+ +
+ + Open demo in new tab diff --git a/docs/plugins/jspsych-video-slider-response.md b/docs/plugins/jspsych-video-slider-response.md index c0031fcb..4e7d02a0 100644 --- a/docs/plugins/jspsych-video-slider-response.md +++ b/docs/plugins/jspsych-video-slider-response.md @@ -47,14 +47,25 @@ start | numeric | The start time of the video clip. ## Example -```javascript -var trial = { - type: 'video-slider-response', - stimulus: [ - 'video/sample_video.mp4', - 'video/sample_video.ogg' - ], - labels: ["Did not like", "Liked"], - prompt: "

Please rate your enjoyment of the video clip.

" -} -``` +???+ example "Rate enjoyment of a video clip" + === "Code" + ```javascript + var trial = { + type: 'video-slider-response', + stimulus: [ + 'video/fish.mp4' + ], + labels: ["Hated it", "Loved it"], + prompt: '

Please rate your enjoyment of the video clip.

' + }; + ``` + + *[Stock Footage](https://www.pond5.com/stock-footage/item/721819-school-yellowtail-snappers) provided by rjt98, from [Pond5](https://www.pond5.com/)* + + === "Demo" +
+ +
+ + Open demo in new tab + diff --git a/docs/plugins/jspsych-virtual-chinrest.md b/docs/plugins/jspsych-virtual-chinrest.md index 3e8fea7f..2462d41b 100644 --- a/docs/plugins/jspsych-virtual-chinrest.md +++ b/docs/plugins/jspsych-virtual-chinrest.md @@ -13,7 +13,11 @@ The plugin works in two phases. ## Dependency -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 `` section of your experiment page. +This plugin requires the SVG.js library, available at [https://svgjs.com](https://svgjs.com/docs/3.0/) or via the CDN link below. You must include the library in the `` section of your experiment page. + +```html + +``` ## Parameters @@ -59,47 +63,64 @@ _Note: The deg data are **only** returned if viewing distance is estimated with ## Example -```javascript -// two blindspot measurements -// measure px2mm, viewing distance and px2deg -// do not resize the jsPsych content after this trial -// note: pixels_per_unit will be ignored since there is no resizing (resize_units: "none") -let no_resize = { - type: "virtual-chinrest", - blindspot_reps: 3, - resize_units: "none", - pixels_per_unit: 50, -}; +???+ example "Measure distance to screen and pixel ratio; no resizing" + === "Code" + ```javascript + var trial = { + type: 'virtual-chinrest', + blindspot_reps: 3, + resize_units: "none" + }; + ``` + === "Demo" + This demo requires a larger viewing area to complete. Please open the demo in a new tab -// no blindspot task -// resize to cm (50 pixels per unit) -// measure px2mm, but not viewing distance and px2deg (because blindspot_reps is 0) -// note: you may still choose to estimate viewing distance even if resizing to cm or inches -let cm_resize = { - type: "virtual-chinrest", - blindspot_reps: 0, - resize_units: "cm", - pixels_per_unit: 50, -}; + Open demo in new tab -// three blindspot measurements -// measure px2mm, viewing distance and px2deg -// resize to degrees of visual angle (50 pixels per unit) -// don't report viewing distance to subject -let deg_resize = { - type: "virtual-chinrest", - blindspot_reps: 3, - resize_units: "deg", - pixels_per_unit: 50, - viewing_distance_report: "none", -}; +???+ example "Resizing based on centimeters per pixel" + === "Code" + ```javascript + var trial = { + type: 'virtual-chinrest', + blindspot_reps: 3, + resize_units: "cm", + pixels_per_unit: 50 + }; -// resizing to degrees with no blindspot measurment is not possible -// this trial will throw an error -let error_trial = { - type: "virtual-chinrest", - blindspot_reps: 0, - resize_units: "deg", - pixels_per_unit: 50, -}; -``` + var resized_stimulus = { + type: 'html-button-response', + stimulus: ` +

If the measurements were done correctly, the square below should be 10 cm x 10 cm.

+
+ `, + choices: ['Continue'] + } + ``` + === "Demo" + This demo requires a larger viewing area to complete. Please open the demo in a new tab + + Open demo in new tab + +???+ example "Resizing based on degrees of visual angle per pixel" + === "Code" + ```javascript + var trial = { + type: 'virtual-chinrest', + blindspot_reps: 3, + resize_units: "deg", + pixels_per_unit: 50 + }; + + var resized_stimulus = { + type: 'html-button-response', + stimulus: ` +

If the measurements were done correctly, the square below should take up about 10 degrees of visual angle.

+
+ `, + choices: ['Continue'] + } + ``` + === "Demo" + This demo requires a larger viewing area to complete. Please open the demo in a new tab + + Open demo in new tab diff --git a/docs/plugins/jspsych-visual-search-circle.md b/docs/plugins/jspsych-visual-search-circle.md index bb71ee69..fd71634f 100644 --- a/docs/plugins/jspsych-visual-search-circle.md +++ b/docs/plugins/jspsych-visual-search-circle.md @@ -36,17 +36,60 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat | target_present | boolean | True if the target is present in the search array | | 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. | -## Example +## Examples -#### Search for the backward N +???+ example "Identical distractors" + === "Code" + ```javascript + var instructions = { + type: 'html-button-response', + stimulus: `

Press J if there is a backwards N.

+

Press F if all the Ns are in the normal orientation.

`, + choices: ['Continue'] + } -```javascript -var trial_1 = { - type: 'visual-search-circle', - target: 'img/backwardN.gif', - foil: 'img/normalN.gif', - fixation_image: 'img/fixation.gif', - target_present: true, - set_size: 4 -} -``` + var trial = { + type: 'visual-search-circle', + target: 'img/backwardN.gif', + foil: 'img/normalN.gif', + fixation_image: 'img/fixation.gif', + target_present: true, + set_size: 4 + } + ``` + + === "Demo" +
+ +
+ + Open demo in new tab + +???+ example "Variety of different distractors" + === "Code" + ```javascript + var instructions = { + type: 'html-button-response', + stimulus: `

Press E if there is an elephant in the group.

+

Press N if there is no elephant in the group.

`, + choices: ['Continue'] + } + + var trial = { + type: 'visual-search-circle', + target: 'img/elephant.png', + foil: ['img/lion.png', 'img/monkey.png'], + fixation_image: 'img/fixation.gif', + target_present_key: 'e', + target_absent_key: 'n', + target_present: true, + set_size: 3 + } + ``` + + === "Demo" +
+ +
+ + Open demo in new tab \ No newline at end of file diff --git a/docs/plugins/jspsych-vsl-animate-occlusion.md b/docs/plugins/jspsych-vsl-animate-occlusion.md index 61889967..79b146f1 100644 --- a/docs/plugins/jspsych-vsl-animate-occlusion.md +++ b/docs/plugins/jspsych-vsl-animate-occlusion.md @@ -34,22 +34,23 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat ## Examples -#### Displaying a simple sequence. +???+ example "Displaying a short sequence with default options" + === "Code" + ```javascript + var trial = { + type: 'vsl-animate-occlusion', + stimuli: [ + "img/1.gif", + "img/2.gif", + "img/3.gif", + "img/4.gif" + ] + } + ``` -```javascript -var trial = { - type: 'vsl-animate-occlusion', - stimuli: [ - "img/1.gif", - "img/2.gif", - "img/3.gif", - "img/4.gif", - "img/5.gif", - "img/6.gif", - "img/7.gif", - "img/8.gif", - "img/9.gif", - "img/10.gif" - ] -} -``` + === "Demo" +
+ +
+ + Open demo in new tab diff --git a/docs/plugins/jspsych-vsl-grid-scene.md b/docs/plugins/jspsych-vsl-grid-scene.md index 2a104c96..0bedf6fe 100644 --- a/docs/plugins/jspsych-vsl-grid-scene.md +++ b/docs/plugins/jspsych-vsl-grid-scene.md @@ -45,18 +45,25 @@ var grid_stimulus = jsPsych.plugins['vsl-grid-scene'].generate_stimulus(pattern, ## Example -#### Basic example +???+ example "Displaying a scene" + === "Code" + ```javascript + var scene = [ + ["img/1.gif", "img/2.gif", 0], + [ 0, "img/3.gif", 0], + ["img/5.gif", "img/4.gif", 0] + ] -```javascript -var scene = [ - ["img/1.gif", "img/2.gif", 0], - [ 0, "img/3.gif", 0], - ["img/5.gif", "img/4.gif", 0] -] + var trial = { + type: 'vsl-grid-scene', + stimuli: scene, + trial_duration: 1500 + }; + ``` -var trial = { - type: 'vsl-grid-scene', - stimuli: scene -}; + === "Demo" +
+ +
-``` + Open demo in new tab diff --git a/docs/plugins/jspsych-webgazer-calibrate.md b/docs/plugins/jspsych-webgazer-calibrate.md index c33890f3..de01ca99 100644 --- a/docs/plugins/jspsych-webgazer-calibrate.md +++ b/docs/plugins/jspsych-webgazer-calibrate.md @@ -27,35 +27,5 @@ No data currently added by this plugin. Use the [webgazer-validate](/plugins/jsp ## Example -#### Click-based calibration with 5 points +Because the eye tracking plugins need to be used in conjunction with each other, please see the [example on the eye tracking overview page](/overview/eye-tracking/#example) for an integrated example. -```javascript -var calibration = { - type: 'webgazer-calibrate', - calibration_points: [[50,50], [25,25], [25,75], [75,25], [75,75]], - repetitions_per_point: 2, - randomize_calibration_order: true - } -``` - -### View-based calibration with 33 points, concentrated in the center - -```javascript - var calibration = { - type: 'webgazer-calibrate', - calibration_points: [ - [10,10],[10,50],[10,90], - [30,10],[30,50],[30,90], - [40,10],[40,30],[40,40],[40,45],[40,50],[40,55],[40,60],[40,70],[40,90], - [50,10],[50,30],[50,40],[50,45],[50,50],[50,55],[50,60],[50,70],[50,90], - [60,10],[60,30],[60,40],[60,45],[60,50],[60,55],[60,60],[60,70],[60,90], - [70,10],[70,50],[70,90], - [90,10],[90,50],[90,90] - ], - repetitions_per_point: 1, - randomize_calibration_order: true, - calibration_mode: 'view', - time_per_point: 500, - time_to_saccade: 1000 -} -``` diff --git a/docs/plugins/jspsych-webgazer-init-camera.md b/docs/plugins/jspsych-webgazer-init-camera.md index 6233d479..489d5dd8 100644 --- a/docs/plugins/jspsych-webgazer-init-camera.md +++ b/docs/plugins/jspsych-webgazer-init-camera.md @@ -21,10 +21,4 @@ load_time | numeric | The time it took for webgazer to initialize. This can be a ## Example -#### Parameterless use - -```javascript -var init_camera = { - type: 'webgazer-init-camera' -} -``` +Because the eye tracking plugins need to be used in conjunction with each other, please see the [example on the eye tracking overview page](/overview/eye-tracking/#example) for an integrated example. diff --git a/docs/plugins/jspsych-webgazer-validate.md b/docs/plugins/jspsych-webgazer-validate.md index bb06068a..078cdd27 100644 --- a/docs/plugins/jspsych-webgazer-validate.md +++ b/docs/plugins/jspsych-webgazer-validate.md @@ -11,7 +11,6 @@ Parameter | Type | Default Value | Description 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. 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. roi_radius | numeric | 200 | Tolerance around the validation point in pixels when calculating the percent of gaze measurements within the acceptable range. -repetitions_per_point | numeric | 1 | The number of times to repeat the sequence of calibration points. randomize_validation_order | bool | `false` | Whether to randomize the order of the validation points. 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. 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. @@ -32,13 +31,4 @@ validation_points | array | The list of validation points, in the order that the ## Example -#### 4 point validation using center offset mode - -```javascript -var validation = { - type: 'webgazer-validate', - validation_points: [[-200,-200], [-200,200], [200,-200], [200,200]], - validation_point_coordinates: 'center-offset-pixels', - show_validation_data: true -} -``` +Because the eye tracking plugins need to be used in conjunction with each other, please see the [example on the eye tracking overview page](/overview/eye-tracking/#example) for an integrated example. diff --git a/docs/tutorials/hello-world.md b/docs/tutorials/hello-world.md index 594fb1c2..f5b1fdc0 100644 --- a/docs/tutorials/hello-world.md +++ b/docs/tutorials/hello-world.md @@ -2,12 +2,15 @@ In the long tradition of **"Hello world!"** examples, this tutorial creates an experiment that outputs the phrase "Hello world!" to the browser. Though useless as an actual experiment, the process is helpful for learning the basics of using the jsPsych library. This tutorial will assume that you know very little about how to set up a web page. +!!! info + If you would like to use modern web development tools (e.g. ES6 modules, Node/NPM, webpack, Babel), you may want to check out the [jsPsych Builder](https://github.com/bjoluc/jspsych-builder) CLI utility. jsPsych Builder allows you to automate the experiment setup, spin up a development server, and transpile and bundle scripts and styles. Using jsPsych Builder will automate some of the steps in this tutorial, so if you prefer that option, you may want to switch to the getting started instructions on the jsPsych Builder GitHub page. + ## Step 1: Download the jsPsych library Start by downloading the jsPsych library. The most recent version can always be found on the [GitHub releases page](https://github.com/jspsych/jsPsych/releases). *Note: the image below shows version 4.2, but the process is the same for the most recent version.* - + ![releasespage](/img/githubreleases.jpg) !!! warning diff --git a/examples/jspsych-reconstruction.html b/examples/jspsych-reconstruction.html index 4b2b694d..1ee34ed2 100644 --- a/examples/jspsych-reconstruction.html +++ b/examples/jspsych-reconstruction.html @@ -4,7 +4,7 @@ - + diff --git a/mkdocs.yml b/mkdocs.yml index a166183d..b0d2720c 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -13,10 +13,12 @@ extra: link: 'https://github.com/jspsych' - icon: 'fontawesome/brands/twitter' link: 'https://twitter.com/joshdeleeuw' + version: + provider: mike + analytics: + provider: google + property: 'UA-50563838-1' copyright: 'Copyright © 2012-2021 Josh de Leeuw' -google_analytics: - - 'UA-50563838-1' - - 'auto' markdown_extensions: - admonition - codehilite: @@ -24,6 +26,7 @@ markdown_extensions: - toc: permalink: true - pymdownx.superfences + - pymdownx.tabbed - pymdownx.details repo_url: 'https://github.com/jspsych/jsPsych' repo_name: 'jspsych/jspsych' @@ -64,10 +67,10 @@ nav: - 'jspsych-audio-button-response': 'plugins/jspsych-audio-button-response.md' - 'jspsych-audio-keyboard-response': 'plugins/jspsych-audio-keyboard-response.md' - 'jspsych-audio-slider-response': 'plugins/jspsych-audio-slider-response.md' + - 'jspsych-call-function': 'plugins/jspsych-call-function.md' - 'jspsych-canvas-button-response': 'plugins/jspsych-canvas-button-response.md' - 'jspsych-canvas-keyboard-response': 'plugins/jspsych-canvas-keyboard-response.md' - 'jspsych-canvas-slider-response': 'plugins/jspsych-canvas-slider-response.md' - - 'jspsych-call-function': 'plugins/jspsych-call-function.md' - 'jspsych-categorize-animation': 'plugins/jspsych-categorize-animation.md' - 'jspsych-categorize-html': 'plugins/jspsych-categorize-html.md' - 'jspsych-categorize-image': 'plugins/jspsych-categorize-image.md' diff --git a/packages/jspsych/src/modules/randomization.ts b/packages/jspsych/src/modules/randomization.ts index 90fb6ae5..95a69c54 100644 --- a/packages/jspsych/src/modules/randomization.ts +++ b/packages/jspsych/src/modules/randomization.ts @@ -1,4 +1,4 @@ -export function repeat(array, repetitions, unpack) { +export function repeat(array, repetitions, unpack?) { var arr_isArray = Array.isArray(array); var rep_isArray = Array.isArray(repetitions); diff --git a/packages/jspsych/tests/randomization/randomziation.test.ts b/packages/jspsych/tests/randomization/randomziation.test.ts index 0d2331f0..de438116 100644 --- a/packages/jspsych/tests/randomization/randomziation.test.ts +++ b/packages/jspsych/tests/randomization/randomziation.test.ts @@ -1,10 +1,18 @@ -import { randomID, shuffle, shuffleAlternateGroups } from "../../src/modules/randomization"; +import { + randomID, + repeat, + shuffle, + shuffleAlternateGroups, + shuffleNoRepeats, +} from "../../src/modules/randomization"; + +afterEach(() => { + jest.restoreAllMocks(); +}); describe("#shuffle", () => { test("should produce fixed order with mock RNG", () => { - Math.random = jest.fn().mockImplementation(() => { - return 0.5; - }); + jest.spyOn(Math, "random").mockReturnValue(0.5); var arr = [1, 2, 3, 4, 5, 6]; expect(shuffle(arr)).toEqual([1, 6, 2, 5, 3, 4]); }); @@ -12,9 +20,7 @@ describe("#shuffle", () => { describe("shuffleAlternateGroups", () => { test("should shuffle in alternating groups", () => { - Math.random = jest.fn().mockImplementation(() => { - return 0.5; - }); + jest.spyOn(Math, "random").mockReturnValue(0.5); var toShuffle = [ ["a", "b", "c"], [1, 2, 3], @@ -25,11 +31,27 @@ describe("shuffleAlternateGroups", () => { describe("#randomID", () => { test("should produce ID based on mock RNG", () => { - Math.random = jest - .fn() + jest + .spyOn(Math, "random") .mockReturnValueOnce(0.1) .mockReturnValueOnce(0.2) .mockReturnValueOnce(0.3); expect(randomID(3)).toBe("37a"); }); }); + +describe("shuffleNoRepeats", function () { + test("should generate a random order with no repeats", function () { + var equalityTest = (a, b) => a === b; + var toShuffle = ["a", "b", "c", "d"]; + var repeated = repeat(toShuffle, 20); + var randomOrder = shuffleNoRepeats(repeated, equalityTest); + var repeats = 0; + for (var i = 1; i < randomOrder.length; i++) { + if (equalityTest(randomOrder[i], randomOrder[i - 1])) { + repeats++; + } + } + expect(repeats).toBe(0); + }); +}); diff --git a/packages/plugin-video-button-response/src/index.ts b/packages/plugin-video-button-response/src/index.ts index 77e83dd6..31e1e1ca 100644 --- a/packages/plugin-video-button-response/src/index.ts +++ b/packages/plugin-video-button-response/src/index.ts @@ -245,11 +245,18 @@ class VideoButtonResponsePlugin implements JsPsychPlugin { }; } + let stopped = false; if (trial.stop !== null) { video_element.addEventListener("timeupdate", function (e) { var currenttime = video_element.currentTime; if (currenttime >= trial.stop) { video_element.pause(); + if (trial.trial_ends_after_video && !stopped) { + // this is to prevent end_trial from being called twice, because the timeupdate event + // can fire in quick succession + stopped = true; + end_trial(); + } } }); } diff --git a/packages/plugin-video-keyboard-response/src/index.ts b/packages/plugin-video-keyboard-response/src/index.ts index ca887536..397c4d00 100644 --- a/packages/plugin-video-keyboard-response/src/index.ts +++ b/packages/plugin-video-keyboard-response/src/index.ts @@ -198,11 +198,18 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin { }; } + let stopped = false; if (trial.stop !== null) { video_element.addEventListener("timeupdate", function (e) { var currenttime = video_element.currentTime; if (currenttime >= trial.stop) { video_element.pause(); + if (trial.trial_ends_after_video && !stopped) { + // this is to prevent end_trial from being called twice, because the timeupdate event + // can fire in quick succession + stopped = true; + end_trial(); + } } }); } diff --git a/packages/plugin-video-slider-response/src/index.ts b/packages/plugin-video-slider-response/src/index.ts index b220186d..c9dc276e 100644 --- a/packages/plugin-video-slider-response/src/index.ts +++ b/packages/plugin-video-slider-response/src/index.ts @@ -293,11 +293,18 @@ class VideoSliderResponsePlugin implements JsPsychPlugin { }; } + let stopped = false; if (trial.stop !== null) { video_element.addEventListener("timeupdate", function (e) { var currenttime = video_element.currentTime; if (currenttime >= trial.stop) { video_element.pause(); + if (trial.trial_ends_after_video && !stopped) { + // this is to prevent end_trial from being called twice, because the timeupdate event + // can fire in quick succession + stopped = true; + end_trial(); + } } }); } diff --git a/packages/plugin-webgazer-validate/src/index.ts b/packages/plugin-webgazer-validate/src/index.ts index 7debfe2e..a1a8ad86 100644 --- a/packages/plugin-webgazer-validate/src/index.ts +++ b/packages/plugin-webgazer-validate/src/index.ts @@ -362,6 +362,9 @@ class WebgazerValidatePlugin implements JsPsychPlugin { function calculateSampleRate(gazeData) { var mean_diff = []; + if (gazeData.length == 0) { + return 0; + } for (var i = 0; i < gazeData.length; i++) { if (gazeData[i].length > 1) { var t_diff = [];