www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript Quiz

  1. #1
    Join Date
    Nov 2011
    Posts
    1

    Post Javascript Quiz

    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!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles