search

formtools / core

The Form Tools Core.
https://formtools.org
207 stars 78 forks source link

Timer for forms #117

Closed georgeoffley closed 6 years ago

georgeoffley commented 6 years ago

I need to have a seconds timer for my forms. The idea is that when someone starts the form, our users click a button and a timer starts to count up. That way we can accurately time how long it takes for our users to complete the assignments on the form.

I am testing some ideas, specifically creating a count up timer in PHP or JS and putting a button on the form and then possibly trying to figure out a way to include the value of the timer when they hit the submit button.

Has anyone done this before, or know an easy way to do this?

Thank you!

benkeen commented 6 years ago

Hey @georGEO1989, interesting! Yeah for something like this you'd really need to do something custom. It's very doable - you could approach this in a couple of different ways, but both would require PHP and programming knowledge. I started jotting down a few ideas on how to do this, but they're kind of technical I'm afraid. :(

georgeoffley commented 6 years ago

I guess it's a good thing I write software for a living then. I implemented a edit which I applied directly to the form PHP file. It's a simple JS interval function which I set to start on load. I can submit a pull request and write something up.

benkeen commented 6 years ago

Oh, haha! That's great you found a solution - FT users are by and large end users rather than developers, I didn't mean to slight.

georgeoffley commented 6 years ago

No slight at all! Keep up the good work. Let me get to work tomorrow and I'll update with the code I used and close the issue.

georgeoffley commented 6 years ago

My solution was to add a JavaScript block at the bottom of the forms PHP. Like so:

<script type="text/javascript">

var counter = 0;
var timer;

function countUP () {
        // increment the counter by 1
    counter = counter + 1;

        // Had to look at the HTML to get the elements name, however it's the form field value
    document.getElementsByName("timer_container")[0].value = counter;
 }

</script>

After that I just set the function to run on load so that the timer starts once the page loads, which you just add the body element using HTML as the body tags are not included the PHP files:

<body onload="timer=setInterval('countUP()', 1000 ); type();">