Dynamic form building

[SimonHeffer]

OK here's a bit of HTML.

<p class="normal">Seen a bird in your garden and wondered what it was? Answer the following questions and let's see if we can track it down!
</p>
<form onSubmit="return submitId(this)">
<p class="question" id="birdid">

Is it bigger than a sparrow?<img id="idimg" src="sparrow.jpg" alt="House Sparrow"><br>
<input type="radio" name="bird_choice" value="smaller" tabindex="1">Smaller<br>
<input type="radio" name="bird_choice" value="same" tabindex="2">Same<br>
<input type="radio" name="bird_choice" value="bigger" tabindex="3">Bigger<br>
<input type="submit" value="Submit" name="IdSubmit" >
</form>

So this more or less works.
What I need to do is when the user chooses the answer to display the next relevant question with a different photo. The number of radio buttons may changes per question.
Here's what I've got so far...


var qIndex = 0;
var questions = new Array("Is is bigger than a sparrow?",
"Is it mainly blue?");
var choices = new Array(new Array("Smaller","Same","Bigger"),
new Array("Yes","no"));
var next = new Array(new Array(1,3,4),new Array(5,6));
function submitId(idForm) {
for(i=0;i<idForm.bird_choice.length;i++) {
if (idForm.bird_choice[i].checked) {
qIndex = next[qIndex][i];
}
}
var qNode = document.getElementById('birdid').firstChild;
qNode.nodeValue = questions[qIndex];

}
So how to change the number of radio buttons according to the choices for each question?