jspsych logo

Introduction to jspsych

Shreshth Saxena

Differences in offline vs. online experiment building

Traditional in-lab experiments:
  • Same hardware-software configuration for all participants
  • Local data storage and transmission
  • Extensive choice of programming languages
Online experiments:
  • Diverse configurations of hardware-software
  • Central data storage through a server
  • Use of web development technologies

So why bother with online experiments?

So why bother with online experiments?


  • Ecological and external validity
    • Participation from diverse home environments
  • Accessiblity
    • Reach rare or specific sub-populations
  • Efficiency
    • Saves time and money for data collection
  • Reproducibility
    • Open web development
but also...

  • High statistical power and better generalizability of findings
  • Reduction of experimenter effects
  • Detectability of motivational confounding
  • Experimenting around the clock
  • Avoidance of organizational problems
  • Accessiblity to research

Web Technologies

Web Technologies


  • HTML - Content
    • Structuring web documents and apps
  • CSS - Appearance
    • Styling web documents and apps
  • JavaScript - Interactivity
    • Web's native programming language

Quick demo

open https://codepen.io/pen/ in your browsers to follow
QR2

Recommended tutorial

https://developer.mozilla.org/en-US/docs/Web/Tutorials
QR1

Tools for online experiments

Tools for online experiments

QR1

Let's Code

Classic HTML tree


							<html>
							  <head>
							    <title>...</title>
							  </head>
							  <body>
							  	<script>
							  	...
							  	</script>
							  </body>
							</html>

Give it a title


							<html>
							  <head>
							    <title>Hello world</title>
							  </head>
							  <body>
							  	<script>
							  	...
							  	</script>
							  </body>
							</html>

import jsPsych


							<html>
							  <head>
							    <title>Hello world</title>
							    <script src="https://unpkg.com/jspsych@8.2.0"></script>
							    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.1.0"></script>
							  </head>
							  <body>
							  	<script>
							  	...
							  	</script>
							  </body>
							</html>

Easy stylesheet import


							<html>
							  <head>
							    <title>Hello world</title>
							    <script src="https://unpkg.com/jspsych@8.2.0"></script>
							    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.1.0"></script>
							    <link href="https://unpkg.com/jspsych@8.2.0/css/jspsych.css" rel="stylesheet" type="text/css" />
							  </head>
							  <body>
							  	<script>
							  	...
							  	</script>
							  </body>
							</html>

Init jsPsych


							<html>
							  <head>
							    <title>Hello world</title>
							    <script src="https://unpkg.com/jspsych@8.2.0"></script>
							    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.1.0"></script>
							    <link href="https://unpkg.com/jspsych@8.2.0/css/jspsych.css" rel="stylesheet" type="text/css" />
							  </head>
							  <body>
							  	<script>
							  		const jsPsych = initJsPsych();
							  	</script>
							  </body>
							</html>

Display stored data


							<html>
							  <head>
							    <title>Hello world</title>
							    <script src="https://unpkg.com/jspsych@8.2.0"></script>
							    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.1.0"></script>
							    <link href="https://unpkg.com/jspsych@8.2.0/css/jspsych.css" rel="stylesheet" type="text/css" />
							  </head>
							  <body>
							  	<script>
							  		const jsPsych = initJsPsych({
							  			on_finish: function() {
									        jsPsych.data.displayData('json');
									    }
							  		});
							  	</script>
							  </body>
							</html>

Create a trial


							
							<html>
							  <head>
							    <title>Hello world</title>
							    <script src="https://unpkg.com/jspsych@8.2.0"></script>
							    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.1.0"></script>
							    <link href="https://unpkg.com/jspsych@8.2.0/css/jspsych.css" rel="stylesheet" type="text/css" />
							  </head>
							  <body>
							  	<script>
							  		const jsPsych = initJsPsych({
							  			on_finish: function() {
									        jsPsych.data.displayData('json');
									    }
							  		});
									
										const hello_trial = {
											type: jsPsychHtmlKeyboardResponse,
											stimulus: 'Hello world!'
										}
							  	</script>
							  </body>
							</html>

Run the experiment


							<html>
							  <head>
							    <title>Hello world</title>
							    <script src="https://unpkg.com/jspsych@8.2.0"></script>
							    <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@2.1.0"></script>
							    <link href="https://unpkg.com/jspsych@8.2.0/css/jspsych.css" rel="stylesheet" type="text/css" />
							  </head>
							  <body>
							  	<script>
							  		const jsPsych = initJsPsych({
							  			on_finish: function() {
									        jsPsych.data.displayData('json');
									    }
							  		});

										const hello_trial = {
											type: jsPsychHtmlKeyboardResponse,
											stimulus: 'Hello world!'
										}

								   	jsPsych.run([hello_trial]);
							  	</script>
							  </body>
							</html>
Save the file with an ".html" extension and open in browser
but what if we want to allow only spacebar for response?
Docs are your best friend!
jspsych.org

Thank you

saxens17@mcmaster.ca