Los controles del editor DescartesJS

El selector controles del editor de configuraciones

Los controles son objetos con los que el usuario, valga la redundancia, controla el objeto interactivo. Éstos permiten que el usuario haga modificaciones a los valores de las variables, lance animaciones, ejecute funciones, así como un gran número de otras acciones. Muchas de estas herramientas de interacción son seguramente familiares para el usuario, como lo son los pulsadores, las barras horizontales, los menús y los botones.

En el selector Controles puedes encontrar 11 tipos de control. Para esta sesión, sólo trabajaremos seis de ellos, algunos ya usados en sesiones anteriores como los controles tipo botón y tipo menú, que incluimos en esta introducción. Los controles de Audio y Vídeo los veremos en la siguiente sesión.

Los controles son fundamentales para la interactividad, permitiendo a los usuarios manipular el contenido dinámico en un objeto de aprendizaje interactivo (OIA), son la interfaz principal a través de la cual los usuarios interactúan con las simulaciones y contenidos interactivos en DescartesJS. Permiten el control del usuario, mejorando el compromiso y la exploración del material.

El control tipo botón

Este tipo de control numérico es el más simple. Consiste en un botón que al ser oprimido hace alguna acción. Muchos de los parámetros del botón son comunes a todos los controles.

Diseño

El diseño del botón se hace poniendo colores interiores y de texto; sin embargo, es posible incluir estilos especiales a través del cuadro de texto estilo extra, entre ellos:

overColor=f00| border=3| borderColor=1c42a5| borderRadius=15| flat=1

Cada estilo debe ir separado con la barra vertical "|". En el objeto interactivo de la derecha, destacamos, en los tres primeros botones, algunos estilos usados; por ejemplo, el estilo flat pone o elima un color de fondo degradado.

Uso

Un uso habitual del control tipo botón es el de hacer cálculos, como el botón "Calcular" del objeto interactivo.

Otro uso interesante es vincular una imagen al botón. Haz clic en "Avanzar", para observar una escena interactiva con dos imágenes vinculadas a botones.

El control tipo menú

Este tipo de control numérico es un menú típico. Resulta principalmente útil para permitirle al usuario tener acceso a alguna opción dentro del interactivo. Muchos de los parámetros del menú son comunes a todos los controles que hemos visto. En el objeto interactivo de la izquierda se muestra un ejemplo de un control numérico tipo menú en una escena.

Las opciones del menú se introducen en un campo de texto. Las opciones se separan mediante comas (,). Si se desea que la primera opción esté vacía, se puede colocar un espacio, luego una coma, y luego el resto de las opciones. Esto se hace cuando se quiere que el menú no tenga una opción particular seleccionada al iniciar el interactivo, sino que aparezca vacío. Las opciones del menú determinan el valor del mismo. La primera opción hace que éste valga 0, la segunda opción hace que valga 1 y así sucesivamente.

En el objeto interactivo "la opción 0" es el mensaje "Selecciona", que para los gráficos de la escena no aplican, pues los objetos gráficos se dibujan con las opciones 1, 2, 3, 4 y 5. Una mejora introducida recientemente, es la posibilidad de capturar el nombre de la opción seleccionada en el menú. Para el ejercicio, el menú lo hemos identificado (id) con la variable m1, de tal forma que el nombre de la opción lo pusimos usando m1.txt.

Control tipo pulsador

Control tipo pulsador

Este tipo de control se asocia con una variable que tiene el mismo nombre del identificador del pulsador. El pulsador permite aumentar y disminuir los valores de la variable, mediante un botón pequeño superior y uno inferior, respectivamente. Adicionalmente, también puede involucrar un campo de texto en el cual se le puede teclear un valor o expresión para modificar su valor.

El estilo del control se puede seleccionar en el menú posición de botones, mediante el cual se determina cómo se disponen los botones de decremento / incremento del pulsador respecto al campo de texto del mismo. Sus opciones son: vertical izquierda, vertical derecha, horizontal izquierda, horizontal derecha y horizontal extremos, tal como se aprecia en el objeto interactivo de la derecha.

Control tipo barra

Este tipo de control numérico consiste en una barra de desplazamiento (o scroll) horizontal o vertical que, al moverla, cambia su valor. Puede servir para moverse de un valor a otro alejado de forma rápida, aunque también permite cambios de valores más finos (desactivando la casilla fijo).

En el objeto interactivo de la izquierda, hemos puesto tres controles tipo barra, modificado posición y colores. Hemos asociado una imagen a estos controles, a través de la expresión (p1,p2,p3,p3), de tal forma que el primer control cambia la posición horizontal de la imagen, el segundo control la posición vertical y el tercero la proporción de la imagen.

Control tipo deslizador

Este control tiene un funcionamiento similar al de la barra de desplazamiento. En este caso un círculo se desliza a través de un eje que puede ser horizontal y vertical. La magnitud de su desplazamiento se define a través de un incremento y el control toma valores acotados entre un mínimo y un máximo. Permite definir el color y tamaño de los diferentes elementos que lo forman.

En el objeto interactivo de la derecha, hemos colocado cuatro controles tipo deslizador (p1, p2, p3 y p4) en distintas posiciones y con colores. Hemos insertado un círculo (elemento arco del menú gráficos) cuya posición, radio y ancho de borde estan establecidos por los controles tipo deslizador.

Control tipo casilla de verificación

Este control solo puede tomar dos valores 0 (desmarcado) o 1 (marcado). Su valor puede utilizarse como condicional binario en otras acciones de la escena. Se pueden ajustar el color, tamaño y la posición derecha o izquierda de la casilla de verificación.

Las casillas de verificación se pueden agrupar en un control tipo radio. Para ello, en un parámetro denominado grupo se debe poner el mismo nombre a todas las casillas de verificación que pertenezcan a dicho control. Esto hará que solo una de las casillas de verificación del grupo pueda estar marcada a la vez, permitiendo seleccionar un único elemento en este tipo de control.

En el interactivo de la izquierda se han incluido dos casillas de verificación y un control tipo radio y se puede ver como el valor de dichos control se utiliza en realizar diferentes acciones sobre la imagen de la mariquita.

Continuamos el segundo proyecto de aula, incluyendo en nuestro chatbot el texto en modo gráfico, el cual nos permite ver la respuesta en un tamaño de letra más grande y con el color que queramos. Adicionalmente, podemos cambiar la personalidad de nuestro bot conversacional.

En el siguiente video, puedes ver la explicación, paso a paso, de cómo implementar estas dos mejoras.