Überprüfen Sie, ob die ausgewählten Radio-Button gleich die "Antwort" in einem array gespeicherten

Rookie-Entwickler, Entschuldigungen für irgendeine unkonventionelle code.

Arbeite ich an einem kleinen quiz. Eine Frage, die angezeigt wird, eine Zeit, mit 3 möglichen Antworten auf die radio-buttons. Die Antwort "Schlüssel" werden in ein array namens allQuestions.

Ich bin auf der Suche nach der richtigen Art und Weise zu vergleichen, wenn der Benutzer die Antwort (die ausgewählten radio-button) gleich die richtige Antwort.

Ich würde es vorziehen, eine Erklärung mit JQuery-aber ich bin nicht gegen eine getElementByIdea Lösung. Was solls, warum nicht abdecken!Sie sehen in der JS-Abschnitt, ich Versuch beide.

Schließlich soll ich eine Funktion in eine dieser beiden Ansätze? Oder ist eine stand-alone-Wenn/Dann ausreichend? Du wirst sehen, ich sind ein in der getElementByIdea Versuch.

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;
}

$(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.

InformationsquelleAutor TCannadySF | 2014-04-30

1

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

ich gereinigt habe bis Sie Ihren code haben, müssen Sie ein guter Versuch, nur falsche syntax
```
if ($('input[name="radios"]:checked').val() == currentAnswer){
userScore.correct++;
} else{
    userScore.incorrect++;
}
console.log(userScore);
```
wie Sie sehen können, sollten Sie $('input[name='xxxx']), um die Elemente nach Namen, auch sollten Sie Wert auf Ihre input-tags
```
<input type="radio" id="radio1" name="radios" value="1">
```
vielen Dank für diese. Ich war in der Lage zu nutzen, Ihre Antwort zu begegnen, das Problem, und dann Mo Hrad Antwort unten abschließen quiz! Ich bin gespannt, ob Sie könnten werfen ein wenig Licht auf die Bedeutung der Zugabe von "Wert" auf den radio-button. Ich sehe nicht, wo Sie eigentlich "Nutzung" dieses später auf, DH Sie noch "call" die einzelnen Tasten mit der ID. Vielleicht bist du nur zu sagen, dass es eine gute übung ist auch "Wert" und hat nicht wirklich jemals verwenden Sie es in dieser spezifischen Anwendung. In jedem Fall würde die Liebe, wenn Sie könnten ein wenig mehr. Danke!

InformationsquelleAutor monkeyinsight
0

habe ich Fix die ganzen Sachen, du hast einen guten job, aber Ihre Logik-design leiden in mancher Hinsicht, aber die Programmierung ist eine der Fähigkeiten, schärfen während der Zeit, gut gemacht und weiter

bleibe ich Ihr design so einfach habe einige kleinere Korrekturen. hier ist der link : die Arbeiterklasse ein

dies sind die änderungen:
- Sie haben extra die Antwort beim start(ja,nun,wat), dass Sie nicht gerecht, dass
- wenn der Benutzer klicken Sie auf "senden" sind Sie be-die Antwort der nächsten Antwort, also eine Antwort, die Ihren code vor!

ich davon aus, dass deine Antwort 0,1,2 (der ersten radio-button,der zweite radio-button...)
auch definierte ich zwei neue Variablen, eine ist firstime darauf aufpassen wird, erste Frage
und lastanswer zu kümmern, eine Frage vor

bekomme ich die Antwort von
```
answer=$('input[type=radio]:checked').next().html();
```
aber man kann es in der gleichen Weise, dass monkeyinsight erzählt eine andere Antwort, es hängt von Ihrem design.

Vielen Dank für diese. Ich war in der Lage, Ihre Beratung und kombinieren Sie es mit meinen vorhandenen code. Ich dind die nicht wollen, direkt kopieren/einfügen deins, so dass ich lernen konnte durch die Verwendung von meine vorhandene Methode, aber mit Ihrem Konzept als Leitfaden. Es hat wirklich geholfen, so zu tun und jetzt funktioniert es. Prost! jsfiddle.net/Ever/5GuWf

InformationsquelleAutor Mo Hrad A
0

Beschriftungen für die Optionsfelder sollten außerhalb Ihrer tag.
```
<label for="male">Male</label>
<input type="radio" id="male">
```
Die für Attribut-Ketten die Beschriftung, um die richtige radio-button für eine einfachere Auswahl auf mobilen Geräten.

InformationsquelleAutor Chris Carr

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.