Skip to main content

Icône de la boîte à outils de l'enseignant Boîte à outils de l'enseignant  - Le but de cette activité

Maintenant que les élèves savent comment traiter l'écran du cerveau comme un seul gros bouton, ils peuvent transformer l'écran en deux boutons. Cette activité présentera aux élèves l'utilisation d'instructions imbriquées if then else pour mieux gérer les instructions conditionnelles et la logique sous-jacente qui les sous-tend. Les étudiants sont d'abord guidés dans la construction du projet permettant aux presses à écran de faire tourner le robot à gauche ou à droite. Mais il leur est ensuite demandé d’inverser les boutons pour que ce qui faisait tourner le robot à gauche le fasse maintenant tourner à droite, et vice versa.

Pour plus d'informations sur les instructions if then et if then else ou autres utilisées dans cette activité, consultez les informations d'aide dans VEXcode V5. Pour plus d'informations sur cet outil d'aide intégré, vous pouvez trouver des articles sur l'aide dans C++.

Voici un aperçu de ce que vos élèves feront dans cette activité :

  • Revue du projet StopOrDrive et de la disposition de l'écran du cerveau en pixels.

  • Construire un nouveau projet LeftOrRight tout en étant guidé dans le raisonnement de la programmation.

  • Réviser le projet pour que les boutons de l'écran fonctionnent à l'opposé.

  • Étendez votre apprentissage : divisez l'écran en deux boutons qui, lorsqu'ils sont enfoncés, font tourner le robot à gauche ou à droite.

Assurez-vous d'avoir le matériel requis, votre cahier d'ingénierie et VEXcode V5 prêts.

Matériaux nécessaires:
Quantité Les matériaux nécessaires
1

Kit de démarrage pour salle de classe VEX V5 (avec micrologiciel à jour)

1

VEXcode V5 (dernière version, Windows, macOS)

1

Cahier d'ingénierie

1

Projet StopOrDrive de la page Play précédente

Icône de la boîte à outils de l'enseignant Boîte à outils de l'enseignant

Pour des suggestions sur les stratégies d’enseignement pour cette section, consultez la colonne Livraison du Guide de stimulation à faire ou à ne pas faire ! (Google Doc / .docx / .pdf)

L'écran du cerveau peut comporter plusieurs boutons.

Cette activité vous permettra de programmer le robot pour qu'il avance et tourne à gauche ou à droite selon le côté de l'écran du cerveau sur lequel vous appuyez.

Les trois types d’instructions supplémentaires dont vous aurez besoin au cours de cette activité sont les suivants :

  • Transmission.turn (à droite);

  • numéro < 50

  • Brain.Screen.xPosition();

Vous pouvez utiliser les informations d'aide contenues dans VEXcode V5 pour en savoir plus sur les instructions.

Étape 1 : Commençons par examiner le projet StopOrDrive.

Commençons par passer en revue le projet StopOrDrive.

Le projet StopOrDrive faisait arrêter le Clawbot si l'on appuyait sur l'écran, ou bien il le faisait avancer.
L'écran entier était constitué d'un gros bouton, mais dans ce prochain projet, nous voulons que la moitié de l'écran soit un bouton et l'autre moitié l'autre.

Afin de diviser l’écran en deux boutons, nous devons mieux comprendre la disposition de l’écran.

  • Notez que le nombre de colonnes augmente de gauche à droite. Le nombre de colonnes est de 48 et l'écran fait 480 pixels de large.

  • Notez dans votre cahier d'ingénierie que la valeur x sur l'écran est égale au nombre de pixels mesurés de gauche à droite.

  • Quelle est la valeur x du centre de l’écran ? Pour cette activité, vous pouvez vous concentrer uniquement sur l’axe des X car vous n’avez besoin que d’un bouton gauche et droit.

Icône de la boîte à outils de l'enseignant Boîte à outils de l'enseignant  - réponse

La valeur x au centre de l'écran est égale à la moitié de la largeur de l'écran en pixels. La valeur x du point central est donc de 240. Les étudiants auront besoin de ce numéro pour programmer le conditionnel selon lequel l'écran est enfoncé à gauche ou à droite. Assurez-vous donc de vérifier qu’ils ont tous la bonne valeur.

