Jump to content

Making a multiple choice quiz question with radio buttons


Karriz
 Share

Recommended Posts

I'm currently making a quiz-like math test site, and I use text field forms, and Javascript to check the answer. This is the code I currently have for text forms: <html> <head><title>Test</title> <script type="text/javascript">function validateForm(){var x=document.forms["Answer"]["Check answer"].value;if (x=="2"){alert("You're right, 2 is the correct answer!");;}else{alert("Wrong answer, 2 is correct.");;}} </script></head> <body> How much is 1+1? <form name="Answer"onsubmit="return validateForm()" method="post"><inputname="Check answer" value=""><br> <br><input value="Check answer" type="submit"><br></form> </body></html> Now I'd like to make questions which have multiple choices, like: a: 2b: 56c: 1 I know this should be possible with radio buttons, but simply changing the form type doesn't make it work. I don't have any real coding experience so I'd be really thankful if somebody could help. Edit: for some reason I can't put the html inside quote tags.

Edited by Karriz
  • Like 1
Link to comment
Share on other sites

If this is purely Javascript and no PHP involved then there is no need for the <form> element. However, if it is purely Javascript, anybody can just look at the source code to see the answers. The name attribute is not valid on the <form> element. It is an old and deprecated way to access forms. You should use HTML DOM methods getElementsByTagName() and getElementById(). Here's a question and a way to access its elements:

<fieldset id="question1">    <legend>What is the answer to this question?</legend>    <label><input type="radio" name="q1" value="right"> Right answer</label>    <label><input type="radio" name="q1" value="wrong"> Wrong answer</label></fieldset><input type="button" id="answer"><script type="text/javascript">    document.getElementById("answer").onclick = validate;    function validate() {	    var radios;	    var i;	    var right;	    radios = document.getElementById("question1").getElementsByTagName("input"); 	    right = false;	    for(i = 0; i < radios.length; i++) {		    if(radios[i].value == "yes" && radios[i].checked == true) {			  right = true;		    }	    } 	    if(right) {		    alert("You answered correctly");	    } else {		    alert("Wrong answer");	    }    }</script>

Link to comment
Share on other sites

Fox, When you say the name attribute of the form element is not valid and depreciated, and not the proper way to access forms, is this based on what's considered good coding practices or something else? I noticed for HTML5, the name attribute for the form element is still available. http://www.w3schools.com/html5/tag_form.asp Thanks.

Link to comment
Share on other sites

In HTML 4.01 and XHTML 1.0, the name attribute was not available in the Strict doctype. According to W3Schools, it seems like it has been retained in the HTML 5 specification.

Link to comment
Share on other sites

  • 2 years later...

Well you can do something like this;

 

<input type="radio" name="gender"  value="Male" /><input type="radio" name="gender"  value="Female" />    function () {    var gender = document.getElementsByName("gender");    var answer;    for (var i = 0; i < gender.length; i++) {        if (gender[i].checked === true) {            answer = gender[i].value;            break        }     }    if (answer == "Male") {        alert("true")    } else {        alert("false")    } };
Link to comment
Share on other sites

This topic comes up in these forums regularly, so you could search for old answers. After playing with Foxy's approach from 2 1/2 years ago I came up with this version...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>.rightans{border:3px solid #0f0;background-color: #afa;}.wrongans{border:3px solid #f00;background-color: #faa;}</style><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>'use strict';window.onload = init;function init() {document.getElementById('btn').onclick = validate;document.getElementById('btnclr').onclick = clear;}function validate() {var radios = document.getElementById("quiz").getElementsByTagName("INPUT");var right = 0;var wrong = 0; for(var i=0, len=radios.length ; i<len ; i++) {  if(radios[i].value == "x") {    if(radios[i].checked == true){      right++;      radios[i].parentNode.parentNode.className = 'rightans';    }else{      wrong++;      radios[i].parentNode.parentNode.className = 'wrongans';    }  }} var pcnt = (100*right/(wrong+right)).toFixed(1);document.getElementById("score").innerHTML = 'Correct: '+ right +'<br/>Incorrect: ' + wrong +'<br/>Percent Correct: ' + pcnt +'%';}function clear(){var radios = document.getElementById("quiz").getElementsByTagName("INPUT");for(var i=0, len=radios.length ; i<len ; i++) {radios[i].checked = false;if (radios[i].value == "x"){ radios[i].parentNode.parentNode.className = '';}}document.getElementById("score").innerHTML = '';}</script></head></body><div id="quiz"><h1>Quiz</h1><fieldset id="q1"> <legend>Question 1</legend> <legend>What is the answer to this question?</legend> <label><input type="radio" name="q1" value="p"/>Wrong answer1</label><br/> <label><input type="radio" name="q1" value="x"/>Correct answer</label><br/> <label><input type="radio" name="q1" value="y"/>Wrong answer2</label><br/> <label><input type="radio" name="q1" value="m"/>Wrong answer3</label><br/> <label><input type="radio" name="q1" value="f"/>Wrong answer4</label></fieldset><fieldset id="q2"> <legend>Question 2</legend> <legend>What is the answer to this question?</legend> <label><input type="radio" name="q2" value="r"/>Wrong answer1</label><br/> <label><input type="radio" name="q2" value="s"/>Wrong answer2</label><br/> <label><input type="radio" name="q2" value="l"/>Wrong answer3</label><br/> <label><input type="radio" name="q2" value="x"/>Correct answer</label><br/> <label><input type="radio" name="q2" value="r"/>Wrong answer4</label></fieldset><fieldset id="q3"> <legend>Question 3</legend> <legend>What is the answer to this question?</legend> <label><input type="radio" name="q3" value="d"/>Wrong answer1</label><br/> <label><input type="radio" name="q3" value="g"/>Wrong answer2</label><br/> <label><input type="radio" name="q3" value="j"/>Wrong answer3</label><br/> <label><input type="radio" name="q3" value="e"/>Wrong answer4</label><br/> <label><input type="radio" name="q3" value="x"/>Correct answer</label></fieldset></div><input type="button" id="btn" value="Check Answers"/><input type="button" id="btnclr" value="Clear"/><h2 id="score"></h2></body>    </html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...