How to use automatically move respondents in Qualtrics with global timer for Block with multiple page break?

Question

.header-cont {  
   width:100%;  
   position:fixed;  
   top:0px;  
   z-index:1000;
 }  
 .header {  
   height:auto;  
   background:#FFFFFF;  
   width:100%;  
   top: 0px;
	margin:0px auto;
   position:fixed;
	 z-index:1000;
 }  
 .timer{  
   width: 500px;  
   margin: auto;  
   text-align: center;  
   vertical-align: middle;  
   line-height: 50px;       
   font-size: 28px;  
 }

in my Survey I have multiple questions separated with page break in the block, I want to use the same timer for the entire questions, even though the questions will displays at different pages. I have sample code that can count but nothing happened after the timer is over. the result is not auto submitted. after the timers is up I want to redirect the users to answer some bio questions.

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: <span id='time'>02:00</span>"; 
	
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 = 120,  
 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);  
 }  

});

Answer 1

You can pass the time remaining from one page to the next using an embedded data variable, and you can use the embedded data variable in question display logic so that once time is up, you don't display the remaining questions. You can advance to the next page by clicking the next button.

In your survey flow initialize the embedded data variable timeRemaining before the question block:

timeRemaining = 120

Then in your code timerSeconds gets set to timeRemaining:

var timerSeconds = parseInt("${e://Field/timeRemaining}");

In your startTimer function, update timeRemaining:

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

Then at the end of your timeOver function go to the next page:

$('NextButton').click();

Your display logic on all questions except the first:

if timeRemaining > 0

Copy your script to the first question on each page in the block.