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: