JavaScript - Javascript Quiz Alert Help
I'm still new to javascript..
My question: How and where do I add an alert that comes up to make sure the user answers all questions before the pop-up window comes up to display score and answers? Here is a link to the quiz Thanks sooo much!! Below is the code.. Code: <script language="javascript" type="text/javascript"> var done = new Array; var yourAns = new Array; var score = 0; function getRBtnName(GrpName) { var sel = document.getElementsByName(GrpName); var fnd = -1; var str = ''; for (var i=0; i<sel.length; i++) { if (sel[i].checked == true) { str = sel[i].value; fnd = i; } } // return fnd; // return option index of selection // comment out next line if option index used in line above return str; } function StatusAllCheckboxes(IDS,cnt) { var str = ''; IDS = 'q'+IDS; var tmp = ''; for (var i=0; i<cnt; i++) { tmp = document.getElementById(IDS+'_'+i); if (tmp.checked) { str += tmp.value + '|'; } } return str; } // function Engine(question, answer, opt, Qtype) { function Engine(question, answer, Qtype) { switch (Qtype) { case "RB" : yourAns[question] = answer; break; case "SB" : yourAns[question] = answer; break; default : yourAns[question] = ''; alert('Invalid question type: '+Qtype); break; } } function EngineCB(question, answer, itemcnt) { // answer is not used at this time yourAns[question] = StatusAllCheckboxes(question,itemcnt); // alert('question: '+question+' :'+yourAns[question]); } //This is the code that calculates the score. function Score(){ score = 0; var tmp = ''; var answerText = "Quiz Results<p>"; // alert('Size of QR: '+QR.length); for (var i=1; i<QR.length; i++) { answerText = answerText+"<br>Question :"+i+" Your answer: "+yourAns[i]+"<br>"; tmp = QR[i][3]; if (QR[i][0] == 'CB') { tmp = tmp+'|'; } // alert(i+' : '+tmp+' : '+yourAns[i]+'\n\n'+answerText+'\n\n'); if (tmp != yourAns[i]) { answerText = answerText+"<br>The correct answer was "+QR[i][3]+"<br>"+explainAnswer[i]+"<br>"; } else { answerText = answerText+" <br>You got this one right! <br>"; score++; } } answerText=answerText+"<br><br>Your total score is : "+score+" out of "+(QR.length-1)+"<br>"; // for varying number of questions, alter scoring var ScoreMax = QR.length-1; var ScoreInc = Math.floor(ScoreMax / 12); // Don't have fewer than 5 questions. answerText=answerText+"<br>Comment : "; if(score<=ScoreInc){ answerText=answerText+"Not quite."; } if(score>=(ScoreInc+1) && score <=(ScoreInc*2)){ answerText=answerText+"Try Again!."; } if(score>=(ScoreInc*2+1) && score <=(ScoreInc*3)){ answerText=answerText+"Rats!."; } if(score>=(ScoreInc*3+1) && score <=(ScoreInc*4)){ answerText=answerText+"Maybe better next time"; } if(score>=(ScoreInc*4+1) && score <=(ScoreInc*5)){ answerText=answerText+"Try Again!"; } if(score>=(ScoreInc*5+1) && score <=(ScoreInc*6)){ answerText=answerText+"I bet you can do better!"; } if(score>=(ScoreInc*6+1) && score <=(ScoreInc*7)){ answerText=answerText+"Hey, pretty good job!"; } if(score>=(ScoreInc*7+1) && score <=(ScoreInc*8)){ answerText=answerText+"You almost got it!"; } if(score>=(ScoreInc*8+1) && score <=(ScoreInc*9)){ answerText=answerText+"Pretty Good! "; } if(score>=(ScoreInc*9+1) && score <=(ScoreInc*10)){ answerText=answerText+"Almost! You can do it!"; } if(score>(ScoreInc*11+1)){ answerText=answerText+"You did GREAT! Congratulations."; } var w = window.open('', '', 'height=500,width=750,scrollbars'); w.document.open(); w.document.write(answerText); w.document.close(); } </script> Code: <form name="myform" class="quiz"> <ol> <script type="text/javascript"> var str = ''; var tmpr = []; var resp = ['True','False']; // allows for up to 10 responses (can have more) for (q=1; q<QR.length; q++) { str += '<li class="quiz">'+QR[q][1]+'</li><br />'; tmpr = QR[q][2].split('|'); switch (QR[q][0]) { case 'RB' : for (var r=0; r<tmpr.length; r++) { str += '<input type="radio" name="q'+q+'" value="'+resp[r]+'"'; str += ' onClick="Engine('+q+',this.value,\''+QR[q][0]+'\')">'; str += ' '+tmpr[r]+'<br />'; } break; case 'CB' : for (var r=0; r<tmpr.length; r++) { str += '<input type="checkbox" id="q'+q+'_'+r+'" name="q'+q+'" value="'+resp[r]+'"'; str += ' onClick="EngineCB('+q+',this.value,'+tmpr.length+')">'; str += resp[r]+' '+tmpr[r]+'<br />'; } break; case 'SB' : str += '<select name="q'+q+'" size="1" id="q'+q+'"'; str += ' onClick="Engine('+q+',this.value,\''+QR[q][0]+'\')">'; for (var r=0; r<tmpr.length; r++) { str += '<option value="'+resp[r]+'">'; str += tmpr[r]+'</option>'; } str += '</select>'; break; /* test code for future entries -- not implemented yet case 'CBM' : break; case 'SBM' : str += '<select name="q'+q+'" size="1" id="q'+q+'"'; str += ' onClick="Engine('+q+',this.value,\''+QR[q][0]+'\')" multiple>'; for (var r=0; r<tmpr.length; r++) { str += '<option name="q'+q+'" value="'+resp[r]+'">'; str += tmpr[r]+'</option>'; } str += '</select>'; break; */ default : str += q+': Invalid type: '+QR[q][0]; break; } str += "<p />"; } document.write(str); </script> <br /> <br /> <input type=button onClick="Score()" value="How did I do?"> </ol> </form> Similar Tutorialsfirst of all, heres my body code (dont mind the questions, theyre in greek): Code: <form name="htmltest" onSubmit="return check1() && check2() && check3() && check4() && check5() && check6() && results()"> <b>1) Τι σημαίνει HTML?</b><br> <input type="radio" name="q1" value="a" onclick="score[1]=0">a) Home Tool Markup Language<br> <input type="radio" name="q1" value="b" onclick="score[1]=0">b) Hyperlinks and Text Markup Language<br> <input type="radio" name="q1" value="c" onclick="score[1]=1">c) Hyper Text Markup Language<br> <b>2) Διάλεξε το σωστό HTML tag για την μεγαλύτερη επικεφαλίδα:</b><br> <input type="radio" name="q2" value="a" onclick="score[2]=0">a) < h6 ><br> <input type="radio" name="q2" value="b" onclick="score[2]=0">b) < head ><br> <input type="radio" name="q2" value="c" onclick="score[2]=1">c) < h1 ><br> <b>3) Ποιο είναι το σωστό HTML tag για line break?</b><br> <input type="radio" name="q3" value="a" onclick="score[3]=0">a) < break ><br> <input type="radio" name="q3" value="b" onclick="score[3]=0">b) < lb ><br> <input type="radio" name="q3" value="c" onclick="score[3]=1">c) < br ><br> <b>4) Διάλεξε το σωστό HTML tag για να κάνεις bold κάποια γράμματα:</b><br> <input type="radio" name="q4" value="a" onclick="score[4]=0">a) < bold ><br> <input type="radio" name="q4" value="b" onclick="score[4]=1">b) < b ><br> <input type="radio" name="q4" value="c" onclick="score[4]=0">c) < text.bold ><br> <b>5) Ποιος είναι ο σωστός τρόπος για να δημιουργήσετε έναν υπερσύνδεσμο;</b><br> <input type="radio" name="q5" value="a" onclick="score[5]=0">a) < a url="http://www.unipi.gr">Unipi.gr < / a><br> <input type="radio" name="q5" value="b" onclick="score[5]=1">b) < a href="http://www.unipi.gr">Unipi.gr< / a><br> <input type="radio" name="q5" value="c" onclick="score[5]=0">c) < a >http://www.unipi.gr"< / a><br> <b>6) Ποια απο τα παρακάτω HTML tag απευθύνονται όλα σε πίνακα?</b><br> <input type="radio" name="q6" value="a" onclick="score[6]=0">a) < table >, < head >, < tfoot ><br> <input type="radio" name="q6" value="b" onclick="score[6]=0">b) < table >, < tr >, < tt ><br> <input type="radio" name="q6" value="c" onclick="score[6]=1">c) < table >, < tr> , < td ><br> <input type="submit" value="Αξιολόγηση"> <input type="reset" value="Reset"><br><br> </form> and here's my javascript code Code: function check1() { var radio_choice=false; for (counter=0; counter < htmltest.q1.length; counter++) { if (htmltest.q1[counter].checked ) radio_choice=true; } if (!radio_choice) { alert("Παρακαλώ απαντήστε σε όλες τις ερωτήσεις") return (false); } return(true); } function check2() { var radio_choice=false; for (counter=0; counter < htmltest.q2.length; counter++) { if (htmltest.q2[counter].checked ) radio_choice=true; } if (!radio_choice) { alert("Παρακαλώ απαντήστε σε όλες τις ερωτήσεις") return (false); } return(true); } function check3() { var radio_choice=false; for (counter=0; counter < htmltest.q3.length; counter++) { if (htmltest.q3[counter].checked ) radio_choice=true; } if (!radio_choice) { alert("Παρακαλώ απαντήστε σε όλες τις ερωτήσεις") return (false); } return(true); } function check4() { var radio_choice=false; for (counter=0; counter < htmltest.q4.length; counter++) { if (htmltest.q4[counter].checked ) radio_choice=true; } if (!radio_choice) { alert("Παρακαλώ απαντήστε σε όλες τις ερωτήσεις") return (false); } return(true); } function check5() { var radio_choice=false; for (counter=0; counter < htmltest.q5.length; counter++) { if (htmltest.q5[counter].checked ) radio_choice=true; } if (!radio_choice) { alert("Παρακαλώ απαντήστε σε όλες τις ερωτήσεις") return (false); } return(true); } function check6() { var radio_choice=false; for (counter=0; counter < htmltest.q6.length; counter++) { if (htmltest.q6[counter].checked ) radio_choice=true; } if (!radio_choice) { alert("Παρακαλώ απαντήστε σε όλες τις ερωτήσεις") return (false); } return(true); } var score = new Array; function results() { var i, total; total = 0; for(i=1;i<=6;i++) { total += score[i]; } window=window.open("resultshtml.html","answers","width=400px,height=700px"); document.write(total); } what i want is, first of all an easier way to get an alert if not all questions are answered because mine (6 different functions) is a bit long. Also, when you press submit, a new window must pop up (not an alert box) with your score and the correct answers. I managed to get the window to pop up but i cant make it show the variable "total" value which contains the score (from the function "results"). Any ideas? Hi, I am looking for a javascript quiz script that will allow me to grade individual sections of a quiz rather than grading the quiz as a whole. I am looking to setup an online test consisting of a number of sections but the output must grade each section individually. Any help apprecaited! Hello I need to make an answers page for a quiz but I don't know how to do it? Code is below if it helps Code: <!DOCTYPE html> <html> <head> <title>QUIZ</title> <script> var Q = function (id, text, correct, wrong) { this.id = id; this.text = text; this.correct = correct; this.wrong = wrong; this.answers = this.correct.concat(this.wrong) } Q.prototype = { blah: function () { document.write("<p>x<\/p>"); }, write: function () { if (this.asked) { return false; } this.asked = true; document.write( '<p>' + this.text + '<\/p>'); document.write( '<form>'); var type = ( this.correct.length > 1 ? "checkbox" : "radio" ); for (var i in this.answers) { document.write( '<input type="'+type+'" name="'+this.id+'">'+this.answers[i]+'<\/input><br>'); } document.write( '<\/form>'); return true; } } var questions = [ new Q( "Q1", "Question 1", ["Correct Answer"], ["Incorrect", "Incorrect", "Incorrect"] ), new Q( "Q2", "Question 2", ["Correct Answer", "Correct Answer"], ["Incorrect", "Incorrect", "Incorrect"] ), new Q( "Q3", "Question 3", ["Correct Answer", "Correct Answer"], ["Incorrect", "Incorrect", "Incorrect"] ), new Q( "Q4", "Question 4", ["Correct Answer"], ["Incorrect", "Incorrect."] ) ]; var askQuestions = function () { var asked = 0; while (asked < 3) { var num = Math.floor( Math.random() * questions.length ); var question = questions[num]; if (question.write()) { asked++; } } }; askQuestions(); </script> <BR> <input name="Submit" type="Submit" value="How did I do?"> </body> </html> Any suggestions? Thanks Hi! I need to make my own web page with quiz on it! Something like this http://www.javascriptkit.com/script/popquiz.htm The main problem - how to calculate scores? I need to make, for example, pop up box that shows, how many answers are right/wrong. What should I use for that? The following quiz template only supports 4 possible answers. Id like to add a 5th answer. Should be quite easy to do, but I dont know any programming. http://javascript.about.com/library/blquizf.htm On the template above each possible answer can be given a different score. Then at the and it adds up the score and displays a message according to your total score. Thanks in advance Heres the code: The following is contained in file quizhead.js: var quiz = new Array(); var r = 0; var analPage = 'results.html'; quiz[r++] =('38901~16~What score would you give to your supervisor?~Bad~Average~Good~Excellent~1~4'); The following goes to on the page where the questions appear on the head section: <script src="quizhead.js" type="text/javascript"> </script> The following is contained in quizbody.js file: // Analysis Quiz Javascript // copyright 20th December 2004 - 13th May 2005, by Stephen Chapman // permission to use this Javascript on your web page is granted // provided that all of the code in this script (including these // comments) is used without any alteration function displayResult(cor) { document.write('<div style="font-size:14px;"><b>You have completed the quiz.<\/b><\/div><blockquote><span style="font-size:12px;">*<br \/>*<br \/>*<br \/>*<br \/><\/span><\/blockquote><div><a href="'+analPage+'?cor='+cor+'">Your result</a><\/div>'); } var qsParm = new Array(); function qs() { var query = window.location.search.substring(1); var parms = query.split('&'); for (var i=0; i<parms.length; i++) { var pos = parms[i].indexOf('='); if (pos > 0) { var key = parms[i].substring(0,pos); var val = parms[i].substring(pos+1); qsParm[key] = val; } } } qsParm['questnum'] = 0; qsParm['cor'] = 0; qs(); var questnum = qsParm['questnum']; var cor = qsParm['cor'];cor=cor%475; function checkAnswer(e,b,g){ var a = -1; var x = Math.floor(g/b); // x = bdca for (var i=0; i<e.c.length; i++) {if (e.c[i].checked) {a = i;}} if (a == -1) { alert("You must select an answer"); return false; } var b = new Array(); b[1] = Math.floor(x/1000); x -= b[1]*1000; b[3] = Math.floor(x/100); x -= b[3]*100; b[2] = Math.floor(x/10); b[0] = x - b[2]*10; cor += b[a]; var www = self.location.href.lastIndexOf('?'); var thispage = self.location.href; if (www != -1) thispage = self.location.href.substr(0,www); questnum++; var p = Math.floor((Math.random() * 8) + 2); var m = (p * 475) +cor; top.location = thispage + '?questnum='+ questnum +'&cor='+m; return false; } function result(cor) { var lo = 0, hi = 0; for (var i=0;i < quiz.length;i++) { var f = quiz[i].split('~'); lo += parseInt(f[7]); hi += parseInt(f[8]); } return Math.round((cor - lo) * 100 / (hi - lo)); } var tblsz = quiz.length; document.write('<table align="center" cellpadding="3" width="350" border="1"><tr>'); if (questnum < quiz.length) { var f = quiz[questnum].split('~'); document.write('<td align="left"><form name="myForm"><div style="font-size:14px;">Question: '+f[2]+'</div><blockquote><span style="font-size:12px;">\n'); document.write('<input type="radio" name="c" value="0" /> '+f[3]+'<br />\n'); document.write('<input type="radio" name="c" value="1" /> '+f[4]+'<br />\n'); if (f[5] != '') document.write('<input type="radio" name="c" value="2" /> '+f[5]+'<br />\n'); if (f[6] != '') document.write('<input type="radio" name="c" value="3" /> '+f[6]+'<\/span><\/blockquote>\n'); document.write('<div align="right"><input type="button" value="Next Question" onclick="checkAnswer(myForm,'+f[1]+','+f[0]+');return false;" /><\/div><\/form>\n'); } else { document.write('<td align="center">\n'); document.write('<form name="myForm">'); displayResult(result(cor)); document.write('<\/form>\n');} document.write('<\/td><\/tr><\/table>\n'); The following goes on the page where the questions appear on the body section: <script src="quizbody.js" type="text/javascript"> </script><noscript><table align="center" cellpadding="3" width="350" border="1"><tr> <td align="left"><div><b>This Quiz requires Javascript</b> </div><blockquote>You either have Javascript disabled <br />or the browser you are using does not<br /> support Javascript. Please use a Javascript<br /> enabled browser to access this quiz.<br /> <br /> </blockquote></td></tr></table></noscript> The following is contained in the quizresh.js file: // Analysis Quiz Javascript // copyright 20th December 2004, by Stephen Chapman // permission to use this Javascript on your web page is granted // provided that all of the code in this script (including these // comments) is used without any alteration var qsParm = new Array(); function qs() { var query = window.location.search.substring(1); var parms = query.split('&'); for (var i=0; i<parms.length; i++) { var pos = parms[i].indexOf('='); if (pos > 0) { var key = parms[i].substring(0,pos); var val = parms[i].substring(pos+1); qsParm[key] = val; } } } qsParm['cor'] = 0; qs(); var cor = qsParm['cor']; This goes on the page where the results are displayed on the head section: <script src="quizresh.js" type="text/javascript"> </script> The following is contained in the quizresb.js file: // Analysis Quiz Results if (cor <= 25) document.write('<p>Good<\/p>'); else if (cor <= 50) document.write('<p>Very Good<\/p>'); else if (cor <= 75) document.write('<p>Excellent<\/p>'); else document.write('<p>Perfect<\/p>'); This goes on the results page on the body section: <script src="quizresb.js" type="text/javascript"> </script> Hi - would appreciate some help with this school project. I can't get this simple quiz to work correctly, it should give a pop-up with a pass/fail message on submit. Can anyone see the error? Instead of posting the whole code - the live version is here with all the code in the doc head... http://bit.ly/hR8JYk My code goes through the answer function (below) and it determins if you answered green. If you answered green a popup says correct other wise incorrect. How can I modify my code so that I can add multiple answers for different questions.Example q1 answer = green q2 answer = blue . . q20 answer = Friday Here is my .js code Code: var n = 16; // modify this for number of seconds to answer document.getElementById( 'time').value = "Answer in " + n + " seconds"; var i = setInterval('count()' , 1000); var tooLate; function count() { tooLate = 0; n--; if(n >=0) { document.getElementById( 'time').value = "Answer in " + n + " seconds"; } else { clearInterval(i); alert("Too late!"); if(document.getElementById( 'answer').value == correct){ tooLate = 1; } } function answer() { var correct = "green"; // This is the correct answer if (tooLate == 0) { if(document.getElementById( 'answer').value == correct) { clearInterval(i); alert("Right Answer with " + n + " seconds remaining"); } else{ clearInterval(i); alert("Incorrect! The answer was " + correct); } } submitform(); //submit form function submitform() { document.forms["myform"].submit(); } } Hi, I want to make a simple quiz in HTML using JavaScript. I have made a web page called scoreboard which contains two tables. I have attached the screen shot of how the web page looks as well as the coding here with this msg. below is the description of my web page. If you find it lengthy or not understandable, pls refer my attached image of the web page. Description one table contains two rows - one for direct answers and another for answers which are given during their pass chance in the quiz. There are four buttons - Team A, Team B, Team C and Team D for both the direct and pass. And the second table contains four text boxes which which displays the score for each Team. Now, in my web page i have typed the required coding so that when in click the TeamA, TeamB,...buttons in the direct row, the score board for Team A adds up 10 points. Now i want to add 5 points for the respective teams when i click their team button in the pass row. I am not able to code that. I am new to JS. so pls help me. the code goes below. thanks in advance. Code: <html> <head> <title>score card</title> <form name="myform"> <script language="javascript"> function score_computeA(n) { var score = parseInt(document.myform.t1.value,10); n = parseInt(n,10); score= score + n; document.myform.t1.value = score; } function score_computeB(n) { var score = parseInt(document.myform.t2.value,10); n = parseInt(n,10); score= score + n; document.myform.t2.value = score; } function score_computeC(n) { var score = parseInt(document.myform.t3.value,10); n = parseInt(n,10); score= score + n; document.myform.t3.value = score; } function score_computeD(n) { var score = parseInt(document.myform.t4.value,10); n = parseInt(n,10); score= score + n; document.myform.t4.value = score; } </script> </head> <body> <p align="center"><font face="Broadway" size="6">School name goes here</font></p> <p align="center"><font face="Baskerville Old Face" color="#FF0000" size="5"> Quiz</font></p> <p align="center"> </p> <p align="center"><font face="Arial Rounded MT Bold" size="5" color="#008000"> Administrative Panel</font></p> <div align="center"> <table border="1" width="69%" height="83"> <tr> <td width="98" height="35"> <p align="left">Direct</td> <td height="35"> <p align="center"><input type="button" value="Team A" name="d1" onclick = "score_computeA(10)"></td> <td height="35"> <p align="center"><input type="button" value="Team B" name="d2" onclick = "score_computeB(10)"></td> <td height="35"> <p align="center"><input type="button" value="Team C" name="d3" onclick = "score_computeC(10)"></td> <td height="35"> <p align="center"><input type="button" value="Team D" name="d4" onclick = "score_computeD(10)"></td> </tr> <tr> <td width="98">Pass</td> <td> <p align="center"><input type="button" value="Team A" name="p1" onclick ="pass_computeA(5)"></td> <td> <p align="center"><input type="button" value="Team B" name="p2"></td> <td> <p align="center"><input type="button" value="Team C" name="p3"></td> <td> <p align="center"><input type="button" value="Team D" name="p4"></td> </tr> </table> <hr> <p align="center"> <font face="Arial Rounded MT Bold" size="5" color="#008000">Score Card</font></p> <table border="1" width="59%" height="82"> <tr> <td width="155">Team</td> <td width="177">Team A</td> <td width="166">Team B</td> <td width="160">Team C</td> <td>Team D</td> </tr> <tr> <td width="155">Score</td> <td width="177"> <p align="center"> <input name="t1" size="22" value="0" style="border:3px double #FF0000; float: right"></td> <td width="166"> <input type="text" name="t2" size="22" value="0" style="border: 3px double #FF0000"></td> <td width="160"> <input type="text" name="t3" size="22" value="0" style="border: 3px double #FF0000"></td> <td> <input type="text" name="t4" size="22" value="0" style="border: 3px double #FF0000"></td> </tr> </table> </div> </form> <p align="center"> </p> </body> </html> I need to comment on my code. I did what i can but i have been told that it is still not enough. can anybody help me with this one ? < Code: <HTML> <HEAD> <TITLE>SIMPLE QUIZ ON ANIMAL ZOO</TITLE> <STYLE TYPE="text/css"> <!-- CSS code for my header --> BODY {text-align:center} </style> <script language="JavaScript"> // An Array is a special type of variable var x; // The letter x is used to hold a value and also expressions x = 0; //This states that variable x has value of 0. var Pictures = new Array(4); //It declares a variable to an array var Questions = new Array(4);//It declares a variable to an array var answers1 = new Array (); // It declares a varibale to an array var answers2 = new Array (); // It declares a varibale to an array var answers3 = new Array (); // It declares a varibale to an array var answers4 = new Array (); // It declares a varibale to an array var correctanswers = new Array(4); var score = 0; // It keeps the pathway of the score var userans = new Array (4);//The variable is declaring new array var incorr = 0; var isChecked = false; //The variable is defined as boolean by giving an initial value of false Pictures[0] = "Pic/1.jpg"; // These are the pictures for the quiz Pictures[1] = "Pic/2.jpg"; Pictures[2] = "Pic/3.jpg"; Pictures[3] = "Pic/4.jpg"; Pictures[4] = "Pic/5.jpg"; Questions[0] = "Which is the biggest shark?"; // These are the questions Questions[1] = "How much can tiger weighs?"; Questions[2] = "What colour are skunks?"; Questions[3] = "Why do red-eyed tree frogs have big red eyes? "; Questions[4] = "Which family of animals does the chimp belong to?"; answers1[0] = "Tiger shark"; // These are the answers for text box1 answers1[1] = "200 kilos"; answers1[2] = "Red and white"; answers1[3] = "To look like plants"; answers1[4] = "Apes"; answers2[0] = "Great white Shark"; // These are the answers for text box2 answers2[1] = "300 kilos"; answers2[2] = "Blue and Yellow"; answers2[3] = "To have better view at their food"; answers2[4] = "Monkey"; answers3[0] = "Grey reef shark"; // These are the answers for text box3 answers3[1] = "360 kilos"; answers3[2] = "Black and white"; answers3[3] = "To look far"; answers3[4] = "Gorilla"; answers4[0] = "Hammerhead shark"; // These are the answers for text box4 answers4[1] = "420 kilos"; answers4[2] = "Green"; answers4[3] = "To scare the predators"; answers4[4] = "Chimpanzee"; correctanswers[1] = 2; // These are the correct answers for the questions. correctanswers[2] = 3; correctanswers[3] = 3; correctanswers[4] = 4; correctanswers[5] = 1; function Next(){ //It calls the function "Next" for (i=0; i<document.Form.answer.length; i++) { if (document.Form.answer[i].checked==true) isChecked = true; } if (isChecked==false) alert ("Please Select an Answer"); else { for (var i=0; i<document.Form.answer.length; i++) { if (document.Form.answer[i].checked==true){ userans[x]= i + 1; //document.Form.answer[i].checked = false; } } if (userans[x]==correctanswers[x]) alert ("This is the correct answer"); else alert ("This is not the correct answer"); //alert (document.Form.answer[i].value); //alert (userans[x]); Picture(); } } /* The code below calls the function Picture. The code below does the following: Adds score if the answer is right */ function Picture() { if (x==5){ for (var k=0; k<5; k++) { if (userans[k]==correctanswers[k]) { score = score + 1 } else { incorr = incorr + 1 } } alert("The score is " + score + " \n \n Correct Answers a \n \n 1. Great white shark \n 2. 360 Kilos \n 3. Black and white \n 4. To scare the predators \n 5. Apes" ); } else{ //The code will display the pictures, questions and answers in the browser document.Pic.src=Pictures[x]; Form.questions.value = Questions[x]; // It shows the questions inside the form in text Form.text1.value=answers1[x]; // It shows the answers1 inside the form in text1 Form.text2.value=answers2[x]; // It shows the answers2 inside the form in text2 Form.text3.value=answers3[x]; // It shows the answers3 inside the form in text3 Form.text4.value=answers4[x]; // It shows the answers4 inside the form in text4 x = x + 1; } isChecked = false for (i=0; i<document.Form.answer.length; i++) { document.Form.answer[i].checked=false; } } function Restart() //This code is used for "Restart" button which will restart the quiz to the beginning. { location.reload(true); } // When the page loads this code will dispaly the first Questions and Pictures and it will carry on. </script> </HEAD> <BODY> <BODY BODY BGCOLOR="Maroon"> <FONT FACE="ARIAL" Size="+3" COLOR="GOLD"> <CENTER><B><U> SIMPLE QUIZ ON ANIMAL ZOO </U></B></CENTER> <br> </FONT> <BLOCKQUOTE> <FONT FACE="ARIAL" Size="+1" COLOR="BEIGE"> <body onload="Picture()"> <form name="Form"><br> <img name="Pic" src="Pic/1.jpg" width="130" height="140" /> <br> <br> <input type="text" size="90" height="250" name="questions" /><br /><br /> <input type="radio" name="answer" value="1" /><input name = "text1" size="45 height ="250"/><br /> <br /> <input type="radio" name="answer" value="2" /><input name = "text2" size="45 height ="250"/><br /><br> <input type="radio" name="answer" value="3" /><input name = "text3" size="45 height ="250"/> <br> <br /> <input type="radio" name="answer" value="4" /><input name = "text4" size="45 height ="250"/> <br><br> <input name="return" Type=Button Value=" Restart " onclick="Restart()"> <input name="Submit" Type=Button Value=" Next " onClick="Next()"> </form> </body> </html> So I am working on a fairly difficult project (for my level at least). I actually had this project planned before I even knew JavaScript so I specifically learned JavaScript in order to write this program! Here is my plan: I am writing a javascript program to help students prepare to take an exam (a standardized test). The test consists of 80 questions from various topics in history. The test covers three time spans (0-1000, 1000-1500, 1500-2000) and 4 different question types (ie. politics, culture, economics, foreign relations). Likewise, each question will cover a specific topic, maybe one will be about a specific war and another question will be about a leader. What I want the quiz to do is give a detailed report on the student's strengths and weaknesses. Once the student is done with the quiz and they select "grade" it will take them to the results page which will show them: 1. their score (percent correct) 2. percent correct for each of the time periods. 3. percent correct for each of the question types 4. a recommended chapter reading list based on the questions they got wrong. I did some search on the internet and found a basic script that ive been using. All it does is have the html code for the questions and the, "grade" button only shows the percent correct and which which questions were wrong. Its basically a simple quiz script without any of the advanced features I want. I figure I'll just add the advanced features to this existing script. Here is a link to the example script I am using. So far my script is 100% the same (except different questions and answers). What is the best route to modify that script to add all the features I want. From what I've read on javascript so far. I have to write a function to process each of the elements I want to display on the results page. I have no idea about how to do that though. Hi, I was tasked with creating a JavaScript quiz... I succeeded in doing so but part of the requirement was to use hidden fields for the answers. Would this be possible using the code I currently have: Thanks Code: <html> <head> <script type="text/javascript"> function valid() { cor = "0" incor = "0" test0 = document.myform.elements[0].value; test1 = document.myform.elements[1].value; test2 = document.myform.elements[2].value; test3 = document.myform.elements[3].value; test4 = document.myform.elements[4].value; test5 = document.myform.elements[5].value; test6 = document.myform.elements[6].value; test7 = document.myform.elements[7].value; test8 = document.myform.elements[8].value; test9 = document.myform.elements[9].value; if (test0 == "64") { alert("Congratulations you got question one correct!"); ++cor } else alert("Sorry, you got question one incorrect!"); if (test1 == "56") { alert("Congratulations you got question two correct!"); ++cor } else alert("Sorry, you got question two incorrect!"); if (test2 == "7") { alert("Congratulations you got question three correct!"); ++cor } else alert("Sorry, you got question three incorrect!"); if (test3 == "8") { alert("Congratulations you got question four correct!"); ++cor } else alert("Sorry, you got question four incorrect!"); if (test4 == "100") { alert("Congratulations you got question five correct!"); ++cor } else alert("Sorry, you got question five incorrect!"); if (test5 == "1947") { alert("Congratulations you got question six correct!"); ++cor } else alert("Sorry, you got question six incorrect!"); if (test6 == "1") { alert("Congratulations you got question seven correct!"); ++cor } else alert("Sorry, you got question seven incorrect!"); if (test7 == "7") { alert("Congratulations you got question eight correct!"); ++cor } else alert("Sorry, you got question eight incorrect!"); if (test8 == "132") { alert("Congratulations you got question nine correct!"); ++cor } else alert("Sorry, you got question nine incorrect!"); if (test9 == "5280") { alert("Congratulations you got question ten correct!"); ++cor } else alert("Sorry, you got question ten incorrect!"); //else ++incor alert("you got " + cor + " right\n You got " + cor/10 * 100 + "% correct!"); } </script> </head> <body> <form name="myform"> <table border="1" cellpadding="10"> <tr><td>1. 64 added to what number gives a sum of 128?</td><td><input type="text" name="q1"></td></tr> <tr><td>2. The product of 8 and 7 is?</td><td><input type="text" name="q2"></td></tr> <tr><td>3. 35 divided by 5 is:</td><td><input type="text" name="q3"></td></tr> <tr><td>4. 40 divided by 5 is:</td><td><input type="text" name="q4"></td></tr> <tr><td>5. What is the area of rectangle that measure 5 by 20?</td><td><input type="text" name="q5"></td></tr> <tr><td>6. What is 3054 subtracted from 5001?</td><td><input type="text" name="q6"></td></tr> <tr><td>7. What is the result of 5 x 8-39?</td><td><input type="text" name="q7"></td></tr> <tr><td>8. What is the binary number 111 in decimal?</td><td><input type="text" name="q8"></td></tr> <tr><td>9. The sum of 33 and 44 and 55 is:</td><td><input type="text" name="q9"></td></tr> <tr><td>10. How many feet in a mile?</td><td><input type="text" name="q10"></td></tr> <tr><td><input type="button" onClick="valid()" value="score"></td><td><input type="reset"></td></tr> </form> </table> </body> </html> JavaScript code responsive quiz I live in turkey. Can you write me such a code for my site? Inside of here if you save as a .html and open it it will pull up the game a series of 5 boxes and 5 answers underneath, Currently those 5 answers correctly correlate with each box so you know what they are considering you don't have the .jpgs to display them. The one in bold is the "question" when you click on the one that correlates with the bold it should tell you Correct! 100. 100 being your score and if you get it wrong it will say sorry! and then take your score down to a 50 since you got 1 out of 2 wrong. The problem is when you get it wrong it also immediatly says Congrats! after you get it wrong So it will prompt a Sorry! alert and a Congrats! alert on the wrong answer. The second problem is after the user gets it right or wrong, I need it to re random the list of answers and images. Whilst keeping the score intact for up to 20 questions. Please help! Code: <body> <script type="text/javascript"> var counter = 0; var correct = 0; function show_alert0() { {counter++;} if (randomname0 != final) {alert("Sorry." + (( correct / counter ) * 100 ));} else {correct++;} {alert("Congrats!" + (( correct / counter ) * 100 ));} } function show_alert1() { {counter++;} if (randomname1 != final) {alert("Sorry." + (( correct / counter ) * 100 ));} else {correct++;} {alert("Congrats!" + (( correct / counter ) * 100 ));} } function show_alert2() { {counter++;} if (randomname2 != final) {alert("Sorry." + (( correct / counter ) * 100 ));} else {correct++;} {alert("Congrats!" + (( correct / counter ) * 100 ));} } function show_alert3() { {counter++;} if (randomname3 != final) {alert("Sorry." + (( correct / counter ) * 100 ));} else {correct++;} {alert("Congrats!" + (( correct / counter ) * 100 ));} } function show_alert4() { {counter++;} if (randomname4 != final) {alert("Sorry." + (( correct / counter ) * 100 ));} else {correct++;} {alert("Congrats!" + (( correct / counter ) * 100 ));} } </script> <script type="text/javascript"> var randomnumber0=Math.floor(Math.random()*66) var randomnumber1=Math.floor(Math.random()*66) var randomnumber2=Math.floor(Math.random()*66) var randomnumber3=Math.floor(Math.random()*66) var randomnumber4=Math.floor(Math.random()*66) while (randomnumber0==randomnumber1 || randomnumber0==randomnumber2 || randomnumber0==randomnumber3 || randomnumber0==randomnumber4) {randomnumber0=Math.floor(Math.random()*66)} while (randomnumber1==randomnumber0 || randomnumber1==randomnumber2 || randomnumber1==randomnumber3 || randomnumber1==randomnumber4) {randomnumber1=Math.floor(Math.random()*66)} while (randomnumber2==randomnumber0 || randomnumber2==randomnumber1 || randomnumber2==randomnumber3 || randomnumber2==randomnumber4) {randomnumber2=Math.floor(Math.random()*66)} while (randomnumber3==randomnumber0 || randomnumber3==randomnumber1 || randomnumber3==randomnumber2 || randomnumber3==randomnumber4) {randomnumber3=Math.floor(Math.random()*66)} while (randomnumber4==randomnumber0 || randomnumber4==randomnumber1 || randomnumber4==randomnumber2 || randomnumber4==randomnumber3) {randomnumber4=Math.floor(Math.random()*66)} document.write('<p style="text-align:center">') document.write('<em>Click on the ribbon that matches the name below.</em><br/><br/>') document.write('<button type="button" height="300" width="300" onclick="show_alert0()"><img src="https://www.intelink.gov/sites/afpaa/Shared%20Documents/rank'+randomnumber0+'.jpg" height="300px" width="200px"></button>') document.write('<button type="button" height="300" width="300" onclick="show_alert1()"><img src="https://www.intelink.gov/sites/afpaa/Shared%20Documents/rank'+randomnumber1+'.jpg" height="300px" width="200px"></button>') document.write('<button type="button" height="300" width="300" onclick="show_alert2()"><img src="https://www.intelink.gov/sites/afpaa/Shared%20Documents/rank'+randomnumber2+'.jpg" height="300px" width="200px"></button>') document.write('<button type="button" height="300" width="300" onclick="show_alert3()"><img src="https://www.intelink.gov/sites/afpaa/Shared%20Documents/rank'+randomnumber3+'.jpg" height="300px" width="200px"></button>') document.write('<button type="button" height="300" width="300" onclick="show_alert4()"><img src="https://www.intelink.gov/sites/afpaa/Shared%20Documents/rank'+randomnumber4+'.jpg" height="300px" width="200px"></button><br/>') document.write('</style>') var name = new Array(); name[0] = "Airman"; name[1] = "Airman 1st Class"; name[2] = "Senior Airman"; name[3] = "Staff Sergeant"; name[4] = "Technical Sergeant "; name[5] = "Master Sergeant"; name[6] = "First Master Sergeant"; name[7] = "Senior Master Sergeant"; name[8] = "First Senior Master Sergeant"; name[9] = "Chief Master Sergeant"; name[10] = "First Chief Master Sergeant"; name[11] = "Command Chief Master Sergeant"; name[12] = "Chief Master Sergeant of the Air Force"; name[13] = "2nd Lieutenant"; name[14] = "1st Lieutenant"; name[15] = "Captain"; name[16] = "Major"; name[17] = "Lieutenant Colonel"; name[18] = "Colonel"; name[19] = "Brigadier General"; name[20] = "Major General"; name[21] = "Lieutenant General"; name[22] = "General"; name[23] = "General of the ..."; name[24] = "Private"; name[25] = "Private 1st Class"; name[26] = "Specialist"; name[27] = "Corporal"; name[28] = "Sergeant"; name[29] = "Staff Sergeant"; name[30] = "Sergeant First Class"; name[31] = "Master Sergeant"; name[32] = "First Sergeant"; name[33] = "Sergeant Major"; name[34] = "Command Sergeant Major"; name[35] = "Sergeant Major of the Army"; name[36] = "Warrant Officer (W01)"; name[37] = "Chief Warrant Officer (CW2) "; name[38] = "Chief Warrant Officer (CW3)"; name[39] = "Chief Warrant Officer (CW4)"; name[40] = "Chief Warrant Officer (CW5)"; name[41] = "Private First Class"; name[42] = "Lance Corporal"; name[43] = "Corporal"; name[44] = "Sergeant"; name[45] = "Staff Sergeant"; name[46] = "First Sergeant"; name[47] = "Sergeant Major"; name[48] = "Master Gunnery Sergeant"; name[49] = "Warrant Officer (W0)"; name[50] = "Chief Warrant Officer (CW02)"; name[51] = "Chief Warrant Officer (CW03)"; name[52] = "Chief Warrant Officer (CW04)"; name[53] = "Chief Warrant Officer (CW05)"; name[54] = "Seaman Apprentice"; name[55] = "Seaman"; name[56] = "Petty Officer Third Class"; name[57] = "Petty Officer Second Class"; name[58] = "Petty Officer First Class"; name[59] = "Chief Petty Officer"; name[60] = "Second Chief Petty Officer"; name[61] = "Master Chief Petty Officer"; name[62] = "Fleet / Command Master Chief Petty Officer"; name[63] = "Master Chief Petty Officer of the Navy"; name[64] = "Chief Warrant Officer (CW02)"; name[65] = "Chief Warrant Officer (CW03)"; name[66] = "Chief Warrant Officer (CW04)"; var randomname0 = name[randomnumber0]; var randomname1 = name[randomnumber1]; var randomname2 = name[randomnumber2]; var randomname3 = name[randomnumber3]; var randomname4 = name[randomnumber4]; document.write(randomname0+'<br/>'+randomname1+'<br/>'+randomname2+'<br/>'+randomname3+'<br/>'+randomname4+'<br/>') var randomname = new Array(5); randomname[0] = name[randomnumber0]; randomname[1] = name[randomnumber1]; randomname[2] = name[randomnumber2]; randomname[3] = name[randomnumber3]; randomname[4] = name[randomnumber4]; var randomnamenum=Math.floor(Math.random()*4); var final=randomname[randomnamenum]; document.write('<br/><br/><pstyle="text-align:center"><strong>'+final+'</strong></style><br>') </script> </body> Good evening! After spending the last few days wrecking my brain over a simple JavaScript quiz I decided it was time I asked for help. The complete code is right beneath this post. The page will display brief instructions followed by a table containing the quiz. I'm having two rather peculiar problems. The first is with the Score() function which reads as follows: function Score(){ for(i=1;i<=10;i++) if(ans[i]== yourAns[i]) score++; prequiz.score.value= score; } Now unless I'm mistaken (which I am since the score isn't being tabulated correctly) this function essentially uses a for to cycle through both arrays, comparing the user's input against the array containing the right answers. If the contents within index i are the same on both arrays the score increases by one point. Once it cycles through the arrays, it passes score over to prequiz.score.value which will later pass this number to the text box that will display the grade to the user. The problem I'm experiencing is that the score will either be stuck at 2 or will display as 9 (even though all 10 answers were correct). Steps I've taken to try to solve this: Thinking it was the setAnsArray(question, answer) function I added a document.writeline to it. However it showed that the values were being passed correctly to the answer array. Added a document.writeline to the Score() function. Unlike the point above, score always displays as 00000 regardless of how many right answers I provide. The second issue I'm having is that the reset button is not working correctly. If I hit reset and answer the first question, the score will come back as double the score displayed before. Any insight into what is causing this issue is greatly appreciated! Code: <?xml version="1.0" encoding= "utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns= "http://www.w3.org/1999/xhtml"> <head> <title>Pre-Quiz!</title> <script type="text/JavaScript"> var ans= new Array(10); var yourAns= new Array(10); var score= 0; ans[0] = "b"; ans[1] = "c"; ans[2] = "c"; ans[3] = "a"; ans[4] = "d"; ans[5] = "c"; ans[6] = "c"; ans[7] = "a"; ans[8] = "b"; ans[9] = "c"; function setAnsArray(question, answer) { yourAns[question]= answer; } function Score(){ for(i=1;i<=10;i++) if(ans[i]== yourAns[i]) score++; prequiz.score.value= score; } </script> </head> <body> <h1>Pre-Quiz</h1> <p>The following test will allow you to evaluate your knowledge in programming prior to starting the course. After completing the test you will receive a score. Should you have any further doubts feel free to bring them with you on the first day of class.</p> </body> <form name="prequiz" action="JavaScript:Score()"> <center> <input type="submit" name="submit" value="Submit"> <input type="reset" name="reset" value= "Reset" /><br><br> </center> <b>Sco </b><input type="text" name="score" disabled=true><br> <hr> <center><table border="3" width="65%" summary= "Questions and options are organized in a table."> <thead> <tr> <th>Question</th> <th>Options</th> </tr> </thead> <tbody> <tr> <td><b>1. The following parameter code is used in which control structure?</b><br> (int i=0; i<= size; i++)<br> </td> <td><input type="radio" name="q1" value="a" onClick="setAnsArray(1, this.value)">a. If<br> <input type="radio" name="q1" value="b" onClick="setAnsArray(1, this.value)">b. For<br> <input type="radio" name="q1" value="c" onClick="setAnsArray(1, this.value)">c. Do-while<br> <input type="radio" name="q1" value="d" onClick="setAnsArray(1, this.value)">d. While</td> </tr> <tr> <td><b>2. What does the command "cout" do?</b><br></td> <td><input type="radio" name="q2" value="a" onClick="setAnsArray(2, this.value)">a. Obtains information from the user.<br> <input type="radio" name="q2" value="b" onClick="setAnsArray(2, this.value)">b. Closes the window.<br> <input type="radio" name="q2" value="c" onClick="setAnsArray(2, this.value)">c. Displays on screen.<br> <input type="radio" name="q2" value="d" onClick="setAnsArray(2, this.value)">d. Pauses a process.</td> </tr> <tr> <td><b>3. What is the origin of name Python? (referring to the programming language)</b><br></td> <td><input type="radio" name="q3" value="a" onClick="setAnsArray(3, this.value)">a. Creator had a pet python.<br> <input type="radio" name="q3" value="b" onClick="setAnsArray(3, this.value)">b. Named after a student of Plato.<br> <input type="radio" name="q3" value="c" onClick="setAnsArray(3, this.value)">c. Named after Monty Python's Flying Circus.<br> <input type="radio" name="q3" value="d" onClick="setAnsArray(3, this.value)">d. Creator was a fan of Greek mythology.</td> </tr> <tr> <td><b>4. What does HTML stand for?</b><br></td> <td><input type="radio" name="q4" value="a" onClick="setAnsArray(4, this.value)">a. HyperText Markup Language<br> <input type="radio" name="q4" value="b" onClick="setAnsArray(4, this.value)">b. Hyper Tools for Managing Languages<br> <input type="radio" name="q4" value="c" onClick="setAnsArray(4, this.value)">c. Heap Text Manager Lead<br> <input type="radio" name="q4" value="d" onClick="setAnsArray(4, this.value)">d. Horde Take Much Lore</td> </tr> <tr> <td><b>5. Who invented JavaScript?</b><br></td> <td><input type="radio" name="q5" value="a" onClick="setAnsArray(5, this.value)">a. Bill Gates<br> <input type="radio" name="q5" value="b" onClick="setAnsArray(5, this.value)">b. Isaac Newton<br> <input type="radio" name="q5" value="c" onClick="setAnsArray(5, this.value)">c. Elvis Java<br> <input type="radio" name="q5" value="d" onClick="setAnsArray(5, this.value)">d. Netscape</td> </tr> <tr> <td><b>6. What is a variable?</b><br></td> <td><input type="radio" name="q6" value="a" onClick="setAnsArray(6, this.value)">a. An unknown.<br> <input type="radio" name="q6" value="b" onClick="setAnsArray(6, this.value)">b. A value that changes.<br> <input type="radio" name="q6" value="c" onClick="setAnsArray(6, this.value)">c. The name for a place in the computer's memory where a certain data is stored.<br> <input type="radio" name="q6" value="d" onClick="setAnsArray(6, this.value)">d. Part of an algebraic expression.</td> </tr> <tr> <td><b>7. What is a compiler?</b><br></td> <td><input type="radio" name="q7" value="a" onClick="setAnsArray(7, this.value)">a. Converts the target file into a .zip .<br> <input type="radio" name="q7" value="b" onClick="setAnsArray(7, this.value)">b. Gathers all documents in one.<br> <input type="radio" name="q7" value="c" onClick="setAnsArray(7, this.value)">c. A program or set of programs that transforms source code from programming language into another computer language.<br> <input type="radio" name="q7" value="d" onClick="setAnsArray(7, this.value)">d. Secret ingridient in KFC's chicken</td> </tr> <tr> <td><b>8. Define portability:</b><br></td> <td><input type="radio" name="q8" value="a" onClick="setAnsArray(8, this.value)">a. Characteristic attributed to a program if it can be used in another OS different from the one it was created in without requiring major rework.<br> <input type="radio" name="q8" value="b" onClick="setAnsArray(8, this.value)">b. Ease to transport the program's disks.<br> <input type="radio" name="q8" value="c" onClick="setAnsArray(8, this.value)">c. How big the size of the program is.<br> <input type="radio" name="q8" value="d" onClick="setAnsArray(8, this.value)">d. Time required to download a program.</td> </tr> <tr> <td><b>9. What is an executable file?</b><br></td> <td><input type="radio" name="q9" value="a" onClick="setAnsArray(9, this.value)">a. A text document containing code.<br> <input type="radio" name="q9" value="b" onClick="setAnsArray(9, this.value)">b. A file in a format the computar can directly execute.<br> <input type="radio" name="q9" value="c" onClick="setAnsArray(9, this.value)">c. A virus.<br> <input type="radio" name="q9" value="d" onClick="setAnsArray(9, this.value)">d. A malicious program.</td> </tr> <tr> <td><b>10. Which of the following is not a programming language? </b><br></td> <td><input type="radio" name="q10" value="a" onClick="setAnsArray(10, this.value)">a. HTML<br> <input type="radio" name="q10" value="b" onClick="setAnsArray(10, this.value)">b. Lua<br> <input type="radio" name="q10" value="c" onClick="setAnsArray(10, this.value)">c. Moolah<br> <input type="radio" name="q10" value="d" onClick="setAnsArray(10, this.value)">d. C++</td> </tr> </tbody> </table></center> </form> </html> I am working with the quiz found below (Multiple Choice Quiz that is instantly graded/checked), and would like to add pictures to the questions and rollover sound effects. I have figured how to add the picture, but not the sound. Sound effects are played when added to the html section, but not when added to the javascript coding. I am alright with html and css, but not with javascript. Any help from the javascript experts would be appreciated. ********* Coding Example ********* <HTML> <HEAD> <TITLE>The JavaScript Source: Miscellaneous : Multiple Choice Quiz</TITLE> <META HTTP-EQUIV="The JavaScript Source" CONTENT = "no-cache"> <META NAME="description" CONTENT="Add a quiz to your Web page without using a server-side script. Easy to set-up. Questions and answers are stored in a multi-dimensional array format in an external file. The quiz is marked in real time, and once answered, questions are set to read-only. A summary of the users score is alerted at the end."> <META NAME="date" CONTENT="2005-12-27"> <META NAME="channel" CONTENT="Developer"> <META NAME="author" CONTENT="James Crooke"> <META NAME="section" CONTENT="Miscellaneous"> <style type="text/css"> <!-- .question { color:darkblue; font-size:14px; font-weight:bold; } --> </style> <script type="text/javascript"> <!-- /* This script and many more are available free online at The JavaScript Source :: http://javascript.internet.com Created by: James Crooke :: http://www.cj-design.com */ var useranswers = new Array(); var answered = 0; function renderQuiz() { for(i=0;i<questions.length;i++) { document.writeln('<p class="question">' + questions[i] + ' <span id="result_' + i + '"><img src="blank.gif" style="border:0" alt="" /></span></p>'); for(j=0;j<choices[i].length;j++) { document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[i][j] + '" id="answer_' + i + '_' + j + '" class="question_' + i + '" onclick="submitAnswer(' + i + ', this, \'question_' + i + '\', \'label_' + i + '_' + j + '\')" /><label id="label_' + i + '_' + j + '" for="answer_' + i + '_' + j + '"> ' + choices[i][j] + '</label><br />'); } } document.writeln('<p><input type="submit" value="Show Score" onclick="showScore()" /> <input type="submit" value="Reset Quiz" onclick="resetQuiz(true)" /></p><p style="display:none"><img src="correct.gif" style="border:0" alt="Correct!" /><img src="incorrect.gif" style="border:0" alt="Incorrect!" /></p>'); } function resetQuiz(showConfirm) { if(showConfirm) if(!confirm("Are you sure you want to reset your answers and start from the beginning?")) return false; document.location = document.location; } function submitAnswer(questionId, obj, classId, labelId) { useranswers[questionId] = obj.value; document.getElementById(labelId).style.color = "grey"; //disableQuestion(classId); showResult(questionId); answered++; } function showResult(questionId) { if(answers[questionId] == useranswers[questionId]) { document.getElementById('result_' + questionId).innerHTML = '<img src="correct.gif" style="border:0" alt="Correct!" />'; // I tried to make the background a different colour for the answer document.getElementById(questionId).style.border ='1px'; } else { document.getElementById('result_' + questionId).innerHTML = '<img src="incorrect.gif" style="border:0" alt="Incorrect!" />'; } } function showScore() { if(answered != answers.length) { alert("You have not answered all of the questions yet!"); return false; } questionCount = answers.length; correct = 0; incorrect = 0; for(i=0;i<questionCount;i++) { if(useranswers[i] == answers[i]) correct++; else incorrect++; } pc = Math.round((correct / questionCount) * 100); alertMsg = "You scored " + correct + " out of " + questionCount + "\n\n"; alertMsg += "You correctly answered " + pc + "% of the questions! \n\n"; if(pc == 100) alertMsg += response[0]; else if(pc >= 90) alertMsg += response[1]; else if(pc >= 70) alertMsg += response[2]; else if(pc > 50) alertMsg += response[3]; else if(pc >= 40) alertMsg += response[4]; else if(pc >= 20) alertMsg += response[5]; else if(pc >= 10) alertMsg += response[6]; else alertMsg += response[7]; if(pc < 100) { if(confirm(alertMsg)) resetQuiz(false); else return false; } else { alert(alertMsg); } } function disableQuestion(classId) { var alltags=document.all? document.all : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++) { if (alltags[i].className == classId) { alltags[i].disabled = true; } } } var questions = new Array(); var choices = new Array(); var answers = new Array(); var response = new Array(); // To add more questions, just follow the format below. questions[0] = "1) JavaScript is ..." ; choices[0] = new Array(); choices[0][0] = "the same as Java"; choices[0][1] = "kind of like Java"; choices[0][2] = "different than Java"; choices[0][3] = "ther written part of Java"; answers[0] = choices[0][2]; ///////// THIS IS THE SECTION THAT I'M TRYING TO WORK ON ///////// // image works, but sound doesn't // questions[1] = "<a href='javascriptHTMLSound' id='dummyspan' // the smiley is actually a colon followed by a D as in "DHTML" onMouseOver='DHTMLSound('success.wav')'><img src='some_image.gif'></a>"; choices[1] = new Array(); choices[1][0] = "Play This" + "<a href='javascriptlaySound('success.wav')'>Play This</a>"; choices[1][1] = "objective"; choices[1][2] = "evil"; choices[1][3] = "object based"; answers[1] = choices[1][3]; ///////////////////////////////////////////////////////////////// questions[2] = "3) To comment out a line in JavaScript ..."; choices[2] = new Array(); choices[2][0] = "Precede it with two forward slashes, i.e. '//'"; choices[2][1] = "Precede it with an asterisk and a forward slash, i.e. '*/'"; choices[2][2] = "Precede it with an asterisk, i.e. '*'"; choices[2][3] = "Precede it with a forward slash and an asterisk, i.e. '/*'"; answers[2] = choices[2][0]; questions[3] = "4) JavaScript can only run on Windows"; choices[3] = new Array(); choices[3][0] = "True"; choices[3][1] = "False"; answers[3] = choices[3][1]; questions[4] = "5) Semicolons are optional at the end of a JavaScript statement."; choices[4] = new Array(); choices[4][0] = "True"; choices[4][1] = "False"; answers[4] = choices[4][0]; questions[5] = "strings are..."; choices[5] = new Array(); choices[5][0] = "strings, numbers, BooBoos, and nulls"; choices[5][1] = "strings, text, Booleans, and nulls"; choices[5][2] = "strings, numbers, Booleans, and nulls"; choices[5][3] = "strings, numbers, Booleans, and zeros"; answers[5] = choices[5][2]; // response for getting 100% response[0] = "Excellent, top marks!"; // response for getting 90% or more response[1] = "Excellent, try again to get 100%!" // response for getting 70% or more response[2] = "Well done, that is a good score, can you do better?"; // response for getting over 50% response[3] = "Nice one, you got more than half of the questions right, can you do better?"; // response for getting 40% or more response[4] = "You got some questions right, you can do better!"; // response for getting 20% or more response[5] = "You didn't do too well, why not try again!?"; // response for getting 10% or more response[6] = "That was pretty poor! Try again to improve!"; // response for getting 9% or less response[7] = "Oh dear, I think you need to go back to school (or try again)!"; //--> </script> </HEAD> <BODY BGCOLOR=#ffffff vlink=#0000ff > <script> function DHTMLSound(surl) { document.getElementById("dummyspan").innerHTML="<embed src='"+surl+"' hidden=true autostart=true loop=false>"; } </script> <script type="text/javascript"> <!-- renderQuiz(); //--> </script> </body></html> ********* I have also tried the following sound ideas, but none work "within" the javascript -- they do work when assigned to a button inside the html however... The trick is, I want to be able to display an image within the question, then mouseover a <span> of text or an image (preferrably NOT a link <a>) and have the sounds played as part of the choices for the question. For a slightly different purpose, I'm also interested in being able to have the correst answer (for more complicated quizes) appear beside the question, in a <div> if possible, rather than an alert, to give the solution / reasoning for the correct answer. Any help at all would be really appreciated. Hi! I'm trying to make a multiple choice quiz using javascript. I downloaded codes from http://www.javascriptkit.com/script/cut180.shtml But when I used it nothing comes up on the results (number of correct answer, number of wrong answer and percentage) as well as the solution box is empty. I tried it on Google Chrome and it says "Your browser does not accept cookies. Please adjust your settings." So I tried it in Safari because that's what we use in school and it doesn't work. The results and solution box is empty. I am guessing that problem is with cookies? Please help me. Here are my codes: - Quiz //Enter total number of questions: var totalquestions=10 //Enter the solutions corresponding to each question: var correctchoices=new Array() correctchoices[1]='a' //question 1 solution correctchoices[2]='d' //question 2 solution, and so on. correctchoices[3]='b' correctchoices[4]='b' correctchoices[5]='c' correctchoices[6]='b' correctchoices[7]='a' correctchoices[8]='c' correctchoices[9]='d' correctchoices[10]='b' /////Don't edit beyond here////////////////////////// function gradeit(){ var incorrect=null for (q=1;q<=totalquestions;q++){ var thequestion=eval("document.myquiz.question"+q) for (c=0;c<thequestion.length;c++){ if (thequestion[c].checked==true) actualchoices[q]=thequestion[c].value } if (actualchoices[q]!=correctchoices[q]){ //process an incorrect choice if (incorrect==null) incorrect=q else incorrect+="/"+q } } if (incorrect==null) incorrect="a/b" document.cookie='q='+incorrect if (document.cookie=='') alert("Your browser does not accept cookies. Please adjust your browser settings.") else window.location="results.htm" } function showsolution(){ var win2=window.open("","win2","width=200,height=350, scrollbars") win2.focus() win2.document.open() win2.document.write('<title>Solution</title>') win2.document.write('<body bgcolor="#FFFFFF">') win2.document.write('<center><h3>Solution to Quiz</h3></center>') win2.document.write('<center><font face="Arial">') for (i=1;i<=totalquestions;i++){ for (temp=0;temp<incorrect.length;temp++){ if (i==incorrect[temp]) wrong=1 } if (wrong==1){ win2.document.write("Question "+i+"="+correctchoices[i].fontcolor("red")+"<br>") wrong=0 } else win2.document.write("Question "+i+"="+correctchoices[i]+"<br>") } win2.document.write('</center></font>') win2.document.close() } ______________________________________________________________ For Results <html> <head> <title>Instant Quiz Results</title> </head> <body bgcolor="#FFFFFF"> <p align="center"><strong><font face="Arial"> <script src="quizconfig.js"> </script>Quiz Results Summary</font></strong></p> <div align="center"><center> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form method="POST" name="result"><table border="0" width="100%" cellpadding="0" height="116"> <tr> <td height="25" bgcolor="#D3FFA8"><strong><font face="Arial">Number Of Correct Questions:</font></strong></td> <td height="25"><p><input type="text" name="p" size="24"></td> </tr> <tr> <td height="17" bgcolor="#D3FFA8"><strong><font face="Arial">Wrong Questions:</font></strong></td> <td height="17"><p><textarea name="T2" rows="3" cols="24" wrap="virtual"></textarea></td> </tr> <tr> <td height="25" bgcolor="#D3FFA8"><strong><font face="Arial">Grade Percentage:</font></strong></td> <td height="25"><input type="text" name="q" size="8"></td> </tr> </table> </form> </td> </tr> </table> </center></div> <form method="POST"><div align="center"><center><p> <script> var wrong=0 for (e=0;e<=2;e++) document.result[e].value="" var results=document.cookie.split(";") for (n=0;n<=results.length-1;n++){ if (results[n].charAt(1)=='q') parse=n } var incorrect=results[parse].split("=") incorrect=incorrect[1].split("/") if (incorrect[incorrect.length-1]=='b') incorrect="" document.result[0].value=totalquestions-incorrect.length+" out of "+totalquestions document.result[2].value=(totalquestions-incorrect.length)/totalquestions*100+"%" for (temp=0;temp<incorrect.length;temp++) document.result[1].value+=incorrect[temp]+", " </script> <input type="button" value="Retake Quiz" name="B1" onClick="history.go(-1)"> <input type="button" value="Show Solution" name="B2" onClick="showsolution()"></p> </center></div> </form> </body> </html> Please help me. I've been trying to find out what is wrong with my codes for a week. Thanks in advance! Hi I have create a website where many features do not support IE versions, Can someone help me on javascript code that can alert the user to use Netscape to access my website.. I mean Javscript alert code that will recommend the user to use netscape to access my website .. Any help will be much appreciated Hi Guy's, Hope I'm posting in right forum I haven't been here for years I have a program that allows us to insert an alert box on our website triggered by the no right click....... Now we just insert text because the program allows us to but I want to use "&" this is going into a Javascript and it comes out as "&" I know JS uses ampersand I have tried all methods of putting this in but just get & etc...... Any chance someone knows otherwise plz?? Frank Hi I'm making a php/html page and using javascript to keep a count for me. Code: <script type="text/javascript"> var i=0; }</script> . . . <form action="index.php" method="GET"> <input name="game_button" id="guess1" type = "submit" name="1" value="1" style="height: 50; width: 50; font-size: 16" onClick = "i=i+1;"/> </form> <input type="button" onClick = "alert(i);"/> The last button is just a test button, which will tell me what the value of "i" is, but I'm not getting anything when I cllick that button. However if I change the onClick from alert(i), to alert('i') it will alert me a string, so I know the javascript is working. Any ideas? |