Topics

Reaction game – jQuery

8 January 2018

In this post, I briefly describe the simple reaction test game that you can see here.

It works on your browser using a simple jQuery script. Although you don't know what jQuery is, you may have heard about Javascript. In fact, jQuery is nothing but that a Javascript library which simplifies Javascript syntax as well as making easier to handle events, create animations, and so on.

reaction-script.js

The following is the javascript (jQuery) script file reaction-script.js for the reaction test game.


var timeCreated;
var timeClicked;
var timeDisplay;
var timeReaction;

// create elements
createElement();

$("#element").click(function() {
  timeClicked  = Date.now();                             // time when element is clicked on
  timeReaction = (timeClicked - timeCreated) / 1000;     // reaction time (in seconds)
  $("#reaction-time").html(timeReaction);                // display reaction time
  this.style.display = "none";                           // delete element
  createElement();                                       // create new element
});

/* create elements */
function createElement () {
  // time when element is displayed
  timeDisplay = Math.random() * 3000;
	
  setTimeout(function() {
    var randNum = Math.random();
    if(randNum < 0.5) {
      $("#element").css("borderRadius",100);               // creating circles
    } else {
      $("#element").css("borderRadius",0);                 // creating squares
    }
    var topPosition  = Math.random() * 60;                 // new random top position
    var leftPosition = Math.random() * 85;                 // new random left position
    $("#element").css("top",  topPosition  + "%");         // changing top position 
    $("#element").css("left", leftPosition + "%");         // changing left position 
    $("#element").css("backgroundColor",getRandomColor()); // changing color		
    $("#element").css("display","block");                  // display element
    timeCreated = Date.now();                              // time when element is created
  }, timeDisplay);

}

/* random color generator function (from stack overflow) */
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color   = '#';
  for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
							

The script is very basic. At the beginning, the function "createElement()" is called. It uses the method


setTimeout(function() { do something }, timeDisplay);	
							

which carries on what is contained between curly brackets after "timeDisplay" seconds, which is a random number between $0$ and $3$. Inside the method, we take the element and we let it be either a cirle or a square by changing its border radius:


if(randNum < 0.5) {
  $("#element").css("borderRadius",100);  // producing circles
} else {
  $("#element").css("borderRadius",0);    // producing squares
}
							

Moreover, we get a new (top and left) random position, a new (random) color, and we save the time once the element is displayed on the screen:


var topPosition  = Math.random() * 60;                 // new random top position
var leftPosition = Math.random() * 85;                 // new random left position
$("#element").css("top",  topPosition  + "%");         // changing top position 
$("#element").css("left", leftPosition + "%");         // changing left position 
$("#element").css("backgroundColor",getRandomColor()); // changing color		
$("#element").css("display","block");                  // display element
timeCreated = Date.now();                              // time when element is created
							

When the user clicks on the element displayed, the ".click()" method is called. Here, we first save the time when the element is clicked on ("timeClicked") and then we get the time taken to user to click on it ("timeReaction"):


timeClicked  = Date.now();                             // time when element is clicked on
timeReaction = (timeClicked - timeCreated) / 1000;     // reaction time (in seconds)
							

At the same time, the time taken is displayed by changing the html content of the "reaction-time" div, the current element disappears, and "createElemen()" is called in order to create a new element, and the game starts again.


$("#reaction-time").html(timeReaction);                // display reaction time
this.style.display = "none";                           // delete element
createElement();                                       // create new element
							

reaction.html and reaction-style.css

The following is the html file for the reaction-game test,

			    
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Reaction test game</title>
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="reaction-style.css">
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
  <div id="title">Reaction game</div>
  <p>Test your reaction by clicking as quickly as you can on the objects that appear below!</p>
  <div class="time">Your time: <span id="reaction-time">0</span> sec.</div>
  <div id="main-box"> <div id="element"></div> </div>
  <!-- Include reaction-game script -->
  <script src="reaction-scripts.js"></script>
</body>
</html>
							

and this is the corresponding reaction-style.css:

			    
@import url('https://fonts.googleapis.com/css?family=Oxygen');		
body, html {
  margin:0 auto;		
  font-family: 'Oxygen', sans-serif;
  background-color:#F6F6F6;
  height:100%;
}	
p {
  font-size:1.6em;
  padding:0 auto;
  margin:0;
  height:40px;
  line-height:40px;
  text-align:center;
}	
#title {
  font-weight:bold;
  font-size:4em;
  vertical-align:center;
  text-align:center;
  height:90px;
  line-height:90px;	
}
#element {
  position:relative;
  background-color:red;
  width:130px;
  height:130px;
  display:none;
}
#main-box {
  border-top:2px solid grey;
  width:100%;
  height:calc(100% - 170px);
  background-color:white;
}
.time {
  vertical-align:center;
  text-align:center;
  line-height:40px;
  height:40px;
  font-weight:bold;
  font-size:1.6em;
}