1 of 42

SNUjsPsych Day 4:�Further Tools

Daniel Plesniak (plesniak@usc.edu)

2023/07/20

2 of 42

Plan for Today

Part 1: Some Advanced Techniques ~1:00-~1:50

Review of last time
Working with media files
More complex experiments

Break ~1:50-~2:00

Part 2: Practice, etc. ~2:00-~3:00

Building a demo experiment
Work on your own experiment
Important HW this time

3 of 42

Part 1: Some Advanced Techniques

5 of 42

Experiment Types

SNUjsPsych supports experiments that involve participants:

Pressing a key
Clicking a button
Moving a sliders
Filling out questionnaires
Doing self-paced reading
Recording audio/video response
Drawing
Being mouse/eye tracked
And more!

6 of 42

Options

We also learned about some options that can be specified for different test types.

For example, the button-press test type has:

choices
prompt
margin_vertical
margin_horizontal
trial_duration
response_ends_trial
randomize_order
post_trial_gap

Many of these are shared with other test types.

7 of 42

Atypical Test Types

We also learned about�test types like the�questionnaire test type,�which is very useful but�requires the stimuli�to be specified in a �different way than most.

You can get the basic idea�from the image on the right!

8 of 42

Directions, Consent, Etc.

We also covered how to add:

Title pages
Directions
Consent forms
Demographic questionnaires
Comment boxes

The basic conclusion: you can just reuse experimental test types to achieve all of that.

E.g., a consent form can be a button press test.

9 of 42

Putting It All Together

We also practiced making a complete experiment.

As you perhaps noticed, one of the biggest challenges is not conceptual, but simply mechanically imputing all the information.

Making sure all the needed modules are imported.
Ensuring no typos, missed commas, etc.
Naming/referring to all the variables (corresponding to stimuli, tests, procedures) correctly.

Make sure to frequently test your experiment as you create it to avoid having to spend a long time tracking down which particular part is causing issues.

10 of 42

One Semi-New Thing

Something that we have ended up talking about a few times (but hasn’t been on the slides) is how to make experiments work with Korean text.

Generally, it’s pretty easy! Just change the top of the document from:��to

If that doesn’t work, let me know, and we’ll figure out what’s going on.

11 of 42

Working With Media Files

12 of 42

Media

Media files include:

Audio files
Image Files
Video Files

Inside of your experimental folder, you should have a dedicated folder for such files to go in.

By default, this is called “Media”.
Files will be referred in the code to as “folder/filename”, e.g., “Media/pnik.wav”

13 of 42

Preloading (1)

Since media files can be large, it can sometimes take the webpage a while to load them.

To avoid having delays during the experiment, it is advisable to preload them at the start.

This is what the “Preload Section” is for.

Include <script src="jspsych/plugin-preload.js"></script> in the modules section to use it.

14 of 42

Preloading (2)

You can preload�media following the�format on the right

If there are no media�of a particular type,�the relevant line can be deleted.

See Section 4.2.4 of the manual for more info.

15 of 42

Media in HTML

The way to include media files is to refer to them in HTML in the relevant parts of your experiment.

The general syntax is <MEDIA_TYPE src="FILENAME" OPTIONS>

E.g., to add the audio file pnik.wav with options “autoplay” and “controls”:�<audio src="Media/pnik.wav" autoplay controls>

Options are not required, and you can have as many or as few as you want (all separated by spaces).

16 of 42

Options (1)

There are several available options

For video and audio:

autoplay (makes the file play automatically, rather than waiting for a participant to press play)
controls (provides a menu to play/pause the media)
loop (causes the media to play repeatedly)

For video and images

height (manually sets the height to a certain number of pixels, e.g., height=“400”)
width (likewise, but for width)

17 of 42

Options (2)

Note that if autoplay and controls are both not provided for audio and video, the media will not play or be playable, so at least one ought to be added.

With controls, audio shows up looking like this:

Otherwise, it is invisible (again, only good if you are autoplaying it)

18 of 42

Media as Static Elements

