Cómo crear una encuesta/quiz inteligente con jquery

neodani · #1 (**permalink**) 05/09/2010, 05:43

Buenas!

Llevo días intentando crear una encuesta inteligente, las he visto en compañias de seguros como
https://www.rastreator.com/seguro-co...mparativa.aspx

Te va haciendo preguntas, marcas tu respuesta y automaticamente te carga la nueva pregunta con sus respuesta, todo sin recargar la pagina completa.

He intentado buscar algo parecido en la red pero no he encontrado nada, así que estoy intentado crearlo, pero mis conocimientos de javascript y jquery son limitados y no sé como se implementaría un sistema similar.

Me surgen dudas, he estado analizando esa misma página para ver como llamaba y recibia los datos, y veo que no utiliza json ni xml, esta es respuesta de la pagina al solicitarle una nueva pregunta.

|¿Dónde aparcas habitualmente por la noche?|1:En la calle~2:En garaje colectivo~3:En garaje individual

Cómo se aprecia tan solo separa las opciones con un tuberias | y ~ en el caso de las posibles respuestas

¿Vosotros que me aconsejáis que utilice json, xml?

He intentado empezar de la siguiente manera

index.php

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/v1.98/DTD/v1.98-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Ejemplo de encuesta inteligente</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 
    function Empezar(){
        $('a.empezar_quiz').click(function() {
            $('#cuestionario').load('preguntas.php?q=1'); //carga la primera pregunta
        });
    } 
    
    Empezar();
    
    $("#cuestionario dl dd").click( function () {
        $(this).toggleClass('activo');
        var n = $('.activo').length;
        $("span").text("Hay " + n + " elementos seleccionados");
    });
    
    // Una vez empieza el test el boton empezar debe desaparecer
    //$('a.empezar_quiz').hide();
 
});
</script>
<style type="text/css">
#cuestionario {
    padding:10px;
    margin:0px;
    list-style:none;
}
#cuestionario dd {
    display:block;
    height:18px;
    text-decoration:none;
    color:#666666 !important;
    padding:1px 5px 1px 5px;
    border:1px solid #ffffff;
}
#cuestionario dd:hover {
    border:1px solid #e53500;
    text-decoration:none;
}
.activo{
    background:red;
    font-weight:bold;
    color:#fff;
}
</style>
</head>
<body>
<a class="empezar_quiz" href="#"> Empezar con las preguntas</a>
 
<!-- Carga las preguntas y respuestas -->
<div id="cuestionario"></div>
 
<!-- DEBUG: muestra las respuestas seleccionadas -->
<span></span>
 
</body>
</html>

preguntas.php

Código PHP:

Ver original<?php
if ($_GET['q']==1){?>
<dl>
    <dt>Pregunta 1: <b>Selecciona 3 colores:</b></dt> 
    <dd>Rojo</dd>
    <dd>Verde</dd> 
    <dd>Azul</dd> 
    <dd>Amarillo</dd> 
    <dd>Negro</dd>
    <dd>Naranja</dd> 
</dl>
<?php } ?>

Pero la parte de marcar las opciones no me funciona.

Y no se como hacer para irle pidiendo nuevas preguntas una vez el usuario pulse sobre la respuesta...

Dejo el ejemplo online: http://neodani.com/fdw/jquery/quiz/

¿Podéis ayudarme?

Muchas gracias de antemano!

tredio · #2 (**permalink**) 05/09/2010, 11:31

puedes probar algo asi, sino entiendes algo preguntame por aca mismo.

HTML

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/v1.98/DTD/v1.98-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Ejemplo de encuesta inteligente</title>
 
<style type="text/css">
#cuestionario {
    padding:10px;
    margin:0px;
    list-style:none;
}
#cuestionario dd {
    display:block;
    height:18px;
    text-decoration:none;
    color:#666666 !important;
    padding:1px 5px 1px 5px;
    border:1px solid #ffffff;
}
#cuestionario dd:hover {
    border:1px solid #e53500;
    text-decoration:none;
    cursor:pointer;
}
.activo{
    background:red;
    font-weight:bold;
    color:#fff;
}
#next{ width:100px; border:solid 1px #CCC; text-align:center; display:none;}
#next:hover{ background:#009; color:#FFF; cursor:pointer;}
</style>
 
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    var question = 0;
    
    function loadQuestion(){        
        $('#cuestionario').html('').load('preguntas.php?q='+(++question));
    }
 
    $('a.empezar_quiz').click(function() {
        loadQuestion()
        $(this).hide();
        $('#next').show();      
    });
    
    $('#next').click(function(){
        if(getN() == $('.activo').length){
            var val = $('#answers').val();
            val = (val != '')?val+'|':val;
            
            var respuestas = '';
            $('.activo').each(function(i){
                respuestas += $(this).attr('id').split('-')[1];
                if(i!= ($('.activo').length-1))
                    respuestas+=',';
            });
            
            val += getPregunta()+':'+respuestas;
            $('#answers').val(val);
            loadQuestion();
        }else{
            var n = getN();
            var text = (n > 1)?' preguntas':' pregunta';
            alert('Debe seleccionar '+getN()+text);
        }
    });
        
    function getN(){
        return $("#cuestionario dl").attr('class').split('n')[1].split(']')[0].split('[')[1];
    }
    
    function getPregunta(){
        return $("#cuestionario dl").attr('id').split('-')[1];
    }
    
    $("#cuestionario dl dd").live('click', function () {
        if($(this).hasClass('activo') || $('.activo').length < getN()){
            $(this).toggleClass('activo');
            //$("#debug").text("Hay " + $('.activo').length + " elementos seleccionados");
        }
    });
    
    // Una vez empieza el test el boton empezar debe desaparecer
    //$('a.empezar_quiz').hide();
});
</script>
 
</head>
<body>
<a class="empezar_quiz" href="#"> Empezar con las preguntas</a>
 
<!-- Carga las preguntas y respuestas -->
<div id="cuestionario"></div>
 
<!-- Aqui se guardaran las respuestas -->
<input id="answers" name="answers" type="hidden" value="" />
 
<div id="next">Continuar</div>
 
<!-- DEBUG: muestra las respuestas seleccionadas -->
<span id="debug"></span>
 
</body>
</html>

PHP

Código PHP:

Ver original<?php
//EN EL ID DE CADA dl COLOCAMOS q- SEGUIDO POR EL NUMERO DE LA PREGUNTA, ESTO ES PARA SABER EN QUE PREGUNTA VAMOS
//CADA RESPUESTA SERA ALGO PARECIDO, TENDRA UN ID r- SEGUIDO POR EL NUMERO DE LA RESPUESTA
//LA CLASE QUE TIENE EL dl, SERA PARA INDICAR CUANTAS PREGUNTAS DEBEN SER SELECCIONADAS ANTES DE CONTINUAR
echo 'aqui '.$_REQUEST['q'];
 
if ($_GET['q']==1){?>
<dl id="q-1" class="n[3]">
    <dt>Pregunta 1: <b>Selecciona 3 colores:</b></dt> 
    <dd id="r-1">Rojo</dd>
    <dd id="r-2">Verde</dd> 
    <dd id="r-3">Azul</dd> 
    <dd id="r-4">Amarillo</dd> 
    <dd id="r-5">Negro</dd>
    <dd id="r-6">Naranja</dd> 
</dl>
<?php }elseif($_GET['q']==2) {?>
<dl id="q-2" class="n[1]">
    <dt>Pregunta 2: <b>Que lenguaje de programacion te gusta mas?</b></dt> 
    <dd id="r-1">JAVA</dd>
    <dd id="r-2">PHP</dd> 
    <dd id="r-3">ASP</dd> 
    <dd id="r-4">C</dd> 
</dl>
<?php }?>

neodani · #3 (**permalink**) 05/09/2010, 16:04

Cita:

Iniciado por tredio

puedes probar algo asi, sino entiendes algo preguntame por aca mismo.

Muchas gracias tredio!, he copiado los archivos y los he subido al servidor, están accesibles desde http://neodani.com/fdw/jquery/quiz/

¿De qué manera se te ocurre para mostrar una pregunta u otra en función de la respuesta?

El script preguntas.php debería recibir un array con las respuestas que el usuario ha seleccionado para así formularle la siguiente pregunta, no?

¿Se te ocurre cómo?

Muchas gracias de antemano

tredio · #4 (**permalink**) 05/09/2010, 17:14

no necesariamente enviar un arrglo, solo con enviar el numero de la pregunta, cosa que tenemos en question, y la respuesta que eligio basta, todo lo demas serian condicionales de PHP para hacer el trabajo. intenta algo y partimos de ahi.

neodani · #5 (**permalink**) 06/09/2010, 00:43

Cita:

Iniciado por tredio

no necesariamente enviar un arrglo, solo con enviar el numero de la pregunta, cosa que tenemos en question, y la respuesta que eligio basta, todo lo demas serian condicionales de PHP para hacer el trabajo. intenta algo y partimos de ahi.

Intenté crear una función especifica para recoger las respuestas

Código Javascript:

Ver original//function getRespuesta(){
    //    return $("#cuestionario dl dd").attr('id').split('-')[1];
    //}

Pero no me funcionaba al llamarla dentro de aquí (así que tuve que definirla dentro, está con un alert para hacer pruebas...

Código Javascript:

Ver original$("#cuestionario dl dd").live('click', function () {
        if($(this).hasClass('activo') || $('.activo').length < getN()){
           $(this).toggleClass('activo');
           alert($(this).attr('id').split('-')[1]); // muestra mensaje con el numero de respuesta seleccionado
        }
    });

El alert muestra el valor de la respuesta seleccionada, ahora este valor es el que se tendría que ir guardando... para luego pasárselo como parámetro a la función loadQuestion(), no?

Código Javascript:

Ver originalvar respuesta = 0;
    
    function loadQuestion(){        
        $('#cuestionario').html('').load('preguntas.php?q='+(++question)'&r='+respuesta);
    }

Qué tal? :D la idea la tengo... implementarla es mucho más difícil!

tredio · #6 (**permalink**) 06/09/2010, 11:23

creo que no has entendido del todo el script que te pase, te explico para que veas.
te coloco los comentarios.

Cita:

Iniciado por tredio

HTML

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/v1.98/DTD/v1.98-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Ejemplo de encuesta inteligente</title>
 
<style type="text/css">
#cuestionario {
    padding:10px;
    margin:0px;
    list-style:none;
}
#cuestionario dd {
    display:block;
    height:18px;
    text-decoration:none;
    color:#666666 !important;
    padding:1px 5px 1px 5px;
    border:1px solid #ffffff;
}
#cuestionario dd:hover {
    border:1px solid #e53500;
    text-decoration:none;
    cursor:pointer;
}
.activo{
    background:red;
    font-weight:bold;
    color:#fff;
}
#next{ width:100px; border:solid 1px #CCC; text-align:center; display:none;}
#next:hover{ background:#009; color:#FFF; cursor:pointer;}
</style>
 
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    var question = 0;//VARIABLE QUE NOS INDICA POR QUE PREGUNTA VAMOS
    
    function loadQuestion(){//CARGA LA SIGUIENTE PREGUNTA
        $('#cuestionario').html('').load('preguntas.php?q='+(++question));
    }
 
    $('a.empezar_quiz').click(function() {//EMPEZAR EL QUIZ
        loadQuestion();//CARGAMOS PREGUNTAS
        $(this).hide();//OCULTAMOS LINK
        $('#next').show();//MOSTRAMOS BOTON CONTINUAR
    });
    
    $('#next').click(function(){//ACCION DEL BOTON CONTINUAR
        if(getN() == $('.activo').length){//SI SE HAN SELECCIONADO LAS RESPUESTAS NECESARIAS
            var val = $('#answers').val();
            val = (val != '')?val+'|':val;
            
            var respuestas = '';
            $('.activo').each(function(i){
                respuestas += $(this).attr('id').split('-')[1];
                if(i!= ($('.activo').length-1))
                    respuestas+=',';
            });
            
            val += getPregunta()+':'+respuestas;
            $('#answers').val(val);
            loadQuestion();
        }else{//SI NO ENVIAMOS UN MENSAJE DE ALERTA
            var n = getN();
            var text = (n > 1)?' preguntas':' pregunta';
            alert('Debe seleccionar '+getN()+text);
        }
    });
        
    function getN(){//OBTENER EL NUMERO DE RESPUESTAS QUE SE PUEDEN SELECCIONAR
        return $("#cuestionario dl").attr('class').split('n')[1].split(']')[0].split('[')[1];
    }
    
    function getPregunta(){//OBTENER EL NUMERO DE LA PREGUNTA ACTUAL
        return $("#cuestionario dl").attr('id').split('-')[1];
    }
    
    $("#cuestionario dl dd").live('click', function () {//ACCION DE LAS RESPUESTAS
        if($(this).hasClass('activo') || $('.activo').length < getN()){
            $(this).toggleClass('activo');
        }
    });
});
</script>
 
