Lihtne interaktiivne kasutajaliides õpetamiseks ja hindamiseks: 11 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:50

See projekt töötati välja ülikooliklassi raames, eesmärgiks oli luua interaktiivne süsteem teatud teema õpetamiseks ja hindamiseks. Selle jaoks kasutasime liidese jaoks arvutiga töötlemist ning arkaadnupu ja LED -ide jaoks Arduino NANO -d, nii et see on üsna lihtne. Õpetamiseks pakub see liidest, kus kuvatakse mudel ja kasutaja saab klõpsata kõigil komponentidel selle tekstilise kirjelduse saamiseks. Kasutaja hindamiseks pakub see aga puslelaadset probleemi, kus kasutaja peab vastava mudeli koostamiseks iga osa lohistama ja vastuse kinnitamiseks nuppu vajutama, siis annavad nupu valgusdioodid kasutajale teada kas vastus on õige või mitte.

Kõige tavalisem probleem, millega selle projekti tegemisel kokku puutusime, oli töötlemine töötamise ja Arduino vahelise suhtlusega, kuna ühenduse latentsusaeg võib arvutites erineda, takistades seadme teisaldatavust. Samuti peate iga kord määratlema pordi, millega Arduino on ühendatud, kuna iga ühendatud USB -seade loeb, nii et peate kontrollima, milline COM see on.

Samm: liidese programmeerimine töötlemiseks (seadistamine)

Seadsime kasutusele muutujad, kõigi osade asukoha x- ja y -koordinaatide massiividena, samuti massiivid iga osa piltide jaoks õpetamiseks (imgA) ja hindamiseks (img), massiivi, et kontrollida, kas vastused on õiged, ja massiive kaitseklappide ja lukkude jaoks, mis määravad, kas hiir on tükkide kohal ja kas see üritab neid üles võtta. Seejärel jätkake nende lähtestamist ja avage port, kust liides Arduinoga suhtlema hakkab.

2. samm: liidese programmeerimine töötlemiseks (peamenüü)

Esiteks kuvatakse peamenüüs kaks nuppu ja kui ühte neist vajutatakse, laadib programm kas menüü "Õpeta" või "Hinnake".

Nii et kui hiirt vajutada ja see asub ühe nupu kohal, saadab see kõigi uute menüüde jaoks vajalike osade asukohad ja laadib teise menüü.

3. samm: liidese programmeerimine töötlemiseks (menüü "Õpetus")

Siin, kui hiir hõljutab mõnda osa, aktiveerib see vastava hõlma, mis hiire vajutamisel aktiveerib vastava teksti ja kuvab selle ekraanil.

4. samm: liidese programmeerimine töötlemiseks (menüü "Hindamine")

Siin on sama, see aktiveeriks ümberlülitused, mis hiire vajutamisel aktiveeriksid lukud, kuid seekord tekstide kuvamise asemel lohistaksid valitud osa. (See põhines töötlemisel.js oleval nupul "Lohistamine, kukutamine ja hõljutamine hiirega".)

Samm: kui hiirt vajutatakse

Nagu varem öeldud, aktiveeriks hiire vajutamisel ja kaitseklaasi "tõene" korral vastava lukustatuse.

6. samm: kui hiirt lohistatakse

Kui hiirt lohistada, on tegelik menüü hindamismenüü ja üks lukustustest on "tõene", lohistaks vastava osa hiire kõrvale.

Samm: kui hiir vabastatakse

Nii et kui hiir vabastatakse ja on endiselt menüüs "Hindamine", paneks see lohistatud osa kohale, kuhu peate mudeli koostama, kui see on piisavalt lähedal, ja kontrolliks, kas teie vastus on õige. Siis taastaks see kõik lukud ja tekstid "valeks".

Samm: suhtlemine Arduinoga

Nüüd, kui vajutate Arduino nuppu, kontrollib see, kas olete pannud kõik õiged osad paika ja ütleb teile, kas see on õige või vale, ja saadab numbrile 1, kui see on õige, või 2, kui see on vale. Arduino.

Samm: Arduino seadistamine (skeem)

Seda skeemi kasutati arduino jaoks, kuid arkaadnupuga, nii et nupule minev roheline juhe läheks nupu alumisele pistikule (COM) ja punane juhe läheks keskmisele (EI). LED -ide jaoks kasutati 220Ω takisti, nupule 1 kΩ.

Samm: Arduino programmeerimine

Nüüd konfigureerib see nupu sisendiks digitaalsel tihvtil 2 ja valgusdioodidel väljundina 4, 6 ja 8. Seejärel konfigureerib pordi ja loeb seda, kui see saab "1" (õige vastus), süttib see 3 LED -id ükshaaval, kui see saab "2" (vale vastus), süttib see ainult üks neist. Samuti, kui nuppu vajutada, saadaks see liidesele "e".

Samm: see on kõik, nautige

Siin on selle projekti jaoks kasutatud koodid: