Make custom timer reappear even after page refreshed | XM Community
Question

Make custom timer reappear even after page refreshed

  • 19 November 2020
  • 2 replies
  • 15 views

I created a custom timer using JS that goes across all the pages of questions in the block. Participants see the timer as they answer questions on all 9 pages and then after 5 min, they are automatically advanced to the next block. I have the code below on Page 1 and each subsequent page has only a "display if timeRemaining greater than 0." My issue is that since the timer code is only on the first page, if participants (for whatever reason) refresh the page on pages 2 to 9, the timer will disappear and they will not be autoadvanced in my survey. They are trapped in on that page. What can I do to make sure if they refresh on pages 2 to 9 that the timer will reappear, keep counting and auto-advance them once 5 minutes is up?

This is my code for the first page

Qualtrics.SurveyEngine.addOnload(function()

{


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: 03:00"; 

	

header.appendChild(timer);

document.body.insertBefore(header, 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; 

	Qualtrics.SurveyEngine.setEmbeddedData('timeRemaining', timer);

if (--timer < 0) { 

 clearInterval(myTimer); 

 timeOver(); 

 } 

 }, 1000); 

 } 

 var timerSeconds = 180, 

 display = document.querySelector('#time'); 

 startTimer(timerSeconds, display); 

 var timeOver = function() { 

 $('NextButton').click();

 document.getElementById("timer_1").innerHTML = ""; 

 x = 1; 

 var bgColor = setInterval(change, 1000); 

 } 


});

 

Qualtrics.SurveyEngine.addOnReady(function()

{

});


Qualtrics.SurveyEngine.addOnUnload(function()

{

	/*Place your JavaScript here to run when the page is unloaded*/


});



2 replies

Userlevel 7
Badge +22

You need to keep storing the current time in some embedded data or some hidden qualtrics text entry box and use this value to start timer on subsequent questions.

Badge +2

What code would you use to keep storing the current time in some embedded data or some hidden qualtrics text entry box and use this value to start timer on subsequent questions?

Leave a Reply