Totally beginner to web development..I'm trying to display progress to the user in exam form every time he select one option via progress bar so the user able to know how many Question remain or percentage of whole exam,,the problem is the progress bar not work properly it's reach 100% when I select the first choice How can I fix this issue
here is my code
</head>
<body>
<?Php
require "config0.php";
$count=$dbo->prepare("select * from questions where question_id=1 ");
if($count->execute()){
$row = $count->fetch(PDO::FETCH_OBJ);
}
$questions_number = $dbo->query("select count(question_number) from questions
left join servey_question on questions.question_id = servey_question.question_id where servey_id = 'serv01' ")->fetchColumn();
echo "
<div id='maindiv' class='maindiv'>
<form id='f1'>
<table>
<tr><th>
<input type='hidden' id=question_id value=$row->question_id>
</th></tr>
<tr><th>
<h4 id='q1'>$row->question</h4>
</th></tr>
<tr><td>
<input type='radio' name='options' id='opt1' value='1' > <label for='opt1' class='lb'>$row->opt1</label>
</td></tr>
<tr><td>
<input type='radio' name='options' id='opt2' value='2' > <label for='opt2' class='lb'>$row->opt2</label>
</td></tr>
<tr><td>
<input type='radio' name='options' id='opt3' value='3' > <label for='opt3' class='lb'>$row->opt3</label>
</td></tr>
<tr><td>
<input type='radio' name='options' id='opt4' value='4' > <label for='opt4' class='lb'>$row->opt4</label>
</td></tr>
<tr><td>
<input type='radio' name='options' id='opt5' value='5' > <label for='opt5' class='lb'>$row->opt5</label>
</td></tr>
<tr><td>
<input type='radio' name='options' id='opt6' value='6' > <label for='opt6' class='lb'>$row->opt6</label>
</td></tr>
</table>
</form>
</div>
<div id='progress'>
<span class='progress-text'></span>
<div class='progress-bar'></div>
</div>
";
?>
<script>
$(document).ready(function() {
$("input:radio[name=options]").click(function() {
//for progress bar
var total = 53;
for(var i=1;i<=total;i++){
var percent = (i/total*100);
$('#progress .progress-text').text(percent + '%');
$('#progress .progress-bar').css({'width':percent+'%'});
}
$('#maindiv').hide('slide', {direction: 'left'}, 2000);
$.post( "examck.php", {"option_no":$(this).val(),"question_id":$("#question_id").val()},function(return_data,status){
if(return_data.next=='T'){
$("#question_id").val(return_data.data.question_id);
$('#q1').html(return_data.data.q1);
$('label[for=opt1]').html(return_data.data.opt1);
$('label[for=opt2]').html(return_data.data.opt2);
$('label[for=opt3]').html(return_data.data.opt3);
$('label[for=opt4]').html(return_data.data.opt4);
$('label [for = opt5]').html(return_data.data.opt5);
$('label [for = opt6]').html(return_data.data.opt6);
}
else{$('#maindiv').html("Thank you ");
$.ajax({ url: 'score.php' });
var link = $("<a href ='registrationForm.php'>...Close</a>");
$('#maindiv').append(link);
}
},"json");
$("#f1").delay(1000);
$("#f1")[0].reset();
$('#maindiv').show('slide', {direction: 'right'}, 1000);
});
});
</script>
</body>
</html>
