Question

新秀开发者，对任何非常规代码道歉。

我正在进行一项简单的测验。一次显示一个问题，单选按钮上有3个可能的答案。答案＆＃34;关键＆＃34;存储在名为allQuestions的数组中。

如果用户的回答（所选单选按钮）等于正确答案，我正在寻找正确的比较方法。

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

最后，我应该在这两种方法中使用函数吗？或者是一个独立的If /那么足够吗？您将看到我在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

这些是变化： - 你在开始时有一个额外的答案（是的，现在，扫管笏）你没有满足这个要求 - 当用户点击提交时，您正在加载下一个答案的答案，所以一直在回答您的代码！

我假设您的答案可以是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属性将标签链接到正确的单选按钮，以便在移动设备上轻松选择。

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

3 个答案: