@orcatech/react-neuropsych-imgrecog v1.0.12

ORCATECH Image Recognition Test

This repository holds a set of react components for administering and collecting data from an image recognition test. The test is performed by showing the user a grid of images, have them perform a different task, then show them the same grid without the images and ask where a particular image was.

Components

There are two main components for this test: Display and Question.

Display

This component takes an array of image links and shuffles them into a grid. When this grid is done displaying, it calls the onComplete handler in the componentWillUnmount() lifecycle with a data object outlined below.

Props

Question

This component takes a data object from the first component to display a grid with an image prompt. The user can then select a box in the grid. Every time the user selects a box, the onSelect handler will be called with an updated data object. When the component is about to be unmounted the onComplete handler is collect with the final data object.

Props

Data

Data

This is the top level data object returned from the Display component and received by all onComplete and onSelect handlers

class Data {

	// A unix timestamp representing when the display component was mounted
	displayStart = undefined;

	// A unix timestamp representing when the display component was unmounted
	displayStop = undefined;

	// A unix timestamp representing when the question component was mounted
	questionStart = undefined;

	// A unix timestamp representing when the question component was unmounted
	questionStop = undefined;

	// the correct coordinate
	coord = undefined;

	// the currently selected coordinate
	selected = undefined;

	// True is they selected the correct coordinate
	// False if they selected the wrong coordinate
	// Undefined if a selection has not been made
	correct = undefined;

	// a grid of Coordinate objects
	//
	// from display this is a 2D array of NxN dimensions where N is the dimension
	// property given to the display component
	//
	// from questions the 2D array is flattened into an array of size N*N
	grid = new Array();

	// a list of selections made by the user when they were given an empty grid.
	selections = [];
}

Coordinate

This represents a box in the grid. A Coordinate has a row and column position as well as the image displayed at it's position. Coordinate positions are relative to an origin in the upper left hand corner of the grid.

// Coordinate is a coordinate within a 2D grid and optionally contains an image.
//	The point of origin for the grid is the upper left hand corner
class Coordinate {
	 // The row number this coordinate resides in
	 row = undefined;

	 // The column number this coordinate resides in
	 col = undefined;

	 // An optional image associated with this coordinate. This will be the image
	 // file name or an empty string
	 img = undefined;
}

Selection

This represents a Coordinate selection made by the user in the Question component

{
	// the time in which the selection was made as a unix timestamp
	stamp: (new Date()).getTime(),

	// the coordinate selected by the user
	pickedCoord: this.props.data.selected,

	// the correct coordinate (images matches the prompt)
	correctCoord: this.props.data.coord,

	// True if pickedCoord === correctCoord, false otherwise
	correct: this.props.data.correct
}

Testing

To test the functionality, run:

make build && make serve

and an example test will be hosted at http://localhost:8081/index.html. The page will displays the first component for a short period then unmounts it and displays the second question.

Example

This example displays the first component for 5 seconds and then shows the second component. When testing you will want the user to perform an intermediate task to prevent them from keeping the cursor in the same position.

import React from 'react';
import ReactDOM from 'react-dom';
import { Question, Display } from '@orcatech/react-neuropsych-imgrecog';

const images = [
		'large_black_triangle.png',
		'large_green_triangle.png',
		'large_red_triangle.png',
		'large_grey_triangle.png',
		'small_blue_triangle.png',
		'small_orange_triangle.png',
		'small_purple_triangle.png'
	],
	dimension = 4,
	timeout = 5000,
	display = document.getElementById('display'),
	question = document.getElementById('question');

// handler for when the user clicks on a box in the question component
let handleQuestionSelect = (data) => {
	console.log(data);
}

// handler for when the question component is unmounted
let handleQuestionComplete = (data) => {
	console.log(data);
}

// handler for when the display component is unmounted
let handleDisplayComplete = (data) => {
	console.log(data);
	ReactDOM.render(
		<Question
			percent={90}
			showLabels={true}
			data={data}
			onComplete={handleQuestionComplete}
			onSelect={handleQuestionSelect}/>, question);
}

ReactDOM.render(
	<Display
		percent={90}
		showLabels={false}
		dimension={dimension}
		images={images}
		onComplete={handleDisplayComplete}/>, display);

// stop displaying the first component after 5 seconds
setTimeout(() => { ReactDOM.unmountComponentAtNode(display) }, timeout);