www.webdeveloper.com
Results 1 to 3 of 3

Thread: Multiple choice question

  1. #1
    Join Date
    Feb 2014
    Posts
    14

    Multiple choice question

    Hi friends,

    I made an multiple choice question like this…..

    <h3>what is your favorite color ?</h3>
    <input type="radio" name="colors" value="correct !" id="myRadio">Red<br>
    <input type="radio" name="colors" value="try again" id="myRadio">blue<br>
    <input type="radio" name="colors" value="try again" id="myRadio">green<br>
    <input type="radio" name="colors" value="try again" id="myRadio">black<br>
    </form>

    I want to display on screen only one question each time.
    Once the user sign the radio (there is no different button here), it should immediately show a massage under the question (e.g. – "correct !" or "try again").

    How can I create a function like this in JS ?

    I will appreciate your help,

    Benny

  2. #2
    Join Date
    Oct 2013
    Posts
    460
    As an FYI, you can only use id="myRadio" (or any ID) once in a page. That's the rule, get used to it. Try this:

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Color Quiz</title>
    <style>
    #answer{
    	font-weight:bold;
    }
    .yes{
    	color:green;
    }
    .no{
    	color:red;
    }
    </style>
    <script>
    	function color(el,ans){
    		if (el.value == "red"){
    			ans.innerHTML = "Correct!";
    			ans.className = "yes";
    		}
    		else{
    			ans.innerHTML = "try again";
    			ans.className = "no";
    		}
    	}
    </script>
    </head>
    <body>
    <h3>what is your favorite color ?</h3>
    <form action="#">
    	<input type="radio" name="colors" value="red" onclick="color(this,answer)">Red<br>
    	<input type="radio" name="colors" value="blue" onclick="color(this,answer)">blue<br>
    	<input type="radio" name="colors" value="green" onclick="color(this,answer)">green<br>
    	<input type="radio" name="colors" value="black" onclick="color(this,answer)">black<br>
    </form>
    <div id="answer"></div>
    </body>
    </html>
    Adjust as necessary to pass the class.

  3. #3
    Join Date
    Feb 2014
    Posts
    14
    Thanks Kevin,
    I really appriciate your help and explanation, it helped me a lot.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles