Tema: Cómo crear una encuesta/quiz inteligente con jquery
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/09/2010, 05:43
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 2 meses
Puntos: 20
Cómo crear una encuesta/quiz inteligente con jquery
Buenas!

Llevo días intentando crear una encuesta inteligente, las he visto en compañias de seguros como
https://www.rastreator.com/seguro-co...mparativa.aspx

Te va haciendo preguntas, marcas tu respuesta y automaticamente te carga la nueva pregunta con sus respuesta, todo sin recargar la pagina completa.

He intentado buscar algo parecido en la red pero no he encontrado nada, así que estoy intentado crearlo, pero mis conocimientos de javascript y jquery son limitados y no sé como se implementaría un sistema similar.

Me surgen dudas, he estado analizando esa misma página para ver como llamaba y recibia los datos, y veo que no utiliza json ni xml, esta es respuesta de la pagina al solicitarle una nueva pregunta.

|¿Dónde aparcas habitualmente por la noche?|1:En la calle~2:En garaje colectivo~3:En garaje individual

Cómo se aprecia tan solo separa las opciones con un tuberias | y ~ en el caso de las posibles respuestas

¿Vosotros que me aconsejáis que utilice json, xml?

He intentado empezar de la siguiente manera

index.php
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. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. $(document).ready(function() {
  8.  
  9.     function Empezar(){
  10.         $('a.empezar_quiz').click(function() {
  11.             $('#cuestionario').load('preguntas.php?q=1'); //carga la primera pregunta
  12.         });
  13.     } 
  14.     
  15.     Empezar();
  16.     
  17.     $("#cuestionario dl dd").click( function () {
  18.         $(this).toggleClass('activo');
  19.         var n = $('.activo').length;
  20.         $("span").text("Hay " + n + " elementos seleccionados");
  21.     });
  22.     
  23.     // Una vez empieza el test el boton empezar debe desaparecer
  24.     //$('a.empezar_quiz').hide();
  25.  
  26. });
  27. </script>
  28. <style type="text/css">
  29. #cuestionario {
  30.     padding:10px;
  31.     margin:0px;
  32.     list-style:none;
  33. }
  34. #cuestionario dd {
  35.     display:block;
  36.     height:18px;
  37.     text-decoration:none;
  38.     color:#666666 !important;
  39.     padding:1px 5px 1px 5px;
  40.     border:1px solid #ffffff;
  41. }
  42. #cuestionario dd:hover {
  43.     border:1px solid #e53500;
  44.     text-decoration:none;
  45. }
  46. .activo{
  47.     background:red;
  48.     font-weight:bold;
  49.     color:#fff;
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <a class="empezar_quiz" href="#"> Empezar con las preguntas</a>
  55.  
  56. <!-- Carga las preguntas y respuestas -->
  57. <div id="cuestionario"></div>
  58.  
  59. <!-- DEBUG: muestra las respuestas seleccionadas -->
  60. <span></span>
  61.  
  62. </body>
  63. </html>


preguntas.php
Código PHP: 
Ver original
  1. <?php
  2. if ($_GET['q']==1){?>
  3. <dl>
  4.     <dt>Pregunta 1: <b>Selecciona 3 colores:</b></dt> 
  5.     <dd>Rojo</dd>
  6.     <dd>Verde</dd> 
  7.     <dd>Azul</dd> 
  8.     <dd>Amarillo</dd> 
  9.     <dd>Negro</dd>
  10.     <dd>Naranja</dd> 
  11. </dl>
  12. <?php } ?>

Pero la parte de marcar las opciones no me funciona.

Y no se como hacer para irle pidiendo nuevas preguntas una vez el usuario pulse sobre la respuesta...

Dejo el ejemplo online: http://neodani.com/fdw/jquery/quiz/

¿Podéis ayudarme?

Muchas gracias de antemano!
Última edición por neodani; 05/09/2010 a las 05:59