Question
JavaScript Timer, prevent reset when page is refreshed (works - but not on mobile)
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!
+4Brilliant 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
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!
>
+3I 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.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.