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

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

  • 23 September 2020
  • 3 replies
  • 56 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?

icon

Best answer by TomG 23 September 2020, 22:57

View original

3 replies

TomG
Rank
Userlevel 7
Badge +27

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

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

Q

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

Leave a Reply


Terms & Conditions