进行测验，需要根据Javascript中的正确选择更改背景颜色

Making a quiz and need to change background color based on correct choice in Javascript

本文关键字：选择 颜色 背景 Javascript      更新时间：2023-09-26

我正在为一个班级做测验，对Javascript有点陌生。我需要交替使用问题的背景颜色，我已经弄清楚了。一旦每个问题得到正确回答，他们还需要更改颜色，因此当单击正确的单选按钮时，问题的背景颜色会立即更改，例如从白色变为蓝色。我确定这很简单，我似乎不知道从哪里开始做。感谢任何正确方向的帮助。这是我的测验示例，以及我目前对Javascript的了解。

if (jQuery) {
  var checkAnswers = function() {
    var answerString = "";
    var answers = $(":checked");
    answers.each(function(i) {
      answerString = answerString + answers[i].value;
    });
    $(":checked").each(function(i) {
      var answerString = answerString + answers[i].value;
    });
    checkIfCorrect(answerString);
  };
  var checkIfCorrect = function(theString) {
    if (parseInt(theString, 16) === 811124566973) {
      var d = document.getElementById("question1");
      var e = document.getElementById("question3");
      var f = document.getElementById("question5");
      var g = document.getElementById("question7");
      var h = document.getElementById("question9");
      var i = document.getElementById("question2");
      var j = document.getElementById("question4");
      var k = document.getElementById("question6");
      var l = document.getElementById("question8");
      var m = document.getElementById("question10");
      d.className += "correctOdd";
      e.className += "correctOdd";
      f.className += "correctOdd";
      g.className += "correctOdd";
      h.className += "correctOdd";
      i.className += "correctEven";
      j.className += "correctEven";
      k.className += "correctEven";
      l.className += "correctEven";
      m.className += "correctEven";
      $("h1").text("You Win!");
      $("canvas").show();
    }
  };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quiz">
  <div id="question1">
    <div class="question">
      Which is not a main file type that we use to make websites?
    </div>
    <input type="radio" name="question1" value="a" />
    <label>.html</label>
    <input type="radio" name="question1" value="b" />
    <label>.exe</label>
    <input type="radio" name="question1" value="c" />
    <label>.js</label>
    <input type="radio" name="question1" value="d" />
    <label>.css</label>
  </div>

试试这个：

jQuery('input[value="a"]').click(function(){
 if (jQuery(this).is(':checked'))
 {
 jQuery('body').css("background-color", "blue");
 }
});
jQuery('input[value="b"]').click(function(){
 if (jQuery(this).is(':checked'))
 {
    jQuery('body').css("background-color", "purple");
 }

等。

2 重要注意事项：css（"background-color"， "blue"）， "blue" 可以是 RGB 颜色。jQuery（'input[value="b"]'），是一个选择器，它选择所有值为"b"的文档按钮。如果您有很多 b 值比率按钮，则最好按 ID 选择。

检查它是否正常工作：https://jsfiddle.net/Aschab/d4qmhuq1/

也许在单选按钮上使用 onchange（此代码未测试）

onchange="checkanswer(this)"
function checkanswer(ele){
   if(ele.value=="A")
       ele.style.backgroundColor = 'green';
   else
       ele.style.backgroundColor = 'red';
}

但是使用JavaScript检查答案是一个糟糕的操作，你应该在服务器端检查它，否则，人们可以使用 Ctrl+You 来找到正确的答案......

相关文章：