Afficher les curseurs des sujets : Démonstration Multi-Utilisateurs

Aperçu

Dans une expérience multi-utilisateurs où plusieurs participants participent en temps réel, vous pouvez souhaiter rendre leurs curseurs visibles les uns aux autres. Dans cette démonstration, nous allons vous montrer comment le configurer.

Remarque sur l'implémentation

Veuillez noter qu'il existe plusieurs approches pour mettre en œuvre le partage des emplacements de curseurs de plusieurs participants dans Labvanced, car la plate-forme est flexible et il est donc important de considérer la conception de votre expérience avant de vous engager dans une approche.

Pour clarifier ce point, nous présenterons deux approches pour accomplir cela :

• Approche 1 : une démo qui utilise des tableaux pour distribuer la position du curseur
• Approche 2 : dans une section plus bas, nous discuterons d'une démo où des valeurs uniques pour les coordonnées x et y peuvent également être utilisées.

Approche 1 : Affichage du curseur utilisant le suivi de souris et des tableaux

Cette démo comprend deux objets (une souris par utilisateur) et sont listés dans le panneau latéral dans le Panneau d'Objet. Cette approche peut être utilisée pour des études multi-utilisateurs où il y a 2+ participants.

Objets

Voici le panneau Propriétés de l'objet où tous les styles visuels peuvent être gérés. Actuellement, les deux curseurs ont une Visibilité de 1 (cela signifie opacité = 100 %) comme montré ci-dessous :

Pour cette démo, nous allons changer la Visibilité à 0, comme montré ci-dessous. Plus tard, lorsque l'expérience commencera, nous rendrons l'un des curseurs visibles. c'est-à-dire, si vous êtes le Participant 1, alors vous verrez l'objet curseur ici du Participant 2 et vice versa. Cela est décrit sous la section Événement : Init ci-dessous.

Si vous ne souhaitez pas avoir deux objets pour les curseurs, consultez cette section pour voir une méthode alternative avec un seul objet curseur.

Variables personnalisées

Ici, nous énumérons toutes les variables personnalisées qui ont été créées aux fins de cette démo. Vous pouvez les créer à l'avance ou dans l'éditeur tout en construisant votre expérience.

Vue d'ensemble des événements

Pour ajouter un événement cliquez sur le [+] Événement du Cadre (sur ce cadre seulement).

Nous avons les événements suivants dans cette démo :

1. Événement : Init : Rendre la souris de l'autre participant visible
2. Événement : sendMove : Envoyer les coordonnées de la souris
3. Événement : receiveMove : Recevoir les coordonnées de la souris

Ci-dessous, la structure de chacun des événements est décrite.

ÉVÉNEMENT : init

Cet événement spécifie ce qui se passera lorsque le cadre s'initie. Dans ce cas, notre objectif est que le Participant 1 voit la souris du Participant 2 et vice versa.

Déclencheur

Le déclencheur pour l'événement est À l'initialisation du cadre car nous voulons attribuer la visibilité de l'objet curseur dès que le cadre s'initialise.

Action

Après avoir spécifié cela et cliqué sur le bouton ‘Suivant’, vous pouvez sélectionner les actions qui se produiront lors de l'initialisation du cadre.

Ci-dessous, nous montrons que l'action que nous utilisons est une Action de Contrôle → ‘Si… Alors’, donc :

