Mostrar los cursores de los sujetos: Demostración Multi-Usuario

Resumen

En un experimento multiusuario donde múltiples participantes están participando en el experimento en tiempo real, puede que desees hacer que sus cursores sean visibles entre sí. En esta demostración, te mostraremos cómo configurarlo.

Nota sobre la implementación

Por favor, ten en cuenta que hay varios enfoques que puedes implementar para compartir las ubicaciones de los cursores de múltiples participantes en Labvanced, ya que la plataforma es flexible y, por lo tanto, es importante considerar tu diseño experimental antes de comprometerte con un enfoque.

Para hacer este punto más claro, presentaremos dos enfoques para lograr esto:

• Enfoque 1: una demostración que utiliza arreglos para distribuir la posición del cursor
• Enfoque 2: en una sección más adelante, discutiremos una demostración donde se pueden usar valores únicos para las coordenadas x e y

Enfoque 1: Visualización del Cursor Usando Seguimiento de Mouse y Arreglos

Esta demostración incluye dos objetos (un mouse por usuario) que se enumeran en el panel lateral en el panel de Objetos. Este enfoque se puede usar para estudios multiusuario donde hay 2 o más participantes.

Objetos

A continuación se muestra el panel de Propiedades del Objeto donde se puede manejar todo el estilo visual. Actualmente, ambos cursores tienen una Visibilidad de 1 (lo que significa opacidad =100%) como se muestra a continuación:

Para esta demostración, cambiaremos la Visibilidad a 0, como se muestra a continuación. Más tarde, cuando comience el experimento, haremos visible uno de los cursores. Es decir, si eres el Participante 1, verás el objeto del cursor aquí del Participante 2 y viceversa. Esto se describe en la sección de Evento:Init a continuación.

Si no deseas tener dos objetos para los cursores, consulta esta sección para ver un método alternativo con solo un objeto de cursor.

Variables Personalizadas

Aquí estamos enumerando todas las variables personalizadas que se crearon para los propósitos de esta demostración. Puedes crearlas con anticipación o dentro del editor mientras construyes tu experimento.

Resumen de Eventos

Para añadir un evento, haz clic en [+] Evento del Marco (solo en este marco).

Tenemos los siguientes eventos en esta demostración:

1. Evento:Init: Haciendo visible el mouse del otro participante
2. Evento: sendMove: Enviando las coordenadas del mouse
3. Evento: receiveMove: Recibiendo las coordenadas del mouse

A continuación, se describe la estructura de cada uno de los eventos.

EVENTO: init

Este evento especifica lo que sucederá cuando se inicie el marco. En este caso, nuestro objetivo es que el Participante 1 vea el mouse del Participante 2 y viceversa.

Disparador

El disparador para el evento es On Frame Init porque queremos asignar la visibilidad del objeto cursor tan pronto como se inicialice el marco.

Acción

Después de especificar esto y hacer clic en el botón ‘Siguiente’, puedes seleccionar las acciones que ocurrirán al iniciar el Marco.

A continuación, mostramos que la acción que usamos es una Acción de Control → ‘If… Then’, así que:

• Si Role_Id es igual a 1 (Nota: Role_Id es una variable que es única para estudios multiusuario y asigna al participante su ID).
• Entonces, Establecer Propiedad del Objeto de la visibilidad del objeto mouse_user_2 a 1.
• Nota: La combinación de estas dos acciones significa esencialmente: “Si eres el Participante 1 (Role_Id==1), entonces verás el objeto mouse_user_2.”
• Nota: ¿Cómo se especifica que Role_Id == 1 en el editor? Consulta la sección paso a paso a continuación donde se explica con más detalle.

Bajo la sección de Else If hacemos lo mismo pero para el participante 2 (Role_Id==2). El objeto objetivo es mouse_user_1 que debería tener el valor de Visibilidad igual a 1.

EVENTO: sendMove

A continuación, tenemos que establecer un ‘puente’ entre los dos participantes donde si mueves tu mouse, esos valores son rastreados/almacenados y enviados al otro participante.

Disparador

Por lo tanto, se utiliza el Disparador de Mouse para este evento, donde cualquier ‘Movimiento’ que se realice desencadenará el evento.

Acciones

De nuevo, se necesita un comando de Acción de Control → If…Then:

Donde si tu Role_Id==1, entonces las siguientes Acciones de Variable tienen lugar:

• Establecer / Registrar una Variable: Apuntar / definir la variable moveMouse1 y establecerla igual al valor específico del disparador del Mouse [X,Y] Array.
• Distribuir Variable: Compartir esta variable con el Participante 2.

Else If, tu Role_Id==2 …

Entonces:

• La moveMouse2 registrará el Mouse [X,Y] Array (igual que en el ejemplo anterior) pero lo utilizaremos para almacenar los valores de seguimiento del mouse del Participante 2 y configurarlo para que sea igual a su Mouse [X,Y] Array.
• Luego, distribuir esta variable al participante 1.

