Javascript Quiz

**rikidb1987** · 11-29-2011 07:28 AM

I've seen a lot of JS quizzes around the web and I think that they're much more convenient to visitors than using other services such as those commercial quizmakers found in the web.

I tried researching for simple ways to integrate a quiz using javascript in my blog but I can't seem to work it out and it's somehow frustrating me. I don't want to pay for commercial quizmakers because I know there are easier ways around.

So what I'm looking for is a JS code for a quiz I'm trying to make. A multiple-choice type where quiztakers will be able to see 1 item in the blog post/page (containing a question and 4 choices) and a next button. When the quiztakers presses the next button, he will be taken to the 2nd item and so forth until, let's say 20. At the end of the quiz, there will be a button of finish and if he clicks on that button, he will be redirected to a page where he will see the correct answers and some explanation of the answers.

I hope that makes sense.

I just need a very simple script.

Just to let you know, I'm an amateur blogger and hasn't really studied all these stuffs professionally. Anything that will help will be greatly appreciated. Thanks!

**JMRKER** · 11-29-2011 06:53 PM

While this is not the most efficient way to do this, it is simple and easy to modify.

Code:

<html>
<HEAD>
<title>JS Quiz</title>
<style type="text/css">
.questionBlock { display:none; }
</style>

<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=232698
// Modified for: http://www.webdeveloper.com/forum/showthread.php?t=253981

var answers = new Array(10);        // Number of questions displayed in the answer area
answers[0] = "Brazil"; //Answers to Questions
answers[1] = "Uruguay";
answers[2] = "Jules Rimet Trophy";
answers[3] = "1966";
answers[4] = "Angola";
answers[5] = "Cafu";
answers[6] = "7";
answers[7] = "Jabulani";
answers[8] = "Zidane";
answers[9] = "Waddle";

var currentQues = 0;			//Current question to display
var numQues = answers.length;	//Number of Questions
var numChoi = 3;	        	//How many possible answers

function getScore(form) {
 var score = 0;													// initialize score
 var currElt;													// initialize variables
 var currSelection;
 for (i=0; i<numQues; i++) {									// check all questions
  currElt = i*numChoi;											// form element to check 
  for (j=0; j<numChoi; j++) {									// check each choice of question
   currSelection = form.elements[currElt + j];					// form element to test if checked
   if (currSelection.checked) {									// true if checked
    if (currSelection.value == answers[i]) { 					// then compare checked value to answer
	  score++;													// if match, then increment score value
      break; }	  	      										// ttop check as match has been found
   }
  }
 }
 
/* following is un-necessary unless you want to see answer
  var correctAnswers = '';
  for (var i=1; i<=numQues; i++) { 
    correctAnswers += i + ". " + answers[i-1] + "\r\n";
  }
  alert(correctAnswers);
*/

 score = Math.round(score/numQues*100); 						// Works out percentage
 form.percentage.value = score + "&#37;";							// display score value
 return false;										// make form NOT reset the page
}
function clearQuestions() {
  var sel = document.getElementById('questionBlock').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) {
	document.getElementById(sel[i].id).style.display = 'none';
  }
}
function nextQuestion() {
  clearQuestions();
  document.getElementById('q'+(currentQues+1)).style.display = 'block'; 
  currentQues++;  if (currentQues > numQues) { currentQues--; }
}
 </script>

</HEAD>
<BODY>
<h3>World Cup Quiz</h3>

<form name="quiz" onsubmit="return getScore(this)">
<div id="questionBlock">
<div id="q1" class="questionBlock">
1. Who has won the World Cup the Most?
 <ul style="margin-top: 1pt">
  <li><label><input type="radio" name="q1" value="Brazil">Brazil</label></li>
  <li><label><input type="radio" name="q1" value="Argentina">Argentina</label></li>
  <li><label><input type="radio" name="q1" value="Italy">Italy</label></li>
 </ul>
</div>

<div id="q2" class="questionBlock">
2. First team to win the World Cup?
 <ul style="margin-top: 1pt">
  <li><label><input type="radio" name="q2" value="England">England</label></li>
  <li><label><input type="radio" name="q2" value="Italy">Italy</label></li>
  <li><label><input type="radio" name="q2" value="Uruguay">Uruguay</label></li>
 </ul>
</div>

<div id="q3" class="questionBlock">
3. Original World Cup Trophy Name?
 <ul style="margin-top: 1pt">
  <li><label><input type="radio" name="q3" value="FIFA World Cup">FIFA World Cup</label></li>
  <li><label><input type="radio" name="q3" value="World Cup Trophy">World Cup Trophy</label></li>
  <li><label><input type="radio" name="q3" value="Jules Rimet Trophy">Jules Rimet Trophy</label></li>
 </ul>
</div>

<div id="q4" class="questionBlock">
4.When did England win the World Cup?
 <ul style="margin-top: 1pt">
  <li><label><input type="radio" name="q4" value="1966">1966</label></li>
  <li><label><input type="radio" name="q4" value="1970">1970</label></li>
  <li><label><input type="radio" name="q4" value="1974">1974</label></li>
 </ul>
</div>

<div id="q5" class="questionBlock">
5.Fewest goals conceded in the World Cup?
 <ul style="margin-top: 1pt">
  <li><label><input type="radio" name="q5" value="Angola">Angola</label></li>
  <li><label><input type="radio" name="q5" value="Ivory Coast">Ivory Coast</label></li>
  <li><label><input type="radio" name="q5" value="Canada">Canada</label></li>
 </ul>
</div>

<div id="q6" class="questionBlock">
6.Who's played in the most World Cups?
 <ul style="margin-top: 1pt">
  <li><label><input type="radio" name="q6" value="Beckham">Beckham</label></li>
  <li><label><input type="radio" name="q6" value="Cafu">Cafu</label></li>
  <li><label><input type="radio" name="q6" value="Neville">Neville</label></li>
 </ul>
</div>

<div id="q7" class="questionBlock">
7.In a penalty shootout how many goals have England missed?
 <ul style="margin-top: 1pt">
  <li><label><input type="radio" name="q7" value="5">5</label></li>
  <li><label><input type="radio" name="q7" value="6">6</label></li>
  <li><label><input type="radio" name="q7" value="7">7</label></li>
 </ul>
</div>

<div id="q8" class="questionBlock">
8.Name of the World Cup Ball?
 <ul style="margin-top: 1pt">
  <li><label><input type="radio" name="q8" value="Nike T90">Nike T90</label></li>
  <li><label><input type="radio" name="q8" value="Jabulani">Jabulani</label></li>
  <li><label><input type="radio" name="q8" value="Mitre">Mitre</label></li>
 </ul>
</div>

<div id="q9" class="questionBlock">
9.Who got sent off in the last World Cup Final?
 <ul style="margin-top: 1pt">
  <li><label><input type="radio" name="q9" value="Zidane">Zidane</label></li>
  <li><label><input type="radio" name="q9" value="Materazzi">Materazzi</label></li>
  <li><label><input type="radio" name="q9" value="Henry">Henry</label></li>
 </ul>
</div>

<div id="q10" class="questionBlock">
10.Who missed the 1990 World Cup shootout for England?
 <ul style="margin-top: 1pt">
  <li><label><input type="radio" name="q10" value="Lineker">Lineker</label></li>
  <li><label><input type="radio" name="q10" value="Waddle">Waddle</label></li>
  <li><label><input type="radio" name="q10" value="Beardsley">Beardsley </label></li>
 </ul>
</div>

<div id="q11" class="questionBlock">
<input type="submit" value="Submit">
Score = <strong><input type="text" size="5" name="percentage" disabled></strong>
</div>

<button onclick="nextQuestion()">Next Question</button>
</div>
</form>
</body>
</html>

Thread: Javascript Quiz

Thread Tools

Display

Javascript Quiz

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions