SNUjsPsych Day 3:�Common Experimental Tools

Daniel Plesniak (plesniak@usc.edu)

2023/07/19

Plan for Today

• Part 1: Experimental Components ~1:00-~1:50
• Review of last time
• Overview of test types
• Directions, consent, etc.

​

• Break ~1:50-~2:00

​

• Part 2: Building an Experiment ~2:00-~3:00
• Filling in basic info
• Selecting components
• Stimuli/customization

​

Part 1: Experimental Components

Review

Template

• Experiments in SNUjsPsych are built using a template.

​

• The template has several customizable sections:
• Page name
• Modules
• Preloading media (not discussed yet)
• Blocks, which are themselves subdivided into
• Stimuli
• Test
• Procedure
• Save/Completion message

​

Modules

• Whenever you want to use a particular question type, you have to make sure that the relevant modules are loaded.
• The manual will give you appropriate code to copy and paste

​

​

​

• You only need to load the modules once per file, no matter how many times the question type is used.

Blocks: Stimuli

• As many as you want,�enclosed in one main [ ],�with each one enclosed in�{ } and with a comma and�line break between them.

​

• Each one consists of a tag (e.g., “stimulus”) and some HTML-formatted content (e.g., ‘John bakes pie’)

​

• As for the other subparts, make sure to customize the name (found after “var”) so that it is unique.

Blocks: Test (1)

• Specify test type to �determine what kind of�experiment/question/�directions
• Codes for each type�provided in manual,

​

• Specific options, e.g., button choices, prompt content
• Each option has an option name (e.g., “choices”), followed by a :, and then the chosen content, and finally a comma and a line break.

​

Blocks: Test (2)

• Stimulus: after “var stim”

​

• Refer to the stimuli by�their tag name inside of�“jsPsych.timeVariable(‘___’)

​

• Add any other html content with plus symbols.
• The stimulus will change for each one of stimuli, everything else will be constant.

One New thing!

• There’s a difference�between the straight�quotation line, as in���and the diagonal one, as in�

​

​

• The latter type can go across multiple lines.
• Very useful, but a bit hard to type; perhaps easiest to just copy and paste.
• On some keyboards, it’s to the left of the 1 key.

Procedure

• Combine everything�together, using the right�names

​

• This tells jsPsych to add the experiment to the “timeline”

​

• Doesn’t do much else now, but we’ll learn a bit more about it tomorrow.

Blocks

• You can have as many as you want.

​

• They will show up in the experiment in the same order as in the .html file.

​

• Make sure to change the names/labels between each.

Local Server (1)

• We also went over how to run experiments on a local server.

​

• This is the preferred way of testing jsPsych experiments, as it simulates the online environments.
• Some features will not work if not run on a server.

​

• To check if your local server is running, type “localhost” into your browser’s URL bar.
• If it does not load a page, try running the XAMPP Control Panel/Manager-OSX and starting up the “Apache Server”.

Local Server (2)

• To run a file on a local server, either navigate to the containing folder and click on it or type in the file’s “URL” directly

​

• Either way, you will have to type “localhost/____” into the URL bar, as in “localhost/SNUjsPsych/” on the right.

Update on Eye-Tracking (1)

• Last class, we noticed that the eye tracking demo in “specific.html” was not working for some people.

​

• Weirdly, it seems that this is a browser specific issue that has recently developed.
• Firefox and Safari seem to have stopped working
• Chromium-based browsers, like Chrome (which a majority of people use), and Edge (default for Windows) still seem to work.

​

• jsPsych uses a version of WebGazer, and WebGazer still seems to work across browsers, so this is (apparently) a jsPsych-specific issue.

Update on Eye Tracking (2)

• Since this problem is recent, it’s possible it will just go away.

​

• In the meantime, I will try to fix it.
• Let me know if you want to do eye tracking experiments over the internet.
• I will try to fix it faster if so.

​

• Until it is fixed, you can use the browser check function described in Section 6.5.2 of the manual to limit the browsers participants can use.
• Make sure to do you own testing close to the time of deployment so that your list is accurate.

Comments

• So, what if you now want to try the eye-tracking demo on a different browser, but you don’t want to go through all of the rest of the demos in specific.html first?
• I.e., everything before “webgazer initialization

​

• Just comment out everything in the block section unrelated to eye-tracking!
• Select lines, control/command and�the “/” key toggles comment on�and off.

Overview of Test Types

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)

​

​

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.

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)

​

​

​

Pressing a Button (2)

• ‘choices’, we have already seen yesterday.
• 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.

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

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.

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.

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

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).

​

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.

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

Questionnaires (3)

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

​

​

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!

​

​

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.

​

​

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

​

​

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.

​

​

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

Non-Experiment Questions

Logistical Components

• 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!

Directions/Title Pages

• We already saw yesterday 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.

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!

​

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.�

Wrapping Up Part 1

• Hopefully you can see that SNUjsPsych allows you to “recycle” many things over and over again.

​

• Most test types have near identical options/formats.
• Those that don’t are not too different.

​

• Things like directions, consent forms, comment boxes etc. can just be adapted from regular question types.

Break Time!

Part 2: Building an Experiment

Overview

• Now, let’s try to put all that we’ve gone over so far into practice and make a small experiment.

​

• Most of this can simply be done by copy-and-pasting from template.html, sample.html, and universal.html.

​

• Make sure you do this in your own experiment folder (which should be in htdocs) and run it via the local server, if possible.

Initial steps

• Make a file that is a copy of template.html but with a different name (either via copy-and-paste or using “save as” on template.html)
• For right now, the name is not too important, as long as it ends in .html

​

• Fill in the Title and the Save Message (in their respective sections)

​

• Remember to use an HTML formatter (e.g., https://wordtohtml.net/) if you need one!

Assembling the Main Components

• Now, from sample.html and universal.html 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 (I recommend a button experiment if you don’t have a preference)
• An ending comment box

​

• In all cases, make sure to add the relevant lines to your Modules section!

Customizing

• Once everything is in place, try to customize the stimuli and options to make a new experiment.
• Try to do this as close to what an actual experiment of yours might look like as you can right now.

​

• Things will probably go wrong!
• If you try to run the experiment and you hit a blank screen (or just something that looks wrong), make sure to check that everything is named correctly, commas are all in the write places, no typos/wrong words for options used, etc.

​

• Use command/control and “/” to toggle selected lines to be “commented out” or not
• Commented out lines will be ignored by JavaScript; very useful for testing!
• E.g, if you don’t want to check run fourth block in an experiment without going through the first three, just temporarily comment out the first three.

For HW

• Continue to play around with building an experiment (if you did not complete everything you wanted to in class)

​

• Feel free to send me your code (just the .html file, no need to send the whole folder) and/or any questions/comments on things you are struggling with or want to know how to do.

​

• If you feel up to it, try to skim through Section 3 of the manual to cover some of today’s topics in more depth.