我创建了一个测试系统,试图创建一个简单的条件。如果时间到了,正确的答案就会出现,按钮也会被禁用,但我很困惑,无法做出一些逻辑。我需要你们的帮助。我希望你们能帮我解决
谢谢
<?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不会被执行,但当您正确运行时,会打印出正确的答案。