[ Índice ]

PGF

Generador de actividades de rellenar huecos

Las actividades de rellenar huecos (PGF) permiten introducir un texto con huecos en forma de cuadros de entrada o listas desplegables que deben ser rellenados con la respuesta correcta. Una misma pregunta admite más de un hueco (gap) de entrada que debe rellenar el usuario. Cada hueco puede ser de tipo cuadro de entrada o de tipo lista desplegable. Los cuadros de texto admitirán más de una respuesta correcta mientras que en las listas desplegables se presentarán varias respuestas de entre las cuales se deberá seleccionar la correcta. Puede un ejemplo con el resultado de las opciones escogidas en esta sección de la página.

También puede ver ejemplos de ejercicios al final de la página.

Este formulario ayuda a generar el código para crear este tipo de actividades educativas utilizando la biblioteca jsGeork. Después pulsar en el botón 'Genera' se creará el código html+javascript que deberá copiar y pegar en su página. Una vez haya pegado el código podrá modificar fácilmente la parte de código html con el contenido que verán los usuarios.


Llenar campo id es obligatorio e indispensable para que la actividad funcione. Se utiliza como atributo id del bloque HTML que contendrá la actividad, así como para generar otros identificadores y nombres de objetos para los scripts. Dado que los atributos id dentro de los documentos HTML deben ser únicos debe introducir una cadena que no se repita dentro del mismo documento o página web. Para facilitar que terceras personas puedan reutilizar el código, conviene que añadamos al principio del identificador un prefijo que nos identifique como autores. De esta forma minimizamos la probabilidad de que coincidan dos identificadores iguales en el mismo documento. El identificador debe tener como mínimo un carácter, no puede contener espacios y es sensible a las mayúsculas.
Opciones de respuesta:
Los siguientes campos sirven para especificar en una respuesta qué tipo de hueco (cuadro de entrada o lista desplegable) se quiere utilizar y controlar el comportamiento del hueco o gap. Una misma pregunta puede tener más de un hueco (gap). Cada hueco tendrá sus valores y al pulsar en el botón para comprobar las respuestas se evaluarán uno a uno. Editando el código puede introducir un número ilimitado de gaps que formarán parte de la misma actividad.


Gap 1: Tipo de hueco:

El cuadro de entrada (inputgap) espera que el usuario entre la respuesta correcta. Admite un botón de sugerencia que al pulsarlo llenará aquellos cuadros que estén vacíos con un guion bajo para cada carácter de la respuesta excepto uno que será mostrado realmente.

En el campo 'Solución' puede introducir la respuesta esperada por el usuario. El valor se colocará en el código html y será sustituido por el cuadro de entrada, pero puede dejarlo en blanco y colocar las respuestas aceptadas en los campos words.



Nombre del gap o hueco. Evite utilizar espacios en blanco.

words:
Además del valor existente en el html puede añadir otras palabras consideradas como válidas para resolver el hueco.


El peso del cuadro respecto a otros cuadros que pueda tener la pregunta. Se utilizará cuando la actividad forme parte de un test.


Si deben mostrarse las palabras alternativas aceptadas como válidas después de resolver un hueco con una de ellas.


Si la respuesta es sensible a las mayúsculas.


Permite introducir el texto a modo de ayuda que aparecerá en gris dentro del cuadro, siempre que el navegador acepte esta característica de html5.


Activa/desactiva en el cuadro el comportamiento de mostrar en una lista desplegable los valores que anteriormente se puedan haber introducido.


Ajusta el tamaño del cuadro a la longitud de la(s) respuesta(s) (size), limita el número de caracteres que se pueden entrar (maxlength), o ambas cosas (all). En todos los casos se limitará a la longitud de la respuesta menos restrictiva, es decir la más larga. En las preguntas numéricas no conviene restringir el número de caracteres que se pueden entrar.


Texto del atributo aria-label="" de la especificación WAI-ARIA. El atributo se colocará en el cuadro de texto y proporcionará información adicional a los usuarios que utilicen tecnologías de apoyo. Si deja el valor vacío no se incluirá la propiedad en el código y por tanto se utilizará el valor predeterminado, es decir, se colocará el atributo aria-label="Rellene el hueco introduciendo la solución". Al tratarse del valor de un atributo html evite introducir caracteres no válidos como < y >.

Este formulario permite crear un hueco (o gap) por actividad, sin embargo no hay límite en el número de huecos que puede tener una actividad. Puede añadir más huecos manualmente. Solo debe saber que el script para una actividad determinada buscará dentro de los bloques del documento que tengan el atributo data-makeqs="" con el valor igual al id de la actividad y creará huecos en aquellos bloques del código html que tengan el atributo data-gap-fill="" para los huecos en forma de cuadro, y data-gap-select="" para los huecos en forma de lista desplegable. El valor de este atributo es el nombre del gap, es decir del nombre la propiedad del objeto gaps que contiene la configuración de ese hueco. Puede añadir en el código JavaScript más objetos gaps para tener más huecos en la misma pregunta. El procedimiento recomendado es:

  1. Crea con el formulario una actividad con un hueco. Copia y pega el código en su página.
  2. Utiliza el formulario para crear una nueva actividad variando el nombre del campo gap, p. ej. gap2 (y evidentemente los otros campos que necesite).
  3. Copia solamente el código del objeto gap (p. ej. "gap2": { ... }) y lo pega en su documento detrás del objeto gap existente. No olvide incluir la coma al final del primer objeto, detrás de }.
  4. En el código html debe añadir el bloque con atributo data-gap-fill="" o data-gap-select="" y valor igual al nombre del gap para que se cree el hueco (p. ej. data-gap-fill="gap2"). Deberá estar dentro de un bloque con atributo data-makeqs="" y valor igual al id de la actividad.
Este campo permite introducir el número de intentos de que dispondrá el usuario para resolver los huecos. Una vez alcanzados los intentos no podrá intentarlo de nuevo hasta que no recargue la página. Puede dar a esta propiedad un valor cero (attempts: 0,) para no limitar el número de intentos. En este caso todavía puede utilizar el número de intentos del usuario para realizar acciones utilizando los eventos oncheck, onko y la variable this.attempts.

Si seleccionamos la opción fieldset se añadirá la etiqueta html del mismo nombre (grupo de campos). La etiqueta fieldset puede incorporar una etiqueta legend con la leyenda o título del grupo. La leyenda se utilizará también como título de las preguntas al listar los resultados de un test.

Si seleccionamos la opción hint se añadirá un botón que al pulsarlo mostrará, en los huecos de tipo cuadro de entrada, uno o más caracteres de la palabra y los demás sustituidos por guiones bajos. El contenido del bloque deberemos introducirlo editando el html. Aquí podemos modificar el texto del botón.
El código para que una actividad funcione estará compuesto por una combinación de código HTML, CSS y JAVASCRIPT. El campo anterior muestra el código HTML necesario. Podrá (deberá) modificarlo cuando copie y pegue el código completo en su documento HTML. Deberá modificar el texto que contiene los huecos dejando los bloques SPAN para cada palabra que quiera convertir en hueco y añadiendo más bloques con sus atributos si quiere más de un hueco en la actividad.

Los controles de la actividad se colocarán al final del bloque con la id de la actividad. El html con los huecos puede estar en cualquier parte del documento. Puede incluir una explicación en un bloque de atributo data-info-bottom="" con valor igual al id de la actividad para que se coloque en la parte final de la etiqueta fieldset, es decir, después de los controles de la actividad. Puede incluir también bloques ocultos con atributos data-info-ok="" y data-info-ko="" de valor igual al id de la actividad. Su contenido se colocará detrás de los controles y se mostrará cuando la actividad se resuelva bien y mal respectivamente.

El bloque que contenga el atributo id igual al atributo de la actividad terminado en "_info_aria" será enlazado por medio de atributos aria (aria-describedby="") como descripción de los huecos. En el código generado se utiliza en el enunciado de la actividad para describir los huecos.



El código incluye las instrucciones (en forma de comentarios html) para que se añadan las bibliotecas jQuery y jsGeork, necesarias para que funcione la actividad.

Opciones avanzadas [ mostrar/ocultar ]

[ Borrar valores almacenados y reajustar ]
Código: [Selecciona el código]
El cuadro anterior incluye el código de la actividad para que lo copie y pegue en su página. Para que funcione correctamente es necesario que la página cargue las bibliotecas jQuery y jsGeork. Para que la actividad se vea correctamente es necesario también que existan en la página las reglas CSS adecuadas. Si utiliza el software este se encarga de incluir los enlaces a los archivos .js y .css con las bibliotecas javascript y los estilos css. Si no utiliza el software deberá incluir los enlaces de forma manual.

Si tiene los mínimos conocimientos necesarios para escribir objetos javascript en notación literal puede editar el código manualmente para modificar la actividad, por ejemplo añadir más opciones de respuesta. Para detectar errores puede probar el código del interior de la etiqueta script en páginas como www.jshint.com. Por ejemplo, es aconsejable que no incluya la coma (,) final en las últimas propiedades de un objeto ya que en algunos navegadores antiguos produce error.

Ejemplos

Ejemplo 1 Ejemplo 2
[ Índice ]