更新JavaScript的測驗分數動態

我創建JavaScript和jQuery的測驗。這幾乎是我想要的地方，但分數計數器似乎並不奏效。我認爲這可能是代碼執行順序的問題。我只是想添加一個到「分數」變量時的「價值」 vaiable（檢查哪個單選按鈕被選中）等於當前問題對象的答案值。更新JavaScript的測驗分數動態

$(document).ready(function() { 
    var i = -1; 
    var qNum = 0; 
    var score = 0; 
    $(".radbut").hide(); 
    $("br").hide(); 

//display value upon radio button checked change - for debugging purposes 
$('.radbut').change(function() { 
    var value = ($('input[name="Q"]:checked').val()); 
    alert(value); 
});  

    $("#next").click(function(){ 
     var value = ($('input[name="Q"]:checked').val()); //checks which radio button is checked and sets it to value 
     i += 1; 
     qNum += 1; 
     $(".radbut").show(); 
     $("br").show(); 

     //display questions and variables 
     $("#questionLoc").text(allQuestions[i].question); 
     $("#R1").text(allQuestions[i].choices[0]); 
     $("#R2").text(allQuestions[i].choices[1]); 
     $("#R3").text(allQuestions[i].choices[2]); 
     $("#R4").text(allQuestions[i].choices[3]); 
     $("#qNum").text(qNum); 
     $("#score").text(score); 
     $("#value").text(value); 
     $("#quesVal").text(allQuestions[i].answer); 

     //add +1 to score if choice matches answer 
     if (value == allQuestions[i].answer) { 
      score++; 
      }; 
     }); 
}); 

var allQuestions = []; 

function question(question, choices, answer) { 
       this.question = question; 
       this.choices = choices; 
       this.answer = answer; 
}; 

var question1 = new question("Who is Sansa\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 3); 
var question2 = new question("Where are the Starks from?", ["Winterfell", "King's Landing", "Valyria", "Dorne"], 1); 
var question3 = new question("Who is the biggest asshole in this group?", ["Eddard", "Khaleesi", "Bran", "Geoffrey"], 4); 
var endSent = new question("End"); 

allQuestions.push(question1, question2, question3, endSent);

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script type="text/javascript" src="main.js"></script> 
    <title>Game of Thrones Trivia Quiz</title> 
</head>

</header> 

<h3>"Please choose the correct answer for the question given. Do so promptly - winter is coming.</h3> 

<p id="questionLoc">Click "Next" to begin</p> 

    <input type="radio" name="Q" value= 1 class="radbut" /><span id="R1"></span> 
    <br /> 
    <input type="radio" name="Q" value= 2 class="radbut" /><span id="R2"></span> 
    <br /> 
    <input type="radio" name="Q" value= 3 class="radbut" /><span id="R3"></span> 
    <br /> 
    <input type="radio" name="Q" value= 4 class="radbut" /><span id="R4"></span> 
    <br /> 
    <br /> 
    <div id="next">Next</div> 
    <p id="qNum"></p><span>Question</span> 
    <p id="score"></p><span>score</span> 
    <p id="value"></p><span>value</span> 
    <p id="quesVal"></p><span>quesval</span> 
</form>

來源

2017-02-13 Alex

它確實有與您的代碼的順序做。當你檢查的正確答案，你已經增加了i的值，所以你檢查了當前/新問題而不是前一個問題。

我還添加了隱藏答案和一些其他檢查，以防止JS錯誤到達最後一個問題時（順便說一句，在設計方面，我不會把「結束」文本作爲自己的問題......一個問題應該是一個帶有答案選擇的問題，即句號。）

$(document).ready(function() { 
 
    var i = -1; 
 
    var qNum = 0; 
 
    var score = 0; 
 
    var toggleElements = $(".radbut, br, #next, #R1, #R2, #R3, #R4"); 
 
    $(".radbut").hide(); 
 
    $("br").hide(); 
 

 
    $("#next").click(function(){ 
 
     var value = ($('input[name="Q"]:checked').prop('checked', false).val()); //checks which radio button is checked and sets it to value 
 
\t \t \t \t if (i >= 0) { 
 
      //add +1 to score if choice matches answer 
 
      if (value == allQuestions[i].answer) { 
 
       score++; 
 
       }; 
 
     } 
 
     
 
     i += 1; 
 
     qNum += 1; 
 
     
 
     toggleElements[allQuestions[i].choices ? 'show' : 'hide'](); 
 

 
     //display questions and variables 
 
     $("#questionLoc").text(allQuestions[i].question); 
 
     
 
     if (allQuestions[i].choices) { 
 
      $("#R1").text(allQuestions[i].choices[0]); 
 
      $("#R2").text(allQuestions[i].choices[1]); 
 
      $("#R3").text(allQuestions[i].choices[2]); 
 
      $("#R4").text(allQuestions[i].choices[3]); 
 
     } 
 
     
 
     $("#qNum").text(qNum);  
 
     $("#score").text(score); 
 
     $("#value").text(value); 
 
     $("#quesVal").text(allQuestions[i].answer); 
 
    }); 
 
}); 
 

 
var allQuestions = []; 
 

 
function question(question, choices, answer) { 
 
       this.question = question; 
 
       this.choices = choices; 
 
       this.answer = answer; 
 
}; 
 

 
var question1 = new question("Who is Sansa\'s mother?", ["Cercei", "Marjorie", "Catelin", "Lysa"], 3); 
 
var question2 = new question("Where are the Starks from?", ["Winterfell", "King's Landing", "Valyria", "Dorne"], 1); 
 
var question3 = new question("Who is the biggest asshole in this group?", ["Eddard", "Khaleesi", "Bran", "Geoffrey"], 4); 
 
var endSent = new question("End"); 
 

 
allQuestions.push(question1, question2, question3, endSent);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="questionLoc">Click "Next" to begin</p> 
 

 
    <input type="radio" name="Q" value= 1 class="radbut" /><span id="R1"></span> 
 
    <br /> 
 
    <input type="radio" name="Q" value= 2 class="radbut" /><span id="R2"></span> 
 
    <br /> 
 
    <input type="radio" name="Q" value= 3 class="radbut" /><span id="R3"></span> 
 
    <br /> 
 
    <input type="radio" name="Q" value= 4 class="radbut" /><span id="R4"></span> 
 
    <br /> 
 
    <br /> 
 
    <div id="next">Next</div> 
 
    <p id="qNum"></p><span>Question</span> 
 
    <p id="score"></p><span>score</span> 
 
    <p id="value"></p><span>value</span> 
 
    <p id="quesVal"></p><span>quesval</span>

來源

2017-02-13 17:15:28 Connum

您還可能要繼續到下一個問題，我現在還編輯成我的答案時，取消目前的答案。 – Connum

再次更新以添加一些優化。我想這是僅用於演示樣機，但如果沒有，你應該保存，而不必再收集他們的例如點擊處理函數每次調用（通過jQuery選擇=元素）的jQuery集合到變量。 – Connum

-2

我不是100％肯定，而且我只是想給我最好的答案，但會創造「得分'變量作爲常數可能有幫助？相反，在宣佈它的內「$（文件）。就緒（函數（）」的，把它放在外面？

來源

2017-02-13 16:43:15 Layne

因爲所有的代碼訪問的得分變量是insode準備處理，不能成爲問題，那麼爲什麼污染全球範圍內？ – Connum

我不確定。我對編碼比較陌生，我只是想幫忙。如果你能解釋我提出的答案爲什麼不正確，我將不勝感激。我在嘗試學習。 – Layne

如果您確定自己的建議，最好給出答案。 ;-)正如我所解釋的那樣，這個變量也在正確的範圍內。除非必要，否則用全球變數污染全球範圍是不好的做法。 – Connum

更新JavaScript的測驗分數動態

回答

相關問題