Stopping timer at end of block using javascript

Question

I am new to this. I have a Qaultrics survey consisting of different blocks; each block with its own timer. What I want to achieve is the following; if participants complete the first block before the given time, the timer on that block will be cleared as they move to the next block where a new timer would start. In the following block, a new timer needs to start. Any assistance would be greatly appreciated.

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'>01:00</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 = 60,  
display = document.querySelector('#time');  
startTimer(timerSeconds, display);  
var timeOver = function() {  
 document.getElementById("timer_1").innerHTML = "";}
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
 clearInterval(myTimer); 
 clearInterval(timer);
 clearInterval(timer_1);
 document.getElementById("timer_1").innerHTML = "";
  });

Answer 1

Here is what I did;

On the first question I used the following code

```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'>02: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 = 130,  
 display = document.querySelector('#time');  
 startTimer(timerSeconds, display);  
var timeOver = function() {  
  document.getElementById("timer_1").innerHTML = "";}
  });```

Then in the last question in the block, I used the following code

    {
    Qualtrics.SurveyEngine.addOnPageSubmit(function() {
        Qualtrics.SurveyEngine.setEmbeddedData('timeRemaining',timer);
        clearInterval(myTimer); // fairly certain this isn't doing anything
        }); 

    });

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/

});


Qualtrics.SurveyEngine.addOnUnload(function() {
        document.getElementById("header_container").remove();
    });```