HRx Technology

Bias Test App

client project screenshot

This Project was a small project for a startup company name HRx Technology who provide services and technology solutions to interrupt unconscious bias in the workplace. The app is based on Harvard University research on bias test. We tried to develop the app more user friendly and has nice interface to attract users and give the company some data and informations. The app developed in a group of four, three front end developers and one back end developer, using Reactjs and Contentful CMS; All the information comes through API from contentful.

Visit Live

Since the design of website wasn't so complicated, so we started right by Mock-ups and using HRx brand style guide and follow that for designs.Our main goal was to keep it so simple and easy to use. Our plan was to have 20 questions in each block(compatible and incompatible) which we had a explanation page in between two kind of tests.

client project screenshot
Home Page
client project screenshot
Result Page

The most important thing for result is the time that user takes to answer questions, storing it, and send it back to database for calculating the result. For this purpose we should have known if the user's answer was correct or wrong, so it moves forward with questions and reset timing for next one.


	checkAnswer(key) {
			if (key === this.state.currentQuestion.correctKey) {
				// measure the time
				let stopTime = performance.now();
				let timeTaken = stopTime - this.state.startTime;
				if (key === 'ArrowLeft') {
					let l = this.state.leftTimes;
					l.push(timeTaken);
					this.setState({
						leftTimes: l
					})
				} else {
					let r = this.state.rightTimes;
					r.push(timeTaken);
					this.setState({
						rightTimes: r
					})
				}
				// move question forward by one if it is not finished.
				let i = this.state.currentQuestionIndex + 1;
				if (i === this.state.questions.length) {
					this.testFinished(this.state.leftTimes, this.state.rightTimes);
				} else {
					let currentQuestion = this.state.questions[i];
					this.setState({
						isAnswerCorrect: true,
						currentQuestion: currentQuestion,
						currentQuestionIndex: i,
						startTime: performance.now() // Start timer again
					});
				}
			} else {
				this.setState({
					isAnswerCorrect: false
				})
			}
	}