Reaktions test

Teste deine Reaktion ob du noch Fahrtüchtig bist

Der hier verwendete Code

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Speed Test</title> <!-- INCLUDE BOOTSTRAP --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- INCLUDE GOOGLEAPIS FOR FONT --> <link href="https://fonts.googleapis.com/css?family=Gaegu|Londrina+Sketch|Tenali+Ramakrishna" rel="stylesheet"> <!-- INCLUDE CSS --> <style> .text_container{ text-align: center; font-family: 'Tenali Ramakrishna', sans-serif; margin-top: 10px; } #textspeed{ font-family: 'Londrina Sketch', cursive; font-size: 3rem; } hr{ align: center; width: 70%; } .main_container{ height: 200px; width: 100%; background: #eee; border: 2px #aaa solid; } .main_container__instruction{ text-align: center; font-size: 3em; color: purple; } .btn_container{ text-align: center; margin-bottom: 10px; } /* .btn{ margin: 10px 10px; padding: 8px 0 25px 0; background-color: white; outline: none; border-color: lightblue; border-radius: 20px; width: 100px; height: 30px; border: 2px solid lightblue; text-decoration: none; text-shadow: 3px 3px 3px #aaa; transition: all .1s .1s; } */ /* .btn:hover{ background-color: lightblue; color: white; text-shadow: 1px 1px 1px #fff; transform: translateY(-2px) scale(1.1); } */ .start_btn{ } .stop_btn{ } .showResults, .reflex{ height: 30px; /* Minimum heigth to avoid div movement when text is inserted */ text-align: center; margin-top: 20px; } </style> </head> <body> <!-- Bootstrap NavBar--> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="#">Speedtest</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Credits</a> </li> </ul> </div> </nav> <!-- End of Bootstrap Navbar --> <div class="text_container"> <h1 id="textspeed">SPEED TEST</h1> <hr> <p>This is a test on <em>nervous</em> speed: click START to start the test, wait for the instructions on the display and click when "CLICK!" appears. <br> Bear in mind that <strong>CLICK! will appear at a random point in time</strong>, it can be immediately after the countdown or later, so brace yourself! <br> Your result will be displayed below and you can start the game as much times you want. <br> <br> Give it a try! </p> </div> <div class="btn_container"> <button type="button" class="btn btn-outline-primary start_btn">START</button> <button type="button" class="btn btn-outline-danger stop_btn">RESET</button> </div> <div class="main_container"> <p class="main_container__instruction"> </p> </div> <div class="showResults"> </div> <div class="reflex"> </div> <!-- Footer --> <footer class="page-footer font-small teal"> <!-- Copyright --> <div class="footer-copyright text-center py-3">© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/"> MOld Engineering</a> </div> <!-- Copyright --> </footer> <!-- Footer --> <!-- INCLUDE SCRIPT TO JS FILE --> <script> var startBtn = document.getElementsByClassName("start_btn"); var stopBtn= document.getElementsByClassName("stop_btn"); var clickSpace = document.querySelector(".main_container"); var showInstructions = document.querySelector(".main_container__instruction"); var showResults = document.querySelector(".showResults"); var list = document.querySelector(".list") var reflex = document.querySelector(".reflex") var instructions = ["READY?", "3", "2", "1", "Click when NOW! appears"]; var results = []; var flag = false; var startTime = 0; var stopTime = 0; var d = new Date(); var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; startBtn[0].addEventListener("click", function(){ setTimeout(function(){ console.log('READY?'); showInstructions.innerHTML = 'READY?'; setTimeout(function(){ console.log('-- 3 --'); showInstructions.innerHTML = '-- 3 --'; setTimeout(function(){ console.log('-- 2 --'); showInstructions.innerHTML = '-- 2 --'; setTimeout(function(){ console.log('-- 1 --'); showInstructions.innerHTML = '-- 1 --'; setTimeout(function(){ showInstructions.innerHTML = ''; //Function for random CICK! time setTimeout(function(){ console.log('CLICK NOW!'); now(); flag = true; youCanClick(); }, Math.floor(Math.random()*10000+1)); //end of function }, 1000); }, 1000); }, 1000); }, 1000); }, 1000); }); stopBtn[0].addEventListener("click", function(){ results = []; showResults.innerHTML = results; reflex.innerHTML = ""; }) //Function that set and reset the display to tell when to click function now(){ showInstructions.innerHTML = 'CLICK!'; startTime = Date.now(); setTimeout(function(){ showInstructions.innerHTML = ''; }, 350); } function youCanClick(){ //Event handler on CLICK clickSpace.onclick = function(){ if (flag){ stopTime = Date.now(); var total = stopTime-startTime; reflex.innerHTML = reflexType(total); // showResults.innerHTML = "Today " + d.getDate() + " of " + months[(d.getMonth()+1)] + " you clicked with a delay of " + (total)+ " ms!"; flag = false; results.push(total); console.log(results); for (var i = 0 ; i <= results.length; i++){ console.log(results[i]); showResults.innerHTML = results+" (ms)"; }; }; }; } function reflexType(n){ if (n < 300){ return "EXCELLENT reflexes! You're age must still be under 30yo..." }else if (n>300 && n < 400){ return "Pretty GOOD!" } else if (n>400 && n < 600){ return "Your reflexes are a little SLOW" } else { return "Damn, You must be drunk..." } } </script> <!-- INCLUDE SCRIPT FOR BOOTSTRAP --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!