Question

完全是Web开发的初学者。每当用户通过进度条选择一个选项时，我都试图以考试形式向用户显示进度，以便用户能够知道还剩下多少个问题或整个考试的百分比。问题是进度条无法正常工作，当我选择第一个选项时，进度条会达到100％ 如何解决此问题

这是我的代码

</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>

Answer 1

我相信您的问题是，“ For”循环每次执行都会导致100％的结果。

仔细研究您的逻辑。您设置“总计= 53”。 for循环将一直执行到“ i”小于或等于53。因此最后一次迭代将是53/53 * 100，这将始终导致100％。

您需要做的是输入一个值（参数）来表示已回答了多少个问题，并使用该值来确定还剩下多少百分比。

仅是基于您所写内容的示例：

$("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+'%'});
    }
}

如何获得“ numAnswered”可以通过多种方式完成，但这一知识不仅仅限于本文。

最终想法

不确定您的原因是使用“ For”循环，但我认为这不是必需的。由于您已经在使用JQuery，因此我建议您使用JQuery UI进度条，其中所有内容均已为您构建，而无需重新发明轮子。可以在here

上找到有关JQuery UI进度栏的更多信息。

jQuery中的进度条无法正常工作

1 个答案: