@orcatech/react-neuropsych-trails

React components for trail making tests parts A & B

Stats

StarsIssuesVersionUpdatedCreatedSize
@orcatech/react-neuropsych-trails
0.0.92 years ago3 years agoMinified + gzip package size for @orcatech/react-neuropsych-trails in KB

Readme

ORCATECH Trail Making Tests

Build Status

The Trailing Making Tests A & B implemented as a React component. The component will size itself to it's parent element while maintaining it's aspect ratio. It will not expand the parent element.

Install

The ORCATECH Trail Making Tests are available as an NPM package.

npm install @orcatech/react-neuropsych-trails

Trail Making Test Types

There are two types of tests, A & B. In test A the user must click or touch each numbered circle is ascending order starting with number 1. i.e. 1, 2, 3, etc. In test B the user must click or touch each numbered and lettered circle in alternating, ascending order starting with the number 1. i.e. 1, A, 2, B, 3, C, etc.

To specify TrailsA vs TrailsB, set the "part" property to one of the following:

Part Description
A Full test with only numbers
A12 Abbreviated test (12 circles) with only numbers
B Full test with numbers and letters
B12 Abbreviated test (12 circles) test will numbers and letters

Demo

After installing, open the Trails Test Demo

Usage

Here's a quick example to get you started:

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import Trails from '@orcatech/react-neuropsych-trails';

export default class Demo extends React.Component {

    static propTypes = {
        part: PropTypes.string.isRequired,
    }

    state = {
        progress: 0
    }

    constructor(props) {
        super(props);
        this.data = {
            start: undefined,
            stop: undefined,
            events: []
        };
    }

    componentWillMount() {
        this.data.start = new Date().getTime();
    }

    update = (type, date, correctToken, selectedToken) => {
        this.data.events.push({
            stamp: date.getTime(),
            type: type,
            correctToken: correctToken,
            selectedToken: selectedToken
        });
        console.log(this.data.events[this.data.events.length-1]);
    }

    handleMiss = (date, correctToken, x, y) => {
        this.update("Miss", date, correctToken, { text: "", x: x, y: y });
    }

    handleSuccess = (date, token) => {
        this.update("Success", date, token, token);
        this.setState(prev => ({ progress: ++prev.progress }));
    }

    handleError = (date, correctToken, selectedToken) => {
        this.update("Error", date, correctToken, selectedToken);
    }

    handleCompleted = (date) => {
        this.data.stop = date.getTime();
        console.log("Trails Data:");
        console.log(this.data);
    }

    render() {
        return <Trails
                        part={this.props.part}
                        progress={this.state.progress}
                        feedback={true}
                        errorText="X"
                        errorDuration={500}
                        completedText={"Completed! Please press the next button"}
                        onSuccess={this.handleSuccess}
                        onError={this.handleError}
                        onMiss={this.handleMiss}
                        onCompleted={this.handleCompleted}
                    />;
    }
}

ReactDOM.render(<Demo part="A12"/>, document.getElementById('root'));

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.