If you just want to �include media in a way �that isn’t changing, �say as a background �element or part of the �directions, you can just �specify it as part of the �relevant HMTL text.

E.g., the directions on�the right include <img src="Media/orange.png"> and �<img src="Media/blue.png">

19 of 42

Media as Stimuli

If Media are (part of) your �stimuli, you do largely the �same thing, but to avoid �typing too much, make clever �use of the ”stimuli” part vs. �the “test” part.

See what has been done�on the right?

This will avoid a lot of tedious�and error-prone retyping of�the same content.

20 of 42

Audio Recording (1)

While we’re on the subject of media, I was asked about recording participant audio.

This is covered in more detail in Section 5.3 of the manual, but I will give the basic information here.

First, to record audio, you will have to have access to the participant’s microphone. To do this:

Include the following line in the modules section:�<script src="jspsych/plugin-initialize-microphone.js"></script>
Put a block like the one on the right �in the preload area, customizing the �message options as desired.

21 of 42

Audio Recording (2)

To do the actual recording, again, import the relevant module:

<script src="jspsych/plugin-html-audio-response.js"></script>

Then, set up the “stimuli” and �“procedure” sections of the block �however you want, but set up the �“test” according to the �“jsPsychHtmlAudioResponse” type.

Pretty typical type, but with some�less common options.

22 of 42

Audio Recording (3)

Options include:

recording_duration The amount of time participants have to record. Specified � as a number (in miliseconds). Defaults to unlimited.
show_done_button By default, the participants can press a button when they � have finished recording. If this is set to false, they must � wait for the recording duration to finish (auto-advances).� Useful if you want all files to be the same length.
done_button_label Label of the button to press when recording has finished.� Can be pretty much whatever HTML string you want.
save_audio_url If set to true, jsPsych will keep the audio file in memory in � as audio order to replay it later during the experiment. (By � default it’s stored in a less-intensive, but unplayable, way.)
Cont. on next slide.

23 of 42

Audio Recording (4)

Options include:

allow_playback By default, participants only get to record once. If this is set to true, they can replay their audio and � re-record it if desired.
record_again_button_label Label for the button to redo the recording, if� “allow_playback: true”
accept_button_label Likewise, but to accept the current recording. As � usual, all labels are HTML strings.
And more, namely�general options like �randomization, etc.

24 of 42

Audio Recording (5)

One issue you may face is that audio files are large, and if you are recording a lot of audio, the browser may hit the limit of how much it can store.

If this happens, we’ll need to implement a custom saving system, so that it doesn’t have to wait to the end to save the data. (Not a big deal!)

Also, as discussed in Section 6.2.1 of the manual, media data in general is not saved by jsPsych as media files, but rather, base 64 media data in your results csv.

