检查选定的单选按钮是否等于存储在数组中的“答案”

Question

新手开发者，对任何非常规代码表示歉意。

我正在做一个简单的测验。一次显示一个问题，单选按钮上有 3 个可能的答案。答案“key”存储在一个名为 allQuestions 的数组中。

我正在寻找正确的方法来比较用户的答案（所选单选按钮）是否等于正确答案。

我更喜欢使用 JQuery 的解释，但不反对 getElementByIdea 解决方案。哎呀，为什么不同时涵盖两者！您将在 JS 部分看到我尝试了两者。

最后，我应该在这两种方法中使用一个函数吗？还是一个独立的 If/Then 就足够了？你会看到我在 getElementByIdea 尝试中包含了一个。

JSFiddle：http://jsfiddle.net/Ever/fYA5Y/

HTML

<body>
    <h2>JS and JQuery Quiz</h2>

    <div class="intro">
    Welcome! When the button at the bottom is clicked, the question and answers below will     
progress to the next question and respective answer chioces. Good luck!
    <br>
    </div>

    <br>

    <div class="questions">Ready?</div>

    <br>

    <input type="radio" id="radio1" name="radios"><label id="r1"> Yes</label></br>
    <input type="radio" id="radio2" name="radios"><label id="r2"> No</label></br>
    <input type="radio" id="radio3" name="radios"><label id="r3"> Wat </label></br>

    </br>

    <button>Submit</button>
</body>

CSS

div.intro{
font-weight: bold;
width: 50%;
}

div.questions{
text-align: left;
font-size: 25px;
width: 500px;
height: 100px;
border: 1px solid black;
padding: 5px;
}

JS

$(document).ready(function(){ 
//store quetsions, answer options, and answer key
var allQuestions = {
question: ["Who is Prime Minister of the United Kingdom?", "Which of the \
following is not a breed of dog?", "What sound does a pig make?", "When presented dessert menu,     
\
which item would Anne most likely order?"],
choices: [" David Cameron", " Gordon Brown", " Winston Churchill", " Retriever" , " Poodle", "  
Tabby", " Moo", " Oink", " Meow", "Salted Caramel Ice Cream", "Lime and Ginger Sorbet", "Double 
Chocolate Cake"],
answers: [1,1,1,1],
};

//global counters for each of the questions and answer choices
var q = 0;
var rb1= 0;
var rb2=1;
var rb3=2;
var ans=0;

//global counters to store the amount of correct and incorrect user answers
var userScore = {
correct: 0,
incorrect: 0, 
} 

//when button is clicked, update the quetstion to show the next question, and the
//radio buttons to show the next answer options.  
$('button').click(function(){
    //locate the current question and answer choices and set them to variables
    var currentQuestion = (allQuestions.question[q]);
    var currentRadio1 = (allQuestions.choices[rb1]);
    var currentRadio2 = (allQuestions.choices[rb2]);
    var currentRadio3 = (allQuestions.choices[rb3]);
    var currentAnswer = (allQuestions.answers[ans]);
    //update html to display the current question and answer choices
    $('.questions').html(currentQuestion);
    $('#r1').html(currentRadio1);
    $('#r2').html(currentRadio2);
    $('#r3').html(currentRadio3);
    //progress the question and answer choice counters
    q = q + 1;
    rb1 = rb1 + 3;
    rb2 = rb2 + 3;
    rb3 = rb3 + 3;
    ans = ans + 1;

    //Using JQuery, compare the user's answer (the selected radio button) to the correct  
            //answer. 
    //Do this by having the code look at all the radio buttons. If the checked one 
    //is equal to the correct answer, increment "correct" in <userScore>. 
    //If incorrect, increment "incorrect" in <userScore>.

    if $('input["radios"]:checked' == currentAnswer){
    userScore.correct++;
    }
    else{
    userScore.incorrect++;
    }

    //Alternative method: use getElementByID to do tally answers. 
    //function tallyAnswers() {
    //if (document.getElementById("radios").checked == currentAnswer) {
    //userScore.correct++;
    //}
    //else {
    //userScore.incorrect++;
    //}
    //}

    //when all questions have been done, alert the total correct and incorrect answers
    //alert(userScore.correct)  
    }); 
});



//Psuedocode:
//Use a JS object to separately hold each group of: questions, choices and correct answers.
//Use a JS function so that when <button> is clicked, it:
//**removes the current text from the <.questions> DIV
//**clears the radio buttons
//**adds the next question's text from <allQuestions> to the <.questions> DIV
//**adds the next anwers the radio buttons 
//Use a JS object to store each of the user's answers, which are determined by which
//radio button is selected when <button> is clicked. 
//If user clicks <button> without first selecting a radio button, do not update the form, and
//do not store their answer. Instead, alert the user.
//On the final page, let the user know they are done. Tally and display the total
//amount of correct answers. 

Answer 1

http://jsfiddle.net/fYA5Y/1/

我已经清理了你的代码，你的尝试很好，只是语法错误

if ($('input[name="radios"]:checked').val() == currentAnswer){
userScore.correct++;
} else{
    userScore.incorrect++;
}
console.log(userScore);

如您所见，您应该使用 $('input[name='xxxx']) 按名称获取元素，还应该为输入标签设置值

<input type="radio" id="radio1" name="radios" value="1">

Answer 2

我解决了所有问题，你做得很好，但你的逻辑设计在某些方面受到了影响，但编程是一种随着时间的推移而磨砺的技能，做得好并继续

我坚持你的设计，所以只是做了一些小修复。这是链接：the working one

这些是变化： - 你在开始时有额外的答案（是的，现在，wat）你没有满足那个 - 当用户点击提交时，您正在加载下一个答案的答案，因此您的代码始终是一个答案！

我假设您的答案可以是 0,1,2（第一个单选按钮，第二个单选按钮...） 我还定义了两个新变量，一个是firstime，它将处理第一个问题 和lastanswer 处理一个问题

我得到了答案

answer=$('input[type=radio]:checked').next().html();

但是您可以通过monkeyinsight 在另一个答案中告诉的相同方式获得它，这取决于您的设计。

Answer 3

单选按钮的标签应该在它们的标签之外。

<label for="male">Male</label>
<input type="radio" id="male">

for 属性将标签链接到正确的单选按钮，以便在移动设备上进行选择。