logoCoderhouse.png
By Nicolas Alliaume • enero 4, 2016

RespondeBot al rescate de las encuestas aburridas

Soy Nicolás Alliaume, desarrollador y próximamente profesor del primer curso de Coderhouse en Uruguay. En esta oportunidad les traigo un pequeño tutorial de RespondeBot para responder encuestas, donde primero les haré una introducción al DOM y a selectores.

Cuando creamos una página web, escribimos código HTML (y muy probablemente también CSS, Javascript, y quizás otros más) en uno o más archivos de texto. Lo que sucede con nuestro código HTML es super interesante una vez que la página cobra vida.

Al entrar a una página web, el código HTML que escribimos se transformará a una estructura en forma de árbol, llamado DOM. DOM quiere decir Document Object Model, o modelo de objetos del documento, y es una representación del sitio con todos sus elementos, en el mismo orden en que fueron definidos en el archivo de texto.

 

El DOM y las relaciones familiares

El DOM es un árbol compuesto de todos los elementos que se visualizan en nuestra página web.

Cuando escribimos:

<html>
<head>
...
</head>
<body>
...
</body>
</html>

Lo que estamos diciendo es que dentro de html existen 2 elementos que llamaremos hijos, que son head y body.

En formato árbol, esto se ve así:

Esto es muy importante, ya que entender las relaciones familiares que existen entre los elementos de una página web nos permitirá hacer todo tipo de magia negra.

¿Somos parientes?

Cuando escribimos nuestro código HTML definimos (sin querer) toda una familia entera (y bastante grande). Veamos otros tipos de relaciones.


<html>
<head>
<title>Bienvenido a la familia</title>
</head>
<body>
<header>
<h1>Todos son bienvenidos</h1>
</header>
<nav>
<ul>
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="contact.html">Contacto</a>
</li>
</ul>
</nav>
</body>
</html>

Este código en forma de árbol se ve así.

Unknown-1

He aquí una gran familia llena de relaciones de parentesco. Veamos algunas de ellas (que por cierto son bastante familiares).

 

Hijos

Se le llama hijos a los elementos que son hijos directos de otro nodo. Por ejemplo: head es hijo de html, header es hijo de body, los a son hijos de los li, etc.

 

Hermanos

Le llamamos hermanos a los elementos que comparten un mismo padre. En este ejemplo: head y body son hermanos, los li son hermanos, nav y header también lo son. Los a no son hermanos, porque cada uno tiene un li distinto como padre.

 

Descendientes

Creo que este elemento no necesita mucha explicación ya que también se comporta como en la vida real, pero, sólo pero si acaso: le llamamos descendientes a aquellos elementos que comparten un mismo ancestro (a cualquier nivel hacia arriba en el "árbol genealógico" de la página).

Por ejemplo: los a son descendientes de ul, nav, body, y html; header es descendiente de body y de html. Hay más relaciones de descendencia en este ejemplo, pero no listaré todas.

 

Id y class

Otros elementos muy importante de los documentos HTML son los atributos de los tags. En este post nos interesaremos particularmente en dos de ellos: el atributo id y el atributo class.

El atributo id permite definir un identificador único a nivel de toda la página web. El id de un elemento no debe repetirse.

El atributo class nos permite definir una especie de sistema de "etiquetas", que podremos utilizar luego para varios propósitos (por ejemplo, para dar un estilo similar a varios elementos que comparten una etiqueta). A diferencia del id, una misma clase se puede utilizar en más de un elemento (y de hecho, así será en la mayoría de los casos).
Un fragmento de HTML donde utilizamos ids y clases se ve algo así:

<nav id="top-nav">
<ul>
<li class="main_option top_option">
<a href="home.html">Home</a>
</li>
<li class="top_option">
<a href="contact.html">Contacto</a>
</li>
</ul>
</nav>

 

En este caso, utilizamos el id top-nav para identificar al menu superior, y dos clases llamadas main_option y top_option. La primera la utilizamos para etiquetar a la opción principal del menú. La segunda para etiquetar a todas las opciones del menú.

 

Ahora si. Selectores

Juntemos todos los conceptos vistos hasta ahora en lo que nos importa en esta oportunidad: los selectores.

Los selectores nos permiten, como dice su nombre, seleccionar elementos. ¿Para qué? Para hacer cosas con ellos, por ejemplo, darles un estilo particular (colores, fondos, tipografías), moverlos de un lado a otro, agregarles efectos, ocultarlos, y muchísimas cosas más. Los selectores resultan ser una parte fundamental en el desarrollo web.

 

Tipos de selectores

Hay varias formas de seleccionar elementos de una página web. Veamos algunas de las más comunes. Los ejemplos aplican sobre el siguiente código:


<nav id="top-nav">
<ul>
<li class="main_option top_option">
<a href="home.html">Home</a>
</li>
<li class="top_option">
<a href="contact.html">Contacto</a>
</li>
</ul>
</nav>

 

Selección por id

Una forma muy sencilla de seleccionar un elemento es utilizando su id (si tiene). Como el id es único, este selector nos permite encontrar un elemento muy fácilmente. Para seleccionar un elemento por id utilizamos el símbolo hashtag (#).

Por ejemplo:   #top-nav  =>  selecciona el menú superior.

 

 

Selección por clase

Otra forma muy común de seleccionar elementos es utilizando una clase. Para ello utilizamos el símbolo punto (.). Todos los elementos que estén etiquetados con la clase indicada serán seleccionados.

Por ejemplo:   .top_option  =>  selecciona todos los li del menú superior.

 

Captura de pantalla 2015-12-20 a las 4.11.57 p.m.

 

.main_option  =>  selecciona el primer li del menú superior

 

Captura de pantalla 2015-12-20 a las 4.11.32 p.m.

 

Selector por tag

A veces es necesario seleccionar todos los elementos que son de cierto tipo, y para eso tenemos el selector por tag. No es necesario utilizar ningún símbolo; simplemente el nombre del tag selecciona todos los elementos de ese tipo.

Por ejemplo:  li  =>  selecciona todos los elementos de tipo li

 

 

Selectores + descendientes

Algo muy interesante de los selectores es que podemos utilizar las relaciones familiares que vimos previamente. Esto es muy importante, ya que no es muy cómodo estar agregando clases e ids a todos los elementos de una página web.

Podemos formar un selector uniendo varios selectores por un espacio. El espacio quiere decir "descendientes de". Veamos algunos ejemplos.

#top-nav li  =>  selecciona todos los li que son descendientes de un elemento con el id top-nav (en este caso son 2 elementos).

 

 

#top-nav .main_option  => selecciona todos los elementos con la clase main_option que son descendientes de un elemento con id top-nav (en este caso hay uno solo).

 

 

nav .main_option a => selecciona todos los a, que son descendientes de los elementos con la clase main_option, que a su vez son descendientes de elementos de tipo nav (en este caso uno sólo).

 

Captura de pantalla 2015-12-20 a las 4.10.00 p.m.

 

RespondeBot

Supongamos que fuimos a un curso y al otro día nos envían una encuesta web de satisfacción. El curso estuvo muy bueno y, como somos buenas personas y nos gusta dar feedback, abrimos la encuesta. Con toda la buena predisposición del mundo nos preparamos para responder las… ¿¡45 preguntas múltiple opción!? ¿A quién se le ocurre!?

Esto es una tarea para RespondeBot, nuestro amigo contestapreguntas más rápido del condado.

RespondeBot recorre las preguntas múltiple opción y elige una opción al azar. Utilicemos los selectores para hacer que RespondeBot nos salve el día.

 

El HTML

Inspeccionando el sitio web, vemos que tiene la siguiente estructura.

<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>Encuesta curso</title>
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<h1>Encuesta de satisfacción</h1>
<form method="POST" action="submit.php">
<div class="pregunta">
<label class="texto_pregunta">¿Qué te ha parecido el curso en general?</label>
<label><input type="radio" name="pregunta-1" value="1"/> 1</label>
<label><input type="radio" name="pregunta-1" value="2"/> 2</label>
<label><input type="radio" name="pregunta-1" value="3"/> 3</label>
<label><input type="radio" name="pregunta-1" value="5"/> 4</label>
<label><input type="radio" name="pregunta-1" value="5"/> 5</label>
</div>
<div class="pregunta">
<label class="texto_pregunta">¿Qué opinas de los recursos audiovisuales utilizados?</label>
<label><input type="radio" name="pregunta-2" value="1"/> 1</label>
<label><input type="radio" name="pregunta-2" value="2"/> 2</label>
<label><input type="radio" name="pregunta-2" value="3"/> 3</label>
<label><input type="radio" name="pregunta-2" value="5"/> 4</label>
<label><input type="radio" name="pregunta-2" value="5"/> 5</label>
</div>
<div class="pregunta">
<label class="texto_pregunta">¿Qué te ha parecido la comida?</label>
<label><input type="radio" name="pregunta-3" value="1"/> 1</label>
<label><input type="radio" name="pregunta-3" value="2"/> 2</label>
<label><input type="radio" name="pregunta-3" value="3"/> 3</label>
<label><input type="radio" name="pregunta-3" value="5"/> 4</label>
<label><input type="radio" name="pregunta-3" value="5"/> 5</label>
</div>
...
<input type="submit" value="Enviar" />
</form>
</body>
</html>

Gracias a los desarrolladores de la página, parece un trabajo sencillo para RespondeBot. Veamos cómo resolverlo.

 

jQuery + Selectores

En esta parte comenzaré a hablar de jQuery. Si no estás al tanto de qué es jQuery o te interesa saber más, te recomiendo este sitio que tiene recursos geniales.

Una parte fundamental de jQuery son los selectores. Dentro de la función $ de jQuery podemos incluir los selectores que hemos visto para seleccionar elementos del DOM y hacer cosas con ellos.

En este caso, debemos buscar los radiobuttons de cada pregunta y elegir uno al azar, y luego enviar la información del formulario para finalizar la encuesta.

// RespondeBot

// 1. Seleccionamos las preguntas (los div's que rodean a cada una de ellas).
var $preguntas = $(".pregunta");

// 2. Para cada pregunta, seleccionamos los radiobuttons y escogemos uno al azar
$preguntas.each(function(index, elem) {

// 3. Buscamos los radiobuttons de la pregunta
var $radios = $(elem).find("input");

// 4. Elegimos un radiobutton al azar
var randomIndex = Math.floor( Math.random() * 5 ); // nos da un numero del 0 al 4
var randomInput = $radios[randomIndex];

// 5. Marcamos el radiobutton escogido al azar
randomInput.checked = true;

});

// 6. Enviamos los resultados
$('form').submit();

Eso es todo lo que necesitamos para que RespondeBot haga su magnífico trabajo. Veamos con más detalle algunas líneas.

En //1, seleccionamos utilizando un selector por clase todos los div's que agrupan a los elementos de una pregunta. Guardamos este resultado en una variable llamada $preguntas (el $ del comienzo es una nomenclatura que suelo utilizar para indicar que es un resultado de una función de jQuery).

En //2, recorremos ese resultado utilizando la función each de jQuery, que recibe una función como parámetro y llama a la función para cada elemento de la colección $preguntas, pasando por parámetro el índice y el valor de cada uno de estos elementos.

Dentro de esta función (//3), elem es el nodo del DOM, y utilizamos de nuevo la función de jQuery $ para obtener un objeto de jQuery [haciendo $(elem)], el cual nos provee de un montón de funciones, entre ellas, find.

La función find nos permite buscar elementos a partir de un nodo dado. En este caso, buscamos los radiobuttons utilizando un selector por tag haciendo $(elem).find('input').

En //4 utilizamos Math.random para escoger un radiobutton al azar. Math.random retorna un valor entre 0 y 1 (no incluye el 1). Multiplicando por 5 y redondeando hacia abajo obtenemos un número aleatorio entre 0 y 4. Con este número podemos obtener un radiobutton al azar utilizándolo como índice de la colección $radios.

Finalmente, en //5 marcamos el radiobutton escogido al azar, y en //6 submitimos el form para enviar los resultados.

 

Algunos comentarios finales

Con este post no pretendo convencerlos de que contesten encuestas o que dar un feedback sincero es algo del pasado. Cuando las encuestas se hacen correctamente, son información muy valiosa para quien las hace.

Los selectores son una parte fundamental del desarrollo web y en este post hemos visto los más sencillos. Te invito a que investigues más sobre ellos, es increíble todo lo que se puede hacer!