Почему моя функция не подсчет очков должным образом?

Question

Мой вопрос прост, у меня есть несколько строк кода, которые должны подсчитывать мой общий балл при выборе правильного ввода. Тем не менее, я не могу показаться, чтобы получить счет быть ничего, кроме 0. Вот код:

$(document).ready(main); 
 

 
function main(){ 
 
    $("input").hide(); 
 
    $("h1").on('click', function(){ 
 
     $('h1').css("background-color", "red") 
 

 
    }); 
 

 
    var questions = [ 
 
     { 
 
      question: "What is the capital of Washington?", choices: ["Salem", "Seattle", 
 
      "Helena", "Olympia"], correctanswer: "Olympia" 
 
     }, 
 
     { 
 
      question: "How many countries are in Europe?", choices: ["15", "46", "27", 
 
      "51"], correctanswer: "51" 
 
     }, 
 

 
     { 
 
      question: "What is the population of Mexico City?", choices: ["3.3 Million", "800 Thousand", "15.1 Million", 
 
      "8.9 Million"], correctanswer: "8.9 Million" 
 
     }, 
 

 
     { 
 
      question: "Who is the current leader of Russia?", choices: ["Boris Yelstin", "Dmitry Medvedev", 
 
      "Nikolai Bulganin", "Vladimir Putin"], correctanswer: "Vladimir Putin" 
 
     }, 
 

 
     { 
 
      question: "How large is the state of California?", choices: ["85,115 square miles", "130,919 square miles", 
 
      "215,355 sqaure miles", "163,696 square miles"], correctanswer: "163,696 square miles" 
 
     } 
 
    ]; 
 

 
    $("#start").on('click', function() { 
 
     $("#start").hide(); 
 
     $("input").show(); 
 
     quiz(); 
 

 
    }); 
 

 

 
    total=0; 
 
    number=0; 
 

 
    function quiz(){ 
 
     $("#question").text(questions[number].question); 
 
     $("#answer1").text(questions[number].choices[0]); 
 
     $("#answer2").text(questions[number].choices[1]); 
 
     $("#answer3").text(questions[number].choices[2]); 
 
     $("#answer4").text(questions[number].choices[3]); 
 
    } 
 

 

 
$("#submit").on('click', function(){ 
 
    var chosen; 
 
    chosen = ($("input[name='choice']:checked").val()); 
 
    if (chosen == questions[number].correctanswer) { 
 
     total++; 
 
     $("#score").text("Score: " + total); 
 
    } else { 
 
     $("#score").text("Score: " + total); 
 
    } 
 
    number++; 
 
    quiz(); 
 

 
}); 
 

 
}

.btns{height:50px; width:80px; background-color:blue; 
 
} 
 

 
#answers{ 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Simple Quiz</h1> 
 
<div id="question"></div> 
 
<div id=answers> 
 
    <input type="radio" name="choice" value="1"><label id="answer1"></label><br> 
 
    <input type="radio" name="choice" value="2"><label id="answer2"></label><br> 
 
    <input type="radio" name="choice" value="3"><label id="answer3"></label><br> 
 
    <input type="radio" name="choice" value="4"><label id="answer4"></label><br> 
 
</div> 
 

 

 
<div id="btns"> 
 
    <button id="start">Start</button> 
 
    <button id="submit">Submit</button> 
 
</div> 
 
<div id="score"><p></p></div>

Так что это довольно просто, насколько код идет и мне это выглядит, как это должен работать, но явно не так, что любая помощь ценится. Благодаря! Вот git repository.

Answer 1

Ценностные атрибуты ваших радио-кнопок 1..4, и поэтому эта линия имеет значение 1..4:

chosen = ($("input[name='choice']:checked").val()); 

Вы затем сравнивая 1. .4 до строкового значения, такого как Olympia, из вашего массива:

if (chosen == questions[number].correctanswer) { 

T он целое никогда не равно строке и поэтому это условие никогда не имеет значение верно для увеличения вашего счетчика:

if (chosen == questions[number].correctanswer) { 
total++; 

Для сравнения строкового значения строкового значения (вместо его индекса) вы хотите это:

chosen = ($("input[name='choice']:checked").val()); 
chosen = chosen - 1; 
chosen = questions[number].choices[chosen]; 

Вот jsfiddle, который показывает, что он работает так: https://jsfiddle.net/79rfjz04/

Answer 2

Функция quiz() обновляет текст каждого переключателя, но не его значение. Таким образом, chosen будет просто номером от 1 до 4 и не будет соответствовать свойству .correctanswer. Используйте значение как индекс в массиве choices и сравните с ним. Я изменил значения переключателей, чтобы начать с 0, чтобы соответствовать индексированию массива.

Другой способ исправить это было бы изменить свойство correctanswer, чтобы просто содержать указатель правильного ответа, а не его текст.

$(document).ready(main); 
 

 
function main() { 
 
    $("input").hide(); 
 
    $("h1").on('click', function() { 
 
    $('h1').css("background-color", "red") 
 

 
    }); 
 

 
    var questions = [{ 
 
     question: "What is the capital of Washington?", 
 
     choices: ["Salem", "Seattle", "Helena", "Olympia"], 
 
     correctanswer: "Olympia" 
 
    }, { 
 
     question: "How many countries are in Europe?", 
 
     choices: ["15", "46", "27", "51"], 
 
     correctanswer: "51" 
 
    }, 
 

 
    { 
 
     question: "What is the population of Mexico City?", 
 
     choices: ["3.3 Million", "800 Thousand", "15.1 Million", "8.9 Million"], 
 
     correctanswer: "8.9 Million" 
 
    }, 
 

 
    { 
 
     question: "Who is the current leader of Russia?", 
 
     choices: ["Boris Yelstin", "Dmitry Medvedev", "Nikolai Bulganin", "Vladimir Putin"], 
 
     correctanswer: "Vladimir Putin" 
 
    }, 
 

 
    { 
 
     question: "How large is the state of California?", 
 
     choices: ["85,115 square miles", "130,919 square miles", "215,355 sqaure miles", "163,696 square miles"], 
 
     correctanswer: "163,696 square miles" 
 
    } 
 
    ]; 
 

 
    $("#start").on('click', function() { 
 
    $("#start").hide(); 
 
    $("input").show(); 
 
    quiz(); 
 
    }); 
 

 
    total = 0; 
 
    number = 0; 
 

 
    function quiz() { 
 
    $("#question").text(questions[number].question); 
 
    $("#answer1").text(questions[number].choices[0]); 
 
    $("#answer2").text(questions[number].choices[1]); 
 
    $("#answer3").text(questions[number].choices[2]); 
 
    $("#answer4").text(questions[number].choices[3]); 
 
    $("input[name='choice']:checked").prop("checked", false); // Clear the previous selection 
 
    } 
 

 
    $("#submit").on('click', function() { 
 
    var chosen; 
 
    chosen = questions[number].choices[$("input[name='choice']:checked").val()]; 
 
    if (chosen == questions[number].correctanswer) { 
 
     total++; 
 
     $("#score").text("Score: " + total); 
 
    } else { 
 
     $("#score").text("Score: " + total); 
 
    } 
 
    number++; 
 
    quiz(); 
 
    }); 
 
}

#btns { 
 
    height: 50px; 
 
    width: 80px; 
 
    background-color: blue; 
 
} 
 
#answers { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Simple Quiz</h1> 
 
<div id="question"></div> 
 
<div id=answers> 
 
    <input type="radio" name="choice" value="0"> 
 
    <label id="answer1"></label> 
 
    <br> 
 
    <input type="radio" name="choice" value="1"> 
 
    <label id="answer2"></label> 
 
    <br> 
 
    <input type="radio" name="choice" value="2"> 
 
    <label id="answer3"></label> 
 
    <br> 
 
    <input type="radio" name="choice" value="3"> 
 
    <label id="answer4"></label> 
 
    <br> 
 
</div> 
 

 

 
<div id="btns"> 
 
    <button id="start">Start</button> 
 
    <button id="submit">Submit</button> 
 
</div> 
 
<div id="score"> 
 
    <p></p> 
 
</div>