Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    please help if there is any way to cosolidate the code

    I'm kinda new here. I'm working on a javascript quiz and just finished a template. The code works fine but I don't think it's the best way to do that. How can I consolidate the code so if there are like 100 questions, I don't need to delicate all the functions? Thanks for any help!

    Code:
    <html>
    <head>
    <title>simple quiz test</title>
    </head>
    <script type = "text/javascript">
    
    function firstAnswer()
    {
        for (i=0 ; i<document.first.quiz.length ; i++)
        {
        	if (document.first.quiz[i].checked==true) 
        	{
        		var t = document.first.quiz[i].value
        	}
        }
    
    	if (t == "1" )
     	{ 
     	 	var item = document.getElementById("two");
    	 	if (item) {
     			item.className=(item.className=='hidden')?'unhidden':'hidden';
     		}
    
     		var item = document.getElementById("one");
     		if (item) {
     			item.className=(item.className=='unhidden')?'hidden':'unhidden';
     		}
      	}
    	else  { 
      		alert("Your answer is wrong, try again");
    	}
    }
    
    function secondAnswer()
    {
    
        for (i=0 ; i<document.second.quiz.length ; i++)
        {
    		if (document.second.quiz[i].checked==true) 
        	{
        		var t = document.second.quiz[i].value
        	}
    	}
    
    	if (t == "2" )
    	{ 
      		var item = document.getElementById("three");
      		if (item) {
      			item.className=(item.className=='hidden')?'unhidden':'hidden';
      		}
    
      		var item = document.getElementById("two");
      		if (item) {
      			item.className=(item.className=='unhidden')?'hidden':'unhidden';
      		}
      	}
    	else  { 
     		alert("Your answer is wrong, try again");
    	} 
    }
    
    function thirdAnswer()
    {
    	for (i=0 ; i<document.third.quiz.length ; i++)
        {
    		if (document.third.quiz[i].checked==true) 
    		{
    			var t = document.third.quiz[i].value;
    		}
    	}
    
    	if (t == "1" )
     	{ 
      		document.getElementById("three").innerHTML="Finish";
      	}
    	else  { 
       		alert("Your answer is wrong, try again");
    	}	 
    }
    
    </script>
    </head>
    
    <body>
    <div id = "one" class = "unhidden">
      <form name = "first"  >
        1) who developed this script ?</br>
        </br>
        <input type = "radio" id = "a" value = "1" name = "quiz" >
        sathia<br>
        </br>
        <input type = "radio" id = "a" value = "2" name = "quiz">
        Ramesh<br>
        </br>
        <input type = "radio" id = "a" value = "3" name = "quiz">
        Gokul<br>
        </br>
        <input type = "button" value = "next" onclick = "firstAnswer()">
        <input type = "hidden" id = "txt1">
      </form>
    </div>
    <div  class = "hidden" id = "two">
      <form name = "second" >
        2) which is full form of HTML ?</br>
        </br>
        <input type = "radio" id = "a" value = "1" name = "quiz" >
        Hyprer Text Makeup language<br>
        </br>
        <input type = "radio" id = "a" value = "2" name = "quiz">
        HyperText MarhUp Language<br>
        </br>
        <input type = "radio" id = "a" value = "3" name = "quiz">
        Heavy Text Manmade Language<br>
        </br>
        <input type = "button" value = "next" onclick = "secondAnswer()">
        <input type = "hidden" id = "txt2">
      </form>
    </div>
    <div class = "hidden" id = "three">
      <form name = "third" >
        3) which is capital of tamil nadu ?</br>
        </br>
        <input type = "radio" id = "a" value = "1" name = "quiz" >
        chennai<br>
        </br>
        <input type = "radio" id = "a" value = "2" name = "quiz">
        delhi<br>
        </br>
        <input type = "radio" id = "a" value = "3" name = "quiz">
        coimbatore<br>
        </br>
        <input type = "button" value = "next" onclick = "thirdAnswer()">
        <input type = "hidden" id = "txt3">
      </form>
    </div>
    <style type = "text/css">
    .hidden
    {
    display:none;
    }
    .unhidden
    {
    display:block;
    }
    </style>
    </body>
    </html>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>simple quiz test</title>
    <style type = "text/css">
    .hidden {               /* display:none is not used to preserve the ordered list numbers */
      visibility:hidden;
      position: absolute;
      left: -999999;
      top: -999999;
    }
    #quiz-container label {
      display: block;
      cursor: pointer;
    }
    </style>
    </head>
    <body>
    <form>
      <h1>Quiz</h1>  
      <ol id="quiz-container">
        <li>
          <h2>Who developed this script?</h2>
          <label><input type="radio" value="1" name="q1" data-answer />sathia</label>
          <label><input type="radio" value="2" name="q1" />Ramesh</label>
          <label><input type="radio" value="3" name="q1" />Gokul</label>
          <button type="submit">next</button>
        </li>
        <li class="hidden">
          <h2>Which is full form of HTML?</h2>
          <label><input type="radio" value="1" name="q2" />Hyprer Text Makeup language</label>
          <label><input type="radio" value="2" name="q2" data-answer />HyperText Markup Language</label>
          <label><input type="radio" value="3" name="q2" />Heavy Text Manmade Language</label>
         <button type="submit">next</button>
        </li>
        <li class="hidden">
          <h2>Which is capital of tamil nadu?</h2>
          <label><input type="radio" value="1" name="q3" data-answer />chennai</label>
          <label><input type="radio" value="2" name="q3" />delhi</label>
          <label><input type="radio" value="3" name="q3" />coimbatore</label>
          <button type="submit">next</button>
        </li>
      </ol>
      <div id="status"></div>
    </form>
    <script type = "text/javascript">
    
    document.getElementById('quiz-container').onclick = function(e) {
      e = e || window.event;
      var el = e.target || e.srcElement;
      if (el.tagName == 'BUTTON') {
        var item = el.parentNode,
            radios = item.getElementsByTagName('input');
        for (var i=0; i < radios.length; i++) {
          if (radios[i].checked) {
            if (radios[i].getAttribute('data-answer') == null) {  
              document.getElementById('status').innerHTML = 'Your answer is wrong, try again';       
            }
            else {                     
               item.className = 'hidden';
               var node = item.nextSibling;
               while (node && node.nodeType != 1) {
                  node = node.nextSibling;
               }
               if (node) {
                  node.className = '';
                  document.getElementById('status').innerHTML = '';
               }
               else {
                  document.getElementById('status').innerHTML = 'Finish';
               }           
            }
            break;
          }
        }
        return false;
      }
      else if (el.tagName == 'INPUT' || el.tagName == 'LABEL') {
        document.getElementById('status').innerHTML = '';
      }
    }
    
    </script>
    </body>
    </html>
    You can add as many <li>'s containing the Next button and the radio buttons where one has the 'data-answer' attribute. No need to modify the javascript.

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks a lot, Glenn. It is very helpful.


  •  

    Posting Permissions

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