Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

JavaScript Timer, prevent reset when page is refreshed (works - but not on mobile)

G2000
G2000 Community Member, Qualtrics Brand Admin Qubie ✭

Hi All,

From searches in the Community, I know plenty of people are interested in a timer that does not "reset" when the page is refreshed (as the Qualtrics Timer question type does). I have been working on a solution / workaround, and I have found something that works - but I have problems getting it to work on mobile devices.

Brief description of my solution:

  • Before each block, set embedded data field "TimeStartedBlock" = Q_TotalDuration
  • Then, use JavaScript to pull in "TimeStartedBlock" as well as current Q_TotalDuration
  • Use JavaScript to do a few computations to check whether the timer is expired, and click the Next button if that is the case

Here is what it looks like:

Qualtrics.SurveyEngine.addOnReady(function()
{   
    var MaxTime = parseInt("${e://Field/TimePerBlock}");   /// Set this once in Survey Flow
    var TimeStart = parseInt("${e://Field/TimeStartedBlock}");   /// Before each block, set this embedded data field to equal Q_TotalDuration
    var TimeNow = parseInt("${e://Field/Q_TotalDuration}");
    var TimePassed = TimeNow - TimeStart;
    var TimeRemaining = MaxTime- TimePassed;
    this.clickNextButton.delay(TimeRemaining);
});

This works well when I complete the survey on a computer. However, I am having problems getting this to work on mobile devices.
It seems to me that it fails when pulling in Q_TotalDuration for "TimeNow". When I refresh the page (using the refresh button in Safari, or by pulling down on Google Chrome), the TimeNow variable still has the same value as it did the first time the page was loaded.

Thanks for any help you can provide.
Of course, if anyone has a more sophisticated way of addressing the issue of resetting timers, I am open to any and all solutions!

Answers

  • npetrov937
    npetrov937 London, UKCommunity Member - Trial User Guru ✭✭
    edited December 2019

    Brilliant question - I wasn't even aware of this 'feature' of timers - seems a bit poorly designed.

    Your solution is great but not sure why it doesn't work on mobiles.

    For a Qualtrics-specific solution, maybe you can add OnLoad JS and some embedded data values. Let's say, that you have an embeddded data value at the start of the survey called page1_check. Then on page 1, OnLoad set the page1_check variable to 1 but also add a condition to check the value of page1_check; if it's 1, then you know it's a refresh and you can do stuff with JS.

    For more general solutions, you might draw inspiration from these:
    1) Maybe you can just pop up a message to warn users not to refresh - https://stackoverflow.com/a/5711922
    2) Maybe you can use JS to disable certain keys and actions - https://stackoverflow.com/a/7997622
    3) Maybe you can implement JS to check for a specific page-specific cookie and if the cookie is there, then there was a refresh (general solution as per https://stackoverflow.com/a/13333477)

    Hope that helps.

    Nikolay

  • amcdonal
    amcdonal Waukesha, WICommunity Member Qubie ✭

    For the var TimeNow = I can't find the embedded field for Q_TotalDuration. Any thoughts?

    @G2000 said:
    Hi All,

    From searches in the Community, I know plenty of people are interested in a timer that does not "reset" when the page is refreshed (as the Qualtrics Timer question type does). I have been working on a solution / workaround, and I have found something that works - but I have problems getting it to work on mobile devices.

    Brief description of my solution:

    • Before each block, set embedded data field "TimeStartedBlock" = Q_TotalDuration
    • Then, use JavaScript to pull in "TimeStartedBlock" as well as current Q_TotalDuration
    • Use JavaScript to do a few computations to check whether the timer is expired, and click the Next button if that is the case

    Here is what it looks like:

    Qualtrics.SurveyEngine.addOnReady(function()
    { 
      var MaxTime = parseInt("${e://Field/TimePerBlock}");   /// Set this once in Survey Flow
      var TimeStart = parseInt("${e://Field/TimeStartedBlock}");   /// Before each block, set this embedded data field to equal Q_TotalDuration
      var TimeNow = parseInt("${e://Field/Q_TotalDuration}");
      var TimePassed = TimeNow - TimeStart;
      var TimeRemaining = MaxTime- TimePassed;
      this.clickNextButton.delay(TimeRemaining);
    });
    

    This works well when I complete the survey on a computer. However, I am having problems getting this to work on mobile devices.
    It seems to me that it fails when pulling in Q_TotalDuration for "TimeNow". When I refresh the page (using the refresh button in Safari, or by pulling down on Google Chrome), the TimeNow variable still has the same value as it did the first time the page was loaded.

    Thanks for any help you can provide.
    Of course, if anyone has a more sophisticated way of addressing the issue of resetting timers, I am open to any and all solutions!

  • Robbert
    Robbert Groningen, The NetherlandsCommunity Member, Qualtrics Brand Admin Qubie ✭

    I understand that in the approach described in the first post, Q_TotalDuration is used as a variable that is remembered and updated over time by Qualtrics, even across page reloads.

    However, I could not get this to work, in Google Chrome. It seemed that after having visited the block at hand, Q_TotalDuration would always keep its first value after reloading the page. (Perhaps the problems on mobile as described by the orignal poster are linked to this, if the mobile device was using Chrome?)

    I set up a test by adding only this JS to a block:

    Qualtrics.SurveyEngine.addOnload(function()
    {
    	/*Place your JavaScript here to run when the page loads*/
    	
    	console.log('${e://Field/Q_TotalDuration}');
    });
    

    Result in Google Chrome: After reloading the page, the displayed value always stays the same. This means it cannot be used to keep track of time going by.

    Result in Firefox: After reloading the page, the number has gone up compared to the previous visit. This is what you would like to see.

    I just wanted to put this here for others who are wondering why this does not work in Chrome.