Pour l’avenir, le défi de l’interface utilisateur de la section Repenser demandera aux étudiants d’appliquer ce qu’ils ont appris pour créer quatre boutons sur l’écran. Donc pour cela, ils auront besoin des valeurs x et y.

Icône Conseils pour les enseignants Conseils aux enseignants

Pour obtenir de l'aide supplémentaire, consultez la bibliothèque VEX pour des articles d'aide supplémentaires.

Étape 2 : Programmation de deux boutons.

  • Enregistrez StopOrDrive en tant que projet LeftOrRight .

  • Construisez le projet ci-dessous. Le Clawbot tournera à gauche ou à droite lorsque vous appuierez sur l'écran, selon le côté sur lequel vous appuyez.

  • Passons en revue ce que fait ce projet.

    Il continue de vérifier si l'écran est enfoncé. Si l'écran n'est pas enfoncé, il avance, mais si c'est le cas, il vérifie où l'écran est enfoncé.

    Si la presse était du côté gauche (moins de 240), elle tourne à gauche. Sinon, ça tourne à droite. Nous n'avons pas besoin d'une autre condition lorsque la valeur x est supérieure à 240, car si elle n'est pas inférieure à 240 (tournez à gauche), elle doit être supérieure (tournez à droite). Nous n’avons à nous soucier que de deux boutons.

    Les attendre Les instructions de contrôle après chaque tour font attendre le projet jusqu'à ce que l'on n'appuie plus sur l'écran avant de continuer.

  • Maintenant que le projet est terminé, téléchargez-le et exécutez-le pour tester son fonctionnement.

  • Prenez des notes dans votre cahier d'ingénierie sur la façon dont les boutons contrôlent les mouvements du Clawbot.

Icône Conseils pour les enseignants Conseils aux enseignants

Lors des tests, les étudiants doivent reconnaître que l'interface utilisateur, lorsqu'elle est utilisée derrière le Clawbot, semble fonctionner à l'envers. Du point de vue de l'utilisateur, le Clawbot se détourne du côté sur lequel l'utilisateur appuie. Ce n'est pas une expérience utilisateur optimale.

Étape 3 : Ajustez le projet pour une meilleure expérience utilisateur.

Lorsque vous appuyez sur les boutons de l'écran derrière le Clawbot alors qu'il avance, vous appuyez sur le côté droit de l'écran pour tourner à gauche et sur le côté gauche de l'écran pour tourner à droite. Ce n'est pas une bonne expérience utilisateur. Une expérience utilisateur est la capacité d'un utilisateur à interagir avec une interface utilisateur pour contrôler un système informatique. Vous trouverez plus d’informations sur les interfaces utilisateur dans la section Appliquer de cet atelier.

Dans ce cas, nous devons améliorer l'interface utilisateur afin d'améliorer l'expérience utilisateur.

  • Examinez le projet LeftOrRight et révisez-le de sorte que lorsque l'utilisateur appuie sur les boutons derrière le Clawbot, le robot tourne à droite lorsque l'utilisateur appuie sur le côté gauche de l'écran. Ou bien, le Clawbot tourne à gauche.

  • Planifiez, testez et itérez sur ce projet dans votre cahier d'ingénierie afin que le projet fasse tourner le Clawbot vers le côté de l'écran sur lequel l'utilisateur appuie derrière le Clawbot.

Icône de la boîte à outils de l'enseignant Boîte à outils de l'enseignant

Les étudiants doivent planifier, tester et affiner ces modifications du projet tout en les documentant dans leurs cahiers d'ingénierie. Pour la rubrique individuelle du cahier d'ingénierie, cliquez sur l'un des liens suivants (Google Doc / .docx / .pdf), ou cliquez sur l'un des liens suivants pour les cahiers d'équipe (Google Doc / . docx / .pdf). N'oubliez pas d'expliquer la notation aux élèves avant qu'ils ne commencent à travailler.

