html答题游戏(html5题库：代码示例)

HTML答题游戏是一种基于HTML技术的互动游戏，通过在网页上展示题目，并提供选项供用户选择答案。在HTML5中，我们可以使用代码示例来创建一个简单的HTML答题游戏。

我们需要创建一个包含题目和选项的HTML结构。可以使用无序列表（`<ul>`）来表示选项，并为每个选项使用列表项（`<li>`）进行包裹。在每个选项中，我们可以使用单选按钮（`<input type="radio">`）来供用户选择答案。我们还可以使用`<label>`元素来为每个选项提供文本描述。

<p>以下哪个城市是中国的首都？</p>
<ul>
  <li>
    <input type="radio" id="option1" name="answer">
    <label for="option1">上海</label>
  </li>
  <li>
    <input type="radio" id="option2" name="answer">
    <label for="option2">北京</label>
  </li>
  <li>
    <input type="radio" id="option3" name="answer">
    <label for="option3">广州</label>
  </li>
  <li>
    <input type="radio" id="option4" name="answer">
    <label for="option4">深圳</label>
  </li>
</ul>

接下来，我们需要添加一些JavaScript代码来实现答题的逻辑。我们可以使用事件监听器来监听用户选择答案的行为，并在用户选择后进行判断。在判断用户答案的过程中，我们可以使用条件语句（`if`语句）来比较用户选择的答案和正确答案，并根据判断结果给出相应的提示。

<script>
  const options = document.querySelectorAll('input[name="answer"]');
  options.forEach(option => {
    option.addEventListener('change', () => {
      if (option.id === 'option2') {
        alert('恭喜你，回答正确！');
      } else {
        alert('很遗憾，回答错误！');
      }
    });
  });
</script>

在上述代码中，我们首先使用`querySelectorAll`方法选取所有的选项（`<input>`元素），然后使用`forEach`方法为每个选项添加事件监听器。在事件监听器中，我们使用条件语句（`if`语句）判断用户选择的答案是否与正确答案（`option2`）一致，如果一致，则弹出提示框显示回答正确的信息，否则弹出提示框显示回答错误的信息。

通过以上的代码示例，我们可以创建一个简单的HTML答题游戏。用户可以在网页上选择答案并得到相应的提示。这种基于HTML技术的答题游戏可以增加用户的互动性和参与度，使用户更加享受游戏的过程。