I'm following this guide: http://javascriptissexy.com/how-to-learn-javascript-properly/ and I'm trying to build a javascript quiz app detailed at week 6.
Here's the instruction:
I figured out how to display quiz and radio button choices. However, When I choose correct answer on my quiz, it doesn't count user's score and When I choose wrong answer it counts user's score. For example, first question's correct answer is "Seoul", but it counts my score only if I choose berlin.
I figured out that 'qi' variable is causing the problem, so I replaced
allQuestions[qi].answer
to
allQuestions[qi+1].answer
but then my last question doesn't display.
PS: Sorry for my english... I tried my best
Here's my code: https://jsfiddle.net/METROSTILE/0f3aev1u/1/
var allQuestions = [{ question: "What is capital of Korea?", choices: ["Seoul", "Tokyo", "Hanyang", "Berlin"], answer: 0 }, { question: "What is 5 + 7 * 11?", choices: [132, 121, 77, 82, 0], answer: 3 }, { question: "When was hani born?", choices: ["5/1", "2/3", "11/5", "2/26"], answer: 0 }]; $(function() { var qi = 0; var userScore = 0; var $questionArea = $("#question"); var $choiceArea = $("form"); $("#next").on("click", function() { if (qi < allQuestions.length) { //If choice is correct, if ($("input:checked").val() == allQuestions[qi].answer) { userScore++; } showNextQuestion(); qi++; } else { $("form").remove(); $questionArea.text(userScore); } }); //Shows next question function showNextQuestion() { var $question = allQuestions[qi].question; //store new question //get how many choice $questionArea.text(""); //Delete current question if any $questionArea.text($question); //add new question $choiceArea.find(".choice").remove(); for (var i = 0; i < allQuestions[qi].choices.length; i++) { //add choices var choice = allQuestions[qi].choices[i]; $choiceArea.append("<li class='choice'><input type='radio' name='choices' value='" + i + "'>" + choice + "</input></li>"); } } });
h1 { text-align: center; } h3 { text-align: center; } form { text-align: center; } .wrapper { text-align: center; margin-top: 30px; } li { list-style: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>QUIZ!!!</h1> <h3 id="question"></h3> <form> <ul class='choiceList'></ul> </form> <div class="wrapper"> <input type="button" name="next" value="Next Question" id="next" /> </div>
Handle the current question (if any), then increment qi
. Then check if we've run out of questions:
var qi = -1;
// ...
$("#next").on("click", function() {
if (qi >= 0)
if ($("input:checked").val() == allQuestions[qi].answer) {
userScore++;
}
++qi;
if (qi < allQuestions.length) {
showNextQuestion();
}
else {
$("form, #next").remove();
$questionArea.text(userScore);
}
});
var allQuestions = [{ question: "What is capital of Korea?", choices: ["Seoul", "Tokyo", "Hanyang", "Berlin"], answer: 0 }, { question: "What is 5 + 7 * 11?", choices: [132, 121, 77, 82, 0], answer: 3 }, { question: "When was hani born?", choices: ["5/1", "2/3", "11/5", "2/26"], answer: 0 }]; $(function() { var qi = -1; var userScore = 0; var $questionArea = $("#question"); var $choiceArea = $("form"); $("#next").on("click", function() { if (qi >= 0) if ($("input:checked").val() == allQuestions[qi].answer) { userScore++; } ++qi; if (qi < allQuestions.length) { showNextQuestion(); } else { $("form, #next").remove(); $questionArea.text(userScore); } }); //Shows next question function showNextQuestion() { var $question = allQuestions[qi].question; //store new question //get how many choice $questionArea.text(""); //Delete current question if any $questionArea.text($question); //add new question $choiceArea.find(".choice").remove(); for (var i = 0; i < allQuestions[qi].choices.length; i++) { //add choices var choice = allQuestions[qi].choices[i]; $choiceArea.append("<li class='choice'><input type='radio' name='choices' value='" + i + "'>" + choice + "</input></li>"); } } });
h1 { text-align: center; } h3 { text-align: center; } form { text-align: center; } .wrapper { text-align: center; margin-top: 30px; } li { list-style: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>QUIZ!!!</h1> <h3 id="question"></h3> <form> <ul class='choiceList'></ul> </form> <div class="wrapper"> <input type="button" name="next" value="Next Question" id="next" /> </div>
After a bit of debugging I found that on click of next button , you tried to recieve the value of radio button even before the quiz started;
var allQuestions = [{
question: "What is capital of Korea?",
choices: ["Seoul", "Tokyo", "Hanyang", "Berlin"],
answer: 0
}, {
question: "What is 5 + 7 * 11?",
choices: [132, 121, 77, 82, 0],
answer: 3
}, {
question: "When was hani born?",
choices: ["5/1", "2/3", "11/5", "2/26"],
answer: 0
}];
$(function() {
var qi = 0;
var userScore = 0;
var $questionArea = $("#question");
var $choiceArea = $("form");
var quiz_started = false; // flag , to see if the quiz has started or not
$("#next").on("click", function() {
if(!quiz_started)
{
quiz_started = true;
showNextQuestion();
}
if (qi < allQuestions.length) {
if ($("input:checked").val() == allQuestions[qi].answer) {
userScore++;
}
showNextQuestion();
qi++;
} else {
$("form").remove();
$questionArea.text(userScore);
}
});
//Shows next question
function showNextQuestion() {
var $question = allQuestions[qi].question; //store new question
//get how many choice
$questionArea.text(""); //Delete current question if any
$questionArea.text($question); //add new question
$choiceArea.find(".choice").remove();
for (var i = 0; i < allQuestions[qi].choices.length; i++) { //add choices
var choice = allQuestions[qi].choices[i];
$choiceArea.append("<li class='choice'><input type='radio' name='choices' value='" + i + "'>" + choice + "</input></li>");
}
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.