I'm trying to create a timer that measures how long a respondent stays on a given survey page, and also make the timer visible on the page as well. With a bit of digging around here and there, I think I maanged to create a timer (thank you for those of you who helped me out in my previous post!) Unfortunately, when I actually preview the survey, I see my timer, but it's static—nothing really shows other than something like this below:
time: 0:0
If my code runs correctly it should start with 0:00 (but it doesn't), and there's no time updates. I guess the error lies in that I don't update the display each time, but how exactly can I go about doing that? Could someone help me?
**Important: I do NOT want to use the built-in timer on Qualtrics; that timer is not accurate enough for our research purposes.
Qualtrics.SurveyEngine.addOnload(function(){
    
    var headerc = document.createElement("div");
    headerc.className = "header-cont"; 
    headerc.id = "header_container";
        
    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: 00:00";


    headerc.appendChild(header);
    header.appendChild(timer);
    document.body.insertBefore(header, document.body.firstChild);
    
    // timepassed is the measure of how long a respondant stays on the given page
    var timepassed = 0;
    var myTimer;


    function startTimer() {
        myTimer = setInterval(increaseSeconds, 1000);
    }
        
        /*
        function stopTimer() {
            clearInterval(myTimer); 
        }
        */


    function increaseSeconds() {
        timepassed++; 
        let newTime = formatTime(timepassed);
timer.getElementById('time').innerHTML = newTime;
        //document.getElementById("timer_1").innerHTML="time: " + formatTime(timepassed);
    }


    //I make it so that timepassed is visible to respondants, but we could choose not to. 
function formatTime(time) {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
if(seconds < 10) {
seconds = `0${seconds}`;
}
return `${minutes}:${seconds}`;
}


    //var t0 = performance.now();
    display = document.querySelector('#time');
    startTimer(); 
    
    $('NextButton').onclick = function (event) {
        //stop timer
        clearInterval(myTimer); 
        //timepassed variable at this point should contain how long the respondant has spent on this page.
    };
});
        Qualtrics.SurveyEngine.addOnReady(function(){});


        Qualtrics.SurveyEngine.addOnUnload(function()
        {
        var var1 = this.getChoiceValue(1)
        Qualtrics.SurveyEngine.setEmbeddedData('fruit1',  var1);
        var var2 = this.getChoiceValue(3)
        Qualtrics.SurveyEngine.setEmbeddedData('fruit2', var2);
        var timeSpentOnPage = this.timepassed;
        });