JavaScript for Timer Code | XM Community
Skip to main content
Question

JavaScript for Timer Code

  • June 17, 2021
  • 2 replies
  • 428 views

Forum|alt.badge.img

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

Forum|alt.badge.img+8
  • Level 2 ●●
  • June 19, 2021

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();
    }
});


Forum|alt.badge.img

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?