Implementing A Multi-page Timer In Qualtrics

For a research project I'm working on I'm trying to implement a timer using the Javascript functionality on Qualtrics that will keep track of time and display it to subjects over m

Solution 1:

Adding an event listener on the Next Button usually doesn't work because Qualtrics has its own event listener on the Next Button.

I'm going to suggest a much simpler approach. Use the built-in embedded variable Q_TotalDuration which always has the current total duration of the survey in seconds.

In the survey flow, just before your timed questions start:

start_time = ${e://Field/Q_TotalDuration}

HTML in your header:

<div id="timeLeft" style="text-align:right"></div>

JavaScript on your timed questions (just need one on each page):

Qualtrics.SurveyEngine.addOnload(function()
{
    var timeleftrounded = (2400 - (parseInt("${e://Field/Q_TotalDuration}") - parseInt("${e://Field/start_time}")))/60;
    timeleftrounded = timeleftrounded.toFixed(1);  
    $('timeLeft').update(timeleftrounded + " minutes left");
});