Hi all,

I am trying to create the following experiment in Qualtrics:

Participants see a word on the screen until they press space. Then, the participants respond to a text entry question. From the moment the first word is shown on the screen a timer starts to run. Participants have 30 seconds to finish the whole cycle (look at the word, press space, fill in the text entry question), after 30s the question autoadvances and the next block is started (but participants can also just click the next button on the second screen before they run out of time) If the participants never press space to go to the second screen before they run out of time, they are still sent to the next block.

I found the following code online to create a timer in JS that remains active across multiple screens: 

Qualtrics.SurveyEngine.addOnload(function()
{
    var headerCont = document.createElement("div");  
 headerCont.className = "header-cont";  
 headerCont.id = "header_container";  
 var header = document.createElement("div");  
 header.className = "header"  
 header.id = "header_1";  
 var timer = document.createElement("div");  
 timer.className = "timer";  
 timer.id = "timer_1";  
 timer.innerHTML = "Time Remaining: <span id='time'>00:10</span>";  
 headerCont.appendChild(header);  
 header.appendChild(timer);  
 document.body.insertBefore(headerCont, document.body.firstChild);
function startTimer(duration, display) {  
  var timer = duration, minutes, seconds;  
  var myTimer = setInterval(function() {  
   minutes = parseInt(timer / 60, 10)  
   seconds = parseInt(timer % 60, 10);  
   minutes = minutes < 10 ? "0" + minutes : minutes;  
   seconds = seconds < 10 ? "0" + seconds : seconds;  
   var text = ('innerText' in display)? 'innerText' : 'textContent';
   display?text] = minutes + ":" + seconds;  
   if (--timer < 0) {  
    clearInterval(myTimer);  
    timeOver();  
   }  
  }, 1000);  
 }  
    
 var timerSeconds = 10,  
 display = document.querySelector('#time');  
 startTimer(timerSeconds, display);  
 var timeOver = function() {  
     
     document.getElementById("timer_1").innerHTML = "";
     Qualtrics.SurveyEngine.setEmbeddedData("blockTimeFlag", "1");    
     $('NextButton').click();}  
 

});

This code works in that it gives me a timer that remains active across multiple screens, but the problem is that at the end of each block, the timer should be reset, which now isn’t the case: the remaining time from the timer in the first block is carried over to the second block and I basically have two timers in the second block. How can I make sure that this doesn’t happen? I guess I would need to reset the clock at the end of each block, but I don’t know how since I do not know how to program in JS. Could someone help me out with this?

Thanks!