Psychology Experiments on Rahat Zaman

JsPsych Experiment with Vite and TypeScript

rahatzamancse@gmail.com (Rahat Zaman) — Wed, 23 Oct 2024 10:21:45 -0600

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!

]]>

Introduction to Vite Typescript

rahatzamancse@gmail.com (Rahat Zaman) — Wed, 23 Oct 2024 09:58:43 -0600

This guide will walk you through setting up a project using Vite and TypeScript from scratch. Don’t worry if you’re unfamiliar with programming or technical terms. We’ll explain everything in simple terms.

What Is Vite?

Before diving into the steps, let’s first understand what Vite is and why it’s useful.

Vite (pronounced like “veet”) is a tool that helps you develop websites. When building a website, you usually need to set up many things—like how to handle multiple files and make your website load quickly. Vite takes care of all that for you, so you can focus on writing your website’s code.
It makes development faster, especially when your project gets larger.
Instead of loading everything at once (which can make your website slow), Vite loads only what’s needed when you start developing.

Why use Vite? Let’s look at an example:

Imagine you’re building a website using plain HTML and JavaScript (the language used to make websites interactive). As your website grows, it gets slower because you have to load all the files at once. Vite helps avoid this by loading just the files you’re working on, making it much faster to work with.

Why is Vite Better than Plain HTML and JavaScript?

Faster development: Vite refreshes only the part of the page you’re working on, while with plain HTML/JavaScript, you’d have to reload the entire page.
Organized code: You can split your code into smaller parts, which Vite helps combine neatly.
Support for modern technologies: It makes it easier to use new web development features like TypeScript.

What is TypeScript?

Now, let’s talk about TypeScript:

TypeScript is a programming language that builds on JavaScript. It adds extra features, such as “types,” which help you avoid common mistakes when writing code.
It helps make your code more predictable, reducing the chances of bugs.

You don’t need to fully understand TypeScript yet to follow this guide, but think of it as a “safer” version of JavaScript that helps you write cleaner, less error-prone code.

Why Use TypeScript?

Catch errors early: TypeScript checks your code for potential problems before it runs, so you can fix them before they break your website.
Better collaboration: If you’re working with other developers, TypeScript makes it easier for everyone to understand how the code works.

Now that we know why Vite and TypeScript are useful, let’s get started with setting them up.

Step 1: Setting Up Your Development Environment

Before we can use Vite and TypeScript, you’ll need to install a few basic tools:

1.1 Install Node.js

Node.js is a tool that lets you run JavaScript (and TypeScript) outside of a web browser. Vite uses Node.js to manage your website’s files during development.
Download Node.js from its official website.
- Choose the LTS version (it stands for Long Term Support, meaning it is more stable).
- Once downloaded, install it by following the on-screen instructions.

1.2 Install a Code Editor

You’ll need a place to write your code. The most popular tool for this is Visual Studio Code (VS Code):

Download Visual Studio Code from its official site and install it.
This editor comes with useful features like error checking and highlighting code, which makes it beginner-friendly.

Step 2: Starting a Vite + TypeScript Project

With Node.js installed, you can create your Vite + TypeScript project.

2.1 Open Your Terminal

On your computer, open the Terminal or Command Prompt. If you’re using Windows, search for “Command Prompt” in the Start menu.

2.2 Create a New Vite Project

Now, let’s create your first Vite project:

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

npm create vite@latest
- This command tells Node.js to create a new project using Vite.
You’ll be asked a few questions:
- Project name: Enter a name for your project (e.g., my-vite-project).
- Framework: Choose vanilla (this means basic JavaScript).
- Variant: Choose TypeScript (this sets up TypeScript automatically for you).
Once you’ve answered the questions, the terminal will set up your project. Next, move into the project folder by typing:
1

cd my-vite-project

2.3 Install Dependencies

Next, you’ll need to install some files that Vite needs to run your project. These are called dependencies.

Run this command in your terminal:
1

npm install

This will download all the necessary files.

Step 3: Running Your Project

You’re now ready to start your Vite project and see it in action!

In the terminal, type the following command:
1

npm run dev
Vite will start a local server, and it will tell you an address to visit in your web browser, something like:
```
Local: http://localhost:3000/
```
- Open your browser and go to this address. You should see a page that says Vite + TypeScript. Congratulations! You now have a basic Vite project running with TypeScript.

Step 4: Understanding Your Project’s Structure

Let’s break down what Vite has created for you:

index.html: This is the main page of your website. It tells the browser what content to display.
main.ts: This is the main TypeScript file. It is where you will write your code to make the page interactive.
style.css: This file contains the styles for your website. It controls how things look, such as colors and layouts.

You don’t need to worry too much about these files yet. Over time, as you add more features, you’ll add more files.

Step 5: Making Changes to Your Project

Now, let’s modify your project to see how easy it is to work with Vite and TypeScript.

5.1 Changing Text on the Page

Open index.html in your code editor.
Find the line that says:
1

<h1>Vite + TypeScript</h1>
Change it to:
1

<h1>Hello, World!</h1>
Save the file.

When you go back to your browser (the one you opened in Step 3), you’ll see the text has changed without refreshing the page! This is one of Vite’s cool features—it automatically updates the page when you save changes.

5.2 Adding Some Interactivity

Open main.ts in your editor.

Add the following code at the end of the file:

1
2
3
4
5
6
7


const button = document.createElement('button');
button.textContent = 'Click Me';
document.body.appendChild(button);

button.addEventListener('click', () => {
 alert('You clicked the button!');
});

Save the file.

When you look at your browser again, you’ll see a button has appeared. If you click it, an alert will pop up! This is an example of how you can make your page interactive using TypeScript.

Conclusion

You’ve now set up a project using Vite and TypeScript, made some changes, and added a button to your webpage. By using Vite, you can develop websites quickly, and with TypeScript, you can write code that’s safer and easier to manage.

Recap:

Vite helps you develop faster by loading only what you need and refreshing changes automatically.
TypeScript helps catch potential errors before they happen, making your code more reliable.

You can now continue building your project by exploring more TypeScript features or adding more pages to your website.

Happy coding!

]]>