Enostaven interaktivni uporabniški vmesnik za poučevanje in vrednotenje .: 11 korakov

2025 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2025-01-13 06:58

Ta projekt je bil razvit kot del univerzitetnega razreda, cilj pa je bil ustvariti interaktivni sistem za poučevanje in vrednotenje določene teme. Za to smo uporabili Processing na osebnem računalniku za vmesnik in Arduino NANO za arkadni gumb in LED, zato je precej preprost. Za poučevanje ponuja vmesnik, kjer je prikazan model in uporabnik lahko klikne vsako od komponent da dobite besedilni opis. Za oceno uporabnika pa ponuja težavo, podobno uganki, pri kateri mora uporabnik povleči in spustiti vsak del, da ustvari ustrezen model, in pritisniti gumb za potrditev odgovora, nato pa bodo LED na gumbu povedale uporabniku če je odgovor pravilen ali ne.

Najpogostejša težava pri tem projektu je bila komunikacija med Processingom in Arduinom, saj se lahko zakasnitev povezave med računalniki razlikuje, kar ovira prenosljivost naprave. Prav tako morate vsakič določiti vrata, na katera je priključen Arduino, saj šteje vsaka priključena naprava USB, zato morate preveriti, na katerem COM je.

1. korak: Programiranje vmesnika za obdelavo (nastavitev)

Nastavili smo spremenljivke, ki jih bomo uporabili, položaj vseh delov kot matrike x in y kordinatov, pa tudi matrike za slike vsakega dela za menije Teach (imgA) in Evaluate (img), polje za preverjanje pravilnosti odgovorov in matrike za boverje in zaklepanje, ki bodo ugotavljale, ali je miška nad kosi in ali jih poskuša pobrati. Nato nadaljujte z njihovo inicializacijo in odprite vrata, s katerih bo vmesnik komuniciral z Arduinom.

2. korak: Programiranje vmesnika za obdelavo (glavni meni)

Prvič, v glavnem meniju bosta prikazana dva gumba, in ko pritisnete enega od njih, bo program naložil bodisi meni "Teach" ali meni "Evaluate".

Ko pritisnete miško in je nad enim od gumbov, pošlje položaje vseh delov, ki jih potrebuje nov meni, in naloži drugi meni.

3. korak: Programiranje vmesnika za obdelavo (meni "Teach")

Tukaj, če miška lebdi nad enim od delov, bo aktivirala ustrezen miškin kazalec, ki bo ob pritisku miške aktiviral ustrezno besedilo in ga prikazal na zaslonu.

4. korak: Programiranje vmesnika za obdelavo (meni "Oceni")

Tu je enako, aktiviral bi boverje, ki bi ob pritisku miške aktivirali zaklenjene ključe, vendar bi tokrat namesto prikaza besedila potegnil izbrani del. (To je temeljilo na "povleci, spusti in miško premakni z miško." Iz processing.js)

5. korak: Ko pritisnete miško

Kot smo že omenili, bi ob pritisku miške in premiku "true" aktiviral ustrezno zaklepanje.

Korak 6: Ko se miška vleče

Če z miško povlečete, je dejanski meni ocenjevalni meni in ena od zaklenjenih je "resnična", bi potegnil ustrezen del poleg miške.

7. korak: Ko je miška sproščena

Torej, če je miška spuščena in je še vedno v meniju "Oceni", bi del, ki se vleče, postavil na mesto, kjer morate zgraditi model, če je dovolj blizu in bi preveril, ali je vaš odgovor pravilen. Potem bi ponastavil vse zaklenjene in besedila na "false".

8. korak: Komunicirajte z Arduinom

Torej, če pritisnete gumb na Arduinu, preveri, ali ste postavili vse prave dele in vam pove, ali je prav ali ne, nato pošlje "1", če je pravilno, ali "2", če je napaka Arduino.

9. korak: Nastavitev Arduina (shema)

To je bila shema, ki je bila uporabljena za arduino, vendar z gumbom Arcade, zato bi zelena žica, ki gre do gumba, šla do spodnjega priključka na gumbu (COM), rdeča žica pa do srednjega (NO). Za LED diode je bil uporabljen 220Ω upor, za gumb 1kΩ.

10. korak: Programiranje Arduina

Zdaj gumb konfigurira kot VHOD na digitalnem zatiču 2 in LED kot OUTPUT na 4, 6 in 8. Nato konfigurira vrata in ga prebere, če dobi "1" (pravilen odgovor), bi zasvetil 3 LED ena za drugo, če dobi "2" (napačen odgovor), zasveti le ena od njih. Tudi če pritisnete gumb, bi v vmesnik poslal "e".

11. korak: To je vse, zabavajte se

Za ta projekt so uporabljene kode: