JavaScript/Exercises/ReactionTime

Check your reation time

HTML + CSS

The app shows a grid of 16 green areas. When the game starts, two of these fields change their color to red. Try to click them as fast as possible. Your reaction time is shown at the bottom.

First, we need an HTML file plus CSS to realize the user interface. It shall contain:

A caption.
A 4 x 4 grid with 16 areas.
A button to start the game.
A feedback area where the reaction time is shown.

The HTML might look like this:

Click to see solution

<!DOCTYPE html>
<html>
<head>

  <!--
    There is a grid with many areas. Some of these areas have
    a different color. Those shall be clicked. The program
    will show you how much time you need.
  -->

  <title>Fast Reaction</title>
  <script>
  // ...
  </script>

  <style>
    .containerGrid {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-auto-rows: 40px;
      gap: 40px;
    }
    .cell {
      background-color: lime;
    }
    .containerLine {
      display: flex;
      margin-top: 2em;
    }
    .button {
      padding: 0.6em 2em 0.6em 2em;
      margin-right: 2em;
      font-size: 1em;
    }
    .feedback {
      padding-top: 5px;
      margin-left: 10px;
      font-size: 1.4em;
    }
  </style>

</head>

<body style="padding:0em 2em 0em 2em">

  <!-- Captions -->
  <h1 style="text-align: center">Test your reaction time</h1>
  <h4 style="text-align: center">Click on the two red areas</h4>

  <!--  The containter with the clickable areas  -->
  <div class="containerGrid">
    <div class="cell" id="b1"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b2"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b3"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b4"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b5"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b6"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b7"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b8"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b9"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b10" onclick="areaClicked(event)"/></div>
    <div class="cell" id="b11" onclick="areaClicked(event)"/></div>
    <div class="cell" id="b12" onclick="areaClicked(event)"/></div>
    <div class="cell" id="b13" onclick="areaClicked(event)"/></div>
    <div class="cell" id="b14" onclick="areaClicked(event)"/></div>
    <div class="cell" id="b15" onclick="areaClicked(event)"/></div>
    <div class="cell" id="b16" onclick="areaClicked(event)"/></div>
  </div>

  <div class="containerLine">
    <!-- button to start the game -->
    <button id="start" class="button" onClick="start()">Start</button>
    <!-- feedback from the script to the player -->
    <div               class="feedback">Reaction Time (ms): </div>
    <div id="feedback" class="feedback"></div>
  </div>

</body>
</html>

JavaScript

Next, we have to implement the game's functionality within JavaScript. We need:

Variables to store the start and end timestamp.
Event handler(s) to react on 'click' events to the areas. It's helpful if all areas use the same event handler instead of having 16 individual event handlers.
An event handler to react to the 'Start' button.
A function that randomly selects an area and changes its color to red.
A function that counts how many areas are red.

The JavaScript part may look like this:

Click to see solution

  "use strict";

  // --------------------------------------------
  // global variables
  // --------------------------------------------

  // the number of red areas
  const GOAL = 2;
  // an array with all area-IDs
  const arrayAreas =
        ["b1",  "b2",  "b3",  "b4",  "b5",
         "b6",  "b7",  "b8",  "b9",  "b10",
         "b11", "b12", "b13", "b14", "b15", "b16"];
  // the start timestamp
  let startDate;

  // the feedback area
  let feedback;

  // --------------------------------------------
  // functions
  // --------------------------------------------

  // initialize everything
  function start() {
  feedback = document.getElementById("feedback");

    // reset the colors
    arrayAreas.forEach((area) => {
       document.getElementById(area).style.backgroundColor = "lime";
    });

    // mark some random areas with red color
    for (let i = 0; i < GOAL; i++) {
      // a number from 0 to 15
      const tmp = Math.floor(Math.random() * 16);
      const area = document.getElementById(arrayAreas[tmp]);
      if (area.style.backgroundColor === "red") {
        // it's already red; try again
        i--;
        continue;
      }
      area.style.backgroundColor = "red";
    }

    // save the starting timestamp
    startDate = new Date();
  }

  // a single function for events on all areas
  function areaClicked(event) {
    const area = document.getElementById(event.target.id);
    area.style.backgroundColor = "lime";

    // are all red areas clicked?
    if (numberOfRed() === 0) {
      const endDate = new Date();
      const ms = endDate - startDate;
      feedback.innerHTML = ms;
    }
  }

  // function to count the red areas
  function numberOfRed() {
    let tmp = 0;
    arrayAreas.forEach((area) => {
       if (document.getElementById(area).style.backgroundColor === "red") {
         tmp++;
       }
    });
    return tmp;
  }

Extensions

You can extend the app in different ways.

Make it more complicated by using more areas, smaller areas, or more than two red areas.
Show a list of all attempts, possibly sorted by the reaction time.