在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>
代码说明:
HTML结构:
- 使用
<form>标签创建一个表单。 - 在
<form>标签内,使用<h2>标签定义问题标题。 - 使用
<label>和<input type="radio">标签创建单选题选项。 name="question1"属性确保所有选项属于同一组,以便用户只能选择一个答案。value属性为每个选项分配一个值,以便JavaScript可以识别用户的选择。
- 使用
JavaScript功能:
checkAnswer函数在表单提交时被调用。- 使用
document.querySelector获取用户选择的答案。 - 检查用户选择的答案是否与定义的正确答案相匹配。
- 根据答案正确与否,在页面上显示相应的结果。
样式:
- 使用JavaScript修改
resultElement的innerHTML和style.color来显示结果,并使用不同的颜色表示正确或错误。
- 使用JavaScript修改
这个示例提供了一个基本的互动式单选题实现,可以根据需要进行扩展和定制,例如添加更多问题、样式调整或者使用更复杂的逻辑来处理答案。
