1 of 117

Quick Intro to SNUjsPsych

Daniel Plesniak (DHPlesniak@gmail.com)

2025/09/26

2 of 117

Before we get started

From past experience, I know the downloading required for this tutorial always takes some time!

So go ahead and start downloading:

SNUjsPsych at https://sites.google.com/view/danielplesniak/etc/snujspsych
Visual Studio Code at https://code.visualstudio.com
XAMPP at https://www.apachefriends.org

This last one can take FOREVER, so maybe do them in reverse order!

3 of 117

Introduction

4 of 117

Purpose

This lecture is designed to introduce you to some of the fundamental concepts of SNUjsPsych, a tool for making sophisticated online experiments without the need for coding.

A much fuller tutorial can be found in the SNUjsPsych manual, which is included in the download (found at https://sites.google.com/view/danielplesniak/etc/snujspsych).

At the same page, there are some other slides from another, longer workshop, which cover things in a bit more depth than this one.

You can also download these slides there too!

5 of 117

Outline

First, we will discuss various conceptual and setup issues.

This will cover how to get SNUjsPsych “working” in various ways.
By the end, you should be able to run (and edit) the demo files that come with SNUjsPsych.
You will not necessarily know how they work though, or how to make your own.�

Later, we will begin to explore these latter issues, to the extent time permits.

There are lots of different types of experiments, so we cannot cover them all (you can read about them in the manual).
Instead, we will try to get a sense of how SNUjsPsych experiments work in general, which will be helpful when you try to learn more on your own later.

6 of 117

Background to Online Expeirments

7 of 117

The Internet (1)

A bunch of connected computers

Specifically, any set of connected�computers is called a “network”,�and the internet INTER(connects)�many NET(works)

To allow these computers to all�communicate, a special “language”�the “Internet Protocol Suite” is used.

https://upload.wikimedia.org/wikipedia/commons/3/3f/Internet_map_1024_-_transparent%2C_inverted.png

8 of 117

The Internet (2)

Much of the content we access�is stored in networks of �“servers” like the one on the right.

This is what Wikipedia physically�“looks” like.

A server is a computer that “serves”�according to the requests of a “client”,

For example, a client might say “give me this file” and the server will send them the file in question.

https://upload.wikimedia.org/wikipedia/commons/6/69/Wikimedia_Foundation_Servers-8055_35.jpg

9 of 117

Websites (1)

A “web server” is a server that accepts requests via the internet protocol suite (specifically via something called “http” or “https”, which is why those occur at the beginning of web addresses!)

In other words, a server that will answer client requests over the internet.

A “webpage” is a special type of file stored on a web server.

Note how much website addresses look like file addresses on your computer:

https://en.wikipedia.org/wiki/Web_page The address of the � Wikipedia article on � web pages
/Users/Daniel/Dropbox/Current/QuickSNUjsPsych2025S.pptx The address of this file � on my computer

10 of 117

Websites(2)

A website is a collection of webpages (and potentially other such material) stored on a webserver (or network thereof).

These webpages are actually text documents, written like you might write a paper in a word processor.

The difference is that they are written in something called “HTML” (HyperText Markup Language). See right.

The Wikipedia page on HTML as it appears to us as clients.

The same page, as it is stored on the server

11 of 117

Browsers

An application to make requests for clients (our computers) to webservers to send the files for webpages.

Once the file is received (in HTML format), the browser reads the HTML, and follows its directions to display the specified content.

The browser can also send further information back to the website

E.g., when you push enter your name and password and push “Log in”, the browser sends that information back to the webserver so it can check whether you’ve put in a valid combination.

12 of 117

Online Experiments

So, if we want an experiment to be “online” (that is, to work over the internet), it will have to:

Be stored in a webserver
In particular, have a webpage associated with it
And specifically, have a document written in HTML so that our participant’s computers (the “clients”) can use their browsers to display it.

So, does this mean we have to learn how to write our experiments in HTML?

Not quite, for two reasons…

13 of 117

Reason 1 (more minor)

There are lots of tools that can write HTML for you.

For example, if I go to https://wordtohtml.net/, I can convert the text of this page to HTML just with copy and paste:

14 of 117

Reason 2 (more major)

HTML is a “markup language”, not a a “programming language”.

That is, it tells the browser what to display, but it can’t really “react” to what the user does.
E.g., HTML tell the browser, “show two buttons saying ‘Yes’ and ‘No’, and make them grey on a black background ”, but it cannot tell the browser what to do if someone clicks one of those buttons.
Consider it basically the equivalent of a word processor.

Fortunately, though HTML cannot express any commands itself, it can tell the browser to execute commands (“scripts”) written in a programming language.

E.g., it can say “show a button called ‘Yes’ with the property that if it is pressed, script X is triggered.”

15 of 117

JavaScript (1)

These scripts are generally written in the programming language JavaScript.

It is estimated that almost 99% of all websites use JavaScript (https://w3techs.com/technologies/details/cp-javascript) for interactivity purposes.

So, to review, any time you see something displayed on a website, it is probably written in HTML, and any time you interact with a website, that interaction is probably programmed through JavaScript.

We can think of JavaScript as a kind of “brain” generating particular HTML statements for the browser to display (among other things).

16 of 117

JavaScript (2)

JavaScript is a “client-side” language, meaning it tells the client computer what to do, rather than the server.

In other words, when I view a webpage, the JavaScript programs embedded in it run on my computer, not the server.

So, if my internet connection and/or the web server is fast but my computer is slow, the program will run slowly; conversely, if my computer is fast but my internet connection and/or the webserver is slow, the program will run quickly.

If we want the server to do something, (e.g., check if a password is correct, save our data, etc.) we will have to write a function in a different language and have JavaScript tell the browser to request that the server run that function.

A bit complicated, but the upside is that, even if our computer is offline, JavaScript will still run, as it is entirely client-side (i.e., running on our computer).

17 of 117

JavaScript (3)

Within those limitations, you can build virtually any kind of program in JavaScript, as long as it’s the sort of program you want to run in a browser.

Entire videogames have been written using JavaScript; if you have played a game in a web browser, it may well have been (at least partially) programmed that way.
Experiments are considerably simpler than videogames, so JavaScript can definitely handle them.

If you have time and inclination, learning JavaScript will give you the ability to make (almost) any sort of experiment you like!

But, it is time-consuming, and assuming you want to do something relatively “standard”, there are premade tools that can assist you.

18 of 117

jsPsych (1)

jsPsych (https://www.jspsych.org), �created by Josh de Leeuw, is a set �of premade tools designed to �help researchers carry out online� experiments.

It is basically a big “library” of �interconnected JavaScript �functions, which do basic things �like displaying a particular type of�experimental stimulus and recording �a participant's answers/response time.

19 of 117

jsPsych (2)

Using jsPsych is much simpler than writing JavaScript programs from scratch.

This is especially true if you are only using the premade functions as written and not modifying anything.

However, some coding is still necessary to set up a full experiment.

If you have some coding background or want to learn, the jsPsych website has some nice tutorials.
One downside: unlike JavaScript, which is widely used, not that many people use jsPsych (mostly only researchers like us!), so there is not too much online support. (You can try asking the developer(s) though).

If you don’t want to deal with that, there is SNUjsPsych!

20 of 117

SNUjsPsych (1)

SNUjsPsych a set of files (made by me) based on jsPsych, which contains three key components (besides the jsPsych library+some extra stuff):

A template based on which to build experiments.
A manual explaining how to modify the template to make various kinds of experiments.
Demo files that provide examples of the above.

To use SNUjsPsych, all you need to do is:

Figure out what you want to do and copy and paste the appropriate code.
Fill in the blanks with your stimuli.

21 of 117

SNUjsPsych (2)

SNUjsPsych does not require any original coding; you just need to follow the (relatively simple and formulaic) directions of the manual.

This gives you most of the functions of jsPsych and should be sufficient to generally cover all common types of experiments linguists perform.

The downside is that, because you are just copy and pasting, you cannot do anything too “original” or intricate.

I can probably perform a slight modification to help you achieve what you want, however, so feel free to contact me if such a need arises.

22 of 117

Setting up SNUjsPysch

23 of 117

Downloading SNUjsPsych

Go to https://sites.google.com/view/danielplesniak/etc/snujspsych

Click the link under “Download the latest version of SNUjsPsych:”

Once downloaded, �unzip the file.

The result should�hopefully look�like the picture�on the right.

24 of 117

“Running” .html Files

Viewing the webpage contained in an .html file is as generally simple as opening the file.

In most operating systems, if you double click, it will open the .html file in a browser as if it were on a website.

Note that this does not mean that the content of the file is actually online.

Rather, your browser is simply reading the HTML content of the file and displaying it.
You will be able to see that the “URL” is actually just a file path on your computer.

25 of 117

sample.html (1)

sample.html contains �a very basic �experiment.

If we double click on �it, it will launch in a �webpage like�the one on the�right

Again, note the�“URL”!

26 of 117

sample.html (2)

This sample file contains an entire experiment; when you get a chance, go through it at least one time on your own to see how it works.

One limitation: currently, no data is saved when the experiment is completed.

This has to do with the “client-side” nature of JavaScript.

It can show us (the client) the experiment, but it cannot save data to our computer (the server)
We will see how to save data shortly.

27 of 117

Code Editors

Opening .html files normally runs them as webpages, but what if we want to actually see the code that is written in those files?

The easiest way will be to download a code-editing software.

If you do not already have one, I recommend Visual Studio Code, which you can download here: https://code.visualstudio.com/

28 of 117

Viewing and editing .html Files

Launch your code �editor and use the �“open” feature to find,� e.g., sample.html

When it opens, it �should look something �like what’s on the right.

You can edit this code �as you like; if you open the file again after saving your changes should have taken effect.

We will come back to this later in the class.

29 of 117

Saving Locally

30 of 117

Local Servers (1)

As I mentioned before, JavaScript can’t directly tell our computer to save data, because it is entirely client-side (that is, it runs completely in the browser, so it can’t make new files in our folders).

What JavaScript can do though is have the browser send a request to the server to run some other program, and that program can save the data.

Problem: when we just double click on a .html file, there is no server!

The browser just interprets the content as if it were a webpage.

31 of 117

Local Servers (2)

What we can do is to basically make a “mini-sever” on our own computer.

“Local” in the sense of “not over the internet”.

This mini-server won’t be connected to the internet, but it can still do all the things a server can do, e.g., accept JavaScript’s request to run the “save data” program.

To set this up, we need to download some software. I recommend XAMPP (download at: https://www.apachefriends.org/)

32 of 117

XAMPP (1)

Download, install, and run XAMPP.

You can check if this has been successful by typing “localhost” into the URL bar of your browser.

You should see something like what’s on the right.

33 of 117

XAMPP (2)

If you don’t see that, use your computer’s search function to find something either called “Manager-osx” or “XAMPP control panel”.

Run that, go to the part about servers, and make sure the “Apache Web Server” is running.

If you restart your computer (or turn off the server) this is how to turn it back on again.

34 of 117

htdocs

Now, navigate to a folder called htdocs, which should show up as being inside something related to XAMPP.

To put a file or folder on your server, place it into htdocs.

Try putting your “my experiment” (or whatever you called it) folder in there.

35 of 117

Access Files on the Local Server (1)

Whatever the filepath of the file/folder is inside of htdocs, you can type “localhost/FILEPATH” to get to your files in your browser.

For example, I have a “SNUjsPsych” folder in my htdocs for testing things to do with SNUjsPsych, so for me to get to that, I type “localhost/SNUjsPsych”, and I get the screen on the right.

36 of 117

Access Files on the Local Server (2)

To run a file, you can either click on it in the menu, or type in the “URL”, e.g., for me,�localhost/SNUjsPsych/sample.html

The file will run basically the same as if I had double clicked it.

Certain functions work better on servers though, so ideally,�you would always run jsPsych programs this way.

37 of 117

Saving Data (1)

In your folder, there should be a folder called “Data”

It is important that this name not change, as SNUjsPsych is set to save to a folder with this name; if you need to change it though, I can help you.

We will need to make sure it is “writeable” by our saving program; by default, folders are often not able to be changed by programs to prevent hacking.

We need to change the “permissions” of the folder, and how this is done will vary based on the computer.

If you right click (or the equivalent) on the file, there should be something like “permissions” or “(get) info”, and the relevant menu should be there.

38 of 117

Saving Data (2)

To check whether everything has worked: try running a file like sample.html via the local server, and when you are done, check the “Data” folder to see if anything has been saved.

The save file should look like “session-_____.csv”, where _____ is some random numbers and letters.

If you open it in a program like Excel, it should look something like the right

39 of 117

Saving Data (3)

Though you can probably read at least parts of it it, the data is not in an ideal state of analysis.

In general, you are going to want to �use some sort of tool to extract, �combine, and analyze the data �from all participants.

Even something as simple as Excel can do this; please contact me if you’d like to learn more.

One thing to be careful of: if you are using Excel, make sure to change the filetype from .csv to .xlsx right away! Otherwise, there can be problems later.

40 of 117

One Caveat

Be a little careful about interpreting the responses.

In this case, “0” and “2” don’t mean the participant answered “0” and “2”, they mean the participant clicked on the first (in computer-speak, 0^th), and the third (in computer-speak, 2^nd) buttons.
Those were in fact the options “1” and “3” in a five-point rating scale.

You may need to set up something to convert your table of combined participant data into something that matches more closely with what it represents, e.g., in my case, replacing 0’s with 1’s, 2’s with 3’s, etc.

There are also ways to have the experiment program do things like this for you: see Section 6.2.2 of the manual.

In general, make sure to always test your experiment yourself to make sure you understand the interpretation of the data jsPsych puts out.

41 of 117

Putting Experiments to Online

42 of 117

Hosting Experiments

If you intend to run your experiment from your own computer, you are already setup to do so!

Just use the ”localhost” sever discussed above.
Pros: simple, you control what kind of computer and environment people take your experiment in.
Cons: People have to come to you, only one person can do it at a time.

The alternative is deploying online.

Make sure to thoroughly test and debug your experiments via the localhost server first, however, as it is much easier to test/debug experiments locally.

43 of 117

Department Server (I)

The Linguistics Department has a server at snuling.com that can be used for hosting experiments.

The server is functional, but undergoing development, so the way of accessing to put up experiments is changing.

Eventually, you will be able to make an account and simply upload directly.

If you are interested, please email me (DHPlesniak@gmail.com) any time, and I will let you know how to use it.

You can ignore the instructions about the department server in the manual for now; they are for the old server.

44 of 117

Department Server (II)

If you want to demo what experiments on the server look like, you can go to http://snuling.com/SNUjsPsych/EXPERIMENT_NAME, e.g. http://snuling.com/SNUjsPsych/sample.html, where EXPERIMENT_NAME is the name of any of the SNUjsPsych demo files.

Some may not work as intended, due to bugs introduced during the ongoing development that haven’t been fixed yet.
This would not affect your own experiments.

If you have a website where you can upload html files, you can also use your own website (see the section 7.2.2 of the manual)

45 of 117

Let’s get everything working!

46 of 117

Trying it Yourself

Now, after answering any questions you have, you can have a chance to download and setup the various files/applications mentioned, if you have not already.

I can help you to troubleshoot various issues.

Once you get everything working, you can try running the various demo-files (all named ____.html) included with SNUjsPsych, to see examples of experiments you can build easily with SNUjsPsych.

Sample.html, universal.html, general.html, specific.html, misc.html
Ideally, run these via the localhost, as some will not work otherwise.

If you want, you can also try editing something like sample.html (maybe saving it as a different name) to see what happens when you make various changes.

48 of 117

Second Half Plan

We will now go over some of the basics of how jsPsych experiments are constructed.

Do not worry if you cannot understand everything; it is natural for it to seem complicated at first!

Just do your best to understand conceptually how things work, not worrying too much about the details.
You can read over these slides later (and the manual) to understand the details better.

For the sake of time, we will just discuss a very simple type of experiment, but because of the way SNUjsPsych works, even very “complicated” experiments will be pretty similar in terms of how they are created.

49 of 117

Walkthrough of template.html

50 of 117

The Template (1)

Everything in SNUjsPsych is built to run on a standardized template.

This is why no coding is required; everything is already “preformatted” to work.

We’re first going to go over the basic structure of that template, which you can then use to build your own experiments.

51 of 117

The Template (2)

When you start a new experiment project, you may want to use “save as” on template.html, renaming it to whatever you want your experiment to be called.

For convenience, you may want to make a new folder for it as well.

Just make sure that the folder contains, at minimum, your new experiment file, the jspsych folder (which, as mentioned before, is a subfolder of SNUjsPsych that contains all the jsPsych functions), and a Data subfolder.

52 of 117

Viewing the Template (1)

To get started, you can open �the template (“template.html”) in �your code editor.

You could also try running it, but it will �just produce a blank page; it’s only a �template, so none of the necessary �information has been filled in yet.

It’s too big to fit on this screen, �but the top should look something �like what’s on the right.

53 of 117

Viewing the Template (2)

You can see that some parts�of the code are enclosed in�“sections” (marked by green lines)

These sections are the only part of�the code you will generally need�to modify, unless specifically�instructed to.

The other parts handle the general�functions of the experiment, which�you do not normally need to change.

54 of 117

The Title Section

The first section is as on the right:

This simply controls what your page is called

E.g., when I run the sample.html file, I see “Sample Experiment” at the top of my screen like below:

When you make an experiment, you can replace the “YourTitleHere” with whatever text you want the participants to see at the top of the page.

55 of 117

The Modules Section (1)

The next section is as below:

In essence, this just tells our experiment which of jsPsych’s premade functions to make use of.

Because most experiments do not need to make use of every question type, it would be a lot of wasted space to store all the functions for every question type in our main file.
E.g., the code for eye-tracking could probably fill a book; it would be super annoying to scroll past all that every time we wanted to make a simple judgement task!

56 of 117

The Modules Section (2)

The functions are stored in the previously mentioned “jspysch” subfolder of SNUjsPsych.

The modules section tells our experiment which of this functions to “import”.

As you can see, by default, it imports something called “plugin-html-keyboard-response”

This is the function that handles the question/instruction pages where a participant presses a key to respond/go to the next page.

Whichever modules you need to import will be clearly specified in the part of the manual which covers the type of experiment you are making.
Simply copy and paste the provided code(s) below the keyboard response line.

57 of 117

The Preload Area Section

The third section is as on the right:

This section is involved in dealing with media, that is, images, audio, and/or videos that may be included in your experiment.

We will not discuss it right now; if you want to include media in your experiment, you can see Section 4.2 of the manual.

58 of 117

The Block(s) Section (1)

This next section is where you will spend most of your time.

The questions (and directions pages) of experiment will be handled through “blocks”.

The template shows one such block, “Block1”, but you can copy and paste and have as many blocks as you want.

59 of 117

The Block(s) Section (2)

Each block implements a particular part of the experiment, usually corresponding to a particular question/direction type.

For example, if I want to first show participants a page of directions, then have them rate some sentences, and the have them record some audio of them reading sentences, that would be handled by (at least) three blocks.

60 of 117

The Block(s) Section (3)

Blocks are shown to participants in the order they appear in the .html file.

Participants will not necessarily know when a block changes or completes.

It may be convenient for you to split things with the same question type into multiple blocks,
E.g., because you want to randomize some parts of the question order but not others.
This will be clear in the file but invisible to participants.

61 of 117

The Block(s) Section (4)

Each block is composed of three basic sub-parts:

A “stimuli” sub-part
A “test” sub-part
A “procedure” sub-part

We will get a better sense of how these work when we look more at sample.html a bit later.

We can give a general overview now though.

62 of 117

The Block(s) Section (5)

The “stimuli” part is a list of stimuli and their relevant attributes.

The “test” part specifies which test to run and any particular options.

E.g., if it’s a rating question, what are the numbers on the scale, are the stimuli randomized, etc.

The “procedure” part tells the program to combine the test and stimuli and add them to the experiment.

63 of 117

The Save Message Section

Finally, we have the section that�displays the message shown when�the participant completes the �experiment.

You can customize the text as desired; just make sure it says something about clicking any key to end the experiment, as that’s what they have to do.

Make sure participants do not close the experiment before getting here, otherwise their data won’t be saved!

64 of 117

Walkthrough of sample.html

65 of 117

Title

As we can see, the title section�has be filled in with the title �“Sample Experiment”.

As discussed, this will show up on the top of the page when the file is run.

In many cases, text to be displayed has to be enclosed in some sort of quotes, but here, it is just typed in directly.

66 of 117

Modules

In addition to the�default “html-keyboard-�response”, a line�importing “html-button-response”�has been added.

This allows for questions where a participant responds via a button.

I.e., in this case, the questions where a sentence is displayed, and the participant clicks on a number button in order to give it a rating.

67 of 117

Intro Block (1)

The first block included�is one that generates�the introduction page.�
Because it has only one�intro message to display,�there is only one stimulus�under “stimuli”, which is�enclosed in { }�

68 of 117

Intro Block (2)

At its most basic, a stimulus�is a “tag” and some content.

In this case, the tag is “message”�and the content is �“Welcome to the experiment”�

When we want to refer to the�content of the stimulus other parts�of the block, we’ll use the tag.

We’ll see why this is shortly.

69 of 117

Intro Block (3)

Moving on to the test, the first�thing not note is the line�
This means that the “test” to be�displayed is of the type where�the participant responds by �pressing a button.

This “test” is actually just directions, but jsPsych handles directions and questions the same way.

70 of 117

Intro Block (4)

Next in the test, we note the lines��
The only one you normally need to�modify is the second one,��
It’s what tells jsPsych how to �display the stimulus.

71 of 117

Intro Block (5)

In this case, all that is desired is to �display the message.

To do that, we simply say that the �stimulus is (i.e. ,“var stim =”)�the content of the tag “message”

The way to refer to the content of a �tag is to enclose it in �“jsPsych.timelineVariable(‘____’), �yielding:

72 of 117

Intro Block (6)

This type of test also lets us �add a prompt (which is usually�for the purposes of telling�the participant what to do).

Which test types allow which options�is given in the manual, though most�allow “prompt”

This is given in the line��

73 of 117

Intro Block (7)

Finally, we need to tell jsPsych�to add this block to�the “timeline” of bocks.

Notice that we have customized the�names of the stimuli and test�and procedure

We’ve also customized the text in �green, but that is for our convenience.

Stuff preceded by “//” is just a comment�to JavaScript and doesn’t actually get�“read” by the program.

74 of 117

Intro Block (8)

It is important that the names given �to the stimuli, test, and procedure�are repeated exactly in the places�designated on the right.

This is what tells jsPsych to�combine everything together.

Also important: make sure�these names are different from�the names given in any other block.

jsPsych might get confused otherwise.

75 of 117

Complicated?

What we just went over may seem overwhelming in terms of how many details there are.

What is important to realize is that we have just covered is almost everything you’ll ever have to know about SNUjsPsych, besides a few experiment-type-specific customization options.

That is because blocks are very similar to one another.

Look at the intro block and the directions block one the next page!

77 of 117

What has changed?

The variable names, e.g., intro_stimuli vs. directions_stimuli)

The content of the message

The content of the prompt.

Everything is is just cut and paste!

78 of 117

HTML

You might wonder about the weird �bits of text in the message on�the right

e.g., </p>, <strong> etc.

That’s HTML! You don’t really�have to learn it (see an earlier)�slide for a converter)

If you do want to know more, check out�Section 6.1 in the manual.

Actually, all the message/prompt text you’ve seen so far have been in HTML, HTML just looks “normal” unless you want to add additional formatting.

79 of 117

Main Block (1)

Now we come to the actual �experiment itself.

Note how similar much�of it is to the previous �blocks.

Let us go through the (few)�key differences.�

80 of 117

Main Block (2)

First, the “stimuli” section�has more than one stimulus.

They are all tagged “stimulus”,�with different content�assigned to each.

Now the tag will become useful.�

81 of 117

Main Block (3)

The test type is now�“html button response”.

This means we should�specify what the buttons are�This is done on the “choices”�line�

This will give us buttons with�labels 1-5.

82 of 117

Main Block (4)

Prompt is specified as before.�
The stimulus is looks a little�different this time, though:

In particular, the stimulus�has been combined (via pluses)�with some HTML (enclosed in�quotes), that will make it�display large and bold.

83 of 117

Main Block (5)

Notice here the usefulness�of the tag “stimulus”:

Whichever question we �happen to be on, (‘John bakes�pie’ vs. ‘Pie, John bakes’),�whatever is tagged ‘stimulus’�will get treated in the same way.

In particular, this text will be �displayed large and bold, saving�us the trouble of having to �repeatedly enlarge and bold each one.

84 of 117

Tagging

By using tags and the content �provided in the test part�of the block efficiently,�you can automate much of�the creation of your stimuli.

You focus on the stuff�that changes; jsPsych�does the rest.

85 of 117

Save Message

Finally, we have�the message�shown on experiment�completion

Not very complicated, but you might wonder what all the <p> </p> are about.

That is how paragraphs are divided in HTML; if you just type a paragraph on your keyboard, it won’t show up.
HTML is not WYSIWYG (What You See Is What You Get), and there are little “quirks” like this.
An HTML converter will handle this for you, but just in case you want to know, put <p> to start a new paragraph and </p> to end it.

86 of 117

Activity (Part 1)

Try to customize the demo (or make a new file from the template, but that is harder) to do something different than what it did before:

Try to replace the directions with directions in Korean, for example
Maybe make new items for people to judge
Try customizing things like the rating scale, or even the type of test performed (can you make so they simply press “f” for “yes” and “j” for “no”, for example?)

You may need to ask me how to do things, or to consult the manual.

Start thinking about an experiment you would like to perform, and what would be required in order to achieve it.
See how much of it you can implement!

87 of 117

Break�(If needed)

88 of 117

Before we move on to another activity

Is there anything you’d like me to demonstrate how to do in SNUjsPsych?

Examples could include:

Playing and/or recording audio
More complex tasks like self-paced reading
Technical things like having more customization per question (e.g., buttons, but they say different things.)

All these things are covered in the manual!

89 of 117

Activity (Part 2)

Once you have familiarized yourself a bit with SNUjsPsych, see if you can do the following:
Have a look at universal.html, both by looking at the code and by running it; try to figure out what the different components
Make your own experiment file (presumably by “saving as” on the template, and either copy and paste (or, if you prefer, type from scratch, following the examples given in those files and/or the manual), at least one of each of the following:

A page of directions
A consent form
A demographic questionnaire
Some sort of main experiment (you can use one we’ve already seen, or search in the manual/other demo files for how to make a different one!)
An ending comment box

90 of 117

Tips

Every time you make a new type of test, make sure to add the relevant lines to your Modules section

Always remember to save your work.

Test new additions one thing at a time, so you know what isn’t working when something breaks

Copy and paste as much as you can!

Doing things from scratch introduces a LOT of errors.

91 of 117

Some supplemental slides that might be helpful

92 of 117

Test Types (1)

Here is a list (cont. on next slide) of the types of test, that is, ways for the participant to respond to a question, (easily) supported by SNUjsPsych. A reference section in the manual is provided for each.

Pressing a key (2.3, 3.1, 4.2)
Clicking a button (2.3, 3.3, 4.1)
Scrolling through multiple pages of directions (3.2)
Filling out a questionnaire which can have (3.4)�questions involving

A displayed HTML-formatted element (3.4)
Typing a response (3.4, 3.5, 4.3.2)
Multiple choice buttons (3.4)
Checking boxes (3.4)
Choosing from a dropdown menu (4.3.3)
Selecting a value on a Likert scale (4.3.4)

93 of 117

Test Types (2)

List continues:

Moving a slider (4.3.1)
Self-paced reading (5.1)
Recording an audio response (5.2)
Recording a video response (5.3)
Drawing something (5.4)
Mouse tracking (5.6)
Eye tracking (5.7)

Obviously, we do not have time to cover them all, so we’ll just look at some examples.

94 of 117

Pressing a Button (1)

The code to include in the modules section is

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

The jsPsych’s name for this test is “jsPsychHtmlButtonResponse”, so to declare a block to be of this test type, on the line that says “type:” add the name to read

type: jsPsychHtmlButtonResponse,�

There are several options you can set in this test type:

choices (mandatory)
prompt (optional, default: nothing)
margin_vertical (optional, default: 0 pixels)
margin_horizontal (optional, default: 8 pixels)
trial_duration (optional, default: indefinite)
response_ends_trial (optional, default: yes)
randomize_order (optional, default: no)
post_trial_gap (optional, none)

95 of 117

Pressing a Button (2)

‘choices’, we have already seen.

Should be a series of html-formatted items, surrounded in [ ] and separated by commas
e.g., choices: ['1', '2','3','4','5’],
These will become the labels of the buttons.

‘prompt’ we have likewise already seen.

An HTML formatted statement that will be shown below the buttons.
e.g., prompt: 'please click on one of the options',
The stimulus is displayed above the buttons, so this is useful if you want to put text in a different place than the stimulus.

96 of 117

Pressing a Button (3)

margin_vertical and margin_horizontal control the space above/below and between the buttons, respectively.

They are specified in terms of pixels.
e.g., margin_vertical: '10px’,
These can help add more space between the buttons and other elements on the page, in case you feel things are too cramped.

In case you are not sure how to use �multiple options, just add them each �on a new line, after the stimulus �subpart of the test part of the block, �as on the right, in no particular order.

Anything not specified will take the�default value

97 of 117

Pressing a Button (4)

trial_duration sets a maximum time for a question

Written as a number, which is the number of milliseconds they have.
e.g., for ten seconds trial_duration: 10000,
Useful if there’s some reason to prevent participants from taking too long

response_ends_trial determines whether the participant answering causes the question to advance.

If if set to false, they must wait until trial_duration ends before it advances.
e.g., response_ends_trial : false,
Useful if you want every question to take the same amount of time.

Needs trial_duration to be set though; otherwise, it will just wait endlessly.

98 of 117

Pressing a button (5)

randomize_order is an option available to all test types

If set to “true”, it means the stimuli in a given block will be presented in a randomized order ; otherwise, they will be presented in the order given in the file.
E.g., to randomize randomize_order: true,
Unless you want everyone to see the same “random” order, no need to randomize by hand.

post_trial_gap, also available to all test types, adds a delay between questions

Specified in miliseconds
E.g, post_trial_gap: 5000, (for 5 seconds delay)
Useful for… something, I’m sure.

99 of 117

Pressing a Key (1)

Modules code:

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

To add to test to declare this type of question:

type: jsPsychHtmlKeyboardResponse,

As in many cases, the relevant options are very similar to the button case!

Actually, they’re identical! The only difference is “choices” is not mandatory

100 of 117

Pressing a key (2)

If ‘choices’ is not included, it defaults to being able to press any key

If it is included, they it specifies the keys that will be accepted in order to continue on

E.g., choices: ['f','j’],�to restrict participant to pressing the f or j keys
Probably want to mention which keys are possible in the prompt!
You can also specify it to be choices: "NO KEYS",�in which case they can’t press anything.�This is general used if you have a max time�(via trial_duration) and want to show something�for that period of time (e.g., fixation cross).

101 of 117

Questionnaires (1)

As stated previously, most question types have the same basic options, stimulus format, etc.

A few do not; one very useful one that’s a bit different is jsPsych’s questionnaire module, which is useful for a number of things.

First of all, in the modules section, you must add not one but two lines

<script src="jspsych/plugin-survey.js"></script>� <link href="jspsych/survey.css" rel="stylesheet"/>
This is because jsPsych needs to import a “stylesheet” to make the questionnaires look prettier.

102 of 117

Questionnaires (2)

The questionnaire stimuli also look quite different.

This is because

(a) in a survey, there are multiple questions per page, making the stimuli more complex, and
(b) as a result of (a), many options are controlled not through the “test” part but through the “stimuli” section

103 of 117

Questionnaires (3)

We won’t get into every option, but note the differences between this and “normal” stimuli:

104 of 117

Questionnaires (4)

First, the set of all the questionnaire questions need to be enclosed in { } with “pages: [” after the { and ] before the }

In between, embedded [ ] denotes a page, and all questions within a given [ ] will show up on the same page.

Commas between each page!

105 of 117

Questionnaires (5)

Individual questions are segmented by { } (also with commas between them)

Each question has at least two lines

One with “type”, saying what type of question it is.
Another with “prompt” giving the HTML-formatted text of the question.

106 of 117

Questionnaires (6)

You can find the various types and their options in the manual, but we can see that there are at least the following:

Types:

html Not a question, � just some HTML � content
text Question answered by typing
multi-choice Question answered � by clicking a button
multi-select Question answered� by checking boxes
drop-down Question answered � by selecting from a � menu

107 of 117

Questionnaires (7)

Options include:

required: true, / required: false,�controls whether a question must be answered to advance; defaults to false.
For multi-choice, multi-select, and dropdown, “options” is specified, much like the “choices” of other test types.
For “text”, some “placeholder” �text can be specified, which will appear faintly in the textbox until the participant types something in.

108 of 117

Questionnaires (8)

There are also options that�can be specified in the “test” �section.

You can probably guess roughly what�they do by looking on the right�(otherwise check 3.4 in the manual)
They mostly customize the labels�of things.

On final thing to note is that the �word ‘stimulus’ must be changed �to ‘pages’, as in

109 of 117

Non-Experiment Questions

We often include things in the experiment that aren’t directly what we are studying, but are necessary for the logistics of running an experiment, e.g.,

Title pages
Directions
Demographic questions
Consent forms
Boxes to leave comments at the end

Thankfully, these generally do not require anything different from what the ordinary experiment questions require!

110 of 117

Directions/Title Pages

We already saw how to use�keyboard response questions to give �one-page directions/titles, as on the �right.

There is also a special test type for �multi-pages directions, discussed in �Section 3.2 of the manual.

You could just use a series of one-page �blocks/ a block with multiple stimuli.
This would not allow scrolling back and �forth between pages, however.

111 of 117

Demographics/�Comments

We have already covered �questionnaires in previous slides, �specifically giving the example of �a demographic questionnaire.

Comment boxes can be done a �similar way, just having one page �with one text box; see right.

Note the texbox_rows, and�textbox_columns options

These allow us to make the �response box bigger!

112 of 117

Consent

Likewise, a consent form�can just be a button-press�question with one button�“I consent”.

Note that nothing is saved�until the end, so the �statement that the participant�can leave at any time before�then and not have their data�recorded is true.�

113 of 117

Activity (Part 2, repeated)

Once you have familiarized yourself a bit with SNUjsPsych, see if you can do the following:
Have a look at universal.html, both by looking at the code and by running it; try to figure out what the different components
Make your own experiment file (presumably by “saving as” on the template, and either copy and paste (or, if you prefer, type from scratch, following the examples given in those files and/or the manual), at least one of each of the following:

A page of directions
A consent form
A demographic questionnaire
Some sort of main experiment (you can use one we’ve already seen, or search in the manual/other demo files for how to make a different one!)
An ending comment box

113

114 of 117

Concluding Comments

114

115 of 117

Next Steps

You are welcome to learn more on your own via the manual, but I recommend you talk to me a bit first.

Send me an email (DHPlesniak@gmail.com) with information about what kind of experiment you want to perform, and I can give you more specific information on how to proceed.

Even if you do try on your own first, feel free to contact me any time you have difficulties or questions.

Many common issues have easy solutions that may take you hours to figure out, but just a couple minutes for me to explain.
In particular, text written in Hangul is known to cause various issues (all easily solvable); if you ever see random symbols instead of Korean, this is an encoding issue we can fix.

115

116 of 117

General comments

Always check your experiment thoroughly and repeatedly, each time you make a change and/or upload it to a different platform (e.g., the server).

You do not want to waste participants on incorrectly displaying experiments or experiments that do not save data!

Most problems are caused by simple things like typos.

If you are ever wondering something like “can I do X?”, the answer is usually “yes”. The real question is “how?”

Again, if you cannot figure out “how” quickly, you should feel free to ask!

116