Javascript 如何在网页上进行多答案测试？

标题我正试图建立我的第一个网站，这将是一个多答案测试和对不起，如果这个问题太明显

在调查/测试期间，选择他认为正确的选项，即带有文本/公式的按钮

我想突出显示用户选择的一个，如果用户重新思考并改变主意，他可以这样做，先前突出显示的按钮将不亮，新答案将突出显示。 我试图用图画来表达我希望得到的东西。

到目前为止，我正在考虑使用html+css来实现这一点，但是，或者我做得不对，或者html+css不足以完成这项工作，或者它太难了，而且更易于使用javascript（到目前为止，我还没有使用javascript，我只知道它用于需要在客户端完成一些超级工作的web站点中的重逻辑）。我想通过组合html+css，通过发布或获取请求来完成所有事情。我之所以想到这种组合，是因为我尽量不让一切都过于复杂，也不“用大炮射苍蝇”。 以下是代码，我尝试从以下方面开始：

<button type="submit" value="res_1" > option 1 </button >

问题: 如果我上面提到的解决问题的想法是错误的，你能解释一下原因吗？ 在这种情况下，最佳做法是什么？

---

我应该朝哪个方向看，在出现问题之后我应该注意哪些问题？

您需要JavaScript来切换按钮的突出显示状态，但我认为您有点太害怕JavaScript了。虽然它可以用于非常复杂的操作，但也可以用于简单的事情

//等待文档加载所有元素
addEventListener（“DOMContentLoaded”，function（））{
//收集问题1的所有按钮
var q1=document.queryselectoral（“.q1”）；
//在按钮之间循环
对于（变量i=0；i
.unselected{background:#e0；}
.选定{背景：#9090；}
按钮{边框半径：20px；}
问题1-答案1
问题1-答案2
问题1-答案3
问题1-回答4
您不需要JavaScript，只需使用隐藏的单选按钮即可：


。问题{
利润率：20px；
}
.问题输入[type=“radio”]{
显示：无；
}
.问题范围{
框大小：边框框；
显示：内联块；
高度：40px；
填充：10px；
线高：20px；
边界半径：10px；
字体大小：粗体；
边框：2件纯黑；
光标：指针；
}
.问题输入[type=“radio”]：选中+span{
/*答案的选定状态*/
背景色：#72EB72；
}

一个失去90%智力的女人叫什么？
苹果
遗孀
看护
你怎么称呼一个失去90%智力的人？
蓝色
水暖工
离异
您肯定需要使用javascript来跟踪每个按钮的状态。如果你对编码还不熟悉，并且想花更多的时间，请查看React这样的前端框架，这是你学习它的最佳时机。亲爱的@Alex，谢谢你的回复，我将开始查看它！您能更准确地告诉我为什么没有javascript很难跟踪状态吗？我的意思是，我认为单选按钮或其他按钮可以做到这一点。我说得对吗？@levgenii您需要JavaScript，因为HTML不能执行if/then逻辑，而这正是切换应用于按钮的CSS类所需要的。@Scott您不需要JavaScript。你可以使用单选按钮。当然，单选按钮可以达到你想要的效果，但一旦你提交页面，它们就无法处理逻辑。你肯定需要Javascript或其他一些逻辑语言来实现这一点。在可能的情况下避免使用Javascript确实会提高生产率。尤其是在团队中工作时。第二，如果你能在HTML和CSS中使用JavaScript，为什么还要使用JavaScript？@Tim你的解决方案很好，但你用JavaScript交换隐藏元素，从而使文档结构更加复杂。我并不是说你错了，但添加更多DOM元素也会带来开销。这是真的。虽然，现在使用模板技术，我并不认为它有什么缺点。此外，您的解决方案需要更多的代码和/或HTML来支持表单提交。我的解决方案比您的解决方案需要更多的HTML吗？根据您存储数据的方式，您需要添加表单、隐藏输入和逻辑来设置这些值。或者您需要使用JavaScript提交它，这将需要大量代码或外部库来支持多种浏览器。
button {
    border: 2px solid gray;
}
button:active {
    border: 2px solid green;
}
button:target {
    border: 2px solid red;
}