Visible y ocultar div

[ceaped]

Buenos días
Estoy realizando un Quiz y tengo esto:

Código Javascript:

<script type="text/javascript">
function mostrar(){
    document.getElementById('pregunta_2').style.display='block';
    document.getElementById('pregunta_3').style.display='block';
    avanzar.style.display="none";
}
function ocultar(){
    document.getElementById('pregunta_2').style.display='none';
    document.getElementById('pregunta_3').style.display='none';
}
</script>
 

Código HTML:

<div class="pregunta" id="pregunta_1">Pregunta 1</div>
<div class="pregunta" id="pregunta_2">Pregunta 2</div>
<div class="pregunta" id="pregunta_3">Pregunta 3</div>
 
<div class="boton_avanzar" id="avanzar" style="display:none;"  onClick="mostrar();">Siguiente pregunta</div>
 

Que busco que salga la DIV cada vez que presione el botón "Siguiente pregunta", pero me saca la 3 y no la 2.

Dos preguntas:

¿Cómo hago para ir avanzando en cada DIV?
Hay forma que me imprima en pantalla la sumatario de las buenas y malas.

Gracias por su ayuda

[Alexis88]

Como las preguntas tienen una clase en común, puedes avanzar de uno en uno utilizando una variable contadora que incremente su valor de uno en uno con cada clic, de tal forma que puedas usarla como índice dentro del conjunto de preguntas y así puedas tomar en orden a cada una de ellas.

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var avance = document.querySelector("#avanzar"),
        preguntas = document.querySelectorAll(".pregunta"),
        total = divs.length,
        cuenta = 0; 
    
    //Solo la primera vez
    preguntas[cuenta].style.display = "block"; //Como "cuenta" empieza en cero, se muestra la primera pregunta
    
    //Al pulsar el botón
    avance.addEventListener("click", function(){
        if (cuenta++ < total - 1){ //Se mostrará la siguiente pregunta si la cuenta no pasa al último índice
            preguntas[cuenta - 1].style.display = "none"; //Ocultas a la anterior
            preguntas[cuenta].style.display = "block"; //Muestras a la nueva
        }
        else{ //Una vez que llegues al final
            //Muestras el puntaje acumulado
        }
    }, false);
}, false);
 

Para lo otro, te basta con acumular el puntaje en una variable por cada pregunta.

[ceaped]

