Sending a key methods

Question

Hi I've heard different solutions on a problem that I've been hitted, I will explain what I want to do and what I'm working on. I'm working on a "reaction test" and basiclly what you're going to do is press on two buttons when you see a figure pops up either B or R. So but the problem is that somehow I need to send which key that was pressed to a "result file" without showing the user during the test. I have heard that you can do it with cookies, you can use input type hidden and send it to next page, you can use document.write, createelement or just use the GET and POST method. So my question is how should I do it, which way and I wouldn't cry if I could get some help with the code to. I know HTML, CSS, jQuery and JavaScript, I don't want any PHP solutions. Here is three pages so you can know what it looks like, the first two is almost desamme just different colors and shapes so I will just use one of those pages.

Input hidden test.html || Input hidden test 1.html:

<!DOCTYPE html>
<html>
<head>
<title>Input hidden test</title>
<style>
#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: 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>

<button id="first-parent" onclick="">B</button>
<button id="second-parent" onclick="">R</button>
<br />
<p>1/2</p>
<script>
document.onkeypress = function(e) {
   e = e || window.event;
   var charCode = e.charCode || e.keyCode,
       character = String.fromCharCode(charCode);

   console.log(charCode);
   window.location.href="Input hidden test 1.html";
};
</script>
</html>

Input hidden test 2.html:

<!DOCTYPE html>
<html>
<head>
<title>Input hidden test 2</title>
<style>

</style>
</head>
<body>

<script>

</script>
</html>

And that's it more or less, if there is any questions just ask, peace !

*"*send which key that was pressed to a "result file""* Where would said result file reside? — Kevin B, Feb 04 '15 at 21:59
@Kevin B Oh sorry about that I must've missed it the result file is "Input hidden test 2.html" — Nikki, Feb 04 '15 at 22:05
so, you want the result of this action, to be displayed when the user reaches the second file, correct? In that case localstorage, cookies, or querystring (in that order) would be good storage options for storing which key was pressed. the second page would then need to read from whichever option you chose to display it. — Kevin B, Feb 04 '15 at 22:07
Yeah when the user finished the whole test it will come to a result page which in this case is Input hidden test 2.html. Would you mind help me with the code, I have'nt been working with localstorage, cookies or querystring before — Nikki, Feb 04 '15 at 22:13

score 1 · Accepted Answer · answered Feb 05 '15 at 00:32

Final Answer to your Question

Test1.html

<!DOCTYPE html>
<html>
<head>
<title>Input hidden test</title>
</head>
<body>

<div>
    <h1>1. Who is the president of America?</h1><br/>
    A) Bush <br />
    B) Obama <br />
    C) Clinton <br />
    D) yourself .
</div>

<p>1/2</p>



<script>
document.onkeypress = function(e) {
    e = e || window.event;
   var charCode = e.charCode || e.keyCode,
       character = String.fromCharCode(charCode);
    var answer;
       if((e.keyCode>64 && e.keyCode<69)||(e.keyCode>96 && e.keyCode<101) ){
       if(e.keyCode==65 || e.keyCode==97){
            answer='A';
       } else if(e.keyCode==66|| e.keyCode==98){
            answer='B';
       }else if(e.keyCode==67|| e.keyCode==99){
            answer='C';
       }else if(e.keyCode==68|| e.keyCode==100){
            answer='D';
       }
       localStorage.setItem("keypressed","");
            localStorage.setItem("keypressed","<h1>1. Who is the president of America?</h1><br /> your Answer :" +answer +"<br />Correct Answer :  B<br />");
            window.location.href="test1.html";
            return true;
       }
       else{
            alert("press A or B or C or D");
            return false;
       }

};
</script>
</html>

Test2.html

<!DOCTYPE html>
<html>
<head>
<title>Input hidden test</title>

</head>
<body>

<div id="first-child"></div>

<button id="first-parent" onclick="">B</button>
<button id="second-parent" onclick="">R</button>
<br />

<div>
    2. Who is the princess of Sweden?
    A) mary <br />
    B) jones <br />
    C) You <br />
    D) Someone .
</div>

<p>2/2</p>



<script>
document.onkeypress = function(e) {
    e = e || window.event;
   var charCode = e.charCode || e.keyCode,
       character = String.fromCharCode(charCode);
    var answer;
       if((e.keyCode>64 && e.keyCode<69)||(e.keyCode>96 && e.keyCode<101) ){
       if(e.keyCode==65 || e.keyCode==97){
            answer='A';
       } else if(e.keyCode==66|| e.keyCode==98){
            answer='B';
       }else if(e.keyCode==67|| e.keyCode==99){
            answer='C';
       }else if(e.keyCode==68|| e.keyCode==100){
            answer='D';
       }
      var res= localStorage.getItem("keypressed");
      res+="<h1>2. Who is the princess of Sweden?</h1><br /> your Answer :" +answer +"<br />Correct Answer :  C <br />";
            localStorage.setItem("keypressed",res);
            window.location.href="result.html";
            return true;
       }
       else{
            alert("press A or B or C or D");
            return false;
       }

};
</script>
</html>