</head>
<body>
<a class="empezar_quiz" href="#"> Empezar con las preguntas</a>
 
<!-- Carga las preguntas y respuestas -->
<div id="cuestionario"></div>
 
<!-- Aqui se guardaran las respuestas -->
<input id="answers" name="answers" type="hidden" value="" />
 
<div id="next">Continuar</div>
 
<!-- DEBUG: muestra las respuestas seleccionadas -->
<span id="debug"></span>
 
</body>
</html>

por que digo que no entendiste del todo el script?, bueno por que si te fijas en el input answers, que es del tipo hidden, se guardan todas las respuestas que fueron elegidas por cada pregunta, y se guardan en este formato.

1:2,3,5|2:3 //ESTO ES POR PONER UN EJEMPLO

cada pregunta esta separada por "|", el numero de la pregunta es el que esta antes del ":" y las respuestas del usuario estan despues del ":", separadas por comas si es que hay mas de una.

si quieres saber que respuesta eligio el usuario, solo tienes que jugar con ese campo y sacar los valores que necesites.

neodani · #7 (**permalink**) 06/09/2010, 14:39

Cita:

Iniciado por tredio

creo que no has entendido del todo el script que te pase, te explico para que veas.
te coloco los comentarios.

por que digo que no entendiste del todo el script?, bueno por que si te fijas en el input answers, que es del tipo hidden, se guardan todas las respuestas que fueron elegidas por cada pregunta, y se guardan en este formato.

1:2,3,5|2:3 //ESTO ES POR PONER UN EJEMPLO

cada pregunta esta separada por "|", el numero de la pregunta es el que esta antes del ":" y las respuestas del usuario estan despues del ":", separadas por comas si es que hay mas de una.

si quieres saber que respuesta eligio el usuario, solo tienes que jugar con ese campo y sacar los valores que necesites.

Ahora lo he entendido mejor! muchas gracias tredio

Me he dado cuenta que si hago el quiz y luego recargo y lo vuelvo hacer, las respuestas se mantienen en la variable "val", debería limpiarse al cargar la pagina, no?

Ej. después de haber respondido y cargado la pagina, aparece
1:2,5,6|2:4|1:2,3,4|1:1,2,3|2:2

Después de leer nuevamente el código con tus comentarios, veo que la clave está en esta parte :D

val += getPregunta()+':'+respuestas;

Ya que si imprimo, me muestras las respuestas que se seleccionaron
alert(respuestas);

Entonces, esta es la parte que tengo que enviar al servidor cuando solicito la siguiente pregunta. Y ahí es cuando entra la función

function loadQuestion(){//CARGA LA SIGUIENTE PREGUNTA
$('#cuestionario').html('').load('preguntas.php?q= '+(++question));
}

El problema es que no he podido pasarle estos parámetros a esa función, porque el ámbito de la variable respuestas no lo permite... se puede declarar la variable global? para poder intentar algo así...??

function loadQuestion(){//CARGA LA SIGUIENTE PREGUNTA
$('#cuestionario').html('').load('preguntas.php?q= '+(++question)r=+respuestas);
//alert(respuestas);
}

Muchas gracias de antemano!

tredio · #8 (**permalink**) 06/09/2010, 16:23

bastaria enviarla como parametro de la funcion, podrias hacer algo asi.

Código Javascript:

Ver originalfunction loadQuestion(respuestas){//CARGA LA SIGUIENTE PREGUNTA
    var r = (respuestas)?'r='+respuestas:'';
    $('#cuestionario').html('').load('preguntas.php?q= '+(++question)+r);
}

neodani · #9 (**permalink**) 06/09/2010, 16:36

Cita:

Iniciado por tredio

bastaria enviarla como parametro de la funcion, podrias hacer algo asi.

Código Javascript:

Ver originalfunction loadQuestion(respuestas){//CARGA LA SIGUIENTE PREGUNTA
    var r = (respuestas)?'r='+respuestas:'';
    $('#cuestionario').html('').load('preguntas.php?q= '+(++question)+r);
}

Gracias tredio, estoy haciendo pruebas desde
http://neodani.com/fdw/jquery/quiz/

y es como si la variable r no tuviese valor, he puesto un alert que me debe decir el valor de r y no printa nada :S
Hice lo mismo con respuestas y me printa "undefined"

tredio · #10 (**permalink**) 06/09/2010, 16:45

debes modificar esta funcion, como te dije la variable se tiene que pasar por parametro, y no lo estas haciendo.

Código Javascript:

Ver original$('#next').click(function(){//ACCION DEL BOTON CONTINUAR
        if(getN() == $('.activo').length){//SI SE HAN SELECCIONADO LAS RESPUESTAS NECESARIAS
            var val = $('#answers').val();
            val = (val != '')?val+'|':val;
            
            var respuestas = '';
            $('.activo').each(function(i){
                respuestas += $(this).attr('id').split('-')[1];
                if(i!= ($('.activo').length-1))
                    respuestas+=',';
            });
            
            val += getPregunta()+':'+respuestas;
            $('#answers').val(val);
            loadQuestion(respuestas);
        }else{//SI NO ENVIAMOS UN MENSAJE DE ALERTA
            var n = getN();
            var text = (n > 1)?' preguntas':' pregunta';
            alert('Debe seleccionar '+getN()+text);
        }
    });

la primera vez no va a tener ninguna valor, por que que respuestas vamos a mandar si no hay preguntar cierto?

neodani · #11 (**permalink**) 07/09/2010, 00:08

Cita:

Iniciado por tredio

debes modificar esta funcion, como te dije la variable se tiene que pasar por parametro, y no lo estas haciendo.

Pensaba que te referías a esta loadQuestion(respuestas), y como vi que ya se la pasabas por parámetro por eso no me di cuenta :D

Ya se la he agregado a la función que comentas, ahora sí que puedo recibir las variables. Le puse un & para poder recibir dos variables
preguntas.php?q=2&r=1,2,3

http://neodani.com/fdw/jquery/quiz

También implementé que según la respuesta hiciese una pregunta u otra.
Sin embargo me surgen 2 dudas:

