首页.用标签显示一道简单的测试题，答案使用单选按钮列出，用户选择答案后，会在另一个标签中显示结果或

.用标签显示一道简单的测试题，答案使用单选按钮列出，用户选择答案后，会在另一个标签中显示结果或

时间: 2024-10-28 17:07:22 浏览: 10

在一个简单的HTML页面上，你可以使用`<form>`标签创建一个测试题，并结合`<label>`、`<input type="radio">`和`<button>`元素来设计单选题和结果显示部分。这是一个基本的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <title>简单测试题</title> </head> <body>  <h2>选择正确的答案:</h2> <form id="testForm"> <label for="optionA"><input type="radio" name="answer" value="A"> A选项</label><br> <label for="optionB"><input type="radio" name="answer" value="B"> B选项</label><br> <label for="optionC"><input type="radio" name="answer" value="C"> C选项</label><br>  <button onclick="checkAnswer()">提交</button> </form>  <div id="result" style="display:none;"> <h2>答案:</h2> <p id="correctOption"></p> </div> <script> function checkAnswer() { var selected = document.querySelector('input[name="answer"]:checked').value; document.getElementById("correctOption").innerText = "您的答案是: " + selected; // 显示或隐藏结果区域 if (selected) { document.getElementById("result").style.display = "block"; } else { alert("请选择一个答案！"); } } </script> </body> </html> ``` 在这个例子中，用户选择答案后点击提交按钮，`checkAnswer()`函数会被触发，检测哪一个是选中的，然后在结果区域显示答案。如果没有选择，则会弹出警告。

阅读全文