Icône de la boîte à outils de l'enseignant Boîte à outils de l'enseignant  -  Solutions

Il existe deux manières possibles de résoudre le problème posé ci-dessus. La première méthode est celle écrite dans les instructions : examinez le projet LeftOrRight et révisez-le de sorte que lorsque l'utilisateur appuie sur les boutons derrière le Clawbot, le robot tourne à droite lorsque l'utilisateur appuie sur le côté gauche de l'écran. Ou bien, le Clawbot tourne à gauche.

L'autre solution consiste à changer l'instruction de l'opérateur de sorte que lorsque la valeur x est supérieure à 240, le Clawbot tourne à gauche.

Icône Motiver la discussion Motiver les discussions

Vous deviez utiliser les coordonnées d'un plan de coordonnées lorsque vous programmiez l'instruction conditionnelle lorsque la valeur x était inférieure à 240 (côté gauche de l'écran). Pour que l'écran du cerveau dessine des boutons visuels, vous devrez également utiliser des coordonnées.
Revenez à l'étape 2 où l'on vous a montré les coordonnées de l'écran du V5 Robot Brain.

Q : Quelle est la valeur x sur le bord droit de l'écran ?
A : La valeur x augmente de 0 sur le bord gauche à 480 sur le bord droit.

Q : La plage de la valeur x est donc de 480 (0 à 480). Quelle est la plage de la valeur y ?
A : La plage de la valeur y est 240 (0 à 240).

Q : Où est l'origine (0, 0) de ce plan de coordonnées ?
A : L'origine se trouve en haut à gauche.

Q : Vous êtes en haut de l'écran lorsque la valeur y est égale à 0. Pourquoi est-ce inhabituel ?
A : Habituellement, la valeur y augmente à mesure que vous montez, mais sur l'écran V5, la valeur y augmente à mesure que vous descendez. Mais vous pouvez y voir la valeur y augmentant à mesure que vous vous éloignez de l'origine (0, 0) en haut à gauche de l'écran.

Icône Étendez votre apprentissage Prolongez votre apprentissage

Dans le défi de l'interface utilisateur de la section Repenser, les étudiants seront invités à développer un projet qui crée quatre boutons sur l'écran pour contrôler la griffe et le bras du Clawbot. Pour ce défi, il leur est également demandé d'afficher ces quatre boutons à l'écran. Cette extension de votre apprentissage, comme celle de la page précédente, les aidera à se préparer à ce défi, car le défi comporte quatre boutons à programmer et celui-ci n'en a que deux.

Demandez aux élèves d'ajouter un événement au programme afin que l'écran affiche deux boutons visibles lors de l'exécution du projet. Suggérez aux étudiants d'utiliser la fonction d'aide de VEXcode V5 pour obtenir des informations sur les événements, en particulier les informations sur l'instruction draw rectangle . Demandez aux élèves de revoir comment l'écran du cerveau est organisé en un système de coordonnées basé sur le nombre de pixels lorsqu'il est utilisé dans le bloc dessiner un rectangle . Ils devront comprendre cela afin de définir les paramètres dans ce bloc. De plus, ils devront comprendre comment diffuser des événements. Dans ce cas, l'événement dessine des boutons.

Les étudiants doivent planifier, tester et affiner ces modifications du projet tout en les documentant dans leurs cahiers d'ingénierie. Pour la rubrique individuelle du cahier d'ingénierie, cliquez sur l'un des liens suivants (Google Doc / .docx / .pdf), ou cliquez sur l'un des liens suivants pour les cahiers d'équipe (Google Doc / . docx / .pdf).

Voici un exemple de solution :

Pour une expérience professionnellement réaliste supplémentaire, demandez aux élèves de demander à leurs camarades de classe leurs commentaires sur leurs deux choix de couleurs.
Les couleurs choisies vous donnent-elles envie d'utiliser l'interface, ou quelles couleurs préféreraient-ils en tant qu'utilisateurs ?
Une partie du développement d'une excellente interface utilisateur consiste à collecter des données sur l'expérience utilisateur, voire sur les préférences esthétiques.