La primera es como incorporar un boton con la función de volver a la pregunta anterior, marcando la pregunta que el usuario respondió.

La segunda, también relacionada es como ir almacenando las respuestas, mejor usar una variable de sesión no? Ya que utilizar el campo hidden no es muy correcto si el usuario a recargado la página, porque no se limpia...

Adjunto el fichero preguntas.php

Código PHP:

Ver original<?php
//EN EL ID DE CADA dl COLOCAMOS q- SEGUIDO POR EL NUMERO DE LA PREGUNTA, ESTO ES PARA SABER EN QUE PREGUNTA VAMOS
//CADA RESPUESTA SERA ALGO PARECIDO, TENDRA UN ID r- SEGUIDO POR EL NUMERO DE LA RESPUESTA
//LA CLASE QUE TIENE EL dl, SERA PARA INDICAR CUANTAS PREGUNTAS DEBEN SER SELECCIONADAS ANTES DE CONTINUAR
 
$num_pregunta=$_REQUEST['q']; // Recoge el número de la pregunta
$mis_respuestas=array(); // Array donde se van guardando todas las respuestas que contesta el usuario
 
$mis_respuestas[$num_pregunta]=$_REQUEST['r'];
 
if ($_GET['q']==1){?>
<dl id="q-1" class="n[3]">
    <dt>Pregunta <?php echo $num_pregunta ?> : <b>Selecciona 3 colores:</b></dt> 
    <dd id="r-1">Rojo</dd>
    <dd id="r-2">Verde</dd> 
    <dd id="r-3">Azul</dd> 
    <dd id="r-4">Amarillo</dd> 
    <dd id="r-5">Negro</dd>
    <dd id="r-6">Naranja</dd> 
</dl>
 
<?php }elseif($_GET['q']==2) {?>
<dl id="q-2" class="n[1]">
    <dt>Pregunta <?php echo $num_pregunta ?> : <b>¿Qué lenguaje de programacion te gusta mas?</b></dt> 
    <dd id="r-1">JAVA</dd>
    <dd id="r-2">PHP</dd> 
    <dd id="r-3">ASP</dd> 
    <dd id="r-4">C</dd> 
</dl>
<p>DEBUG: Respuestas de la pregunta <? echo ($num_pregunta-1).' : '.$mis_respuestas[$num_pregunta]?></p>
 
<?php 
// En funcion de las respuestas anteriores se formula la siguiente pregunta...
}elseif(($_GET['q']==3)&&(($_GET['r']==1)||($_GET['r']==2))) {?>
<dl id="q-3" class="n[1]">
    <dt>Pregunta <?php echo $num_pregunta ?> : <b>Relacionada con PHP y JAVA </b></dt> 
    <dd id="r-1">respuesta 1</dd>
    <dd id="r-2">respuesta 2</dd> 
    <dd id="r-3">respuesta 3</dd> 
    <dd id="r-4">respuesta 4</dd> 
</dl>
<p>DEBUG: Respuestas de la pregunta <? echo ($num_pregunta-1).' : '.$mis_respuestas[$num_pregunta]?></p>
 
<?php }elseif(($_GET['q']==3)&&(($_GET['r']==3)||($_GET['r']==4))) {?>
<dl id="q-3" class="n[1]">
    <dt>Pregunta <?php echo $num_pregunta ?> : <b>Relacionada con ASP y C >> </b></dt> 
    <dd id="r-1">respuesta 1</dd>
    <dd id="r-2">respuesta 2</dd> 
    <dd id="r-3">respuesta 3</dd> 
    <dd id="r-4">respuesta 4</dd> 
</dl>
<p>DEBUG: Respuestas de la pregunta <? echo ($num_pregunta-1).' : '.$mis_respuestas[$num_pregunta]?></p>
 
<?php }elseif($_GET['q']==4) {?>
<dl id="q-4" class="n[1]">
    <dt>Pregunta <?php echo $num_pregunta ?> : <b>¿Cuál es tu edad?</b></dt> 
    <dd id="r-1">menos de 18</dd>
    <dd id="r-2">18-25</dd> 
    <dd id="r-3">26-40</dd> 
    <dd id="r-4">mas de 40</dd> 
</dl>
<p>DEBUG: Respuestas de la pregunta <? echo ($num_pregunta-1).' : '.$mis_respuestas[$num_pregunta]?></p>
<?php }?>

Muchas gracias de antemano

tredio · #12 (**permalink**) 07/09/2010, 12:24

sobre la segunda pregunta no te entiendo, que dices que el campo hidden no se borra al actualizar la pagina?, pues eso es exactamente lo que deberia de hacer, si no se te borra no tengo idea de por que esta pasando eso.

sobre la segunda aca te hice algo, pero el script se complico mas, mientras mas le quieras poner mas complicado se pone, aca te dejo lo que hice.

Código Javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/v1.98/DTD/v1.98-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Ejemplo de encuesta inteligente</title>
 
