Creating a multiple choice option in javascript

Question

I have created an HTML multiple choice question. I am facing a problem how to validate it. Below is the HTML code:

<h1>JavaScript is ______ Language.</h1><br>
<form>
  <input type="radio" name="choice" value="Scripting"> Scripting
  <input type="radio" name="choice" value="Programming"> Programming
  <input type="radio" name="choice" value="Application"> Application
  <input type="radio" name="choice" value="None of These"> None of These
</form>
<button>Submit Answer</button>

When the user clicks the submit button, there should be an alert that will show a message based on what was selected.

If no option was selected, the alert box should say "please select choice answer".
If the "Scripting" option was selected, the alert box should say "Answer is correct !"
If an option different from "Scripting" is selected, the alert box should say "Answer is wrong".

I want to create this validation in JavaScript.

Ray · Accepted Answer · 2015-12-04 08:47:44Z

4

You have to use onclick attribute and more js

attach event hander to your button
get radio elements value
compare

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 == "" ) {
    alert('please select choice answer');
  } else if ( val == "Scripting" ) {
    alert('Answer is correct !');
  } else {
    alert('Answer is wrong');
  }
};

<h1>JavaScript is ______ Language.</h1><br>
<form >
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
</form>
<button onclick="submitAnswer()">Submit Answer</button>

answered Dec 4, 2015 at 8:47

Ray

7774 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ultimater Over a year ago

document.getElementsByName is buggy in Internet Explorer, I'd advise against getting in the habit of using it casually : quirksmode.org/dom/core/#t134

PythonProgrammi · Accepted Answer · 2018-04-25 07:16:00Z

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 == "" ) {
    alert('please select choice answer');
  } else if ( val == "Scripting" ) {
    alert('Answer is correct !');
  } else {
    alert('Answer is wrong');
  }
};

<h1>JavaScript is ______ Language.</h1><br>
<form >
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
</form>
<button onclick="submitAnswer()">Submit Answer</button>

Some changes

I made some changes to the code above to make it more 'abstract'

<h1>JavaScript is ______ Language.</h1><br>
<form id="d1">
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
</form>
<button onclick="submitAnswer(d1.choice.value, 'Scripting')">Submit Answer</button>

<script>
var submitAnswer = function(valore, rightanswer) {
if (valore == rightanswer) {
    alert("OK");
}
};
</script>

Another, more complex example

<div style="background-color:lightblue">
<h1>JavaScript is a <span id='a1'>______</span> Language.</h1><br>
<form id="d1">
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
<br>
<input type="submit" value="submit" onclick="validate(choice.value, 'Scripting', 'd1','a1')">
</form>
</div>
<div style="background-color:lightblue">
<h1>Python is a <span id='a2'>______</span> Language.</h1><br>
<form id="d2">
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Wonderful"> Wonderful
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
<br>
<input type="submit" value="submit" onclick="validate(choice.value, 'Wonderful', 'd2', 'a2')">
</form>
</div>

<script>
var validate = function(valore, rightanswer, form, span) {

var formname = document.getElementById(form)
var spanname = document.getElementById(span)

    spanname.innerHTML = rightanswer;

if (valore == rightanswer) {
    formname.innerHTML ="<div style='background-color:lightgreen'><h1>GREAT! YOU'RE RIGHT: The answer, in fact, was: " + rightanswer + "</h1></div>";
}
else {

    formname.innerHTML ="<div style='background-color:pink'><h1>Sorry, you where wrong: The answer was: " + rightanswer + "</h1></div>";
}
};
</script>

Jefree Sujit · Accepted Answer · 2015-12-04 09:23:36Z

Use the required keyword. This prompts the user to choose a value, when the submit button is pressed without choosing any option. And always prefer to use

<input type="submit" value="submit"> over <button>Submit Answer</button>

while handling forms. Use the onclick() event handler to call your Javascript code.

<h1>JavaScript is ______ Language.</h1><br>
<form >
<input type="radio" name="choice" value="Scripting" required> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
<input type="submit" value="submit" onclick="validate()">
</form>

And the javascript part is as follows.

<script type="text/javascript">
function validate() {
 var a= document.getElementByName("choice");
 for (var i = 0, i < a.length; i++) {
   if (a[i].checked) {
     if( a[i].value == "scripting" )
        alert("your answer is correct");
     else
        alert("your answer is not correct");
     break;
   } } }   
</script>

Johan · Accepted Answer · 2015-12-05 09:16:58Z

Here condition is showing in alert pop up box. but I want to show it in a html tag. But after clicking submit button, innerHTML content showing a millisecond and then automatic remove the content. How selection will stay in innerHTML

document.getElementById("answer").innerHTML;
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 == "" ) {
    document.getElementById("answer").innerHTML = "please select choice answer";
  } else if ( val == "Scripting" ) {
    document.getElementById("answer").innerHTML = "Answer is correct !"
  } else {
    document.getElementById("answer").innerHTML = "Answer is wrong"
  }
};

Bharat Thapa · Accepted Answer · 2019-01-18 10:47:29Z

-1

You can add a function and event onClick so that whenever someone clicks on option submit button will appear.

answered Jan 18, 2019 at 10:47

Bharat Thapa

1

Collectives™ on Stack Overflow

Creating a multiple choice option in javascript

5 Answers 5

1 Comment

Some changes

Another, more complex example

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Some changes

Another, more complex example

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related