Απλή διαδραστική διεπαφή χρήστη για διδασκαλία και αξιολόγηση .: 11 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:38

Αυτό το έργο αναπτύχθηκε ως μέρος μιας πανεπιστημιακής τάξης, ο στόχος ήταν να δημιουργηθεί ένα διαδραστικό σύστημα διδασκαλίας και αξιολόγησης ενός συγκεκριμένου θέματος. Για αυτό χρησιμοποιήσαμε μια επεξεργασία σε έναν υπολογιστή για τη διεπαφή και ένα Arduino NANO για το κουμπί arcade και τις λυχνίες LED, οπότε είναι αρκετά απλό. Για να διδάξει, προσφέρει μια διεπαφή όπου εμφανίζεται ένα μοντέλο και ο χρήστης μπορεί να κάνει κλικ σε κάθε ένα από τα στοιχεία για να λάβετε μια περιγραφή κειμένου για αυτό. Ωστόσο, για να αξιολογήσει τον χρήστη, προσφέρει ένα πρόβλημα που μοιάζει με παζλ, όπου ο χρήστης πρέπει να μεταφέρει και να αφήσει κάθε μέρος για να δημιουργήσει το αντίστοιχο μοντέλο και να πατήσει ένα κουμπί για να επιβεβαιώσει την απάντησή του, τότε οι λυχνίες LED στο κουμπί θα ενημερώσουν το χρήστη αν η απάντηση είναι σωστή ή όχι.

Το πιο συνηθισμένο πρόβλημα που αντιμετωπίσαμε κάνοντας αυτό το έργο ήταν η επικοινωνία μεταξύ επεξεργασίας και ενός Arduino καθώς η καθυστέρηση της σύνδεσης θα μπορούσε να ποικίλει μεταξύ υπολογιστών, εμποδίζοντας τη φορητότητα της συσκευής. Επίσης, πρέπει να ορίσετε τη θύρα στην οποία συνδέεται το Arduino κάθε φορά, καθώς κάθε συνδεδεμένη συσκευή USB μετράει, οπότε πρέπει να ελέγξετε ποια COM είναι.

Βήμα 1: Προγραμματισμός της διεπαφής για την επεξεργασία (εγκατάσταση)

Ορίσαμε τις μεταβλητές που πρόκειται να χρησιμοποιηθούν, τη θέση όλων των τμημάτων ως συστοιχίες των συντεταγμένων x και y, καθώς και πίνακες για τις εικόνες καθενός από τα μέρη για τα μενού Teach (imgA) και Evaluate (img), μια συστοιχία για να ελέγξετε εάν οι απαντήσεις είναι σωστές και πίνακες για τα bovers και τα κλειδωμένα, τα οποία θα καθορίσουν εάν το ποντίκι βρίσκεται πάνω από τα κομμάτια και αν προσπαθεί να τα πάρει. Στη συνέχεια, προχωρήστε στην προετοιμασία τους και ανοίξτε τη θύρα από την οποία η διεπαφή πρόκειται να επικοινωνήσει με το Arduino.

Βήμα 2: Προγραμματισμός της διεπαφής για την επεξεργασία (κύριο μενού)

Πρώτον, το κύριο μενού θα εμφανίσει δύο κουμπιά και όταν πατηθεί ένα από αυτά, το πρόγραμμα θα φορτώσει είτε το μενού "Διδάσκω" είτε το μενού "Αξιολόγηση".

Έτσι, όταν το ποντίκι πατηθεί και βρίσκεται πάνω από ένα από τα κουμπιά, στέλνει τις θέσεις όλων των τμημάτων που χρειάζεται το νέο μενού και φορτώνει το άλλο μενού.

Βήμα 3: Προγραμματισμός της διεπαφής για την επεξεργασία (μενού "Διδάσκω")

Εδώ, εάν το ποντίκι αιωρείται σε ένα από τα μέρη, θα ενεργοποιήσει το αντίστοιχο bover, το οποίο, αν πατηθεί το ποντίκι, θα ενεργοποιήσει το αντίστοιχο κείμενο και θα το εμφανίσει στην οθόνη.

Βήμα 4: Προγραμματισμός της διεπαφής για την επεξεργασία (μενού "Αξιολόγηση")

Εδώ είναι το ίδιο, θα ενεργοποιούσε τα bovers, τα οποία, όταν πατηθεί το ποντίκι θα ενεργοποιούσαν τα κλειδωμένα αλλά αυτή τη φορά αντί να εμφανίζουν κείμενα, θα σύρουν το επιλεγμένο μέρος. (Αυτό βασίστηκε στο "Σύρετε, αποθέστε και τοποθετήστε το δείκτη του ποντικιού" από το processing.js)

Βήμα 5: Όταν πατήσετε το ποντίκι

Όπως αναφέρθηκε προηγουμένως, όταν το ποντίκι πιέζεται και το bover είναι "αληθινό", θα ενεργοποιούσε το αντίστοιχο κλειδωμένο.

Βήμα 6: Όταν το ποντίκι σύρεται

Εάν το ποντίκι σύρεται, το πραγματικό μενού είναι το μενού αξιολόγησης και ένα από τα κλειδωμένα είναι "αληθινό" θα σύρει το αντίστοιχο μέρος παράλληλα με το ποντίκι.

Βήμα 7: Όταν κυκλοφορεί το ποντίκι

Έτσι, εάν το ποντίκι απελευθερωθεί και εξακολουθεί να βρίσκεται στο μενού "Αξιολόγηση", θα έβαζε το μέρος που σύρθηκε στο σημείο που πρέπει να φτιάξετε το μοντέλο εάν είναι αρκετά κοντά και θα ελέγξει αν η απάντησή σας είναι σωστή. Στη συνέχεια, θα επαναφέρει όλα τα κλειδώματα και τα κείμενα σε "false".

Βήμα 8: Επικοινωνία με το Arduino

Τώρα, αν πατήσετε το κουμπί στο Arduino, ελέγχει αν έχετε τοποθετήσει όλα τα σωστά μέρη και σας λέει αν είναι σωστό ή λάθος, στη συνέχεια στέλνει ένα "1" εάν είναι σωστό ή ένα "2" εάν είναι λάθος στο Arduino.

Βήμα 9: Ρύθμιση του Arduino (Σχέδιο)

Αυτό ήταν το Σχέδιο που χρησιμοποιήθηκε για το arduino, αλλά με ένα κουμπί Arcade, οπότε το πράσινο καλώδιο που πήγαινε στο κουμπί θα πήγαινε στον κάτω σύνδεσμο του κουμπιού (COM) και το κόκκινο σύρμα θα πήγαινε στο μεσαίο (ΟΧΙ). Για τις λυχνίες LED χρησιμοποιήθηκε αντίσταση 220Ω, 1kΩ για το κουμπί.

Βήμα 10: Προγραμματισμός του Arduino

Τώρα, διαμορφώνει το κουμπί ως ΕΙΣΟΔΟΣ στον ψηφιακό ακροδέκτη 2 και τις λυχνίες LED ως ΕΞΟΔΟΣ στις 4, 6 και 8. Στη συνέχεια, διαμορφώνει τη θύρα και την διαβάζει, αν λάβει "1" (σωστή απάντηση) θα ανάψει το 3 LED ένα προς ένα, αν πάρει "2" (λάθος απάντηση) θα άναβε μόνο ένα από αυτά. Επίσης, αν πατηθεί το κουμπί, θα έστελνε ένα "e" στη διεπαφή.

Βήμα 11: Αυτό είναι όλο, Διασκεδάστε

Ακολουθούν οι κωδικοί που χρησιμοποιούνται για αυτό το έργο: