A JavaScript library for creating and running behavioral experiments in a web browser
Clone or download

README.md

logo

jsPsych is a JavaScript library for creating behavioral experiments that run in a web browser. jsPsych provides a framework for defining experiments using a set of flexible plugins that create different kinds of tasks a subject could complete during an experiment. By assembling these different plugins together it is possible to create many different types of experiments.

Examples

These examples are intended to illustrate what jsPsych code and experiments look like. There is a larger set of example code in the examples folder.

#1: Displaying instructions (code)












var trial = {       
    type: 'instructions',     
    pages: [      
      'Welcome to the experiment. Click next to begin.',

      '<p>In this experiment, you will view a ' +       
      'series of images and answer questions.</p>' +      
      '<p>Answer with the keys "y" or "n".</p>',

      '<p>Here is an example:</p>' +        
      '<img src="img/age/of2.jpg"></img>' +       
      '<p>Is this person OLD or YOUNG?</p>'      
    ],        
    show_clickable_nav: true      
}       

jsPsych.init({      
    timeline: [trial],        
});










#2: Displaying images and recording a response (code)






var trial_1 = {
  type: "image-keyboard-response",
  stimulus: 'img/happy_face_1.jpg',
  choices: ['y', 'n'],
  prompt: '<p>Is this face happy? Y or N.</p>'
}

var trial_2 = {
  type: 'image-keyboard-response',
  stimulus: 'img/sad_face_2.jpg',
  choices: ['y', 'n'],
  prompt: '<p>Is this face happy? Y or N.</p>'
}

var trial_3 = {
  type: 'image-keyboard-response',
  stimulus: 'img/happy_face_2.jpg',
  choices: ['y', 'n'],
  prompt: '<p>Is this face happy? Y or N.</p>'
}


jsPsych.init({
  timeline: [trial_1, trial_2, trial_3],
  default_iti: 250
});






#3: A flanker task showing a few advanced features of the library (code)

var test_stimuli = [
  { stimulus: "<<<<<", data: {stim_type: 'congruent'} },
  { stimulus: ">>>>>", data: {stim_type: 'congruent'} },
  { stimulus: "<<><<", data: {stim_type: 'incongruent'} },
  { stimulus: ">><>>", data: {stim_type: 'incongruent'} }
];

var test = {
  timeline: [{
     type: 'html-keyboard-response',
     choices: [37, 39],
     stimulus: jsPsych.timelineVariable('stimulus'),
     data: jsPsych.timelineVariable('data'),
     post_trial_gap: 1500,
     response_ends_trial: true
  }],
  timeline_variables: test_stimuli,
  sample: {type: 'fixed-repetitions', size: 2}
};

var debrief = {
  type: "html-keyboard-response",
  stimulus: function() {
    var congruent_rt = Math.round(jsPsych.data.get()
        .filter({stim_type: 'congruent'}).select('rt').mean());
    var incongruent_rt = Math.round(jsPsych.data.get()
        .filter({stim_type: 'incongruent'}).select('rt').mean());
    return "<p style='font-size:25px'>Your average response"+
    "time for congruent trials was <strong>"+congruent_rt+
    "ms</strong>.</p>"+
    "<p style='font-size:25px'>Your average response time for"+
    "incongruent trials was <strong>"+incongruent_rt+
    "ms</strong>.</p>";
  }
};

jsPsych.init({
   timeline: [test, debrief],
});

Documentation

Documentation is available at docs.jspsych.org.

Need help?

For questions about using the library, please post to the jsPsych e-mail list. This creates a public archive of questions and solutions.

Contributing

Contributions to the code are welcome. Please use the Issue tracker system to report bugs or discuss suggestions for new features and improvements. If you would like to contribute code, submit a Pull request.

Citation

If you use this library in academic work, please cite the paper that describes jsPsych:

de Leeuw, J.R. (2015). jsPsych: A JavaScript library for creating behavioral experiments in a Web browser. Behavior Research Methods, 47(1), 1-12. doi:10.3758/s13428-014-0458-y

Response times

Wondering if jsPsych can be used for research that depends on accurate response time measurement? For most purposes, the answer is yes. Response time measurements in jsPsych (and JavaScript in general) are comparable to those taken in standard lab software like Psychophysics Toolbox and E-Prime. Response times measured in JavaScript tend to be a little bit longer (10-40ms), but have similar variance. See the following references for extensive work on this topic.

Credits

jsPsych was created by Josh de Leeuw (@jodeleeuw).

There have been many contributors to the library. Thank you!