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/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/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 b5ce2c5a..741ad681 100644 --- a/docs/plugins/jspsych-image-button-response.md +++ b/docs/plugins/jspsych-image-button-response.md @@ -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..8565666e 100644 --- a/docs/plugins/jspsych-webgazer-validate.md +++ b/docs/plugins/jspsych-webgazer-validate.md @@ -32,13 +32,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/examples/jspsych-reconstruction.html b/examples/jspsych-reconstruction.html index 706ab834..2b33b878 100644 --- a/examples/jspsych-reconstruction.html +++ b/examples/jspsych-reconstruction.html @@ -14,7 +14,7 @@ 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 Next.

'; + '

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

'; return html; } diff --git a/mkdocs.yml b/mkdocs.yml index b00efb3b..b0d2720c 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -26,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' @@ -66,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'