<style type="text/css">
#cuestionario {
    padding:10px;
    margin:0px;
    list-style:none;
}
#cuestionario dd {
    display:block;
    height:18px;
    text-decoration:none;
    color:#666666 !important;
    padding:1px 5px 1px 5px;
    border:1px solid #ffffff;
}
#cuestionario dd:hover {
    border:1px solid #e53500;
    text-decoration:none;
    cursor:pointer;
}
.activo{
    background:red;
    font-weight:bold;
    color:#fff;
}
.button{ width:100px; border:solid 1px #CCC; text-align:center; display:none; float:left; margin-right:20px;}
.button:hover{ background:#009; color:#FFF; cursor:pointer;}
</style>
 
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    var question = 1;
    
    function loadQuestion(param){//CARGA LA SIGUIENTE PREGUNTA
        var r = (param)?(param.respuestas)?'&r='+param.respuestas:'':'';
        $('#cuestionario').html('').load('preguntas.php?q='+(question)+r,(param)?param.callback:null);
    }
    
    function getRespuestas(){
        var respuestas = '';
        $('.activo').each(function(i){//OBTENEMOS LAS RESPUESTAS SELECCIONADAS
            respuestas += $(this).attr('id').split('-')[1];
            if(i!= ($('.activo').length-1))
                respuestas+=',';
        });
        return respuestas;
    }
    
    function seleccionarRespuestas(){
        var pregunta = getPregunta();
        var val = ($('#answers').val() == '')?'':$('#answers').val()+'|';
        
        var respuestas = getRespuestas();
        
        if(val.indexOf('R['+pregunta+']') != -1){//SI YA SE HAN SELECCIONADO RESPUESTAS PREVIAMENTE PARA ESA PREGUNTA
            var p = val.split('|')[parseInt(pregunta)-1];
            var p2 = p.split(':')[0]+':'+respuestas;
            val = val.replace(p,p2);
        }else{
            val += 'R['+pregunta+']:'+respuestas;
        }
        return {val:val,respuestas:respuestas};
    }
    
    function marcarElegidas(){
        var respuestas = $('#answers').val().split('|')[parseInt(getPregunta())-1].split(':')[1].split(',');//OBTENEMOS LAS RESPUESTAS SELECCIONADAS DE LA PREGUNTA
        for(var i=0;i<respuestas.length;i++){
            $('#r-'+respuestas[i]).addClass('activo');
        }
    }
 
    $('a.empezar_quiz').click(function() {
        loadQuestion()
        $(this).hide();
        $('.button').show();        
    });
    
    $('#next').click(function(){
        if(getN() == $('.activo').length){      
            var r =     seleccionarRespuestas();
            $('#answers').val(r.val);
            question++;
            loadQuestion({respuestas:r.respuestas,callback:marcarElegidas});    
        }else{
            var n = getN();
            var text = (n > 1)?' preguntas':' pregunta';
            alert('Debe seleccionar '+getN()+text);
        }
    });
    
    $('#prev').click(function(){
        if(getPregunta() != 1){
            if(getN() == $('.activo').length){              
                var r =     seleccionarRespuestas();
                $('#answers').val(r.val);
                question--;
                loadQuestion({respuestas:r.respuestas,callback:marcarElegidas});                
            }else{
                var n = getN();
                var text = (n > 1)?' preguntas':' pregunta';
                alert('Debe seleccionar '+getN()+text);
            }
        }else if(getPregunta() == 1){
            alert('Ya se encuentra en la primera pregunta.')
        }
    });
        
    function getN(){
        return $("#cuestionario dl").attr('class').split('n')[1].split(']')[0].split('[')[1];
    }
    
    function getPregunta(){
        return $("#cuestionario dl").attr('id').split('-')[1];
    }
    
    $("#cuestionario dl dd").live('click', function () {
        if($(this).hasClass('activo') || $('.activo').length < getN()){
            $(this).toggleClass('activo');
            //$("#debug").text("Hay " + $('.activo').length + " elementos seleccionados");
        }
    });
    
    // Una vez empieza el test el boton empezar debe desaparecer
    //$('a.empezar_quiz').hide();
});
</script>
 
</head>
<body>
<a class="empezar_quiz" href="#"> Empezar con las preguntas</a>
 
<!-- Carga las preguntas y respuestas -->
<div id="cuestionario"></div>
 
<!-- Aqui se guardaran las respuestas -->
<input id="answers" name="answers" type="hidden" value="" />
 
<div id="prev" class="button">Anterior</div>
<div id="next" class="button">Continuar</div>
 
<!-- DEBUG: muestra las respuestas seleccionadas -->
<span id="debug"></span>
 
</body>
</html>

neodani · #13 (**permalink**) 07/09/2010, 14:44

Cita:

Iniciado por tredio

sobre la segunda pregunta no te entiendo, que dices que el campo hidden no se borra al actualizar la pagina?, pues eso es exactamente lo que deberia de hacer, si no se te borra no tengo idea de por que esta pasando eso.

sobre la segunda aca te hice algo, pero el script se complico mas, mientras mas le quieras poner mas complicado se pone, aca te dejo lo que hice.

Si que empieza a complicarse, lo he subido online
http://neodani.com/fdw/jquery/quiz/

Te agradezco el tiempo que estas dedicando tredio

He visto que el botón anterior aparece en la primera pregunta, aunque tiene puesto el aviso de que estás en la primera pregunta, no sería mas cómodo que en la primera pregunta no apareciese?

Y otra cosa que veo es que cuando pasas la primera pregunta, cuando intentas volver para atrás te obliga a marcar una respuesta antes, esto imagino que está entrando en conflicto con la validación del if no?

Código Javascript:

Ver original$('#prev').click(function(){
        if(getPregunta() != 1){
            if(getN() == $('.activo').length){              
                var r =     seleccionarRespuestas();
                $('#answers').val(r.val);
                question--;
                loadQuestion({respuestas:r.respuestas,callback:marcarElegidas});                
            }else{
                var n = getN();
                var text = (n > 1)?' preguntas':' pregunta';
                alert('Debe seleccionar '+getN()+text);
            }
        }else if(getPregunta() == 1){
            alert('Ya se encuentra en la primera pregunta.')
        }
    });

Tampoco sé porque cuando abro el firebug la consola me muestra un error cuando avanzo de pregunta

