@orcatech/react-neuropsych-stroop
Version:
React components for stroop test
98 lines (75 loc) • 6.16 kB
Markdown
# ORCATECH Stroop Test
[](https://travis-ci.org/orcatechteam/react-neuropsych-stroop)
A [Stroop Effect](https://en.wikipedia.org/wiki/Stroop_effect) Test implemented as a [React](https://reactjs.org) component.
<img width="400" alt="preview" src="docs/stroop-test-preview.gif" />
## Install
The ORCATECH Stroop test is available as an [NPM package](https://www.npmjs.com/package/@orcatech/react-neuropsych-stroop).
```sh
npm install @orcatech/react-neuropsych-stroop
```
## Demo
After installing, open the
[Stroop Test Demo](dist/test/index.html)
## Usage
Here's a quick example to get you started:
```javascript
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. <br><br> `['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. <br><br> `[{ 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 <br><br> `function (completionData: object) => void` <br> _completionData_: an object with the following keys <br> `start: timestamp, stop: timestamp, events: array, timeLimit: number, timeLimitReached: bool` |
| onError | func | | Callback fired when an incorrect button was pressed <br><br> `function (data) => void` <br> _data_: an object with the following keys <br> `stamp, index, word, color, start, selectedColor` |
| onSuccess | func | | Callback fired when a correct button was pressed <br><br> `function (data) => void` <br> _data_: an object with the following keys <br> `{ 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. <br><br> `['green', 'red', 'blue', 'orange']` |
## Testing
Cross-browser testing supported by:<br />
<a href="https://www.browserstack.com/"><img src="docs/Browserstack-logo@2x.png" width="160"></a>