# Uton Frontend developer

## Требования к решению

Решите следующие задачи и предоставьте решение в виде 3 ссылок:
* https://stackblitz.com/ для 1 и 2 задания (Share - Editor Url)
* https://jsfiddle.net/ для 3 задания

Предоставление решения в правильном виде — один из критериев оценки.

Для решения 1 и 2 задачи используйте Angular 6, для 3 задачи — TypeScript. Внешний вид не учитывается при оценке задания, на это можно не тратить время.

## Задание 1

Реализовать модуль с необходимыми компонентами для реализации табов с указанной ниже разметкой использования. И содержимое, и заголовок должны поддерживать отображение других компонентов/произвольного html. По умолчанию активен первый таб. Должна поддерживаться возможность динамически добавить/убрать таб (ngFor или ngIf как в разметке ниже). При удалении таба, если тот был активным, активным становится первый таб (если остался хотя бы один). В решении вывести разметку ниже для проверки выполнения задания. Верстка: список заголовков табов в одну строку и активный контент под ними, заголовок активного таба должен быть выделен произвольным способом.

**Bonus**: Сделать так, чтобы содержимое табов инициализировалось только при активации таба. Допускается изменение разметки.

<button (click)="visible = !visible">
  Toggle 3 tab
</button>

<tabs>
  <tab>
    <tab-title>
      Title 1
    </tab-title>
    <tab-content>
      <i>Content</i> 1
    </tab-content>
  </tab>
  <tab>
    <tab-title>
      <i>Title</i> 2
    </tab-title>
    <tab-content>
      Content 2
    </tab-content>
  </tab>
  <tab *ngIf="visible">
    <tab-title>
      Title 3
    </tab-title>
    <tab-content>
      Content 3
    </tab-content>
  </tab>
</tabs>

## Задание 2

Реализовать:
* модуль, содержащий структурную директиву `ifViewportSize`, которая рендерит хост, если ширина окна браузера соответствует переданному значению
* сервис, который занимается определением текущей ширины окна браузера и должен получать на этапе инициализации конфиг с пороговыми значениями для разных типов ширины (нижнее значение, с которого начинается соответствующий тип).

**Обратить внимание на производительность** (на странице могут быть сотни произвольных компонентов)

<test-component *ifViewportSize="'small'">1</test-component>
<test-component *ifViewportSize="'medium'">2</test-component>
<test-component *ifViewportSize="'large'">3</test-component>

interface IConfig {
  medium: number;
  large: number;
}

`test-component` — произвольный компонент, который просто выводит переданные данные. Конфиг для сервиса передавать в AppModule. В решении вывести разметку выше для проверки выполнения задания.

**Bonus**: Организовать все в виде модуля.

## Задание 3

На странице присутствуют упражнения, которые выполняет ученик. Упражнение — это некий интерактивный элемент с правильными/неправильными ответами, например:
* `<select>`, в котором ученик должен выбрать правильный ответ.
* `<input>`, где ученик вписывает правильный ответ.

Задачи стоят следующие:
* Нужно сохранять состояние упражнений в хранилище (например, на сервер через API, localStorage и т.д.). Для простоты состоянием будем считать только последний ответ пользователя (по желанию можно реализовать сохранение истории ответов пользователя). Способов сохранения упражнений может быть несколько и они могут со временем меняться. Для простоты представим что существует 3 основных способа сохранения, но если мы захотим написать еще один и протестировать его на некоторых упражнениях, то это должно произойти максимально легко.
* Нужно рассчитывать и выводить суммарный балл на странице за правильные и неправильные ответы. Способ расчета у большинства упражнений один и тот же и зависит от количества вариантов ответа у упражнения. Должна быть возможность легко заменить способ подсчета баллов у любого из упражнений или добавить новое упражнение с другим способом подсчета.

Нужно реализовать архитектуру классов для данной системы.

Ради экономии времени очень важно писать как можно меньше кода: не делать реализацию сохранения, расчета баллов и так далее. Достаточно показать общую структуру классов, их методы, зависимости, так, чтобы было понятно, что происходит.