JsPsych Experiment with Vite and TypeScript

In this guide, we’ll walk you through setting up a simple psychology experiment using JsPsych within a Vite and TypeScript project. We’ll assume you have little to no prior experience with JsPsych, Vite, or TypeScript. This step-by-step guide will explain the basics and get you up and running quickly.

What is JsPsych?

JsPsych is a library for creating behavioral experiments that run in a web browser. It is often used in psychology and cognitive science research to create experiments that participants can complete online.

Why Use Vite and TypeScript with JsPsych?

Vite helps you develop web applications quickly, refreshing the page whenever you make changes, which speeds up development.
TypeScript ensures that your code is easier to read and less prone to errors by adding extra checks.
JsPsych provides the structure and tools needed to create an experiment, such as displaying stimuli and recording participant responses.

Now, let’s set up everything step by step.

Step 1: Set Up a Vite + TypeScript Project

If you haven’t already set up a Vite + TypeScript project, follow these instructions:

1.1 Open Your Terminal

Start by opening your Terminal (or Command Prompt on Windows).

1.2 Create a New Vite Project

In the terminal, type the following command and press Enter:

1
npm create vite@latest

Answer the questions:

Project name: Enter a name (e.g., jspsych-experiment).
Framework: Choose vanilla (basic JavaScript).
Variant: Choose TypeScript.

Once the project is created, move into your new project folder:

1
cd jspsych-experiment

1.3 Install Dependencies

Run the following command to install all the required files:

1
npm install

To know more about what these steps are doing, check out the Introduction to Vite + Typescript tutorial.

Now, you’ve set up your Vite + TypeScript project!

Step 2: Install JsPsych

JsPsych is not included by default in your Vite project, so you need to install it manually.

In the terminal, run the following command to add JsPsych to your project:

1
2
npm install jspsych # to install the core library
npm install @jspsych/plugin-button-response # to install the button-response plugin

This will download JsPsych and add it to your project’s dependencies.

Step 3: Modify Your Project Files

Next, we’ll edit the project files to display a simple JsPsych experiment.

3.1 Set Up Your HTML File

First, let’s modify the index.html file, which is the main web page for your experiment.

Open index.html in your code editor (like VS Code).

Modify it to include a placeholder where the JsPsych experiment will be displayed:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JsPsych Experiment</title>
</head>
<body>
  <h1>Welcome to My JsPsych Experiment</h1>
  <div id="jspsych-experiment"></div>

  <script type="module" src="/src/main.ts"></script>
</body>
</html>

3.2 Create a Simple JsPsych Experiment

Now, let’s write the code for a basic JsPsych experiment in main.ts. This code will create a simple trial where the participant sees a message and responds by pressing a key.

Open src/main.ts in your editor.

Add the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { initJsPsych } from 'jspsych';
import jsPsychButtonResponse from '@jspsych/plugin-button-response';

const jsPsych: JsPsych = jsPsychInit();

// Create a simple timeline with one trial
const timeline: any[] = [];

const trial = {
  type: jsPsychButtonResponse,
  stimulus: '<p>Press any key to begin the experiment.</p>',
};

timeline.push(trial);

// Initialize the JsPsych experiment
jsPsych.run(timeline);

Breakdown of the Code:

import { initJsPsych } from 'jspsych';: This imports the JsPsych library into your project.
const jsPsych: JsPsych = initJsPsych();: This initializes JsPsych and assigns it to the jsPsych variable.
const timeline: any[] = [];: A timeline in JsPsych is a list of trials that define your experiment. We create an empty timeline and add our trials to it.
const trial = {...}: This is a basic trial that presents a message and waits for the participant to press any key.
jsPsych.run(timeline);: This starts the experiment using the timeline we created.

Step 4: Run the Experiment

With everything set up, you’re ready to run the experiment and see it in action!

Open the terminal (if it’s not already open).
Run the development server with this command:
1
npm run dev

Vite will start a local development server and give you an address like http://localhost:3000/. Open this address in your web browser.

You should see your experiment with the message “Press any key to begin the experiment.” When you press a key, the trial will complete.

Conclusion

You have successfully set up a simple JsPsych experiment using Vite and TypeScript! Here’s what we did in this tutorial:

Created a Vite + TypeScript project.
Installed JsPsych to run psychology experiments.
Wrote a simple experiment where a participant presses a key.
Ran the experiment in a browser.

Recap:

Vite makes your development faster by reloading changes automatically.
TypeScript helps catch mistakes in your code early.
JsPsych allows you to easily create browser-based behavioral experiments.

Now you can continue to build more complex experiments by adding more trials and customizing how participants interact with the experiment. Happy experimenting!