如何通過使用 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);

一旦我們可以看到您的代碼正在運行，我將對其進行編輯以回答您問題的另一部分。