Multiple Radio button call with jquery issue

Question

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>

score 0 · Accepted Answer · edited May 23 '17 at 10:30

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>

maybe `var score` should be removed as a global variable in this instance? — A. L, Feb 24 '17 at 03:49
@barmar Thank you very much. I am just starting up and that awesome breakdown of issues and resolutions. It makes things click in my head due to your detailed explanation. Really appreciate it! — Alex Nagatkin, Feb 24 '17 at 04:39
@Barmar the snippet seems to work however when i run it in brackets it still doesn't work. attempted to first copy & paste but it didnt work so i retyped the code into brackets but still no luck. — Alex Nagatkin, Feb 25 '17 at 07:35

Multiple Radio button call with jquery issue

1 Answers1