将测验中所有单选按钮的标签文本更改为红色和绿色

Question

下面是一个示例单选按钮测验的代码，其中提供了多个单选按钮。代码中定义了正确答案和错误答案。用户可以检查任何答案或将所有内容保留为空白。如果用户选中任何单选按钮并最终单击“给我评分”按钮，则用户选择的任何错误答案的单选按钮的标签文本应显示为红色，同时该特定问题的正确答案应显示为绿色（这将是帮助用户知道他回答了哪个问题以及正确答案是什么）。我尝试了几个步骤并搜索了许多论坛，但均失败了。我认为这将非常简单。

示例：

var numQues = 3;
var numChoi = 3;
var answers = new Array(3);
answers[0] = "doesn't like";
answers[1] = "don't come";
answers[2] = "come";
var wrong = new Array(3);
wrong[0] = "don't like";
wrong[1] = "doesn't come";
wrong[2] = "comes";
var wrong1 = new Array(3);
wrong1[0] = "doesn't likes";
wrong1[1] = "doesn't comes";
wrong1[2] = "coming";

function getScore(form) {
  var score = 0;
  var currElt;
  var currSelection;
  for (i = 0; i < numQues; i++) {
    currElt = i * numChoi;
    answered = false;
    for (j = 0; j < numChoi; j++) {
      currSelection = form.elements[currElt + j];
      if (currSelection.checked) {
        answered = true;
        if (currSelection.value == answers[i]) {
          score += 3;
          break;
        }
        if (currSelection.value == wrong[i]) {
          score -= 1;
          break;
        }
        if (currSelection.value == wrong1[i]) {
          score -= 1;
          break;
        }
      }
    }
  }
  var scoreper = Math.round(score * 100 / 9);
  form.percentage.value = scoreper + "%";
  form.mark.value = score;
}

<title>Quiz Questions And Answers</title>
<center>
  <h1>Quiz Questions</h1>
</center>
<p>
  <form name="quiz">
    <p>
      <b><br>1. He -------------------- it.<br></b>
      <label><input type="radio" name="q1" value="don't like">don't like</label><br>
      <label><input type="radio" name="q1" value="doesn't like">doesn't like</label><br>
      <label><input type="radio" name="q1" value="doesn't likes">doesn't likes</label><br>
      <p><b>
        <hr>
        <br>2. They -------------------- here very often.<br></b>
        <label><input type="radio" name="q2" value="don't come">don't come</label><br>
        <label><input type="radio" name="q2" value="doesn't come">doesn't come</label><br>
        <label><input type="radio" name="q2" value="doesn't comes">doesn't comes</label><br>
        <p><b>
        <hr>
        <br>3. John and Mary -------------------- twice a week.<br></b>
          <label><input type="radio" name="q3" value="come">come</label><br>
          <label><input type="radio" name="q3" value="comes">comes</label><br>
          <label><input type="radio" name="q3" value="coming">coming</label>
          <br>
          <p><b>
        <hr>
        <p><b>
        <input type="button"value="Grade Me"onClick="getScore(this.form);">
        <input type="reset" value="Clear"><p>
        Number of score out of 15 = <input type= text size 15 name= "mark">
        Score in percentage = <input type=text size=15 name="percentage"><br>
        </form>
        <p>
        <form method="post" name="Form" onsubmit="" action="">
        </form>

Answer 1

在getScore函数中，当您发现某个元素选择了正确的答案时（无论var是标签是什么，除非您使用自定义单选按钮，否则我建议这样做，因为更改了背景的标签元素只会简单地突出显示单词），您可以使用JS给它一个新的类。

currSelection.classList.add("correct");

或

currSelection.classList.add("incorrect");

然后在CSS文件中可以使用规则

.correct { background: green !important; }

.incorrect { background: red !important; }

Answer 2

这是您的代码的重写。 我修复了非法的HTML，并使用了事件监听器，querySelectors和CSS的最佳做法

请研究代码，看看是否理解。如果需要，我可以添加更多评论

var answers = ["doesn't like","don't come","come"];
var rads, quiz; // need to be set after load
window.addEventListener("load",function() { // when page loads
  quiz = document.getElementById("quiz");
  rads = quiz.querySelectorAll("input[type=radio]"); // all radios in the quiz
  document.getElementById("scoreButton").addEventListener("click",function(e) { // on click of scoreme
    var score = 0;
    for (var i=0;i<rads.length;i++) { // loop over all radios in the form
      var rad = rads[i];
      var idx = rad.name.substring(1)-1; //remove the q from the name - JS arrays start at 0
      var checked = rad.checked;
      var correct = rad.value==answers[idx];
      
      if (correct) {
        rad.closest("label").classList.toggle("correct");
        if (checked) score +=3;
      }  
      else if (checked) {
        score--;
        rad.closest("label").classList.toggle("error")
      }  
    }
    var scoreper = Math.round(score * 100 / rads.length);
    document.querySelector("#percentage").innerHTML = scoreper + "%";
    quiz.mark.value = score;
  });  
});

.correct {
  color: green
}

.error {
  color: red
}

<title>Quiz Questions And Answers</title>
<div class="header">
  <h1>Quiz Questions</h1>
