How to ensure a Javascript code for timer with auto-advancing function works only in one block? | XM Community
Question

How to ensure a Javascript code for timer with auto-advancing function works only in one block?

  • 6 January 2020
  • 4 replies
  • 173 views

Badge +1
My survey has a Quiz section and a questionnaire section. The Quiz section is 1 block with several pages. I wanted to set a timer only in the Quiz block with an auto-advancing function.
I followed the steps and Javascript found in a discussion post (https://www.qualtrics.com/community/discussion/7656/how-to-implement-a-time-limit-at-the-block-level-plus-auto-advancing). I inserted the Javascript in the first question of my Quiz block. The timer and auto-advance function work perfectly fine.

But the problem is, the Timer count-down continues even after the Quiz block. It means if someone finishes the quiz earlier than the time limit, still the count-down continues to show up in all the following questionnaire blocks. Therefore when the time is up, the page auto-advances during the questionnaire block. To prevent this, I insert a force response feature to most of the questions in my questionnaire block. However, due to some display logic, I cannot put force responses to all the questions. Therefore there is a risk of losing answers in the questionnaire block.

The Javascript I used is provided below. I wonder what I should do to make sure that the timer and auto-advance function works only in the Quiz block, not across all the following blocks? I do not have any knowledge of programming. If someone can kindly suggest any solutions that would be a great help!



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'>00:10</span>";

header.appendChild(timer);
document.body.insertBefore(header, document.body.firstChild);

function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var myTimer = setInterval(function() {
Qualtrics.SurveyEngine.setEmbeddedData('timeRemaining', timer);
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 = parseInt("${e://Field/timeRemaining}");
display = document.querySelector('#time');
startTimer(timerSeconds, display);
var timeOver = function() {
document.getElementById("timer_1").innerHTML = "Time is up.";

$('NextButton').click();
}
});

4 replies

I'm looking for same custom functions

I have the same problem.

Userlevel 7
Badge +27

The problem is that the interval is only cleared if time is up. It always has to be cleared when you leave the page. Once that is fixed, the script needs be executed on each page in the block, not just the first page in the block.

Badge

TomG Can you please show how this needs to be executed using code? Newbies like myself have no idea what you just said or how to execute it!

Leave a Reply