QuizckQuiz 1.3.4 - Documentación

Toda la documentación se encuentra en una sola página HTML, por lo que puedes utilizar Ctrl+F o ⌘+F para buscar cualquier característica.

Tabla de contenidos


QuickQuiz es un sencillo y potente creador de test y/o encuestas que podemos publicar en una página HTML (no es un plugin para WordPress).

Estas son algunas de sus características más destacadas:

  • Diez tipos de preguntas: respuesta simple, respuesta múltiple, secuencia, parejas, respuesta larga, respuesta corta, escala, valoración, tabla con botones de radio y tabla de valoración.
  • Diferentes formatos de respuesta dependiendo del tipo de pregunta: botones, checkbox, radio, selección, deslizadores...
  • Varias opciones de presentación: número de botones por fila, imágenes a los lados o en el fondo, color principal, etc.
  • Páginas. Puedes crear todo el test en una o en varias páginas, eligiendo el número de preguntas en cada una de ellas.
  • Vídeo y audio. Se puede crear una página con vídeo o audio y con preguntas que se muestren en determinados momentos de la reproducción. Esta característica solo funciona correctamente en las últimas versiones de los navegadores web y se soporta gracias a la librería Videogular.
  • Varios tipos de test. El test puede ser de tipo examen, autoevaluación, preguntas en las que cada respuesta tenga diferente peso, test de tipo personalidad o encuestas.
  • Mensaje final y feedback. Se pueden mostrar diferentes mensajes o imágenes en la página final dependiendo del número de puntos, porcentaje de respuestas correctas, etc. El feedback hace referencia a comentarios que pueden mostrarse junto a la pregunta dependiendo de las respuestas del usuario.
  • Base de datos. Los resultados pueden enviarse a una base de datos MySQL (¡nuevo!) o a una base de datos creada con parse.com (obsoleto).
  • Generador online. El test final se genera a partir de dos archivos JSON, uno para la configuración general y otro para las preguntas que componen el test. Con la compra de este paquete se incluye el acceso a un generador para facilitar la creación de los archivos JSON.

Primeros pasos #back to top

Además de la carpeta que contiene esta documentación, en el archivo que hemos descargado tenemos la carpeta examples y la carpeta quickquiz, que será la que finalmente publiquemos.

Para facilitar la creación de los archivos JSON podemos acceder al generador online. Para poder acceder al configurador necesitamos el código de nuestra compra.

Necesitaremos un servidor web tanto para visualizar los ejemplos como para mostrar el test resultante. Si queremos ejecutar nuestro test de forma local es necesario disponer de un servidor local. Tenemos también la opción de usar el test sin servidor web, pero no es recomendable ya que hay varias limitaciones y es más complicado de modificar.

Si tenemos que probar el envío de la base de datos podemos instalar WAMP (Windows), MAMP (Mac OS X), o cualquier otro servidor local con PHP y MySQL. Si no necesitamos esta función (porque no enviamos los datos a una base de datos MySQL) recomiendo instalar el servidor Fenix por su sencillez de uso.

Paso 1. Entrar en http://fenixwebserver.com/. Descargar, instalar y ejecutar.

Paso 2. Crear un nuevo servidor.
- Web Servers -> New
- Le asignamos un nombre, por ejemplo QQ, y en directorio seleccionamos la carpeta que contiene los ejemplos y quickquiz.
- Hacemos clic en Create

Paso 3. Para arrancar el servidor nos situamos sobre el server creado y hacemos play, o bien seleccionamos Web Servers -> Start All

Paso 4. Hacemos clic sobre el nombre del servidor para abrir la carpeta. Allí podemos seleccionar nuestra carpeta quickquiz o cualquiera de los ejemplos.

QuickQuiz Builder #back to top

QuickQuiz Builder es una aplicación que podemos utilizar para generar los dos archivos JSON que necesitamos para crear nuestro test o cuestionario: el archivo config.json y el archivo questions.json. En los siguientes apartados explicaremos las diferentes opciones de este configurador.

La aplicación tiene cuatro áreas principales:

  • Settings. Contiene las secciones general settings, labels, score y database. En estos apartados configuraremos las características generales del test, y el resultado se mostrará en el archivo config.json.
  • Quiz. Aquí crearemos las páginas y preguntas que contendrá nuestro test, y para ello se creará el archivo questions.json que necesita nuestra aplicación.
  • Preview. En esta pestaña podemos previsualizar el test que estamos creando.
  • Download generated code. Desde aquí podemos ver y descargar los archivos json generados.

General settings #back to top Builder - Settings - General settings


Tipos de test

Tenemos que elegir entre los distintos tipos de test disponibles. De no seleccionar ninguno se considerará que es de tipo encuesta (survey). Según elijamos un tipo u otro de test tendremos disponibles unas opciones u otras, así que es importante hacer esta selección lo antes posible para evitar posibles errores.

Si en un test utilizamos preguntas que no están disponibles según el test seleccionado (por ejemplo, rating en un cuestionario de tipo personality), esas preguntas se mostrarán como de tipo encuesta (sin puntuar en este caso).

  • Graded: Selecciona graded si al menos una de las preguntas tiene respuestas de tipo correcto/incorrecto y quieres corregirlo automáticamente. Las preguntas que permiten valorar si la respuesta es correcta o incorrecta son: single answer, multiple answer, sequence, matching pairs, short answer y matrix - radio.

    Pulsa aquí para ver un ejemplo de test de tipo graded.


  • Weighted: Selecciona weighted si las respuestas no son correctas o incorrectas, sino que cada opción de respuesta tiene un valor diferente que se sumará para obtener la puntuación final. Las preguntas en las que cada respuesta puede valer diferente cantidad de puntos son single answer, multiple answer, matrix, likert scale y rating.

    Pulsa aquí para ver un ejemplo de test de tipo weighted.


  • Personality: Selecciona personality si se trata de un test de personalidad, de estilo BuzzFeed. En este caso deberemos definir unas posibles personalidades o categorías como resultado final, y cada respuesta puntuará en una categoría o en otra. El resultado final es la personalidad o categoría que haya obtenido más puntos. En caso de empate se mostrará como ganadora la primera de las ganadoras. Para este tipo de test podemos utilizar preguntas de selección múltiple: single answer y multiple answer.

    Pulsa aquí para ver un ejemplo de test de tipo personality.


  • Survey: Selecciona survey si no vas a realizar ningún tipo de valoración automática del resultado. En este tipo de test generalmente queremos enviar los resultados a una base de datos y evaluar manualmente las respuestas dadas. Para este tipo de test podemos utilizar cualquier tipo de pregunta.

    Pulsa aquí para ver un ejemplo de test de tipo survey.


Whiteframe

Mostrar el test dentro de un marco de color blanco con sombra.


Toolbar

Mostrar los títulos principales dentro de una barra de color.


Page number

Mostrar el número de página y las páginas totales en la parte inferior del cuestionario.


Progress bar

Mostrar una barra de progreso en la parte inferior que hace referencia al número de página en la que nos encontramos respecto al total.


Question number

Mostrar automáticamente el número de pregunta antes del enunciado.


Show points Opción habilitada si graded está seleccionado.

Mostrar los puntos que vale cada pregunta junto al enunciado.


Redo button

Muestra un botón para rehacer el test en la página final. Si intentamos probar esta opción en el builder las respuestas dadas se mantendrán, pero en el proyecto final las respuestas previas se borrarán, salvo que hayamos elegido guardar en localstorage (ver más abajo).


