Trying to create two multiple choice questions in one script

Question

I am trying to create two multiple choice questions in one Javascript code but every way I try to edit it, it only reads the second question with the correct answer. How would I correct it so my first question is answered with Banana, Kiwi for the final product and the second one is Null.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <h1>Which is the output?</h1><br>
  <h2>1. var fruits = ["Banana", "Orange", "Apple", "Kiwi"];<br> fruits.splice(1, 2);<br> document.getElementById("fruit").innerHTML = fruits;</h2>
  <form method="post" id="form1">
    <input type="radio" name="choice" value="Banana, Orange, Apple, Kiwi"> Banana, Orange, Apple, Kiwi
    <input type="radio" name="choice" value="Banana, Kiwi"> Banana, Kiwi
    <input type="radio" name="choice" value="Orange, Apple"> Orange, Apple
    <input type="radio" name="choice" value="Orange, Banana, Kiwi"> Orange, Banana, Kiwi
  </form>
  <button onclick="submitAnswer()">Submit Answer</button>
  <script type="text/javascript">
    var submitAnswer = function() {

      var radios = document.getElementsByName("choice");
      var val = "";
      for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
          val = radios[i].value;
          break;
        }
      }

      if (val == "Banana, Kiwi") {
        alert("Correct");
      } else {
        alert("Incorrect");
      }
    };
  </script>
  <h1>Which is the output?</h1><br>
  <h2>2. var girls = ["Lucy", "Amanda"];<br> var boys = ["Toby", "Charles", "Brian"];<br> var children = (null);<br> document.getElementById("child").innerHTML = children;</h2>
  <form method="post" id="form2">
    <input type="radio" name="option" value="Undefined"> Undefined
    <input type="radio" name="option" value="Toby, Charles, Brian"> Toby, Charles, Brian
    <input type="radio" name="option" value="Null"> Null
    <input type="radio" name="option" value="Lucy, Amanda"> Lucy, Amanda
  </form>
  <button onclick="submitAnswer()">Submit Answer</button>
  <script type="text/javascript">
    var submitAnswer = function() {

      var radios = document.getElementsByName("option");
      var val = "";
      for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
          val = radios[i].value;
          break;
        }
      }

      if (val == "Null") {
        alert("Correct");
      } else {
        alert("Incorrect");
      }
    };
  </script>

</body>

</html>

Hema Nandagopal · Accepted Answer · 2017-11-29T04:57:18.117

It's because you are using the same function name for both the click.I have also refactored your codes.Hope this helps.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head> 
<body>
    <h1>Which is the output?</h1><br><h2>1. var fruits = ["Banana", "Orange", "Apple", "Kiwi"];<br>
    fruits.splice(1, 2);<br>
    document.getElementById("fruit").innerHTML = fruits;</h2>
<form method="post" id="form1">
<input type="radio" name="choice" value="Banana, Orange, Apple, Kiwi"> Banana, Orange, Apple, Kiwi
<input type="radio" name="choice" value="Banana, Kiwi"> Banana, Kiwi
<input type="radio" name="choice" value="Orange, Apple"> Orange, Apple
<input type="radio" name="choice" value="Orange, Banana, Kiwi"> Orange, Banana, Kiwi
</form>
<button onclick="submitAnswer()">Submit Answer</button>
    
    <h1>Which is the output?</h1><br><h2>2. var girls = ["Lucy", "Amanda"];<br>
var boys = ["Toby", "Charles", "Brian"];<br>
var children = (null);<br>
document.getElementById("child").innerHTML = children;</h2>
<form method="post" id="form2">
<input type="radio" name="option" value="Undefined"> Undefined
<input type="radio" name="option" value="Toby, Charles, Brian"> Toby, Charles, Brian
<input type="radio" name="option" value="Null"> Null
<input type="radio" name="option" value="Lucy, Amanda"> Lucy, Amanda
</form>
<button onclick="submitAnswers()">Submit Answer</button>

</body>
<script type="text/javascript">
        var submitAnswer = function() {

  var radios = document.getElementsByName("choice");
  var val= "";
  for (var i = 0, length = radios.length; i < length; i++) {
      if (radios[i].checked) {
         val = radios[i].value; 
         break;
       }
  }

  if (val === "Banana, Kiwi") {
    alert("Correct");
  } else {
    alert("Incorrect");
  }
};
 var submitAnswers = function() {

  var radios = document.getElementsByName("option");
  var val= "";
  for (var i = 0, length = radios.length; i < length; i++) {
      if (radios[i].checked) {
         val = radios[i].value; 
         break;
       }
  }

  if (val === "Null") {
    alert("Correct");
  } else {
    alert("Incorrect");
  }
};
    </script>
</html>

score 0 · Answer 2 · answered Nov 29 '17 at 05:07

Wrong part is that you have used submitAnswer() function for both the buttons. When there are multiple definitions for a variable or function name, the latest definition will be used for all the references.

In your case, either you can use different functions or can rewrite the submitAnswers() function as below for improved maintainability.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
  var submitAnswer = function(correctAnswer, frmInpElements) {  
    var val= "";
    var len = 0;
    if(null != frmInpElements)
    {
       len = frmInpElements.length;
    }
    for (var i = 0; i < len; i++) {
      if (frmInpElements[i].checked) {
         val = frmInpElements[i].value; 
         break;
      }
    }
    if (val == correctAnswer) {
        alert("Correct");
    } else {
        alert("Incorrect");
    }
  };
 </script>
</head> 
<body>
    <h1>Which is the output?</h1><br><h2>1. var fruits = ["Banana", "Orange", "Apple", "Kiwi"];<br>
    fruits.splice(1, 2);<br>
    document.getElementById("fruit").innerHTML = fruits;</h2>
<form method="post" id="form1">
<input type="radio" name="choice" value="Banana, Orange, Apple, Kiwi"> Banana, Orange, Apple, Kiwi
<input type="radio" name="choice" value="Banana, Kiwi"> Banana, Kiwi
<input type="radio" name="choice" value="Orange, Apple"> Orange, Apple
<input type="radio" name="choice" value="Orange, Banana, Kiwi"> Orange, Banana, Kiwi
</form>
<button onclick="submitAnswer('Banana, Kiwi', document.getElementsByName('choice'));">Submit Answer</button>

<h1>Which is the output?</h1><br><h2>2. var girls = ["Lucy", "Amanda"];<br>
var boys = ["Toby", "Charles", "Brian"];<br>
var children = (null);<br>
document.getElementById("child").innerHTML = children;</h2>
<form method="post" id="form2">
<input type="radio" name="option" value="Undefined"> Undefined
<input type="radio" name="option" value="Toby, Charles, Brian"> Toby, Charles, Brian
<input type="radio" name="option" value="Null"> Null
<input type="radio" name="option" value="Lucy, Amanda"> Lucy, Amanda
</form>
<button onclick="submitAnswer('Null', document.getElementsByName('option'));">Submit Answer</button>

</script>

</body>
</html>

Trying to create two multiple choice questions in one script

2 Answers2