Tema: Cómo crear una encuesta/quiz inteligente con jquery
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 05/09/2010, 11:31
Avatar de tredio
tredio
 
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 16 años, 1 mes
Puntos: 66
Respuesta: Cómo crear una encuesta/quiz inteligente con jquery
puedes probar algo asi, sino entiendes algo preguntame por aca mismo.

HTML
Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/v1.98/DTD/v1.98-strict.dtd">
  2. <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
  3. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4. <title>Ejemplo de encuesta inteligente</title>
  5.  
  6. <style type="text/css">
  7. #cuestionario {
  8.     padding:10px;
  9.     margin:0px;
  10.     list-style:none;
  11. }
  12. #cuestionario dd {
  13.     display:block;
  14.     height:18px;
  15.     text-decoration:none;
  16.     color:#666666 !important;
  17.     padding:1px 5px 1px 5px;
  18.     border:1px solid #ffffff;
  19. }
  20. #cuestionario dd:hover {
  21.     border:1px solid #e53500;
  22.     text-decoration:none;
  23.     cursor:pointer;
  24. }
  25. .activo{
  26.     background:red;
  27.     font-weight:bold;
  28.     color:#fff;
  29. }
  30. #next{ width:100px; border:solid 1px #CCC; text-align:center; display:none;}
  31. #next:hover{ background:#009; color:#FFF; cursor:pointer;}
  32. </style>
  33.  
  34. <script src="jquery.js" type="text/javascript"></script>
  35. <script type="text/javascript">
  36. $(document).ready(function() {
  37.     var question = 0;
  38.     
  39.     function loadQuestion(){        
  40.         $('#cuestionario').html('').load('preguntas.php?q='+(++question));
  41.     }
  42.  
  43.     $('a.empezar_quiz').click(function() {
  44.         loadQuestion()
  45.         $(this).hide();
  46.         $('#next').show();      
  47.     });
  48.     
  49.     $('#next').click(function(){
  50.         if(getN() == $('.activo').length){
  51.             var val = $('#answers').val();
  52.             val = (val != '')?val+'|':val;
  53.             
  54.             var respuestas = '';
  55.             $('.activo').each(function(i){
  56.                 respuestas += $(this).attr('id').split('-')[1];
  57.                 if(i!= ($('.activo').length-1))
  58.                     respuestas+=',';
  59.             });
  60.             
  61.             val += getPregunta()+':'+respuestas;
  62.             $('#answers').val(val);
  63.             loadQuestion();
  64.         }else{
  65.             var n = getN();
  66.             var text = (n > 1)?' preguntas':' pregunta';
  67.             alert('Debe seleccionar '+getN()+text);
  68.         }
  69.     });
  70.         
  71.     function getN(){
  72.         return $("#cuestionario dl").attr('class').split('n')[1].split(']')[0].split('[')[1];
  73.     }
  74.     
  75.     function getPregunta(){
  76.         return $("#cuestionario dl").attr('id').split('-')[1];
  77.     }
  78.     
  79.     $("#cuestionario dl dd").live('click', function () {
  80.         if($(this).hasClass('activo') || $('.activo').length < getN()){
  81.             $(this).toggleClass('activo');
  82.             //$("#debug").text("Hay " + $('.activo').length + " elementos seleccionados");
  83.         }
  84.     });
  85.     
  86.     // Una vez empieza el test el boton empezar debe desaparecer
  87.     //$('a.empezar_quiz').hide();
  88. });
  89. </script>
  90.  
  91. </head>
  92. <body>
  93. <a class="empezar_quiz" href="#"> Empezar con las preguntas</a>
  94.  
  95. <!-- Carga las preguntas y respuestas -->
  96. <div id="cuestionario"></div>
  97.  
  98. <!-- Aqui se guardaran las respuestas -->
  99. <input id="answers" name="answers" type="hidden" value="" />
  100.  
  101. <div id="next">Continuar</div>
  102.  
  103. <!-- DEBUG: muestra las respuestas seleccionadas -->
  104. <span id="debug"></span>
  105.  
  106. </body>
  107. </html>

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