我正在尝试创建一个多项选择测验。问题和选择在应用程序中显示得非常好。
在测验结束时,我可以计算出有多少答案是正确的,错误的和未成功的答案,但我无法显示所选答案并将其标记为正确,不正确或未答复。
我一直在尝试编写应用程序的这一部分差不多一个月,我似乎无法弄明白。
如何在多项选择测验结束时显示所选答案并将其标记为正确,不正确或未答复?
这是questions.php代码,下面是result.php代码。
<?php
session_start();
?>
<?php
require 'config.php';
$category='';
if(!empty($_POST['name'])){
$name=$_POST['name'];
$category=$_POST['category'];
mysql_query("INSERT INTO users (id, user_name,score,category_id)VALUES ('0','$name',0,'$category')") or die(mysql_error());
$_SESSION['name']= $name;
$_SESSION['id'] = mysql_insert_id();
}
$category=$_POST['category'];
if(!empty($_SESSION['name'])){
?>
<!DOCTYPE html>
<html>
<head>
<title>Multiple Choice Quiz</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<script src="js/countdown.js"></script>
<style>
.container {
margin-top: 110px;
}
.error {
color: #B94A48;
}
.form-horizontal {
margin-bottom: 0px;
}
.hide{display: none;}
</style>
</head>
<body>
<header>
<p class="text-center">
Welcome : <?php if(!empty($_SESSION['name'])){echo $_SESSION['name'];}?><br />QUIZ
</p>
</header>
<div id='timer'>
<script type="application/javascript">
var myCountdownTest = new Countdown({
time: 180,
width:200,
height:80,
rangeHi:"minute"
});
</script>
</div>
<div class="container question">
<div class="col-xs-12 col-sm-8 col-md-8 col-xs-offset-4 col-sm-offset-3 col-md-offset-3">
<p>
QUIZ
</p>
<hr>
<form class="form-horizontal" role="form" id='login' method="post" action="result.php">
<?php
$res = mysql_query("select * from questions where category_id='$category' ORDER BY RAND()") or die(mysql_error());
$rows = mysql_num_rows($res);
$i=1;
while($result=mysql_fetch_array($res)){?>
<?php if($i==1){?>
<div id='question<?php echo $i;?>' class='cont'>
<p class='questions' id="qname<?php echo $i;?>"> <?php echo $i?>.<?php echo $result['question_name'];?></p>
<input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer1'];?>
<br/>
<input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer2'];?>
<br/>
<input type="radio" value="3" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer3'];?>
<br/>
<input type="radio" value="4" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer4'];?>
<br/>
<input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>
<br/>
<button id='next<?php echo $i;?>' class='next btn btn-success' type='button'>Next</button>
</div>
<?php }elseif($i<1 || $i<$rows){?>
<div id='question<?php echo $i;?>' class='cont'>
<p class='questions' id="qname<?php echo $i;?>"><?php echo $i?>.<?php echo $result['question_name'];?></p>
<input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer1'];?>
<br/>
<input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer2'];?>
<br/>
<input type="radio" value="3" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer3'];?>
<br/>
<input type="radio" value="4" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer4'];?>
<br/>
<input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>
<br/>
<button id='pre<?php echo $i;?>' class='previous btn btn-success' type='button'>Previous</button>
<button id='next<?php echo $i;?>' class='next btn btn-success' type='button' >Next</button>
</div>
<?php }elseif($i==$rows){?>
<div id='question<?php echo $i;?>' class='cont'>
<p class='questions' id="qname<?php echo $i;?>"><?php echo $i?>.<?php echo $result['question_name'];?></p>
<input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer1'];?>
<br/>
<input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer2'];?>
<br/>
<input type="radio" value="3" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer3'];?>
<br/>
<input type="radio" value="4" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer4'];?>
<br/>
<input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>
<br/>
<button id='pre<?php echo $i;?>' class='previous btn btn-success' type='button'>Previous</button>
<button id='next<?php echo $i;?>' class='next btn btn-success' type='submit'>Finish</button>
</div>
<?php } $i++;} ?>
</form>
</div>
</div>
<?php
if(isset($_POST[1])){
$keys=array_keys($_POST);
$order=join(",",$keys);
//$query="select * from questions id IN($order) ORDER BY FIELD(id,$order)";
// echo $query;exit;
$response=mysql_query("select id,answer from questions where id IN($order) ORDER BY FIELD(id,$order)") or die(mysql_error());
$right_answer=0;
$wrong_answer=0;
$unanswered=0;
while($result=mysql_fetch_array($response)){
if($result['answer']==$_POST[$result['id']]){
$right_answer++;
}else if($_POST[$result['id']]==5){
$unanswered++;
}
else{
$wrong_answer++;
}
}
echo "right_answer : ". $right_answer."<br>";
echo "wrong_answer : ". $wrong_answer."<br>";
echo "unanswered : ". $unanswered."<br>";
}
?>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.10.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
$('.cont').addClass('hide');
count=$('.questions').length;
$('#question'+1).removeClass('hide');
$(document).on('click','.next',function(){
element=$(this).attr('id');
last = parseInt(element.substr(element.length - 1));
nex=last+1;
$('#question'+last).addClass('hide');
$('#question'+nex).removeClass('hide');
});
$(document).on('click','.previous',function(){
element=$(this).attr('id');
last = parseInt(element.substr(element.length - 1));
pre=last-1;
$('#question'+last).addClass('hide');
$('#question'+pre).removeClass('hide');
});
setTimeout(function() {
$("form").submit();
}, 180000);
</script>
<script type="text/javascript">
// Prevent accidental navigation away
setConfirmUnload(true);
function setConfirmUnload(on)
{
window.onbeforeunload = on ? unloadMessage : null;
}
function unloadMessage()
{
return 'Your Answered Questions are resetted zero, Please select stay on page to continue your Quiz';
}
$(document).on('click', 'button:submit',function(){
setConfirmUnload(false);
});
</script>
</body>
</html>
<?php }else{
header( 'Location: index.php' ) ;
}
?>
这是result.php代码:
<?php
session_start();
?>
<?php
require 'config.php';
if(!empty($_SESSION['name'])){
$right_answer=0;
$wrong_answer=0;
$unanswered=0;
$keys=array_keys($_POST);
$order=join(",",$keys);
//$query="select * from questions id IN($order) ORDER BY FIELD(id,$order)";
// echo $query;exit;
$response=mysql_query("select id,answer from questions where id IN($order) ORDER BY FIELD(id,$order)") or die(mysql_error());
while($result=mysql_fetch_array($response)){
if($result['answer']==$_POST[$result['id']]){
$right_answer++;
}else if($_POST[$result['id']]==5){
$unanswered++;
}
else{
$wrong_answer++;
}
}
$name=$_SESSION['name'];
mysql_query("update users set score='$right_answer' where user_name='$name'");
?>
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<p class="text-center">
Welcome <?php
if(!empty($_SESSION['name'])){
echo $_SESSION['name'];
}?><br />Result
</p>
</header>
<div class="container result">
<div class="row">
<div class='result-logo'>
<img src="image/Quiz_result.png" class="img-responsive"/>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-18 col-sm-9 col-lg-9">
<div class='result-logo1'>
<img src="" class="img-responsive"/>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
<a href="<?php echo BASE_PATH.'index.php';?>" class='btn btn-success'>Start Quiz</a><br /><br />
<a href="<?php echo BASE_PATH.'logout.php';?>" class='btn btn-success'>Logout</a>
<div style="margin-top: 30%">
<p>Total no. of right answers : <span class="answer"><?php echo $right_answer;?></span></p>
<p>Total no. of wrong answers : <span class="answer"><?php echo $wrong_answer;?></span></p>
<p>Total no. of Unanswered Questions : <span class="answer"><?php echo $unanswered;?></span></p>
</div>
</div>
</div>
<div class="row">
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/jquery.validate.min.js"></script>
</body>
</html>
<?php }else{
header( 'Location: index.php' ) ;
}?>