Javascript Source (making a stopwatch) | XM Community
Skip to main content

I'm new to using javascript in qualtrics. I am trying to implement a simple stopwatch on a survey item using this code https://learnwebsitedesign.com/tutorials/javascript-stopwatch-code-tutorial.php
It works for me in Visual Code Studio, when I source the javascrtipt code in my html file:
What is the equivalent to this src that I need to do in qualtrics? Just not sure what to put in the HTML to tell it to use the javascript for the button functionality.

Hey korychi. You are wanting the timer to show in the question title, correct? You can add your HTML in the Rich Content Editor of the desired question (Select the question, click Rich Content Editor, choose the <> button (let's you add html source code). Then, you can add your JavaScript to the same question to control the onClick functions. You don't need to host the HTML or JS, you can embed it directly in the question itself, though you can if you want it; it's just a bit more complicated doing it that way than it needs to be.
Any questions, just ask!

JeremyK Thanks for answering! That's what I tried, and the timer is appearing but the buttons are not doing anything. Here is my specific code I have pasted in the qualtrics item:
html





Your Page Title




00:00:00



Start
Reset





javascript
var time = 0;
var running = 0;

function startPause(){
    if(running == 0){
        running = 1;
        increment();
        document.getElementById("startPause").innerHTML = "Pause";
    }else{
        running = 0;
        document.getElementById("startPause").innerHTML = "Resume";
    }
};

function reset(){
    running = 0;
    time = 0;
    document.getElementById("output").innerHTML = "00:00:00";
    document.getElementById("startPause").innerHTML = "Start";
};

function increment(){
    if(running == 1){
        setTimeout(function(){
            time++;
            var mins = Math.floor(time / 10 / 60);
            if(mins <= 9){
                mins = "0" + mins;
            }
            var secs = Math.floor(time / 10);
            if(secs <= 9){
                secs = "0" + secs;
            }
            var tenths = Math.floor(time % 10);
            if(tenths <= 9){
                tenths = "0" + tenths;
            }
            document.getElementById("output").innerHTML = mins + ":" + secs + ":" + tenths;
            increment();
        }, 100);
    }
};

Alright, I see what's going on. Qualtrics doesn't let you attach event listeners in the html like your guide is doing. When you copy in the html, Qualtrics is stripping the onClick functions when you exit. If you view the html again, you'll notice they're gone. This just means we need to add the onClick in the JavaScript, no big deal. Add these two onClick listeners to the bottom of your JS function underneath your increment() function and you should be golden. Tested and confirmed this works on a survey of my own making.
jQuery('#startPause').on("click", function() {
        startPause();
    });

    jQuery('#reset').on("click", function() {
        reset();
    });

Perfect, thanks! Works great now :)

Great to hear! You may want to tweak the logic in the JS too. Right now the seconds go up to 100 instead of 60 (though the minutes increment correctly at 60). There's a lot of examples out there for stopwatches in JS, so I won't try and give an example, just Google it. Smarter minds than me 😉

Leave a Reply


Terms & Conditions