merge fix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orcatech/react-neuropsych-imgrecog",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "React components for image recognition testing",
   "main": "dist/react-neuropsych-imgrecog.js",
   "scripts": {

src/data.js

@@ -93,7 +93,7 @@ Data.parse = (str) => {
 };
 
 // generate create a new dataset and populates the grid with the images and dimensions given
-Data.generate = (images, dimension) => {
+Data.generate = (images, dimension, currentImageIndex) => {
 	let data = new Data();
 
 	if (typeof images === 'undefined' || dimension === 0) {
@@ -114,8 +114,15 @@ Data.generate = (images, dimension) => {
 	// randomly place the images in the grid
 	imageLinks = shuffle(imageLinks);
 
-	// randomly select a correct answer
-	data.image = images[Math.floor(Math.random() * images.length)];
+	let isRandom = false;
+	if (currentImageIndex !== null && typeof currentImageIndex === 'number' && images[currentImageIndex] !== undefined) {
+		// use a static correct answer
+		data.image = images[currentImageIndex];
+	} else {
+		// use a random correct answer
+		isRandom = true;
+		data.image = images[Math.floor(Math.random() * images.length)];
+	}
 
 	// Now turn it into a 2D array
 	for (let i = 0; i < data.grid.length; i++) {
@@ -129,7 +136,7 @@ Data.generate = (images, dimension) => {
 		data.grid[i] = row;
 	}
 
-	console.log('Correct: (row: ' + data.coord.row + ', col: ' + data.coord.col + ', img: ' + data.coord.img + ')');
+	console.log("Correct: (row: %s, col: %s, img: %s, isRandom: %s)", data.coord.row, data.coord.col, data.coord.img, isRandom);
 	return data;
 };
 

src/display.jsx

@@ -1,23 +1,37 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+
 import Data from './data';
 import Grid from './grid';
 
-export default class Display extends React.PureComponent {
+const styles = {
+	imageDescription: {
+		fontSize: '1.25rem',
+		textAlign: 'center'
+	}
+};
 
+class Display extends React.PureComponent {
 	static propTypes = {
+		classes: PropTypes.object.isRequired,
+		currentImageIndex: PropTypes.number,
 		dimension: PropTypes.number.isRequired,
 		images: PropTypes.array.isRequired,
-		timeout: PropTypes.number.isRequired,
 		onComplete: PropTypes.func.isRequired,
+		percent: PropTypes.number,
 		showLabels: PropTypes.bool.isRequired,
-		percent: PropTypes.number
+		timeout: PropTypes.number,
+	}
+
+	static defaultProps = {
+		currentImageIndex: null,
+		timeout: 0
 	}
 
 	constructor(props) {
 		super(props);
-		this.data = Data.generate(props.images, props.dimension);
+		this.data = Data.generate(props.images, props.dimension, props.currentImageIndex);
 	}
 
 	// lifecycle functions
@@ -31,7 +45,7 @@ export default class Display extends React.PureComponent {
 
 	componentWillUnmount() {
 		clearTimeout(this.timeout);
-		onTimeout();
+		this.onTimeout();
 	}
 
 	onTimeout = () => {
@@ -40,6 +54,27 @@ export default class Display extends React.PureComponent {
 	}
 
 	render() {
-		return <Grid percent={this.props.percent} showLabels={this.props.showLabels} showImages={true} data={this.data}/>;
+		// NOTE: let's assume the image file name is also the description
+		const { img } = this.data.coord;
+		const imgFile = (img.indexOf('http') > -1) ? img.substr(img.lastIndexOf('/') + 1) : img;
+		const imageDescription = imgFile.replace(/_/g, " ").split('.').slice(0, -1);
+
+		return (
+			<React.Fragment>
+				<p className={this.props.classes.imageDescription}>
+					Carefully examine this grid of shapes. You will be asked where the {imageDescription} is later.
+					<br />
+					This page will advance automatically.
+				</p>
+				<Grid
+					data={this.data}
+					percent={this.props.percent} 
+					showImages
+					showLabels={this.props.showLabels} 
+				/>
+			</React.Fragment>
+		);
 	}
-}
+}
+
+export default withStyles(styles)(Display);

src/main.jsx

@@ -1,41 +1,67 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import Display from './display';
 import Question from './question';
 
-
 // testing the components - it displays the first component for 5 seconds and then shows the second component
 
 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,
-	display = document.getElementById('display'),
-	question = document.getElementById('question');
+	'large_black_triangle.png', // months: 0, 7
+	'large_green_triangle.png', // months: 1, 8
+	'large_red_triangle.png', // months: 2, 9
+	'large_grey_triangle.png', // months: 3, 10
+	'small_blue_triangle.png', // months: 4, 11
+	'small_orange_triangle.png', // month: 5
+	'small_purple_triangle.png' // month: 6
+];
+const	dimension = 4;
+const	display = document.getElementById('display');
+const	question = document.getElementById('question');
+
+const imageSetCombined = [...images, ...images]; // extend out the image set so we have enough to cover 12 months
+const currentMonth = new Date().getMonth();
+const currentImageIndex = images.findIndex(img => img === imageSetCombined[currentMonth]);
 
 // handler everytime the user clicks on a box in the second component
 let handleQSelect = (data) => {
 	console.log(data);
-}
+};
 
 // handler for when the second component stops displaying
 let handleQComplete = (data) => {
 	console.log(data);
-}
+};
 
 // handler for when the first component that displays the grid is done displaying
 let handleDComplete = (data) => {
 	console.log(data);
-	ReactDOM.render(<Question showLabels={true} data={data} onComplete={handleQComplete} onSelect={handleQSelect}/>, question);
-}
+	ReactDOM.render(
+		<Question
+			data={data}
+			onComplete={handleQComplete}
+			onSelect={handleQSelect}
+			showLabels
+		/>,
+		question
+	);
+};
 
-ReactDOM.render(<Display showLabels={false} dimension={dimension} images={images} onComplete={handleDComplete}/>, display);
+ReactDOM.render(
+	<Display
+		currentImageIndex={currentImageIndex}
+		dimension={dimension} 
+		images={images} 
+		onComplete={handleDComplete}
+		showLabels={false} 
+	/>,
+	display
+);
 
 // stop displaying the first component after 5 seconds
-setTimeout(() => { ReactDOM.unmountComponentAtNode(display) }, 5000);
+setTimeout(
+	() => {
+		ReactDOM.unmountComponentAtNode(display);
+	},
+	5000
+);