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 ?

asked Feb 5, 2018 by s_wales (160 points)

1 Answer

0 votes
Try this modified code:

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

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

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

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

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

#[% QuestionName() %]_start {
    padding: 6px;
    margin: 4px;

$(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(){
            $('#[% 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();
        }, 1000);
answered Feb 5, 2018 by Zachary Platinum Sawtooth Software, Inc. (100,925 points)
It works ! Thank you again Zachary for your quick support !