Pop Quizzer

Introduction

The Pop Quizzer allows for question and answers to be easily added to a variable. These values are then presented to the user to choose from one question at a time. Minimal editing required to get script up and working.

Demonstration

Code

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Pop Quizzer</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <script language="javascript" type="text/javascript"> // // Pop Quizzer 3.0 // Some Rights Reserved // http://webdeveloper.50webs.com // var numQuestions = "5"; // How many questions are there? var setWrongAlarm = "Y" // Show alert for each wrong answer ["Y" / "N"] var Question = new Array(numQuestions); var AnswerA = new Array(numQuestions); var AnswerB = new Array(numQuestions); var AnswerC = new Array(numQuestions); var AnswerD = new Array(numQuestions); var CorrectAnswer = new Array(numQuestions); // Questions, and Answers [from 0 - x] Question[0] = "What color starts with the letter B ?"; AnswerA[0] = "Black"; AnswerB[0] = "Red"; AnswerC[0] = "Green"; AnswerD[0] = "Yellow"; CorrectAnswer[0] = "A"; Question[1] = "What color starts with the letter R ?"; AnswerA[1] = "Black"; AnswerB[1] = "Red"; AnswerC[1] = "Green"; AnswerD[1] = "Yellow"; CorrectAnswer[1] = "B"; Question[2] = "What color starts with the letter G ?"; AnswerA[2] = "Black"; AnswerB[2] = "Red"; AnswerC[2] = "Green"; AnswerD[2] = "Yellow"; CorrectAnswer[2] = "C"; Question[3] = "What color starts with the letter Y ?"; AnswerA[3] = "Black"; AnswerB[3] = "Red"; AnswerC[3] = "Green"; AnswerD[3] = "Yellow"; CorrectAnswer[3] = "D"; Question[4] = "What color starts with the letter P ?"; AnswerA[4] = "Black"; AnswerB[4] = "Red"; AnswerC[4] = "Green"; AnswerD[4] = "Purple"; CorrectAnswer[4] = "D"; // End of editing var i= -1 //Question var j= 0 //Correct var k= 0 //Wrong var l= 0 //Review var m= 0 //Null function QAupdate() { i = i + 1 correctNull(); //Check for no data in expected places document.getElementById('btnCMD').value = "Submit Answer"; document.getElementById('btnRestart').disabled = false; if (i >= (numQuestions - 1)) {document.getElementById('btnCMD').value = "Grade Quiz";} if (i > 0) { if (document.quiz.answer[0].checked == true) { if (document.getElementById('A1').value == "Y") {j = j+1} if (document.getElementById('A1').value == "N") {k = k+1} if ((setWrongAlarm == "Y") && (document.getElementById('A1').value == "N")) { alert("The correct answer is: " + CorrectAnswer[i-1] + ".");} } if (document.quiz.answer[1].checked == true) { if (document.getElementById('A2').value == "Y") {j = j+1} if (document.getElementById('A2').value == "N") {k = k+1} if ((setWrongAlarm == "Y") && (document.getElementById('A2').value == "N")) { alert("The correct answer is: " + CorrectAnswer[i-1] + ".");} } if (document.quiz.answer[2].checked == true) { if (document.getElementById('A3').value == "Y") {j = j+1} if (document.getElementById('A3').value == "N") {k = k+1} if ((setWrongAlarm == "Y") && (document.getElementById('A3').value == "N")) { alert("The correct answer is: " + CorrectAnswer[i-1] + ".");} } if (document.quiz.answer[3].checked == true) { if (document.getElementById('A4').value == "Y") {j = j+1} if (document.getElementById('A4').value == "N") {k = k+1} if ((setWrongAlarm == "Y") && (document.getElementById('A4').value == "N")) { alert("The correct answer is: " + CorrectAnswer[i-1] + ".");} } } correctReset(); if (i < numQuestions) { document.getElementById('question_txt').innerHTML = Question[i]; document.getElementById('answer_txt_1').innerHTML = AnswerA[i]; document.getElementById('answer_txt_2').innerHTML = AnswerB[i]; document.getElementById('answer_txt_3').innerHTML = AnswerC[i]; document.getElementById('answer_txt_4').innerHTML = AnswerD[i]; } if ((i + 1) > numQuestions) { dispGrade(); } } function correctReset() { document.getElementById('A1').value = "N"; document.getElementById('A2').value = "N"; document.getElementById('A3').value = "N"; document.getElementById('A4').value = "N"; if (CorrectAnswer[i] == "A") {document.getElementById('A1').value = "Y";} if (CorrectAnswer[i] == "B") {document.getElementById('A2').value = "Y";} if (CorrectAnswer[i] == "C") {document.getElementById('A3').value = "Y";} if (CorrectAnswer[i] == "D") {document.getElementById('A4').value = "Y";} } function correctNull() { //Error checking function var givePT = "N"; if ((i-1) > 0) { if (Question[i-1] == null) {alert("ERROR: No value set for Question[" +i+ "]");givePT = "Y"} if (AnswerA[i-1] == null) {alert("ERROR: No value set for AnswerA[" +i+ "]");givePT = "Y"} if (AnswerB[i-1] == null) {alert("ERROR: No value set for AnswerB[" +i+ "]");givePT = "Y"} if (AnswerC[i-1] == null) {alert("ERROR: No value set for AnswerC[" +i+ "]");givePT = "Y"} if (AnswerD[i-1] == null) {alert("ERROR: No value set for AnswerD[" +i+ "]");givePT = "Y"} if (CorrectAnswer[i-1] == null) {alert("ERROR: No value set for CorrectAnswer[" +i+ "]");givePT = "Y"} if (i > numQuestions) { if (Question[i] == null) {alert("ERROR: A value is set for Question[" +i+ "], but numQuestions is not correct.");givePT = "N"} if (AnswerA[i] == null) {alert("ERROR: A value is set for AnswerA[" +i+ "], but numQuestions is not correct.");givePT = "N"} if (AnswerB[i] == null) {alert("ERROR: A value is set for AnswerB[" +i+ "], but numQuestions is not correct.");givePT = "N"} if (AnswerC[i] == null) {alert("ERROR: A value is set for AnswerC[" +i+ "], but numQuestions is not correct.");givePT = "N"} if (AnswerD[i] == null) {alert("ERROR: A value is set for AnswerD[" +i+ "], but numQuestions is not correct.");givePT = "N"} if (CorrectAnswer[i-1] == null) {alert("ERROR: A value is set for CorrectAnswer[" +i+ "], but numQuestions is not correct.");givePT = "N"} } if (givePT == "Y") {j = j+1;k = k-1;alert("This question will be scored as correct.");} } } function dispGrade() { var calcGrade = new String((j / numQuestions) * 100); var mGrade = calcGrade.slice(0, 4); document.getElementById('question_txt').innerHTML = "Your test has been graded"; document.getElementById('answer_txt_1').innerHTML = "Number of questions: " + numQuestions; document.getElementById('answer_txt_2').innerHTML = "Number correct: " + j; document.getElementById('answer_txt_3').innerHTML = "Number wrong: " + k; document.getElementById('answer_txt_4').innerHTML = "Grade: " + mGrade + "%"; document.getElementById('btnCMD').disabled = true; document.getElementById('btnAnswers').disabled = false; } function dispAnswers() { var tSpace = " " document.getElementById('QA_space').innerHTML = "<b>Questions/Answers</b><br /><br />" //Clear cache l=0 //Resets for DBL Click while (l < numQuestions) { document.getElementById('QA_space').innerHTML += "" +(l+1)+ ". " + Question[l] + "<br />" document.getElementById('QA_space').innerHTML += "" +tSpace+ "Correct Answer: " if (CorrectAnswer[l] == "A") {document.getElementById('QA_space').innerHTML += AnswerA[l]} if (CorrectAnswer[l] == "B") {document.getElementById('QA_space').innerHTML += AnswerB[l]} if (CorrectAnswer[l] == "C") {document.getElementById('QA_space').innerHTML += AnswerC[l]} if (CorrectAnswer[l] == "D") {document.getElementById('QA_space').innerHTML += AnswerD[l]} document.getElementById('QA_space').innerHTML += "<br />" l = l+1; } } </script> <form name="quiz"> <table border="0" cellspacing="0" cellpadding="1" width="400"> <tr> <td> <table width="400" border="0" cellpadding="1" cellspacing="5" bgcolor="#9FB8FF"> <tr> <td><div id="question_txt"></div></td> </tr> <tr> <td bgcolor="#FFFFFF"> <table width="100%" border="0" cellspacing="0" cellpadding="5"> <tr valign="top"> <td> <input type="radio" name="answer" id="A1" value="N" checked="checked" /> </td> <td width="100%"><div id="answer_txt_1">Pop Quizzer [v.3]</div></td> </tr> <tr valign="top"> <td> <input type="radio" name="answer" id="A2" value="N" /></td> <td width="100%"><div id="answer_txt_2">© 2006 Web Developer</div></td> </tr> <tr valign="top"> <td> <input type="radio" name="answer" id="A3" value="N" /></td> <td width="100%"><div id="answer_txt_3">Some Rights Reserved</div></td> </tr> <tr valign="top"> <td> <input type="radio" name="answer" id="A4" value="N" /></td> <td width="100%"><div id="answer_txt_4"><a href="http://webdeveloper.50webs.com">http://webdeveloper.50webs.com</a></div></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td align="right"> <input type="button" id="btnAnswers" value="Review Q&A" disabled="disabled" onclick="dispAnswers();" /> <input name="button" type="button" id="btnRestart" disabled="disabled" onclick="history.go(0);" value="Restart" /> <input type="button" id="btnCMD" value="Start Quiz" onclick="QAupdate();" /></td> </tr> <tr> <td> </td> </tr> <tr> <td><div id="QA_space"></div></td> </tr> </table> </form> </body> </html>

Get and View Page Updates

Previous Versions

Report an Error | Return to Top