Квиз для опроса сотрудников, который не тонет в чатах и таблицах

Ты — senior product designer, UX-исследователь и frontend-разработчик. Помоги мне без технических знаний собрать квиз для внутреннего опроса сотрудников: человек отвечает на вопросы, получает персональный результат, а руководитель видит статистику по команде. Работаем без Google Forms, Excel и сторонних сервисов.

Сначала задай мне 8–15 простых вопросов с вариантами ответов обо мне и компании: сколько сотрудников и какие отделы, какие роли нужно различать, что измеряем (вовлечённость, ясность задач, нагрузка, адаптация новичков), сколько вопросов готовы задать, нужна ли анонимность по умолчанию, какие контакты собирать и по чьему согласию, нужны ли уведомления в Telegram, какие срезы статистики важны руководителю. Не спрашивай про фреймворки, базы данных, серверы и архитектуру. После ответов коротко перескажи задачу и сразу собирай приложение.

Сущности: вопрос, вариант, ветка, результат, лид. Статусы прохождения: старт → вопросы → результат → заявка. Экраны: стартовый экран с обещанием пользы и пометкой об анонимности, экран вопроса с прогрессом, экран результата с личной рекомендацией, экран заявки на разговор, список прохождений с фильтрами по отделу и статусу.

Логика: выбранный вариант сразу открывает следующий вопрос; ветвление по роли и стажу (новичок получает блок про адаптацию и наставника, опытный сотрудник — про процессы и нагрузку, руководитель — про коммуникацию и приоритеты); скрытый подсчёт баллов по трём шкалам — вовлечённость, ясность задач, перегрузка; результат выбирается по сумме баллов и показывается как профиль с коротким объяснением и тремя рекомендациями, что обсудить с руководителем. Кнопка «Назад» возвращает на предыдущий шаг, «Начать заново» очищает прохождение после подтверждения. Если контакт не оставлен, прохождение сохраняется со статусом «без заявки», чтобы можно было вернуться к нему позже.

Анонимность: по умолчанию имя не спрашивается, в списке прохождений видны только отдел, стаж, ответы, баллы и время. Контакт появляется только после явного согласия на отдельном экране; рядом — понятная формулировка, зачем он нужен. Не добавляй скрытых полей и не смешивай анонимные ответы с именами.

Статистика: количество начатых и завершённых прохождений, конверсия в результат, средние баллы по отделам, распределение профилей, доля оставленных контактов. Отдельный экран «Сводка» с фильтром по датам и отделу, без графиков-украшений — только читаемые числа и подписи.

Дизайн: собери цельную систему под кадровый инструмент — крупная типографика, светлый тёплый фон, тёмный текст, один акцентный цвет, скругления 14–24 px, жёсткие кнопки с заметной тенью, плашки-таблетки, много воздуха. Никаких иконок-шрифтов и внешних картинок: только CSS и текстовые подписи. Обязательно состояния hover и focus, контраст текста не ниже нормы, адаптив от 360 px, удобные зоны нажатия на телефоне.

Технически: один HTML-файл, CSS и vanilla JavaScript внутри, localStorage как хранилище, без backend, сборщиков, npm и внешних скриптов. Раздели слои: storage → сущности → ветвление и подсчёт → компоненты → экраны → навигация. После любого действия данные сохраняются и экран перерисовывается сразу, без перезагрузки. Добавь 3–4 демо-прохождения с разными профилями и кнопку «Удалить тестовые данные» с подтверждением.

Предусмотри пустые поля, битые данные в localStorage, удаление прохождения, закрытие окон по Escape и клику на фон. Перед выдачей сам пройди сценарии: старт, ответы по каждой ветке, результат, заявка, возврат назад, перезагрузка страницы, экран с телефона. Найденное исправь сам.

Ответ — полный готовый HTML-файл, без «вставьте этот фрагмент». Все дальнейшие правки тоже присылай полным файлом.

Моя задача: квиз для опроса сотрудников моей компании с анонимными ответами, ветвлением по ролям и статистикой для руководителя.