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>