Código HTML:
<section> <article style="display:block" id="q1">Question 1 <ul class="ans"> <li><label><input name="q1" value="0" type="radio" onclick="answer();">Norma</label></li> <li><label><input name="q1" value="1" type="radio" onclick="answer();">Liliana</label></li> <li><label><input name="q1" value="2" type="radio" onclick="answer();">Las dos</label></li> </ul> </article> <article style="display:none" id="q2">Question 2 <ul class="ans"> <li><label><input name="q2" value="0" type="radio" onclick="answer();" >Norma</label></li> <li><label><input name="q2" value="1" type="radio" onclick="answer();" >Liliana</label></li> <li><label><input name="q2" value="2" type="radio" onclick="answer();">Las dos</label></li> </ul> </article> <article style="display:none" id="q3">Question 3 <ul class="ans"> <li><label><input name="q3" value="0" type="radio" onclick="answer();" >Norma</label></li> <li><label><input name="q3" value="1" type="radio" onclick="answer();" >Liliana</label></li> <li><label><input name="q3" value="2" type="radio" onclick="answer();" >Las dos</label></li> </ul> </article> <article style="display:none" id="q4">Question 4 <ul class="ans"> <li><label><input name="q4" value="0" type="radio" onclick="answer();" >Norma</label></li> <li><label><input name="q4" value="1" type="radio" onclick="answer();" >Liliana</label></li> <li><label><input name="q4" value="2" type="radio" onclick="answer();" >Las dos</label></li> </ul> </article> <article style="display:none" id="q5">Question 5 <ul class="ans" > <li><label><input name="q5" value="0" type="radio" onclick="answer();" >Norma</label></li> <li><label><input name="q5" value="1" type="radio" onclick="answer();" >Liliana</label></li> <li><label><input name="q5" value="2" type="radio" onclick="answer();" >Las dos</label></li> </ul> </article> <input type="submit" value="Siguiente" onclick="send();"> </section>
Código:
function answer(){ var x = document.getElementsByName("q1", "q2", "q3", "q4", "q5"); var answer; for (var i = 0; i < x.length; i++) { if (x[i].checked === true) { answer = x[i].value; break } } if (document.getElementsByName("q1")){ if (answer == 0) { var a = document.getElementsByTagName("article")[0]; a.innerHTML = "CORRECTO"; }else{ var a = document.getElementsByTagName("article")[0]; a.innerHTML = "INCORRECTO"; } } if (document.getElementsByName("q2")){ if (answer == 1) { var a = document.getElementsByTagName("article")[0]; a.innerHTML = "CORRECTO"; }else{ var a = document.getElementsByTagName("article")[0]; a.innerHTML = "INCORRECTO"; } } } var counter = 0; function send(){ if (counter == 0){ document.getElementById("q1").style.display = "none"; document.getElementById("q2").style.display = "block"; counter = 1; }else if (counter == 1){ document.getElementById("q2").style.display = "none"; document.getElementById("q3").style.display = "block"; counter = 2; }else if (counter == 2){ document.getElementById("q3").style.display = "none"; document.getElementById("q4").style.display = "block"; counter = 3; }else if (counter == 3){ document.getElementById("q4").style.display = "none"; document.getElementById("q5").style.display = "block"; counter = 4; } }