Opciones sobre preguntas requeridas

  • All required questions

    Selecciona solamente en el caso de que todas las preguntas sean obligatorias. Si no está seleccionado, tendrás la opción de hacer requerida cada pregunta individualemente.

  • Show asterisk

    Muestra un asterisco junto al título de la pregunta para marcar que la pregunta es requerida.

  • Unanswered action
    • - Show alert. Muestra la alerta cuando el usuario pulsa el botón para continuar y hay alguna pregunta requerida sin responder en la página actual.
    • - Hide next or submit button. Oculta el botón para continuar mientras haya alguna pregunta obligatoria sin responder en la página actual. Si hay seleccionada alguna alerta, ésta se mostrará por defecto hasta que el usuario responda.

  • Show global alert

    Muestra la alerta en la parte inferior de la página, junto a los botones para continuar, finalizar o enviar el cuestionario.

  • Show question alert

    Muestra la alerta de que la pregunta está sin responder bajo el título de la pregunta.


Opciones sobre Local Storage

  • Save LocalStorage

    Guarda las respuestas del usuario localmente. De esta forma, cuando el usuario vuelve a una página del test se pueden mostrar sus respuestas y seguir desde el punto en el que se encontraba.

  • Ask the user

    Muestra una ventana emergente en la que se pregunta al usuario si quiere cargar sus respuestas previas o si prefiere comenzar el test desde cero. Si no se pregunta al usuario y se ha seleccionado que se guarden sus respuestas localmente, sus respuestas se cargarán automáticamente.

  • Refresh browser

    Refresca el navegador en los cambios de página. Sólo está disponible si hemos seleccionado Save LocalStorage y Ask the user no está seleccionado.


Auto advance

La siguiente página se muestra automáticamente cuando el usuario responde. Sólo funciona correctamente si tenemos una pregunta por página o si todas las preguntas son requeridas, y además no utilizamos preguntas de introducción de texto o de respuesta múltiple.


Hide nav buttons

Oculta los botones de navagación (previous, next, finish). Sólo está disponible si hemos seleccionado Auto advance.


Page transition

Animación opcional de transición entre las páginas. Puedes elegir una animación de desvanecimiento (fade) y/o de desplazamiento lateral (slide).


Timer

Si deseas fijar un tiempo máximo para realizar el test escribe el tiempo en segundos. Cuando el tiempo haya transcurrido o bien se irá directamente a la página de puntuación final (score), o se enviarán directamente los resultados a la base de datos si has seleccionado envío desde la última página.

Deja el valor a cero si no quieres un temporizador.

Labels #back to top Builder - Settings - Labels


En este apartado se muestran los textos básicos del test: títulos, botones, mensajes, etc. Algunos de ellos aparecen con un texto por defecto que se puede modificar sin problema. No es necesario eliminar los textos que no vayamos a mostrar (por ejemplo, si no enviamos los resultados a una base de datos, no mostramos feedback, no mostramos algunos mensajes en la página de puntuación, etc.).


Home page

  1. Start Quiz Button

    Texto para el botón de inicio.

  2. Home title

    Título para la página de inicio.

  3. Home Description

    Descripción opcional de la página de inicio. Admite texto plano o etiquetas básicas HTML. Si queremos incluir HTML complejo podemos editar el archivo templates/home.html.


Quiz page

  1. Main title

    Título para las páginas con preguntas. Deja el campo en blanco si quieres que este título sea diferente en cada página.

  2. Points text

    Palabra que aparece tras el número de puntos de cada pregunta.

  3. Previous button

    Texto para el botón de página anterior.

  4. Next button

    Texto para el botón de página siguiente, si no estamos en la última página.

  5. Finish button

    Texto para el botón de finalizar el test.

  6. Feedback button

    Texto para mostrar el feedback si hemos seleccionado que sea una pregunta con feedback de tipo botón.

  7. Feedback window Ok button

    Texto del botón para cerrar la ventana del feedback.

  8. Feedback window title

    Título opcional para la ventana del feedback.

  9. Image popup window CLOSE button

    Texto del botón para cerrar el popup de la imagen lateral de la pregunta.

  10. Required global alert

    Texto para la alerta global en la parte inferior de la página si hemos seleccionado Show global alert.

  11. Required question alert

    Texto para la alerta bajo el enunciado de la pregunta si hemos seleccionado Show question alert


Send to database

  1. Submit button

    Texto para el botón de enviar las respuestas a la base de datos.

  2. Sent success

    Texto para el mensaje automático que aparecerá si los datos se han enviado correctamente.

  3. Sent error

    Texto para el mensaje automático que aparecerá si ha habido algún problema en el envío de los datos.

  4. Send form title

    Título para la sección de envío de los datos si incluye un formulario.

  5. Send form name input text

    Nombre del campo del nombre del usuario.

  6. Sent form email input text

    Nombre del campo del email

  7. Form required field error

    Error que aparece si pulsan en enviar pero no han rellenado un campo.

  8. Form email error

    Error que aparece si estamos en un campo de email y no es correcto.


Score page

La página de puntuación puede mostrar mensajes muy diversos. En la siguiente pestaña score donde seleccionaremos cuáles de estos mensajes se mostrarán finalmente.

  1. Score title

    Título para la página de puntuación

  2. Score description

    Descripción opcional para la página de puntuación. Si queremos incluir HTML complejo podemos editar el archivo templates/score.html

  3. Unanswered question

    Texto que aparece en las preguntas no respondidas.

  4. Answer previous text

    Texto que aparece antes de la respuesta del usuario. Dejar este campo en blanco si no se desea un texto previo.

  5. Solution previous text

    Texto que aparece antes de la solución. Si se eligiera mostrar sólo las soluciones se recomienda eliminar este texto.

  6. Correct

    Texto para mostrar el número de respuestas correctas.

  7. Incorrect

    Texto para mostrar el número de respuestas incorrectas.

  8. Left blank

    Texto para mostrar el número de preguntas no respondidas.

  9. Points scored

    Texto para mostrar los puntos conseguidos.

  10. Percentage scored

    Texto para mostrar el porcentaje basado en número de respuestas correctas respecto al total.

  11. Breakpoints by points

    Aquí podemos crear diferentes mensajes que se mostrarán según los puntos obtenidos. Podemos incluir todos los puntos de corte que necesitemos.

  12. Breakpoints by percentage

    Aquí podemos crear diferentes mensajes que se mostrarán según el porcentaje de respuestas correctas. Podemos incluir todos los puntos de corte que necesitemos.

  13. Assign messages according to the winning personality

    En los test de personalidad podemos añadir mensajes que se muestren dependiendo de la personalidad ganadora.

  14. Redo button

    Texto para el botón que permite rehacer el test.


Thanks page

Esta página es similar a la página de inicio, y sólo se mostrará si se ha seleccionado que se envíe el test a una base de datos, y que después se redirija a la página de agradecimiento.

  1. Thanks title

    Título para la página de agradecimiento.

  2. Thanks Description

    Descripción opcional de la página de agradecimiento. Admite texto plano o etiquetas básicas HTML. Si queremos incluir HTML complejo podemos editar el archivo templates/thank-you.html


Local Storage

  1. Pop-up asking the users if they want to load their previous answers

    Texto para la ventana emergente en la que se pregunta a los usuarios si quieren cargar sus respuestas anteriores. Este pop-up sólo se mostrará si General Settings - Ask the user está seleccionado.

  2. Load previous answers

    Texto para el botón que carga las respuestas almacenadas, Yes por defecto.

  3. Don't load previous answers

    Texto para el botón para empezar el cuestionario desde cero, sin cargar las respuestas almacenadas.

Score #back to top Builder - Settings - Score


  1. Total quiz points

    Puntos totales que vale el test. Los puntos se repartirán entre todas las preguntas que sean puntuables, es decir, que tengan la opción graded activada. Si se quiere asignar diferente valor a alguna pregunta entonces hay que dejar este valor a cero, y se asignarán posteriormente los puntos en las opciones de cada pregunta.

    Si no vamos a mostrar los puntos obtenidos, sino sólo el porcentaje de respuestas correctas o un feedback, no es necesario asignar puntos totales ni puntos en cada pregunta.

  2. Penalty points

    Puntos de penalización por cada pregunta puntuable que se falle. Dejar este valor a cero si se quieren asignar diferentes penalizaciones a cada pregunta, o bien si los errores no penalizan.

  3. Decimal places

    Número máximo de cifras decimales que se mostrarán si los puntos obtenidos o el porcentaje no son un número entero.

  4. Show message

    Mostrar un mensaje final destacado en la página de puntuación. En los puntos siguientes en esta lista (del 5 al 10) seleccionaremos qué se mostrará en este mensaje.

  5. Points

    Mostrar los puntos obtenidos.

  6. Maximum points

    Mostrar los puntos totales que se podían haber obtenido, siempre y cuando estemos mostrando los puntos obtenidos.

  7. Points message

    Mostrar un mensaje diferente según los puntos obtenidos. Los puntos de corte y los mensajes correspondientes se pueden crear en la pestaña labels.

  8. Percentage

    Mostrar la proporción de preguntas acertadas respecto al total. Este mensaje no depende de los puntos obtenidos, sino simplemente de la proporción de respuestas correctas.

  9. Percentage message

    Mostrar un mensaje diferente según el porcentaje obtenido. Los puntos de corte y los mensajes correspondientes se pueden crear en la pestaña labels.

  10. Summary

    Mostrar un mensaje que muestra el número de respuestas correctas, erróneas y sin contestar.

  11. Background and text color

    Color de fondo y del texto del mensaje destacado de la página de puntuación. Si eliminamos estos colores, el mensaje tendrá el mismo color que el color principal del test.

  12. Show quiz

    Muestra todas las preguntas del test, con opción de mostrar las respuestas del usuario y/o las soluciones según seleccionemos en los siguientes apartados.

  13. User answers

    Muestra las respuestas dadas por el usuario. Podemos eliminar el mensaje previo a las respuestas en la pestaña labels.

  14. Right/wrong icons

    Muestra el icono de correcto o incorrecto según la respuesta del usuario.

  15. Solution

    Muestra la solución a la pregunta en el caso de que el usuario no haya acertado, o bien si no estamos mostrando las respuestas del usuario.

  16. Personality message

    Muestra un mensaje diferente según la personalidad ganadora. Los mensajes correspondientes se pueden crear en la pestaña labels.

  17. Options about SHOW CUSTOM IMAGES on the score page

    En este apartado podemos asignar imágenes personalizadas en la página de puntuación dependiendo de la personalidad ganadora o de los puntos o porcentaje obtenido (dependiendo del tipo de test que estemos realizando).

  18. Options about SHARE ON SOCIAL MEDIA on the score page

    En este apartado podemos seleccionar si queremos que aparezcan iconos para compartir en las redes sociales (twitter, facebook, google plus o linkedin). Podemos asignar diferentes páginas para cada puntuación o personalidad obtenida, y así podremos personalizar el mensaje y la imagen que se compartirán en las redes sociales.

    En el caso de twitter, aunque los cambios en los metadatos se mostrarán en la Twitter card, debemos cambiar el texto que se compartirá en el archivo templates/score.html (alrededor de la línea 182).

    Si queremos compartir sólo la página de inicio del test deberemos modificar los metadata de nuestro index.html. Como puede verse en el ejemplo de test de personalidad incluido en este item, recomendamos crear diferentes páginas para cada posible resultado (están en la carpeta Share) y redireccionar esas páginas automáticamente a la página de inicio del test. De esta forma nos beneficiamos de tener metadata personalizados para compartir, pero todos ellos llevan a la página inicial del test.

    En la carpeta Share de nuestro test podemos encontrar también una plantilla básica exampleShare.html que debemos rellenar con nuestros datos y duplicar las veces que sea necesario.

Database #back to top Builder - Settings - Database


Si queremos guardar las respuestas de los usuarios o su puntuación podemos enviar los datos a una base de datos MySQL o bien utilizar Parse (no recomendado, ya que recientemente han anunciado su cierre).

En la pestaña database del generador tenemos las siguientes opciones:

  1. Send to database

    Si seleccionamos enviar a MySQL o Parse se activarán el resto de opciones de esta pestaña.

  2. Parse Application ID y Parse Javascript Key

    Esta opción sólo aparecerá si hemos seleccionado Parse. En ese caso deberemos copiar estas dos claves de nuestra aplicación.

  3. Table name

    Asigna un nombre para la tabla que guardará todos los datos recibidos. Puedes crear una tabla diferente para cada test que generes.

  4. Submit button

    Selecciona desde dónde quieres que aparezca el botón para enviar el test: en la página de score o al final del test, tras la última pregunta.

  5. Send user data

    Selecciona si junto a los datos quieres enviar también el nombre y/o email. Podrás elegir dónde quieres mostrar el formulario.

  6. Send quiz data

    Selecciona qué datos del test quieres que se envíen: porcentaje, puntos, personalidad ganadora y/o respuestas a cada pregunta.

  7. Show success

    Muestra un mensaje en una ventana emergente diciendo informando que los datos se han guardado correctamente en la base de datos.

  8. After sending go to

    Selecciona a qué página quieres que se redirija una vez enviado el test.

Instrucciones para MySQL

En la carpeta quickquiz/php/ encontraremos dos archivos PHP que tenemos que modificar con los datos de nuestro servidor.

El archivo sendMySQL.php es el utilizado para enviar los datos a la base de datos. El nombre de la tabla se cogerá del archivo config.json generado, pero el resto de datos del servidor los tenemos que cambiar dentro del archivo php:
$servername = "localhost";
$username = "yourUsername";
$password = "yourPassword";
$database = "yourDatabase";

El archivo showMySQL.php es opcional, simplemente es un ejemplo para mostrar en web los datos guardados en nuestra base de datos. En este caso también necesitaremos cambiar el nombre de nuestra tabla, además del resto de datos del servidor:
$table = "yourTable";

Instrucciones para Parse

Para consultar las respuestas recibidas accede al menú core (1) en tu aplicación (2) y pulsa sobre el nombre de tu tabla (3).

Si quieres importar la tabla en otras aplicaciones, expórtala desde Parse (4), y recibirás un email con un zip con los datos de la tabla en formato JSON. Este zip lo puedes importar directamente en http://json-csv.com/ y después pulsar en download para descargar la tabla en formato CSV.

Para mejorar la seguridad de Parse, recomiendo hacer los siquientes pasos:
  1. Envía un cuestionario de prueba contestando a todas las preguntas de tu test, para así generar la clase y las columnas/campos que necesitas.
  2. App Setting -> Security and Keys -> App Permissions -> Allow client class creation -> No para que no se puedan crear nuevas tablas. Recuerda habilitarlo de nuevo si creas un nuevo test.
  3. En Security -> Permissions -> Advanced de tu tabla puedes deseleccionar Read (Get and Find), Write (Update and Delete) y Add Field. Recuerda hacerlo después de haber recibido al menos los datos de un test que haya contestado a todas las preguntas, para que así se hayan generado todos los campos necesarios.

Pages#back to top Builder - Quiz - Pages