RESULT.HTML

<!DOCTYPE html>
<html>
<head>
<title>Input hidden test 2</title>
<style>

</style>
</head>
<body>
<div id="result"></div>
<script>
var result= localStorage.getItem("keypressed");
document.getElementById('result').innerHTML= result;
//alert(result);
</script></html>

Hi I got one more question if you don't mind ? It's not related to this question but is it possible to take the time from that moment when the css animation stops until someone presses either B or R. And then send the time with the other results at the same time ? You know what I mean ? — Nikki, Feb 07 '15 at 19:58
Do you mean timer to be placed to write the test and should stop the timer say 30 mins for exam and time will be reducing — Nadeemmnn Mohd, Feb 07 '15 at 21:15
Yeah something like that I think I have asked another question so if you want you can look at that instead http://stackoverflow.com/questions/28395977/take-time-in-microseconds-between-two-functions — Nikki, Feb 08 '15 at 15:55

Nadeemmnn Mohd · Answer 2 · 2015-02-04T22:48:17.883

0

In test1.html

<script>
document.onkeypress = function(e) {
   e = e || window.event;
   var charCode = e.charCode || e.keyCode,
       character = String.fromCharCode(charCode);

   console.log(charCode);
    localStorage.setItem("keypressed",charCode);// adding keypressed
   window.location.href="Input hidden test 1.html";
};
</script>

test2.html

<!DOCTYPE html>
<html>
<head>
<title>Input hidden test 2</title>
<style>

</style>
</head>
<body>
<div id="result"></div>
<script>
var result= localStorage.getItem("keypressed");
document.getElementById('result').innerHTML= result;
//alert(result);
</script></html>

edited Feb 04 '15 at 22:48

answered Feb 04 '15 at 22:32

Nadeemmnn Mohd

713
5
14

It worked ! But one question is it possible to write it instead of alerting and save it there or something ? – Nikki Feb 04 '15 at 22:38
you have the value in result variable you can use it in your test2.html page – Nadeemmnn Mohd Feb 04 '15 at 22:41
in chorme press f12 and there is resources tab in that you can find Local Storage in left hand side you can see what localstorage values are been preseved.key pair values will be stored. – Nadeemmnn Mohd Feb 04 '15 at 22:44
Yeah I can see it but when I presses the key again it dissipers – Nikki Feb 04 '15 at 22:46
have updated the code to show the result in div if you find my answer proper rate it:) – Nadeemmnn Mohd Feb 04 '15 at 22:52
Of course, but I need to save the key that was pressed into the result file, so the result won't dissipear until the user exits the browser :p – Nikki Feb 04 '15 at 22:57
i understood what you are trying to do..replace localStorage with sessionStoragebin test1 and test2 pages – Nadeemmnn Mohd Feb 04 '15 at 23:04
I have no idea but more like send it to the result page and make like a list or something because it will be more than 1 exercise so I need it to keep building on the list until the test is done – Nikki Feb 04 '15 at 23:09
When do you want to see the result.. i mean see for example you can press different keys on document we will store it in localstorage but when do you want to see the result? on click of Button R click or or on click of B click? – Nadeemmnn Mohd Feb 04 '15 at 23:19
It's the same thing, but it's a reminder if the user don't remember which key that they was supposed to press and it redirects to next page – Nikki Feb 04 '15 at 23:23
can you be bit clear what you are trying to achieve. – Nadeemmnn Mohd Feb 04 '15 at 23:25
Yeah I want to see the results at the end of the whole test, the original is 50 files so after those 50 files it will show how he/she did on the test. So when you have pressed a key in the first file it will send the key to the last page after the 50 tests and save it there so that the user can see how she or he did – Nikki Feb 04 '15 at 23:32
For example this is a adhd test and after the test you can see the results,, the only different from my test is that it's on diiferent pages and no questions: http://www.healthyplace.com/psychological-tests/adult-adhd-test/ – Nikki Feb 04 '15 at 23:50

score 0 · Answer 3 · answered Feb 04 '15 at 22:38

I would use local storage. It is very easy, you just need to write the measured time in the first file as localStorage.setItem("measuredTime",measuredTime+"") (you can place only strings in the local storage). First parameter is the identifier, second parameter is the value. To retrieve the value in the second file, you have to use localStorage.getItem("measuredTime"). The value will be acessible from the whole domain. You can store up to 5MB

Also, I think you will need to measure the time it takes the user to press the button. Probably the easiest way is to use somevariable = new Date().getTime(), as it returns the number of miliseconds from the beginning of the unix epoch (1/1/1970). You can use this once when displaying the figures and then the second time when the user presses the button. The difference between the two numbers is the reaction time.

Also, the random() function and setTimeout() will be useful for displaying the figures at a random time.

Sending a key methods

3 Answers3