时间戳

首页 > 解决方案 > PHP测验系统

php - PHP测验系统

问题描述

我正在开发一个 PHP 测验系统，它在一页上显示所有问题。
以下是我的代码。

PHP

$getQ = mysqli_query($condb, "select * from questions where eid = '$exam'");
        if($getQ){
            if(mysqli_num_rows($getQ)==0){
                $summaryLink = 'examSummary.php?exam='.$exam;
                redirect($summaryLink);
            }

形式

<?php while($ans = mysqli_fetch_array($getQ)){  ?>
    <div class="ques" id="ques">
        <input type="hidden" name="exam" value="<?php echo $exam; ?>">
        <input type="hidden" name="question" value="<?php echo $token; ?>">
        <input type="hidden" name="qid" id="qid" value="<?php echo $ans['qid'];?>">
        <input type="hidden" name="sid" id="sid" value="<?php echo $_SESSION['sid']; ?>">   
    
        <p>
            <input type="radio" name="answer" value="1" id="answer" onChange="update();">
            <label for="<?php echo $ans['option_1'];?>"><?php echo $ans['option_1'];?></label>
        </p>
        <p>
            <input type="radio" name="answer" value="2" id="answer" onChange="update();">
            <label for="<?php echo $ans['option_2'];?>"><?php echo $ans['option_2'];?></label>
        </p>
        <p>
            <input type="radio" name="answer" value="3" id="answer" onChange="update();">
            <label for="<?php echo $ans['option_3'];?>"><?php echo $ans['option_3'];?></label>
        </p>
        <p>
            <input type="radio" name="answer" value="4" id="answer" onChange="update();">
            <label for="<?php echo $ans['option_4'];?>"><?php echo $ans['option_4'];?></label>
        </p>
        <p>
            <input type="radio" name="answer" value="5" id="answer" onChange="update();">
            <label for="<?php echo $ans['option_5'];?>"><?php echo $ans['option_5'];?></label>
        </p>
        <div class="status2"></div>

我想要做的是，一旦用户选择了一个问题的答案，选择的选项和一些其他隐藏的表单数据（qid, eid, sid）应该被传递给updateAnswer.php
updateAnswer.php将选择的答案更新到数据库。

我厌倦了下面的jQuery。但它不会做任何事情。

<script>
    function update() {
     var radVal = $("input[type=radio][name=answer]:checked").val();    
        jQuery.ajax({
        url: "updateAnswer.php",
        data:'eid='+$("#eid").val()+'&sid='+$("#sid").val()+'&qid='+$("#qid").val()+'&answer='+$(radVal).val(),
        type: "POST",
        success:function(data){
        $(".status2").html(data);
        },
        error:function (){}
        });
    }
    </script>

updateAnswer.php当用户单击选项（答案）时，系统应该传递数据。

但是使用我当前的代码，当用户点击一个选项时不会做任何事情。

标签： phpjqueryajax

解决方案

因此，您的代码中存在一些错误，第一个错误是id应该始终是唯一的，因此在您while loop获取变量并将其初始化为零之前，increment它会在每个iteration; 您可以使用此变量并在每个之后附加id以使其唯一。像这样——

<?php 

$i = 0;

while(bla bla){

$i++;

?> 
    <!-- You can also use question id here ↓↓ which should be unique -->
    <input type="hidden" name="qid" id="<?php echo "qid".$i; ?>" value="<?php echo $ans['qid'];?>">
    <!-- session id will be the same  -->
    <input type="hidden" name="sid" id="sid" value="<?php echo $_SESSION['sid']; ?>">
    <!-- same for others  -->
<?php 

}

?>

您还需要给出 this($i或question-id(无论您选择哪个))attribute来radio buttons确定我们需要获取哪个问题 ID，并且update function您需要传递当前选中的元素，如下所示 -

<input type="radio" name="answer" value="1" class="answer" onChange="update(this);" data-id="<?php echo $i; ?>">
<input type="radio" name="answer" value="2" class="answer" onChange="update(this);" data-id="<?php echo $i; ?>">
<!-- same for others  -->

我为您的问题创建了一个工作片段（当然没有PHP）AJAX。我给了它们唯一的id，values我正在打印所需的值console。我也更改了AJAX代码，您可以在代码中使用它来检查它是否有效。必要时会提到评论，看看它是否对您有帮助。

function update(element) {
  
  let answer = $(element).val(); // get the value of checked element
  let id = $(element).attr('data-id'); // get id of the radio button clicked
  let eid = $('#eid').val(); // exam id will be same for all the questions
  let sid = $('#sid').val(); // session id will be same
  let qid = $('#qid' + id).val(); // get question id
  
  // send ajax request
  /*jQuery.ajax({
    url: "updateAnswer.php",
    data: 'eid=' + eid + '&sid=' + sid + '&qid=' + qid + '&answer=' + answer,
    type: "POST",
    success: function(data) {
      $('#status' + id).html(data); // show status on the related div
    },
    error: function() {}
  });*/
  console.clear();
  console.log(`id: ${id}, eid: ${eid}, sid: ${sid}, qid: ${qid}`)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ques" id="ques1">
  <input type="hidden" name="exam" value="some_exam" id="some_exam">
  <input type="hidden" name="eid" value="some_examid" id="eid">
  <!-- question id 1 (use php) -->
  <input type="hidden" name="question" id="question1" value="question1">
  <input type="hidden" name="qid" id="qid1" value="qid1">
  <input type="hidden" name="sid" id="sid" value="some_session">

  <p>
    <!-- Give question id in data-id attribute (use php) and pass current element in update function -->
    <input type="radio" name="answer" value="1" class="answer" onChange="update(this);" data-id="1">
    <label>option_1_1</label>
  </p>
  <p>
    <input type="radio" name="answer" value="2" class="answer" onChange="update(this);" data-id="1">
    <label>option_1_2</label>
  </p>
  <p>
    <input type="radio" name="answer" value="3" class="answer" onChange="update(this);" data-id="1">
    <label>option_1_3</label>
  </p>
  <p>
    <input type="radio" name="answer" value="4" class="answer" onChange="update(this);" data-id="1">
    <label>option_1_4</label>
  </p>
  <p>
    <input type="radio" name="answer" value="5" class="answer" onChange="update(this);" data-id="1">
    <label>option_1_5</label>
  </p>
  <div class="status2" id="status1"></div>
  ---------------------------------------
  <!-- Second question starts (incremet i)-->
  ---------------------------------------
  <div class="ques" id="ques2">
    <input type="hidden" name="exam" value="some_exam" id="some_exam">
    <input type="hidden" name="eid" value="some_examid" id="eid">
    <input type="hidden" name="question" id="question2" value="question1">
    <input type="hidden" name="qid" id="qid2" value="qid2">
    <input type="hidden" name="sid" id="sid" value="some_session">

    <p>
      <input type="radio" name="answer" value="option_2_1" class="answer" onChange="update(this);" data-id="2">
      <label>option_2_1</label>
    </p>
    <p>
      <input type="radio" name="answer" value="2" class="answer" onChange="update(this);" data-id="2">
      <label>option_2_2</label>
    </p>
    <p>
      <input type="radio" name="answer" value="3" class="answer" onChange="update(this);" data-id="2">
      <label>option_2_3</label>
    </p>
    <p>
      <input type="radio" name="answer" value="4" class="answer" onChange="update(this);" data-id="2">
      <label>option_2_4</label>
    </p>
    <p>
      <input type="radio" name="answer" value="5" class="answer" onChange="update(this);" data-id="2">
      <label>option_2_5</label>
    </p>
    <div class="status2" id="status2"></div>

推荐阅读