Semplice interfaccia utente interattiva per l'insegnamento e la valutazione: 11 passaggi

2025 Autore: John Day | [email protected]. Ultima modifica: 2025-01-13 06:57

Questo progetto è stato sviluppato come parte di una classe universitaria, l'obiettivo era quello di realizzare un sistema interattivo per insegnare e valutare un determinato argomento. Per questo abbiamo utilizzato un Processing su un PC per l'interfaccia e un Arduino NANO per il pulsante arcade e i LED, quindi è piuttosto semplice. Per insegnare, offre un'interfaccia in cui viene visualizzato un modello e l'utente può fare clic su ciascuno dei componenti per ottenere una descrizione testuale di esso. Tuttavia, per valutare l'utente, offre un problema simile a un puzzle, in cui l'utente deve trascinare e rilasciare ogni parte per costruire il modello corrispondente e premere un pulsante per confermare la risposta, quindi i LED sul pulsante diranno all'utente se la risposta è giusta o no.

Il problema più comune che abbiamo riscontrato durante la realizzazione di questo progetto è stata la comunicazione tra Processing e un Arduino in quanto la latenza della connessione potrebbe variare tra i computer, ostacolando la portabilità del dispositivo. Inoltre, devi definire la porta su cui l'Arduino è connesso ogni volta, perché ogni dispositivo USB connesso conta quindi devi controllare su quale COM è.

Passaggio 1: programmazione dell'interfaccia durante l'elaborazione (impostazione)

Impostiamo le variabili che verranno utilizzate, la posizione di tutte le parti come array di coordinate x e y, nonché array per le immagini di ciascuna delle parti per i menu Teach (imgA) e Evaluate (img), un array per verificare se le risposte sono corrette e array per i bover e i bloccati, che determineranno se il mouse è sopra i pezzi e se sta cercando di raccoglierli. Procedi quindi ad inizializzarli e ad aprire la porta da cui l'interfaccia andrà a comunicare con Arduino.

Passaggio 2: programmazione dell'interfaccia in elaborazione (menu principale)

Innanzitutto, il menu principale visualizzerà due pulsanti e, quando uno di essi viene premuto, il programma caricherà il menu "Apprendi" o il menu "Valuta".

Quindi quando si preme il mouse, e si trova sopra uno dei pulsanti, invia le posizioni di tutte le parti di cui ha bisogno il nuovo menu e carica l'altro menu.

Passaggio 3: Programmazione dell'interfaccia in elaborazione (menu "Teach")

Qui, se il mouse è in bilico su una delle parti, attiverà il bordo corrispondente, che, se si preme il mouse, attiverà il testo corrispondente e lo visualizzerà sullo schermo.

Fase 4: Programmazione dell'interfaccia in elaborazione (menu "Valuta")

Qui è lo stesso, attiverebbe i bover, che, quando si preme il mouse, attiverebbero i bloccati ma questa volta invece di visualizzare i testi, trascinerebbe la parte selezionata. (Questo era basato su "Trascina, rilascia e passa il mouse con il mouse." da processing.js)

Passaggio 5: quando si preme il mouse

Come affermato in precedenza, quando si preme il mouse e un bover è "vero", si attiverebbe il corrispondente bloccato.

Passaggio 6: quando il mouse viene trascinato

Se il mouse viene trascinato, il menu effettivo è il menu di valutazione e uno dei bloccati è "vero" trascinerà la parte corrispondente accanto al mouse.

Passaggio 7: quando il mouse viene rilasciato

Quindi, se il mouse viene rilasciato e ancora nel menu "Valuta", metterà la parte che è stata trascinata nel punto in cui è necessario costruire il modello se è abbastanza vicino e controllerà se la risposta è corretta. Quindi ripristinerebbe tutti i blocchi e i testi su "false".

Passaggio 8: comunicare con Arduino

Quindi ora se premi il pulsante su Arduino, controlla se hai messo tutte le parti giuste in posizione e ti dice se è giusto o sbagliato, quindi invia un "1" se è giusto o un "2" se è sbagliato al Arduino.

Passaggio 9: configurazione di Arduino (schema)

Questo era lo schema utilizzato per l'arduino, ma con un pulsante Arcade, quindi il filo verde che va al pulsante andrebbe al connettore in basso sul pulsante (COM) e il filo rosso andrebbe a quello centrale (NO). Per i led è stata utilizzata una resistenza da 220Ω, per il pulsante una da 1kΩ.

Passaggio 10: programmazione di Arduino

Ora, configura il pulsante come INPUT sul pin digitale 2 e i LED come OUTPUT su 4, 6 e 8. Quindi configura la Porta e la legge, se ottiene un "1" (risposta corretta) si accenderà il 3 LED uno per uno, se ottiene un "2" (risposta errata) ne accenderà solo uno. Inoltre, se il pulsante viene premuto, invierà una "e" all'interfaccia.

Passaggio 11: è tutto, divertiti

Ecco i codici utilizzati per questo progetto: