Karriz Posted June 17, 2012 Share Posted June 17, 2012 (edited) 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 June 17, 2012 by Karriz 1 Link to comment Share on other sites More sharing options...
Ingolme Posted June 17, 2012 Share Posted June 17, 2012 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 More sharing options...
Don E Posted June 17, 2012 Share Posted June 17, 2012 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 More sharing options...
Ingolme Posted June 17, 2012 Share Posted June 17, 2012 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 More sharing options...
sheeza Posted December 30, 2014 Share Posted December 30, 2014 I have used the above mentioned code for accessing radio buttons in a form but in my quiz i have ten questions and want to alert(popup) whether the answer is right or not .......... I'm using javascript ..... kindly help me. Link to comment Share on other sites More sharing options...
Matej Posted December 30, 2014 Share Posted December 30, 2014 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 More sharing options...
davej Posted December 31, 2014 Share Posted December 31, 2014 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now