[ Índice ]

PIB

Generador de preguntas con respuestas en cuadros de entrada

Las actividades de preguntas con respuestas en cuadros de entrada (PIB) permiten introducir una pregunta con un cuadro de entrada en el que se debe introducir la respuesta. Una misma pregunta admite más de un cuadro (box) de entrada que debe rellenar el usuario. Cada cuadro puede ser de tipo texto o numérico según el tipo de respuesta que se espera. Las respuestas serán comprobadas de forma distinta según como sea el tipo de cuadro. Según si se acierta o no la pregunta se mostrará un u otro contenido. Este contenido deberá ser creado para ofrecer la información que se crea debe conocer el usuario. 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, algunos con más de un cuadro de entrada.

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 entrada (cadena o número) se espera del usuario y controlar el comportamiento del cuadro de entrada o box. Una misma pregunta puede tener más de un cuadro (box) de entrada. Cada cuadro tendrá sus valores y al pulsar en el botón para comprobar las respuestas se evaluarán no a uno. Editando el código puede introducir un número ilimitado de boxs que formarán parte de la misma pregunta.


Box 1: Tipo de cuadro:

El cuadro de entrada (inputbox) espera del usuario una entrada de texto o alphanumérica.

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 values.



Nombre del box o cuadro de entrada. Evite utilizar espacios en blanco.

values:
Además del valor existente en el html puede añadir otros valores considerados como válidos para resolver el cuadro.


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 este característica de html5.


El peso del cuadro respecto a otros cuadros que pueda tener la pregunta.


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="Introduzca un valor en el cuadro de entrada". Al tratarse del valor de un atributo html evite introducir caracteres no válidos como < y >.

Este formulario permite crear un cuadro de entrada (o box) por pregunta, sin embargo no hay límite en el número de cuadros que puede tener una pregunta. Puede añadir más cuadros manualmente. Solo debe saber que el script para una pregunta 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á cuadros en aquellos bloques del código html que tengan el atributo data-input-make="". El valor de este atributo es el nombre del box, es decir del nombre la propiedad del objeto boxs que contiene la configuración de ese cuadro. Puede añadir en el código JavaScript más objetos boxs para tener más cuadros en la misma pregunta. El procedimiento recomendado es:

  1. Crea con el formulario una pregunta con un cuadro. Copia y pega el código en su página.
  2. Utiliza el formulario para crear una nueva pregunta variando el nombre del campo box, p. ej. box2 (y evidentemente los otros campos que necesite).
  3. Copia solamente el código del objeto box (p. ej. "box2": { ... }) y lo pega en su documento detrás del objeto box 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-input-make="" y valor igual al nombre del box para que se cree el cuadro (p. ej. data-input-make="box2"). Deberá estar dentro de un bloque con atributo data-makeqs="" y valor igual al id de la pregunta.

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. La etiqueta fieldset se colocará dentro de un form envolviendo el div con el id de la actividad. Como en este tipo de actividad la existencia de este div es opcional, el conjunto form->fieldset solo se colocará si existe este div.

Si seleccionamos la opción hint se añadirá un botón que al pulsarlo mostrará ayuda en un bloque html. 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 contenido de los bloques con las explicaciones para cuando se acierta, cuando se falla y cuando se pulsa en el botón de ayuda. Puede limitarse a simplemente introducir "Correcto" y "Error" explicaciones mucho más elaboradas. También debe decidir si elimina el bloque con la información de intentos y del número de cuadros de entrada acertados respecto al total (recuerde que puede haber más de un cuadro de entrada o box), o si elimina el bloque en el que se introducirá la tabla con resultados anteriores. Puede cambiar el diseño y distribución de los bloques siempre que conserven los atributos.

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.

Al crear el código html los principales pasos y opciones son:
  • Puede incluir un div con el id de la actividad de manera que si selecciona la propiedad fieldset se añadira la misma etiqueta html envolviendo el interior del div. Si utiliza esta opción también puede incluir un bloque de atributo data-info-bottom="" y valor el id de la actividad para que su contenido se coloque al final de la etiqueta fieldset.
  • Debe añadir un bloque con el atributo data-makeqs="" de valor igual al id de la actividad.
  • En el interior del bloque anterior debe añadir los bloques de los cuadros de entrada, es decir, bloques con atributos data-input-make="" de valor igual al nombre de su objeto en la colección de objetos "boxs".
  • Debe añadir un bloque con el atributo data-input-btnchek="" con valor igual al id de la actividad. La biblioteca se encargará de situar en su interior el botón de chequeo.
  • Puede añadir un bloque con el atributo data-input-btnhint="" con valor igual al id de la actividad. La biblioteca se encargará de situar en su interior el botón de ayuda. Si lo hace deberá incluir un bloque oculto ( style="display: none;" aria-hidden="true") con el atributo data-info-hint="" con valor igual al id de la actividad. En su interior debe colocar la ayuda que se mostrará cuando se pulse el botón.
  • Puede añadir un bloque con el atributo data-input-showinfo="" con valor igual al id de la actividad. La biblioteca se encargará de situar en su interior la información sobre aciertos y fallos cada vez que se pulse en el botón de chequeo.
  • Puede añadir bloques ocultos con los atributos data-info-ok="" y data-info-ko="" con valor igual al id de la actividad. La biblioteca se encargará de mostrarlos cuando la actividad se resuelva bien o mal.
  • Puede añadir un bloque con el atributo data-stored-results="" con valor igual al id de la actividad. La biblioteca se encargará de situar en su interior la tabla con los resultados previos de la actividad, es decir, con la primera y última vez que la actividad se resolvió bien.

Opciones avanzadas [ mostrar/ocultar ]

[ Borrar valores almacenados y reajustar ]
myvalue
Contenido a mostrar cuando se pulsa en el botón de ayuda
¡CORRECTO!
¡ERROR!
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 general

Ejemplos con cuadros numéricos

Ejemplos con cuadros de texto

[ Índice ]