En la parte derecha de la pestaña quiz está el apartado pages, desde el que podemos crear y eliminar páginas. Las preguntas y las opciones que creemos se referirán a la página que se encuentre seleccionada en ese momento.

Page options #back to top Builder - Quiz - Page options

Title

Título opcional para la página actual. Si hemos dejado Settings- Labels - Main title en blanco, entonces este título aparecerá en el barra superior de la página actual. Si hubiera un título principal, el título de la página aparecería debajo de esa barra superior.


Description

Descripción opcional que aparecerá en el parte superior de la página actual.


Add video/audio source

Podemos añadir un vídeo o audio que aparecerá en la parte superior de la página actual. Si la página contiene audio o vídeo podremos seleccionar en qué momento de la reproducción se muestra cada pregunta de esa página. La reproducción del vídeo se detendrá cuando se muestre cada pregunta.

Si las preguntas son requeridas, al mostrarse una pregunta desaparecerán los controles para reproducir el vídeo hasta que el usuario haya respondido.

La aplicación permite elegir entre un vídeo de youtube o bien un archivo de vídeo o audio en formatos mp4, ogg, webm, mp3 (mpeg) o wav.

En el caso de utilizar archivos de audio o vídeo debemos seleccionar de qué tipo de archivo se trata. Podemos incluir varias fuentes para el mismo media en diferentes formatos. El navegador utilizará el primer formato que pueda reproducir.

En el apartado Autoplay tenemos la opción seleccionar que el vídeo se reproduzca automáticamente cuando el usuario ha respondido a la pregunta actual o bien cuando su respuesta sea correcta. Si hay una pregunta en el segundo 0 del vídeo, es posible que la reproducción automática no funcione en móviles.

Si utilizamos vídeos de YouTube debemos tener en cuenta que puede no funcionar correctamente en IE10.

Questions - Types #back to top Builder - Questions

Al añadir una pregunta veremos que hay preguntas de diferentes tipos. Según el tipo de pregunta que seleccionemos dispondremos después de diferentes opciones para elegir, tanto en lo relativo a su funcionamiento como a su presentación. En un apartado posterior se explicarán todas las opciones disponibles.

Una vez hemos creado una pregunta, podemos crear preguntas nuevas desde cero o bien copiando una pregunta anterior.


Multiple choice - Single answer

El usuario puede elegir una respuesta de entre varias posibles. Este es probablemente el tipo de pregunta más común. Las cuestiones de tipo verdadero/falso también se crean con este tipo de pregunta, ya que se trata de una respuesta simple entre dos opciones posibles.

Las opciones de respuesta se pueden mostrar como botones normales, botones de tipo radio, selección a partir de un lista desplegable o botones con imágenes.


Multiple choice - Multiple answer

El usuario puede seleccionar más de una respuesta de entre varias posibles.

Las opciones de respuesta se pueden mostrar como botones normales, casillas de verificación o botones con imágenes.


Sequence

El usuario tiene que ordenar una lista de opciones. Las opciones a ordenar se muestran como listas desplegables con el número de posición.


Matching pairs

El usuario tiene que emparejar dos listas de elementos.

Las opciones a emparejar se pueden mostrar como dos listas de botones, teniendo que emparejar los de la izquierda con los de la derecha, o bien como listas desplegables (select) junto a elementos fijos.


Short answer

El usuario tiene que escribir una respuesta corta a una pregunta.


Long answer

El usuario puede escribir una respuesta de más de una línea a una pregunta.


Likert scale

El usuario tiene que seleccionar un valor en una escala numérica. La escala puede mostrarse como botones o como un deslizador.


Rating

Sistema tradicional de rating, donde el usuario da una valoración seleccionando un número de estrellas, corazones o pulgares hacia arriba.


Matrix - Radio

Tabla en la que el usuario puede seleccionar una entre varias opciones para la sentencia o palabra de cada fila. Algunos de los usos habituales son las tablas de verdadero-falso, o bien tablas de opinión.


Matrix - Rating

Tabla de ratings, donde el usuario da una valoración seleccionando un número de estrellas, corazones o pulgares hacia arriba para cada una de las filas.

Questions - Basic and advanced options #back to top Builder - Questions

Desde la pestaña questions podemos abrir o cerrar panel de cada pregunta con el icono con forma de lápiz.

Para eliminar una pregunta utilizaremos el icono en forma de aspa.

En la parte inferior tenemos la opción de añadir una nueva pregunta o bien copiar una pregunta anterior. Esta opción de copiar otra pregunta puede ser de utilidad si estamos creando preguntas muy similares entre sí.

Una vez añadida una pregunta de un tipo determinado nos aparecerán una serie de opciones para esa pregunta. Las opciones disponibles variarán según el tipo de pregunta seleccionada y según qué opciones hayamos escogido en la configuración general.

Cuepoint Disponible para todas las preguntas si en las opciones de la página hemos seleccionado un vídeo o un archivo de audio.

Momento en segundos del vídeo o audio donde queremos que aparezca esta pregunta. Llegado ese momento del vídeo, la reproducción se detendrá y aparecerá la pregunta. Si habíamos seleccionado required questions en la configuración general entonces los controles del vídeo desaparecerán hasta que no hayamos contestado a la pregunta.


Statement Disponible en todas las preguntas.

Enunciado de la pregunta.


Description Disponible en todas las preguntas.

Descripción opcional que aparecería bajo el enunciado de la pregunta. Este campo admite tanto texto plano como html.


ID Disponible en todas las preguntas

Opcional ID. Sólo soporta una palabra sin espacios en blanco (no números).

Si enviamos las respuestas a una base de datos, este ID será el nombre de la columna para la pregunta actual en la base de datos. Si no se asigna un ID, el nombre de la columna será la letra q seguida por el número de la pregunta.

Este ID también puede ser útil para identificar una pregunta cncreta en múltiples casos (caminos condicionales que estarán disponibles próximamente, mensajes personalizados en la pantalla de puntuación, etc.)


Header Disponible en matrix - rating.

Cabecera opcional para la columna de rating.


Graded Disponible en single answer, multiple answer, sequence, matching pairs, short answer y matrix - radio, si General Settings - Graded está seleccionado.

Seleccionar si la pregunta es puntuable (si se evaluará automáticamente si la respuesta del usuario es correcta o incorrecta).

Si la pregunta es graded deberemos asignar una solución para el correcto funcionamiento del test.


Weighted Disponible en single answer, multiple answer, matrix, likert scale y rating si General Settings - Weighted está seleccionado.

Si estamos en un test de tipo peso (weighted) y en una pregunta en la que esta opción esté disponible, podremos decidir si esa pregunta va a puntuar. En caso afirmativo, podremos asignar diferente número de puntos a cada posible respuesta.

En el caso de rating, los puntos sumados corresponderán al rating seleccionado (si puntúan 3 estrellas, sumará 3 para la puntuación final). En el caso de likert scale el funcionamiento será similar por defecto, pero también tendremos la opción de asignar custom values, es decir, asignar puntos que no se corresponden al valor seleccionado de la escala.


Personality points Disponible en single answer and multiple answer si General Settings - Personality está seleccionado.

Aquí podemos asignar diferentes puntos a cada personalidad o categoría según la opción elegida. Una sola respuesta puede puntuar en diferentes categorías.


Image question Disponible en las preguntas de tipo selección múltiple: single answer y multiple answer.

Seleccionar si las opciones de respuesta van a ser imágenes en lugar de texto.


Left and right images Disponible en matching pairs.

Seleccionar si las opciones de respuesta en la derecha y/o en la izquierda van a ser imágenes en lugar de texto.


Left and right choices Disponible en matching pairs.

