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 multiple pages.

The general idea of my code is to keep track of a timed countdown over multiple pages. That is to say, I have a series of tasks, each on an individual page but in the same block, and I'd like to display how much time is left every time a new page loads.

To do this, first I've defined several embedded data fields "timeleftrounded" and "start time" and left the values to be assigned later.

Second, I put the following code on the last question directly before the pages I want the timer to start on. My intention is for this code to read in the current time to define the embedded data "start_time"

    Qualtrics.SurveyEngine.addOnload(function()
{
Event.observe($('NextButton'), 'click', function (e) 
    {    
        Qualtrics.SurveyEngine.setEmbeddedData("start_time", Date.now());
     });
});

On the next page my tasks begin, and as I want subjects to have 40 minutes total, I just have "40 minutes" written in, no code necessary. But on that question I have more code that should then calculate the amount of time remaining (in minutes) when the button to load the next page is clicked.

    Qualtrics.SurveyEngine.addOnload(function()
{
    Event.observe($('NextButton'), 'click', function () 
{ 
        var timeleftrounded = (2400000- (Date.now() - Number("${e://Field/start_time}")))/60000;    
    Qualtrics.SurveyEngine.setEmbeddedData("timeleftrounded",timeleftrounded);  
        });
    });

The next page uses the following code to round this variable "timeleftrounded" to the first decimal point and display it to the subject,

$e{ round(e://Field/timeleftrounded , 1) }

Here's where my confusion begins: although this code works properly when I use the "View Block..." function, when I use the full survey preview mode, or launch the survey (I made a copy), the timer doesn't work--unless I give a wrong answer to a question, it will just display "0". Each page has a question with a validation check, and once I give a wrong answer at least once, the timer works again, but if I only give correct answers, the timer never works.

Hopefully I'm missing something obvious, but I wasn't able to find the solution anywhere online so I figured this might be something other people would have an interest in as well.

回答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");
});

来源：https://stackoverflow.com/questions/36948956/implementing-a-multi-page-timer-in-qualtrics

标签

javascript

timer

qualtrics