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>