如何通过使用 jQuery 添加系统工作来进行此测验？

Question

在这个测验中，每个 div 都是一个问题。 我需要它是绝对的，所以每次单击下一个按钮时，下一个 div 显示，前一个隐藏，当单击前一个按钮时，情况相反。

以下是我需要帮助的内容：

1. 我将答案存储到一个数组中，并将字段中输入的val()与相应的数组 ( answers ) 进行比较，然后添加到添加系统 ( totalcorrect++ ) 中。 我需要在#result div 中显示总得分。 我不知道该怎么做。

2. 我可以看到我的计算是正确的，但我遇到的问题是每次我按预览然后再次按下一个问题时，该问题的总和（或我返回的许多问题）都会再次计算，因此它将totalcorrect值加倍。 我如何防止这种情况发生？

3. 有没有更好的方法来编写我的数组，以便按问题对其进行分类并得到回答？

 var answers = [ ["A"], ["red"], ["green"], ["Concord"], ["Pinot Noir"], ["Lemberger"] ]; var totalCorrect = 0; var totalAnswer = answers.length; //Page 1 $("#btnNext_q1").click(function(e) { e.preventDefault() $('.checbox-q').css({ "opacity": 0, "z-index": 1 }); $('.fillBlanks-q').css({ "opacity": 1, "z-index": 20 }); if ($("#q1-a1").val() == answers[0]) { totalCorrect++; } }); //Page 2 $("#btnPrev_q2").click(function(e) { e.preventDefault() $('.checbox-q').css({ "opacity": 1, "z-index": 20 }); $('.fillBlanks-q').css({ "opacity": 0, "z-index": 1 }); }); $("#btnNext_q2").click(function(e) { e.preventDefault() $('.fillBlanks-q').css({ "opacity": 0, "z-index": 1 }); $('.list-q').css({ "opacity": 1, "z-index": 20 }); if ($("#q2-a1").val() == answers[1]) { totalCorrect++; } if ($("#q2-a2").val() == answers[2]) { totalCorrect++; } }); //Page 3 $("#btnPrev_q3").click(function(e) { e.preventDefault() $('.fillBlanks-q').css({ "opacity": 1, "z-index": 20 }); $('.list-q').css({ "opacity": 0, "z-index": 1 }); }); $("#submit").click(function(e) { e.preventDefault() $('list-q').css({ "opacity": 0, "z-index": 1 }); $('#result').css({ "opacity": 1, "z-index": 20 }); if ($("#q3-a1").val() == answers[3]) { totalCorrect++; } if ($("#q3-a2").val() == answers[4]) { totalCorrect++; } if ($("#q3-a1").val() == answers[5]) { totalCorrect++; } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="checbox-q" style="opacity: 0; position:absolute; z-index:18;"> <span>What is an animal?<?span> <input type="checkbox" id="q1-a1" value="A"> <label>Dog</label> <input type="checkbox" id="q1-a2" value="B"> <label>Tiger</label> <input type="checkbox" id="q1-a3" value="C"> <label>Flower</label> <input type="checkbox" id="q1-a4" value="4"> <label>Cat</label> <button id="btnPrev_q1">Preview</button> <button id="btnNext_q1">Next</button> </div> <div class="fillBlanks-q" style="opacity: 0; position:absolute; z-index:17;"> <span>Apples can be in the colour <input type="text" id="q2-a1"> and <input type="text" id="q2-a2"> </span> <button id="btnPrev_q2">Preview</button> <button id="btnNext_q2">Next</button> </div> <div class="list-q" style="opacity: 0; position:absolute; z-index:16;"> <span>List 3 types of Grapes<?span> <ol> <li><input type="text" id="q3-a1"></li> <li><input type="text" id="q3-a2"></li> <li><input type="text" id="q3-a3"></li> </ol> <button id="btnPrev_q3">Preview</button> <button id="submit">Next</button> </div> <div id="result" class="pages" style="opacity: 0; position:absolute; z-index:11;"><div>

Answer 1

我知道这应该是评论，但我还没有足够的代表发表评论。

您的 HTML 有点过时，您对某些地方的 shift 键感到有点满意（第 3 行和第 27 行的 <?span> 而不是</span> ）

你还没有关闭最后一个 div 标签

不透明度在所有内容上都设置为 0，这就是为什么当人们单击运行代码片段时没有显示任何内容 从样式标签中删除不透明度或将其设置为 100，以便人们可以看到表单。

将总分放在结果 div 中：

$('#result').text(totalCorrect);

一旦我们可以看到您的代码正在运行，我将对其进行编辑以回答您问题的另一部分。