我正在开发测验网络应用程序。我只是编写一个简单的问题。但现在我想问这个问题 5 次。我尝试使用 for 循环和 while 循环，但它没有工作。我在这里使用了很多 setTimeout 函数，在用户点击开始按钮的地方，我希望该问题问 5 次并计算有多少答案是正确的，有多少答案是错误的。我怎样才能做到这一点 ？<?php$btn1 = '<button id="optiona" class="btn btn-primary">2</button>';$btn2 = '<button id="optionb" class="btn btn-primary">5</button>';$btn3 = '<button id="optionc" class="btn btn-primary">11</button>';$btn4 = '<button id="optiond" class="btn btn-primary">0</button>';$btnArray = [$btn1, $btn2, $btn3, $btn4];?><!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Welcome</title> <link rel="stylesheet" href="css/bootstrap.css"> <script src="js/jquery.js"></script> <style> #question{ margin: 10px 50px; padding: 20px 40px; box-shadow: 0 12px 16px 0; font-size: 2em; } #options{ margin: 50px; padding: 10px; } #options, button{ margin: 10px; padding: 100px; width: 50px; } </style></head><body> <h1 id="hqid">Question<span id="qid"></span></h1> <div class="container"> <button id="start" class="btn btn-primary">Start</button> <div id="game"> <h1 id="question">What is 1 + 1 ?</h1> <div id="options"> <?php shuffle($btnArray); print_r($btnArray[0]); print_r($btnArray[1]); print_r($btnArray[2]); print_r($btnArray[3]); ?> </div> </div> </div>这是完整的代码。它看起来很乱，但它的工作。
1 回答
慕容森
TA贡献1853条经验 获得超18个赞
这是像您期望的那样工作的代码：
索引.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.content {
padding-top: 10rem;
}
.answers.text-center {
margin: 1rem 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="content">
<div class="jumbotron text-center">
<h1>Play game!</h1>
<button id="start" class="btn btn-lg btn-primary">Start</button>
</div>
<div id="game" class="text-center">
<h1 id="hqid">Question #<span id="qid"></span>: <span id="question">What is 1 + 1 ?</span></h1>
<hr>
<div class="answers text-center">
<label>Correct answers: <span class="success badge has-success"></span></label>
<label>Wrong answers: <span class="fail badge has-danger"></span></label>
</div>
<hr>
<div id="options">
<div class="btn-group" data-toggle="buttons">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var count = 1;
var success = 0; //right answers
var fail = 0; // wrong answers
var fileUrl = '/includes/options.php'; //php file where we calc all results
//Check if you have a stored value
$('#game').hide();
$("button#start").on("click", function(){
$('.jumbotron').hide();
$('#game').show();
$('h1 span#qid').html(count);
$('#options').show();
$('.success').html('0');
$('.fail').html('0');
success = 0;
fail = 0;
$.post(fileUrl, function( response, status, xhr ) {
var data = JSON.parse(response);
$('#options .btn-group').html(data.options);
});
});
$("#options .btn-group").on("click", "label.btn", function(e){
//$('#game').load('#options');
$('#options .btn-group').html('');
$.post(fileUrl, { answer: $(this).find('input').val() }, function( response, status, xhr ) {
//check response
var data = JSON.parse(response);
$('#options .btn-group').html(data.options);
if(data.status == 1){
success++;
$('.success').html(success);
} else {
fail++;
$('.fail').html(fail);
}
});
if(count < 5){
count++;
$('h1 span#qid').html(count);
} else {
$('.jumbotron h1').html(" Game over.");
$('.jumbotron button').text("Play again");
//get to default
count = 1;
$('.jumbotron').show();
$('#options').hide();
$('#hqid').hide();
}
});
});
</script>
</body>
</html>
我为建立正确答案而创建的附加文件： options.php
<?php
/*
* Temporary we set right answer.
*/
$right_answer = 2;
/*
* Response array
*/
$response = [];
if(isset($_POST['answer'])){
(intval($_POST['answer']) == $right_answer)? $response['status'] = 1: $response['status'] = 0;
}
$btn1 = '<label class="btn btn-primary"><input type="radio" name="option[]" value="2" autocomplete="off">2</label>';
$btn2 = '<label class="btn btn-primary"><input type="radio" name="option[]" value="5" autocomplete="off">5</label>';
$btn3 = '<label class="btn btn-primary"><input type="radio" name="option[]" value="11" autocomplete="off">11</label>';
$btn4 = '<label class="btn btn-primary"><input type="radio" name="option[]" value="0" autocomplete="off">0</label>';
$btnArray = [$btn1, $btn2, $btn3, $btn4];
shuffle($btnArray);
$response['options'] = implode('', $btnArray);
/*
* Encode response in json string
*/
echo json_encode($response);
此代码适用于我的本地主机，并产生所需的结果。
添加回答
举报
0/150
提交
取消