用标签显示一道简单的测试题,答案使用单击按钮列出用户选择答案按后在另一个标签中显示结果或说明。
时间: 2024-10-28 10:07:07 浏览: 16
编程包含一个标签和一个按钮,单击按钮时,标签的内容在“你好”和“再见”之间切换
5星 · 资源好评率100%
这是一个常见的网页或桌面应用程序设计场景,通常涉及到前端HTML、CSS和JavaScript的交互。下面是一个简化版的描述:
1. 首先,创建一个HTML结构,包含一个问题标签 `<div id="question">` 和两个选项按钮 `<button>`,分别代表可能的答案。
```html
<div id="question">
<p>这是一道测试题:</p>
<p><input type="radio" name="answer" value="option1"> 选项A</button>
<input type="radio" name="answer" value="option2"> 选项B</button>
<button onclick="submitAnswer()">提交</button>
</div>
```
2. CSS用于美化按钮和布局,保持简洁清晰。
```css
#question {
margin-bottom: 10px;
}
button {
margin-right: 10px;
}
```
3. JavaScript部分处理用户点击并显示结果。你可以添加一个隐藏的结果区域 `<div id="result"></div>`。
```javascript
function submitAnswer() {
var selectedOption = document.querySelector('input[name="answer"]:checked').value;
// 创建一个新的div元素,显示结果或说明
var resultDiv = document.createElement("div");
if (selectedOption === 'correct') {
resultDiv.textContent = "恭喜,你选择了正确答案!";
} else {
resultDiv.textContent = "抱歉,尝试下一次吧。";
}
document.getElementById('result').appendChild(resultDiv);
}
```
阅读全文