Artículos sobre: Bloom Social

Átomo Social: Formulario

Átomo Social: Formulario



Los formularios son conjuntos de campos que permiten recabar información con un mayor detalle de los participantes en un curso. El átomo Formulario de Bloom es una extensión del átomo Texto Libre, pero a diferencia del anterior, el Formulario permite estructurar y validar los campos de información que el usuario completa.

Con este formulario podrás sustituir herramientas externas para captura de información como Google Forms o Typeform y así tener todos tus recursos educativos en un mismo lugar, con la ventaja adicional de capturar las respuestas de tus usuarios en tiempo real y tenerlas accesibles desde el mismo formulario y para su descarga en CSV.

En este tutorial podrás aprender cómo personalizar este átomo social e integrarlo a una molécula de aprendizaje para tus cursos en línea en Yeira.

Partes de un Formulario Bloom



Las opciones disponibles en un formulario Bloom son:

Campo de texto corto
Campo de texto largo
Etiquetas
Selector de opciones (Dropdown)
Opción múltiple (Radio Buttons)
Selector de fecha (Date Picker)
Switch Sí/No
Rating
Selección múltiple (Checkboxes)


Partes de un Formulario Bloom


En el Markup de Bloom, un formulario se define de la siguiente manera:

- Note:
    id: F1
    canUpdate: false
    submitted:
    - subtitle: Gracias por completar el formulario
    form: 
    - label: Nombre del Campo
    - type: text
    - help: Ayuda del Campo


Donde - Note: es el átomo y el id: F1 es el identificador único para el registro de datos en el sistema de Learning Analytics de Bloom.

Debes seleccionar un nombre único para la partícula id por cada átomo - Note: creado para lograr un registro de datos correcto.

submitted: es un atributo que nos permite desplegar un contenido adicional de cualquier tipo una vez que el formulario se envía.

Para activar las funciones de formulario es necesario agregar el atributo form: , dentro del cual podemos agregar una lista de campos de acuerdo a las descripciones que a continuación se muestran.

Campos y Atributos:



Los formularios se construyen con campos, que a su vez cuentan con ciertos atributos comunes y algunos atributos específicos.

Entre los atributos comunes se tienen las etiquetas o descripciones de cada campo en el atributo label:, las cuales también se utilizan como referencias para recuperar la información capturada en el módulo de** Learning Analytics**, y un campo con un mensaje de ayuda para el llenado del campo, a través del atributo help:.

El atributo canUpdate: cuando tiene el valor true permite al estudiante o usuario regresar a modificar los datos del formulario. En caso contrario los datos enviados pueden consultarse pero no modificarse.

La mayoría de los tipos de campos cuentan con la posibilidad de obligar su respuesta mediante el atributo required:. En este caso se mostrará al lado de la etiqueta del campo un símbolo *

Los tipos de campos disponibles en un formulario son los siguientes:

Texto corto
Texto largo
Casilla de Verificación
Selectores
Listas de Opciones
Palabras Clave
Fecha y Hora
Rate
Switch
Markup

A continuación veamos cada uno de los campos disponibles y sus atributos.

Texto corto



El campo de texto corto permite agregar una entrada en una sola línea de texto. Veamos el siguiente ejemplo:

Texto corto

El markup para definir este campo es el siguiente:

- Note:
    id: F1
    form:
    - label: Dirección
      type: input
      required: true
      maxlength: 20
      help: Agrega tu dirección, incluyendo el código postal.


En este tipo de campo es posible limitar el número de caracteres de entrada de un campo de texto con el atributo maxlength. También se puede agregar el atributo required: true para indicar que este campo debe ser llenado de manera obligatoria.

Texto largo



El campo de texto largo permite agregar una entrada en varias línea de texto. Veamos el siguiente ejemplo:

Texto Largo

El markup para definir este campo es el siguiente:

- Note:
    id: F1
    form:
    - label: Descripción
      type: textarea
      required: true
      maxlength: 20
      help: Agrega una descripción con más detalle


En este tipo de campo es posible limitar el número de caracteres de entrada de un campo de texto con el atributo maxlength. También se puede agregar el atributo required: true para indicar que este campo debe ser llenado de manera obligatoria.

Casilla de Verificación



El campo de casilla de verificación permite añadir una casilla simple para marcar un valor (cierto / falso).

Casilla de Verificación

El markup para definir este campo es el siguiente:

- Note:
    id: F1
    form:
    - label: ¿Has participado en un curso en línea anteriormente?
      type: checkbox


En este tipo de campo se puede agregar el atributo required: true para indicar que este campo debe ser llenado de manera obligatoria.

Selectores



El campo de Selectores permite añadir un grupo de opciones mutuamente excluyentes (radio buttons).


Selectores (Radio buttons)

El markup para definir este campo es el siguiente:

- Note:
    id: F1
    form:
    - label: Escolaridad
      type: radio
      options:
      - Preparatoria
      - Licenciatura
      - Maestría
      - Doctorado
      required: true
      help: Indica tu grado máximo de estudios concluídos


