HI All
I am displaying 10 questions randomly , if user play quizz multiple times - i want to display updated score of the users's session.
demo url is : http://telugumirchi.com/quiz/
index.php
<?php
session_start();
?>
<?php
require 'config.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>ABCD COMPANY</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'];}?>
</p>
</header>
<div class="container">
<div class="row">
<div class="col-xs-14 col-sm-7 col-lg-7">
<div class='image'>
<img src="image/logo.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-10 col-sm-5 col-lg-5">
<div class="intro">
<?php if(empty($_SESSION['name'])){?>
<form class="form-signin" method="post" id='signin' name="signin" action="questions.php">
<div class="form-group">
<input type="text" id='name' name='name' class="form-control" placeholder="Enter your Name"/>
<span class="help-block"></span>
</div>
<br>
<button class="btn btn-success btn-block" type="submit">
Start Quizz
</button>
</form>
<?php }else{?>
<form class="form-signin" method="post" id='signin' name="signin" action="questions.php">
<br>
<button class="btn btn-success btn-block" type="submit">
Start Quizz
</button>
</form>
<?php }?>
</div>
</div>
</div>
</div>
<footer>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.10.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>
<script>
$(document).ready(function() {
$("#signin").validate({
submitHandler : function() {
console.log(form.valid());
if (form.valid()) {
alert("sf");
return true;
} else {
return false;
}
},
rules : {
name : {
required : true,
minlength : 3,
remote : {
url : "check_name.php",
type : "post",
data : {
username : function() {
return $("#name").val();
}
}
}
}
},
messages : {
name : {
required : "Please enter your name",
remote : "Name is already taken, Please choose some other name"
}
},
errorPlacement : function(error, element) {
$(element).closest('.form-group').find('.help-block').html(error.html());
},
highlight : function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success : function(element, lab) {
var messages = new Array("That's Great!", "Looks good!", "You got it!", "Great Job!", "Smart!", "That's it!");
var num = Math.floor(Math.random() * 6);
$(lab).closest('.form-group').find('.help-block').text(messages[num]);
$(lab).addClass('valid').closest('.form-group').removeClass('has-error').addClass('has-success');
}
});
});
</script>
</body>
</html>questions.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 ('NULL','$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>ABCD COMPANY</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]-->
<!-- 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 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'];}?>
</p>
</header>
<div id='timer'>
<script type="application/javascript">
var myCountdownTest = new Countdown({
time: 300,
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">
<hr>
<form class="form-horizontal" role="form" id='login' method="post" action="result.php">
<?php
$res = mysql_query("select * from questions where category_id=2 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='<?php echo $i;?>' class='next btn btn-success' type='button'>Next</button>
</div>
<?php }elseif($i<1 || $i<6){?>
<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='<?php echo $i;?>' class='previous btn btn-success' type='button'>Previous</button>
<button id='<?php echo $i;?>' class='next btn btn-success' type='button' >Next</button>
</div>
<?php }elseif($i==6){?>
<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='<?php echo $i;?>' class='previous btn btn-success' type='button'>Previous</button>
<button id='<?php echo $i;?>' class='next btn btn-success' type='submit'>Finish</button>
</div>
<?php } $i++;} ?>
</form>
</div>
</div>
<footer>
<p class="text-center" id="foot">
Email : <a href="mailto:info@telugumirchi.com" target="_blank">info@telugumirchi.com</a>
</p>
</footer>
<?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>";
}
?>
<script>
$('.cont').addClass('hide');
count=$('.questions').length;
$('#question'+1).removeClass('hide');
$(document).on('click','.next',function(){
last=parseInt($(this).attr('id'));
nex=last+1;
$('#question'+last).addClass('hide');
$('#question'+nex).removeClass('hide');
});
$(document).on('click','.previous',function(){
last=parseInt($(this).attr('id'));
pre=last-1;
$('#question'+last).addClass('hide');
$('#question'+pre).removeClass('hide');
});
setTimeout(function() {
$("form").submit();
}, 60000);
</script>
</body>
</html>
<?php }else{
header( 'Location: index.php' ) ;
}
?>results.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>
<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'];
}?>
</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="image/cat.GIF" class="img-responsive"/>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-lg-3">
<a href="<?php echo BASE_PATH.'questions.php';?>" class='btn btn-success'>Start new Quiz!!!</a>
<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>
<footer>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.10.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: questions.php' ) ;
}?>