Enkel interaktiv brugergrænseflade til undervisning og evaluering .: 11 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:30

Dette projekt blev udviklet som en del af en universitetsklasse, målet var at lave et interaktivt system til at undervise og evaluere et bestemt emne. Til det brugte vi en Processing på en PC til grænsefladen og en Arduino NANO til arkadeknappen og lysdioder, så det er ret simpelt. For at undervise tilbyder det en grænseflade, hvor en model vises, og brugeren kan klikke i hver af komponenterne for at få en tekstbeskrivelse af den. For at evaluere brugeren tilbyder den imidlertid et puslespil-lignende problem, hvor brugeren skal trække og slippe hver del for at bygge den tilsvarende model, og trykke på en knap for at bekræfte deres svar, så vil lysdioderne på knappen fortælle brugeren hvis svaret er rigtigt eller ej.

Det mest almindelige problem, vi løb ind i ved at lave dette projekt, var kommunikationen mellem Processing og en Arduino, da forbindelsens latens kunne variere mellem computere, hvilket forhindrede enhedens portabilitet. Du skal også definere den port, som Arduino tilsluttes hver gang, for hver USB -enhed, der er tilsluttet, tæller, så du skal kontrollere, hvilken COM det er.

Trin 1: Programmering af grænsefladen til behandling (opsætning)

Vi opsætter de variabler, der skal bruges, placeringen af alle delene som arrays af x og y -koordinater samt arrays for billederne af hver af delene til Teach (imgA) og Evaluate (img) menuerne, en matrix for at kontrollere, om svarene er korrekte og arrays for bovers og låste, som afgør, om musen er over brikkerne, og om den prøver at samle dem op. Fortsæt derefter med at initialisere dem og åbne den port, hvorfra grænsefladen kommunikerer med Arduino.

Trin 2: Programmering af grænsefladen til behandling (hovedmenu)

Først vil hovedmenuen vise to knapper, og når der trykkes på en af dem, indlæser programmet enten "Teach" -menuen eller "Evaluer" -menuen.

Så når der trykkes på musen og er over en af knapperne, sender den positionerne for alle de dele, som den nye menu har brug for, og indlæser den anden menu.

Trin 3: Programmering af grænsefladen til behandling ("Teach" -menuen)

Her, hvis musen svæver en af delene, vil den aktivere den tilsvarende bover, som, hvis musen trykkes på, aktiverer den tilsvarende tekst og viser den på skærmen.

Trin 4: Programmering af grænsefladen til behandling (menuen "Evaluer")

Her er det samme, det ville aktivere bovers, som, når musen trykkes, ville aktivere låsene, men denne gang i stedet for at vise tekster, ville det trække den valgte del. (Dette var baseret på "Træk, slip og hold musen." Fra processing.js)

Trin 5: Når der trykkes på musen

Som nævnt tidligere, når musen trykkes ned og en bover er "sand", vil den aktivere den tilsvarende låste.

Trin 6: Når musen trækkes

Hvis musen trækkes, er den egentlige menu evalueringsmenuen, og en af de låste er "sand", den ville trække den tilsvarende del sammen med musen.

Trin 7: Når musen frigives

Så hvis musen slippes og stadig er i menuen "Evaluer", ville den sætte den del, der blev trukket på det sted, hvor du skal bygge modellen, hvis den er tæt nok og ville kontrollere, om dit svar er korrekt. Så ville det nulstille alle låste og tekster til "falsk".

Trin 8: Kommunikation med Arduino

Så nu, hvis du trykker på knappen på Arduino, kontrollerer den, om du sætter alle de rigtige dele på plads og fortæller dig, om det er rigtigt eller forkert, og sender derefter et "1", hvis det er rigtigt eller et "2", hvis det er forkert til Arduino.

Trin 9: Opsætning af Arduino (skema)

Dette var den ordning, der blev brugt til arduinoen, men med en Arcade -knap, så den grønne ledning, der gik til knappen, ville gå til det nederste stik på knappen (COM), og den røde ledning ville gå til den midterste (NO). En 220Ω modstand blev brugt til LED'erne, en 1kΩ til knappen.

Trin 10: Programmering af Arduino

Nu konfigurerer den knappen som INPUT på den digitale pin 2 og lysdioderne som OUTPUT på 4, 6 og 8. Konfigurerer derefter porten og læser den, hvis den får et "1" (korrekt svar), lyser 3 Lysdioder en efter en, hvis den får et "2" (forkert svar), ville den bare lyse op en af dem. Hvis der trykkes på knappen, ville det også sende et "e" til grænsefladen.

Trin 11: Det er alt, god fornøjelse

Her er de koder, der bruges til dette projekt: