Multiple Radio button call with jquery issue

I would like to make a simple quiz that checks for correct answers and counts the score which outputs on the bottom of the page. I was able to do it with simple js and html but would like to do the same using jquery. However when i press submit in jquery version nothing happens ( i am a noob to jquery and cant find what is wrong) Thanks in advance!

//Question One Answer is 'a'
//Question One Answer is 'b'
//Question One Answer is 'b'
//Question One Answer is 'b'
//Question One Answer is 'a'

var score = 0;

checkAll = function() {

  var message;
  // var score = 0; 

  if ($("#question1").val() === "a") {
    score++;
  } else {
    return false;
  }

  if ($("#question2").val() === "b") {
    score++;
  } else {
    return false;
  }

  if ($("#question3").val() === "b") {
    score++;
  } else {
    return false;
  }

  if ($("#question4").val() === "b") {
    score++;
  } else {
    return false;
  }

  if ($("#question5").val() === "a") {
    score++;
  } else {
    return false;
  }

  message = "You got " + score + "out of five questions right!";
  $("#results").html(message);

  initialize = function() {
    $("#init").click(checkAll)
  };
};
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Form Example</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
  </script>

  <script type="text/javascript" src="quiz.js"></script>

</head>

<body>

  <h1>Geography Quiz</h1>


  <p>
    <label for="user">Name:</label>
    <input type="text" name="username" id="user" />
  </p>
  <div class="qheader">
    <p> 1) Which of the countries below is largest by area?</p>
  </div>
  <div class="questsel">
    <input type="radio" value="a" name="question1">a) Russia<br>
    <input type="radio" value="b" name="question1">b) China<br>
    <input type="radio" value="c" name="question1">c) USA<br>
    <input type="radio" value="d" name="question1">d) Canada<br>
  </div>

  <br>

  <div class="qheader">
    <p> 2) Which of these cities is United States Capital?</p>
  </div>
  <div class="questsel">
    <input type="radio" value="a" name="question2">a) New York<br>
    <input type="radio" value="b" name="question2">b) Washington D.C
    <input type="radio" value="c" name="question2">c) Chicago<br>
    <input type="radio" value="d" name="question2">d) Moscow<br>
  </div>

  <div class="qheader">
    <p> 3) Which of these cities is Spain's Capital?</p>
  </div>
  <div class="questsel">
    <input type="radio" value="a" name="question3">a) Barcelona<br>
    <input type="radio" value="b" name="question3">b) Madrid <br>
    <input type="radio" value="c" name="question3">c) Milan<br>
    <input type="radio" value="d" name="question3">d) Rome<br>
  </div>

  <div class="qheader">
    <p> 4) Which ocean is the largest?</p>
  </div>
  <div class="questsel">
    <input type="radio" value="a" name="question4">a) Arctic<br>
    <input type="radio" value="b" name="question4">b) Pacific<br>
    <input type="radio" value="c" name="question4">c) Indian<br>
    <input type="radio" value="d" name="question4">d) Atlantic<br>
  </div>

  <div class="qheader">
    <p> 5) Which of these rivers is largest in North America?</p>
  </div>
  <div class="questsel">
    <input type="radio" value="a" name="question5">a) Missouri River<br>
    <input type="radio" value="b" name="question5">b) Nile River <br>
    <input type="radio" value="c" name="question5">c) Amazon River<br>
    <input type="radio" value="d" name="question5">d) Yenisei River<br>
  </div>

  <p>
    <input type="button" id="init" value="Submit" />
  </p>

  <p id="results"></p>

  </form>

</body>

</html>

Answers 1

  • First, you have your initialize() function inside the checkAll() function. It should be a separate function.

    Second, you never call initialize().

    Third, you use $("#question1").val() to get the value of a radio button, but # is for matching IDs, not names. The way to get the value of a radio button is $(":radio[name=question1]:checked").val() (see jQuery get value of selected radio button).

    Fourth, you return immediately whenever an answer is wrong. You need to keep going so you can report the total score.

    Fifth, you need to initialize score to 0 in the function. Otherwise, you'll add the score for the current call to the score from the previous time. And score should just be a local variable in the function, there's no need for the global variable.

    //Question One Answer is 'a'
    //Question One Answer is 'b'
    //Question One Answer is 'b'
    //Question One Answer is 'b'
    //Question One Answer is 'a'
    
    
    checkAll = function() {
    
      var message;
      var score = 0; 
    
      if ($(":radio[name=question1]:checked").val() === "a") {
        score++;
      }
    
      if ($(":radio[name=question2]:checked").val() === "b") {
        score++;
      }
    
      if ($(":radio[name=question3]:checked").val() === "b") {
        score++;
      }
    
      if ($(":radio[name=question4]:checked").val() === "b") {
        score++;
      }
    
      if ($(":radio[name=question5]:checked").val() === "a") {
        score++;
      }
    
      message = "You got " + score + " out of five questions right!";
      $("#results").html(message);
    
    };
    
    initialize = function() {
      $("#init").click(checkAll)
    };
    
    initialize();
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    
    
    <h1>Geography Quiz</h1>
    
    
    <p>
      <label for="user">Name:</label>
      <input type="text" name="username" id="user" />
    </p>
    <div class="qheader">
      <p> 1) Which of the countries below is largest by area?</p>
    </div>
    <div class="questsel">
      <input type="radio" value="a" name="question1">a) Russia<br>
      <input type="radio" value="b" name="question1">b) China<br>
      <input type="radio" value="c" name="question1">c) USA<br>
      <input type="radio" value="d" name="question1">d) Canada<br>
    </div>
    
    <br>
    
    <div class="qheader">
      <p> 2) Which of these cities is United States Capital?</p>
    </div>
    <div class="questsel">
      <input type="radio" value="a" name="question2">a) New York<br>
      <input type="radio" value="b" name="question2">b) Washington D.C
      <input type="radio" value="c" name="question2">c) Chicago<br>
      <input type="radio" value="d" name="question2">d) Moscow<br>
    </div>
    
    <div class="qheader">
      <p> 3) Which of these cities is Spain's Capital?</p>
    </div>
    <div class="questsel">
      <input type="radio" value="a" name="question3">a) Barcelona<br>
      <input type="radio" value="b" name="question3">b) Madrid <br>
      <input type="radio" value="c" name="question3">c) Milan<br>
      <input type="radio" value="d" name="question3">d) Rome<br>
    </div>
    
    <div class="qheader">
      <p> 4) Which ocean is the largest?</p>
    </div>
    <div class="questsel">
      <input type="radio" value="a" name="question4">a) Arctic<br>
      <input type="radio" value="b" name="question4">b) Pacific<br>
      <input type="radio" value="c" name="question4">c) Indian<br>
      <input type="radio" value="d" name="question4">d) Atlantic<br>
    </div>
    
    <div class="qheader">
      <p> 5) Which of these rivers is largest in North America?</p>
    </div>
    <div class="questsel">
      <input type="radio" value="a" name="question5">a) Missouri River<br>
      <input type="radio" value="b" name="question5">b) Nile River <br>
      <input type="radio" value="c" name="question5">c) Amazon River<br>
      <input type="radio" value="d" name="question5">d) Yenisei River<br>
    </div>
    
    <p>
      <input type="button" id="init" value="Submit" />
    </p>
    
    <p id="results"></p>


Related Articles