Hiding next button until timer has run out

I think this addresses your question:
Qualtrics.SurveyEngine.addOnReady(function()  {
  if("${e://Field/timeRemaining}" != "1") jQuery("#NextButton").hide();
});

Dear TomG,
thank you for your support.
It does work, however only when I use the back button to go to the previous page and then return to the final page. The page itself does not refresh automatically to show the button (potentially due to the data being updated only when the timer runs out and the "if" query is only executed as soon as the page is refreshed).
Could you think of any workaround?
greatly appreciated, thank you so much!
Best
Jennifer

https://www.qualtrics.com/community/discussion/comment/30973#Comment_30973That would indicate that the variable isn't being set to 1 until the last page.

https://www.qualtrics.com/community/discussion/comment/30976#Comment_30976Exactly. The variable is set to 1 when the timer runs out. However, participants are able to proceed to the last page while the timer is running.
Now I was wondering whether there is an "automatic refresher" for data every 5 seconds or so. It might also be that I am making some kind of logical error and that there is an easier workaround.

https://www.qualtrics.com/community/discussion/comment/30978#Comment_30978Embedded data values are updated on the server, and any updates made aren't available until the next page. You can copy an embedded data value to a JS variable, then use setInterval to update the variable every X milliseconds.

https://www.qualtrics.com/community/discussion/comment/30982#Comment_30982The solution you have mentioned sounds like exactly what I anticipated. Yet, I unfortunately only have the basic Java skills so far - could you by any chance elaborate with a code snippet!
thank you in advance, this has been an amazing help!

To do something every 5 seconds, you would do:
var interval = setInterval(function() {
/* something done every 5 seconds */
},5000);

Dear Tom,
thanks again for your help. I have tried various ways to figure out the merger of the functions, but none of it seems to be working unfortunately. From my point of view this function should execute the task as desired:
Qualtrics.SurveyEngine.addOnReady(function() {
 var interval = setInterval(function() {if("${e://Field/toto}" == "1") {jQuery("#NextButton").hide();
} else {
 jQuery("#NextButton").show()}},100);
function myStopFunction() {
 clearInterval(myVar);
}
});
However, the next button still does not show up when the timer runs out on the last page. Also, if the users hit the back button, the next button also disappears on the page before, even though there is no java script on that page. This is very frustrating.
Am I making a code mistake here or is there just no possibility of a Qualtrics page that was already opened to update itself again?
Many thanks again!
Jennifer

You have a few issues:

