JavaScript for Timer Code | XM Community
Question

JavaScript for Timer Code

  • 17 June 2021
  • 2 replies
  • 171 views

Badge

Hi. I need some help editing this javascript. I need it to include an hour, not just minutes and seconds.
Qualtrics.SurveyEngine.addOnload(function()
{
var header = document.createElement("div");
header.className = "header"
header.id = "header_1";

var timer = document.createElement("div");
timer.className = "timer";
timer.id = "timer_1";
timer.innerHTML = "Time Remaining: 00:10";

header.appendChild(timer);
document.body.insertBefore(header, document.body.firstChild);

function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var myTimer = setInterval(function() {
Qualtrics.SurveyEngine.setEmbeddedData('timeRemaining', timer);
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);
timeOver();
}
}, 1000);
}
var timerSeconds = parseInt("${e://Field/timeRemaining}");
display = document.querySelector('#time');
startTimer(timerSeconds, display);
var timeOver = function() {
document.getElementById("timer_1").innerHTML = "Time is up.";
x = 1;
var bgColor = setInterval(change, 1000);
$('NextButton').click();
}
});


2 replies

Badge +8

Try this code
Qualtrics.SurveyEngine.addOnload(function ()
{
    var header = document.createElement("div");
    header.className = "header"
    header.id = "header_1";


    var timer = document.createElement("div");
    timer.className = "timer";
    timer.id = "timer_1";
    timer.innerHTML = "Time Remaining: 00:00:10";


    header.appendChild(timer);
    document.body.insertBefore(header, document.body.firstChild);


    function startTimer(duration, display) {
        var timer = duration, hours, minutes, seconds;
        var myTimer = setInterval(function () {
            Qualtrics.SurveyEngine.setEmbeddedData('timeRemaining', timer);
            hours = Math.floor(timer / 3600);
            timer %= 3600;
            minutes = Math.floor(timer / 60);
            seconds = timer % 60;
            hours = hours < 10 ? "0" + hours : hours;
            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            var text = ('innerText' in display) ? 'innerText' : 'textContent';
            display[text] = hours + ":" + minutes + ":" + seconds;


            if (--timer < 0) {
                clearInterval(myTimer);
                timeOver();
            }
        }, 1000);
    }
    var timerSeconds = parseInt("${e://Field/timeRemaining}");
    display = document.querySelector('#time');
    startTimer(timerSeconds, display);
    var timeOver = function () {
        document.getElementById("timer_1").innerHTML = "Time is up.";
        x = 1;
        var bgColor = setInterval(change, 1000);
        $('NextButton').click();
    }
});

Badge

timing javascript.pngThis is the coding we ended up going with. We just put in 105 minutes instead of one hour and 45 minutes. It makes everything work the way we want it except it randomly makes the seconds jump up in milliseconds between each second. It looks like some weird glitch. Any suggestions?

Leave a Reply