Using Experiment Templates
To install an experiment template, type in the following command, then select the desired template when prompted. Typically, you will want to select the most recent version. You also have the option to install templates that are not part of the official Pushkin distribution by using the "path" or "url" options.
pushkin install experiment
Over time, new site and experiment templates are likely to be added. If you want access to more recently released templates, update your CLI:
yarn global upgrade pushkin-cli
- Basic template - follow link to see a tutorial for adding an existing jsPsych experiment to a basic Pushkin template.
Most Pushkin experiment templates will include the following files for editing the settings and content of your experiment. The basic experiment template is the exception, since it is a fairly bare bones template for customization.
This file contains some settings you can customize for the experiment. Currently, the default settings in every experiment template are:
- fontColor: Set the color for the experiment's font. This can be a web color name, a hex color code, or rgb setting. The default setting is "black."
- fontSize: Set the font size.
- fontFamily: Set the font family. This accepts any font family universally available to web browsers.
Stimuli are added using the stim.js file, which contains an array to hold your stimulus information. More details on editing the stimuli for each specific experiment template are in their respective documentation pages.
Add text to this file that you want on your consent page.
Add text to this file for debrief information at the end of the experiment.
The current experiment templates use only a few of jsPsych's official included plugins. Of course, for many experiments, you may want to use additional jsPsych plugins. After installing an experiment template, import the additional plugins at the top of your
experiment.js file in the same way as the plugins already included in the template. For example, if your experiment also uses the survey-text and html-button-response plugins, you would add:import jsPsychSurveyText from "@jspsych/plugin-survey-text";
import jsPsychHtmlButtonResponse from "@jspsych/plugin-html-button-response";
You'll also need to add the additional plugins as dependencies for your experiment. To do this, navigate to the
web page directory of the experiment using cd and run yarn add for each particular plugin: cd 'experiments/[experiment_name]/web page'
yarn add @jspsych/plugin-survey-text
yarn add @jspsych/plugin-html-button-response
Be sure to navigate back to the root directory of your site before running
pushkin prep etc.: cd ../../..
This same procedure will work with community-developed plugins available through npm via the jspsych-contrib repository. Just replace "@jspsych" with "@jspsych-contrib". The self-paced reading template uses a plugin from jspsych-contrib.
The procedure above only works for jsPsych plugins available through npm. If your experiment makes use of a custom plugin, follow the steps below:
- 1.Add the plugin file to the
web page/srcfolder of the experiment - 2.Add the plugin towards the top of your experiment.js file like
import jsPsychMovingWindow from './jspsych-moving-window';
The current experiment templates do not use any image or video stimuli. To use static assets, put them in the experiment assets folder (web page/src/assets). Running
pushkin prep will place them in an accessible public folder. This folder can be referred to using the environment variable process.env.PUBLIC_URL.For example:
var test_stimuli = [
{ stimulus: process.env.PUBLIC_URL + "/blue.png" },
{ stimulus: process.env.PUBLIC_URL + "/orange.png" },
];
No special imports are required.
Note that this works for local development. Depending on how you deploy to the web, this environment variable may not be available.
Last modified 1mo ago