timer or rather horizontal time bar with progress before submit
I have an online "language test" containing 50 questions. Each question has its own maxmimum duration, expressed in seconds. The number of seconds for each question is a variable in the dbase. Let's say the variable "seconds" is 60 seconds. This means that the user has 60 seconds to answer the question.
IF the user answers within 60 seconds, he clicks on Submit to send his answer(s) to the server.
IF the user does NOT answer within 60 seconds, the page is automatically Submitted.
In the top right corner of the test window, the candidate can see the horizontal timebar moving. The number of seconds isn't shown, but the candidate can clearly see when his time is about to expire, because the horizontal time bar slowly dissappears...
So that's why I am currently looking for a way to use JQUERY. I've discovered JQUERY only a couple of weeks ago (I'm not a programmer). I've used JQUERY for a number of things, and it works like a charm. And, moreover, and more importantly, JQUERY really does seem to work in ALL browsers!
However, I don't seem to find the right JQUERY code that could do the trick. I wouldn"'t know how to look for it, is it a simple command or should I use a plugin?
Thanks for your willingness to help.
I've copypasted the code (it was written by a person I no longer know). To be as complete as possible, I've actually pasted the entire page. You'll see that we can change the appearance of the time bar using a CSS, and so on...
As I had explained, the duration is a variable from the dbase, called seconden (Dutch for seconds :-))
<CFIF #selectvragen.Vragen_seconds# EQ 0><CFSET seconden=60><CFELSE><CFSET seconden=#selectvragen.Vragen_seconds#+2></CFIF>
//1) Set the duration for the progress bar to complete loading (in seconds)
//Example action could be to navigate to a URL, like following:
bar.style.clip="rect(0 "+clipright+" auto 0)"
document.write('<div id="baranchor" style="position:relative;width:200px;height:10px;visibility:hidden;">')
document.write('<div id="barbackground" style="width:200px;height:10px;z-index:9"></div>')
document.write('<div id="bar" style="width:200px;height:10px;z-index:10"></div>')
I hope this will clarify some things, or that it will allow you to see how to make it work in all browsers.
Could you give me a code example of what it would look like using your suggestion?
And also, would it then work in all browsers, you reckon, or will I still have to check?