Escribe la lista de las primeras opciones de cada pareja en la lista de la izquierda y pulsa enter para añadirla. En la lista de las derecha escribe sus parejas en el orden en que quieras que aparezcan. Deberás tener el mismo número de opciones en la izquierda y en la derecha.

Si habías seleccionado images left o images right, las opciones correspondientes serán la ruta absoluta a cada imagen.


Choices Disponible en single answer, multiple answer, sequence y matrix - radio.

Escribe cada alternativa de respuesta y pulsa enter para añadirla. Si habías seleccionado image question el texto será la URL de cada imagen.

Si es una pregunta de tipo matrix - radio, cada opción corresponderá a una columna de la tabla.


Rows Disponible en matrix - radio y matrix - rating.

Escribe la frase o palabra para cada fila y pulsa enter para añadirla.


Rows ID Disponible en matrix - radio and matrix - rating si Settings - Database - Send to database (MySQL o Parse) está seleccionado

Opcional ID para la fila. Sólo soporta una palabra sin espacios en blanco. El nombre de la columna en la base de datos para la actual fila será QuestionID_RowID. Si no hay un ID asignado, el nombre de la fila será el ID de la pregunta y el número de la fila.


Other choice Disponible en single answer - radio buttons y multiple answer - checkbox si la pregunta es de tipo survey.

Crea una última opción other en la que podremos seleccionar una respuesta personalizada mediante un campo de texto.

  • Other option text. Texto para la opción other.
  • Other placeholder. Texto que aparecerá por defecto en el campo de texto si seleccionan esta opción.
  • Input position. Posición en la que aparecerá el campo de texto si seleccionan la opción other. Si colocamos el input en la derecha, podemos ajustar el margen en la línea 32 del archivo css/quickquiz.css.

Solution Disponible en single answer, multiple answer, sequence, matching pairs y matrix - radio si la pregunta es graded.

Esta opción aparecerá si la pregunta es graded y hemos escrito al menos dos opciones de respuesta. El tipo de formato para seleccionar la respuesta o respuestas correctas dependerá del tipo de pregunta en la que nos encontremos.

Si la pregunta es graded es imprescindible que asignemos una solución para el correcto funcionamiento del test.


Choices type Disponible en single answer, multiple answer y matching pairs.

Dependiendo del tipo de pregunta tendremos disponibles diferentes formatos para mostrar las opciones:

  • Button. Botones para hacer clic en single answer, multiple answer y matching pairs. Si hemos seleccionado image question, la imagen será el botón.
  • Radio. Botones de radio disponibles en las preguntas de tipo single answer.
  • Checkbox. Casillas de selección múltiple disponibles en multiple answer.
  • Select. Lista desplegable disponible en single answer y matching pairs.

Placeholder Disponible en short answer, long answer, o bien si en choices type hemos seleccionado select.

Texto por defecto que aparecerá en el lugar de introducción de texto si se trata de una pregunta de tipo short answer o long answer, o bien al inicio de una lista desplegable si hemos seleccionado una pregunta de tipo select.


Possible solutions Disponible en short answer si la pregunta es graded.

Aquí escribiremos todas las posibles respuestas correctas a la pregunta. La primera respuesta que escribamos se considerará la mejor, lo que significa que si el usuario no escribe ninguna de las soluciones consideradas correctas, entonces ésta será la solución que se mostrará en la página de score. Las mayúsculas no son tenidas en cuenta a la hora de considerar si la respuesta es correcta.


Sample solution Disponible en long answer.

Aunque no es posible corregir de forma automática una pregunta de respuesta larga, por lo que no pueden ser graded, en la página final de puntuación podemos mostrar una solución de ejemplo a este tipo de preguntas.


Points - Penalty Points Disponible si la pregunta es graded y si Settings - Score - Total quiz points es igual a cero.

Aquí pondremos cuántos puntos vale la pregunta, y si aplicamos puntos de penalización si el usuario responde de forma incorrecta. Si en la configuración hubiéramos asignado al test un valor de total quiz points de forma global, entonces ese valor del test se repartirá entre todas las preguntas que sean graded.


Feedback Disponible en todas las preguntas

El feedback se refiere a comentarios que podemos mostrar al usuario según vaya respondiendo al test. Son muy utilizados en test de autoevaluación. Hay disponibles varios tipos de feedback, dependiendo del tipo de pregunta en que nos encontremos.

Los feedbacks de tipo right/wrong, option, partial y basic se mostrarán bajo la pregunta. Los feedbacks de tipo score - wrong y score - always se mostrarán en la pantalla final de puntuación.

  • None. Seleccionaremos none si no queremos mostrar ningún feedback.
  • Right/Wrong. En este caso mostraremos diferentes comentarios dependiendo de si el usuario ha respondido de forma correcta o incorrecta. Disponible si la pregunta es graded (excepto para matrix).
  • Option. Aquí podemos mostrar diferentes feedbacks por cada posible respuesta. Disponible si la pregunta es single answer.
  • Partial. Este feedback permite mostrar diferentes tipos de respuesta según la proporción de aciertos en las preguntas de tipo multiple answer.
  • Basic. Si seleccionamos basic podremos mostrar un mismo comentario si el usuario ha respondido a la pregunta, independientemente de su respuesta.
  • Basic. Si seleccionamos basic podremos mostrar un mismo comentario si el usuario ha respondido a la pregunta, independientemente de su respuesta.
  • Score - Wrong. Este feedback se mostrará en la pantalla final de puntuación como solución a la pregunta si el usuario la ha fallado o dejado en blanco.
  • Score - Always. Este feedback se mostrará en la pantalla final de puntuación como solución a la pregunta, independientemente de si el usuario ha fallado, ha acertado o la ha dejado en blanco.

Dependiendo del feedback seleccionado aparecerá un campo llamado Feedback text donde podremos escribir los comentarios correspondientes a cada caso. No es necesario rellenar todos los campos: por ejemplo, podemos mostrar un comentario si la respuesta es incorrecta, pero no mostrar nada si la respuesta es correcta.

Por último, si hemos seleccionado un feedback que se muestre bajo la pregunta, también aparecerá un campo llamado Feedback class donde podremos elegir cómo queremos mostrar ese feedback: si a través de un botón, o que aparezca directamente el texto del feedback bajo la pregunta. Si hemos seleccionado feedback de tipo right-wrong y de clase texto se mostrará un icono de correcto o incorrecto junto al texto del feedback.


Top text Disponible en likert scale.

Textos que aparecerán en la parte superior de las preguntas de escala. Podemos mostrar textos en los extremos izquierdo y derecho, y añadir opcionalmente un texto central.


Scale type Disponible en likert scale.

Podemos elegir si queremos que la escala se muestre en una file de botones con números o como slider (un control deslizante).


Minimum value and Maximum value Disponible en likert scale.

Aquí asignaremos los valores mínimos y máximos de la escala.


Default value and Show number Disponible en likert scale si es de tipo slider.

Podemos asignar un valor por defecto en el slider. Esto permitirá que el slider pueda ser controlado con las flechas del teclado. La desventaja es que si el usuario no responde se asignará el valor por defecto como respuesta.

Otra opción disponible en el slider es la de mostrar el valor de la escala cuando el usuario la selecciona.


Select icon and Number Disponible en rating y matrix - rating.

En las preguntas de tipo rating podemos seleccionar entre tres tipos de iconos: estrellas, pulgares hacia arriba y corazones.

También podemos seleccionar cuántos de estos iconos queremos que aparezcan, es decir, cuál será el valor máximo.


Required Disponible si Settings - General Settings - All required questions no está seleccionado.

Selecciona esta opción si quieres que esta pregunta sea obligatoria.


Random Disponible en single answer, multiple answer, sequence, matching pairs, matrix - radio y matrix - rating.

Esta opción permite mostrar las opciones de respuesta (o las filas en los casos de matrix) en orden aleatorio.


Border color Disponible en matching pairs.

Muestra un borde de diferente color por cada pareja que el usuario ha seleccionado.


Aside image Disponible en todas las preguntas.

Permite mostrar una imagen junto a las opciones de respuesta. Podremos ver la imagen en un popup si pulsamos sobre ella.

En image path seleccionaremos la URL de la imagen.

En Image position podemos elegir si queremos mostrar la imagen en la parte derecha o izquierda de las opciones. La imagen ocupará la mitad del espacio disponible.

Con Show in the score podemos elegir mostrar también la imagen en la página de puntuación, aunque en este caso se mostrará siempre a la derecha.


Background image Disponible en todas las preguntas.

Permite mostrar una imagen de fondo bajo las opciones de respuesta. La imagen cubrirá todo el espacio disponible en el área de respuestas, y por ello es posible que se recorten algunas partes de la imagen.

En BG image path seleccionaremos la URL de la imagen.

En Minimum height podemos determinar el número de píxeles de altura mínima que tendrá la imagen. Dejaremos este campo sin rellenar si no necesitamos que la imagen sea más alta que el espacio donde mostramos las opciones de respuesta.


Width 50% Disponible en todas las preguntas.

Seleccionaremos esta opción si queremos que las respuestas ocupen la mitad del espacio disponible, y no el 100% de la anchura.


Options for buttons Disponible si las opciones de respuesta son buttons.

  • Items per row.

    Número de botones se mostrarán en cada fila. Los botones crecerán para ajustarse al número de items por fila que seleccionamos.

  • Keep width.

    Si activas esta opción se mostrará el mismo número de botones por fila tanto en escritorio como en móvil. Sólo se recomienda activar si el texto de los botones es muy breve. Si la opción no está activada, en móviles se verá un botón por fila.

  • Item separation.

    Separación entre los botones. Si lo desactivas no habrá espacio de separación entre los botones.

  • No border.

    Esta opción está sólo disponible si es una pregunta con imágenes como respuestas. Si seleccionas que no haya borde no habrá pista visual de si una imagen ha sido seleccionada.

  • Semitransparent.

    Permite ver ligeramente la imagen que se encuentre debajo de los botones. Es posible que queramos activar la semitransparencia en preguntas que tengan una imagen de fondo.

  • Text left.

    Por defecto, el texto de los botones está centrado. Si queremos que el texto esté alineado a la izquierda debemos seleccionar esta opción. Esta opción no está disponible si las opciones son imágenes.

Preview #back to top Builder - Preview

En la pestaña preview podemos previsualizar el test con la configuración y las preguntas que hayamos creado. Necesitamos tener al menos una pregunta para que se visualice correctamente. También necesitaremos tener un texto asignado al botón de inicio del test.

Download generated code #back to top Builder - Download generated code

Una vez creado nuestro test, podemos previsualizar y descargar el código necesario para publicarlo desde la pestaña download generated code.

Debemos descargar y guardar en la carpeta quickquiz/data tanto el archivo config.json como el archivo questions.json. Es importante no cambiar el nombre de estos archivos.

Si queremos utilizar la aplicación sin necesidad de un servidor web debemos guardar el archivo data.js que podemos descargar desde un botón en el pie de esta pestaña. En este caso es importante leer el apartado Publicación - Utilizar el test sin servidor web, ya que hay varias limitaciones y consideraciones a tener en cuenta en este caso. No se recomienda utilizar esta opción si tenemos la posibilidad de publicar el test en un servidor web.

Hay que tener en cuenta que los datos del configurador se pierden una vez hayamos salido de la aplicación. Si estamos creando un test muy extenso, es recomendable descargar y guardar las preguntas que vayamos creando, y cuando creemos nuevas preguntas simplemente copiar el código nuevo y pegarlo en el anterior archivo questions.json que hubiéramos generado en la anterior ocasión.

En el apartado Código - JSON de este tutorial explico la estructura de estos archivos por si queremos añadir manualmente nuevas preguntas. Esto será especialmente útil en test extensos o si tenemos muchas preguntas con características similares.

Color principal #back to top

Para cambiar el color principal de la aplicación (el color en que se muestra la barra de los títulos, los botones, etc.), debemos abrir el archivo quickquiz/js/quickquiz.js . En la línea 25 de ese archivo encontraremos el código que se muestra en la imagen de la derecha.

En primer lugar podemos cambiar el nombre del color, teal por defecto, por cualquiera de estos colores: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, white, blue-white.

También podemos cambiar el número del tono, 500 por defecto, por el que más se adecue a nuestras necesidades.

En el sitio http://www.google.com/design/spec/style/color.html#color-color-palette encontraremos una referencia de los colores y tonos disponibles.

Publicación #back to top

La carpeta que finalmente publicaremos es quickquiz, y el archivo de inicio es index.html. Es importante recordar que no es un plugin para Wordpress.

Una vez que hayamos descargado los correspondientes archivos JSON ya tendremos el test listo para publicar.

Si queremos incluir el test en otra página web tenemos que tener en cuenta que la página donde se inicie el test lea todos los archivos necesarios.

En la imagen de la izquierda, que es el archivo index.html de la carpeta quickquiz, vemos los archivos que necesitamos leer para que el test funcione: por un lado los archivos css en la cabecera (líneas 11-13) y por otro lado los archivos javascript antes de cerrar la etiqueta body (líneas 39-40).

En las líneas 28-34 está el test propiamente dicho. Si colocamos este fragmento de código en una web, siempre que tengamos el resto de archivos cargados y se mantenga la misma ruta al resto de carpetas (data, templates, etc.), el test funcionará correctamente.Dependiendo de en qué parte de la página insertes este div, es posible que tengas que eliminar la línea autoscroll="true" para evitar que al cambiar de página se desplace a la parte superior de la página.

También podemos añadir en este mismo archivos código html antes o después del div que contiene el test, como haríamos en cualquier otra página web.

Utilizar el test sin servidor web

Si necesitamos utilizar el test sin acceso a un servidor web, tenemos que borrar los comentarios de las líneas 37 y 38 del archivo index.html, eliminando <!-- al inicio de la línea 37 y --> al final de la línea 38. De esta forma leeremos el archivo data.js en lugar de los archivos config.json y questions.json (podemos descargarlo desde la pestaña download generated code). Por otro lado las plantillas HTML se leerán desde el fichero templates.js.

Tenemos que tener en cuenta que en este caso, si necesitamos hacer alguna modificación en la configuración, las preguntas, o los HTML, deberemos hacerlo en estos archivos, que son más complicados de editar que los archivos JSON o HTML (especialmente en el caso del HTML, que ahora es un string de JavaScript). Además, si no disponemos de servidor tampoco podremos utilizar el envío de los resultados a una base de datos. Por todo ello, siempre que sea posible se recomienda dejar esas dos líneas comentadas y publicar el test en un servidor web.

Funciona con todo tipo de preguntas excepto con rating y matrix-rating

Código - HTML#back to top

| - quickquiz
|   | - templates
|   |   | - question-types
|   |   | - home.html
|   |   | - main.html
|   |   | - quiz-question.html
|   |   | - score.html
|   |   | - templates.js
|   |   | - thank-you.html
|   | - index.html
				        

No es necesario modificar los archivos HTML para el correcto funcionamiento del test. Sin embargo voy a explicar la estructura de los archivos HTML por si necesitas realizar un cambio y no estás familiarizado con una aplicación de AngularJS.

A la izquierda podemos ver la estructura de la carpeta que contiene los archivos HTML más relevantes. Dentro de la carpeta questions-types se encuentran los archivos HTML para cada tipo de pregunta, pero es menos probable que necesitemos hacer modificaciones en alguno de estos archivos.

En el código de todos ellos podemos encontrar algunos elementos en común.

  • Los símbolos {{ }} son variables de AngularJS generalmente extraídas a partir de los datos de los JSON generados o de las respuestas del usuario.
  • Los atributos que comienzan con ng- son directivas de angular. Una de las que más se utiliza en esta aplicación es ng-if, que evalúa una condición para crear o eliminar el elemento HTML en el que se encuentra.
  • Los atributos relacionados con layout y los que comienzan con md- se utilizan para la creación de componentes basados en una librería de Material Design par AngularJS.

Como norma general, podemos añadir nuestros propios fragmentos HTML en cualquiera de los archivos sin afectar al funcionamiento correcto de la aplicación. También podemos borrar fragmentos enteros de HTML si estamos seguros de que nunca los vamos a utilizar. De todas formas la aplicación eliminará automáticamente todos los elementos HTML que no estemos utilizando, por lo que no es necesario eliminarlos manualmente.

También podemos reordenar los distintos elementos del HTML según nuestras preferencias.

El archivo index.html, explicado en el apartado de publicación, es el punto de inicio de la aplicación. Dentro del div principal, con id quickquiz, se irán cargando los distintos fragmentos HTML que requiera la aplicación, y que encontramos en la carpeta templates.

Importante: Si estamos utilizando la aplicación sin servidor web (no recomendado), todos los archivos HTML de esta sección se encuentran como una cadena de texto en el archivo templates/templates.js.


HOME.HTML

Esta es la página de inicio del test. Recordemos que podemos añadir o eliminar elementos HTML según nuestras necesidades. Tenemos cuatro apartados principales:

  • Home title. Título de la página de inicio.
  • Home description. Descripción opcional de la página de inicio.
  • Start button. Es la parte más importante de esta página, ya que es la que permite acceder al test.
  • Form. Formulario que sólo se mostrará si hemos seleccionado en el configurador que vamos a hacer un envío a una base de datos, queremos incluir el nombre y/o email del usuario, y además queremos que se envíe desde la página de inicio.

MAIN.HTML

Archivo contenedor del test, incluyendo los botones de navegación entre páginas. Estas son las partes principales de este archivo:

  • Timer. Temporizador que se mostrará fuera del marco contenedor del test.
  • Main title. Título opcional genérico para todas las páginas del test.
  • Questions. Aquí se leerá el archivo quiz-questions.html, explicado en el próximo apartado.
  • Page number y progress bar. Apartados opcionales para mostrar la página actual y el progreso.
  • Global alert. Alerta en el pie de página si hay preguntas requeridas sin contestar.
  • Page buttons. Botones de navegación que pueden variar dependiendo de en qué página nos encontremos y las páginas que tenga el test.

QUIZ-QUESTION.HTML

Este archivo contiene los elementos principales de una página, así como las preguntas que contiene cada una de ellas.

  • Main page title. Título principal de la página. Se mostrará si no hemos seleccionado un título genérico para el test.
  • Secondary page title El título de la página se mostrará como secundario si hubiera un título general para el test.
  • Page description. Descripción opcional de la página.
  • Video. Apartado donde se mostrará el reproductor si la página actual tuviera un vídeo o audio asociado.
  • Questions statement and points. Enunciado de cada pregunta y texto opcional donde con los puntos que vale.
  • Question required alert. Alerta que se muestra si la pregunta es requerida y está sin responder.
  • Question description. Descripción opcional de la pregunta.
  • Question answer container. En esta parte se mostrará la imagen lateral si la tuviera, y las opciones de respuesta de cada pregunta. Según el tipo de pregunta que se esté mostrando se leerá su respectiva plantilla HTML que podemos encontrar en la carpeta questions-types.
  • Questions feedback. Apartado donde se muestra el feedback asociado a cada pregunta.

SCORE.HTML

Página final, con opciones de mostrar diferentes mensajes relacionados con la puntuación obtenida, aciertos y errores, etc. Las partes de esta página que se mostrarán finalmente dependerán de las opciones que hayamos configurado en el generador.

  • Main title. Título para la página de puntuación.
  • Score description. Descripción opcional para esta página.
  • Message. Área con fondo de color donde aparecerán los mensajes que hayamos seleccionado: puntos conseguidos, mensaje relacionado con los puntos obtenidos, porcentaje de respuestas correctas, mensaje relacionado con el porcentaje obtenido o sumario con el número de preguntas correctas, incorrectas y sin contestar.
  • Show quiz. Área donde se mostrarán las preguntas del test, con opción de mostrar las respuestas del usuario y/o la solución a las preguntas.
  • Send answers to a database. Si hemos seleccionado que se envíe el test a una base de datos y que se envíe desde la página de score, aquí aparecerá o bien sólo el botón de enviar, o bien junto con un formulario para rellenar el nombre o email.

THANK-YOU.HTML

Página opcional a la que se puede reenviar al usuario una vez ha enviado el test a una base de datos.

  • Main title. Título para la página de agradecimiento.
  • Page description. Descripción de esta página. Si nos resulta más sencillo, podemos añadir aquí directamente todo el HTML que necesitemos.

Código - CSS#back to top

Los principales elementos de la interfaz están creados utilizando una implementación del Material Design.

Si necesitamos personalizar algunos elementos podremos añadir las clases que necesitemos en los HTML correspondientes, y asignar sus propiedades en el archivo css/quickquiz.css.

Las propiedades del archivo css/quickquiz.css que es más probable que queramos modificar se encuentran al inicio del código.

  • Podemos eliminar o sustituir el patrón de líneas fondo o background que hemos asignado a la etiqueta html.
  • En las líneas 15 y 16 podemos cambiar la fuente (font-family) y la anchura máxima (max-width) del test.
  • Si queremos que los iconos de las preguntas de tipo rating tengan un color específico al ser seleccionadas, y no el color por defecto del test, podemos asignar el color en la línea 27. Para ello debemos eliminar los comentarios de esa línea (/* */), y escribir el código del color.

Código - JSON#back to top

Los archivos JSON que hayamos generado los guardaremos en la carpeta quickquiz/data. Si necesitamos modificar algún dato de estos archivos, como por ejemplo añadir una pregunta similar a otra creada, podemos modificar directamente los archivos JSON. Para ello explicaré brevemente su estructura.

Si realizamos alguna modificación es recomendable usar herramientas para comprobar si nuestro JSON tiene algún error, como por ejemplo http://jsonlint.com/.

Importante: Si estamos utilizando la aplicación sin servidor web (no recomendado), todos los archivos JSON de esta sección se encuentran en el archivo data/data.js.


CONFIG.JSON

Este archivo está dividido en cuatro partes, cada una de las cuales corresponde a una de las pestañas de la sección Settings del generador: general settings, labels, score y database.

Si ya tenemos creado un archivo config.json pero queremos modificar alguna opción, lo más sencillo es seleccionar el cambio en el generador y buscar la línea o líneas correspondientes en el código generado que hayan variado, para después copiar esas línea donde corresponda en nuestro JSON.

De todas formas este JSON es muy intuitivo, y podremos en muchos casos realizar los cambios sin necesidad de entrar en el generador.


QUESTIONS.JSON