• Si Role_Id est égal à 1 (Remarque : Role_Id est une variable qui est unique aux études multi-utilisateurs et attribue l'ID au participant).
• Alors, Définir la Propriété de l'Objet de la visibilité de l'objet mouse_user_2 à 1.
• Remarque : La combinaison de ces deux actions signifie essentiellement : “Si vous êtes le Participant 1 (Role_Id==1), alors vous verrez l'objet mouse_user_2.”
• Remarque : Comment le Role_Id == 1 est-il spécifié dans l'éditeur ? Consultez la section étape par étape ci-dessous où cela est expliqué plus en détail.

Sous la section Sinon Si, nous faisons la même chose mais pour le participant 2 (Role_Id==2). L'objet cible est mouse_user_1 qui devrait avoir la valeur de visibilité de 1.

ÉVÉNEMENT : sendMove

Ensuite, nous devons établir un ‘pont’ entre les deux participants où si vous déplacez votre souris, ces valeurs sont suivies/storées et envoyées à l'autre participant.

Déclencheur

Ainsi, le Déclencheur de la souris est utilisé pour cet événement où tout ‘Déplacement’ qui se produit déclenchera l’événement.

Actions

Encore une fois, une commande Action de Contrôle → Si…Alors est nécessaire :

Où si votre Role_Id==1, alors les suivantes Actions de Variable ont lieu :

• Définir / Enregistrer une Variable: Pointer / définir la variable moveMouse1 et la définir pour être égale à la valeur spécifique au déclencheur de Souris [X,Y] Tableau.
• Distribuer la Variable: Partager cette variable avec le Participant 2.

Sinon, si votre Role_Id==2 …

Alors :

• Le moveMouse2 enregistrera le tableau de souris [X,Y] (tout comme dans l'exemple précédent ci-dessus) mais nous l'utiliserons pour stocker les valeurs de suivi de la souris du Participant 2 et le définir pour être égal à leur tableau de souris [X,Y].
• Ensuite, distribuez cette variable au participant 1.

Résumé - Jusqu'à présent, nous avons :

• Créé des variables pour stocker le tableau de suivi de la souris [X,Y] de chaque participant (moveMouse1 pour le curseur du Participant 1 et moveMouse2 pour le curseur du Participant 2)
• Et établi un pont où la valeur de suivi de la souris est envoyée à l'autre participant en utilisant l'action Distribuer la Variable.

ÉVÉNEMENT : receiveMove

Ensuite, nous devons spécifier ce qui se passera avec ces valeurs de suivi de souris. Dans ce cas, lors de la réception des déplacements de souris sous forme de tableau, nous voulons changer l'objet curseur de sorte qu'il reflète les mouvements ! En d'autres termes, en utilisant le tableau [X,Y], nous allons lier ces valeurs au curseur de la souris pour qu'il se déplace essentiellement, montrant ce que l'autre participant fait à l'écran ! Ainsi, pour accomplir cela, le déclencheur et les actions décrites ci-dessous seront utilisés.

Déclencheur

Puisque les valeurs de suivi de la souris sont stockées dans des variables, chaque fois que ces variables changent, cela signifie que la souris est en mouvement. Ainsi, nous pouvons utiliser le Déclencheur de Valeur de Variable Changée pour mettre à jour l'emplacement du curseur à l'écran en sélectionnant les deux variables spécifiques qui contiennent les valeurs de suivi de la souris comme montré ci-dessous :

Action

Ensuite, nous voulons utiliser l’Action Sélectionner dans le Tableau (Lire) afin d’extraire les valeurs des coordonnées x et y des tableaux de variables du curseur, car nous prévoyons de les utiliser pour définir les coordonnées de l'objet.

Ainsi, nous sélectionnons la variable moveMouse1 qui contient le tableau des [X,Y] du participant 1 et appelons la première valeur qui était un Index Fixe de 1 et stockons cette valeur dans une variable numérique appelée x_mouse1 car les valeurs x sont listées en premier dans le tableau.

Nous ajoutons une autre action Sélectionner dans le Tableau (Lire) et pour l’Index Fixe écrivez 2 car nous voulons appeler la deuxième valeur du tableau qui sont les coordonnées y et stockez-la dans la variable y_mouse1.

Pour faire bouger l'image du curseur, nous devons mettre à jour ses coordonnées d'image en temps réel en lui attribuant les valeurs x et y qui sont équivalentes aux coordonnées x et y de suivi de la souris (que nous avons extraites et stockées dans les variables x_mouse1 et y_mouse1 dans les actions ci-dessus).

Pour y parvenir, nous devons choisir l'action Définir la Propriété de l'Objet de sorte que la Cible de mouse_user_1 (dans l'image ci-dessous, elle est juste référencée comme ‘souris’ car la boîte de dialogue raccourcit le titre) et sa propriété X ait une valeur (=) de x_mouse1+5 qui est une opération arithmétique. Référez-vous à cette explication étape par étape de la façon dont cela est configuré.

À ce stade, vous vous demandez peut-être pourquoi le +5 apparaît dans le champ de saisie… C'est parce que nous devons créer un décalage puisque cet objet est en fait un objet texte qui comprend une image intégrée (comme décrit au début de cette démonstration). Ainsi, si vous devez construire votre étude et que les utilisateurs voient leurs propres curseurs personnalisés comme nous le faisons ici mais qu'ils cliquent également sur d'autres objets dans l'étude, cela ne sera pas possible à moins que vous ne créiez ce décalage (à moins que vous choisissiez d'omettre l'image du curseur et de conserver simplement l'étiquette de texte).

Pour continuer, nous choisissons +Ajouter Propriété et lui indiquons que l'objet image sélectionné Y sera égal à la variable y_mouse1.

Nous répétons le même processus mais sélectionnons simplement les autres variables que nous avons dédiées pour le participant 2 :

Ici, nous pointons vers l'objet mouse_user_2 et assignons les variables respectives :

Ensemble, toutes ces actions permettent aux deux objets curseurs de se déplacer pour les deux participants en lisant des valeurs à partir de la variable tableau et en utilisant ensuite ces valeurs numériques pour définir les valeurs x et y de l'objet.

ÉVÉNEMENT : end

Ensuite, nous créons un événement pour officiellement mettre fin au processus d'enregistrement des données et stocker les données en insérant un bouton ‘fin’ qui, lorsqu'il est utilisé comme déclencheur, entraînera une Action de Contrôle où l’action Accepter/Terminer la Session se produira.

Déclencheur

Pour mettre fin à la session, le déclencheur de bouton est où le clic sur le Bouton de Fin déclenchera la fin de session.

Action

L'action est d'Accepter/Terminer la Session.

Encore une fois, veuillez noter que cette démo est à des fins d’apprentissage et n’est qu’une méthode parmi tant d’autres pour partager l'emplacement de la souris et du curseur dans un cadre d'étude multi-utilisateurs. Un autre exemple de la façon dont cet effet peut être accompli est décrit dans les sections suivantes.

Approche 2 : Approche de Variable Unique pour le Partage de Curseurs dans les Études Multi-Utilisateurs

Dans cette autre démo, au lieu des tableaux, nous montrons comment vous avez la possibilité d'utiliser des valeurs uniques (c'est-à-dire d'appeler directement les coordonnées X et Y).

Voici un aperçu complet de cette démo, y compris un aperçu des données enregistrées à la fin :

Objet Unique pour le Curseur

Cette démo diffère également de la précédente en ce sens que, au lieu de deux objets pour le curseur, il n'y en a qu'un seul. Cette approche est idéale pour les études multi-utilisateurs qui souhaitent simplement montrer où se trouve le curseur de l'‘opposant’ ou du ‘coéquipier’.

Variables personnalisées

Cette autre démo comprend les variables personnalisées suivantes et leur spécification. Bien que cette démo ait moins de variables, elle nécessite plus d'événements/actions que l'exemple précédent utilisant des tableaux.

ÉVÉNEMENT : sendMove

Le déclencheur est le mouvement de la souris :

L'action consiste à enregistrer les valeurs spécifiques au déclencheur des coordonnées X et Y de la souris dans deux variables séparées qui sont spécifiquement nommées pour indiquer le participant 1.

Les actions suivantes sous cette condition si/alors servent à distribuer ces deux valeurs au participant 2.

Ensuite, nous ajoutons une condition ‘Sinon Si’ pour enregistrer les valeurs spécifiques au déclencheur des coordonnées X et Y de la souris dans deux variables séparées qui sont spécifiquement nommées pour indiquer le participant 2.

Les actions suivantes sont utilisées pour distribuer ces deux valeurs au participant 1.

ÉVÉNEMENT : receiveMove1

Maintenant, nous avons besoin d'un événement pour transmettre les coordonnées de la souris. Ainsi, si ces valeurs de variable spécifiques associées au Participant 1 changent, elles seront utilisées comme déclencheur :

Ensuite, nous mettons à jour la propriété de l'objet de localisation du curseur pour prendre ces valeurs en utilisant une action. En essence, si vous êtes le Participant 2, alors l'objet Opposant prend les coordonnées des variables du Participant 1 :

ÉVÉNEMENT : receiveMove2

Nous faisons la même chose ici. Si vous êtes le Participant 1, alors l'objet Opposant prend les coordonnées des variables du Participant 2 :

Conclusion

Cette démonstration montre deux des nombreuses manières dont les coordonnées de la souris peuvent être utilisées pour mettre à jour les propriétés d'objet afin de transmettre la localisation du curseur dans une configuration d'étude multi-utilisateurs. Vous pouvez utiliser des tableaux.

Détails de la Démonstration : Saisie des Valeurs Étape par Étape

Si vous trouvez toujours votre chemin autour de Labvanced ou si vous avez simplement besoin d'une clarification supplémentaire, les sections ci-dessous vous montrent, étape par étape, comment mettre en œuvre certaines commandes et les étapes que vous devez suivre en utilisant les menus pour les mettre en œuvre :

• Spécifier Role_ID==1 dans une Action de Condition
• Sélectionner le Tableau de Souris [X,Y] à Enregistrer dans une Variable pour le Suivi de la Souris
• Utiliser des Opérations Arithmétiques pour Définir une Propriété d'Objet

Spécifier Role_ID==1 dans une Action de Condition

Dans la démo ci-dessus, cette ligne apparaît fréquemment, alors comment pouvez-vous l'obtenir ainsi ?

Tout d'abord, +Ajouter Action et sélectionnez Actions de Contrôle → Actions de Condition (Si…Alors) car c'est le contexte dans lequel cela apparaît fréquemment dans cette démo.

Ensuite, + Condition pour que vous puissiez spécifier la Condition Si en plus de détails.

Pour le premier icône de crayon (appelé Menu de Sélection de Valeur), choisissez Variable → Sélectionner Variable afin de pointer vers la variable Role_Id.

Cela ouvrira le menu des Variables où toutes les variables locales / globales sont stockées. Dans le panneau supérieur, sous Variables Globales, vous trouverez la variable Role_Id. Sélectionnez-la.

Ensuite, sur l'autre icône de crayon, vous devez spécifier la valeur de l'ID de rôle du participant. Donc, allez à Valeur Constante → Numérique.

Et tapez simplement le nombre 1. Voilà!

Utiliser des Opérations Arithmétiques pour Définir une Propriété d'Objet

Définir l'emplacement du curseur se fait en utilisant l'action Définir la Propriété de l'Objet, en spécifiant l'objet cible, sa propriété, puis en spécifiant la valeur de variable qui doit être utilisée comme nouvelle valeur pour la propriété de l'objet.

Sélectionnez l'Action d'Objet :

Pour la Cible, cliquez sur le premier aucun et sélectionnez le premier objet curseur mouse_user_1 dans la liste. Pour la seconde liste des propriétés d'objet, sélectionnez l'option X :

Puis, cliquez sur l'icône de crayon. Choisissez Opérations dans le menu et sélectionnez l'option Arithmétique :

Cliquez sur la première icône de crayon et choisissez Variable → Sélectionner Variable et une boîte de dialogue des variables apparaîtra de laquelle vous pourrez sélectionner la variable x_mouse1 :

Ensuite, cliquez sur la deuxième icône de crayon et choisissez Valeur Constante → Numérique et tapez le nombre 5 dans le champ qui apparaît.

Parce que cela concerne la démonstration où l'objet est une combinaison d'une image et de texte, nous devons décaler la valeur de 5 points afin que l'objet en dessous soit cliquable :

Cliquez sur +Ajouter Propriété en dessous et indiquez que la variable y_mouse1 sera attribuée à la propriété Y de l'objet mouse_user_1.