En este tipo de campo se puede agregar el atributo required: true para indicar que este campo debe ser llenado de manera obligatoria.

Listas de Opciones



El campo de Listas de Opciones permite añadir menú desplegable con varias opciones a seleccionar. La ventaja respecto al tipo de campo previo, Selectores, es que tiene una vista más compacta.

Lista de Opciones

El markup para definir este campo es el siguiente:

- Note:
    id: F1
    form:
    - label: Escolaridad
      type: select
      options:
      - preparatoria
      - licenciatura
      - maestría
      - doctorado
      required: true
      help: Indica tu grado máximo de estudios concluídos


En este tipo de campo se puede agregar el atributo required: true para indicar que este campo debe ser llenado de manera obligatoria.

Palabras Clave



El campo de Palabras Clave permite incluir textos clave breves en la forma de etiquetas. El usuario puede decidir libremente cada concepto a agregar.

Palabras Clave

El markup para definir este campo es el siguiente:

- Note:
    id: F1
    form:
    - label: Temas de interés
      type: tags
      max: 5
      required: true
      help: Agrega uno o varios temas de tu interés


En este tipo de campo se puede agregar el atributo required: true para indicar que este campo debe ser llenado de manera obligatoria. El atributo max permite limitar el número de palabras clave que pueden agregarse. Además se puede agregar el atributo required: true para indicar que este campo debe ser llenado de manera obligatoria.


Fecha y Hora



El campo de Fecha y Hora permite agregar valores en el tiempo en tres formatos, Fecha, Hora y Fecha + Hora.

Fecha y Hora

El markup para definir este campo es el siguiente:

- Note:
    id: F1
    form:
    - label: Fecha de graduación
      type: date
      required: true
      help: Indica la fecha en que concluiste tus estudios.


Los tres tipos posibles de este campo son date, time, y datetime, que corresponden a Fecha, Hora y Fecha + Hora.

En este tipo de campo se puede agregar el atributo required: true para indicar que este campo debe ser llenado de manera obligatoria.

Rate



El campo de Rate permite capturar una opinión mediante estrellas, desde un valor de 1 hasta un valor determinado.

Calificaciones con Rate

El markup para definir este campo es el siguiente:

- Note:
    id: F1
    form:
    - label: ¿Qué te ha parecido este curso
      type: rate
      max: 5
      required: true
      help: Compártenos tu valoración sobre el curso


En este tipo de campo se puede agregar el atributo required: true para indicar que este campo debe ser llenado de manera obligatoria. Además es posible definir el número máximo de estrellas de este campo con el atributo max

Switch



El campo de switch permite añadir un interruptor simple para marcar un valor (cierto / falso), agregando etiquetas diferentes dependiendo del estado del campo.

Campo de Switch

El markup para definir este campo es el siguiente:

- Note:
    id: F1
    form:
    - label: ¿Has participado en un curso en línea anteriormente?
      type: switch
      true: Si
      false: No
      required: true
      help: Indica si has participado con anterioridad en un curso en línea


En este tipo de campo se puede agregar el atributo required: true para indicar que este campo debe ser llenado de manera obligatoria.

Markup



Este campo es un mecanismo para insertar en cualquier parte del formulario otros contenidos de Bloom, ya sea átomos individuales con materiales diversos o explicaciones para ayudar en el llenado de los campos.

El markup para definir este campo es el siguiente:

- Note:
    id: F1
    form:
    - type: markup
      content: 
      - subtitle pt-3 has-text-left: Condiciones generales
      - has-text-left: Estas son nuestras condiciones generales de uso de contenido.


Este campo no cuenta con un atributo label:, y utiliza el atributo content: para insertar el contenido que se requiera.

Cuida el indentado del Markup para visualizar correctamente la conformación del contenido.

Despliegue de Datos



Una vez que se recaba la información de todos los participantes dentro del formulario, es posible consultar en dos niveles, el primero a nivel del Datastore de todo el contenido. En este caso toda la información recabada aparece en un único campo condensado.

Registro de datos en el Datastore

El segundo nivel de consulta se puede acceder en el botón de acceso a datos del formulario, ubicado al lado del botón de enviar. En este nivel de consulta se muestra un desglose de todos los campos, además de que se cuenta con opciones para el filtrado y ordenado de todos los campos, y la descarga de la información en formato CSV.


Acceso a datos de detalle

Datos a detalle de la captura del formulario

Además los usuarios pueden consultar la información que enviaron en el formulario cuando regresan al contenido, y dependiendo del campo canUpdate:, modificar la misma.

Ejemplo de campos para consultar la información enviada


¿Quieres aprender paso a paso? Inscríbete al curso gratuito "Introducción a Bloom" de Yeira Academy

¿Necesitas ayuda? Contacta al Soporte de Yeira en: soporte@yeira.training

¿Aún no tienes cuenta en Yeira? Crea una gratis ahora aquí.

Actualizado el: 02/08/2022

¿Este artículo te resultó útil?

Comparte tu opinión

Cancelar

¡Gracias!