You will presumably have to convert this in order to make use of it.
If there are not many such files, this is not hard (e.g., go to https://base64.guru/converter/decode/audio), but if you have lots of files, again, we may need to implement something custom. (Again, not a big deal!)

25 of 42

More Complex Experiments

26 of 42

Multi-Part Stimuli

One way that things might be more complex is if your stimuli have more than one component.

For example, what if I want to ask if a given sentence can have a given interpretation?

As it turns out, this is quite easy, as stimuli can contain multiple tags!

27 of 42

Multiple Tags (1)

Consider the experiment on �the right.

Its basic goal is to ask how a �phrase in a given sentence�can be interpreted.

The possible interpretations�are constant, but the sentence �and phrase are not.

28 of 42

Multiple Tags (2)

The stimuli�contain�two tags�each,�“sentence”�and “phrase”

Each is separated from the next by a comma and has its own content.

You can have as many tags as you like!

29 of 42

Multiple Tags (3)

In the “test” part, both tags�are referred to, using the�same syntax as normal.

As many tags as you want�can be referred to, and�each one can be referred to�as many times as desired.

30 of 42

Multi-Part Tasks

What if instead of multiple parts of a stimulus, we want participants to do multiple things in sequence per each stimulus?

For example, maybe after each self-paced reading, we want them to answer a comprehension question.

Or maybe we want to show a fixation cross for five seconds before an eye-tracking trial.

Etc.

31 of 42

Procedure (1)

This is where the “procedure” part �of the block comes in.

You can have multiple ”tests” per �block, and combine them in the �procedure.

For example, one demo experiment �in specific.html first has participants �use a slider to rate one thing �(test0t1a) and then a different one to �rate another (test0t21b)

32 of 42

Procedure (2)

The tests are then combined�(in the order desired)�in the “timeline:” line of�the procedure part.

You can have as many such tests per block as you want.

They will all share the same set of stimuli, but you need not use each “tag” of the stimulus in each test.

33 of 42

Wrapping Up Part 1

Incoporating more complex elements into your experiments is possible in SNUjsPsych:

Presenting media via the appropriate HTML statements (+preloading)
Collection of media data (we saw audio; video and images are similar)
Mutli-part stimuli via multiple tags per stimulus
Multi-part experiments via multiple tests in a block (+combining them via the procedure)

We have gone over the details a little quickly; you can find out more details in Section 4 (and bits in Sections 5-7) of the manual.

Looking at the example files will probably also help!

34 of 42

Break Time!

35 of 42

Overview

At this point, you have learned all the basics of making experiments with SNUjsPscyh.

The plan for today is to practice and apply what you have learned.

First via building a demo experiment based on the concepts covered today.
Then by working on your own experiments (if desired).

Tomorrow, we will conclude this workshop by discussing data, both how to deal with the files SNUjsPsych outputs and how to deploy your experiments to platforms so that participants can take them.

36 of 42

Homework (1)

Today’s homework is a little more important to do ahead of next class, though it is still optional.

One of the things we will be discussing is how to put your experiment on your personal website.

The SNU Ling department has a website that will be able to be used for this purpose soon, but it is not yet functional.
So, for now, a personal site is one easy option for deploying your experiments.
We will discuss a couple other ways too, though.

If you would like to try putting your experiment via a personal website, you will need a website of your own, if you do not already have one.

37 of 42

Homework (2)

You will need to be able to customize the website by uploading .html files to serve as webpages.

A lot of popular free services, like WordPress’s free accounts, do not allow this.

So, you should probably pick a service that you have to pay for (though not an expensive one!)

I recommend Host Gator (https://www.hostgator.com/web-hosting) as a quite cheap and easy to use option. (Their cheapest option should be good enough)
You can use it to easily make a website via a website builder like WordPress (you will have access to all the “backend” features you need, unlike their free accounts)

38 of 42

Homework (3)

It is probably good for you to have a website anyways!

Consider making one tonight (again assuming you do not have one already)

You do not need to set anything up besides just getting an accessible website.

If you don’t do it before next session, it won’t be a problem at all, it’s just for the sake of your convenience!

39 of 42

Practice (1)

Combining what we’ve learned today, try to make an experiment that achieves the following things (serially, once per stimulus):

First, displays and image and a made-up word, and asks participants to rate how well the word suits the image.
Then, asks participants to rate whether the made-up word is a possible word of their language or not, regardless of the image.

To do this, first try downloading, say, five images from the internet.

Save them with simple names in the folder for media for your experiment folder.

40 of 42

Practice (2)

Then, create a new experiment (filling out all the other details like title, etc.)

Preload the images, making sure to add the relevant line to the modules section so that you can use the preload function.

Once that is done, set up a block where the stimuli each consist of one of the images and the associated word, tagged as “image” and “word” (or something like that).

41 of 42

Practice (3)

Then, add two button tests to the block, one asking a question about both the image and the word, and one asking just about the word.

Remember to import the button module!

Finally, combine both tests together in sequence using the procedure.

Bug test to make sure you get the intended behavior!

42 of 42

Working on Your Own Experiment

Once you have successfully completed the practice, feel free to work on your own experiment further.

You can also try looking at some parts of the manual we haven’t gotten to cover yet.

We will cover Sections 6.2.1., 6.2.2, 6.4, and 7.2 tomorrow, but everything else will not be directly covered (unless requested, of course!)

Might be good to at least skim the table of contents, just in case something looks useful.