Help needed to finish counter code please!

Discussion in 'JavaScript' started by PaulF, Jun 9, 2008.

  1. #1
    Hi all

    I have this timer code which works fine except I am trying to get it to count down from 57min exactly.

    You will see from the code that it is basically ... get the time NOW and add 57 mins to it then count down to zero. At zero do something else!

    The display during countdown needs to be You have X min X secs left

    I have got this far but everytime I try to change the code to achieve the above I break it!

    Can anyone please help to a) add 57 mins to time now and b) display You have X min X secs left?

    Thanks in advance.

    //start countdown 
    
    
    
    function countdown_clock(year, month, day, hour, minute, format) 
             { 
             //I chose a div as the container for the timer, but 
             //it can be an input tag inside a form, or anything 
             //who's displayed content can be changed through 
             //client-side scripting.        html_code = '<div id="countdown"></div>'; 
              
             document.write(html_code); 
              
             countdown(year, month, day, hour, minute, format);                
             } 
              
    function countdown(year, month, day, hour, minute, format) 
             { 
             Today = new Date(); 
             Todays_Year = Today.getFullYear() - 2000; 
             Todays_Month = Today.getMonth();                  
              
             //Convert both today's date and the target date into miliseconds.                            
             Todays_Date = (new Date(Todays_Year, Todays_Month, Today.getDate(), 
                                     Today.getHours(), Today.getMinutes(), Today.getSeconds())).getTime();                                  
             Target_Date = (new Date(year, month - 1, day, hour, minute, 00)).getTime();                  
              
             //Find their difference, and convert that into seconds.                  
             Time_Left = Math.round((Target_Date - Todays_Date) / 1000); 
              
    // add 57 min to above time code 
           
             if(Time_Left < 0) 
             { 
                Time_Left = 0; 
             //alert('BOOM!'); 
             } 
    
              
              
             switch(format) 
                   { 
                   case 0: 
                       //The simplest way to display the time left 
                        document.all.countdown.innerHTML = Time_Left + ' seconds'; 
                        break; 
                   case 1: 
                       //More datailed 
                        days = Math.floor(Time_Left / (60 * 60 * 24)); 
                        Time_Left %= (60 * 60 * 24); 
                        hours = Math.floor(Time_Left / (60 * 60)); 
                        Time_Left %= (60 * 60); 
                        minutes = Math.floor(Time_Left / 60); 
                        Time_Left %= 60; 
                        seconds = Time_Left; 
                        
                        dps = 's'; hps = 's'; mps = 's'; sps = 's'; 
                       //ps is short for plural suffix 
                        if(days == 1) dps =''; 
                        if(hours == 1) hps =''; 
                        if(minutes == 1) mps =''; 
                        if(seconds == 1) sps =''; 
                        
                        document.all.countdown.innerHTML = days + ' day' + dps + ' '; 
                        document.all.countdown.innerHTML += hours + ' hour' + hps + ' '; 
                        document.all.countdown.innerHTML += minutes + ' minute' + mps + ' and '; 
                        document.all.countdown.innerHTML += seconds + ' second' + sps; 
                        break; 
                   default: 
                        document.all.countdown.innerHTML = Time_Left + ' seconds'; 
                   } 
                    
          //Recursive call, keeps the clock ticking         setTimeout('countdown(' + year + ',' + month + ',' + day + ',' + hour + ',' + minute + ',' + format + ');', 1000); 
             }
    Code (markup):

     
    PaulF, Jun 9, 2008 IP
  2. PaulF

    PaulF Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Ok ... so I found a solution to the code and it now works.

    What I need now is to call my new file 'timer.js' from another file 'generate.js' Easy except it will be called to time a quiz and thererfore needs to be called just ONCE. Everytime the quiz loads a new question it resets the timer ... not a lot of good!

    Can someone please tell me how I can call it just once and then count down till either zero is reached OR another file ... 'results.js' is called which automatically occurs after 50 questions have been answered?

    Paul
     
    PaulF, Jun 10, 2008 IP
  3. sharry

    sharry Peon

    Messages:
    319
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #3
    See i would suggest a algorithm that uses ajax to fetch the question, i think in your algorithm each question generated in a new page isnt it? if so all the js variables will be refreshed, use ajax and avoid the refreshing of the variable
    things you need
    1. A timer function
    2. jquery ajax function: this functions fetches the questions as well as increments the questions counter variable
    hope this helps
     
    sharry, Jun 10, 2008 IP
  4. PaulF

    PaulF Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Sharry ... thanks for the input. Unfortunately I haven't got a clue what that means. lol

    I am struggling to do it as it is with stealing bits of code from here and there and using tutorials to put various things together then figure out why it isnt talking to each other.

    I was thinking ... could I just included an IF(statement) something like:

    if ($question == 1)
    timer ();

    else
    bypass timer code


    Ive added my code below (js bit in bold) with poss if statement before! This if statement doesnt work though!

    <html>
    
    <head>
    <title>DSA Generate</title>
    <link rel="stylesheet" type="text/css" href="setup_style.css" />
    
    </head>
    
    <body>
    
    
    
    
    <?php
    // Initialise session vars
    session_start();
    $number = rand(1,300);
    $_SESSION['questionID']=$number;
    $correct=$_SESSION['Correct'];
    $incorrect=$_SESSION['Incorrect'];
    $numasked=$_SESSION['Numasked'];
    ?>
    
    <?php
    //<link rel="stylesheet" type="text/css" href="setup_style.css" />
    // Setup three variables to use as the arguments for the sql_connect function.
    // Serves the purpose of keeping login information in one spot so that only one change needs making to propgate thru the code.
    // Dunno if that'll be of value but it certainly can't hurt.
    $servername = "localhost";
    $username = "root";
    $password = "";
    
    // Initialise connection to MySQL using variables defined earlier.
    $sql_connection = mysql_connect($hostname, $username, $password)
    or die("Failed to connect to SQL!" . "<br><br>" . mysql_error());
    // echo "Succesfully connected to SQL!" . "<br><br>";
    
    // Select the database that we wish to work with
    mysql_select_db("DSA_Questions",$sql_connection);
    
    // Generate sql query to insert data into cells
    $query = sprintf("SELECT * FROM Section_One WHERE ID='$number'");
    
    // Perform Query
    $result = mysql_query($query);
    
    // Check result
    // This shows the actual query sent to MySQL, and the error. Useful for debugging.
    if (!$result) {
        $message  = 'Invalid query: ' . mysql_error() . "\n";
        $message .= 'Whole query: ' . $query;
        die($message);
    }
    
    // Generate variables from database elements
    while($row = mysql_fetch_array($result))
      {  
    	$idno = $row['ID'];
    	$ques = $row['Question'];
    	$opta = $row['OptionA']; 
    	$optb = $row['OptionB'];
    	$optc = $row['OptionC']; 
    	$optd = $row['OptionD'];
    	$answ = $row['Answer']; 
      }
    
    
    
    // Close connection to SQL and exit gracefully.
    // echo "Closing SQL Connection.."."<br>";
    mysql_close($sql_connection);
    ?>
    
    <?php
    // echo "session id = ".$_SESSION['questionID'];
    echo "<br><br><br>";
    //echo $answ;
    $question=$numasked+1;
    ?>
    
    
    
    <?php
    //some kind of if ... else statenment needed in here to allow counter to initialise just on first question
    //if ($question == 1)
    //timer()
    //this code doesnt work!
    ?>
    
    
    
    
    [B]<div id="TimeLeft">You have 57 min 0 secs remaining</div> 
    
    <script> 
    <!-- 
    // 
     var sec=0 
     var min=57  
    
    function display(){ 
     if (sec<=0){ 
        sec=60 
        min-=1 
     } 
        if (min<=-1){ 
           sec=0 
           min+=1 
           alert('DONE'); 
        } else { 
           sec-=1 
           document.getElementById('TimeLeft').innerHTML="You have "+min+" min "+sec+" remaining" 
           setTimeout("display()",1000) 
        } 
    } 
    display() 
    --> 
    </script> [/B]
    
    
    
    <br><br><br>
    <table class="alpha" frame=border align="center" width="100%">
    	<tr>
    		<td><?php echo "Q. ".$question."/50<br><br>";?></td>
    	</tr>
    	<tr>
    		<td class="alpha" valign=top ><?php echo $ques;?></td>
    	<tr>
    	<tr>
    		<td>
    			<form method="post" action="Quiz_result.php">
    			<input type="radio" value="a" name="answer"><?php echo $opta;?><br>
    			<input type="radio" value="b" name="answer"><?php echo $optb;?><br>
    			<input type="radio" value="c" name="answer"><?php echo $optc;?><br>
    			<input type="radio" value="d" name="answer"><?php echo $optd;?><br><br>
    			<p align="center"><input type="submit" value="Submit"></p>
    			</form>
    		</td>
    	</tr>
    </table>
    
    <table class="beta" frame=border align="center" width="100%">
    	<tr>
    		<td>
    			<form method="post" action="Quiz_end.php">
    			<p align="center"><input type="submit" value="Finish Test"></p>
    			</form>
    		</td>
    	</tr>	
    </table>
    </body>
    
    </html>
    Code (markup):
     
    PaulF, Jun 11, 2008 IP
  5. sharry

    sharry Peon

    Messages:
    319
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #5
    lol np, sorry i cant help much now, im busy with my college exams, or else i would have written the entire code o the algorithm i suggest :)
     
    sharry, Jun 11, 2008 IP
  6. PaulF

    PaulF Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Sharry ... thanks for the thought.

    Mike ... I have the quiz bit sorted. In fact the only bit I am stuck on is getting the timer to run until it expires rather than reset when each question loads.

    I could not code each question separately as you do for two reasons.

    1. There are two different quizes, one has 937 questions and the other has 1023 questions.

    2. The quizes are mock exams for learner drivers and driving instructors and therefore need to be timed while maintaining a randon selection of 50 and 100questions respectively.

    All I need to know is how can I put in an if statement to prevent the timer code from initiating again if the question number is NOT q1??

    if (question == 1)
    run timer code
    else
    do not run timer code

    So far all of my efforts have fallen over and broke the programme

    Paul
     
    PaulF, Jun 11, 2008 IP