</div>
<form id="quiz">
  <div class="questions">
    <p>
      <b>1. He -------------------- it.</b><br/>
      <label><input type="radio" name="q1" value="don't like" />don't like</label><br/>
      <label><input type="radio" name="q1" value="doesn't like" />doesn't like</label><br/>
      <label><input type="radio" name="q1" value="doesn't likes" />doesn't likes</label>
    </p>
    <hr>
    <p><b>2. They -------------------- here very often.</b><br/>
      <label><input type="radio" name="q2" value="don't come">don't come</label><br/>
      <label><input type="radio" name="q2" value="doesn't come">doesn't come</label><br/>
      <label><input type="radio" name="q2" value="doesn't comes">doesn't comes</label>
    </p>
    <hr>
    <p><b>3. John and Mary -------------------- twice a week.</b><br/>
      <label><input type="radio" name="q3" value="come">come</label><br/>
      <label><input type="radio" name="q3" value="comes">comes</label><br/>
      <label><input type="radio" name="q3" value="coming">coming</label><br/>
    </p>
    <hr>
    <p>
      <input type="button" value="Grade Me" id="scoreButton">
      <input type="reset" value="Clear"><br/> 
      Number of score out of 15 = <input type="text" size="15" id="mark"> 
      Score in percentage = <span id="percentage"></span>
    <p>
  </div>
</form>

Answer 3

哇！。。关闭。。谢谢您的支持。但是，所有错误的答案仍然显示为红色。这将使用户知道他回答错了哪个问题。那部分是好的。但是一旦错误答案用红色标记（我的意思是仅错误选择的单选按钮选择文本，而不是整个问题和答案选择

该错误尝试的正确答案以绿色显示，以启发用户。可悲的是，我再次失败了CSS。我想在博客中创建测验，并在博客文章的html中添加带有条件标签的自定义CSS。但是，我将在此处添加修改后的代码，以便按照我所说的正确操作获得清晰的画面。（在代码中如何以及在何处添加CSS规则（如果这是您的意思））

<!DOCTYPE HTML>
<html>
<body>
<title>Quiz Questions And Answers</title>
<div class="header">
    <h1>Quiz Questions</h1>
</div>
<form id="quiz">
    <div class="questions">
        <p>
        <b>1. He -------------------- it.</b><br/>
        <label><input type="radio" name="q1" value="don't like" />don't like</label><br/>
        <label><input type="radio" name="q1" value="doesn't like" />doesn't like</label><br/>
        <label><input type="radio" name="q1" value="doesn't likes" />doesn't likes</label>
        </p>
        <hr>
        <p><b>2. They -------------------- here very often.</b><br/>
        <label><input type="radio" name="q2" value="don't come">don't come</label><br/>
        <label><input type="radio" name="q2" value="doesn't come">doesn't come</label><br/>
        <label><input type="radio" name="q2" value="doesn't comes">doesn't comes</label>
        </p>
        <hr>
        <p><b>3. John and Mary -------------------- twice a week.</b><br/>
        <label><input type="radio" name="q3" value="come">come</label><br/>
        <label><input type="radio" name="q3" value="comes">comes</label><br/>
        <label><input type="radio" name="q3" value="coming">coming</label><br/>
        </p>
        <hr>
        <p>
        <input type="button" value="Grade Me" id="scoreButton">
        <input type="reset" value="Clear"><br/> 
        Number of score out of 15 = <input type="text" size="15" id="mark"> 
        Score in percentage = <span id="percentage"></span>
        <p>
    </div>
 </form>
 <script>
     var answers = ["doesn't like","don't come","come"];
     var rads, quiz; // need to be set after load
     window.addEventListener("load",function() { // when page loads
         quiz = document.getElementById("quiz");
         rads = quiz.querySelectorAll("input[type=radio]"); // all radios in the quiz
        document.getElementById("scoreButton").addEventListener("click",function(e) { // on submit
            var score = 0;
            var checked = quiz.querySelectorAll("input[type=radio]:checked"); // all checked radios
            for (var i=0;i<checked.length;i++) { // loop over all checked radios in the form
                var idx = checked[i].name.substring(1)-1; //remove the q from the name - JS arrays start at 0
                var correct = checked[i].value==answers[idx];
                checked[i].closest("p").classList.toggle("error",!correct)
                checked[i].closest("p").classList.toggle("correct",correct)
                score += correct?3:-1; // this is called a ternary
            }
            var scoreper = Math.round(score * 100 / rads.length);
            document.querySelector("#percentage").innerHTML = scoreper + "%";
            quiz.mark.value = score;
        });  
    });
</script>
</body>
</html>

Answer 4

您可以尝试以下方法：

    <!DOCTYPE html>
<html>
    <head>
<script>

function myFunction() {
    var coffee = document.forms[0];
    var txt = "";
    var i;
    for (i = 0; i < coffee.length; i++) {
        if (coffee[i].checked) {
            document.getElementById("score"+i).style.color = "green";
            document.getElementById("order").value = "You Clicked Option " + i;
        }

}                                        }
</script>

    </head>
<body>
  <div id="score1" style="font-size: 50px">1</div>
  <div id="score2" style="font-size: 50px">2</div>
  <div id="score3" style="font-size: 50px">3</div>
  <div id="score4" style="font-size: 50px">4</div>
**<form action="/action_page.php">
     <input type="text" id="order" size="50">
     <br>
    <input type="radio" name="coffee" value="1" onclick="myFunction()">Option 1<br>
    <input type="radio" name="coffee" value="2" onclick="myFunction()">Option 2<br>
    <input type="radio" name="coffee" value="3" onclick="myFunction()">Option 3<br>
    <input type="radio" name="coffee" value="4" onclick="myFunction()">Option 4<br>
</form>**




</body>
</html>