$(
[Break on this error] var respuestas = $('#answers')...PUESTAS SELECCIONADAS DE LA PREGUNTA
linea 71

Puedes ver el error, te sale??

Mil gracias nuevamente

tredio · #14 (**permalink**) 07/09/2010, 15:38

bueno lo de borrar el boton en la primera pregunta no me parece dificil pienso que lo puedes hacer tu sin mucho problema, lo de marcar las preguntas al continuar o volver lo hice aproposito, no se me parecio mejor asi, pero tambien lo puedes cambiar como mas te guste. Lo del error se soluciona cambiando esta funcion

Código Javascript:

Ver originalfunction marcarElegidas(){
        var respuestas = ($('#answers').val().split('|').length == 1)?'':$('#answers').val().split('|')[parseInt(getPregunta())-1].split(':')[1].split(',');//OBTENEMOS LAS RESPUESTAS SELECCIONADAS DE LA PREGUNTA
        for(var i=0;i<respuestas.length;i++){
            $('#r-'+respuestas[i]).addClass('activo');
        }
    }

neodani · #15 (**permalink**) 07/09/2010, 16:35

Cita:

Iniciado por tredio

bueno lo de borrar el boton en la primera pregunta no me parece dificil pienso que lo puedes hacer tu sin mucho problema, lo de marcar las preguntas al continuar o volver lo hice aproposito, no se me parecio mejor asi, pero tambien lo puedes cambiar como mas te guste. Lo del error se soluciona cambiando esta funcion

Código Javascript:

Ver originalfunction marcarElegidas(){
        var respuestas = ($('#answers').val().split('|').length == 1)?'':$('#answers').val().split('|')[parseInt(getPregunta())-1].split(':')[1].split(',');//OBTENEMOS LAS RESPUESTAS SELECCIONADAS DE LA PREGUNTA
        for(var i=0;i<respuestas.length;i++){
            $('#r-'+respuestas[i]).addClass('activo');
        }
    }

He intentado cambiar la funcionalidad del boton atras, y no sé porque cuando el id de la pregunta no es 1, no me muestra el boton atras.

He cambiado el css para diferenciar boton de otro, aunque ambos tienen las mismas propiedades

#next.button,#prev.button{ width:100px; border:solid 1px #CCC; text-align:center; display:none; float:left; margin-right:20px;}
#next.button:hover,#prev.button:hover{ background:#009; color:#FFF; cursor:pointer;}

Y he modificado las dos funciones 3 funciones (tienen un comentario las lineas que he modificado)

Código Javascript:

Ver original$('a.empezar_quiz').click(function() {
        loadQuestion()
        $(this).hide();
        $('#next.button').show(); // muestro del boton continuar      
    });
    
    $('#next').click(function(){
        if(getN() == $('.activo').length){      
            var r =     seleccionarRespuestas();
            $('#answers').val(r.val);
            question++;
            loadQuestion({respuestas:r.respuestas,callback:marcarElegidas});    
        }else{
            var n = getN();
            var text = (n > 1)?' preguntas':' pregunta';
            alert('Debe seleccionar '+getN()+text);
        }
        if(getPregunta() != 1){ // si no estamos en la primera pregunta muestro el boton
            $('#prev.button').show();
        }
    });
    
    $('#prev').click(function(){
        if(getPregunta() != 1){
            if(getN() == $('.activo').length){              
                var r = seleccionarRespuestas();
                $('#answers').val(r.val);
                question--;
                loadQuestion({respuestas:r.respuestas,callback:marcarElegidas});                
            }else{
                var n = getN();
                var text = (n > 1)?' preguntas':' pregunta';
                alert('Debe seleccionar '+getN()+text);
            }
        }else if(getPregunta() == 1){
            //alert('Ya se encuentra en la primera pregunta.')
            $('#prev.button').hide(); // si estoy en la primera pregunta oculto el boton
        }
    });

Puedes verlo en la web http://neodani.com/fdw/jquery/quiz/

También he implementado la corrección, pero ha salido otro error de depuración en esta linea

$("#cuestionario dl").attr("id") is undefined
[Break on this error] return $("#cuestionario dl").attr('id').split('-')[1];
linea 124

Gracias de antemano :)

tredio · #16 (**permalink**) 07/09/2010, 17:36

solo basta con modificar esta funcion, pero quita los demas cambios que hiciste, excepto $('a.empezar_quiz').click().

Código Javascript:

Ver originalfunction loadQuestion(param){//CARGA LA SIGUIENTE PREGUNTA
        if(question == 1){$('#prev').hide();}else{$('#prev').show();}
        var r = (param)?(param.respuestas)?'&r='+param.respuestas:'':'';
        $('#cuestionario').html('').load('preguntas.php?q='+(question)+r,(param)?param.callback:null);
    }

el segundo error sucede cuando llegas a una pregunta que no existe, es decir, cuando no hay preguntas en pantalla, eso es algo que deberias de evitar( dejar la pantalla en blanco ), lo podrias hacer definiendo un numero maximo de preguntas, y cuando llegues a ese numero y le das continuar guardas todas las respuestas del usuario.

neodani · #17 (**permalink**) 07/09/2010, 23:59

Cita:

Iniciado por tredio

solo basta con modificar esta funcion, pero quita los demas cambios que hiciste, excepto $('a.empezar_quiz').click().

Código Javascript:

Ver originalfunction loadQuestion(param){//CARGA LA SIGUIENTE PREGUNTA
        if(question == 1){$('#prev').hide();}else{$('#prev').show();}
        var r = (param)?(param.respuestas)?'&r='+param.respuestas:'':'';
        $('#cuestionario').html('').load('preguntas.php?q='+(question)+r,(param)?param.callback:null);
    }

el segundo error sucede cuando llegas a una pregunta que no existe, es decir, cuando no hay preguntas en pantalla, eso es algo que deberias de evitar( dejar la pantalla en blanco ), lo podrias hacer definiendo un numero maximo de preguntas, y cuando llegues a ese numero y le das continuar guardas todas las respuestas del usuario.

Buenas tredio,

El botón atrás lo que es su aparición funciona correctamente :). Sin embargo, no está haciendo bien su papel. He intentado evitar que se tenga que marcar una opción para poder retroceder y lo he dejado así, una parte funciona:

Código Javascript:

Ver original$('#prev').click(function(){
        if(getPregunta() != 1){
            //if(getN() == $('.activo').length){              
                var r = seleccionarRespuestas();
                $('#answers').val(r.val);
                question--;
                loadQuestion({respuestas:r.respuestas,callback:marcarElegidas});                
            /*}else{
                var n = getN();
                var text = (n > 1)?' preguntas':' pregunta';
                alert('Debe seleccionar '+getN()+text);
            }*/
        }/*else if(getPregunta() == 1){
            alert('Ya se encuentra en la primera pregunta.')
        }*/
    });

Por ejemplo, si vas de la primera pregunta a la segunda y viceversa, sin seleccionar nada en la segunda, funciona bien. Pero a la que avanzas hasta la tercera pregunta, y vuelves para atrás hasta la primera, desaparecen las respuestas de la primera pregunta :S

Y sobre el error de depuración, no es que no exista la pregunta porque existe. Si pasas de la pregunta 2 a la pregunta 3 me aparece el error que te comentaba en el otro post, a ti no?

Puedes probarlo desde la web http://neodani.com/fdw/jquery/quiz/

Muchas gracias de antemano!

tredio · #18 (**permalink**) 13/09/2010, 21:48

es decir, no quieres que se tenga que marcar cuando se vaya para atras?, sabes lo hice asi (que se tenga que marcar) por que te evitas algunos problemas.

neodani · #19 (**permalink**) 13/09/2010, 23:46

Cita:

Iniciado por tredio

es decir, no quieres que se tenga que marcar cuando se vaya para atras?, sabes lo hice asi (que se tenga que marcar) por que te evitas algunos problemas.