Hola Alexis88
mmm...no me avanza...:(

Gracias por tu ayuda

[Alexis88]

¿Has depurado el código para saber qué está fallando? ¿Cómo están definidos los estilos?

Con decir "no me avanza", no vas a lograr mucha ayuda que digamos.

Just saying.

[ceaped]

Hola Alexis88
Tienes toda la razón.
Mira te pongo lo que tengo: Ejemplo

Y como pregunto:

¿Cómo hago para ir avanzando en cada DIV?
Hay forma que me imprima en pantalla la sumatario de las buenas y malas.

Gracias por tu ayuda

[Alexis88]

El problema con tu ejemplo es que intentas acceder a la instancia de la función constructora Alert mediante JavaScript inline, es decir, incrustado en HTML. No es reconocida porque no fue creada en el mismo alcance. E incluso si hicieras la declaración de dicha variable con la instancia, tendrías que añadir a la función misma por cada botón; es por esta y otras razones que hace mucho tiempo que no se recomiendas trabajar con JS incrustado en HTML.

Para poder acceder a la misma, necesitas hacerlo en el mismo espacio del código JS. Como todos los botones de respuesta ejecutan la misma función, enviándole cada una un valor distinto, puedes delegar el evento click a la sección en la que se encuentra todo, para lo cual sería recomendable asignarle un identificador, y las respuestas serían los valores de cada botón.

Código HTML:

<section id="quiz">
    <div class="pregunta">
        <li>
            <input type="radio" value="Respuesta 1" />a. Respuesta
        </li>
    </div>
</section>
 

Código Javascript:

var section = document.querySelector("#quiz");
section.addEventListener("click", function(event){
    if (event.target.type == "radio"){
        Alert.render(event.target.value);
    }
}, false);
 

Mediante la propiedad target del objeto del evento, se puede acceder al elemento directamente afectado por el evento. Una vez comprobado que se trata de un radio button, pasas a invocar al método Alert.render() pasándole como argumento el valor de la respuesta. El evento también puede ser delegado a otro elemento ancestro, por ejemplo, al documento.

Y para la obtención de la sumatoria de las respuestas correctas e incorrectas, necesitas dos variables para acumular ambas cantidades y, cuando verifiques que la respuesta selecciona es correcta o incorrecta, sumas un 1 a la respectiva variable acumuladora.

[djohny]

Para corregir las preguntas, tal como te dicen, tienes que recorrerlas. Tiene que tener un id cada radiobutton, llamalos así, cada uno de esa forma, radioValor1, radioValor2...


function corregir() {
var correctas = 0;
var pregunta1 = 0;
var pregunta2 = 0;
var pregunta3 = 0;
var pregunta4 = 0;
var radioButtons = document.getElementsByName("radioValor1");
var radioButtons2 = document.getElementsByName("radioValor2");
var radioButtons3 = document.getElementsByName("radioValor3");
var radioButtons4 = document.getElementByName("radiovalor4");

for (var x = 0; x < radioButtons.length; x++) {
if (radioButtons[x].checked) {
pregunta1 = radioButtons[x].value;
}
}
for (var x = 0; x < radioButtons2.length; x++) {
if (radioButtons2[x].checked) {
pregunta2 = radioButtons2[x].value;
}
}
for (var x = 0; x < radioButtons3.length; x++) {
if (radioButtons3[x].checked) {
pregunta3 = radioButtons3[x].value;
}
}
for (var x = 0; x < radioButtons4.length; x++) {
if (radioButtons3[x].checked) {
pregunta4 = radioButtons4[x].value;
}
}


if (pregunta1 == 2) { //ejemplo del número de respuesta que sería correcta de las 4 perguntas, si es la 2, pues la 2).
correctas = correctas + 1;
}
if (pregunta2 == 1) { //ejemplo del número de respuesta que sería correcta de las 4 perguntas, si es la 1, pues la 1). y asi sucesivamente tantas como preguntas sean.
correctas = correctas + 1;
}
if (pregunta3 == 3) {
correctas = correctas + 1;
}
if (pregunta4 == 4) {
correctas = correctas + 1;
}
}


Con ésto recorre todas las preguntas, compara cuales son correctas, las suma, y ya está. Bastaría con sacar ahora el resultado "total", dependiendo de la forma, si es a un div que llamaremos preguntasCorrectas:

document.getElementById("preguntas_correctas").val ue = correctas;

Llevo poco en Js, pero creo que es la forma más adecuada, esto es de un ejercicio de evaluación de radiobuttons o preguntas.

[ceaped]

Hola Alexis88
Disculpa pero ahora si quede mas confundido de lo que estaba.
Si no te molesta puedes replicar tu explicación al ejemplo que puse.

Gracias por tu ayuda

[Alexis88]

Lo que ocurre es que, la llamada que haces en cada respuesta, es decir: onclick="Alert.render('Respuesta 3')", no funciona puesto que Alert, la cual es una variable que toma la instancia de la función CustomAlert, está definida dentro del código JS que tienes aparte del código HTML. Para que funcione, tendrías que definirlo así: onclick="function CustomAlert(){//el código} var Alert = new CustomAlert(); Alert.render('Respuesta 3')", y tendrías que repetir el proceso por cada opción de respuesta. En cambio, la forma que te propongo, consiste en delegar el clic al elemento que contiene a todas las respuestas, y mediante la propiedad event.target, se toma al elemento directamente afectado por el clic, y luego de comprobar que dicho elemento es una de las opciones de respuesta, se procede a realizar la llamada a Alert.render.

Si tienes más dudas, consulta los enlaces que te dejé en mi anterior respuesta o vuelve a leer la explicación. Una segunda leída a veces despeja las dudas.

[ceaped]

Hola Alexis88
Estoy tratando de hacer algo diferente: Ejemplo 2

Se me ocurre que cada vez que de al botón "Avanzar" me bloquee la pregunta anterior, yo puse esto:

Código Javascript:

$('input[name=a]').attr("disabled",true);
 

¿Cómo hago para bloquear cuando responda la 2 y 3 y me arroje un resultado de las buenas y malas?

Gracias por tu paciencia y toda tu ayuda

[Alexis88]

No creo que sea necesario bloquear las anteriores preguntas si no hay un botón para retroceder. Si estableces una posición absoluta para todos los bloques de preguntas y respuestas, se irán visualizando una sobre otra, dejando de ser visible cada pregunta anterior.

[ceaped]

Hola Alexis88
Mira hay 3 preguntas, selecciono alguna de las respuestas de la pregunta 1 que es la que se visualiza, cuando doy clic al botón "Avanzar" con:

Código Javascript:

$('input[name=a]').attr("disabled",true);
 

Bloqueo la primera.

Lo que deseo es que cuando seleccione alguna opción de la segunda y de clic al botón "Avanzar"
Se bloquee la 2 y asi para la tercera.

Nota: Yo puse un ejemplo pero no se porque se ve mal.

Gracias por tu ayuda

[Alexis88]

Si analizas el código, te darás cuenta de que puedes acceder al bloque anterior, como cuando se oculta al bloque previo al actual. Sabiendo esto, creo que ya tienes el camino despejado; sin embargo, sigo creyendo que es algo innecesario si se tiene en cuenta de que no habría forma de acceder a los bloques previos una vez que se posicionen uno sobre otro.

[ceaped]

Hola Alexis88
Ese es mi problema que no lo tengo claro y no se como hacerlo...;(

[ceaped]

Hola
Este código me lo facilitó Alexis88:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    var button = document.querySelector(".boton_avanzar"),
        divs = document.querySelectorAll(".pregunta"),
        total = divs.length,
        count = 0;
    
    //Solo la primera vez
    divs[count].style.opacity = 1;  
    
    
    //Al pulsar el botón
    button.addEventListener("click", function(){
        if (count++ < total - 1){
            divs[count - 1].style.opacity = 1;
            divs[count].style.opacity = 1;
            
            //Pinta y bloquea las preguntas
            $('input[name=a]').attr("disabled",true);
            $("#1").css("background-color", "#60CB00");
        }
        else{
            alert("Has llegado al final");
        }
    }, false);
}, false);
 

