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

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

aca te arregle, creo que ya anda todo bien.

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">
<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