Skip to content
Yara Studer edited this page Apr 29, 2026 · 3 revisions

Here is a quick rundown of what each file in this template does:

init.js

This file handles jsPsych initialization and data saving.

It creates a random session ID to associate with the save file.

After the last trial ends or the study is aborted, it will show a completion or failure message depending on the state of the complete variable. The user will be redirected back to Prolific with a completion or custom failure code (which can be customized in config.js). If DEBUG_SAVE is set to true in config.js, then the data will be saved to your computer and it will not redirect. Otherwise, it will be saved to the server using the write_data.php script (which will not work if not running on a web server).

main.js

This file handles trials and timelines.

It declares five trials. The first is screenerTrial, which uses the jsPsychSurvey plugin. It asks two simple screener questions and aborts the study if either question is failed.

The sceond is sampleTrial, which uses the jsPsychHtmlButtonResponse plugin. It displays a message and multiple buttons to click.

The third is sampleSurveyTrial, which uses the jsPsychSurvey plugin. It reads its content from content.js, which you can read about in the next section.

The fourth is demographicsTrial, which uses the jsPsychSurvey plugin. It asks 3 demographic questions

A sample debug print is included in this template. It will print a message to the browser console, but only if DEBUG_LOGS is true in config.js. You can view the browser console on Chrome or Safari by right clicking anywhere on the page and clicking "Inspect" or "Inspect Element", then click on the console tab. You can also use Ctrl+Shift+I (Windows) / Command+Option+I (Mac).

The timeline is created at the end of the file. Trials are added to the timeline in the order that they will appear, then the timeline is run. You must add any new trials you declare to the timeline in order for them to appear in the study. When testing parts of your study, you may find it useful to comment out some trials to skip past them.

content.js

This file stores content for SurveyJS trials.

config.js

This file stores configuration options.

COMPLETION_LINK is the link participants will see upon completing the study. If you are using Prolific, it should contain the completion code for the study.

DEBUG_LOGS can be set to true or false. You should check if this is true before printing messages to the console to ensure participants can't see them (they are unlikely to check the browser console, but they could, so it's better to hide these prints). Ensure this is false before sending the study to actual participants.

DEBUG_SAVE can be set to true or false. If true, data will be saved locally to your computer at the end of the study, which is useful for testing without a server. Ensure this is false before sending the study to actual participants.

You are encouraged to add your own config options! Any value that you want to be easy to change should be declared here. To use that variable in another file, simply do config.variableName. Make sure the file imports config with import { config } from './config.js'; first.

index.html

This file imports your scripts and CSS styles.

When you run your study, this is the file the browser starts with. To use any jsPsych plugin, you must first import it here so the browser knows it exists. If you add a new CSS file, you must also import it here.

write_data.php

This file recieves requests to save data.

When a paritipant completes the study, init.js sends out a request to save the data to the server. This file recieves that request and saves the file a folder called data folder. You can change which folder it saves to by changing $dir = "../data";. This script will run automatically on a properly configured web server, so you should never have to run it manually.

Clone this wiki locally