I based today’s project on the Human Benchmark Reaction Time test.
The user clicks to start and clicks immediately when they see the background change to red. Their reaction time is displayed on the screen in milliseconds. I changed the indication colours from the Human Benchmark website because I felt it was more intuitive to click when the background turned red instead of green (“stop!”). Blue felt like a good colour for a “paused stage” so I stuck with it.
The main function used was getTime(), to record the user’s reaction time. Two mistakes I learned from were:
1. Using setInterval to change the background
I set it up so that for each new game, there would be a random delay of 1 to 6 seconds until the background changed colour. After the delay time, I would change the background color to red. Typing this out now makes it seem really intuitive, use setTimeout() to wait a specified number of milliseconds and then execute the function. However, I did not know about setTimeout() but remembered setInterval() from my digital clock page. I set an interval to keep checking to see if the specified time had passed yet. Not only was this an inefficient way of going about it, the conditions would never be met!
2. Setting a start time when the user clicks Start
I used getTime() two times, once when the user clicked start and when they clicked again for the red background. The correct times should have been when the background changed colour and then when the user clicked. I think I made this mistake because of 1) the “start” concept 2) I thought I had to get the (start time) and then continuously check to see if (start time + delay time) had been reached.
It is a little embarrassing to talk about all the mistakes I’ve made (and I’m sure there are so many things about my code that could be improved), but that’s how people can learn. Making a mistake actually makes the lesson learned more memorable!
Test your reaction time ! I haven’t been able to get under 300 milliseconds yet…
Stacey Learns to Code 