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

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>