Prosty interaktywny interfejs użytkownika do nauczania i oceny.: 11 kroków

2025 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2025-01-23 15:03

Ten projekt został opracowany w ramach zajęć uniwersyteckich, a jego celem było stworzenie interaktywnego systemu do nauczania i oceny określonego tematu. Do tego użyliśmy Processing na PC dla interfejsu i Arduino NANO dla przycisku arcade i diod LED, więc jest to dość proste. Aby nauczyć, oferuje interfejs, w którym wyświetlany jest model, a użytkownik może kliknąć każdy z komponentów aby uzyskać jego opis tekstowy. Jednak, aby ocenić użytkownika, oferuje problem podobny do puzzli, w którym użytkownik musi przeciągnąć i upuścić każdą część, aby zbudować odpowiedni model, i nacisnąć przycisk, aby potwierdzić odpowiedź, a następnie diody LED na przycisku powiedzą użytkownikowi czy odpowiedź jest prawidłowa czy nie.

Najczęstszym problemem, na który natknęliśmy się podczas tworzenia tego projektu, była komunikacja między Processing a Arduino, ponieważ opóźnienie połączenia mogło się różnić między komputerami, utrudniając przenośność urządzenia. Musisz także zdefiniować port, na którym Arduino jest podłączane za każdym razem, ponieważ każde podłączone urządzenie USB się liczy, więc musisz sprawdzić, na którym to COM jest.

Krok 1: Programowanie interfejsu podczas przetwarzania (konfiguracja)

Ustawiamy zmienne, które będą używane, położenie wszystkich części jako tablice współrzędnych x i y, a także tablice dla obrazów każdej z części w menu Naucz (imgA) i Oceń (img), tablica sprawdzająca, czy odpowiedzi są poprawne, oraz tablice dla przesunięć i blokad, które określają, czy mysz znajduje się nad elementami i czy próbuje je podnieść. Następnie przejdź do ich inicjalizacji i otwórz port, z którego interfejs będzie komunikował się z Arduino.

Krok 2: Programowanie interfejsu przetwarzania (menu główne)

Po pierwsze, w menu głównym będą wyświetlane dwa przyciski, a gdy jeden z nich zostanie naciśnięty, program załaduje albo menu "Naucz" albo "Ocena".

Tak więc, gdy mysz jest wciśnięta i znajduje się nad jednym z przycisków, wysyła pozycje wszystkich części, których potrzebuje nowe menu i ładuje inne menu.

Krok 3: Programowanie interfejsu przetwarzania (menu „Naucz”)

W tym przypadku, jeśli mysz znajduje się na jednej z części, aktywuje odpowiednią obramowanie, która po naciśnięciu myszki aktywuje odpowiedni tekst i wyświetli go na ekranie.

Krok 4: Programowanie interfejsu podczas przetwarzania (menu „Ocena”)

Tutaj jest to samo, aktywowałby zatyczki, które po naciśnięciu myszki aktywowałyby blokady, ale tym razem zamiast wyświetlać teksty, przeciągałby wybraną część. (Opierało się to na „przeciągnij, upuść i najedź myszką” z processing.js)

Krok 5: Po naciśnięciu myszy

Jak wspomniano wcześniej, gdy mysz jest wciśnięta, a nakładka jest „prawda”, aktywuje odpowiednią blokadę.

Krok 6: Kiedy mysz jest przeciągana

Jeśli mysz zostanie przeciągnięta, rzeczywiste menu jest menu oceny, a jedna z zablokowanych opcji jest „prawda”, przeciągnęłaby odpowiednią część wzdłuż myszy.

Krok 7: Po zwolnieniu myszy

Więc jeśli mysz zostanie zwolniona i nadal znajduje się w menu „Oceń”, umieściłaby przeciąganą część w miejscu, w którym musisz zbudować model, jeśli jest wystarczająco blisko, i sprawdzi, czy twoja odpowiedź jest poprawna. Następnie zresetowałby wszystkie blokady i teksty na „fałsz”.

Krok 8: Komunikacja z Arduino

Więc teraz, jeśli naciśniesz przycisk na Arduino, sprawdzi on, czy umieściłeś wszystkie właściwe części i powie Ci, czy jest dobry, czy zły, a następnie wysyła „1”, jeśli jest prawidłowy, lub „2”, jeśli jest zły do Arduino.

Krok 9: Konfiguracja Arduino (schemat)

To był schemat użyty dla arduino, ale z przyciskiem Arcade, więc zielony przewód biegnący do przycisku szedłby do dolnego złącza na przycisku (COM), a czerwony przewód do środkowego (NO). Do diod LED zastosowano rezystor 220Ω, przycisk 1kΩ.

Krok 10: Programowanie Arduino

Teraz konfiguruje przycisk jako WEJŚCIE na cyfrowym pinie 2, a diody LED jako WYJŚCIE na 4, 6 i 8. Następnie konfiguruje Port i odczytuje go, jeśli otrzyma „1” (prawidłowa odpowiedź), zapali się 3 Diody jedna po drugiej, jeśli dostanie „2” (błędna odpowiedź) zaświeci się tylko jedna z nich. Ponadto, jeśli przycisk zostanie naciśnięty, wyśle "e" do interfejsu.

Krok 11: To wszystko, baw się dobrze

Oto kody użyte w tym projekcie: