Question

如果答案是正确的，我如何添加绿色勾选否则如果答案错误则红色交叉

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Button Selection</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(e) {
        $("#q_paper").click(function(){
          var q_tot=$(".q_group").length;
          for(i=1;i<=q_tot;i++)
          {   
            var des = $("#q_desc_"+i);
            var ans = $("input[name=q_opt_"+i+"]:checked").val();
            if(!ans) ans="Not answered";
            $("#q_paper_view").append("<div>"+des.text()+"</div>"+"<div>Ans."+ans+"</div>");
          }
        });
      });

    </script>
  </head>
  <body>
    <form id="myform" method="post">
      <div class="q_group">
        <div id="q_desc_1">1. Which amoung the following is Parsing Language:</div>
        <input type="radio" id="q1a" name="q_opt_1" value="CSS" />
        CSS </br>
      <input type="radio" id="q1b" name="q_opt_1" value="jQuery" />
      jQuery</br>
    <input type="radio" id="q1c" name="q_opt_1" value="HTML" />
    HTML</br>
  <input type="radio" id="q1d" name="q_opt_1" value="XML" />
  XML </div>
<div class="q_group">
  <div id="q_desc_2">2. Most used Domain in world:</div>
  <input type="radio" id="q2a" name="q_opt_2" value="Google" />
  Google</br>
<input type="radio" id="q2b" name="q_opt_2" value="Yahoo" />
Yahoo</br>
<input type="radio" id="q2c" name="q_opt_2" value="Facebook" />
Facebook</br>
<input type="radio" id="q2d" name="q_opt_2" value="Twitter" />
Twitter </div>
<div class="q_group">
  <div id="q_desc_3">3. What is the color of sky:</div>
  <input type="radio" id="q3a" name="q_opt_3" value="Blue" />
  Blue</br>
<input type="radio" id="q3b" name="q_opt_3" value="Green" />
Green</br>
<input type="radio" id="q3c" name="q_opt_3" value="Yellow" />
Yellow</br>
<input type="radio" id="q3d" name="q_opt_3" value="Black" />
Black </div>
<div>
  <input id="q_paper" type="button" value="Submit">
  </input>
<input type="reset"   id="clear" value="Clear Form">
</div>
<div id="q_paper_view"> </div>
</form>
</body>
</html>

Answer 1

<强>的变化：

没有任何名为</br>的人，请正确学习。它是<br />。
没有</input>。再次学习。
您没有在任何地方检查正确的答案。
为正确答案添加了right课程。
您的代码中没有定义刻度线。
您不能在.append()之前清算。

＆＃13;

$(document).ready(function(e) {
  $("#q_paper").click(function() {
    var q_tot = $(".q_group").length;
    $("#q_paper_view").html("");
    for (i = 1; i <= q_tot; i++) {
      var des = $("#q_desc_" + i);
      var ans = $("input[name=q_opt_" + i + "]:checked").val();
      if (!ans) {
        ans = "Not answered";
        $("q_desc_" + i).after('<span style="color: #f00; font-size: 50px; line-height: 10px;">✗</span>')
      }
      else if ($("input[name=q_opt_" + i + "]:checked").hasClass("right")) {
        ans = "Correct";
        $("q_desc_" + i).after('<span style="color: #0f0; font-size: 50px; line-height: 10px;">✓</span>')
      }
      else {
        ans = "Wrong";
        $("q_desc_" + i).after('<span style="color: #f00; font-size: 50px; line-height: 10px;">✗</span>')
      }
      $("#q_paper_view").append("<div>" + des.text() + "</div>" + "<div>Ans. " + ans + "</div>");
    }
    return false;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<form id="myform" method="post">
  <div class="q_group">
    <div id="q_desc_1">1. Which amoung the following is Parsing Language:</div>
    <input type="radio" id="q1a" name="q_opt_1" value="CSS" />CSS<br />
    <input type="radio" id="q1b" name="q_opt_1" value="jQuery" />jQuery
    <br />
    <input type="radio" id="q1c" name="q_opt_1" value="HTML" />HTML
    <br />
    <input type="radio" id="q1d" name="q_opt_1" value="XML" class="right" />XML
  </div>
  <div class="q_group">
    <div id="q_desc_2">2. Most used Domain in world:</div>
    <input type="radio" id="q2a" name="q_opt_2" value="Google" class="right" />Google
    <br />
    <input type="radio" id="q2b" name="q_opt_2" value="Yahoo" />Yahoo
    <br />
    <input type="radio" id="q2c" name="q_opt_2" value="Facebook" />Facebook
    <br />
    <input type="radio" id="q2d" name="q_opt_2" value="Twitter" />Twitter
  </div>
  <div class="q_group">
    <div id="q_desc_3">3. What is the color of sky:</div>
    <input type="radio" id="q3a" name="q_opt_3" value="Blue" class="right" />Blue
    <br />
    <input type="radio" id="q3b" name="q_opt_3" value="Green" />Green
    <br />
    <input type="radio" id="q3c" name="q_opt_3" value="Yellow" />Yellow
    <br />
    <input type="radio" id="q3d" name="q_opt_3" value="Black" />Black
  </div>
  <div>
    <input id="q_paper" type="button" value="Submit" />
    <input type="reset" id="clear" value="Clear Form" />
  </div>
  <div id="q_paper_view"></div>
</form>

＆＃13;

Answer 2

在检查ans的正确性的任何地方插入此jquery。我已经包含了bootstrap glyphicons以显示刻度和交叉。

$(function(){
  var ans = false;
  if(ans) {
    $('.answ').append('<span class="glyphicon glyphicon-ok" style="color:green"></span>');
  }
  else {
    $('.answ').append('<span class="glyphicon glyphicon-remove" style="color:red"></span>');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="answ"></div>

也要更正您的HTML。如Praveen所述

 <form id="myform" method="post">
      <div class="q_group">
        <div id="q_desc_1">1. Which amoung the following is Parsing Language:</div>
        <input type="radio" id="q1a" name="q_opt_1" value="CSS" />
        CSS <br />
      <input type="radio" id="q1b" name="q_opt_1" value="jQuery" />
      jQuery<br />
    <input type="radio" id="q1c" name="q_opt_1" value="HTML" />
    HTML<br />
  <input type="radio" id="q1d" name="q_opt_1" value="XML" />
  XML </div>
<div class="q_group">
  <div id="q_desc_2">2. Most used Domain in world:</div>
  <input type="radio" id="q2a" name="q_opt_2" value="Google" />
  Google<br />
<input type="radio" id="q2b" name="q_opt_2" value="Yahoo" />
Yahoo<br />
<input type="radio" id="q2c" name="q_opt_2" value="Facebook" />
Facebook<br />
<input type="radio" id="q2d" name="q_opt_2" value="Twitter" />
Twitter </div>
<div class="q_group">
  <div id="q_desc_3">3. What is the color of sky:</div>
  <input type="radio" id="q3a" name="q_opt_3" value="Blue" />
  Blue<br/>
<input type="radio" id="q3b" name="q_opt_3" value="Green" />
Green<br/>
<input type="radio" id="q3c" name="q_opt_3" value="Yellow" />
Yellow<br/>
<input type="radio" id="q3d" name="q_opt_3" value="Black" />
Black </div>
<div>
  <input id="q_paper" type="button" value="Submit"/>
<input type="reset"   id="clear" value="Clear Form">
</div>
<div id="q_paper_view"> </div>
</form>

如果答案是正确的，我如何添加绿色勾选否则如果答案错误则红色交叉

2 个答案: