Question

我正在尝试为员工创建一个页面来训练他们。基本上每个问题都是多项选择，如果他们检查一个收音机盒，他们会得到一个小小的通知，如下面的陈述表明＆＃34;正确＆＃34;或＆＃34;不正确＆＃34;。

在页面的最底部是最后一个仅在正确回答所有上述问题时显示的内容。

我可以获得有关如何实现这一目标的任何建议/示例吗？

主要提示：

我试图尽可能简单地向我的员工展示如何做到这一点做。我将在上面针对每个问题解释的信息和答案直接在他们上面，所以javascript（或你所建议的）不必复杂或隐藏得很好。
我正在使用Squarespace，因此我可以访问html，java，（页眉代码），css，以及我使用的模板的页眉/页脚代码注入

Answer 1

当我有一个简单的任务用单选按钮实现时，我喜欢跳过使用javascript而不是听css伪类。例如：

的CSS：

.correct_answer {
  visibility: hidden;
}
.correct:checked ~ .correct_answer {
  visibility: visible;
}

HTML：

<div>
  <p id=question1>What is the teacher's favorite color?</p>
  <input type=radio class=correct name=question1 /> blue
  <br>
  <input type=radio name=question1 /> red
  <br>
  <input type=radio name=question1 /> green
  <p class=correct_answer>Correct!</p>
</div>
<div>
  <p id=question2>What month is independence day on?</p>
  <input type=radio name=question2 /> january
  <br>
  <input type=radio class=correct name=question2 /> july
  <br>
  <input type=radio name=question2 /> december
  <p class=correct_answer>Correct!</p>
</div>

它是如何工作的？〜（兄弟）运算符告诉段落显示正确答案何时处于检查状态。单选按钮上的name属性使它们相互排除为选定的答案。 div只是将一些元素与其他元素分开，以避免〜运算符匹配其他问题的正确答案。

最好的是，没有javascript :)更简单的不可能。

请参阅此小提琴中的实例：https://jsfiddle.net/zw0ptyu2/

但是如果你真的想要javascript，那么使用jQuery是相同的例子（请参阅这里的小提琴：https://jsfiddle.net/rtc6ygkz/）。

这个想法是，使用由jQuery添加和删除的实际类，而不是使用css伪类。

的CSS：

.correct_answer {
  visibility: hidden;
}
.correct_answer.active {
  visibility: visible;
}

html：保持不变。

javascript（需要jQuery）：

$("[type=radio]").change(function(){
    var correct_answer = $(this).parent().find(".correct_answer");
    if ($(this).is(".correct")) {
      correct_answer.addClass("active");
    } else {
      correct_answer.removeClass("active");
    }
});

简单的javascript员工培训问卷

1 个答案: