task.md

Task: virtual-piano

Ключевые навыки

• работа с DOM
• работа со звуком
• работа с Fullscreen API

В ходе выполнения задания вам необходимо создать приложение - виртуальное пианино.

Структура приложения

• на странице отображаются клавиши пианино. Минимальное количество клавиш 12 - 7 белых и 5 черных (одна октава)
• возле клавиш пианино отображаются или названия соответствующих этим клавишам нот (над черными клавишами используется знак альтерации диез), или буквы клавиш клавиатуры, при клике по которым они звучат. Что именно отображается в данный момент зависит от состояния переключателя Notes/Letters. При клике по буквам или нотам звука быть не должно.
• есть иконка для перехода в полноэкранный режим

Функциональность приложения

• при клике по клавише пианино мышкой проигрывается соответствующая этой клавише нота, клавиша переходит в активное состояние
• при клике по клавише клавиатуры, которая соответствует клавише пианино, проигрывается нота, клавиша переходит в активное состояние.
  Нота проигрывается вне зависимости от раскладки клавиатуры (русская или английская) и состояния клавиши CapsLosk. Совместная работа и взаимодействие мышки и клавиатуры не проверяется и не оценивается.
• можно провести курсором с зажатой левой кнопкой мыши по клавишам пианино, при этом будут проигрываться соответствующие данным клавишам ноты. Клавиши, над которыми в данный момент находится курсор, переходят в активное состояние. Если проводить мышкой очень быстро, отдельные клавиши могут не проигрываться, эта особенность работы мышки ошибкой не является.
  Обратите внимание:
  • данная возможность работает только если нажимать мышкой над клавишами пианино (не в любом месте приложения).
  • реализация указанного функционала для других кнопок мыши не проверяется и не оценивается.
• при клике по переключателю Notes/Letters сменяется отображение возле клавиш пианино названий соответствующих этим клавишам нот или букв
• активное состояние клавиш пианино и соответствующих им букв или нот по стилю отличается от неактивного состояния и состояния при наведении, например, разный цвет клавиш, трансформация клавиш, разный цвет соответствующих клавишам букв и нот, или другие эффекты на ваше усмотрение.
• в активное состояние клавиша пианино переходит:
  • при клике по ней мышкой
  • при клике по соответствующей ей клавише клавиатуры
  • если провести над клавишей курсором с зажатой левой кнопкой мышки
• есть кнопка Fullscreen при клике по которой можно развернуть приложение во весь экран. Повторный клик по кнопке Fullscreen или клик по клавише Esc клавиатуры выводит приложение из полноэкранного режима. В зависимости от того, находится приложение в обычном или полноэкранном режиме, меняется иконка на кнопке.
  Взаимодействие кнопки Fullscreen с клавишей F11 не требуется и не проверяется.

Критерии оценки

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

Максимальный балл за задание +50

• при клике по клавише пианино мышкой проигрывается соответствующая этой клавише нота +5
• при клике по клавише пианино мышкой клавиша переходит в активное состояние +5
• при клике по клавише клавиатуры, которая соответствует клавише пианино, проигрывается нота +5
• при клике по клавише клавиатуры, которая соответствует клавише пианино, клавиша пианино переходит в активное состояние +5
• можно провести курсором мышки с зажатой левой кнопкой по клавишам пианино, при этом будут проигрываться соответствующие данным клавишам ноты +5
• можно провести курсором мышки с зажатой левой кнопкой по клавишам пианино, при этом клавиши, над которыми в данный момент находится курсор, переходят в активное состояние +5
• активное состояние клавиш пианино и соответствующих им букв или нот по стилю отличается от и неактивного состояния и состояния при наведении +5
• при клике по переключателю Notes/Letters сменяется отображение возле клавиш пианино названий соответствующих этим клавишам нот или букв +5
• активное и неактивное состояние кнопок переключателя отличаются по стилю +5
• реализована функциональность кнопки Fullscreen, которая позволяет развернуть приложение во весь экран, выйти из полноэкранного режима, в полноэкранном режиме взаимодействует с клавишей Esc клавиатуры +5

Штрафные баллы

• обоснованные подозрение на списывание (js-код работы полностью повторяет код источника в интернете), работы с минимизированным или обфусцированным js-кодом, работы с использованием jQuery или других js-библиотек, работы с крайне низким качеством оформления - 0 баллов за кросс-чек. Ссылки на такие работы необходимо отправить модератору курса.