Mi HTML es:

Código HTML:

<div class="pregunta" id="1">
<h3>Pregunta 1</h3>
<ul>
<li><input name="a" type="radio" onclick="Alert.render('Respuesta 1')" >a. Respuesta</li>
<li><input name="a" type="radio" onclick="Alert.render('Respuesta 2')" >b. Respuesta</li>
<li><input name="a" type="radio" onclick="Alert.render('Respuesta 3')" >c. Respuesta</li>
<li><input name="a" type="radio" onclick="Alert.render('Respuesta 4')" >d. Respuesta</li>
</ul>
</div>
 
<div class="pregunta" id="2">
<h3>Pregunta 2</h3>
<ul>
<li><input name="b" type="radio" onclick="Alert.render('Respuesta 1')" >a. Respuesta</li>
<li><input name="b" type="radio" onclick="Alert.render('Respuesta 2')" >b. Respuesta</li>
<li><input name="b" type="radio" onclick="Alert.render('Respuesta 3')" >c. Respuesta</li>
<li><input name="b" type="radio" onclick="Alert.render('Respuesta 4')" >d. Respuesta</li>
</ul>
</div>
 
<div class="pregunta" id="3">
<h3>Pregunta 3</h3>
<ul>
<li><input name="c" type="radio" onclick="Alert.render('Respuesta 1')" >a. Respuesta</li>
<li><input name="c" type="radio" onclick="Alert.render('Respuesta 2')" >b. Respuesta</li>
<li><input name="c" type="radio" onclick="Alert.render('Respuesta 3')" >c. Respuesta</li>
<li><input name="c" type="radio" onclick="Alert.render('Respuesta 4')" >d. Respuesta</li>
</ul>
</div>
 

Yo lo que intento hacer es que cuando seleccione alguna de las opciones de la pregunta 1 se pinte de rojo o de verde (Buena o mala) y que la bloquee.
Que cuando le al botón avanzar aparezca al pregunta 2 y la misma dinámica de la 1 me indique si esta buena o mala y que la bloquee y así para la tres.

Código Javascript:

$('input[name=a]').attr("disabled",true);
$("#1").css("background-color", "#60CB00");
 

Solo logro hacerlo para la primera pregunta. ¿Cómo hago para que funcione para las demás?

Gracias por su ayuda

[ceaped]

Hola Alexis88
No he podido con este problema...;(
Me puedes ayudar, gracias