Reaktionstester

<html>

   <head>


       <link href='https://fonts.googleapis.com/css?family=Roboto:400italic' rel='stylesheet' type='text/css'>
       <meta http-equiv="content-type" content="text/html; charset=utf-8" />


       <style type="text/css">

           #btn_start {

               margin:auto;
               height 20px;
               width: 50px;

           }

           #kopfzeile {


               height:200px;
               float:left;
               margin-right: 500px;

           }

           #spielfeld {

               float:left;
               height:800px;
               width:800px;
               background-color: azure;
               border-style: solid;
               border-color: dimgrey;

           }

           #kreis {

               width: 100px;
               height:100px;
               border-radius: 50px;
               background-color: blanchedalmond;
               display: none;
               position: absolute;
               top: 0px;
               left: 0px;


           }

           #quadrat {

               width: 100px;
               height:100px;
               background-color: darkviolet;
               display: none;
               position: absolute;
               top: 0px;
               left: 0px;

           }

           #dreieck {

               width: 0px;
               height: 0px;
               -webkit-transform:rotate(360deg);
               border-style: solid;
               border-width: 0 50px 100px 50px;
               border-color: transparent transparent #35b19b transparent;
               display: none;
               position: absolute;
               top: 0px;
               left: 0px;
           }

       </style>


   </head>

   <body style="background-color:#90C3D4;">

         <div id="kopfzeile">

             <h1>Test your Reactions!</h1>

             <p>Click on the boxes and circles as quickly as you can!</p>

             <p><b id="zeit">Your time: </b></p>

             <p><button id="btn_start">Start</button></p>


         </div>

         <div id="spielfeld">


             <div id="kreis"></div>

             <div id="quadrat"></div>

             <div id="dreieck"></div>


         </div>

         <script type="text/javascript">

             var formen = new Array("kreis","quadrat","dreieck");
             var min = 0, max = 2;

             function position(form) {

                 var y = Math.floor(Math.random() * 800);

                 var x = Math.floor(Math.random() * 800);

                 document.getElementById(form).style.top = y;
                 document.getElementById(form).style.left = x;

                 document.getElementById(form).style.display = "block";


             }

             function randomFormen (){

                 var num = Math.floor(Math.random() * 3);
                 return num;
             }


             function reaction() {

                 var zeit = new Date().getTime();
                 var i = 0;


                 while(i < 10) {

                    var zufall = randomFormen();


                    var anzeigen = position(formen[zufall]);

                     /////////////////////////////////////////////////////////////
                     //
                     //             HIER STEHENGEBLIEBEN
                     //
                     /////////////////////////////////////////////////////////////


                     document.getElementById(formen[zufall]).onclick = function() {
                         document.getElementById(formen[zufall]).style.display = "none";
                         i++;


                     }


                 }

                 zeit = (zeit - new Date().getTime()) / 1000;

                 return(zeit);
             }

             document.getElementById("btn_start").onclick = function() {

                 document.getElementById("zeit").innerHTML = "GO!";

                 document.getElementById("kreis").style.display = "none";
                 document.getElementById("quadrat").style.display = "none";
                 document.getElementById("dreieck").style.display = "none";


                 var spielzeit = reaction();

                 document.getElementById("zeit").innerHTML = document.getElementById("zeit").innerHTML + spielzeit;

             }


         </script>

   </body>

</html>