store time between start of page and keypress

Question

Hello,

I am trying to program a cheating task: a participant has to sum an equation and provide the answer to the sum in a textbox that they can activate by spacebar. But the answer is "accidentally" shown after a few seconds, so they could cheat and view the answer before they press the spacebar.

We would like to measure the time until the spacebar is pressed. Here is the code I have so far, put together from various examples across the wiki - the error seems to be in the if condition, i've annotated it, but i don't understand why saving the time doesn't work in that spot :) I would appreciate any help, thanks!

<h1>15+16+-12-18+19</h2>
<h1 id="the_answer">42</h1>

(TX01)
(IN01)

    <script type="text/javascript">
<!--
var frage = document.getElementById("TX01_qst");  // HTML-ID der Texteingabe
frage.style.display = "none"; 

var answer = document.getElementById("the_answer"); //this one is defined in the html above 
answer.style.display = "none"; 

var timeStart = new Date(); //this correctly saves the current timestamp (checked)


document.addEventListener('keydown', function(event) {
    if(event.keyCode == 32) {   // space bar down
        frage.style.display = ""; //makes the question appear
        answer.style.display = "none"; //makes the answer disappear even if it had appeared for other reasons
        var now = new Date();       //this should save the current timestamp when the key is pressed but does not work
        }
});
 

// Function to show answer (ONLY if question is not displayed (i.e. has been activated by keypress)
function showanswer() {
   if(frage.style.display == "none") {
answer.style.display = "";
document.getElementById("IN01_02").value = "1";
}
else {
document.getElementById("IN01_02").value = "0";
}
}
// Initialization of forwarding
SoSciTools.attachEvent(window, "load", function(evt) {
  window.setTimeout(showanswer, 3000);
});

var time_untilspace = Math.floor((now.getTime() - timeStart.getTime()) / 1000);  // this one should calculate the time passed between start of the task and the keypress (does not work because the time is not saved in the keypress if condition probably

// saving the variable 
var input = document.getElementById("IN01_01");
input.value = time_untilspace;



// -->
</script>

Answer 1

Okay, looks like a start :) Often, JavaScript problems are just a missing semicolon or similar stuff, you don't see easily. So the first steps are:

(1) Find the error console of your browser and check for errors: JS Troubleshooting

(2) Add console.log() at some locations to check if a method/function is run at all.

function showanswer() {
   console.log("showanswer");
   if(frage.style.display == "none") {
   ...

(3) If that does not yet solve the problem, post a pretest-URL directly (!) to the page with the JavaScript code. Then we can take a look.

Comments

i tried the JS Troubleshooting, and the log I got was "var now undefined" - i thought maybe i am making a mistake defining the var called now in the if loop,  so i moved it to the beginning of the code and set it as 0 just to make sure it stores.

i tested and it stores the 0, but once i try to overwrite the 0 with the current date, the code fails and the log reads "TypeError: now.getTime is not a function"

here is the pretest url: https://www.soscisurvey.de/MA_Annaa/?act=v04TIaJB97ThsGRO6XEL3SuR

I set it up in the debug option, please let me know if you require otherwise.

Update: in the meantime I have found out that apparently the calculation of time needs to be move because the code is read through before the spacebar happens; i will move the variable calculation up into the if loop and see if that fixes the error!

Update2: that fixed it!

Answer 2

the final code:

<script type="text/javascript">
    
    <!--
    var frage = document.getElementById("TX01_qst");  // HTML-ID der Texteingabe
    frage.style.display = "none"; 
    
    var answer = document.getElementById("the_answer"); //this one is defined in the html above 
    answer.style.display = "none"; 
    
    var timeStart = new Date(); //this correctly saves the current timestamp (checked)
    var now = "0";
    
    document.addEventListener('keydown', function(event) {
        if(event.keyCode == 32) {   // space bar down
            frage.style.display = "";   //makes the question appear
            answer.style.display = "none";   //makes the answer disappear even if it had appeared for other reasons
            now = new Date();       //timestamp when the key is pressed 
    		var time_untilspace = Math.floor((now.getTime() - timeStart.getTime()) / 1000);  // time between start and keypress, in seconds rounded 
    		// saving the variable:
    		var input = document.getElementById("IN01_01");
    		input.value = time_untilspace;     
    		 }
    });
     
    
    // Function to show answer (ONLY if question is not displayed (i.e. has been activated by keypress)
    function showanswer() {
    	if(frage.style.display == "none") {
    		answer.style.display = "";
    		document.getElementById("IN01_02").value = "1";
    		}
    	else {
    		document.getElementById("IN01_02").value = "0";
    		}
    }
    // Initialization of forwarding
    SoSciTools.attachEvent(window, "load", function(evt) {
      window.setTimeout(showanswer, 3000);
    });
    
    
    
    // -->
    </script>