Adding a Time Limit to Submission Forms

3 minutes to read

A ticking clock can be an excellent motivator. In certain situations such as surveys, questionnaires and polls, a time limit can help ensure that the users enter their first opinion and don’t over-analyze.  This article explains how you can add a time limit to your Submission Form DataPages that includes visual feedback and will automatically submit the form when time runs out. This implementation includes a pie timer using the HTML5 canvas tag.  For non-HTML5–ready browsers, there is a countdown of the remaining seconds.

Steps:

Create a Submission Form DataPage. Remember that this form will be submitted even if the user failed to enter all responses. Thus, we suggest keeping the following things in mind:

- All required information should be separated into another Submission Form.  Errors caused by required fields will reload the DataPage and reset the timer.
- Consistency in question type will allow users to complete more questions.  For example, multiple choice (radio buttons), true/false (checkboxes), short answer (text fields), and essay questions (text areas) are all easily created in a Submission Form.  Try to group questions by type so that time is not lost due to frequent changes in instructions.

Insert an HTML block and in the Source mode copy-paste the following JavaScript code. It includes both the HTML5 solution and the fallback code for non-HTML5–ready browsers.

Adjust the code as needed.

- Adjust the time: the line var myseconds = 30 provides the number of seconds for your timer.
- Adjust the pie timer color: The mycolor variable is located immediately after the myseconds variable.  You can adjust the color and transparency using RGBA format.  You can use an online color picking tool to find the appropriate values for red (255), green (100), and blue(0).  The last value (0.8) determines the opacity of the pie timer.
- Adjust the pie timer size: The pie timer size can be adjusted using the height and width variables near the top of the code.
- Adjust the counter: The text used for non-HTML5-ready browsers can be adjusted by changing the CSS style attributes located near the top of the code.  Color, font-family, and font-size can all be adjusted to suit your needs.
- Adjust the user warning message: The users will see a message saying how many minutes and how many seconds are available for them to complete the following form.

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.
For assistance with further customization based on your specific application requirements, please contact our Professional Services team.

code1

<div id="pie_to_be"></div>
<style>
div#pie_to_be { width: 50px; height: 50px; position: fixed; top:10px; right:10px; margin: 15px; color:#444444; font-family:arial; font-size:32px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
var myseconds = 30;
var mycolor = 'rgba(255, 100, 0, 0.8)';
alert('You will have ' + Math.floor(myseconds / 60) + ' minutes and ' + myseconds % 60 + ' seconds to finish. Press “OK” to begin.');
$(function() {
$('div#pie_to_be').pietimer({
seconds: myseconds,
color: mycolor
}, function() {
$('#caspioform').submit();
});
});
(function($) {
jQuery.fn.pietimer = function(options, callback) {
var settings = {
'seconds': 10,
'color': 'rgba(255, 255, 255, 0.8)',
'height': this.height(),
'width': this.width()
};
if (options) {
$.extend(settings, options);
}
this.html('<canvas id="pie_timer" width="' + settings.height + '" height="' + settings.height + '">' + settings.seconds + '</canvas>');
var val = 360;
interval = setInterval(timer, 40);

function timer() {
var canvas = document.getElementById('pie_timer');
if (canvas.getContext) {
val -= (360 / settings.seconds) / 24;
if (val <= 0) {
clearInterval(interval);
canvas.width = canvas.width;
if (typeof callback == 'function') {
callback.call();
}
} else {
canvas.width = canvas.width;
var ctx = canvas.getContext('2d');
var canvas_size = [canvas.width, canvas.height];
var radius = Math.min(canvas_size[0], canvas_size[1]) / 2;
var center = [canvas_size[0] / 2, canvas_size[1] / 2];
ctx.beginPath();
ctx.moveTo(center[0], center[1]);
var start = (3 * Math.PI) / 2;
ctx.arc(center[0], center[1], radius, start - val * (Math.PI / 180), start, false);
ctx.closePath();
ctx.fillStyle = settings.color;
ctx.fill();
}
}
}
return this;
};
})(jQuery);
var isMSIE = /*@cc_on!@*/ 0;
if (isMSIE) {
function ticker() {
document.getElementById('pie_to_be').innerHTML = parseInt(document.getElementById('pie_to_be').innerHTML) - 1;
}
setInterval("ticker()", 1000);
setTimeout("document.getElementById('caspioform').submit()", myseconds * 1000);
}
</script>