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

Question

Heading我正在努力创建我的第一个网站，这将是一个多答案测试，请原谅我，如果这个问题太明显了。

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

我想突出显示一个用户选择的内容，如果此人重新思考并改变主意 - 他可以这样做，并且之前突出显示的按钮将不会突出显示，新的答案将突出显示。 我试图用图片表示我想要获得的东西。

到现在为止我正在考虑使用html + css来完成这项工作，不过或者我做错了，或者html + css不足以完成这项工作，或者它太难了，而且更容易使用javascript （到目前为止我没有使用javascript，我只知道它用于重逻辑/在网站中需要在客户端完成一些超级东西）。我想通过组合html + css，做一个帖子或获取请求来做所有事情。我之所以想到这种组合 - 我尽量不要过度复杂化所有东西，而不是＃34;用大炮射击飞行＆＃34;。 这是代码，我试图从：

开始

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

其中css代码是这个（不是孔css，但是我的想法很清楚我正在考虑使用active / target＆＃34;伪类＆＃34;）：

button {
    border: 2px solid gray;
}
button:active {
    border: 2px solid green;
}
button:target {
    border: 2px solid red;
}

问题： 如果我上面提到的解决问题的想法有些不对劲，你能不能解释为什么？ 在这种情况下，最佳做法是什么？ 我应该注意哪个方向，以及出现问题后我应该注意哪些方向？

Answer 1

你真的不需要JavaScript，只需使用隐藏的单选按钮即可：

tf.reset_default_graph()
np.random.seed(2010)
n = 300
x_data = np.random.random([n, 2]).tolist()
y_data = [[1., 0.] if v[0]> 0.5 else [0., 1.] for v in x_data]

x = tf.placeholder(tf.float32, [None, 2]) 
W = tf.Variable(tf.zeros([2, 2]))
b = tf.Variable(tf.zeros([2]))
y = tf.nn.softmax(tf.matmul(x , W) + b)

y_ = tf.placeholder(tf.float32, [None, 2]) 
cross_entropy = -tf.reduce_sum(y_ * tf.log(y))
regularizer = tf.reduce_sum(tf.square(y))
train_step = tf.train.AdamOptimizer(1.0).minimize(cross_entropy+regularizer)

correct_predict = tf.equal(tf.argmax(y, 1), tf.argmax(y_, 1)) 
accuracy = tf.reduce_mean(tf.cast(correct_predict, tf.float32))

s = tf.Session()
s.run(tf.initialize_all_variables())

for i in range(30):
        s.run(train_step, feed_dict = {x: x_data, y_: y_data})
        cost1,cost2=s.run([cross_entropy,accuracy], feed_dict = {x: x_data, y_: y_data})
        print(cost1, cost2)

.question {
  margin: 20px;
}

.question input[type="radio"] {
  display: none;
}

.question span {
  
  box-sizing: border-box;
  display: inline-block;
  height: 40px;
  padding: 10px;
  line-height: 20px;
  border-radius: 10px;
  
  font-weight: bold;
  border: 2px solid black;

  cursor: pointer;
}

.question input[type="radio"]:checked + span {
 
  /* The selected state of the answer */
  
  background-color: #72EB72;
}

Answer 2

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

＆＃13;

＆＃13;

// Wait for the document to load all the elements
window.addEventListener("DOMContentLoaded", function(){

  // Gather up all the buttons for question 1
  var q1 = document.querySelectorAll(".q1");
  
  // Loop through the buttons
  for(var i = 0; i < q1.length; ++i){
    
     // Wire up each button to a click event handler
     q1[i].addEventListener("click", function(){
       
         // check to see what class is currently being used for the button (selected or unselected)
         // and toggle to the other class.
         if(this.className.split(" ")[1] === "unselected"){
           this.className = "q1 selected";
         } else {
           this.className = "q1 unselected"; 
         }
       
     });
    
  }

});

＆＃13;

.unselected { background:#e0e0e0; }
.selected   { background:#909090; }
button { border-radius:20px;}

＆＃13;

<button id="q1a1" class="q1 unselected">Question 1 - Answer 1</button>
<button id="q1a2" class="q1 unselected">Question 1 - Answer 2</button>
<button id="q1a3" class="q1 unselected">Question 1 - Answer 3</button>
<button id="q1a4" class="q1 unselected">Question 1 - Answer 4</button>

＆＃13;

＆＃13;

＆＃13;