Quiz "input" con mensaje de respuesta en una DIV

ceaped · #1 (**permalink**) 23/02/2016, 12:37

Buenas tardes
Tengo esto:

Código HTML:

Ver original<ul>
<li><input name="respuesta" onclick="alert('Incorrecto 1');respuesta.checked;" type="radio">a. Pregunta 1</li>
<li><input name="respuesta" onclick="alert('¡Correcto!');respuesta.checked;" type="radio">b. Pregunta 2</li>
<li><input name="respuesta" onclick="alert('Incorrecto 2');respuesta.checked;" type="radio">c. Pregunta 3</li>
<li><input name="respuesta" onclick="alert('Incorrecto 3');respuesta.checked;" type="radio">d. Pregunta 4</li>
</ul>

Lo qe yo deseo es que cuando de click en cada "radio" me salga el "alert"para cada uno en una DIV, porejemplo <div class"respuestas"></div>

Gracias por su ayuda

caricatos · #2 (**permalink**) 23/02/2016, 17:18

Hola:

No entiendo lo de respuesta.checked... ¿?

Si el div tiene: id="respuestas" (no lo has planteado bien)... en tu código deberías poner:

onclick="document.getElementById('respuestas').inn erHTML = this.value"

... y en el atributo value poner lo que quieras que se muestre.

Saludos

ceaped · #3 (**permalink**) 24/02/2016, 05:47

Hola caricatos
Me explico:
Tengo 4 preguntas "radio button", cuando doy click sobre cada una de ellas me sale un mensaje "alert". Yo deseo que ese mensaje de "alert" se imprima en una div, por ejemplo <div class="respuestas"></div>.

He buscado mucho y no encuentro un "quiz" "radio buttun" que cuando presione cada uno de ellos me de una respuesta (retroalimentación), los he encontrado que presiono una de las respuestas y por medio de otro botón me da cual es la respuesta correcta y una retroalimentación.

Ejemplo

Pero igual no debe ser tan complejo, solo busco tener algo como lo que te indico.

Gracias por tu ayuda

ceaped · #4 (**permalink**) 24/02/2016, 07:09

Hola caricatos
Mira lo que he tratado de armar con un poco de código de acá y de alla:

Código Javascript:

Ver originalfunction CustomAlert(){
    this.render = function(dialog){
        var winW = window.innerWidth;
        var winH = window.innerHeight;
        var dialogoverlay = document.getElementById('dialogoverlay');
        var dialogbox = document.getElementById('dialogbox');
        dialogoverlay.style.display = "block";
        dialogoverlay.style.height = winH+"px";
        dialogbox.style.left = (winW/2) - (550 * .5)+"px";
        dialogbox.style.top = "100px";
        dialogbox.style.display = "block";
        //document.getElementById('dialogboxhead').innerHTML = "Respuesta";
        document.getElementById('dialogboxbody').innerHTML = dialog;
        document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>';
        
    }
    this.ok = function(){
        document.getElementById('dialogbox').style.display = "none";
        document.getElementById('dialogoverlay').style.display = "none";
        
        document.getElementById('section').style.display = "none";
    }
}
var Alert = new CustomAlert();

Código HTML:

Ver original<body>
 
<div id="dialogoverlay"></div>
<div id="dialogbox">
<div>
<div id="dialogboxhead"></div>
<div id="dialogboxbody"></div>
<div id="dialogboxfoot"></div>
</div>
</div>
 
<div class="boton_regresar">
<a href="http://www.forosdelweb.com/index.html" title="Regresar">Regresar</a>
</div>
 
<section>
<div class="pregunta">
<ul>
<li><input type="radio" name="radio" onclick="Alert.render('a.texto 1...')" >a. Respuesta 1</li>
<li><input type="radio" onclick="Alert.render('b.texto 2...')" >b. Respuesta 2</li>
<li><input type="radio" onclick="Alert.render('c. texto 3...')" >c. Respuesta 3</li>
<li><input type="radio" onclick="Alert.render('d. texto 4...')" >d. Respuesta 4</li>
</ul>
</div>
</section>
 
</body>

Pero no se como generar varias preguntas.
¿Cómo hago que se formatee <section> y que se imprima otra pregunta ahí?

Gracias por tu ayuda

ceaped · #5 (**permalink**) 24/02/2016, 15:10

Código Javascript:

Ver originalthis.ok = function(){
        document.getElementById('dialogbox').style.display = "none";
        document.getElementById('dialogoverlay').style.display = "none";
        document.getElementById('section').hide();
    }

Busco ocultar la etiqueta <section> así:

Código Javascript:

Ver originaldocument.getElementById('section').hide();

Pero no hace nada...:(