Jednoduché interaktívne používateľské rozhranie na vyučovanie a hodnotenie .: 11 krokov

2025 Autor: John Day | [email protected]. Naposledy zmenené: 2025-01-13 06:58

Tento projekt bol vyvinutý ako súčasť vysokoškolskej triedy, cieľom bolo vytvoriť interaktívny systém na vyučovanie a hodnotenie určitej témy. Na to sme použili spracovanie na PC pre rozhranie a Arduino NANO pre arkádové tlačidlo a LED diódy, takže je to celkom jednoduché. Na naučenie ponúka rozhranie, kde sa zobrazuje model a používateľ môže kliknúť na každú z komponentov získať jeho textový popis. Na vyhodnotenie užívateľa však ponúka problém podobný hádanke, kde musí používateľ pri vytváraní zodpovedajúceho modelu pretiahnuť každú časť a stlačením tlačidla potvrdiť svoju odpoveď. Potom diódy LED na tlačidle oznámia používateľovi či je odpoveď správna alebo nie.

Najčastejším problémom, s ktorým sme sa pri vytváraní tohto projektu stretli, bola komunikácia medzi procesorom a Arduino, pretože latencia pripojenia sa môže medzi počítačmi líšiť, čo bráni prenosnosti zariadenia. Tiež musíte vždy definovať port, ku ktorému je Arduino pripojené, pretože každé pripojené zariadenie USB sa počíta, takže musíte skontrolovať, ktorý COM to je.

Krok 1: Programovanie rozhrania pri spracovaní (nastavenie)

Nastavili sme premenné, ktoré sa budú používať, polohu všetkých častí ako polí x a y kordinátov, ako aj polia pre obrázky každej z častí pre ponuky Teach (imgA) a Evaluate (img) "pole na kontrolu správnosti odpovedí a polia pre bovery a lockedy, ktoré určia, či je myš nad kusmi a či sa ich pokúša zdvihnúť." Potom ich inicializujte a otvorte port, z ktorého bude rozhranie komunikovať s Arduino.

Krok 2: Programovanie rozhrania pri spracovaní (hlavná ponuka)

Najprv sa v hlavnej ponuke zobrazia dve tlačidlá a keď sa stlačí jedno z nich, program načíta buď ponuku „Naučiť“alebo „Vyhodnotiť“.

Keď teda myš stlačíte a je nad jedným z tlačidiel, odošle polohy všetkých častí, ktoré nové menu potrebuje, a načíta ostatné menu.

Krok 3: Programovanie rozhrania pri spracovaní (ponuka „Naučiť“)

Tu, ak myš vznáša jednu z častí, aktivuje príslušný bover, ktorý po stlačení myši aktivuje príslušný text a zobrazí ho na obrazovke.

Krok 4: Programovanie rozhrania pri spracovaní (ponuka „Vyhodnotiť“)

Tu je to isté, aktivovalo by to bovery, ktoré by po stlačení myši aktivovalo uzamknuté, ale tentoraz namiesto zobrazovania textov by potiahlo vybranú časť. (Toto bolo založené na „Pretiahnutí, pustení a podržaní myši.“Zo súboru processing.js)

Krok 5: Po stlačení myši

Ako bolo uvedené vyššie, keď je myš stlačená a bover je „pravdivý“, aktivuje sa príslušný zámok.

Krok 6: Pri ťahaní myši

Ak potiahnete myš, aktuálna ponuka je ponuka vyhodnotenia a jedno zo zamknutých polí je „pravdivé“, presunie sa zodpovedajúca časť vedľa myši.

Krok 7: Keď sa myš uvoľní

Ak sa teda myš uvoľní a stále je v ponuke „Vyhodnotiť“, časť, ktorá sa ťahala, by sa dostala na miesto, kde potrebujete postaviť model, ak je dostatočne blízko a skontrolovala by, či je vaša odpoveď správna. Potom by sa všetky uzamknuté správy a texty resetovali na „falošné“.

Krok 8: Komunikácia s Arduino

Ak teda teraz stlačíte tlačidlo na zariadení Arduino, skontroluje, či ste vložili všetky správne diely na svoje miesto, a oznámi vám, či je správne alebo nesprávne, a potom vyšle „1“, ak je správne, alebo „2“, ak je nesprávne, Arduino.

Krok 9: Nastavenie Arduina (schéma)

Toto bola schéma používaná pre arduino, ale s arkádovým tlačidlom, takže zelený vodič smerujúci k tlačidlu smeroval k dolnému konektoru na tlačidle (COM) a červený vodič k strednému (NIE). Na diódy LED bol použitý odpor 220Ω, na tlačidlo 1kΩ.

Krok 10: Programovanie Arduina

Teraz nakonfiguruje tlačidlo ako VSTUP na digitálnom pine 2 a diódy LED ako VÝSTUP na 4, 6 a 8. Potom nakonfiguruje port a prečíta ho, ak dostane „1“(správna odpoveď), rozsvieti sa kontrolka 3. LED diódy jedna po druhej, ak dostane „2“(nesprávna odpoveď), rozsvieti to iba jednu z nich. Tiež, ak je tlačidlo stlačené, pošle do rozhrania „e“.

Krok 11: To je všetko, bavte sa

Tu sú kódy použité pre tento projekt: