www.webdeveloper.com
Results 1 to 5 of 5

Thread: timer or rather horizontal time bar with progress before submit

  1. #1
    Join Date
    Nov 2010
    Posts
    5

    timer or rather horizontal time bar with progress before submit

    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)

  2. #2
    Join Date
    Jan 2008
    Location
    Florida
    Posts
    1,227
    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?

  3. #3
    Join Date
    Nov 2010
    Posts
    5
    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 :-))

    Code:
     
    
        <!--
        #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)

  4. #4
    Join Date
    Jan 2008
    Location
    Florida
    Posts
    1,227
    document.all is not supported in FF. Get rid of the JS surrounding that code and use simple divs at getElementById

  5. #5
    Join Date
    Nov 2010
    Posts
    5
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles