I have one block with the following code, which creates a countdown timer from 5 to zero with force advance. I have an embedded variable called blockTimeFlag, which is set to zero and displayed before this block. So the variable changes from 0 to 1 when the timer is up, then it auto advances when I set the question to display only if blockTimeFlag is set to 0.
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'>0:00</span>";
headerCont.appendChild(header);
header.appendChild(timer);
document.body.insertBefore(headerCont, document.body.firstChild);
function startTimer(duration, display) {
var timer = duration, seconds;
var myTimer = setInterval(function() {
seconds = parseInt(timer % 5, 10);
seconds = seconds < 10 ? "0" + seconds : seconds;
var text = ('innerText' in display)? 'innerText' : 'textContent';
display[text] = "0" + ":" + seconds;
if (--timer < 0) {
clearInterval(myTimer);
timeOver();
}
}, 1000);
}
var timerSeconds = 5,
display = document.querySelector('#time');
startTimer(timerSeconds, display);
var timeOver = function() {
Qualtrics.SurveyEngine.setEmbeddedData("blockTimeFlag", "1");
document.getElementById("timer_1").innerHTML = "Your time has run out!";
$('NextButton').click();
Element.remove(headerCont)
}
{ jQuery("#"+this.questionId).hide();
this.clickNextButton();
}
});
This block is displayed first. The next block is a multiple choice question with loop and merge on, so it loops over a few questions based on the loop and merge field. The code below is added to force auto advance when a selection is made.
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'>0:00</span>";
headerCont.appendChild(header);
header.appendChild(timer);
document.body.insertBefore(headerCont, document.body.firstChild);
function startTimer(duration, display) {
var timer = duration, seconds;
var myTimer = setInterval(function() {
seconds = parseInt(timer % 5, 10);
seconds = seconds < 10 ? "0" + seconds : seconds;
var text = ('innerText' in display)? 'innerText' : 'textContent';
display[text] = "0" + ":" + seconds;
if (--timer < 0) {
clearInterval(myTimer);
timeOver();
}
}, 1000);
}
var timerSeconds = 5,
display = document.querySelector('#time');
startTimer(timerSeconds, display);
var timeOver = function() {
Qualtrics.SurveyEngine.setEmbeddedData("blockTimeFlag", "1");
document.getElementById("timer_1").innerHTML = "Your time has run out!";
$('NextButton').click();
Element.remove(headerCont)
}
{ jQuery("#"+this.questionId).hide();
this.clickNextButton();
}
});
This code works great except for one glitch, if someone selects a choice AT THE SAME TIME as when the timer goes to 0, the remaining questions in the field are still displayed. It just continues on with the loop.
Is the function in the first block being interrupted and taken over by the current MCQ block code?