-
Notifications
You must be signed in to change notification settings - Fork 3
/
19 Javascript Project - Reaction Tester.html
92 lines (78 loc) · 4.55 KB
/
19 Javascript Project - Reaction Tester.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html lang="en">
<head><title>Javascript Project - Reaction Tester</title>
<link rel="stylesheet" type="text/css" href="20 CSS file for Reaction Tester.css">
</head>
<body>
<!-- Also see CSS file of it to understand code well -->
<h1>Reaction Tester Game</h1>
<h4>Tip: Click on Boxes and Circles as quickly as you can!</h4>
<!-- Time Taken will be shownhere -->
<p>Time Taken To Click On The Shape: <span id="timedisplay"></span></p>
<button id="exit">Exit </button>
<div id="shape"></div>
<script type="text/javascript">
document.getElementById("exit").onclick=function(){
//window.opener = self; // optional // The open() method opens a new browser window, or a new tab, depending on your browser settings and the parameter values.
window.close();
}
// get time when page is loaded
var start=new Date().getTime();
//function to show shape again after clicking on it
//basically this function generates an random shape
function makeShapeAgain(){
//changing positioning of the shape by passing random values to top and left (see css file)
var toprandom=Math.random()*300; // upto 300px
document.getElementById("shape").style.top=toprandom+"px";
var leftrandom=Math.random()*1200;
document.getElementById("shape").style.left=leftrandom+"px";
//Giving shape a random size(changing its shape)
// random width and height between 0 to 200 then we add 100 and that gives us random number between 100 and 300 , so that its not too small
var widthrandom=(Math.random()*200)+100;
document.getElementById("shape").style.width=widthrandom+"px";
document.getElementById("shape").style.height=widthrandom+"px"; // keeping height same as width
//getting random color
document.getElementById("shape").style.backgroundColor=randomColor();
//making the shape circle on 50% of the times it appears
if(Math.random()>0.5){
document.getElementById("shape").style.borderRadius="50%";
}else{
document.getElementById("shape").style.borderRadius="0";
}
document.getElementById("shape").style.display="block"; // show shape
//updating start time when shape appears again
start=new Date().getTime();
}
//shape will appear after 1 second i.e 1000 miliseconds //setTimeout(makeShapeAgain,1000);
//but we will make shape appear after random number of seconds
// also first shape will also appear after random second because you have set display of the shape if to none in css file
//setTimeout(makeShapeAgain , Math.random()*2000); //shape will appear between 0 to 2 seconds
// if we don't put this code inside the function it run only once
// extra : Math.random() always returns a number lower than 1.
function startafterdelay(){
setTimeout(makeShapeAgain , Math.random()*2000);
}
startafterdelay(); // this function is called when page opens
//Function that changes color of the shape
function randomColor(){
var latters='0123456789ABCDEF'.split('');
var color='#';
for(var i=0;i<6;i++){
color+=latters[Math.floor(Math.random()*16)]
}
return color;
}
//code when you click on shape it disappears
document.getElementById("shape").onclick=function(){
document.getElementById("shape").style.display="none";
//getting time when we click on the shape/function called
var end=new Date().getTime();
//var timetaken=end - start; // this is in miliseconds , so divide my 1000 to get time in seconds
var timetaken= (end - start)/1000; // this is in seconds
document.getElementById("timedisplay").innerHTML=timetaken+"s";
startafterdelay(); // this is called everytime you click on shape
}
</script>
<!-- important tasks : update this code to show users best and worst click speed
i.e show min time and max time and show average time-->
</body>
</html>