Foros del Web - Ver Mensaje Individual - Cómo crear una encuesta/quiz inteligente con jquery

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.