1. The value of ${e://Field/toto} gets set on the server and is never going to change while on the page. You need to copy it to a JS variable then update it with the setInterval function.


2. In your code, the interval you need to clear is 'interval' not 'myvar'.


3. MyStopFunction is never called. Change

   function myStopFunction()

   to

   Qualtrics.SurveyEngine.addOnUnload()

Dear Tom,
I have followed your instructions but I still suspect that there is an error in my variable definition. I hope this will be the last time claiming your knowledge.
With the updates, the next button is not hidden anymore, therefore I suspect a mistake in the definition of the variable ‘timeisup’ (my new variable for defining whether the timer has run out.
I (supposedly) define the variable and assign a value in the timer code, I have bolded it in the code below:
function startTimer(duration, display) {
              var timer = duration, minutes, seconds;
              var myTimer = setInterval(function() { 
                              minutes = parseInt(timer / 60, 10)
                              seconds = parseInt(timer % 60, 10);
                              minutes = minutes < 10 ? "0" + minutes : minutes;
                             seconds = seconds < 10 ? "0" + seconds : seconds;
                             var text = ('innerText' in display)? 'innerText' : 'textContent';
                             display[text] = minutes + ":" + seconds;
                             if (--timer < 0) {
                                              clearInterval(myTimer);
                                              timeOver();
                                              var timeisup = 1;
                              }
              }, 1000);
 
Then, I (supposedly) try to update the variable on the last page (where the next button should appear) with the following code. On the same page, there are also the other codes for the conditional hiding of the button and the clearing of the intervals.
Qualtrics.SurveyEngine.addOnReady(function() {           
                var interval1 = setInterval(function() {
                             if (--timer < 0) {
                                              var timeisup = 1;
                              }
},100);
});
 
Qualtrics.SurveyEngine.addOnReady(function() {           
 var interval2 = setInterval(function() {if(timeisup != "1") {jQuery("#NextButton").hide()}
                else {
 jQuery("#NextButton").show()}},100);
});
 
Qualtrics.SurveyEngine.addOnUnload(function() {
 clearInterval(interval1);
               clearInterval(interval2);
});
 
Thanks again for the marvelous support! Mastering this challenge is crucial for my last dissertation project.
 
Best
Jennifer

jenrix ,
JS variables don't carryover from one page to the next. If you want to carry them over you need to save them as embedded variables (using .setEmbeddedData()) then pipe them into the script on the next page.
I think some of your code is missing from what you posted. I don't see where you all startTimer.

Yes, sorry, I have omitted some code to not make the post
Here is the full code for the original timer:
_____________
Qualtrics.SurveyEngine.addOnload(function()
{
var header = document.createElement("div"); 
 header.className = "header" 
 header.id = "header_1"; 
               
var timer = document.createElement("div"); 
 timer.className = "timer"; 
 timer.id = "timer_1"; 
 timer.innerHTML = "Time Remaining: 05:00";
               
               var timeisup = Qualtrics.SurveyEngine.getEmbeddedData("timeisup")
               Qualtrics.SurveyEngine.setEmbeddedData('timeisup', 0);
               
header.appendChild(timer);
document.body.insertBefore(header, document.body.firstChild);
               
function startTimer(duration, display) {
              var timer = duration, minutes, seconds;
              var myTimer = setInterval(function() { 
                              minutes = parseInt(timer / 60, 10)
                              seconds = parseInt(timer % 60, 10);
                              minutes = minutes < 10 ? "0" + minutes : minutes;
                             seconds = seconds < 10 ? "0" + seconds : seconds;
                             var text = ('innerText' in display)? 'innerText' : 'textContent';
                             display[text] = minutes + ":" + seconds;
                             if (--timer < 0) {
                                              clearInterval(myTimer);
                                              timeOver();
                                                                                                                              Qualtrics.SurveyEngine.setEmbeddedData('timeisup', 1);
                              }
              }, 1000);
}
var timerSeconds = 10, // This needs to be 1 second shorter than the total time, as it seems to increment 1 late
display = document.querySelector('#time');
startTimer(timerSeconds, display);
var timeOver = function() {
              document.getElementById("timer_1").innerHTML = "Time is up.";
              x = 1;
              Qualtrics.SurveyEngine.setEmbeddedData('timeUp', 1); 
                Qualtrics.SurveyEngine.setEmbeddedData('timeisup', 1);
 }
Qualtrics.SurveyEngine.addOnPageSubmit(function() {
   Qualtrics.SurveyEngine.setEmbeddedData('timeRemaining',timer);
   clearInterval(myTimer);
});
});
 
Qualtrics.SurveyEngine.addOnReady(function()
{
//$('PreviousButton').hide();
$('PreviousButton').disable();
});
 
Qualtrics.SurveyEngine.addOnUnload(function()
{

              
});

_____________

The last page has the following code, I have now added the embedded data as you suggested. I have also added the variable 'timeisup' as an additional variable initially defined as 0 to the survey flow.
_____________
Qualtrics.SurveyEngine.addOnReady(function() {         
                var interval1 = setInterval(function() {
                             getEmbeddedData('timeisup')
},100);
 
 var interval2 = setInterval(function()
                                                                                                              {
 if("${e://Field/timeisup}" != "1") {jQuery("#NextButton").hide()}                                          
},10);
});
 
Qualtrics.SurveyEngine.addOnUnload(function() {
 clearInterval(interval1);
               clearInterval(interval2);
});
_________

The embedded data works fine, I have checked by letting it display in the text. However, the intervals do not seem to be working, as the data does not refresh.
Thank you very much again!!

*I have updated the code above after looking at the issue with a fresh view*

Help would be highly appreciated, unfourtunately the experiment needs to go live in the next 12 hours!
Have updated the code above again with one of my approaches.