Problem Implementing Timing at Block Level | XM Community
Skip to main content

Hi all, 

I have never used JavaScript before, so I’m trying to implement Javascript I’ve found from here https://stackoverflow.com/questions/47317718/how-to-use-automatically-move-respondents-in-qualtrics-with-global-timer-for-blo and edits from here

with the goal of creating a 10-minute timer that is visible to the participant and will continue throughout an entire block with page breaks (thus, why I cannot use the native timer function) and will auto-advance participants to the next block once time is up. 

Having never used JavaScript and CSS much, I presume this block of code is meant to go in the Custom CSS section of style (for some reason or another). 

.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;  
 }

Implementing the JavaScript is where I believe I am running into challenges. First, I added an embedded data variable above the block I plan to use the timer on, with the title ‘timeRemaining’ and set it equal to 6000 (the number of seconds I would need for 10 minutes). 

Directly after that embedded data, I have the block I want to time. I have 10 text entry questions, each paired with its own timing question (so I can see how much time participants spend on each page), and each pair of timing question and text entry question has a page block in between it. Below is a visual example using the first and second question. You can also see that the first question on each page has the Javascript applied to it, and every question after the first has display logic that should, theoretically, be preventing it from being displayed if the remaining time is <0. 

Here is where I believe the problem may be: the Javascript itself. I tried to edit it based on the suggestions in the lower half of the link at the top, mostly copying several edits to the Javascript from here: 

To create this Javascript.  

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/
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'>10: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() {
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';
displayttext] = 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();
}

});

And the result of this Javascript whenever I try to test out the block, currently: 

Is that my timer shows this at the top of the screen. It briefly shows Time Remaining: 10:00 and then switches over. The timer does not advance to the next page, nor does the display logic seem to kick in, so it seems that timeRemaining is not decreasing. 

Please, if anybody knows how to fix this code, specifically pointing out where exactly to fix, that would be deeply appreciated. 

TL;DR: Tried to implement the code here 

and am getting a NaN:NaN for no discernable reason, as well as a failure to advance from page to page. I cannot diagnose what is wrong because I don’t know Javascript. If anybody knows how to help, it would be deeply appreciated. 

If you are previewing the block, timeRemaining isn’t set (unless you added it as url parameter), so parseInt("${e://Field/timeRemaining}") returns NaN (not a number).

However, your JS has a major flaw. Assuming Save & Continue is turned on, reloading the page or closing the window, resets the timer back to where it was the first time the page loaded. A respondent could take almost 10 mins per page: 9+ mins, reload, answer questions, next, 9+ mins, reload, answer questions, next, etc.

If you are interested, the countdownTimer function keeps accurate time regardless.

If you are previewing the block, timeRemaining isn’t set (unless you added it as url parameter), so parseInt("${e://Field/timeRemaining}") returns NaN (not a number).

However, your JS has a major flaw. Assuming Save & Continue is turned on, reloading the page or closing the window, resets the timer back to where it was the first time the page loaded. A respondent could take almost 10 mins per page: 9+ mins, reload, answer questions, next, 9+ mins, reload, answer questions, next, etc.

If you are interested, the countdownTimer function keeps accurate time regardless.

Oh, yes, that would be the case. I’m glad it’s only a matter of what I was previewing then, thank you so much! 

I understand the concern about the Save and Continue, but people going through the survey will be doing so supervised in-person, so it should hopefully not be a problem. Once again, much appreciated!

 

Leave a Reply


Terms & Conditions