New to the community? Start here

[Forminator Pro] Timer for an online quiz / test

0

Hi,

We are looking to create a test with Forminator Pro and wanted to know if you know if you recommend a timer plugin or have one yourselves?

Mon, 1 Oct 2018 11:03:08
More Forminator Pro discussions
Forminator Pro
  • Adam
    • Support Gorilla

    Hi Alan Baker

    I hope you’re well today and thank you for your question!

    Currently there’s no “timer” feature in Forminator and we don’t have any additional plugin for this. I’m not sure also if any 3rd-party plugin would work “out of the box” as it would most likely need some sort of integration.

    While Forminator provides an API already, I’ll need to consult that with our developers. I have asked them a question whether it would be possible to add a timer and/or integrate with some 3rd-party timer solution and am awaiting their response.

    Please keep an eye on this ticket for further information and we’ll update it as soon as our developers provide us with some feedback on this.

    Best regards,

    Adam

  • Kostas
    • CTO

    Hi Alan Baker !

    As Adam Czajczyk mentioned there isn’t a ready-made solution for a timer. But I’ve come up with a fairly simple script to help you out as needed since extra plugins might be giving conflicts etc.

    As you can see in this https://www.useloom.com/share/db20c491d2524be9af4ec39272b2fd89 demo video of this function I’m using a test quiz and a countdown timer of 10seconds for purposes of preview.

    The following code can be copy/pasted into your theme’s functions.php ( preferably the child themes ) and I have some comments as well to help you but I’ll either way explain further:

    What this does and requires at least for the way I’ve set it up on my test.

    Requires: A Quiz Description so we can attach the timer text countdown there.

    What this does: it simply counts down depending on your timer input and disables the submit button if that time has passed.

    There are 2-3 things that you’ll have to edit, but I can always help you out on that if you like as well.

    1] var countDownDate = dateAdd( now, ‘second’, 10 ); – the ‘second’ should be changed to one of ‘year, quarter, month, week, day, hour, minute, second’ and ’10’ should be changed to any difference in time you’d like to countdown to. For example ‘minute’, 30 would be a 30 minute timer from the current time.

    2] $( ‘span.timer’ ).html( days + ‘d ‘ + hours + ‘h ‘ + minutes + ‘m ‘ + seconds + ‘s’ ); – can change to anything you like, for example you could just leave “seconds + ‘s'” to only show seconds instead.

    3] $( ‘span.timer’ ).html( ‘You are out of time. Please re-take the test!’ );</strange> – change into any text you’d like to show if the timer has ended.

    –

    Again this might seem a lot but I tried to make it as simple as possible on ‘edits’ required by you. If you need further help setting this up please inform me and I’ll tell you how we could achieve that into a later reply.

    Regards,

    Konstantinos

    add_action( 'wp_footer', 'timer_quiz' );
    
function timer_quiz() {
    
ob_start();
    
?>
    
<script>
    
function dateAdd(date, interval, units) {
    
var ret = new Date(date);
    
var checkRollover = function() { if( ret.getDate() != date.getDate() ) ret.setDate(0); };
    
switch(interval.toLowerCase()) {
    
case 'year'   :  ret.setFullYear(ret.getFullYear() + units); checkRollover();  break;
    
case 'quarter':  ret.setMonth(ret.getMonth() + 3*units); checkRollover();  break;
    
case 'month'  :  ret.setMonth(ret.getMonth() + units); checkRollover();  break;
    
case 'week'   :  ret.setDate(ret.getDate() + 7*units);  break;
    
case 'day'    :  ret.setDate(ret.getDate() + units);  break;
    
case 'hour'   :  ret.setTime(ret.getTime() + units*3600000);  break;
    
case 'minute' :  ret.setTime(ret.getTime() + units*60000);  break;
    
case 'second' :  ret.setTime(ret.getTime() + units*1000);  break;
    
default       :  ret = undefined;  break;
    
}
    
return ret;
    
}
    

    
( function( $ ) {
    
$( document ).ready( function() {
    
var now = new Date().getTime();
    

    
// Change to 'year, quarter, month, week, day, hour, minute, second' and add the number value of time difference that you want.
    
// Example: dateAdd( now, 'second', 10 ); will be +10 seconds countdown from current time.
    
var countDownDate = dateAdd( now, 'second', 10 );
    

    
var x = setInterval( function() {
    
var now      = new Date().getTime();
    
var distance = countDownDate - now;
    
var days     = Math.floor(distance / (1000 * 60 * 60 * 24));
    
var hours    = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    
var minutes  = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    
var seconds  = Math.floor((distance % (1000 * 60)) / 1000);
    

    
// Change the countdown output as you want.
    
// Example .html( days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's' ); would display 0d 0h 0m 10s for a +10s countdown.
    
$( 'span.timer' ).html( days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's' );
    

    
if ( distance < 0 ) {
    
//clearInterval( x );
    

    
// Change into the correct button target if needed to make it disabled.
    
$( 'span.timer' ).html( 'You are out of time. Please re-take the test!' );
    
$( '.forminator-quiz--result button' ).prop( 'disabled', true );
    
}
    
}, 100);
    

    
$( '.forminator-quiz--description' ).append( '<span class="timer" style="display:block;clear:both;"></span>' );
    
});
    
} ( jQuery ) )
    
</script>
    
<?php
    
$content = ob_get_clean();
    
echo $content;
    
}