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

Javascript Source (making a stopwatch)

  • September 28, 2021
  • 5 replies
  • 114 views
K

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.

Best answer by JeremyK

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

5 replies

JeremyK
Level 3 ●●●
Forum|alt.badge.img+7
  • JeremyK
  • Level 3 ●●●
  • September 28, 2021

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!

    K
    • korychi
    • Author
    • September 28, 2021

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

    JeremyK
    Level 3 ●●●
    Forum|alt.badge.img+7
    • JeremyK
    • Level 3 ●●●
    • Answer
    • September 28, 2021

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

    K
    • korychi
    • Author
    • September 28, 2021

    Perfect, thanks! Works great now :)

      JeremyK
      Level 3 ●●●
      Forum|alt.badge.img+7
      • JeremyK
      • Level 3 ●●●
      • September 28, 2021

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

        Terms & ConditionsAccessibility statement