Foros del Web » Programando para Internet » Javascript »

Trivia en JavaScript sin JQuery

Estas en el tema de Trivia en JavaScript sin JQuery en el foro de Javascript en Foros del Web. Bueno necesito hacer un trivia, ya estuve investigando mucho y la verdad no se como hacer que se seleccione un array después de acabar la ...
  #1 (permalink)  
Antiguo 07/07/2016, 13:00
 
Fecha de Ingreso: junio-2008
Mensajes: 43
Antigüedad: 15 años, 10 meses
Puntos: 0
Trivia en JavaScript sin JQuery

Bueno necesito hacer un trivia, ya estuve investigando mucho y la verdad no se como hacer que se seleccione un array después de acabar la sentencia if - else. Así que opté por usar una variable. Les paso el código HTML para que se den una idea. Y el JavaScript que estoy intentando hacer. Quiero que me muestre la palabra CORRECTO o INCORRECTO y al hacer click vaya a la siguiente pregunta.

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;
 	}

 }

Etiquetas: html5
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:24.