Quiz de preguntas que valide cual esta buena

[ceaped]

Buenas tardes
Trato de hacer un quiz con varias preguntas que al seleccionar alguna opción y darle al botón respuesta me diga si la seleccionada esta buena y me de una pequeña respuesta si esta bien o mal.

Hasta ahora tengo esto:

Código Javascript:

$(document).ready(function(){
    $('#respuesta').click(function() {
        $("input[type='radio']:checked").each(function() {
            if($("input[type='radio']:checked").val() == "Correct"){
                var id_val = $(this).attr("id");
                $("label[for='" + id_val + "']").css("background-color", "green");
                
            }else{
                var id_val = $(this).attr("id");
                        $("label[for='" + id_val + "']").css("background-color", "red");
            }
        });
    });
});
 

Código HTML:

<fieldset>
    <legend>Pregunta 1</legend>
    <input type="radio" name="q1" id="1" onclick="checkthis('Incorrect');" /><label for="1">Pregunta 1</label>
    <input type="radio" name="q1" id="2" onclick="checkthis('Incorrect');" /><label for="2">Pregunta 2</label>
    <input type="radio" name="q1" id="3" onclick="checkthis('Incorrect');" /><label for="3">Pregunta 3</label>
    <input type="radio" name="q1" id="4" onclick="checkthis('Correct');"   /><label for="4">Pregunta 4</label>
</fieldset>
<div id="here"></div>
 
<button id="respuesta">Respuesta</button>
 

Lo que deseo es generar varias preguntas.

Gracias por su ayuda

[ceaped]

Alguien que me ayude con este tema...gracias

[andresgarciadev]

no hagas un .each, son radiobuttons asi que solo habra 1 checkeado
solo busca

Código Javascript:

$("input[type='radio']:checked").val() == 'Correct'
 

te recomiendo que quites el "onclick="checkthis('Incorrect');""
ya que cualquiera viendo el codigo fuente sabe la respuesta XD
ponlo en el propio codigo jquery validando algo como

Código Javascript:

$("input[type='radio']:checked").attr("id") == '4'
 

o algo asi ya que porlomenos tendria que buscar mas y uno normalmente no va tan lejos para encontrar la respuesta XD

[ceaped]

Hola andresgarciadev
No soy muy bueno con jQuery.
Me podrías con algún ejemplo.

Gracias por tu ayuda

[andresgarciadev]

tienes que hacer algo asi....
https://jsfiddle.net/d7L3su0r/1/

[ceaped]

Holaandresgarciadev
Excelente!!!....
Otra pregunta:
¡Cómo hago para generar varias preguntas y que me den la sumatoria de las buenas y malas?

Gracias por tu ayuda

[xfxstudios]

Iniciado por andresgarciadev

tienes que hacer algo asi....
https://jsfiddle.net/d7L3su0r/1/

ese ejemplo esta bueno pero igual cualquiera podria ver la respuesta, te recomiendo que pases el valor por ajax y en php verifique si es correcta o no y lo muestres en pantalla, de esa manera nadie va a saber cual es la respuesta correcta ya que se verifica en el servidor y no en el navegador.

[ceaped]

Hola xfxstudios
Gracias por tu recomendación, pero lo lo necesito así para que la gente practique no para evaluar.
Si me puedes ayudar de como generar varias preguntas (quede seleccionada la pregunta como buena o mala) y que luego me de un resultado global

Gracias por tu ayuda

[ceaped]

Hola a todos
Alguien que me ayude con este tema.

Gracias

[xfxstudios]

Iniciado por ceaped

Hola a todos
Alguien que me ayude con este tema.

Gracias

te dejo esto que hice para que tengas una idea, esta hecho con html, css y jquery y trabajo con un array con las respuestas correctas para la verificacion:

https://jsfiddle.net/xfxstudios/w7zwzjha/19/

espero te sirva. Saludos

[ceaped]

Hola xfxstudios
ufff genial

Una última pregunta:
Hay forma de ponerle por cada respuesta una respuesta?
Ej:
Respuesta 1...Solución 1
Respuesta 2...Solución 2
Respuesta 3...Solución 3
Respuesta 4...Solución 4
Esto con el fin de retroalimentar por la que seleccione

Nuevamente...

Muchas gracias

[xfxstudios]

si haciendo algunas modificaciones y pasando con la id la opcion correcta, luego cortamos con split y listo:

https://jsfiddle.net/xfxstudios/w7zwzjha/27/

[ceaped]

Hola xfxstudios
ufff doblemente genial...muchas gracias por toda tu ayuda...;)

[xfxstudios]

para esa estamos. saludos

[ceaped]

Hola xfxstudios
Te hago otra pregunta:

Hay forma de ponerle por cada respuesta una respuesta?
Ej:
Respuesta 1...Solución 1
Respuesta 2...Solución 2
Respuesta 3...Solución 3
Respuesta 4...Solución 4
Esto con el fin de retroalimentar por la que seleccione.

Otra cosa Cuando selecciono una respuesta incorrecta me dice mal cual debería ser.

Gracias por tu ayuda

[xfxstudios]

Iniciado por ceaped

Hola xfxstudios
Te hago otra pregunta:

Hay forma de ponerle por cada respuesta una respuesta?
Ej:
Respuesta 1...Solución 1
Respuesta 2...Solución 2
Respuesta 3...Solución 3
Respuesta 4...Solución 4
Esto con el fin de retroalimentar por la que seleccione.

Otra cosa Cuando selecciono una respuesta incorrecta me dice mal cual debería ser.

Gracias por tu ayuda

??????

[ceaped]

Hola xfxstudios
Esto que te pregunte:
"Otra cosa Cuando selecciono una respuesta incorrecta me dice mal cual debería ser." Ya vi como lo haces.

Pero no logro dar por cada vez que presiono un radio button me de una respuesta distinta.

Respuesta 1...Texto que diga algo de la respuesta 1
Respuesta 2...Texto que diga algo de la respuesta 2

Gracias por tu ayuda

[xfxstudios]

Prueba asi:

https://jsfiddle.net/xfxstudios/w7zwzjha/29/

[ceaped]

Hola xfxstudios
Y si para cada pregunta son respuestas distintas?
Ejemplo:
Pregunta 1:
Respuesta 1...Texto que diga algo de la respuesta 1a
Respuesta 2...Texto que diga algo de la respuesta 2a

Pregunta 2:
Respuesta 1...Texto que diga algo de la respuesta 1b
Respuesta 2...Texto que diga algo de la respuesta 2b

Nuevamente muchas gracias por toda tu ayuda