My javascript quiz app doesn't work properly

Question

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:

• It is a simple quiz that has radio button choices, and it will show the quiz taker his or her score upon completion.
• The quiz can show any number of questions and any number of choices.
• Tally the user’s score and display the final score on the last page. The last page will only show the score, so remove the last question.
• Use an array to store all the questions. Each question, along with its choices and correct answer, should be stored in an object.
• Dynamically (with document.getElementById or jQuery) remove the current question and add the next question, when the user clicks the “Next” button. The Next button will be the only button to navigate this version of the quiz.
• You can ask for help in the comments below or preferably on Stack Overflow. You will likely to get a prompt and accurate answer on Stack Overflow.

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>

Answer 1

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

Answer 2

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>