Have an idea?

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

O/E question controlled by a start button and timer

I have an interesting O/E question. This needs to work on all devices.

When the page loads, I need to display the question text and a start button. The start button can appear below the question script. The O/E text box and navigation buttons need to be hidden.

When the start button is hit, the O/E text box appears below the question script and start button.

At this point, a 30 second timer is activated. The respondent has 30 seconds to enter their comments. Once the 30 seconds expires, the page is auto-submitted and the next page is displayed.

As an added feature, it would look nice to see a timer counting down. The timer can be positioned along side the start button and it will appear only when the start button has been hit.

I can't see any reason why the navigation buttons would ever need to be displayed. I would leave them hidden always.

At this stage, I believe we will remove the back button to prevent respondents going back to this page. This needs to be confirmed.

Any assistance is greatly appreciated.
asked May 1 by Paul Moon Platinum (55,975 points)

1 Answer

+2 votes
 
Best answer
Try placing this code wherever you want the start button to appear:

<button type="button" id="startTimer">Start</button>
<span id="timerSpan">You have 30 seconds left.</span>

<style>
#[% QuestionName() %],
.submit_div,
#timerSpan {
    display: none;
}
</style>

<script>
$(document).ready(function(){
    $('#startTimer').click(function(){
        $('#startTimer').prop('disabled', true);
        $('#timerSpan, #[% QuestionName() %]').show();
        var countdown = 30;
        setInterval(function(){
            countdown--;
            $('#timerSpan').text('You have ' + countdown + ' second' + (countdown != 1 ? 's' : '') + ' left.');
            if (!countdown) {
                SSI_SubmitMe();
            }
        }, 1000);
    });
})
</script>
answered May 1 by Zachary Platinum Sawtooth Software, Inc. (63,900 points)
selected May 3 by Paul Moon
That's a nice bit of code.  I played with that a bit and it works nicely.  I did note that you need to make sure the open end is marked as not required otherwise it will kick out an error and start a negative countdown with no ability to manually submit.
Apologies gents for not getting back to you sooner. The projects have been keeping me extremely busy.

Thanks for chipping in Jay. I tested the code with the required box ticked so I simply unticked it. I believe that's the correct setup as some respondents may not have an answer.

Zachary - a work of art mate! Really impressive. I hope other Sawtooth Software users gain benefit from it too. It's a beauty.

One additional tweak I would like to request is when you click on the START button, I see the timer starts and the O/E text box appears. I would also like a statement or some bolded script to appear above the O/E text box.

Thanks again for such a wonderful solution.
You can repeat what was done with "#timerSpan" to create a new span that displays that way.  So the HTML would just be:

<span id="instructions">Hello world.</span>


Then the CSS and JS just needs a little update to make "#instructions" work the same as "#timerSpan":

#[% QuestionName() %],
.submit_div,
#timerSpan,
#instructions {
    display: none;
}


$('#timerSpan, #[% QuestionName() %], #instructions').show();
Nice work.

I just had to pop a couple of breaks in and make the text  bold. All good.

Splendid result really. Love your work Mr Anderson.
Awesome.  This sounds like something that might be useful for the community library.  I could create a text question that hides all other questions until pressed, then hide the questions / submit the page after a duration.  Would that be useful?  Are there other features that would be helpful in such a tool?
I think a general timer question (via  a text question is fine) is a great idea so instead of submitting via the navigation button, the page submission is controlled via the timer.

This can be applied to all question types the user desires.

A timer submit question if you like! Would do no harm in joining the question library.

Great stuff Zachary!
I would agree.  The question library has been very useful to me so far.  A timer question could be useful.
Regarding other features, there could be subtle differences from one question to another but the key feature is to display a START button, hide all questions, then auto-submit when the timer has expired.

You would have to be careful with the back navigation button and the required tick box.
...