Skip to content
This repository has been archived by the owner on Aug 6, 2020. It is now read-only.

openexp/jspsych-react

Repository files navigation

ARCHIVE WARNING

This project was created to coordinate two things:

  1. use a forked tagged version of jspsych that was packaged (prior to official supported version)

  2. wrap jspsych in a React component as a window to be used with other projects

jspsych-react was used in BrainWaves until v0.9.0 where that project began using lab.js for its experiment presentation layer.

Getting Started

npm install jspsych-react

You can use the ExperimentWindow component to include a jsPsych experiment in your React project. For example:

import React, { Component } from 'react'
import { ExperimentWindow } from "jspsych-react";
import { visualOddball } from "./your_experiments/experiment_timeline";
import { callbackHTMLDisplay, callbackImageDisplay } from "./custom_plugins/plugins";

export default class ExperimentWindow extends Component {
  render() {
    return (
      <div>
        <ExperimentWindow
          settings={{ timeline: visualOddball }}
          plugins={{
            "callback-html-display": callbackHTMLDisplay,
            "callback-image-display": callbackImageDisplay
          }}
        />
      </div>
    );
  }
}

You can also import the jsPsych object to access other jsPsych functionalities, such as updating the progress bar during a jsPsych experiment. For example:

import { jspsych } from "jspsych-react";

export const updateProgress = () =>
  jsPsych.setProgressBar(
    jsPsych.progress().current_trial_global / jspsychObject.sample.size
  );

API

Props

Experiment

Name Type Default Description
settings object required The settings object is passed to the jsPsych.init() function and defines many aspects of an experiment. It can contain many parameters, but the only required parameter is a timeline. See the the jsPsych API documentation.
plugins object null Custom plugins to be passed to jsPsych for use in the experiment. Object keys should match the names of the plugins referenced in the timeline.

License

MIT © Teon L Brooks