Adding one Timer Across Multiple Loop and Merge Pages | XM Community
Skip to main content

Hi there,
I am programming a study where participants go through a loop and merge block within a certain time frame. When they reach the end of the time (5 minutes) they are advanced to the next block.
I want to have a timer on the top of the page that tells participants how much time they have remaining until they are advanced past the loop and merge block to the next block. So far, I've used the following code (taken from previous posts -- thank you!!), and I've customized it each time the page updates to the next loop and merge, the timer doesn't reset (see timerSeconds). However, the issue that I am running into here is that an additional timer appends to the existing timer each time I advance past one page of the loop and merge -- so at the 7th loop, I have 7 timers.
Here is the code I am working with:
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: 07:30"; 

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;  
   if (--timer < 0) {  
    clearInterval(myTimer);  
    timeOver();  
   }  
  }, 1000);  
 }  
 var timerSeconds = 450-elapsed,  
 display = document.querySelector('#time');  
 startTimer(timerSeconds, display);  
 var timeOver = function() {  
  document.getElementById("timer_1").innerHTML = "Time is up.";  
  x = 1;  
  var bgColor = setInterval(change, 1000);  
 }  

Any help to make it so that I have ONE timer across multiple loop and merge pages would be great! Thank you!!

Be the first to reply!

Leave a Reply