用户单击单选按钮时如何显示正确和错误的答案

Question

我正在开发一个小型测验网络应用程序，我想在用户单击单选按钮时显示正确或错误的答案。

问题是Ajax在AnswerResult Column Water中显示了不正确的选项，并且正确和错误。我希望无论何时如果和正确，函数应该在 AnswerResult 列中正确显示，如果和错误，函数应该在 AnswerResult 列中显示不正确

HTML 表单

<div id='question<?php echo $i;?>' class='cont'>
  <h3>Question No  <?php echo $i?></h3><br>
  <p class='questions' id="qname<?php echo $i;?>"><?php echo $result['question'];?></p>

  <h3>Choose Answer:</h3><br>
    <input type="radio" value="A" class='radioButton radioButton<?php echo $result['que_id'];?>' name='<?php echo $result['que_id'];?>'/><?php echo $result['optionA'];?> <br/>
    <input type="radio" value="B" class='radioButton radioButton<?php echo $result['que_id'];?>' name='<?php echo $result['que_id'];?>'/><?php echo $result['optionB'];?><br/>
    <input type="radio" value="C" class='radioButton radioButton<?php echo $result['que_id'];?>' name='<?php echo $result['que_id'];?>'/><?php echo $result['optionC'];?><br/>
    <input type="radio" value="D" class='radioButton radioButton<?php echo $result['que_id'];?>' name='<?php echo $result['que_id'];?>'/><?php echo $result['optionD'];?><br/>
    <input type="radio" checked='checked' style='display:none' value="5" class='radioButton radioButton<?php echo $result['que_id'];?>' name='<?php echo $result['que_id'];?>'/><br/>
    <button disabled="disabled" id='<?php echo $i;?>' class='mc-btn btn-style-6 nextButton<?php echo $result['que_id'];?>' type='button'>Next</button>
</div>     

<h4 class="title-sb sm bold">

  Correct Answer:
  <span class="AnswerResult"></span>

Ajax 请求检查答案

   $('body').on('click', '.radioButton', function(){

var selected_answer = $(this).val();
var question_id = $(this).attr('name');

postData = 'ajaxrequest=submit_question&question_id='+question_id+'&selected_answer='+selected_answer;

 $.ajax
 ({
   data: postData,
   type:'POST',
   url: "start-quiz.php",
   dataType : 'html',
   cache : false,


   success: function(data) {
        if(data.correct == 'true')
        {   
            $('.AnswerResult').html("Correct");
            console.log('correct');
        }else {
            $('.AnswerResult').html("Incorrect");
            console.log('incorrect');
        }
            $('input.radioButton'+question_id).disabled(true);
            $('.nextButton'+question_id).disabled(false);

         }
        });
       });

Php Sql Query 根据 Ajax 请求获取答案

if(isset($_REQUEST['ajaxrequest']) && $_REQUEST['ajaxrequest'])
{
    $return_data = array();
    switch(strtolower($_REQUEST['ajaxrequest']))
    {

        case 'submit_question':

            $question_id = (int)$_POST['question_id'];
            $sel_answer = $_POST['selected_answer'];
            $return_data['correct'] = false;

            // Check database if answer is correct or wrong
            $ans = mysql_query("select rightans from  question_bank where que_id='$question_id'")or die("select  correct  ans");
            //$getans=mysql_query($ans) ;
            $showans=mysql_fetch_row($ans);
            $db_answer = $showans['rightans']; 

            if($sel_answer == $db_answer)
                $return_data['correct'] = true;

            break;

    }

    echo json_encode($return_data);
    die();
}

Ajax 请求发布时问题 AnswerResult 列显示不正确

Answer 1

编辑更正了 ajax 函数。

$(document).on('change', '.radioButton', function(){
  var selected_answer = $(this).val();
  var question_id = $(this).attr('name');

  postData = 'ajaxrequest=submit_question&question_id='+question_id+'&selected_answer='+selected_answer;

  $.ajax
  ({
    url: "start-quiz.php",
    data: postData,
    type: 'POST',
    dataType: 'json',
    processData: false,
    contentType: 'application/x-www-form-urlencoded',
    cache : false,
    success: function(data) {
      console.log(data);
      if (typeof (data.correct) !== 'undefined' && (data.correct != "" || data.Key != null)){
      var response = (data.correct == 'true')?"Correct":"Incorrect";
      //(data.correct == true)?"Correct":"Incorrect"
      $('.AnswerResult').html(response);
      $('input.radioButton'+question_id).disabled(true);  
      $('.nextButton'+question_id).disabled(false);
     }



    }
  });
 });

Answer 2

请更改 ajax 调用中的数据类型：

来自

dataType : 'html',

到

dataType : 'json',

然后试试 console.log(data[0]);

看看你会得到什么。