Have an idea?

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

Timer option

Hello !

We have programmed a question with a timer (thanks sawtooth library). It works almost perfectly: we wanted that the next button on the page appears only when the timer start button was clicked. It's possible ?

Thanks,
Sylvain
asked Feb 5 by s_wales (160 points)

1 Answer

0 votes
Try this modified code:

<input name="[% QuestionName() %]_Timer" id="[% QuestionName() %]_Timer" type="hidden" value="10">

<div>
    You will have 30 seconds to complete the questions on this page.
    Press "Start" when you are ready to begin.
</div>

<button type="button" id="[% QuestionName() %]_start">Start</button>

<div class="[% QuestionName() %]_during">
    You have <span class="[% QuestionName() %]_countdown">30 seconds</span> remaining.
</div>
<div class="[% QuestionName() %]_after">
    This page has been completed.
</div>

<style>
.[% QuestionName() %]_during,
.[% QuestionName() %]_after,
.question:not(#[% QuestionName() %]_div) {
    display: none;
}

#[% QuestionName() %]_start {
    padding: 6px;
    margin: 4px;
}
</style>

<script>
$(document).on('ssi_ready', function(){
    $('#next_button, #previous_button').css('visibility', 'hidden');
    var countdown = Number($('#[% QuestionName() %]_Timer').val());
    if (!countdown) {
        $('#[% QuestionName() %]_start').prop('disabled', true);
        $('.[% QuestionName() %]_after').show();
        $('#next_button, #previous_button').css('visibility', 'visible');
    }
    $('#[% QuestionName() %]_start').click(function(){
        $('#[% QuestionName() %]_start').prop('disabled', true);
        $('.[% QuestionName() %]_during, .question').show();
        $('#next_button, #previous_button').css('visibility', 'visible');
        var interval = setInterval(function(){
            countdown--;
            $('#[% QuestionName() %]_Timer').val(countdown);
            $('.[% QuestionName() %]_countdown').text(countdown + ' second' + (countdown != 1 ? 's' : ''));
            if (countdown == 0) {
                $('.[% QuestionName() %]_during').hide();
                $('.[% QuestionName() %]_after').show();
                $('.question:not(#[% QuestionName() %]_div)').hide();
                clearInterval(interval);
            }
        }, 1000);
    });
})
</script>
answered Feb 5 by Zachary Platinum Sawtooth Software, Inc. (70,300 points)
It works ! Thank you again Zachary for your quick support !
...