Can't Loop through javascript quiz -
this javascript quiz done for loops. problem when 2 of same answers selected (such "dec" , "dec"), program scoring them 2 correct answers.
please review code. seems if program looping selected options, , checking them against answers.
<html> <head> <title>javascript multiple choice test</title> </head> <body> <form name="form1"> when xmas?<br/> <input type="radio" name="answer" value="jan" >jan<br/> <input type="radio" name="answer" value="dec" >dec<br/> <input type="radio" name="answer" value="feb" >feb<br/> <input type="radio" name="answer" value="june" >june<br/> </form> <form name="form2"> when thanksgiving?<br/> <input type="radio" name="answer" value="jan" >jan<br/> <input type="radio" name="answer" value="dec" >dec<br/> <input type="radio" name="answer" value="feb" >feb<br/> <input type="radio" name="answer" value="nov" >nov<br/> </form> <form name="form3"> month arbor day in u.s?<br/> <input type="radio" name="answer" value="mar" >mar<br/> <input type="radio" name="answer" value="april" >april<br/> <input type="radio" name="answer" value="june" >june<br/> <input type="radio" name="answer" value="july" >july<br/> </form> <form name="form4"> month bastille day?<br/> <input type="radio" name="answer" value="mar" >mar<br/> <input type="radio" name="answer" value="april" >april<br/> <input type="radio" name="answer" value="june" >june<br/> <input type="radio" name="answer" value="july" >july<br/> </form> <input type="submit" id="mysubmit" onclick="getanswer()"> <br/> <div id="score"></div> <script> var questans = [ ["what month xmas?", "dec" ], ["what month thanksgiving?", "nov" ], ["what month arbor day in u.s?", "april"], ["what month bastille day?", "july"] ] function getanswer() { score = 0; numquestions = 4; //the numbe of questions in test numcorrectans = 4 //the total number of correct answers in test numanswers = 4; //the number of answers per questions (i=0; i< numquestions; i++) { (j=0; j< numanswers; j++) { (a=0; < numcorrectans; a++) { if (document.forms[i].answer[j].checked && document.forms[i].answer[j].value === questans[a][1]) { score = score + 25; // alert("correct, score " + score + " , answer " + questans[a][1]); //alert((document.forms[0].answer[0].value)); //alert("the 2nd answer " + questans[a][1]); } else { score = score + 0; //alert("wrong, score " + score); } } } } //end of document.getelementbyid("score").innerhtml = "<h3>score: " + score + "</h3>"; //this displays score document.getelementbyid("mysubmit").disabled = true;//this disables submit button user can't change answers } </script> </body> </html>
you did pretty complicated, , probably, better using other approach.
that´s working code, anyway:
<!doctype html> <html> <head> <title>javascript multiple choice test</title> </head> <body> <form name="form1"> when xmas?<br/> <input type="radio" name="answer" value="jan" >jan<br/> <input type="radio" name="answer" value="dec" >dec<br/> <input type="radio" name="answer" value="feb" >feb<br/> <input type="radio" name="answer" value="june" >june<br/> </form> <form name="form2"> when thanksgiving?<br/> <input type="radio" name="answer" value="jan" >jan<br/> <input type="radio" name="answer" value="dec" >dec<br/> <input type="radio" name="answer" value="feb" >feb<br/> <input type="radio" name="answer" value="nov" >nov<br/> </form> <form name="form3"> month arbor day in u.s?<br/> <input type="radio" name="answer" value="mar" >mar<br/> <input type="radio" name="answer" value="april" >april<br/> <input type="radio" name="answer" value="june" >june<br/> <input type="radio" name="answer" value="july" >july<br/> </form> <form name="form4"> month bastille day?<br/> <input type="radio" name="answer" value="mar" >mar<br/> <input type="radio" name="answer" value="april" >april<br/> <input type="radio" name="answer" value="june" >june<br/> <input type="radio" name="answer" value="july" >july<br/> </form> <input type="submit" id="mysubmit" onclick="getanswer()"> <br/> <div id="score"></div> </body> </html> <script type='text/javascript'> var questans = [ ["what month xmas?", "dec" ], ["what month thanksgiving?", "nov" ], ["what month arbor day in u.s?", "april"], ["what month bastille day?", "july"] ] function getanswer() { score = 0; numquestions = 4; //the numbe of questions in test numcorrectans = 4 //the total number of correct answers in test numanswers = 4; //the number of answers per questions (i=0; i< numquestions; i++) { (j=0; j< numanswers; j++) { if (document.forms[i].answer[j].checked && document.forms[i].answer[j].value === questans[i][1]){ console.log("i: "+i+", j:"+j+", a:"+i); score = score + 25; // alert("correct, score " + score + " , answer " + questans[a][1]); //alert((document.forms[0].answer[0].value)); //alert("the 2nd answer " + questans[a][1]); } else { score = score + 0; //alert("wrong, score " + score); } } }//end of document.getelementbyid("score").innerhtml = "<h3>score: " + score + "</h3>"; //this displays score document.getelementbyid("mysubmit").disabled = true; //this disables submit button user can't change answers } </script> what doing wrong iterate on entries in questans array, when had direct match between array , list of questions in form, so, comparation, had use same index addecuate results.
since said bit complicated, suggest approach solve this.
you use in each form parameter indicating correct answer, , use compare(jquery required):
... <form name="form1" data-answer="dec"> when xmas?<br/> <input type="radio" name="answer" value="jan" >jan<br/> <input type="radio" name="answer" value="dec" >dec<br/> <input type="radio" name="answer" value="feb" >feb<br/> <input type="radio" name="answer" value="june" >june<br/> </form> .... and then, in javascript:
... score = 0; $("input[type='radio']:checked").each(function(index, checked_input){ if ($(checked_input).val() == $(checked_input).parent().attr("data-answer")) score+=25; }); ... 
Comments
Post a Comment