Question

我正在创建一个有关国家首都的简单测验，希望网站在用户点击“提交”按钮后突出显示每个问题的正确答案（绿色），并突出显示所有选择的错误答案（红色）。我在这个站点上搜索了类似的问题，但是提供的答案使我感到困惑。

我想激活背景色以及给出正确答案百分比的警报消息。目前，该警报可以正常运行，但是我希望获得背景色的帮助。

function check() {
  var q1 = document.quiz.q1.value;
  var q2 = document.quiz.q2.value;
  var q3 = document.quiz.q3.value;
  var q4 = document.quiz.q4.value;
  var q5 = document.quiz.q5.value;
  var count = 0;


  if (q1 == "c") {

    count++;
  }

  if (q2 == "d") {
    count++;
  }

  if (q3 == "c") {
    count++;
  }

  if (q4 == "b") {
    count++;
  }

  if (q5 == "d") {
    count++;
  }
  var final = (count / 5) * 100
  alert("Your got " + final + "%  correct!");
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  color: rgb(0, 0, 0);
  font-size: 100%;
  font-weight: bold;
}

body {
  text-align: left;
  padding-left: 25px;
  background-color: rgb(255, 253, 208);
}

h1 {
  color: rgb(0, 0, 0);
}

.Correct {
  background-color: lawngreen;
}

.Incorrect {
  background-color: red;
}

<form id="quiz" name="quiz">

  <p>What is the capital of the USA?</p>
  <br>
  <input type="radio" name="q1" value="a" class="Incorrect">Chicago <br>
  <input type="radio" name="q1" value="b" class="Incorrect">Maimi<br>
  <input type="radio" name="q1" value="c" class="Correct">Washington DC <br>
  <input type="radio" name="q1" value="d" class="Incorrect">Vegas<br>
  <br>

  <p>What is the current capital of Brazil?</p>
  <br>
  <input type="radio" name="q2" value="a" class="Incorrect">Salvador
  <br>
  <input type="radio" name="q2" value="b" class="Incorrect">Rio de Janero <br>
  <input type="radio" name="q2" value="c" class="Incorrect">Sao Paulo
  <br>
  <input type="radio" name="q2" value="d" class="Correct">Brasilia
  <br>
  <br>

  <p>What is the capital of Japan?</p>
  <br>
  <input type="radio" name="q3" value="a" class="Incorrect">Osaka <br>
  <input type="radio" name="q3" value="b" class="Incorrect">Kyoto <br>
  <input type="radio" name="q3" value="c" class="Correct">Tokyo<br>
  <input type="radio" name="q3" value="d" class="Incorrect">Sapporo<br> <br>

  <p>What is the capital of Germany?</p>
  <input type="radio" name="q4" value="a" class="Incorrect">Munich<br>
  <input type="radio" name="q4" value="b" class="Correct">Berlin<br>
  <input type="radio" name="q4" value="c" class="Incorrect">Cologne<br>
  <input type="radio" name="q4" value="d" class="Incorrect">Hamburg<br>

  <p>What is the capital of South Korea? </p>
  <input type="radio" name="q5" value="a" class="Incorrect">Busan<br>
  <input type="radio" name="q5" value="b" class="Incorrect">Incheon<br>
  <input type="radio" name="q5" value="c" class="Incorrect">Jeju<br>
  <input type="radio" name="q5" value="d" class="Correct">Seoul<br>
  <br/>
  <input type="button" value="submit" onclick="check()">
</form>

Answer 1

您当前正在尝试设置输入单选按钮（可单击的圆圈）的样式，但是希望改为设置文本的样式。传统上，您应该将每个选项的文本和输入都包装在<label>标记中。然后将css样式应用于每个标签。我在下面的代码中为您做了第一个。

还要在每个标签上添加for="..."，以便在单击文本时也选择相应的输入框。您还需要在每个输入中添加一个id="..."，此功能才能起作用。

// js truncated, no changes

.Incorrect {
  background-color: red;
}
// css truncated, no changes

<form id="quiz" name="quiz">

  <p>What is the capital of the USA?</p>
  <br>
  <label for="q1a" class="Incorrect">
      <input type="radio" name="q1" id="q1a" value="a">
          Chicago
  </label> <br>
  <input type="radio" name="q1" value="b" class="Incorrect">Maimi<br>
  <input type="radio" name="q1" value="c" class="Correct">Washington DC <br>
  <input type="radio" name="q1" value="d" class="Incorrect">Vegas<br>
  <br>
  <input type="button" value="submit" onclick="check()">
</form>

Answer 2

除了chadiusvt Answer，您还可以添加以下几行：

在CSS区域的末尾（恰好在.Incorrect部分旁边）：

.nocolor {
    background-color: rgb(255, 253, 208);
}

在JS区域末尾（在Alert之后，但在函数内部）：

var elem = document.getElementsByClassName("nocolor");
while (elem.length)
    elem[0].className = elem[0].className.replace(/\bnocolor\b/g, "");

现在将“ nocolor”类添加到所有Label-Elements中。看起来像这样

<label class="Incorrect nocolor" ><input type="radio" name="q1" value="a">Chicago</label><br>
<label class="Incorrect nocolor" ><input type="radio" name="q1" value="b">Maimi</label><br>
<label class="Correct   nocolor" ><input type="radio" name="q1" value="c">Washington D.C.</label><br>

这个新类'nocolor'将隐藏背景色，直到您单击Button。必须在.Correct和.Incorrect之后，这样它将覆盖红色/绿色的Background临时值！

JS的三行： 1. Line查找所有带有'nocolor'类的Elements 2.线穿过元素并 3. Line删除每个Element上的所有nocolor类。 =红色/绿色背景将再次可见（单击按钮后）。

如何突出显示在线测验的正确和错误答案？

2 个答案: