在 HTML 中添加一个按钮

<p class="question">1. What is the answer to this question?</p>        
<ul id="answerswers" class="answerswers">            
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>                   
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>            
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>            
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>
<input type="button" value="submit" onClick="showAnswer()" />       
</ul>
<span id="info"></span>

然后在该代码段上方添加一个脚本：

<script>
    function showAnswer(){
        if(document.getElementById('q1a').checked){
            document.getElementById('info').innerHTML = "Correct!";
        }else{
            document.getElementById('info').innerHTML = "Incorrect!";
        }
    }
</script>

我不知道您的测验的答案，因此在这种情况下答案 1 是正确的。

• 两个.addEventListeners()

  • 容器上有一个，用于保存所有问题和答案(例如 #QA1 (
  • 另一个在完成测验时使用的按钮上(例如 #btn1 (

• 当用户选择答案时，#QA1将侦听任何单选按钮(例如 .answers(。将单个事件侦听器用于多个event.targets(即单击的元素(比在每个单选按钮上添加一个事件侦听器要高效得多。通过比较实际点击的内容(单选按钮(和元素与侦听器，我们可以获得单选按钮的 ID。有关详细信息，请参阅此文章。

• 一旦确定了单击的单选按钮的 id(请参阅前面的参考(，它就会被推送到一个数组(例如 answers[](。

• 用户完成后，他/她单击"完成"按钮，触发#btn1的点击事件。

  • for循环用于遍历answer[]数组和key[]数组。在每次迭代(即循环(中，将两者进行比较以获得匹配的元素。
  • 结果打印在嵌套在有序列表 (<ol> ( 中的<output>元素#out1 上。

片段

var qa = document.getElementById('QA1');
var btn1 = document.getElementById('btn1');
var answers = [];
var key = ['q1c', 'q2a', 'q3d'];
qa.addEventListener('click', function(event) {
  if (event.target != event.currentTarget) {
    var choice = event.target.id;
    answers.push(choice);
  }
  event.stopPropagation();
}, false);
btn1.addEventListener('click', function(event) {
  event.preventDefault();
  var qList = document.getElementsByClassName('question');
  var out1 = document.getElementById('out1');
  for (var i = 0; i < qList.length; i++) {
    if (answers[i] === key[i]) {
      out1.innerHTML += '<li>' + answers[i] + ' is correct</li>';
    } else {
      out1.innerHTML += '<li>' + answers[i] + ' is incorrect, the correct answer is ' + key[i] + '</li>';
    }
  }
}, false);

body {
  font: 400 16px/1.45'Verdana';
}
* {
  font: inherit;
}
.question {
  margin-bottom: 15px;
}
.answers {
  list-style: none;
}
.answers li {
  margin-left: -15px;
}
input[type="radio"] {
  position: relative;
  top: 2.25px;
}
#btn1 a {
  text-decoration: none;
}
#out1 {

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<ol id="QA1" class="QA">
  <li id="q1" class="question">What is the answer to this question?
    <ol class="answerswers">
      <li>a.
        <input type="radio" name="q1" value="a" id="q1a" />
        <label for="q1a">Answer</label>
      </li>
      <li>b.
        <input type="radio" name="q1" value="b" id="q1b" />
        <label for="q1b">Answer</label>
      </li>
      <li>c.
        <input type="radio" name="q1" value="c" id="q1c" />
        <label for="q1c">Answer</label>
      </li>
      <li>d.
        <input type="radio" name="q1" value="d" id="q1d" />
        <label for="q1d">Answer</label>
      </li>
    </ol>
    <!--answers-->
  </li>
  <!--question-->
  <li id="q2" class="question">What is the answer to this question?
    <ol class="answerswers">
      <li>a.
        <input type="radio" name="q2" value="a" id="q2a" />
        <label for="q2a">Answer</label>
      </li>
      <li>b.
        <input type="radio" name="q2" value="b" id="q2b" />
        <label for="q2b">Answer</label>
      </li>
      <li>c.
        <input type="radio" name="q2" value="c" id="q2c" />
        <label for="q2c">Answer</label>
      </li>
      <li>d.
        <input type="radio" name="q2" value="d" id="q2d" />
        <label for="q2d">Answer</label>
      </li>
    </ol>
    <!--answers-->
  </li>
  <!--question-->
  <li id="q3" class="question">What is the answer to this question?
    <ol class="answerswers">
      <li>a.
        <input type="radio" name="q3" value="a" id="q3a" />
        <label for="q3a">Answer</label>
      </li>
      <li>b.
        <input type="radio" name="q3" value="b" id="q3b" />
        <label for="q3b">Answer</label>
      </li>
      <li>c.
        <input type="radio" name="q3" value="c" id="q3c" />
        <label for="q3c">Answer</label>
      </li>
      <li>d.
        <input type="radio" name="q3" value="d" id="q3d" />
        <label for="q3d">Answer</label>
      </li>
    </ol>
    <!--answers-->
  </li>
  <!--question-->
</ol>
<!--QA-->
<button id="btn1"><a href="">DONE</a>
</button>
<ol>
  <output id="out1"></output>
</ol>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Questionare</title>
 
</head>
<body>
<p>1. What is the answer to this question?</p>     
  
  <ul onclick="man()">
<input type="radio" name="q1" value="a">Answer 1<br/>               <input type="radio" name="q1" value="b">Answer 2<br/>            
<input type="radio" name="q1" value="c">Answer 3<br/>            
<input type="radio" name="q1" value="d">Answer 4<br/>       
  </ul>
  <p id="m"></p>
<script>
  var man = function(){
    document.getElementById("m").innerHTML = 'The correct answer is: Answer 1';
  }
  </script>
</body>
</html>

这是你想要的，以最简单的方式完成，使用CSS文档对象模型，供参考，请转到此处HTML CSS DOM