← Назад к списку
Тестовое задание: QuestionCard (Маяк)
Компания: Маяк
Вакансия: (ссылка удалена)
Frontend тестовое задание (60 минут максимум)
Формат
- Один файл/документ
- Можно писать псевдокод
- Можно использовать AI
- Ничего реально запускать не нужно
- Важны решения, а не объем
Тест. QuestionCard + устойчивый UI (frontend мышление)
Контекст (2 строки)
Есть QuestionCard.
Контент вопроса приходит как JSON (TipTap), формулы через KaTeX.
Пользователь кликает быстро, API иногда косячит.
Задание (что сделать за 60 минут)
Часть 1. Архитектура компонента (20 минут)
Опиши структуру QuestionCard, без воды.
Нужно показать:
- какие компоненты есть
- где хранится состояние
- что локально, что глобально
Пример формата (не копировать, а по смыслу):
QuestionCard
├── QuestionStem (TipTapRenderer)
├── AnswerOptions
├── ActionBar (Check Answer)
├── Explanation (conditional)
Ответь письменно:
- где хранится selectedAnswer
- где хранится isChecked
- что сбрасывается при смене questionId
- что будет, если пользователь кликает очень быстро
Часть 2. Псевдокод логики (20 минут)
Напиши псевдокод логики (не реальный React).
Обязательно показать:
- выбор ответа
- check answer
- показ explanation
- disabled состояния кнопок
Пример уровня детализации:
if (!selectedAnswer) disableCheckButton
onCheckAnswer():
setChecked(true)
onQuestionChange():
resetState()
Важно:
- explanation нельзя показывать до check
- state должен сбрасываться при новом вопросе
Часть 3. Edge cases и UX (20 минут)
Ответь списком, что покажет UI, если:
- explanation отсутствует
- в stem только формулы
- в stem очень длинный текст
- KaTeX упал с ошибкой
- пользователь меняет ответ после check
- пользователь в demo режиме
Для demo режима:
- explanation скрыт или заблюрен
- должен быть понятный текст почему
- CTA на оплату