简单的javascript员工培训问卷

Simple javascript staff training questionnaire

本文关键字：员工培训 javascript 简单      更新时间：2023-09-26

我正试图为我的员工创建一个页面来培训他们。基本上，每个问题都是多选题，如果他们勾选单选框，就会收到一个小通知，比如下面的显示，上面写着"正确"或"不正确"。

页面最底部是最后一个，只有当以上所有问题都得到正确回答时才会显示。

我能得到关于如何实现这一目标的任何建议/例子吗？

关键说明：

  • 我正在努力让这件事尽可能简单，向我的员工展示该怎么做做。我将在上面为每个问题解释的信息和答案就在它们的正上方，所以javascript（或者你的建议）不必复杂或隐藏得很好
  • 我使用的是Squarespace，所以我可以访问html、java、（页眉代码）、css，以及我使用的模板的页眉/页脚代码注入

当我有一个简单的任务要用单选按钮实现时，我喜欢跳过使用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的相同示例（也可以在这里看到fiddle：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");
    }
});
相关文章：