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';
  }
});