Простой интерактивный пользовательский интерфейс для обучения и оценки: 11 шагов

2025 Автор: John Day | [email protected]. Последнее изменение: 2025-01-23 15:05

Этот проект был разработан в рамках университетского класса, целью было создание интерактивной системы для обучения и оценки определенной темы. Для него мы использовали Обработку на ПК для интерфейса и Arduino NANO для кнопки аркады и светодиодов, так что это довольно просто. Для обучения он предлагает интерфейс, в котором отображается модель, и пользователь может щелкнуть по каждому из компонентов. чтобы получить его текстовое описание. Однако для оценки пользователя он предлагает проблему, похожую на головоломку, когда пользователь должен перетащить каждую часть, чтобы построить соответствующую модель, и нажать кнопку, чтобы подтвердить свой ответ, тогда светодиоды на кнопке сообщат пользователю правильный ответ или нет.

Наиболее распространенной проблемой, с которой мы столкнулись при создании этого проекта, была связь между обработкой и Arduino, поскольку задержка соединения могла различаться между компьютерами, что затрудняло переносимость устройства. Кроме того, вы должны определить порт, к которому Arduino подключается каждый раз, потому что каждое подключенное USB-устройство учитывается, поэтому вам нужно проверить, какой это COM.

Шаг 1: Программирование интерфейса при обработке (настройка)

Мы устанавливаем переменные, которые будут использоваться, положение всех частей в виде массивов координат x и y, а также массивы для изображений каждой из частей для меню Teach (imgA) и Evaluate (img)., массив для проверки правильности ответов и массивы для упоров и замков, которые будут определять, находится ли мышь над частями и пытается ли она их поднять. Затем приступите к их инициализации и откройте порт, через который интерфейс будет связываться с Arduino.

Шаг 2: Программирование интерфейса обработки (главное меню)

Во-первых, в главном меню будут отображаться две кнопки, и когда одна из них будет нажата, программа загрузит либо меню «Обучение», либо меню «Оценить».

Таким образом, когда мышь нажата и находится над одной из кнопок, она отправляет позиции всех частей, которые нужны новому меню, и загружает другое меню.

Шаг 3: Программирование интерфейса при обработке (меню «Обучение»)

Здесь, если мышь наводит курсор на одну из частей, она активирует соответствующий указатель мыши, который при нажатии на мышь активирует соответствующий текст и отображает его на экране.

Шаг 4: Программирование интерфейса обработки (меню «Оценить»)

Здесь то же самое, он активирует заглушки, которые при нажатии мыши активируют блокировки, но на этот раз вместо отображения текста он перетаскивает выбранную часть. (Это было основано на «Перетаскивании, отпускании и наведении мышью» из processing.js)

Шаг 5: Когда мышь нажата

Как указывалось ранее, когда мышь нажата и стрелка установлена в положение «истина», будет активирована соответствующая блокировка.

Шаг 6: при перетаскивании мыши

Если перетаскивать мышь, фактическое меню является меню оценки, и одна из блокировок имеет значение «истина», и соответствующая часть будет перетаскиваться вместе с мышью.

Шаг 7. Когда мышь отпущена

Таким образом, если мышь отпущена и все еще находится в меню «Оценить», она поместит перетаскиваемую часть в то место, где вам нужно построить модель, если она достаточно близко, и проверит, правильный ли ваш ответ. Затем он сбросит все блокировки и тексты на «false».

Шаг 8: общение с Arduino

Итак, теперь, если вы нажмете кнопку на Arduino, она проверит, все ли правильные части установлены на место, и сообщит вам, правильно это или неправильно, а затем отправит «1», если это правильно, или «2», если это неправильно. Ардуино.

Шаг 9: Настройка Arduino (Схема)

Это была схема, используемая для Arduino, но с кнопкой Arcade, поэтому зеленый провод, идущий к кнопке, шел к нижнему разъему на кнопке (COM), а красный провод - к среднему (NO). Для светодиодов использовался резистор 220 Ом, для кнопки - 1 кОм.

Шаг 10: программирование Arduino

Теперь он настраивает кнопку как INPUT на цифровом контакте 2, а светодиоды как OUTPUT на 4, 6 и 8. Затем настраивает порт и считывает его, если он получит «1» (правильный ответ), он загорится 3 Светодиоды один за другим, если он получит «2» (неправильный ответ), то загорится только один из них. Кроме того, если кнопка нажата, интерфейсу будет отправлена буква «е».

Шаг 11: Это все, получайте удовольствие

Вот коды, используемые для этого проекта: