Giao diện người dùng tương tác đơn giản để giảng dạy và đánh giá: 11 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:36

Dự án này được phát triển như một phần của lớp học đại học, mục tiêu là tạo ra một hệ thống tương tác để giảng dạy và đánh giá một chủ đề nhất định. Đối với nó, chúng tôi đã sử dụng Xử lý trên PC cho giao diện và Arduino NANO cho nút arcade và đèn LED, vì vậy nó khá đơn giản. để có được một mô tả văn bản về nó. Tuy nhiên, để đánh giá người dùng, nó đưa ra một bài toán giống như câu đố, trong đó người dùng phải kéo và thả từng phần để xây dựng mô hình tương ứng và nhấn một nút để xác nhận câu trả lời của họ, sau đó đèn LED trên nút sẽ cho người dùng biết nếu câu trả lời là đúng hay không.

Vấn đề phổ biến nhất mà chúng tôi gặp phải khi thực hiện dự án này là giao tiếp giữa Xử lý và Arduino vì độ trễ của kết nối có thể khác nhau giữa các máy tính, cản trở tính di động của thiết bị. Ngoài ra, bạn phải xác định cổng mà Arduino được kết nối mỗi lần, vì mọi thiết bị USB được kết nối đều có giá trị nên bạn phải kiểm tra xem đó là COM nào.

Bước 1: Lập trình giao diện đang xử lý (Setup)

Chúng tôi thiết lập các biến sẽ được sử dụng, vị trí của tất cả các phần dưới dạng mảng của dây x và y, cũng như các mảng cho hình ảnh của từng phần cho menu Dạy (imgA) và Đánh giá (img), một mảng để kiểm tra xem các câu trả lời có đúng hay không và các mảng cho bovers và khóa, sẽ xác định xem con chuột có ở phía trên các mảnh hay không và nó có đang cố gắng nhặt chúng hay không. Sau đó, tiến hành khởi tạo chúng và mở cổng mà từ đó giao diện sẽ giao tiếp với Arduino.

Bước 2: Lập trình Giao diện đang xử lý (Menu chính)

Đầu tiên, menu chính sẽ hiển thị hai nút và khi một trong số chúng được nhấn, chương trình sẽ tải menu "Dạy" hoặc menu "Đánh giá".

Vì vậy, khi con chuột được nhấn và ở trên một trong các nút, nó sẽ gửi vị trí của tất cả các phần mà menu mới cần và tải menu khác.

Bước 3: Lập trình Giao diện trên Xử lý (Menu "Dạy")

Ở đây, nếu con chuột đang di chuột một trong các bộ phận, nó sẽ kích hoạt bover tương ứng, nếu con chuột được nhấn sẽ kích hoạt văn bản tương ứng và sẽ hiển thị nó trên màn hình.

Bước 4: Lập trình Giao diện đang xử lý (Menu "Đánh giá")

Ở đây cũng tương tự, nó sẽ kích hoạt các bovers, khi nhấn chuột sẽ kích hoạt các khóa nhưng lần này thay vì hiển thị văn bản, nó sẽ kéo phần đã chọn. (Điều này dựa trên "Kéo, Thả và Di chuột bằng chuột." Từ processing.js)

Bước 5: Khi ấn chuột

Như đã nêu trước đó, khi con chuột được nhấn và bover là "true", nó sẽ kích hoạt khóa tương ứng.

Bước 6: Khi Chuột được Kéo

Nếu chuột được kéo, menu thực tế là menu đánh giá và một trong những phần bị khóa là "true", nó sẽ kéo phần tương ứng cùng với chuột.

Bước 7: Khi chuột được thả

Vì vậy, nếu con chuột được thả ra và vẫn ở trên menu "Đánh giá", nó sẽ đặt phần đang được kéo vào vị trí bạn cần xây dựng mô hình nếu nó đủ gần và sẽ kiểm tra xem câu trả lời của bạn có đúng không. Sau đó, nó sẽ đặt lại tất cả các khóa và văn bản thành "false".

Bước 8: Giao tiếp với Arduino

Vì vậy, bây giờ nếu bạn nhấn nút trên Arduino, nó sẽ kiểm tra xem bạn đã đặt tất cả các bộ phận đúng vị trí chưa và cho bạn biết nó đúng hay sai, sau đó gửi "1" nếu nó đúng hoặc "2" nếu nó sai với Arduino.

Bước 9: Thiết lập Arduino (Đề án)

Đây là Sơ đồ được sử dụng cho arduino, nhưng với một Nút Arcade, vì vậy dây màu xanh lá cây đi đến nút sẽ đi đến đầu nối dưới cùng trên nút (COM) và dây màu đỏ sẽ đi đến đầu nối giữa (NO). Một điện trở 220Ω được sử dụng cho đèn LED, 1kΩ cho nút.

Bước 10: Lập trình Arduino

Bây giờ, nó cấu hình nút là INPUT trên chân kỹ thuật số 2 và đèn LED là OUTPUT trên 4, 6 và 8. Sau đó, cấu hình Cổng và đọc nó, nếu nó nhận được "1" (câu trả lời đúng), nó sẽ sáng lên 3 Đèn LED từng cái một, nếu nó nhận được "2" (câu trả lời sai), nó sẽ chỉ sáng một trong số chúng. Ngoài ra, nếu nút được nhấn, nó sẽ gửi "e" đến giao diện.

Bước 11: Thế là xong, Chúc bạn vui vẻ

Dưới đây là các mã được sử dụng cho dự án này: