Creating a Multiple Choice Option in JavaScript

Create a multiple choice question with buttons and a text question using JavaScript

Okay so I think I have achieved what you were asking.
Sandbox for reference: https://codesandbox.io/s/flamboyant-kate-4kl3z?file=/index.html

Couple times you were targeting divs with ids that did not exist, so just make sure to double check naming and such. And like @displacedtexan stated the form is most likely not needed, I left it there and just changed the input types to button instead of submit . Feel free to comment if more help is needed.

Trying to create two multiple choice questions in one script

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>

How do I write html for form with multiple questions that use radio input type?

v-model="form.options" seems to be the problem, all inputs have the same model.
Everytime a radio is selected it overwrites the this.options with the option value.

Try:

v-model="form.options[option.question_id]"

if that dosen't work try to add a custom event handler with @change

BTW: option.question_id is a weird data structure it meight be better to have the id in the question object, because it seems the options lay in an array inside the question object

Creating a Multiple Choice Option in JavaScript

Create a multiple choice question with buttons and a text question using JavaScript

Trying to create two multiple choice questions in one script

How do I write html for form with multiple questions that use radio input type?

Related Topics

Leave a reply