How to disable radio buttons after certain amount of time

Discussion in 'JavaScript' started by daforumde, Oct 17, 2009.

  1. #1
    hi

    i have following code
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <!--<meta http-equiv="refresh" content="51;url=quiz2action.php" />-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <div id = "time"></div>
    
    <script type = "text/javascript">
    }
    
    function display(secs) {
    if (secs <= 0) {
    alert("Your time is up!");
    return;
    }
    secs--;
    document.getElementById("time").innerHTML = "You have " +
    Math.floor(secs/60) + ":" + (secs % 60 < 10 ? "0" : "" ) + (secs % 60) + " left";
    setTimeout("display("+secs+")",1000);
    }
    
    display(51); // 300 seconds = 5 minutes
    
    </script>
    <p>
    <form name="form1" method="post" action="quiz2action.php">
      <?php
    $db = mysql_connect("localhost");
    mysql_select_db("videoshop", $db);
    
    //$queryquestions = "SELECT * FROM quiz ORDER BY RAND()" or die();
    $queryquestions = "SELECT * FROM quiz" or die(); 
    $resultquestions = mysql_query($queryquestions) or die();
    
    while($rowquestions = mysql_fetch_array($resultquestions))
    {
       $questionid = $rowquestions['id'];
       $question = $rowquestions['question'];
       $answerone = $rowquestions['option1'];
       $answertwo = $rowquestions['option2'];
       $answerthree = $rowquestions['option3'];
       $answerfour = $rowquestions['option4'];
       echo "   
        <b>Question $questionid: $question</b><br>
       <input type=\"radio\" name=\"question[$questionid]\" value=\"1\"> $answerone <br>
       <input type=\"radio\" name=\"question[$questionid]\" value=\"2\"> $answertwo <br>
       <input type=\"radio\" name=\"question[$questionid]\" value=\"3\"> $answerthree <br>
       <input type=\"radio\" name=\"question[$questionid]\" value=\"4\"> $answerfour <br>";
       
       echo "<br><br>";
    }
    
    ?>
    </p>
      <label>
      <input type="submit" name="Submit" id="button" value="Submit">
      </label>
    </form>
    <p>&nbsp;</p>
    </body>
    </html>
    Code (markup):

    above is the code of quiz which is created in php. that quiz is fine. the problem in in js script above the php script.
    what i want is when the time of 5 mins is completed then i want to disable all those radio buttons except submit button.

    how can this be done?
     
    daforumde, Oct 17, 2009 IP
  2. Luke Carrier

    Luke Carrier Peon

    Messages:
    19
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    That wouldn't be sensible - it would make more sense to track the five minutes on the server side with PHP (you'd need to store this in your database, kind of like a session key). Users with Javascript disabled, or cheating users, could easily work around the Javascript time limit and finish the quiz at their own pace. If you still want to do it, however, you'd need to give every radio button an ID (maybe $id_1, $id_2, $id_3 and $id_4 or something) and use setTimeout() to disable them all. If you like, I could rewrite the above script for you?

    P.S. I would link you to the W3Schools page explaining the function, but I can't because of DP's live link rule -_-
     
    Luke Carrier, Oct 17, 2009 IP
  3. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #3
    what's this live link rule?

    http://mooshell.net/haPcQ/ -> using mootools, auto find all inputs after NN minutes and disable them, fade them out and add a class to them.
     
    dimitar christoff, Oct 17, 2009 IP
  4. daforumde

    daforumde Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Luke Carrier i will really appreciate your effort if you rewrite my code
     
    daforumde, Oct 17, 2009 IP
  5. Luke Carrier

    Luke Carrier Peon

    Messages:
    19
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Live link rule is in the FAQ - those with less than 10 posts can't post links. It makes sense to prevent spammers, but lowering it to 5 may make more sense when you're trying to help users. I won't complain though, I can understand that running DP requires a fair bit of administration :rolleyes:

    This should work, but the cheats can still work around it by disabling JS or tampering with the source of you page:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <!--<meta http-equiv="refresh" content="51;url=quiz2action.php" />-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    
    <script type = "text/javascript"><!--
    	function DisableFormInputs() {
    		FormInputs = document.getElementsByTagName('input');
    		for (var Count = 0; Count < FormInputs.length; Count++) {
    			if (FormInputs[Count].type == 'radio') {
    				FormInputs[Count].disabled = 'disabled';
    			}
    		}
    	}
    //--></script>
    
    </head>
    
    <body onload="setTimeout('DisableFormInputs()', 300000)">
    <div id="time"></div>
    <p>
    <form name="form1" method="post" action="quiz2action.php">
      <?php
    $db = mysql_connect("localhost");
    mysql_select_db("videoshop", $db);
    
    //$queryquestions = "SELECT * FROM quiz ORDER BY RAND()" or die();
    $queryquestions = "SELECT * FROM quiz" or die(); 
    $resultquestions = mysql_query($queryquestions) or die();
    
    while($rowquestions = mysql_fetch_array($resultquestions))
    {
       $questionid = $rowquestions['id'];
       $question = $rowquestions['question'];
       $answerone = $rowquestions['option1'];
       $answertwo = $rowquestions['option2'];
       $answerthree = $rowquestions['option3'];
       $answerfour = $rowquestions['option4'];
       echo "   
        <b>Question $questionid: $question</b><br>
       <input class=\"FormInput\" type=\"radio\" name=\"question[$questionid]\" value=\"1\"> $answerone <br>
       <input class=\"FormInput\" type=\"radio\" name=\"question[$questionid]\" value=\"2\"> $answertwo <br>
       <input class=\"FormInput\" type=\"radio\" name=\"question[$questionid]\" value=\"3\"> $answerthree <br>
       <input class=\"FormInput\" type=\"radio\" name=\"question[$questionid]\" value=\"4\"> $answerfour <br>";
       
       echo "<br><br>";
    }
    
    ?>
    </p>
      <label>
      <input type="submit" name="Submit" id="button" value="Submit">
      </label>
    </form>
    <p>&nbsp;</p>
    </body>
    </html>
    Code (markup):
     
    Luke Carrier, Oct 18, 2009 IP