Embedding custom count-downs in Qualtrics

I want to keep things simple for my first post, so I'm just going to start out with some Qualtrics code I find helpful for creating custom countdowns on Qualtrics. Note that this does not replace the Timing question on Qualtrics, so it will not record the amount of time a participant spent on a page. This is more just a stylistic change.

First you want to enable custom Javascript in the item in which you will be embedding your countdown. See some Qualtrics help if you don't know how to enable custom Javascript.

This code below is also set to advance the screen after 31 seconds, but you can change the # of seconds in the last line below. If you want the participant to be able to advance the screen whenever, then just omit the last 2 lines.

Paste in the following javascript if you want a COUNTDOWN. To specify what seconds it should be counting down from, you need to change the line that says var timerSeconds = 30 to whatever number you want. I've set it to count down 30 seconds.:

 function startTimer(duration, display) {  
  var timer = duration, minutes, seconds;  
  var myTimer = setInterval(function() {  
   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);    
   }  
  }, 1000);  
 }  
 var timerSeconds = 30, 
 display = document.querySelector('#time');  
 startTimer(timerSeconds, display);  
 
this.hideNextButton(); 
this.clickNextButton.delay(31); 
 
});
 

Paste in the following javascript if you want a COUNTUP from 00:00 instead:

function startTimer(duration, display) {  
  var timer = duration, minutes, seconds;  
  var myTimer = setInterval(function() {  
   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> 120) {  
    clearInterval(myTimer);  
   }  
  }, 1000);  
 }  
 var timerSeconds = 0,  
 display = document.querySelector('#time');  
 startTimer(timerSeconds, display);  
this.hideNextButton(); 
this.clickNextButton.delay(31); 
 
});

Then in the question text itself, you will want to go to the Rich Content Editor and then the Source.
Paste the HTML below where you want to display your countdown in the text of your question.

For count down (substitute for whatever seconds you set your countdown to, here it's 30):
<span id="time">00:30</span><br />

For count up:
<span id="time">00:00</span><br />

So here's an example of a countdown that I made. I'm pretty sure that it should follow the font and style of your Qualtrics survey.