How can I fix a visible countdown at the top while there are several page breaks within a block? | Experience Community
Skip to main content
Solved

How can I fix a visible countdown at the top while there are several page breaks within a block?

  • September 23, 2020
  • 3 replies
  • 115 views
Q

I would like to fix a visible countdown / timer at the top while the participants of the survey make multiple text entries. Within one block I would like to separate the text entries by page breaks but the same countdown should be visible all the time; e.g. the countown is 4 minutes and they have to make 30 text entries, then I do not want to have 30 countdown of 8 seconds per entry but 4 minutes overall. Can anyone help?

Best answer by TomG

You'll need to use JavaScript and embedded data fields to do this. The embedded data field Q_TotalDuration always has the elapsed survey time. Save the start time before the block starts. Then use JS on each page that calculates the time left using Q_TotalDuration and start time, and updates html to display the time remaining every second.

    3 replies

    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • Answer
    • September 23, 2020

    You'll need to use JavaScript and embedded data fields to do this. The embedded data field Q_TotalDuration always has the elapsed survey time. Save the start time before the block starts. Then use JS on each page that calculates the time left using Q_TotalDuration and start time, and updates html to display the time remaining every second.

      Q
      • Quavid
      • Author
      • September 24, 2020

      https://www.qualtrics.com/community/discussion/comment/30565#Comment_30565Allright, thank you!

      Q
      • Quavid
      • Author
      • September 27, 2020

      https://www.qualtrics.com/community/discussion/comment/30565#Comment_30565I am sorry, but I am not used to JS. Is this okay?
      var timer;

      Qualtrics.SurveyEngine.addOnload(function () {

         const allottedTime = parseInt("${e://Field/time_allotted}", 10);
         const startTime = parseInt("${e://Field/start_time}", 10);
         const currentTime = parseInt("${e://Field/Q_TotalDuration}", 10);
         var spendTime = currentTime - startTime;

         function formatTime(time) {
             let hours = Math.floor(time / 3600);
             let minutes = Math.floor((time % 3600) / 60);
             let seconds = Math.floor(time % 60);
             if (hours < 10) {hours = "0" + hours;}
             if (minutes < 10) {minutes = "0" + minutes;}
             if (seconds < 10) {seconds = "0" + seconds;}
             return minutes + ":" + seconds;
         }

         function updateTime() {
             spendTime++;
             let timeLeft = (allottedTime - spendTime);
             if (timeLeft <= 0) {
                 clearInterval(timer);
                 console.log("Timer stopped");
                 Qualtrics.SurveyEngine.setEmbeddedData('timeout', 1);
                 that.clickNextButton();
                 return;
             }
             console.log("Time left: " + timeLeft + " seconds");
             document.getElementById("timer").innerHTML = formatTime(timeLeft);
         }

         timer = window.setInterval(function () {
             updateTime();
         }, 1000);
      });

      Qualtrics.SurveyEngine.addOnUnload(function () {
         clearInterval(timer);
      });

      Terms & ConditionsAccessibility statement