当计时器停止时显示答案


show answer when timer is stopped

我创建了一个测试系统,试图创建一个简单的条件。如果时间到了,正确的答案就会出现,按钮也会被禁用,但我很困惑,无法做出一些逻辑。我需要你们的帮助。我希望你们能帮我解决

谢谢

<?php 
function answer() {
    $answer = $_POST["answers"];
    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="answers" /> A
        <input type="radio" value="b" name="answers" /> B
        <input type="radio" value="c" name="answers" /> C
        <input type="radio" value="d" name="answers" /> D
    <input type="submit" name="sub" />
    </form>
    <script type="text/javascript">countdown(3, 'status', '<?php echo $correct; ?>');</script>
     </body>
     </html>

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

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

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

还添加了一个禁用提交按钮的代码

可以这样做。。。看看。。。

<!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="answers" class="a" /> A
        <input type="radio" value="b" name="answers" class="b" /> B
        <input type="radio" value="c" name="answers" class="c" /> C
        <input type="radio" value="d" name="answers" 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>

条件失败的原因是,尽管您递归地调用函数"countdown()",但您没有传递正确的答案,即"var answer"。

更正后的代码为:

<?php 
function answer() {
    $answer = $_POST["answers"];
    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="answers" /> A
        <input type="radio" value="b" name="answers" /> B
        <input type="radio" value="c" name="answers" /> C
        <input type="radio" value="d" name="answers" /> D
    <input type="submit" name="sub" />
    </form>
    <script type="text/javascript">countdown(10, 'status', '<?php echo $correct; ?>');</script>
     </body>
     </html>

a。您尚未传递countdown()的第三个参数
b.您错过了document.getElementById('sub').disabled=true;
c.计时器未正确停止

<?php 
function answer() {
    $answer = $_POST["answers"];
    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="answers" />A
        <input type="radio" value="b" name="answers" />B
        <input type="radio" value="c" name="answers" />C
        <input type="radio" value="d" name="answers" />D
        <input type="submit" name="sub" id="sub" />
    </form>
    <script type="text/javascript">
        countdown(3, 'status', '<?php echo $correct; ?>');
    </script>
</body>
</html>

请记住,在这里的代码片段中,PHP不会被执行,但当您正确运行时,会打印出正确的答案。