@loveleijonklo/react-neuropsych-stroop v0.1.2

ORCATECH Stroop Test

A Stroop Effect Test implemented as a React component.

Install

The ORCATECH Stroop test is available as an NPM package.

npm install @orcatech/react-neuropsych-stroop

Demo

After installing, open the Stroop Test Demo

Usage

Here's a quick example to get you started:

import React from 'react';
import ReactDOM from 'react-dom';
import Stroop from '@orcatech/react-neuropsych-stroop';

const words = ['green', 'red', 'blue', 'orange'];
const colors = ['009900', '990000', '000099', 'EE7600']
const combos = [
	{ word: 0, color: 0 },
	{ word: 1, color: 1 },
	{ word: 2, color: 2 },
	{ word: 3, color: 3 },
	{ word: 0, color: 1 },
	{ word: 2, color: 3 },
	{ word: 3, color: 2 },
	{ word: 1, color: 0 },
];

class App extends React.Component {
  onComplete = (data) => {
    // handle test completion
    const { errors, successes, begin, finish, timeLimitReached } = data;
  }

  onSuccess = (data) => {
    // handle each success that occurs
  }

  onError = (data) => {
    // handle each error that occurs
  }

  render() {
    return (
      <Stroop
        colors={colors}
        combos={combos}
        onComplete={this.handleComplete}
        onError={this.handleError}
        onSuccess={this.handleSuccess}
        words={words}
      />
    );
  }
}

ReactDOM.render(<App />, document.querySelector('#app'));

Props

Testing

Cross-browser testing supported by: