Reaction Tester
About Reaction Tester:
The user has to click the squares as fast as he/she can. The square can appear in random sizes, directions, and colors. This project calculates the reaction time of a person in seconds by storing the start time when the square appeared on the screen and also the end time when the user clicks the square. Finally, the user's reaction time is given as an output.
Deployed Reaction Tester Link: Click Here
Source Code-
HTML:
<head>
<title>Reaction Tester</title>
<link rel="stylesheet" href="rxn.css">
</head>
<body>
<div id="header">
<h1>Reaction Tester</h1>
<p>Click the boxes as soon as you can...</p>
</div>
<div id="box"></div>
<script src="rxn.js">
</script>
</body>
CSS:
#box{
width: 200px;
height: 200px;
background-color: red;
border-radius: 10px;
border-style: solid;
position: relative;
}
#header{
background-color: black;
color: yellow;
width: 30%;
border-style: solid;
border-color: yellow;
text-align: center;
}
JavaScript:
var start = new Date().getTime();
function getRandomColor(){
var letter = "0123456789ABCDE";
var color = "#";
for(var i=0;i<6;i++)
{
color+= letter[Math.floor(Math.random()*15)];
}
return color;
}
function move()
{
var left = Math.random()*700;
var top = Math.random()*300;
var wh = Math.random()*300 + 100;
document.getElementById("box").style.left = left;
document.getElementById("box").style.top = top;
document.getElementById("box").style.width = wh;
document.getElementById("box").style.height = wh;
document.getElementById("box").style.backgroundColor = getRandomColor();
document.getElementById("box").style.display = "block";
start = new Date().getTime();
}
document.getElementById("box").onclick = function()
{
document.getElementById("box").style.display = "none";
var end = new Date().getTime();
var timeTaken = (end-start)/1000;
alert("Your Reaction Time = "+timeTaken+" sec");
move();
}
Comments
Post a Comment