You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -16,20 +16,77 @@ To learn more about jsPsych features, some other great places to start are the j
16
16
jsPsych packages
17
17
==============================
18
18
19
-
The CHS jsPsych experiment runner automatically loads a set of packages from the standard jsPsych library for researchers to use. These are:
19
+
The CHS jsPsych experiment runner automatically loads a set of packages from the standard jsPsych library for researchers to use. The set of jsPsych packages/versions loaded by CHS is below, along with links to documentation and change logs (version history).
We will likely add more options in the future. If there are any specific jsPsych plugins/extensions that your experiment needs, please let us know! The best way to request access to a standard jsPsych package is by creating a ``lookit-api`` `Github issue <https://github.com/lookit/lookit-api/issues>`__, but you can also let us know on Slack.
If there are any specific jsPsych plugins/extensions that your experiment needs, please let us know! The best way to request access to a standard jsPsych package is by creating a ``lookit-api`` `Github issue <https://github.com/lookit/lookit-api/issues>`__, but you can also let us know on Slack.
33
90
34
91
35
92
.. _chs-jspsych-packages:
@@ -39,34 +96,56 @@ Custom CHS jsPsych packages
39
96
40
97
In addition to the jsPsych packages listed above, the CHS jsPsych experiment runner also automatically loads some custom packages. These custom plugins/extensions were designed to "fill in the gaps" in the sort of functionality that CHS researchers typically need for child development studies. This functionality includes: standardized webcam/mic configuration steps, video-recorded consent, trial/session recording, and standardized exit surveys.
41
98
42
-
The `CHS jsPsych documentation <https://lookit.readthedocs.io/projects/chs-jspsych/en/latest/>`__ contains more information about all of the parameters available in the CHSjsPsych plugins/extensions listed below.
99
+
The custom CHS-jsPsych packages/versions are listed below, along with links to documentation and change logs (version history). The `CHS jsPsych documentation <https://lookit.readthedocs.io/projects/chs-jspsych/en/latest/>`__ contains more information about all of the parameters available in the CHS-jsPsych plugins/extensions.
43
100
44
-
Do you need any types of trials (Lookit EFP "frames") or features that are not listed here, and are not available through the standard jsPsych library? Let us know! The best way to request a custom (CHS-specific) jsPsych plugin/extension or feature is by creating a ``lookit-jspsych`` `Github issue <https://github.com/lookit/lookit-jspsych/issues>`__, but you can also let us know on Slack.
101
+
**CHS Record package**
45
102
46
-
.. _chs-jspsych-plugins:
103
+
Current version: 4.1.0 (`see changelog <https://github.com/lookit/lookit-jspsych/blob/main/packages/record/CHANGELOG.md>`__)
47
104
48
-
Plugins
49
-
---------------------
105
+
.. rst-class:: jspsych-plugins-extensions
50
106
51
-
- `Video config plugin <https://lookit.readthedocs.io/projects/chs-jspsych/en/latest/record/#video-configuration>`__ in the CHS Record package: ``chsRecord.VideoConfigPlugin``
52
-
- `Video consent plugin <https://lookit.readthedocs.io/projects/chs-jspsych/en/latest/record/#video-consent>`__ in the CHS Record package: ``chsRecord.VideoConsentPlugin``
53
-
- `Start session recording plugin <https://lookit.readthedocs.io/projects/chs-jspsych/en/latest/record/#session-recording>`__ in the CHS Record package: ``chsRecord.StartRecordPlugin``
54
-
- `Stop session recording plugin <https://lookit.readthedocs.io/projects/chs-jspsych/en/latest/record/#session-recording>`__ in the CHS Record package: ``chsRecord.StopRecordPlugin``
55
-
- `Consent survey plugin <https://lookit.readthedocs.io/projects/chs-jspsych/en/latest/surveys/#consent-survey>`__ in the CHS Surveys package: ``chsSurveys.ConsentSurveyPlugin``
56
-
- `Exit survey plugin <https://lookit.readthedocs.io/projects/chs-jspsych/en/latest/surveys/#exit-survey>`__ in the CHS Surveys package: ``chsSurveys.ExitSurveyPlugin``
- `Trial recording extension <https://lookit.readthedocs.io/projects/chs-jspsych/en/latest/record/#trial-recording>`__ in the CHS Record package: ``chsRecord.TrialRecordExtension``
66
141
67
142
.. _chs-jspsych-translations:
68
143
69
144
Translations
70
145
--------------------------
71
146
72
147
All of these plugins/extensions support the automatic translation of hard-coded text through a ``locale`` parameter.
148
+
149
+
.. admonition:: Need something else?
150
+
151
+
Do you need any types of trials (Lookit EFP "frames") or features that are not listed here, and are not available through the standard jsPsych library? Let us know! The best way to request a custom (CHS-specific) jsPsych plugin/extension or feature is by creating a ``lookit-jspsych`` `Github issue <https://github.com/lookit/lookit-jspsych/issues>`__, but you can also let us know on Slack.
Copy file name to clipboardExpand all lines: docs/source/tutorial-jspsych/tutorial-jspsych-first-study.rst
+62-5Lines changed: 62 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -199,7 +199,12 @@ The full code so far:
199
199
Step 6: Add session recording
200
200
-------------------------------------------------
201
201
202
-
We now have a bare-bones CHS experiment structure: webcam/mic configuration, video-recorded consent, our "experiment" (hello world trial), and an exit survey. The only thing we're missing for typical CHS experiments is webcam recordings that are captured during the experiment. We can do that using either: (a) session recording, where a webcam recording starts at a specified point in the experiment's trial sequence and ends at another point, with any number of experimental trials in between, or (b) trial recording, where a webcam recording is created at the start of a particular trial and ends when that trial finishes.
202
+
We now have a bare-bones CHS experiment structure: webcam/mic configuration, video-recorded consent, our "experiment" (hello world trial), and an exit survey. The only thing we're missing for typical CHS experiments is webcam recordings that are captured during the experiment. We can do that using either:
203
+
204
+
.. rst-class:: jspsych-plugins-extensions
205
+
206
+
- **session recording**, where a webcam recording starts at a specified point in the experiment's trial sequence and ends at another point, with any number of experimental trials in between, or
207
+
- **trial recording**, where a webcam recording is created at the start of a particular trial and ends when that trial finishes.
203
208
204
209
.. admonition:: When should/shouldn't I use trial and session recording?
205
210
@@ -258,6 +263,17 @@ Here's the full experiment code now:
Now when you save your code and preview the experiment, your experiment will run as it did before, but you will also get a video recording that captures the duration between your ``start_rec`` and ``stop_rec`` trials. To see your recording, you will need to approve your own consent statement: from the study details page, click "Review Consent", find your most recent session, change it from "pending" to "accept", then click "Submit Rulings & Comments". Then go back to your study details page, click "Study Responses", click "Individual Responses", and find your most recent session in the table. With that response selected, you should see two videos listed in the "Download videos" box - one is your consent video and the other is your session recording.
267
+
268
+
**Bonus step**: Use the ``wait_for_upload_message`` parameter to override the ``stop_rec`` trial's default message ("uploading video, please wait...") and present some custom HTML content instead. The example below will display some text and play a video.
269
+
270
+
.. code:: javascript
271
+
272
+
conststop_rec= {
273
+
type:chsRecord.StopRecordPlugin,
274
+
wait_for_upload_message:"<p style='font-size: 30px; color: blue;'>Please wait while we upload your video!</p><video src='https://www.mit.edu/~kimscott/placeholderstimuli/webm/attentiongrabber.webm' autoplay />",
275
+
};
276
+
261
277
262
278
Step 7: Switch to trial recording
263
279
-------------------------------------------------
@@ -271,7 +287,7 @@ We now we'll switch to trial-level recording during our hello world trial. To do
2. Add the `chsRecord.TrialRecordExtension` to the parameters that are passed into ``initJsPsych``. This is the `jsPsych initialization function <https://www.jspsych.org/latest/reference/jspsych/#initjspsych>`__, which takes an optional settings object and parameters. So far we haven't needed any of these setting parameters, but now we do need to tell jsPsych that we're planning to use the trial recording extension at some point during the experiment.
290
+
2. Add the ``chsRecord.TrialRecordExtension`` to the parameters that are passed into ``initJsPsych``. This is the `jsPsych initialization function <https://www.jspsych.org/latest/reference/jspsych/#initjspsych>`__, which takes an optional settings object and parameters. So far we haven't needed any of these setting parameters, but now we do need to tell jsPsych that we're planning to use the trial recording extension at some point during the experiment.
275
291
276
292
.. code:: javascript
277
293
@@ -280,8 +296,7 @@ We now we'll switch to trial-level recording during our hello world trial. To do
280
296
});
281
297
282
298
283
-
284
-
3. Add the `chsRecord.TrialRecordExtension` to the configuration for the trial that we want to be recorded. This tells jsPsych to run trial recording for that particular trial. Here we are just adding trial recording to the "hello_world" trial.
299
+
3. Add the ``chsRecord.TrialRecordExtension`` to the configuration for the trial that we want to be recorded. This tells jsPsych to run trial recording for that particular trial. Here we are just adding trial recording to the "hello_world" trial.
285
300
286
301
.. code:: javascript
287
302
@@ -323,8 +338,50 @@ Here's what the whole experiment looks like now:
You can follow the instructions at the end of the previous step to see your session recordings. Now for your most recent session, you should still see two videos listed in the "Download videos" box - one is your consent video and the other is your trial recording. If you edit your study code to add another ``hello_trial``, then you will end up with three videos: a consent recording and two trial recordings.
342
+
343
+
**Bonus step**: Use the ``wait_for_upload_message`` parameter to override the default uploading message ("uploading video, please wait...") that is shown at the end of the ``hello_trial``, and present some custom HTML content instead. To do this, we need to add a new property called "params" alongside the trial recording extension. The value of "params" is an object that contains the parameter names and values that should be passed to the extension.
344
+
345
+
The example below will display some custom text and a video while the webcam recording is uploading at the end of the ``hello_trial``.
346
+
347
+
.. code:: javascript
348
+
349
+
consthello_trial= {
350
+
type: jsPsychHtmlButtonResponse,
351
+
stimulus:'Hello world!',
352
+
choices: ['Next'],
353
+
extensions: [{
354
+
type:chsRecord.TrialRecordExtension,
355
+
params: { wait_for_upload_message:"<p style='font-size: 30px; color: blue;'>Please wait while we upload your video!</p><video src='https://www.mit.edu/~kimscott/placeholderstimuli/webm/attentiongrabber.webm' autoplay />" }
356
+
}],
357
+
};
358
+
359
+
Step 8: Move participants in and out of fullscreen
Typically you'll want your participant's browser to be in fullscreen mode during your experiment, which you can do using `jsPsych's fullscreen plugin <https://www.jspsych.org/latest/plugins/fullscreen/>`__. You can create a trial that will let participants know that they will enter fullscreen when they click the "Continue" button (with parameters that allow you to change the message and button label). You can also create a trial that will automatically exit fullscreen mode.
363
+
364
+
.. code:: javascript
365
+
366
+
constenter_fullscreen= {
367
+
type: jsPsychFullscreen,
368
+
fullscreen_mode:true
369
+
};
370
+
371
+
constexit_fullscreen= {
372
+
type: jsPsychFullscreen,
373
+
fullscreen_mode:false,
374
+
delay_after:0
375
+
};
376
+
377
+
Once you've created these trials, you can put them anywhere in your experiment timeline.
Well done! You've learned how to create a jsPsych experiment on CHS! You can use this tutorial code as a starting point for your real experiment, and replace the hello world trial with some actual jsPsych experiment code.
0 commit comments