Custom Countdown Timer on Auto-Advancing Trials | XM Community
Question

Custom Countdown Timer on Auto-Advancing Trials

  • 23 February 2024
  • 6 replies
  • 61 views
N
Badge +1

I currently have a series of timed trials. Each trial auto-advanced after a set period of time. I want to display a countdown timer that only appears when there are only 3 seconds remaining in the trial. 

 

Right now, here is an example of the JS I am using to autoadvance a trial: 

Qualtrics.SurveyEngine.addOnload(function() {
    var timeLimit = 73000; 
 
    var questionElement = jQuery("M02_NoInfo"); 
    
    var timeoutId = setTimeout(function() {
        jQuery('.q-btn:contains("Next")').click();
    }, timeLimit);  

});

 

How can I insert a countdown timer that only begins when there are 3 seconds remaining? 

 

Thanks! 

6 replies

A
Rank
Userlevel 7
Badge +22 
Qualtrics.SurveyEngine.addOnReady(function () {
	const qc = quest.getQuestionContainer();
	const timeLimit = 73000;

	const timerHTML = '<div class="timer" style="opacity:0"><span class="num"></span> Seconds Left</div>';
	qc.insertAdjacentHTML("afterbegin", timerHTML);
	const timeKeeper = qc.querySelector(".timer .num");

	timeKeeper.innerText = timeLimit / 1000;

	const timeTracker = setInterval(() => {
		const timeLeft = parseInt(timeKeeper.innerText);
		timeKeeper.innerText = timeLeft - 1;
	}, 1000);

	setTimeout(function () {
		qc.querySelector(".timer").style.opacity = "1";
	}, timeLimit - 3000);

	setTimeout(function () {
		clearInterval(timeTracker);
		quest.clickNextButton();
	}, timeLimit);
});

 

N
Badge +1

This does not seem to work. Are those HTML elements that would need to already be embedded somewhere else? Sorry, still learning my way around and struggling to figure out where this is going wrong. 

A
Rank
Userlevel 7
Badge +22

Just paste this in your question Javascript. It will automatically do everything for you.

 

 

N
Badge +1

Yeah, I did, but it does not seem to work. I removed the embedded Qualtrics timer I was using to record response time in case that was conflicting with the Javascript, but still nothing.  

A
Rank
Userlevel 7
Badge +22

Okay. You should have mentioned that you are using the Qualtrics timer question to autoadvance. Because the JS you had pasted is for clicking the next button which is not required if you use the auto advance in the timer question.

For that the code is really simple, add it to the JS of the timer question:

Qualtrics.SurveyEngine.addOnReady(function () {
	const quest = this;
	const qc = quest.getQuestionContainer();
	const totalTime = quest.question.runtime.Configuration.Seconds * 1000;

	// Hide the timer
	qc.style.opacity = "0";

	// Show timer when 3000 ms are left
	setTimeout(() => {
		qc.style.opacity = "1";
	}, totalTime - 3000);
});

 

N
Badge +1

Ah this worked! Thank you so much! 

Leave a Reply


Terms & Conditions