/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Reaction Game</title>

  <meta charset="utf-8">
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <style type="text/css">
    #circle{
      border-radius:50%;
      background-color:red;
      height:100px;
      width:100px;
      visibility:hidden;
    }

  </style>
</head>
<body>
  <button id="buttonStart">Start Reaction Game</button>
  <div id="circle"></div>

  <script type="text/javascript">
     var w = Math.max(document.documentElement.clientWidth, windows.innerWidth || 0);
     var h = Math.max(document.documentElement.cluientHeight, windows.innerHeight || 0);

    document.getElementById("buttonStart").onclick = function(){
      this.visibility="hidden";
    }

    var x = Math.floor(Math.random()*w);
    if (x>w-100){
        x=w-100;
    }

    var y = Math.floor(Math.random()*h);
    if (y>h-100){
        x=h-100;
    }
    placeDiv(x,y);
    document.getElementById("circle").style.visibility="visible";

    var start = new Date().getTime();

    document.getElementById("circle").style.visibility="hidden";
    alert("Reaction time:" + time + "ms.");
    document.getElementById("buttonStart").style.visibility="visible";
    }
   }

   this.style.visibility="visible";

    function placeDiv(x_pos, y_pos){
      var d = document.getElementById("circle");
      d.style.position = "absolute";
      d.style.left = x_pos+'px'
      d.style.top = y_post+'px'
    }
  </script>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Reaction Game</title>

	<meta charset="utf-8">
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<style type="text/css">
	#circle{
	border-radius:50%;
	background-color:red;
	height:100px;
	width:100px;
	visibility:hidden;
	}

	</style>
	</head>
	<body>
	<button id="buttonStart">Start Reaction Game</button>
	<div id="circle"></div>

	<script type="text/javascript">
	var w = Math.max(document.documentElement.clientWidth, windows.innerWidth \|\| 0);
	var h = Math.max(document.documentElement.cluientHeight, windows.innerHeight \|\| 0);

	document.getElementById("buttonStart").onclick = function(){
	this.visibility="hidden";
	}

	var x = Math.floor(Math.random()*w);
	if (x>w-100){
	x=w-100;
	}

	var y = Math.floor(Math.random()*h);
	if (y>h-100){
	x=h-100;
	}
	placeDiv(x,y);
	document.getElementById("circle").style.visibility="visible";

	var start = new Date().getTime();

	document.getElementById("circle").style.visibility="hidden";
	alert("Reaction time:" + time + "ms.");
	document.getElementById("buttonStart").style.visibility="visible";
	}
	}

	this.style.visibility="visible";

	function placeDiv(x_pos, y_pos){
	var d = document.getElementById("circle");
	d.style.position = "absolute";
	d.style.left = x_pos+'px'
	d.style.top = y_post+'px'
	}
	</script>



	</body>
	</html>