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 (View the original source code of the HTML5 pie clock ).  For non-HTML5 ready browsers, there is a countdown of remaining seconds.

Click here to load this Caspio Online Database.

Steps to implementing a countdown clock:

  1. Create a Submission Form DataPage

    Create your submission form normally.  Remember that since this form will be submitted whether or not the user has finished keep the following things in mind:

    • All required information should be separated to 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.
  2. Insert the following JavaScript code

    This code includes both the HTML5 solution and the fallback code for non-HTML5 ready browsers.  Using the insert button at the bottom-right of the DataPage Elements panel, insert an HTML block.  Go to the Source mode and insert the following code.

    <div id="pie_to_be"></div>
    div#pie_to_be { width: 50px; height: 50px; position: fixed; top:10px; right:10px; margin: 15px; color:#444444; font-family:arial; font-size:32px; }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    var myseconds = 30;
    var mycolor = 'rgba(255, 100, 0, 0.8)';
    alert('You will have '+Math.floor(myseconds/60)+' minutes and '+myseconds+' 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);}
  3. Adjust the code as needed

    • Adjust the time: Find the line that starts var myseconds = 30; This is 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.

Attention Note Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge’s 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.