Javascript - Make the Timer Dissapear after clicking Next | XM Community
Skip to main content

Hi all,
I'm very newbie to Javascript as I never create something very complicated before. So, your guidance is greatly appreciated.
I have two questions within a block. I have activated "advanced randomisation" to randomly show these two questions one at a time (this is a must in my experiment). Thanks to other Qualtrics members, I have found a Javascript timer (set to 1 minute) and auto-advance after 1 minute (code is provided below).
When I used the code below, one problem is that if the participant decides to submit their answer for the first question before 60 seconds, the javascript below seems to continue with the previous time. I wish that the time to be restarted back to 60 seconds when the participants click next and auto-submit within 60 seconds (i.e., move on to the next question).
Let me know if you can help me with this :)
Thanks.
David

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: 00:10";  
 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';
   displayytext] = minutes + ":" + seconds;  
   if (--timer < 0) {  
    clearInterval(myTimer);  
    timeOver();  
   }  
  }, 1000);  
 }  
    
 var timerSeconds = 60,  
 display = document.querySelector('#time');  
 startTimer(timerSeconds, display);  
 var timeOver = function() {  
    
     document.getElementById("timer_1").innerHTML = "";
     Qualtrics.SurveyEngine.setEmbeddedData("blockTimeFlag", "1");    
     $('NextButton').click();}
    

});

Just given the description of the desired behaviour, I would suggest just using the normal Timer question and setting it to one minute. Then, instead of using "Advanced Randomization" (within questions/blocks or however you have it set up), use Survey Flow's Randomizer element and set each question in a separate block with a separate timer question.

If that does not work, more details about what you want to achieve and your restrictions would be helpful.


Leave a Reply