## Требования к решению Решите следующие задачи и предоставьте решение в виде 3 ссылок: * https://stackblitz.com/ для 1 и 2 задания (Share - Editor Url) * https://jsfiddle.net/ для 3 задания Предоставление решения в правильном виде — один из критериев оценки. Для решения 1 и 2 задачи используйте Angular 2+, для 3 задачи — TypeScript. Внешний вид не учитывается при оценке задания, на это можно не тратить время. ## Задание 1 Форкнуть шаблон приложения https://stackblitz.com/edit/vim8-1-tabs-template?file=app%2Fapp.component.html и на его основе реализовать табы по указанной в app.component.html разметке (в отдельном модуле, в отдельном каталоге). И содержимое, и заголовок должны поддерживать отображение других компонентов/произвольного html. По умолчанию активен первый таб. Должна поддерживаться возможность динамически добавить/убрать таб. При удалении активного таба, активным становится первый таб (если остался хотя бы один). Для оформления табов достаточно использовать 3 класса из `styles.css`. Приложение должно работать без `NO_ERRORS_SCHEMA/CUSTOM_ELEMENTS_SCHEMA` в `AppModule`. **Bonus**: Сделать так, чтобы содержимое табов инициализировалось только при активации таба. Допускается изменение разметки. ## Задание 2 Форкнуть шаблон приложения https://stackblitz.com/edit/vim8-2-resize-template?file=app%2Fapp.component.html и на его основе реализовать: * модуль в отдельном каталоге, содержащий структурную директиву ifViewportSize, которая рендерит элемент, если ширина окна браузера соответствует переданному значению. **Ширина браузера может изменяться после запуска приложения.** * сервис в том же модуле, который занимается определением текущей ширины окна браузера и должен получать на этапе инициализации конфиг с пороговыми значениями для разных типов ширины (нижнее значение, с которого начинается соответствующий тип) * конфиг для сервиса должен передаваться через AppModule Для тестирования раскомментировать разметку в `app.component.html`. **Обратить внимание на производительность** (на странице могут быть сотни произвольных компонентов) ``` interface IConfig { medium: number; large: number; } ``` ``` small: viewportWidth < config.medium medium: config.medium <= viewportWidth < config.large large: config.large <= viewportWidth ``` ## Задание 3 На странице присутствуют упражнения, которые выполняет ученик. Упражнение — это некий интерактивный элемент с правильными/неправильными ответами, например: * `<select>`, в котором ученик должен выбрать правильный ответ (ответ проверяется автоматически при выборе) * `<input>`, где ученик вписывает правильный ответ (есть кнопка для проверки ответа) Задача — **реализовать архитектуру классов** для системы, описанной ниже. Код не обязательно должен запускаться: не нужно верстать, реализовывать сохранение и т.д. Достаточно показать общую структуру классов, их методы и зависимости. * Нужно сохранять состояние упражнений в хранилище. Состояние — последний ответ пользователя + история всех ответов. * Способов сохранения упражнений может быть несколько (например, на сервер через API, localStorage и т.д.) и они могут со временем меняться. Нужно предусмотреть возможность быстрой смены способа сохранения для одного или нескольких типов упражнений. * Нужно рассчитывать и выводить итоговый балл на странице (простая сумма баллов за каждое упражнение). Всего существует 2 способа подсчета баллов для упражнения: * 10 баллов, если последний ответ верный. 0 баллов, если неверный. * 10 баллов, если последний ответ верный и это была единственная попытка. 5 баллов, если последний ответ верный, но это не первая попытка. 0 баллов, если последний ответ неверный. * Должна быть возможность легко заменить способ подсчета баллов у любого из типов упражнений или добавить новое упражнение с другим способом подсчета.