正文

HTML5单选题代码示例：轻松实现互动式选择题

/0 浏览量
0321

在HTML5中，我们可以使用<form>元素和<input>元素来创建一个简单的单选题。以下是一个实现互动式选择题的代码示例，它包括HTML和JavaScript，以便在用户选择答案后立即提供反馈。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>互动式单选题示例</title>
<script>
function checkAnswer() {
    // 获取用户选择的答案
    var selectedAnswer = document.querySelector('input[name="question1"]:checked').value;
    // 定义正确答案
    var correctAnswer = "B";
    // 显示结果
    var resultElement = document.getElementById("result");
    if (selectedAnswer === correctAnswer) {
        resultElement.innerHTML = "<strong>正确！</strong>";
        resultElement.style.color = "green";
    } else {
        resultElement.innerHTML = "<strong>错误！正确答案是 B。</strong>";
        resultElement.style.color = "red";
    }
    // 阻止表单提交
    return false;
}
</script>
</head>
<body>

<form onsubmit="return checkAnswer()">
    <h2>以下哪个是HTML5的一个新特性？</h2>
    <label><input type="radio" name="question1" value="A"> 拖放功能</label><br>
    <label><input type="radio" name="question1" value="B"> 媒体元素</label><br>
    <label><input type="radio" name="question1" value="C"> 语义元素</label><br>
    <label><input type="radio" name="question1" value="D"> CSS3</label><br>
    <input type="submit" value="提交">
</form>

<div id="result"></div>

</body>
</html>

代码说明：

  1. HTML结构：

    • 使用<form>标签创建一个表单。
    • 在<form>标签内，使用<h2>标签定义问题标题。
    • 使用<label>和<input type="radio">标签创建单选题选项。
    • name="question1"属性确保所有选项属于同一组，以便用户只能选择一个答案。
    • value属性为每个选项分配一个值，以便JavaScript可以识别用户的选择。

  2. JavaScript功能：

    • checkAnswer函数在表单提交时被调用。
    • 使用document.querySelector获取用户选择的答案。
    • 检查用户选择的答案是否与定义的正确答案相匹配。
    • 根据答案正确与否，在页面上显示相应的结果。

  3. 样式：

    • 使用JavaScript修改resultElement的innerHTML和style.color来显示结果，并使用不同的颜色表示正确或错误。

这个示例提供了一个基本的互动式单选题实现，可以根据需要进行扩展和定制，例如添加更多问题、样式调整或者使用更复杂的逻辑来处理答案。

-- 展开阅读全文 --