Це тестове завдання розраховане для кандидатів на junior позиції та для новачків може здатися складним. Більше того, опціональні вимоги можуть стати викликом і для багатьох джунів =) Все ж таки ми практикуємося, а значить чим складніше доведеться зараз, тим легше буде потім на технічному інтерв'ю. Суть завдання полягає у створенні додатка для розширення словникового запасу під час вивчення іноземних мов. У той же час, тестові завдання це добре, але виконавши завдання один раз і закинувши його, ви також закинете отримані знання, тому що без практики все забувається. За вашим бажанням, це тестове завдання може перерости в pet-проект, який ви зможете використовувати у своїх особистих цілях та покращувати його на власний розсуд. Так, написаний вами код періодично переглядатиметься і покращуватиметься, а значить, ніколи не забудеться.
Вступ
Дослідження говорять про те, що нові слова краще вивчати не заучуючи їх поодинці, а у складі семантичної групи, наприклад слова, що описують погоду або ваш похід до магазину. Люди, які випробували різні підходи на практиці, рекомендують свій підхід: об'єднувати різні слова у речення та заучувати їх у контексті цих речень. Так ми й зробимо.
В рамках цього завдання вам належить створити програму для вивчення нових слів. У прикладі ми орієнтуватимемося на англійську мову, але ви можете вибрати будь-яку іншу. Вам необхідно підготувати список зі 100 найчастіше вживаних слів та речення з їх використанням. Приклад такого списку для англійської мови ви можете завантажити нижче. Найпростішим та найшвидшим способом підготовки такого списку для інших мов буде використання ChatGPT, Gemini або будь-якої іншої AI моделі.
Як і раніше, Ви можете реалізувати тільки frontend або backend при частковому виконанні тестового завдання або все разом для повного завершення. Для емуляції бекенда можна скористатися пакетом json-server, а перевірити API можна за допомогою Postman.
Вимоги
Створіть веб-додаток, за допомогою якого користувач зможе вивчати нову лексику. Додаток повинен мати дві сторінки або дві вкладки, для вивчення та перевірки вивченої лексики.
На сторінці вивчення лексики користувачеві показуються слова, які потрібно запам'ятати і речення, у яких ці слова вживаються. Також на сторінці має бути кнопка Далі, для перегляду наступної групи слів та речення.
На сторінці перевірки лексики користувачеві показується речення без слів, які потрібно запам'ятати (ключові слова). Замість ключових слів поставлено пропуски. Під реченням розміщені html інпути, в які необхідно вписати пропущені слова та дві кнопки: для перевірки результату та для переходу до наступної лексики. Якщо перевірка пройдена, користувачеві відображається повідомлення про успішну перевірку, інакше повідомлення про помилку. Кнопку переходу до наступної лексики можете блокувати до перевірки або не блокувати, щоб можна було пропустити важкі питання.
Опціональні вимоги
У завданні не описаний алгоритм, за яким показується лексика на сторінці вивчення лексики. У найпростішому варіанті, лексика буде показуватися з самого початку при кожному відвідуванні сторінки, що безглуздо у випадку великого списку слів. Створіть свій алгоритм відображення лексики, який даватиме оптимальну кількість повторів для запам'ятовування слів і водночас забезпечить повне проходження списку з часом.
Нова лексика може погано запам'ятовуватися, якщо використовувати тільки речення. Ви можете додати картинки із зображенням того, що описується у реченні та показувати їх у доповнення.
На сторінці вивчення лексики користувач бачить слова та речення, але без практики вимови такий набір має малу користь. Інтегруйте API щодо озвучування тексту для прослуховування вимови лексики від будь-якого провайдера: Google, Microsoft, Amazon. Подумайте про кешування звукових доріжок для оптимізації витрат на використання API.
На сторінці перевірки лексики замість ключових слів надаються інпути, в які необхідно вписати слова. Це може бути складно на початкових етапах і зазвичай в подібних додатках дають кілька опцій у вигляді групи кнопок з рандомною вибіркою ключових слів. Реалізуйте цей або подібний до нього варіант, якщо вважаєте за потрібне.
Вимоги frontend
Визначте вимоги, виходячи з опису завдання. Додати unit тести.
Вимоги backend
Визначте вимоги та необхідні ендпоінти, виходячи з опису завдання. Додати unit тести. Протестуйте створене API з урахуванням загальних тестових сценаріїв.
Тестові сценарії
Для перевірки своєї роботи використовуйте наступні тестові сценарії.
- Сторінка вивчення лексики.
- Сторінка завантажується успішно, і на ній відображаються слова та речення для вивчення, а також кнопка "Далі".
- Відображення слів та речень. Слова та речення відображаються коректно, і користувач може ознайомитися з ними.
- Натискання кнопки "Далі". Наступна група слів та речення завантажується на сторінку.
- Сторінка перевірки лексики.
- Перевірка успішного введення. Для правильних даних відображається повідомлення про успішну перевірку.
- Перевірте неправильне введення. Для неправильних даних відображається повідомлення про помилку.
- Перевірте пусте введення. У разі відсутності даних відображається повідомлення про помилку.
- Перехід до наступної лексики. Якщо натиснути на відповідну кнопку, користувач може перейти до наступної перевірки.
- Перевірка обробки великої кількості слів. Велика кількість слів в інпуті замість ключового слова оцінюється як неправильні дані.