Resumen: Hasta este punto hemos:

• Creado variables para almacenar el array de seguimiento del mouse [X,Y] de cada participante (moveMouse1 para el cursor del Participante 1 y moveMouse2 para el cursor del Participante 2)
• Y hemos establecido un puente donde el valor de seguimiento del mouse se envía al otro participante utilizando la acción Distribuir Variable.

EVENTO: receiveMove

A continuación, necesitamos especificar qué sucederá con estos valores de seguimiento del mouse. En este caso, al recibir los movimientos del mouse en formato de array, ¡queremos cambiar el objeto del cursor del mouse para reflejar los movimientos! En otras palabras, utilizando el [X,Y] array, vincularemos esos valores al cursor del mouse para que se mueva esencialmente, mostrando lo que el otro participante está haciendo en la pantalla. Así, para lograr esto, se utilizarán el disparador y las acciones descritas a continuación.

Disparador

Dado que los valores de seguimiento del mouse se almacenan en variables, cada vez que estas variables cambian, significa que el mouse se está moviendo. Por lo tanto, podemos usar el disparador de valor de variable cambiada para actualizar la ubicación del cursor en la pantalla seleccionando las dos variables específicas que sostienen los valores de seguimiento del mouse como se muestra a continuación:

Acción

A continuación, queremos usar la Acción de Selección Desde Array (Leer) para obtener los valores de las coordenadas x e y de los arrays de variables del cursor porque planeamos usarlos para establecer las coordenadas del objeto.

Así, seleccionamos la variable moveMouse1 que tiene el array de [X,Y] del participante 1 y llamamos al primer valor que tenía un Índice Fijo de 1 y almacenamos ese valor en una variable numérica llamada x_mouse1 porque los valores x se enumeran primero en el array.

Agregamos otra acción Seleccionar Desde Array (Leer) y para el Índice Fijo escribimos 2 porque queremos llamar el segundo valor del array que son las coordenadas y almacenar eso en la variable y_mouse1.

Para hacer que la imagen del cursor se mueva, necesitamos actualizar sus coordenadas de imagen en tiempo real haciéndola tomar los valores x e y que son equivalentes a las coordenadas x e y del seguimiento del mouse (que hemos obtenido y almacenado en las variables x_mouse1 y y_mouse1 en las acciones anteriores).

Para lograr esto, necesitamos elegir la acción de Establecer Propiedad del Objeto para que el Objetivo de mouse_user_1 (en la imagen de abajo está escrito simplemente como ‘mouse’ porque el cuadro de diálogo acorta el título) y su propiedad X tenga un valor (=) de x_mouse1+5 lo que es una operación aritmética. Consulta esta explicación paso a paso de cómo se configura esto.

En este punto puede que te preguntes por qué aparece el +5 en el campo de entrada… Esto se debe a que necesitamos crear un desplazamiento ya que este objeto es, de hecho, un objeto de texto que incluye una imagen incrustada (como se describe al principio de este recorrido). Así que, si necesitas construir tu estudio y hacer que los usuarios vean sus propios cursores personalizados como lo hacemos aquí pero también hacer clic en otros objetos en el estudio, entonces no será posible a menos que crees este desplazamiento (a menos que elijas omitir la imagen del cursor y solo mantener la etiqueta de texto).

Continuando, elegimos +Agregar Propiedad y apuntamos al mismo objeto de imagen, seleccionamos la propiedad Y y la establecemos igual a la variable y_mouse1.

Repetimos el mismo proceso, pero solo seleccionamos las otras variables que hemos dedicado para el participante 2:

Aquí apuntamos al objeto mouse_user_2 y asignamos las variables respectivas:

Juntas, todas estas acciones hacen que los dos objetos del cursor se muevan para ambos participantes leyendo valores del array de variables y luego utilizando estos valores numéricos para establecer los valores x e y del objeto.

EVENTO: end

A continuación, creamos un evento para finalizar oficialmente el proceso de grabación de datos y almacenar los datos insertando un botón de ‘fin’ que, al ser utilizado como disparador, llevará a una Acción de Control donde se realiza la acción de Aceptar/Finalizar Sesión.

Disparador

Para finalizar la sesión, el disparador del botón es donde hacer clic en el Botón de Fin desencadenará el final de la sesión.

Acción

La acción es la Aceptar/Finalizar Sesión.

Nuevamente, ten en cuenta que esta demostración es solo para fines de aprendizaje y es solo un método entre muchos para compartir la ubicación del mouse y del cursor en un estudio multiusuario. Otro ejemplo de cómo se puede lograr este efecto se describe en las secciones siguientes.

Enfoque 2: Enfoque de Variable Única para Compartir Cursores en Estudios Multi-Usuario

En esta otra demostración, en lugar de arreglos, mostramos cómo tienes la opción de usar valores únicos (es decir, llamando directamente a las coordenadas X y Y).