Para entender la estructura del archivo questions.json vamos a fijarnos en el ejemplo de la derecha.

Este test tiene dos páginas: la primera de ellas está delimitada por las llaves que están en las líneas 3 y 21, y la segunda entre las líneas 22 y 42 (esta página tiene el título science). Todas las llaves de cierre de una página tendrán después una coma excepto si se trata de la última página. En este caso vemos que la coma está tras el cierre de la primera página.

La primera página tiene dos preguntas: una de las líneas 5 a la 13 (con coma después del cierre de la pregunta), y otra entre las líneas 14 y 19 (esta vez sin coma, ya que se trata de la última pregunta de esa página). La segunda página tiene una única pregunta, que está entre las líneas 25 y 40.

Algunas cuestiones generales a tener en cuenta:

  • Después de cada par propiedad-valor va una coma, excepto después de la última propiedad de cada pregunta.
  • La solución es generalmente un número que significa el número de posición de la respuesta correcta, contando la primera posición como 0. Por lo tanto, si la respuesta correcta es la tercera opción, la solución sería el número 2. Esto puede variar dependiendo del tipo de pregunta seleccionada.
  • Si queremos añadir una pregunta que no tenga exactamente las mismas características que una pregunta ya creada anteriormente, es conveniente copiar el código de esa pregunta creado en el generador.

Código - PHP#back to top

En la carpeta quickquiz/php/ encontraremos dos archivos PHP que tenemos que modificar con los datos de nuestro servidor.

El archivo sendMySQL.php es el utilizado para enviar los datos a la base de datos. El nombre de la tabla se cogerá del archivo config.json generado, pero el resto de datos del servidor los tenemos que cambiar dentro del archivo php:
$servername = "localhost";
$username = "yourUsername";
$password = "yourPassword";
$database = "yourDatabase";

El archivo showMySQL.php es opcional, simplemente es un ejemplo para mostrar en web los datos guardados en nuestra base de datos. En este caso también necesitaremos cambiar el nombre de nuestra tabla, además del resto de datos del servidor:
$table = "yourTable";

Consejos y trucos#back to top

Eliminar la página de inicio y comenzar el test en la página de la primera pregunta

En el archivo quickquiz/js/quickquiz.js comenta la línea 105 añadiendo dos barras oblicuas y elimina el comentario de la línea 106 como se muestra en la imagen.


Eliminar el último botón del test para no ir a la página de resultados (score)

En quickquiz/js/quickquiz.js comenta la línea 242 como se muestra en la imagen.


Añadir un vídeo o un audio a una página

Se puede añadir un vídeo o un audio desde la pestaña de page options de una página. En el apartado Builder - Quiz - Page options está explicado el proceso.


Rutas relativas

Aunque en el builder no podemos utilizar rutas relativas a las imágenes o vídeos, podemos sustituirlas después en el archivo questions.json generado. A la hora de añadir una ruta relativa a una imagen o a un vídeo, tenemos que tener en cuenta que el archivo considerado como base para las rutas es quickquiz/index.html. Por lo tanto, si por ejemplo colocamos imágenes en la carpeta quickquiz/img, la ruta para acceder a ellas será img/yourimagename.png.


Mostrar la corrección del test después de que el usuario lo haya enviado a la base de datos

Si queremos que el usuario envíe su test y que sólo después vea su resultado seguiremos estos dos pasos:

  • En la pestaña Settings - Database del generador seleccionaremos Submit button - Send after the last questions para que el botón de enviar aparezca después de la última pregunta del test.
  • After sending go to - Score para que después de enviado pueda ver sus resultados (los que hayamos seleccionado que se muestren en la pestaña score).

Mostrar mensajes personalizados dependiendo de la puntuación

En el archivo templates/score.html hay un div de ejemplo que mostraría un fragmento HTML en la página final si la puntuación fuera mayor que 10 y menor que 50. Para utilizarlo simplemente debemos eliminar los comentarios <!-- antes del div y --> después del div. También modificaremos los valores de ejemplo (10 y 50) por lo que necesitemos. Podemos duplicar el div completo las veces que necesitemos para mostrar los mensajes dependiendo de cada condición. Si queremos trabajar con porcentaje en vez de con puntuación cambiaremos scorePointsRounded por scorePercentageRounded.

Esto sólo resultará útil si queremos mostrar algo más complejo que texto plano (imágenes, enlaces, etc). Si sólo queremos mostrar un mensaje simple de texto en el área de mensajes no sería necesario hacer este paso, ya que podemos seleccionar en la configuración que la página de puntuación muestre un mensaje dependiendo de los puntos o del porcentaje, y configurar nuestros mensajes desde el apartado labels del builder.


Ocultar automáticamente la barra de reproducción del vídeo

Para ocultar la barra de reproducción del vídeo automáticamente debes asignar el valor true al atributo autohide en la línea 31 del archivo quickquiz/templates/quiz-question.html.

Librerías e imágenes utilizadas#back to top

Changelog#back to top

  v1.3.4 – 2016/07/21
    New features:
        For personality quizzes, option to send the winning personality and frequency to the database

 v1.3.3 – 2016/07/06
    Bug fixes:
        Don't reset the quiz after submit the data if you send the user to the score page

 v1.3.2– 2016/06/30
    New features:
        You can choose to display the form on the last page, in addition to the home or the score
    Bug fixes and improvements:
        Improvements showing errors in the form (name and email)
        Fixed a little bug with the redirection after submit the quiz for Firefox and Safari.

 v1.3.2 – 2016/06/21
     Fixed a litlle bug with the "redo" button for Firefox and Safari.

 v1.3.1 - 2015/20/06
    Bug fixes: Fixed some problems with the redo button for Firefox and Safari

 v1.3.0 - 2016/16/06
    New features:
        Weighted quiz (different points for each choice) available with single answer, multiple answer, matrix, likert scale and rating questions
        BuzzFeed-style quizzes (personality quizzes) available with multiple choice questions (single answer and multiple answers)
        Social share (twitter, facebook, linkedin and google+)
        Show custom images on the score page regarding the points scored
        Optional automatic advance
        Option to run the quiz without web server (but not recommended). See the Publication section in the documentation.
        Option to save the current users' answers in their local storage so they can continue their quiz in other moment.
        Option to refresh the browser on page changes
        Option to show the aside images of the questions also in the score
        New feedback options: We can add a custom text for each solution on the score page
        Optional button to redo the quiz
    Bug fixes and improvements:
        Some basic HTML tags for questions statements and choices are now allowed, like strong, em, h1, p, br, sup, code, etc.
        Reset the quiz after submit the data
        Added a custom div example regarding the points scored on the score page
        Fixed error in the media player for audio files
        Fixed error showing images for matching pairs questions in the score page
        Fixed error with timer
        Fixed error in the showMySQL.php file
        Some minor fixes
 v1.2.0 - 2016/02/18
    New features:
         Send to MySQL Database
    Bug fixes:
        Show solution for unanswered matrix questions in the score page
        Prevent send twice to database
        Some minor fixes

 v1.1.0 - 2016/01/09
    New features:
         New questions: matrix with radio buttons and matrix with rating
         Required questions: optional alerts and required by question
         "Other" option for no graded multiple choice questions (single and multiple answer)
         Optional random for choices and rows within a question
         Border colors for matching pairs
         Optional autoplay for video quizzes
         Aside images can be displayed in a popup
    Bug fixes:
        Fixed some problems with the long answer textarea autogrow

 v1.0.1 - 2015/11/17
    Bug fixes: Fixed some problems with youtube plugin

 v1.0.0 - 2015/11/14
    Initial release