计时器停止时显示答案

时间:2015-11-19 09:21:10

标签: javascript php

我已经创建了一个测验系统,我尝试创建一个条件,如果时间到了,这个条件很简单,那么正确的答案会显示出来,按钮会被禁用但是我很困惑,无法对我做出一些逻辑需要你帮助我希望你能帮助我

谢谢

<?php 
function answer() {
    $answer = $_POST["ans"];
    if($answer == 'b') {
        echo "Correct answer!";
    } else {
        echo "Wrong answer!";
    }
}
$correct = 'b';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Quiz Sample</title>
<script type="text/javascript">
   function countdown(secs, elem, correct) {
    var answer  = correct;
    var element = document.getElementById(elem);
    element.innerHTML = "Please wait for "+secs+" Seconds"; 
    if(secs < 1) {
        clearTimeout(timer);
        element.innerHTML = "Timer completed Correct answer is"+answer+" !";                
    }
    secs--;
    var timer = setTimeout('countdown('+secs+', "'+elem+'")', 1000);
  }
  </script>
  </head>
<body>
    <?php    
        if(isset($_POST["sub"])) {
            echo answer();
        }
    ?>
    <div id="status"></div>
    <form method="POST" action="quiz_test.php">
    <p>The question followed is below:</p>
        <input type="radio" value="a" name="ans" /> A
        <input type="radio" value="b" name="ans" /> B
        <input type="radio" value="c" name="ans" /> C
        <input type="radio" value="d" name="ans" /> D
    <input type="submit" name="sub" />
    </form>
    <script type="text/javascript">countdown(3, 'status', '<?php echo $correct; ?>');</script>
     </body>
     </html>

4 个答案:

答案 0 :(得分:1)

可以这样做......看看吧......

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Quiz Sample</title>
</head>
<body>
    <div id="status"></div>
    <form method="POST" action="quiz_test.php">
    <p>The question followed is below:</p>
        <input type="radio" value="a" name="ans" class="a" /> A
        <input type="radio" value="b" name="ans" class="b" /> B
        <input type="radio" value="c" name="ans" class="c" /> C
        <input type="radio" value="d" name="ans" class="d" /> D
    <input type="submit" name="sub" />
    </form>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
    	$(document).ready(function(){
    		var correctAns = "a";
    		setTimeout(showUpCorrectAns, 1000, correctAns);
    	});

    	function showUpCorrectAns(correctAns){
    		$('input[type="submit"]').attr('disabled',true);
    		$('input.'+correctAns).attr('checked','checked');
    	}
    </script>

</body>
</html>

答案 1 :(得分:1)

您错过了一个参数,即变量correct

你也不需要在elem变量上加上额外的引号,因为它已经是一个字符串..

setTimeout('countdown('+secs+', '+elem+', '+correct +')', 1000);

还添加代码以停用提交按钮

答案 2 :(得分:0)

你为什么条件失败的原因是虽然你正在调用函数&#34; countdown()&#34;递归地说,你没有传递正确答案,即&#34; var answer&#34;。

更正的代码是:

<?php 
function answer() {
    $answer = $_POST["ans"];
    if($answer == 'b') {
        echo "Correct answer!";
    } else {
        echo "Wrong answer!";
    }
}
$correct = 'b';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Quiz Sample</title>
<script type="text/javascript">
   function countdown(secs, elem, correct) {
    if (secs >= 0){
    console.log(correct);
    var answer  = correct;
    var element = document.getElementById(elem);
    element.innerHTML = "Please wait for "+secs+" Seconds"; 
    if(secs < 1) {
        clearTimeout(timer);
        element.innerHTML = "Timer completed. Correct answer is "+ answer +" !";                
    }
    secs--;
    var timer = setTimeout('countdown('+secs+', "'+elem+'","'+ answer +'")', 1000);
  }
}
  </script>
  </head>
<body>
    <?php    
        if(isset($_POST["sub"])) {
            echo answer();
        }
    ?>
    <div id="status"></div>
    <form method="POST" action="quiz_test.php">
    <p>The question followed is below:</p>
        <input type="radio" value="a" name="ans" /> A
        <input type="radio" value="b" name="ans" /> B
        <input type="radio" value="c" name="ans" /> C
        <input type="radio" value="d" name="ans" /> D
    <input type="submit" name="sub" />
    </form>
    <script type="text/javascript">countdown(10, 'status', '<?php echo $correct; ?>');</script>
     </body>
     </html>

答案 3 :(得分:0)

一个。你没有通过倒计时的第三个参数()
湾你错过了document.getElementById('sub').disabled=true;
C。计时器未停止正确

&#13;
&#13;
<?php 
function answer() {
    $answer = $_POST["ans"];
    if($answer == 'b') {
        echo "Correct answer!";
    } else {
        echo "Wrong answer!";
    }
}
$correct = 'b';
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Quiz Sample</title>
    <script type="text/javascript">
        var timer;

        function countdown(secs, elem, correct) {
            var answer = correct;
            var element = document.getElementById(elem);
            element.innerHTML = "Please wait for " + --secs + " Seconds";
            timer = setTimeout('countdown(' + secs + ', "' + elem + '", "' + answer + '")', 1000);
            if (secs < 1) {
                clearTimeout(timer);
                element.innerHTML = "Timer completed Correct answer is " + answer + " !";
                document.getElementById('sub').disabled = true;
            }
        }
    </script>
</head>

<body>
    <?php if(isset($_POST[ "sub"])) { echo answer(); } ?>
    <div id="status"></div>
    <form method="POST" action="quiz_test.php">
        <p>The question followed is below:</p>
        <input type="radio" value="a" name="ans" />A
        <input type="radio" value="b" name="ans" />B
        <input type="radio" value="c" name="ans" />C
        <input type="radio" value="d" name="ans" />D
        <input type="submit" name="sub" id="sub" />
    </form>
    <script type="text/javascript">
        countdown(3, 'status', '<?php echo $correct; ?>');
    </script>
</body>
</html>
&#13;
&#13;
&#13;

请记住,在此处的代码段中,PHP不会被执行,但正确的答案将在您正确运行时打印出来。