Aquí hay una vista completa de esta demostración, que incluye una vista previa de los datos grabados al final:

Objeto Único para el Cursor

Esta demostración también difiere de la anterior en el sentido de que en lugar de dos objetos para el cursor, hay solo uno. Este enfoque es excelente para estudios multiusuario que solo desean mostrar dónde se encuentra el cursor del ‘oponente’ o ‘compañero’.

Variables Personalizadas

Esta otra demostración incluye las siguientes variables personalizadas y sus especificaciones. Mientras que esta demostración tiene menos variables, requiere más eventos / acciones en comparación con el ejemplo anterior con arreglos.

EVENTO: sendMove

El disparador es el movimiento del mouse:

La acción es registrar los valores específicos del disparador de la coordenada X del mouse y la coordenada Y en dos variables separadas que están específicamente nombradas para indicar el participante 1.

Las siguientes acciones bajo esta condición de si / entonces sirven para distribuir estos dos valores al participante 2.

Luego agregamos una condición de ‘Else If’ para registrar los valores específicos del disparador de la coordenada X del mouse y la coordenada Y en dos variables separadas que están específicamente nombradas para indicar al participante 2.

Las siguientes acciones se utilizan para distribuir estos dos valores al participante 1.

EVENTO: receiveMove1

Ahora necesitamos un evento para transmitir las coordenadas del mouse. Por lo tanto, si estos valores específicos de variable asociados con el Participante 1 cambian, se utilizarán como un disparador:

Luego actualizamos la propiedad del objeto de ubicación del cursor para tomar estos valores utilizando una acción. En esencia, si eres el Participante 2, entonces el objeto Oponente toma las coordenadas de los variables del Participante 1:

EVENTO: receiveMove2

Hacemos lo mismo aquí. Si eres el Participante 1, entonces el objeto Oponente toma las coordenadas de los variables del Participante 2:

Conclusión

Esta demostración muestra dos de las muchas formas en que se pueden usar las coordenadas del mouse para actualizar propiedades de objetos a fin de transmitir la ubicación del cursor en un estudio multiusuario. Puedes usar arreglos

Detalles de la Demostración: Ingresando Valores Paso a Paso

Si todavía estás aprendiendo a moverte en Labvanced o simplemente necesitas alguna aclaración adicional, las secciones a continuación te muestran, paso a paso, cómo implementar ciertos comandos y los pasos que necesitas seguir utilizando los menús para implementarlos:

• Especificando Role_ID==1 en una Acción de Requisito
• Seleccionando el Mouse [X,Y] Array para ser Grabado en una Variable para Seguimiento del Mouse
• Usando Operaciones Aritméticas para Establecer una Propiedad del Objeto

Especificando Role_ID==1 en una Acción de Requisito

En la demostración anterior, esta línea aparece frecuentemente, ¿cómo puedes obtenerlo así?

Primero +Agregar Acción y seleccionar Acciones de Control → Acciones de Requisito (If…Then) porque este es el contexto en cómo aparece frecuentemente en esta demostración.

A continuación, + Requisito para que puedas especificar la Condición Si en mayor detalle.

Para el primer ícono de lápiz (formalmente conocido como El Menú de Selección de Valor) elige Variable → Seleccionar Variable para señalar la variable Role_Id.

Esto abrirá el menú de Variable donde se almacenan todas las variables locales / globales. En el panel superior, bajo Variables Globales encontrarás la variable Role_Id. Selecciónala.

A continuación, en el otro ícono de pluma, necesitas especificar el valor del id de rol del participante. Entonces, ve a Valor Constante → Numérico.

Y simplemente escribe el número 1. ¡Listo!

Usando Operaciones Aritméticas para Establecer una Propiedad del Objeto

Establecer la ubicación del cursor se realiza utilizando la acción Establecer Propiedad del Objeto, especificando el objeto objetivo, su propiedad, y luego especificando el valor de variable que se utilizará como el nuevo valor para la propiedad del objeto.

Selecciona la Acción del Objeto:

Para el Objetivo haz clic en el primer ninguno y selecciona el primer objeto cursor mouse_user_1 de la lista. Para la segunda lista de propiedades del objeto, selecciona la opción X:

Luego, haz clic en el ícono de lápiz. Elige Operaciones del menú y selecciona la opción Aritmética:

Haz clic en el primer ícono de lápiz y elige Variable → Seleccionar Variable y aparecerá un cuadro de diálogo de las variables desde el cual puedes seleccionar la variable x_mouse1:

Luego, haz clic en el segundo ícono de lápiz y elige Valor Constante → Numérico y escribe el número 5 en el campo que aparece.

Debido a que esto se relaciona con la demostración donde el objeto es una combinación de una imagen más texto, necesitamos desplazar el valor 5 puntos para que el objeto debajo sea clickeable:

Haz clic en +Agregar Propiedad debajo e indica que la variable y_mouse1 será asignada a la propiedad Y del objeto mouse_user_1.