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>
I believe your issue is the "For" loop will always result in 100% every time it is executed.
Take a closer look at your logic. You set "total = 53". The for loop will execute until "i" is less than or equal to 53. So the last iteration will be 53/53 * 100 which will always result in 100%.
What you would need to do is pass in a value (parameter) to represent how many questions were answered and use that value to determine how much percentage is left.
Just an example based on what you wrote:
$("input:radio[name=options]").click(function(numAnswered) {
//for progress bar
var total = 53; //represents total number of questions
for(var i=1;i<=numAnswered;i++){
var percent = (i/total*100);
$('#progress .progress-text').text(percent + '%');
$('#progress .progress-bar').css({'width':percent+'%'});
}
}
How you get "numAnswered" can be done multiple ways but this knowledge goes beyond this post.
Final Thoughts
Not sure your reason is for using a "For" loop but I don't think it is needed. Since you are already using JQuery, I recommend using JQuery UI progress bar where everything is built for you and no need to re-invent the wheel. More info on JQuery UI progress bar can be found here