Основне завдання: Розробити компонент на Angular для створення та редагування тестів. Можливе використання фреймворка, наприклад CKEditor 5.
Опис: Компонент має надавати можливість користувачеві створювати та редагувати тести на різні теми. Користувач має мати можливість додавати різні типи інтерактивних компонентів у тіло тесту.
Функціонал.
Режим редагування:
- Введення тексту питання.
- Вставка інтерактивних елементів:
- Дропдаун (з можливістю додавання опцій та позначення правильної відповіді за допомогою чекбокса).
- Поле для введення (з можливістю вказівки правильної відповіді).
Режим перегляду:
- Інтерактивна взаємодія з тестом (введення відповідей, вибір із дропдауна).
- Можливість тестувати тест та бачити, як він буде виглядати для кінцевого користувача.
Загальні:
- Перемикання між режимом редагування та режимом перегляду.
- Можливість збереження та завантаження тесту у форматі JSON. Тобто користувач може використати json для відтворення тесту з коректними інтерактивними елементами та відповідями.
Поведінка інтерактивного елемента поле вводу (Input).
Додавання відповіді: Користувач вводить відповідь у поточний елемент вводу
Редагування та видалення: Користувач ставе курсор в поле вводу та може редагувати текст
Режим перегляду: поле вводу, користувач має можливість друкувати відповідь
Поведінка інтерактивного елемента дропдаун(Select).
Початковий стан: У тексті є плейсхолдер дропдауна з однією опцією: "Додати відповідь".
Додавання відповіді: При виборі опції "Додати відповідь", з'являється нова опція (поле для введення тексту) вище поточної вибраної опції. Користувач може відразу починати вводити текст для цієї опції. Біля кожної опції - чекбокс дозволяє позначити відповідь як правильну. Опція "Додати відповідь" автоматично переміщається нижче, стаючи останнім елементом у дропдауні.
Редагування та видалення: Для редагування опції користувач відкриває дропдаун та вибирає опцію для редагування, після чого опція переходить у стан редагування та користувач може змінювати її текст. Біля кожної опції кнопка видалення. При видаленні має з'являтися попап із підтвердженням. Вихід із режиму керування по фокусу або натисканню на ентер.
Завершення редагування: Після додавання всіх необхідних опцій користувач може просто клацнути поза дропдауном, і він "закріпиться" у такому стані. Якщо користувач вирішить повернутися та редагувати його, він може просто клацнути на дропдаун і продовжити редагування.
Режим перегляду: звичайний дропдаун з набором опцій які були додані в режимі редагування.
Адаптивність та мобільні пристрої: На мобільних пристроях переконайтеся, що дропдаун легко відкривається та редагується, і що всі елементи керування мають зручний розмір для дотику пальцем.
Видалення елемента: можна видалити поставивши курсор поза елементом та натиснути клавішу backspace або поставивши курсор перед елементом та натиснути Del
Дизайн: Лаконічний, мінімалістичний інтерфейс.
Розширюваність: Набір доступних інтерактивних елементів повинен бути легко розширюваним, щоб у майбутньому можна було додавати нові типи інтерактивних елементів без необхідності повного переписування компонента. Вимоги до коду:
- Код повинен бути структурованим таким чином, щоб його легко було розібратися іншому розробнику.
- Функціонал має бути розділений на логічні частини (модулі, компоненти, сервіси), кожна з яких вирішує своє завдання.
- Код має бути написаний таким чином, щоб додавання нового функціоналу або зміна існуючого не вимагало великих змін в уже написаному коді.
- Код має відповідати прийнятим стандартам та кращим практикам розробки на Angular.
Підтримка мобільного дизайну: так
Додаю приклад загальної поведінки редактора.
