Cómo crear una encuesta/quiz inteligente con jquery

[neodani]

Muchas gracias por tus comentarios, te respondo

Iniciado por tredio

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.

Uhm me interesa esa opción, pero ¿cómo sé yo cuantas preguntas faltan si dependiendo del camino que elija pueden faltar mas o menos?

Iniciado por tredio

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.

El inconveniente que le veo a coger todas las respuestas del campo hidden "answers" es que a la que navegues un poco adelante y hacia atrás te queda algo así..

:3:3:2,3,4||R[2]:1|||R[3]:1|R[4]:3||||||

Iniciado por tredio

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

Si las va a enviar mediante el campo hidden answers no lo veo claro... No se pueden ir guardando en una variable de sesión en el script de preguntas.php y así tenerlas disponibles en todo momento?

Muchas gracias de antemano!

[tredio]

Iniciado por neodani

Uhm me interesa esa opción, pero ¿cómo sé yo cuantas preguntas faltan si dependiendo del camino que elija pueden faltar mas o menos?

realmente no habia pensado en eso jeje, otra solucion seria colocar una clase a la ultima pregunta que la identifique como tal, algo asi:

Código PHP:

<dl id="q-4" class="n[1] ultima">
    <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>
 

hacer enfasis en class="n[1] ultima", lo que te quedaria es preguntar si la pregunta tiene la clase ultima si es cierto finalizas el cuestionario. eso lo podrias hacer con la funcion hasClass().

Iniciado por neodani

El inconveniente que le veo a coger todas las respuestas del campo hidden "answers" es que a la que navegues un poco adelante y hacia atrás te queda algo así..

:3:3:2,3,4||R[2]:1|||R[3]:1|R[4]:3||||||

tienes razon no me habia fijado que pasaba eso, la idea cuando lo hice no fue que quedara asi, hay que arreglar esa parte. eso seria en la funcion seleccionarRespuestas(), hechale un ojo a ver si das con el problema, si no puedes me avisas y yo tambien trato de ver que esta pasando.

Iniciado por neodani

Si las va a enviar mediante el campo hidden answers no lo veo claro... No se pueden ir guardando en una variable de sesión en el script de preguntas.php y así tenerlas disponibles en todo momento?

de que se puede se puede, pero si ya los datos los tienes a la mano para que hacerlo?, solo hay que arreglar la funcion que te dije arriba y ya no tendrias problemas con agarrar los datos del campo oculto.

saludos

[neodani]

Buenas,

Estuve probando lo que me dijiste. Agregué la clase ultima en dos preguntas, ahora la secuencia es la siguiente

pregunta 1

pregunta 2
(dependiendo que selecciones se formulará la pregunta 3)

Respuesta 1,2 a la pregunta 2

pregunta 3

pregunta 4
(ultima)

Respuesta 3,4 a la pregunta 2

pregunta 4
(ultima)

Dejo el código que consigo esto

Código PHP:

<?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'] ="hola";
$_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 print_r($_POST['answers']); }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: <?php print_r($_POST['answers']);?>Respuestas de la pregunta <?php echo ($num_pregunta-1).' : '.$_SESSION['quiz'][$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] ultima">
    <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] ultima">
    <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 }?>
 

Y luego he intentado aplicar el hasClass() pero no me hace caso.

Código Javascript:

function loadQuestion(param){//CARGA LA SIGUIENTE PREGUNTA
        if(question == 1){$('#prev').hide();}else{$('#prev').show();} // Esconde el boton atras en la primera pregunta
        if ($('#cuestionario dl').hasClass('ultima')){ //Si detecta que es la ultima pregunta, muestra el boton finalizar en lugar de continuar
            $('#next.button').hide();
            $('#finaliza.button').show();
        }
        var r = (param)?(param.respuestas)?'&r='+param.respuestas:'':'';
        $('#cuestionario').html('').load('preguntas.php?q='+(question)+r,(param)?param.callback:null);
    }
 

También he intentado ver porque fallaba la seleccionarRespuestas() pero no he sabido por donde meterle mano

¿Puedes ayudarme?

Muchas gracias de antemano

[tredio]

aca te arregle, creo que ya anda todo bien.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/v1.98/DTD/v1.98-strict.dtd">
<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(boton,param){//CARGA LA SIGUIENTE PREGUNTA
        if(question == 1){$('#prev').hide();}else{$('#prev').show();}
        var r = (param)?(param.respuestas)?'&r='+param.respuestas:'':'';
        if( (boton == 'Continuar' && !$('#cuestionario dl').hasClass('ultima')) || boton=='Anterior'){
            $('#cuestionario').html('').load('preguntas.php?q='+(question)+r,function(){
                (param)?(param.callback)?param.callback():null:null;
                if ($('#cuestionario dl').hasClass('ultima')){ //Si detecta que es la ultima pregunta, muestra el boton finalizar en lugar de continuar
                    $('#next.button').text('Finalizar');
                }else if($('#next.button').text() == 'Finalizar'){
                    $('#next.button').text('Continuar')
                }
            });
        }else if(boton == 'Finalizar'){
            //terminas la encuesta
            alert('La encuesta termino')
        }
    }
    
    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();
        
        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 = (val == '')?'':val+'|';
            val += 'R['+pregunta+']:'+respuestas;
        }
        return {val:val,respuestas:respuestas};
    }
    
    function marcarElegidas(){
        var respuestas = ($('#answers').val().split('|').length == 1)?'':($('#answers').val().split('|')[parseInt(getPregunta())-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');
        }
    }
 
    $('a.empezar_quiz').click(function() {
        loadQuestion('Continuar')
        $(this).hide();
        $('#next').show();      
    });
    
    $('#next').click(function(){
        if(getN() == $('.activo').length){      
            var r =     seleccionarRespuestas();
            $('#answers').val(r.val);
            question++;
            loadQuestion($(this).text(),{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($(this).text(),{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');
        }
    });
});
</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>
 

el php es el mismo que me pasaste en el ultimo post

[neodani]

Buenas tredio, de nuevo darte mil gracias por dedicarle el tiempo que le estás dedicando ha ayudarme :)

He subido el fichero al servidor todo genial.

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

He estado haciendo pruebas y si vas por el camino largo (en el que haces mas preguntas), y luego vuelves para atrás y tiras por el el camino corto, el valor hidden de answers conserva todas las preguntas del camino largo...

Entiendo que si el usuario va para atrás y en lugar de elegir ese camino elige otro, en el campo answers, debería estar solo el camino final que ha seguido el usuario, no?

Muchas gracias de antemano!

[tredio]

uhm no habia pensado en eso, y en realidad tampoco se me ocurre como solucionarlo :S, creo que ya seria cuestion de validarlo cuando finalize la encuesta, por ejemplo, cuando estes guardando las respuestas, tendras que volver a validar, si en la tercera escogio 1 o 2, entonces hago tal cosa, sino hago lo otro. no se si me entendiste.

saludos.

[luke2011]

Hola por favor tenes el codigo php para darme como ejemplo, gracias.

[tredio]

bueno realmente yo no lo tengo, a ver si neodani todavia esta por aca y te lo puede facilitar, pero creo que en el mismo post esta el codigo.