Javascript 简单员工培训问卷

我正试图为我的员工创建一个培训页面。基本上，每个问题都是多项选择题，如果他们选中一个广播框，他们会收到一个小通知，如下面显示的“正确”或“不正确”

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

我能得到一些关于如何实现这一点的建议/例子吗

主要注意事项：

• 我正试图让这一切尽可能简单，让我的员工知道该做什么 做以上我将为每个问题解释的信息和答案 就在它们的正上方，所以javascript（或者你建议的任何东西） 不必很复杂或隐藏得很好
• 我使用的是Squarespace，因此我可以访问html、java（页眉代码）、css以及我使用的模板的页眉/页脚代码注入

---

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

css:

html:

html：保持不变

javascript（需要jQuery）：

---

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

css:

html:

html：保持不变

javascript（需要jQuery）：

---

你忘了问问题了。@Andy-\u-你完全正确。我编辑了一个问题。你忘了问问题。@Andy-\u-你完全正确。我已经编辑过，实际上是想问一个问题。请注意，要让文本也激活相应的单选按钮，您只需将其包含在一个带有属性“for”的标签中，该属性的值与相应输入元素的“id”属性的值相同。为了简单起见，我决定不在答案中包含这一点。在这种情况下，我认为使用display:block比visibility:visible更容易访问。我相信“隐藏的可见性”只是将其隐藏在眼睛之外，但我认为屏幕读者仍然会注意到它。你不希望他们过早地找到答案；）。你是对的，这也取决于味道，我不喜欢元素推动其他元素，因为它们变得可见，这是可见性的优势。同意。我想您可以输入文本“answer goes here”，然后使用javascript将其更改为“correct”，并在选择正确的单选按钮时使其可见……但这并不像您的方式那么简单。我不确定我们能做些什么来避免这种情况，但是，为了使它易于访问，我喜欢非java版本，它非常适合在问卷的每个部分中使用。但是如果上面所有的问题都是正确的，我怎么才能在页面底部显示a呢？对不起，我的问题不太清楚。但最后一部分,，员工正确完成培训后，我希望表单变得可见，以便记录完成培训的人员。请注意，要让文本也激活相应的单选按钮，您只需将其包含在一个标签中，标签上的“for”属性与相应输入元素的“id”属性具有相同的值。为了简单起见，我决定不在答案中包含这一点。在这种情况下，我认为使用display:block比visibility:visible更容易访问。我相信“隐藏的可见性”只是将其隐藏在眼睛之外，但我认为屏幕读者仍然会注意到它。你不希望他们过早地找到答案；）。你是对的，这也取决于味道，我不喜欢元素推动其他元素，因为它们变得可见，这是可见性的优势。同意。我想您可以输入文本“answer goes here”，然后使用javascript将其更改为“correct”，并在选择正确的单选按钮时使其可见……但这并不像您的方式那么简单。我不确定我们能做些什么来避免这种情况，但是，为了使它易于访问，我喜欢非java版本，它非常适合在问卷的每个部分中使用。但是如果上面所有的问题都是正确的，我怎么才能在页面底部显示a呢？对不起，我的问题不太清楚。但对于最后一部分，一旦员工正确地完成了培训，我希望有一个表格变得可见，这样我就可以记录谁完成了培训。

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

<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>

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

$("[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");
    }
});