Interface utilisateur interactive simple pour l'enseignement et l'évaluation. : 11 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Ce projet a été développé dans le cadre d'un cours universitaire, le but était de faire un système interactif pour enseigner et évaluer un certain sujet. Pour cela nous avons utilisé un Processing sur PC pour l'interface et un Arduino NANO pour le bouton arcade et les leds, donc c'est assez simple. Pour enseigner, il propose une interface où un modèle est affiché et l'utilisateur peut cliquer dans chacun des composants pour en obtenir une description textuelle. Cependant, pour évaluer l'utilisateur, il propose un problème de type casse-tête, où l'utilisateur doit faire glisser et déposer chaque pièce pour construire le modèle correspondant, et appuyer sur un bouton pour confirmer sa réponse, puis les LED sur le bouton indiqueront à l'utilisateur si la réponse est bonne ou pas.

Le problème le plus courant que nous avons rencontré lors de la réalisation de ce projet était la communication entre Processing et un Arduino, car la latence de la connexion pouvait varier d'un ordinateur à l'autre, ce qui entravait la portabilité de l'appareil. De plus, vous devez définir le port sur lequel l'Arduino est connecté à chaque fois, car chaque périphérique USB connecté compte, vous devez donc vérifier sur quel COM il se trouve.

Étape 1: Programmation de l'interface sur le traitement (Setup)

Nous configurons les variables qui vont être utilisées, la position de toutes les pièces sous forme de tableaux de coordonnées x et y, ainsi que des tableaux pour les images de chacune des pièces pour les menus Teach (imgA) et Evaluate (img), un tableau pour vérifier si les réponses sont correctes et des tableaux pour les bovers et les verrouillés, qui vont déterminer si la souris est au-dessus des pièces et si elle essaie de les ramasser. Ensuite, procédez à leur initialisation et ouvrez le port à partir duquel l'interface va communiquer avec l'Arduino.

Étape 2: Programmation de l'interface sur le traitement (Menu principal)

Tout d'abord, le menu principal va afficher deux boutons, et quand l'un d'eux est pressé, le programme va charger soit le menu "Teach" soit le menu "Evaluate".

Ainsi, lorsque la souris est enfoncée et se trouve au-dessus d'un des boutons, elle envoie les positions de toutes les parties dont le nouveau menu a besoin et charge l'autre menu.

Etape 3: Programmation de l'Interface en Traitement (Menu "Teach")

Ici, si la souris survole l'une des parties, elle activera le bover correspondant, qui, si la souris est enfoncée, activera le texte correspondant et l'affichera à l'écran.

Etape 4: Programmation de l'Interface en Traitement (Menu "Evaluer")

Voici la même chose, cela activerait les bovers, qui, lorsque la souris est enfoncée activerait les verrous mais cette fois au lieu d'afficher des textes, cela ferait glisser la partie sélectionnée. (Ceci était basé sur le "glisser, déposer et survoler avec la souris." de processing.js)

Étape 5: Lorsque la souris est enfoncée

Comme indiqué précédemment, lorsque la souris est enfoncée et qu'un bover est "vrai", cela activerait le verrouillage correspondant.

Étape 6: Lorsque la souris est traînée

Si la souris est glissée, le menu réel est le menu d'évaluation et l'un des verrous est "vrai", cela ferait glisser la partie correspondante à côté de la souris.

Étape 7: Lorsque la souris est relâchée

Donc, si la souris est relâchée et toujours dans le menu "Évaluer", elle placerait la partie qui a été traînée à l'endroit où vous devez construire le modèle si elle est suffisamment proche et vérifierait si votre réponse est correcte. Ensuite, il réinitialise tous les verrous et les textes sur "faux".

Étape 8: Communiquer avec l'Arduino

Alors maintenant, si vous appuyez sur le bouton de l'Arduino, il vérifie si vous mettez toutes les bonnes pièces en place et vous dit si c'est bien ou mal, puis envoie un "1" si c'est bien ou un "2" si c'est mal au Arduino.

Étape 9: Configuration de l'Arduino (Schéma)

C'était le schéma utilisé pour l'arduino, mais avec un bouton Arcade, donc le fil vert allant au bouton irait au connecteur inférieur du bouton (COM) et le fil rouge irait au milieu (NO). Une résistance de 220Ω a été utilisée pour les LED, une 1kΩ pour le bouton.

Étape 10: Programmation de l'Arduino

Maintenant, il configure le bouton comme INPUT sur la broche numérique 2 et les LED comme OUTPUT sur 4, 6 et 8. Ensuite, configure le Port et le lit, s'il obtient un "1" (bonne réponse), il allumera le 3 LED une par une, s'il obtient un "2" (mauvaise réponse), il n'allumera qu'une seule d'entre elles. De plus, si le bouton est enfoncé, il enverra un "e" à l'interface.

Étape 11: C'est tout, amusez-vous

Voici les codes utilisés pour ce projet: