Hi I have tried different solutions but I can't find what I'm looking for, what I want to do is to take the time in microseconds between two functions. But the problem is first that I need to start the timer right after a css animation has finished, second I need to stop the timer when someone presses either B or R on the keyboard, and third I need to send the time from the timer with the information about which key that was pressed. Here's a code to show what I mean, first one is to call the timer in css:
#first-child {
width: 200px;
height: 200px;
background: white;
border-radius: 100%;
margin-top: 150px;
margin-bottom: 50px;
margin-left: 550px;
margin-right: 0px;
-webkit-animation: myfirst 1s;
-moz-animation: myfirst 1s;
animation: myfirst 1s;
}
@-webkit-keyframes myfirst {
0% {background: white;}
20% {background: white;}
40% {background: white;}
60% {background: white;}
80% {background: white;}
100% {background: red;}
}
@keyframes myfirst {
0% {background: white;}
20% {background: white;}
40% {background: white;}
60% {background: white;}
80% {background: white;}
100% {background: red;}
}
//Call the timer here
And the second is to stop the timer onkeypress:
document.onkeypress = function(e) {
e = e || window.event;
var charCode = e.charCode || e.keyCode,
character = String.fromCharCode(charCode);
//Stop timer here
var answer;
if(e.charCode == 98 || e.keyCode == 98) {
answer = "B";
//Or Stop timer here
} else if(e.charCode == 114 || e.keyCode == 114) {
answer = "R";
//Or stop timer here
} else {
alert("Press B or R to continue");
return false;
And the third is to send the time with the other information:
localStorage.setItem("keypressed", "");
localStorage.setItem("keypressed", "<h3>Test 1</h3>Your Answer: " + answer + "<br />Correct Answer: R<hr>");
//Send the time here
window.location.href="Take time in milliseconds and send it 1.html";
return true;
I thought that maybe if you can take the time and save it in the local storage and send it with the other information. But I don't know how, I'm working on a reaction test and I have 50 different files and one result file. So I'm just going to post two of the test files and the result file so you know what I mean.
Test1.html:
<!DOCTYPE html>
<html>
<head>
<title>Test1</title>
<style>
body {
overflow: hidden;
}
#first-child {
width: 200px;
height: 200px;
background: white;
border-radius: 100%;
margin-top: 150px;
margin-bottom: 50px;
margin-left: 550px;
margin-right: 0px;
-webkit-animation: myfirst 1s;
-moz-animation: myfirst 1s;
animation: myfirst 1s;
}
@-webkit-keyframes myfirst {
0% {background: white;}
20% {background: white;}
40% {background: white;}
60% {background: white;}
80% {background: white;}
100% {background: red;}
}
@keyframes myfirst {
0% {background: white;}
20% {background: white;}
40% {background: white;}
60% {background: white;}
80% {background: white;}
100% {background: red;}
}
#first-parent {
color: blue;
margin-top: 5px;
margin-bottom: 50px;
margin-left: 600px;
margin-right: 0px;
}
#second-parent {
color: red;
margin-top: 0px;
margin-bottom: 50px;
margin-left: 40px;
margin-right: 0px;
}
p {
margin-left: 640px;
}
</style>
</head>
<body>
<div id="first-child"></div>
<div>
<button id="first-parent">B</button>
<button id="second-parent">R</button>
</div>
<br />
<p>1/50</p>
<script>
document.onkeypress = function(e) {
e = e || window.event;
var charCode = e.charCode || e.keyCode,
character = String.fromCharCode(charCode);
var answer;
if(e.charCode == 98 || e.keyCode == 98) {
answer = "B";
} else if(e.charCode == 114 || e.keyCode == 114) {
answer = "R";
} else {
alert("Press B or R to continue");
return false;
}
localStorage.setItem("keypressed", "");
localStorage.setItem("keypressed", "<h3>Test 1</h3>Your Answer: " + answer + "<br /> Correct Answer: R<hr>");
window.location.href="Take time in milliseconds and send it 1.html";
return true;
};
</script>
</body>
</html>
Test2.html:
<!DOCTYPE html>
<html>
<head>
<title>Test2</title>
<style>
body {
overflow: hidden;
}
#first-child {
width: 200px;
height: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 50px;
margin-left: 550px;
margin-right: 0px;
-webkit-animation: myfirst 1s;
-moz-animation: myfirst 1s;
animation: myfirst 1s;
}
@-webkit-keyframes myfirst {
0% {background: white;}
20% {background: white;}
40% {background: white;}
60% {background: white;}
80% {background: white;}
100% {background: blue;}
}
@keyframes myfirst {
0% {background: white;}
20% {background: white;}
40% {background: white;}
60% {background: white;}
80% {background: white;}
100% {background: blue;}
}
#first-parent {
color: blue;
margin-top: 5px;
margin-bottom: 50px;
margin-left: 600px;
margin-right: 0px;
}
#second-parent {
color: red;
margin-top: 0px;
margin-bottom: 50px;
margin-left: 40px;
margin-right: 0px;
}
p {
margin-left: 640px;
}
</style>
</head>
<body>
<div id="first-child"></div>
<div>
<button id="first-parent">B</button>
<button id="second-parent">R</button>
</div>
<br />
<p>2/50</p>
<script>
document.onkeypress = function(e) {
e = e || window.event;
var charCode = e.charCode || e.keyCode,
character = String.fromCharCode(charCode);
var answer;
if(e.charCode == 98 || e.keyCode == 98) {
answer = "B";
} else if(e.charCode == 114 || e.keyCode == 114) {
answer = "R";
} else {
alert("Press B or R to continue");
return false;
}
var res = localStorage.getItem("keypressed");
res+= "<h3>Test 2</h3>Your Answer: " + answer + "<br /> Correct Answer: B<hr>";
localStorage.setItem("keypressed", res);
window.location.href="Take time in milliseconds and send it 2.html";
return true;
};
</script>
</body>
</html>
Result.html:
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<style>
</style>
</head>
<body>
<div id="result"></div>
<script>
var result = localStorage.getItem("keypressed");
document.getElementById("result").innerHTML = result;
</script>
</body>
</html>
So then again I need to take time in microseconds between two different functions and then send it to the result page, I know HTML, JavaScript and jQuery so no PHP solutions and if there's any questions just ask, peace !
UPDATE I really need some help with this, I have been searching everywhere but I can't find anything ! Any idea someone ?
