O/E question controlled by a start button and timer

Question

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.

Answer 1

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>

Comments

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.