Interfície d'usuari interactiva simple per ensenyar i avaluar .: 11 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:16

Aquest projecte es va desenvolupar com a part d’una classe universitària, l’objectiu era fer un sistema interactiu per ensenyar i avaluar un determinat tema. Per a això, hem utilitzat un processament en un PC per a la interfície i un Arduino NANO per al botó arcade i els LED, de manera que és bastant senzill. Per ensenyar, ofereix una interfície on es mostra un model i l’usuari pot fer clic a cadascun dels components. per obtenir-ne una descripció de text. Tanmateix, per avaluar l’usuari, ofereix un problema semblant a un trencaclosques, en què l’usuari ha d’arrossegar i deixar anar cada part per construir el model corresponent i prémer un botó per confirmar la seva resposta; els LED del botó indicaran a l’usuari si la resposta és correcta o no.

El problema més comú que ens vam trobar amb aquest projecte va ser la comunicació entre Processing i un Arduino, ja que la latència de la connexió podia variar entre ordinadors, cosa que dificultava la portabilitat del dispositiu. A més, heu de definir el port on es connecta Arduino cada vegada, perquè cada dispositiu USB connectat compti, de manera que haureu de comprovar de quina COM es tracta.

Pas 1: programació de la interfície en procés (configuració)

Configurem les variables que s’utilitzaran, la posició de totes les parts com a matrius de coordenades x i, així com matrius per a les imatges de cadascuna de les parts dels menús Teach (imgA) i Avaluar (img)., una matriu per comprovar si les respostes són correctes i matrius per als bovers i bloquejats, que determinaran si el ratolí està per sobre de les peces i si intenta recollir-les. A continuació, procediu a inicialitzar-los i obriu el port des del qual la interfície es comunicarà amb l'Arduino.

Pas 2: Programació de la interfície en procés (menú principal)

En primer lloc, es mostraran dos botons al menú principal i, quan es prem un d’ells, el programa carregarà el menú "Ensenyar" o el menú "Avaluar".

Així, quan es prem el ratolí i es troba a sobre d’un dels botons, envia les posicions de totes les parts que necessita el nou menú i carrega l’altre menú.

Pas 3: Programació de la interfície en procés (menú "Ensenyar")

Aquí, si el ratolí passa per sobre d’una de les parts, activarà el bover corresponent que, si es prem el ratolí, activaria el text corresponent i el mostrarà a la pantalla.

Pas 4: Programació de la interfície en procés (menú "Avaluar")

Aquí és el mateix, activaria els bovers, que, quan es prem el ratolí, activarien els bloquejats, però aquesta vegada en lloc de mostrar textos, arrossegaria la part seleccionada. (Això es basava en "Arrossega, deixa anar i passa el cursor amb el ratolí" de processing.js)

Pas 5: quan es prem el ratolí

Com s'ha dit anteriorment, quan es prem el ratolí i el "bover" és veritable, s'activaria el bloqueig corresponent.

Pas 6: quan s’arrossega el ratolí

Si s'arrossega el ratolí, el menú real és el menú d'avaluació i un dels bloquejos és "veritable", arrossegaria la part corresponent al costat del ratolí.

Pas 7: quan es llança el ratolí

Per tant, si el ratolí es deixa anar al menú "Avaluar", posaria la part que s'estava arrossegant al lloc on heu de construir el model si està prou a prop i comprovaria si la resposta és correcta. Aleshores restabliria tots els textos bloquejats i "falsos".

Pas 8: Comunicació amb Arduino

Per tant, ara si premeu el botó de l’Arduino, comprovarà si col·loqueu totes les parts correctes i us indica si és correcte o incorrecte, i envia un "1" si és correcte o un "2" si és incorrecte Arduino.

Pas 9: Configuració de l'Arduino (esquema)

Aquest era l’esquema que s’utilitzava per a l’arduino, però amb un botó Arcade, de manera que el fil verd que anava al botó aniria al connector inferior del botó (COM) i el fil vermell aniria al mig (NO). Es va utilitzar una resistència de 220Ω per als LEDs, una 1kΩ per al botó.

Pas 10: Programació de l'Arduino

Ara, configura el botó com a INPUT al pin digital 2 i els LEDs com a OUTPUT al 4, 6 i 8. A continuació, configura el port i el llegeix, si obté un "1" (resposta correcta) il·luminaria el 3 LEDs un per un, si obté un "2" (resposta incorrecta), s'encendria només un d'ells. A més, si es prem el botó, s'enviaria una "e" a la interfície.

Pas 11: Això és tot, divertiu-vos

Aquests són els codis utilitzats per a aquest projecte: