javascript - Display selected answers at the end of a multiple choice quiz -
i trying create multiple choice quiz. questions , choices displaying nicely in application.
at end of quiz, can count how many answers correct, incorrect , unanswered successfully, can't show selected answers , mark them correct, incorrect or unanswered.
i have been trying code part of application 1 month, , can't seem figure out.
how can display selected answers , mark them correct, incorrect or unanswered @ end of multiple choice quiz ?
this questions.php code , below result.php code.
<?php session_start(); ?> <?php require 'config.php'; $category=''; if(!empty($_post['name'])){ $name=$_post['name']; $category=$_post['category']; mysql_query("insert 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 , respond.js ie8 support of html5 elements , 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 * questions category_id='$category' order 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 * questions id in($order) order field(id,$order)"; // echo $query;exit; $response=mysql_query("select id,answer questions id in($order) order 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 bootstrap's javascript plugins) --> <script src="js/jquery-1.10.2.min.js"></script> <!-- include compiled plugins (below), or include individual files 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 resetted zero, please select stay on page continue quiz'; } $(document).on('click', 'button:submit',function(){ setconfirmunload(false); }); </script> </body> </html> <?php }else{ header( 'location: index.php' ) ; } ?> this result.php code:
<?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 * questions id in($order) order field(id,$order)"; // echo $query;exit; $response=mysql_query("select id,answer questions id in($order) order 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' 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 , respond.js ie8 support of html5 elements , 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 bootstrap's javascript plugins) --> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <!-- include compiled plugins (below), or include individual files needed --> <script src="js/jquery.validate.min.js"></script> </body> </html> <?php }else{ header( 'location: index.php' ) ; }?>
Comments
Post a Comment