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

Name	Type	Default	Description
buttonsPerRow	number	2	The number of buttons per row
colors	array		An array of RGB hex colors values without the #. These should match the items in the words array. ['009900', '990000', '000099', 'EE7600']
combos	array		An array of objects with a shape of color and word that refer to their respective array index. Each combination is used for each task and the correct button press is based on the color value. [{ word: 0, color: 1 }, { word: 1, color: 2 }]
completionMessage	string	'Completed! Please press next.'	The message that is shown when the test is completed.
correctMessage	string	'Correct!'	The message that is show when a correct button was pressed.
correctMessageTimeout	number	750	Milliseconds for the correct message to be visible.
incorrectMessage	string	'Incorrect, please try again'	The message that is show when an incorrect button was pressed.
onComplete	func		Callback fired when the test is completed function (completionData: object) => void completionData: an object with the following keys    start: timestamp, stop: timestamp, events: array, timeLimit: number, timeLimitReached: bool
onError	func		Callback fired when an incorrect button was pressed function (data) => void data: an object with the following keys    stamp, index, word, color, start, selectedColor
onSuccess	func		Callback fired when a correct button was pressed function (data) => void data: an object with the following keys    { stamp: number, index: number, word: string, color: string, start: timestamp, selectedColor: string }
textSize	string	'2rem'	The font-size of the text.
timeLimit	number	45000	Milliseconds for the time limit of the test. Use 0 to disable the time limit.
words	array		An array of keywords for each color. These should match the items in the colors array. ['green', 'red', 'blue', 'orange']

Testing

Cross-browser testing supported by: