javascriptjqueryradio-button

Checking values from a radio button


So I had this working last night, its a 10 questions quiz. I did a few revisions today, and now when I click to check the answer, I've lost the functionality that would display in the jumbotron if the answer was correct or not. The continue to next question still deletes and repopulates the list. Just the button to check the question answer is broken. Here's the jsFiddle link:

$(document).ready(function() {

  // Create array to traverse so that on clicking submit, the current question
  //is deleted, and the next question in the array is loaded.  
  var questionsArray = [];

  //Create counters for both correct answers and current question
  var correctAnswers = 0;
  var currentQuestion = 0;

  //Contructor Function to create questions
  function Question(question, choices, answer) {
    this.question = question;
    this.choices = choices;
    this.answer = answer;
  }

  //Question Creations
  questionsArray.push(new Question('Who is the Flash', ['Walter White', 'Johnny Cage', 'Barry Allen', 'Peter Parker'], 'Barry Allen'));
  questionsArray.push(new Question('Who shot first?', ['Greedo did!', 'You know Han did!', 'Lee Harvey!'], 'You know Han did!'));
  questionsArray.push(new Question('The Millenium Falcon made the Kessel Run in how many parsecs?', ['37', '2', '12', 'It never made the Kessel Run you fool!'], '12'));
  questionsArray.push(new Question('Who is Scott Summers?', ['Cyclops', 'The Green Arrow', 'Deadpool', 'Ghost Rider'], 'Cyclops'));
  questionsArray.push(new Question('Donatello preffered which weapon?', ['Katanas', 'Bo Staff', 'Sais', 'Nunchuks']));
 questionsArray.push(new Question('Who lives long and prospers?', ["Rodians", 'Vulcans', 'Romulans','Republicans'], 'Vulcans'));
questionsArray.push(new Question('Who is Wade Wilson?', ['Deadpool', 'Deathstroke', 'Dr. Strange', 'Captain Marvel'], 'Deadpool'));
questionsArray.push(new Question('Who broke the Bat?', ['The Joker', 'Penguin', 'Bane', 'Deadshot'], 'Bane'));
questionsArray.push(new Question('Who turned Megatron into Galvatron?', ['Optimus Prime', 'Hot Rod', 'Starscream', 'Unicron'],'Unicron'));
questionsArray.push(new Question('Who is your daddy?', ['I am!','Obama', '...and what does he do?'], '...and what does he do?'));   

    function populateQuestion(index) {
    $('.q_question').html(questionsArray[index]['question']);
    
    for (var i = 0; i < 10; i++) {
        $('.jumbotron').html('');
        $('.btn' + (i + 1)).val(questionsArray[index]['choices'][i]).prop('checked', false);
      $('.label' + (i + 1)).html(questionsArray[index]['choices'][i]);
    }
  }

    populateQuestion(currentQuestion);

  //This register the answer to each question
  $('#submit').on('click', function() {
    var answer = $('input[name="1"]:checked').val(); 
    if (answer == questionsArray[i]['answer']) {
      correctAnswers++;
      $('.jumbotron').html(answer + "?<br><br> That's correct!  You have " + correctAnswers + " out of 10 correct!");
    } else {
      $('.jumbotron').html(answer + "? <br><br> Oh dear, that's so so wrong! You have " + correctAnswers + " out of 10 correct");
    }
    return false;
  });
  
  $('.continue').on('click', function() {
    populateQuestion(++currentQuestion);
  });


});
/*Title Style*/

body {
  background-color: #347f5f;
}

.header {
  text-align: center;
  background-color: #296048;
  border-radius: 3%;
  box-shadow: 3px 3px 10px;
}

.q_title {
  background-color: #37956d;
  box-shadow: 3px 3px 10px;
  width: 50%;
  border-radius: 5%;
  text-align: center;
}

button {
  width: 100px;
  height: 50px;
}

.jumbotron {
  width: 200px;
  height: 100px;
  background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<header class="header">
    <h1 classs="title">Welcome to My Super Awesome Quiz!!</h1>
    <h3 class="question_counter">Ver. 1.1</h3>
  </header>



  <h2 class="q_title"> </h2>
  <!-- Will use questionCounter here once created -->
  <h3 class="q_question"></h3>
  <form id='form'>
    <input class='btn btn1' type="radio" name="1" value=""> <span class="label1"></span>
    <br>
    <input class='btn btn2' type="radio" name="1" value=""> <span class="label2"></span>
    <br>
    <input class='btn btn3' type="radio" name='1' value=''> <span class="label3"></span>
    <br>
    <input class='btn btn4' type="radio" name='1' value=''> <span class="label4"></span>
    <br>
    <input id="submit" type='submit' name='1' value='Think you got it?  Click here to find out!'>
    <br>
  </form>
  <div class='jumbotron'>
    <h2></h2>
  </div>
  <div class="continue">
    <button>Continue you on...if you dare!</button>
  </div>


Solution

  • The issue has to do with your i value not being valid in the listener callback block. You can resolve this by using your currentQuestion value instead, like so:

      $('#submit').on('click', function() {
        var answer = $('input[name="1"]:checked').val(); 
        if (answer == questionsArray[currentQuestion]['answer']) {
          correctAnswers++;
          $('.jumbotron').html(answer + "?<br><br> That's correct!  You have " + correctAnswers + " out of 10 correct!");
        } else {
          $('.jumbotron').html(answer + "? <br><br> Oh dear, that's so so wrong! You have " + correctAnswers + " out of 10 correct");
        }
        return false;
      });