Exacto que sea necesario marcar. Si te fijas funciona a medias, no se que pasa que si avanzas hasta la pregunta 3, vuelves a la 1, avanzas hasta la 3 y vuelves a la 1 veras que se han perdido preguntas....

Tampoco consigo eliminar el error de depuración en la consola del firebug, no se si tiene algo que ver con su comportamiento extraño...

$(var respuestas = ($('#answers'...SPUESTAS SELECCIONADAS DE LA PREGUNTA
# (línea 74)

tredio · #20 (**permalink**) 14/09/2010, 11:56

mm, bueno yo voy hasta la 3 me regreso voy de nuevo me vuelvo a regresar y no veo problema alguno, las preguntas siguen marcadas.

neodani · #21 (**permalink**) 14/09/2010, 16:14

Cita:

Iniciado por tredio

mm, bueno yo voy hasta la 3 me regreso voy de nuevo me vuelvo a regresar y no veo problema alguno, las preguntas siguen marcadas.

Es raro, lo he repetido varias veces nuevamente y sí, ahora funciona sin tocar nada raaaaaaaaro...

Sin embargo, si voy hasta la pregunta 4 (que existe, Pregunta 4 : ¿Cuál es tu edad?) luego no puedo volver para atrás si no marco ninguna respuesta.

En cambio, si marco alguna respuesta de la pregunta 4, si que me deja volver para atrás.

¿Te pasa lo mismo?

También si he realizado la encuesta previamente y recargo la página me sale el botón "empezar con las preguntas", pulso y me aparece la primera pregunta sin ninguna respuesta marcada, bien. Pero si respondo y avanzo hasta la segunda pregunta me detecta el valor guardado de la anterior encuesta. ¿A ti no?

Muchas gracias de antemano!

tredio · #22 (**permalink**) 14/09/2010, 16:20

bueno a mi en particular al llegar a una pregunta mayor a la tercera y devolverme, no pasa nada, es decir, no me muestra ninguna pregunta ni ninguna respuesta. y no al recargar la pagina todo queda bien, que navegador estas usando?

neodani · #23 (**permalink**) 14/09/2010, 23:46

Cita:

Iniciado por tredio

bueno a mi en particular al llegar a una pregunta mayor a la tercera y devolverme, no pasa nada, es decir, no me muestra ninguna pregunta ni ninguna respuesta. y no al recargar la pagina todo queda bien, que navegador estas usando?

No llegas a ver la pregunta 4 que dice
Pregunta 4 : ¿Cuál es tu edad?

Uso el navegador Firefox 3.6.9 y el IE 8, cual usas tu?

Y a mi muestra 4 preguntas, ¿lo estás probando desde la web?

http://neodani.com/fdw/jquery/quiz/

El fichero de preguntas es el siguiente, si que hay 4 pregunta...

Código PHP:

Ver original<?php
//EN EL ID DE CADA dl COLOCAMOS q- SEGUIDO POR EL NUMERO DE LA PREGUNTA, ESTO ES PARA SABER EN QUE PREGUNTA VAMOS
//CADA RESPUESTA SERA ALGO PARECIDO, TENDRA UN ID r- SEGUIDO POR EL NUMERO DE LA RESPUESTA
//LA CLASE QUE TIENE EL dl, SERA PARA INDICAR CUANTAS PREGUNTAS DEBEN SER SELECCIONADAS ANTES DE CONTINUAR
 
$num_pregunta=$_REQUEST['q']; // Recoge el número de la pregunta
$mis_respuestas=array(); // Array donde se van guardando todas las respuestas que contesta el usuario
 
$mis_respuestas[$num_pregunta]=$_REQUEST['r'];
 
if ($_GET['q']==1){?>
<dl id="q-1" class="n[3]">
    <dt>Pregunta <?php echo $num_pregunta ?> : <b>Selecciona 3 colores:</b></dt> 
    <dd id="r-1">Rojo</dd>
    <dd id="r-2">Verde</dd> 
    <dd id="r-3">Azul</dd> 
    <dd id="r-4">Amarillo</dd> 
    <dd id="r-5">Negro</dd>
    <dd id="r-6">Naranja</dd> 
</dl>
 
<?php }elseif($_GET['q']==2) {?>
<dl id="q-2" class="n[1]">
    <dt>Pregunta <?php echo $num_pregunta ?> : <b>¿Qué lenguaje de programacion te gusta mas?</b></dt> 
    <dd id="r-1">JAVA</dd>
    <dd id="r-2">PHP</dd> 
    <dd id="r-3">ASP</dd> 
    <dd id="r-4">C</dd> 
</dl>
<p>DEBUG: Respuestas de la pregunta <? echo ($num_pregunta-1).' : '.$mis_respuestas[$num_pregunta]?></p>
 
<?php 
// En funcion de las respuestas anteriores se formula la siguiente pregunta...
}elseif(($_GET['q']==3)&&(($_GET['r']==1)||($_GET['r']==2))) {?>
<dl id="q-3" class="n[1]">
    <dt>Pregunta <?php echo $num_pregunta ?> : <b>Relacionada con PHP y JAVA </b></dt> 
    <dd id="r-1">respuesta 1</dd>
    <dd id="r-2">respuesta 2</dd> 
    <dd id="r-3">respuesta 3</dd> 
    <dd id="r-4">respuesta 4</dd> 
</dl>
<p>DEBUG: Respuestas de la pregunta <? echo ($num_pregunta-1).' : '.$mis_respuestas[$num_pregunta]?></p>
 
<?php }elseif(($_GET['q']==3)&&(($_GET['r']==3)||($_GET['r']==4))) {?>
<dl id="q-3" class="n[1]">
    <dt>Pregunta <?php echo $num_pregunta ?> : <b>Relacionada con ASP y C >> </b></dt> 
    <dd id="r-1">respuesta 1</dd>
    <dd id="r-2">respuesta 2</dd> 
    <dd id="r-3">respuesta 3</dd> 
    <dd id="r-4">respuesta 4</dd> 
</dl>
<p>DEBUG: Respuestas de la pregunta <? echo ($num_pregunta-1).' : '.$mis_respuestas[$num_pregunta]?></p>
 
<?php }elseif($_GET['q']==4) {?>
<dl id="q-4" class="n[1]">
    <dt>Pregunta <?php echo $num_pregunta ?> : <b>¿Cuál es tu edad?</b></dt> 
    <dd id="r-1">menos de 18</dd>
    <dd id="r-2">18-25</dd> 
    <dd id="r-3">26-40</dd> 
    <dd id="r-4">mas de 40</dd> 
</dl>
<p>DEBUG: Respuestas de la pregunta <? echo ($num_pregunta-1).' : '.$mis_respuestas[$num_pregunta]?></p>
<?php }?>

Muchas gracias de antemano!

tredio · #24 (**permalink**) 15/09/2010, 09:51

si si la veo, lo que te digo es que cuando llego a cualquier pregunta mayor o igual a la tercera y me trato de devolver no me muestra ninguna pregunta, si me entiendes?

neodani · #25 (**permalink**) 15/09/2010, 11:31

Cita:

Iniciado por tredio

si si la veo, lo que te digo es que cuando llego a cualquier pregunta mayor o igual a la tercera y me trato de devolver no me muestra ninguna pregunta, si me entiendes?

La pregunta que me hago es... por qué no puedes retroceder hacia atrás una vez llegas a la pregunta 4? sabes que es lo que impide este comportamiento?

tredio · #26 (**permalink**) 15/09/2010, 11:51

si en realidad si se, sabes que desde la tercera pregunta empiezas a enviar parametros para ver cual pregunta vas a mostrar, de la forma en que esta hecho ahorita al retroceder no envia esos parametros y eso es lo que esta causando que no se muestre nada

neodani · #27 (**permalink**) 15/09/2010, 14:35

Cita:

Iniciado por tredio

si en realidad si se, sabes que desde la tercera pregunta empiezas a enviar parametros para ver cual pregunta vas a mostrar, de la forma en que esta hecho ahorita al retroceder no envia esos parametros y eso es lo que esta causando que no se muestre nada

Así que es culpa de esa parte... entonces que debo hacer? modificar el archivo de las preguntas o el javascript que controla la marcha atras...

Código Javascript:

Ver original$('#prev').click(function(){
        if(getPregunta() != 1){
            //if(getN() == $('.activo').length){              
                var r = seleccionarRespuestas();
                $('#answers').val(r.val);
                question--;
                loadQuestion({respuestas:r.respuestas,callback:marcarElegidas});                
            /*}else{
                var n = getN();
                var text = (n > 1)?' preguntas':' pregunta';
                alert('Debe seleccionar '+getN()+text);
            }*/
        }/*else if(getPregunta() == 1){
            alert('Ya se encuentra en la primera pregunta.')
        }*/
    });

He estado mirando y no veo por donde empezar a meterle mano.

Te agradecería mucho si me pudiese echar una mano :)

tredio · #28 (**permalink**) 15/09/2010, 17:11

si dejaras el script como te lo puse originalmente no habria problemas, como te dije antes creo que es mejor que se haya seleccionado una pregunta antes de volver.

por que no te gusta de esa manera?

neodani · #29 (**permalink**) 16/09/2010, 00:20

Cita:

Iniciado por tredio

si dejaras el script como te lo puse originalmente no habria problemas, como te dije antes creo que es mejor que se haya seleccionado una pregunta antes de volver.

por que no te gusta de esa manera?

Lo he modificado, ahora necesitas marcar una opción. De esta forma no veo que falle ;)
Si es muy complicado hacerlo de la otra forma lo dejaré así.

¿Sabes cómo agregar un botón en la última pregunta "FINALIZAR" ?
Si las preguntas fuesen fijas y tuviesen un número limitado de 10 preguntas y siempre fuesen 10, sería facil... pero al variar el número de preguntas según el camino que tomes, cómo lo haces?

Y otra pregunta, cómo guardarías las respuestas que se han ido marcando, para luego disponer de todas ellas cuando el usuario pulse sobre el botón FINALIZAR? utilizas alguna variable de sesión?

Lo he intentado así, pero no la guarda

Código PHP:

Ver original<?php
session_start();
//EN EL ID DE CADA dl COLOCAMOS q- SEGUIDO POR EL NUMERO DE LA PREGUNTA, ESTO ES PARA SABER EN QUE PREGUNTA VAMOS
//CADA RESPUESTA SERA ALGO PARECIDO, TENDRA UN ID r- SEGUIDO POR EL NUMERO DE LA RESPUESTA
//LA CLASE QUE TIENE EL dl, SERA PARA INDICAR CUANTAS PREGUNTAS DEBEN SER SELECCIONADAS ANTES DE CONTINUAR
 
$num_pregunta=$_REQUEST['q']; // Recoge el número de la pregunta
$mis_respuestas=array(); 
$mis_respuestas[$num_pregunta]=$_REQUEST['r'];
 
$_SESSION['quiz'][$num_pregunta] = $_REQUEST['r']; // Guardo en la variable de sesión las respuestas
 
if ($_GET['q']==1){?>
<dl id="q-1" class="n[3]">
    <dt>Pregunta <?php echo $num_pregunta ?> : <b>Selecciona 3 colores:</b></dt> 
    <dd id="r-1">Rojo</dd>
    <dd id="r-2">Verde</dd> 
    <dd id="r-3">Azul</dd> 
    <dd id="r-4">Amarillo</dd> 
    <dd id="r-5">Negro</dd>
    <dd id="r-6">Naranja</dd> 
</dl>
 
<?php }elseif($_GET['q']==2) {?>
<dl id="q-2" class="n[1]">
    <dt>Pregunta <?php echo $num_pregunta ?> : <b>¿Qué lenguaje de programacion te gusta mas?</b></dt> 
    <dd id="r-1">JAVA</dd>
    <dd id="r-2">PHP</dd> 
    <dd id="r-3">ASP</dd> 
    <dd id="r-4">C</dd> 
</dl>
<p>DEBUG: Respuestas de la pregunta <? echo ($num_pregunta-1).' : '.$_SESSION['quiz'][$num_pregunta]?></p>

Muchas gracias de antemano!

tredio · #30 (**permalink**) 16/09/2010, 09:56

el numero de preguntas lo podrias obtener usando un poco de ajax si no quieres recargar la pagina, y lo guardas en una variable, cuando llegues a ese numero de pregunta le cambias el texto del boton continuar a cancelar.

como ya te he dicho antes todas las respuestas estan guardadas en el campo hidden "answers" no se que vas a hacer con esas respuestas despues, me imagino que las guardaras en una base de datos.

lo que puedes hacer es que cuando el boton #next tenga como texto "Finalizar" tambien mandas las respuestas y las guardas.