---
# System prepended metadata

title: Untitled

---

## Требования к решению
Решите следующие задачи и предоставьте решение в виде 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 баллов, если последний ответ неверный.
* Должна быть возможность легко заменить способ подсчета баллов у любого из типов упражнений или добавить новое упражнение с другим способом подсчета.
