timer or rather horizontal time bar with progress before submit

[Mammofile]

Hello,

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...

This procedure has been working for 4 years without any problems, using javascript (see below). HOWEVER: it doesn't work in all browsers, e.g. Firefox doesn't recognize it, and the result is that Firefox users have all the time in the world to complete or research their answers :-)

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?

Any ideas? If needed, I can copypaste the existing javascript. It works in IE, but I would like to get rid of it all together...

Thanks in advance,

Thomas (Belgium)

[yamaharuss]

It could be a simple thing causing it to work only in IE. Why not post your code, maybe we can spot it.. rather than changing your entire schema?

[Mammofile]

Dear Yamaharuss,
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 :-))

 

    <!--
    #bar, #barbackground
    {
    position:absolute;
    left:0;
    top:0;
    background-color:#FFFFFF;
    }
    
    #barbackground{
    background-color:#c0c0c0;
    }
    -->
    </style>
    <CFOUTPUT>
    
    <CFIF #selectvragen.Vragen_seconds# EQ 0><CFSET seconden=60><CFELSE><CFSET seconden=#selectvragen.Vragen_seconds#+2></CFIF>
    <script language="JavaScript1.2">
    //1) Set the duration for the progress bar to complete loading (in seconds)
    var duration=#seconden#
    function postaction(){
    	document.forms.formulier.submit()
    //Example action could be to navigate to a URL, like following:
    //window.location="submit.cfm?...(deleted)...#CreateODBCDateTime(now())#"
    
    }
    
    ///Done Editing/////////////
    var clipright=0
    var widthIE=0
    var widthNS=0
    
    function initializebar(){
    if (document.all){
    baranchor.style.visibility="visible"
    widthIE=bar.style.pixelWidth
    startIE=setInterval("increaseIE()",50)
    }
    if (document.layers){
    widthNS=document.baranchorNS.document.barbackgroundNS.clip.width
    document.baranchorNS.document.barNS.clip.right=0
    document.baranchorNS.visibility="show"
    
    startNS=setInterval("increaseNS()",50)
    }
    }
    
    function increaseIE(){
    bar.style.clip="rect(0 "+clipright+" auto 0)"
    window.status="Loading..."
    if (clipright<widthIE)
    clipright=clipright+(widthIE/(duration*20))
    else{
    window.status=''
    clearInterval(startIE)
    postaction()
    }
    }
    
    function increaseNS(){
    if (clipright<202){
    window.status="Loading..."
    document.baranchorNS.document.barNS.clip.right=clipright
    clipright=clipright+(widthNS/(duration*20))
    }
    else{
    window.status=''
    clearInterval(startNS)
    postaction()
    }
    }
    window.onload=initializebar
    </script>
    
    </CFOUTPUT>
    			<script language="JavaScript1.2">
    			if (document.all){
    			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>')
    			document.write('</div>')
    			}
    			</script>

I hope this will clarify some things, or that it will allow you to see how to make it work in all browsers.

Thanks in advance!

Thomas (Belgium)

[yamaharuss]

document.all is not supported in FF. Get rid of the JS surrounding that code and use simple divs at getElementById

[Mammofile]

Yahamaruss,
Thanks a lot for your answer, that seems promising. Now, this being said, I'm a novice and my programmer doesn't know javascript. I'm starting to understand the logic :-)
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?

Kind regards,

Thomas