Custom timer for block with page breaks | XM Community
Solved

Custom timer for block with page breaks

  • 12 June 2023
  • 2 replies
  • 109 views

Userlevel 2
Badge +4

Hi

 

I have this code which is intended to add a timer. It should allow 60 seconds for a block to be completed before moving on automatically. The respondents should be able to see the timer at the top while clicking through each question, every question has a page break in between. 

 

Here is the html:

<div id="timerContainer"></div>

Time remaining

 

There is a separate issue that the first page after the timer displays the continue at the top right next to the progress bar but all subsequent questions it is at the bottom - as intended.

Qualtrics.SurveyEngine.addOnReady(function() {
var timerElement = document.createElement('div');
timerElement.id = 'timerContainer';
timerElement.style.position = 'fixed';
timerElement.style.top = '0';
timerElement.style.left = '0';
timerElement.style.backgroundColor = '#fff';
timerElement.style.padding = '10px';
timerElement.style.zIndex = '9999';

var questionContainer = document.querySelector('.Skin #Questions');
questionContainer.insertBefore(timerElement, questionContainer.firstChild);

var startTime = Date.now();
var intervalId;
var blockEndTime = -1;

function updateTimer() {
if (blockEndTime !== -1) {
var remainingTime = Math.max(blockEndTime - Date.now(), 0);
var minutes = Math.floor(remainingTime / (1000 * 60));
var seconds = Math.floor((remainingTime / 1000) % 60);
timerElement.innerHTML = minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
}
}

function stopTimer() {
clearInterval(intervalId);
}

function setBlockEndTime() {
blockEndTime = Date.now();
updateTimer();
}

intervalId = setInterval(updateTimer, 1000);

Qualtrics.SurveyEngine.addOnUnload(stopTimer);
Qualtrics.SurveyEngine.addOnPageSubmit(setBlockEndTime);
});

Qualtrics.SurveyEngine.addOnReady(function() {
var nextPageButton = document.querySelector('.Skin .NextButton');

if (nextPageButton) {
nextPageButton.style.position = 'fixed';
nextPageButton.style.top = '0';
nextPageButton.style.right = '0';
nextPageButton.style.zIndex = '9999';
}
});

 

icon

Best answer by TomG 12 June 2023, 20:52

View original

2 replies

Userlevel 7
Badge +36

@RElsdon 

Why not use Timing question, before each question it gives you the ability to auto advance and also show the user the time left.

 

 

Userlevel 7
Badge +27

@RElsdon,

You might be interested in the countdownTimer function. Since countdownTimer calls for the timer to be in the header, I also a have a function to freeze the header to the top of the page (similar to freezeTopQ).

Leave a Reply