1 of 93

Introduction to Online Experimental Methods

Daniel Plesniak (DHPlesniak@gmail.com)

2026/03/27

2 of 93

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 93

Introduction

4 of 93

Purpose

This lecture is designed to introduce you to some of the fundamental concepts and tools relevant to online experiments, taking SNUjsPsych, a particular such tool, as the primary example.

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 93

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 93

Background to Online Expeirments

7 of 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

Setting up SNUjsPysch

23 of 93

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 93

“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 93

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 93

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 93

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 93

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 93

Saving Locally

30 of 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

Putting Experiments to Online

42 of 93

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 93

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 93

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 93

Let’s get everything working!

46 of 93

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 93

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 93

Walkthrough of template.html

50 of 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

Walkthrough of sample.html

65 of 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

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 93

HTML

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

e.g., , 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 93

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 93

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 93

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 93

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 93

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 93

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 93

Save Message

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

Not very complicated, but you might wonder what all the 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 to start a new paragraph and to end it.

86 of 93

Activity

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!

88 of 93

Before we move on

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 93

A more advanced example

I would like to show you something I am currently working on.

Please go to snuling.com/SNUjsPsych/MyExperiment.html

You can take the experiment first (it’s quite quick). Then, try to view or download the html code behind it, and we’ll walk through that.

This is not on the slides, since it is “work in progress”

90 of 93

Concluding Comments

91 of 93

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.

92 of 93

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!