Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Disabling back button for specified time

Hi,

I used to use the code below to disable the 'Next' button for a specified time. It replaced the next text with a countdown timer. With this newer software this no longer seems to work. Can anyone tell me where this broke? I assume it is simply a reference to how the next button is called.

<script type="text/javascript">

function disableNext ( )
{
  originalValue = document.mainform.sys_next_button.value;
  document.mainform.sys_next_button.disabled = true;
  document.mainform.sys_next_button.value = "Please wait (" + timeOutRemaining-- + " seconds)";
  setTimeout ( "countDown()", 1000 );
}

function countDown() {
    document.mainform.sys_next_button.value = "Please wait (" + timeOutRemaining + " seconds)";
    if(timeOutRemaining > 0) {
              timeOutRemaining--;
              setTimeout("countDown();", 1000);
        } else {
              enableNextButton();
        }
}

function enableNextButton ()
{
  document.mainform.sys_next_button.disabled = false;
  document.mainform.sys_next_button.value = originalValue;
  
}

window.onload = disableNext;
var originalValue;
var timeOutRemaining = 30; //30 Seconds
  
  
</script>
asked Sep 26 by Ron H.
Would it be sufficient if a rewritten script simply hid the navigation buttons for thirty seconds while showing that message in the button's place during the duration?
Yes, that would work too. I simply need to force the respondent to stay on the page for a given amount of time - the length of a video that is being shown on that screen.

1 Answer

0 votes
Try this:

<style>
#previous_button,
#next_button {
    display: none;
}
</style>

<script>
$(window).on('load', function(){
    var delay = 10;
    $('.submit_div').after('<p class="delayContainer">Please wait (<span class="delay">30</span> seconds)</p>');
    var interval = setInterval(function(){
        delay--;
        $('.delay').text(delay);
        if (delay <= 0) {
            $('.delayContainer').hide();
            $('#previous_button, #next_button').css('display', 'inline-block');
        }
    }, 1000);
})
</script>
answered Sep 27 by Zachary Platinum Sawtooth Software, Inc. (63,775 points)
...