Как сделать сайт-тест: квиз с баллами и результатом

Сайт-тест должен принять ответы, посчитать баллы и показать понятный результат, который можно проверить вручную. До выбора конструктора определите цель, аудиторию, шкалу и границы интерпретации. Затем соберите короткий прототип, пройдите все крайние сценарии и только после этого подключайте форму контактов или аналитику.

Карта результата до сборки

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

• Цель формулируется одним предложением без обещания диагноза или гарантированного результата.
• Каждый вопрос влияет на итог и не дублирует соседний.
• У каждого варианта есть заранее зафиксированный вес.
• Диапазоны результатов не пересекаются и покрывают всю возможную сумму.
• Итог объясняет, почему он показан, и что можно сделать дальше.
• Проверка включает минимум, максимум и значения на каждой границе.

Правило выбора: если нужен простой учебный тест с суммой баллов, берите готовый блок. Если нужны сложные ветвления, сохранение прогресса или юридически значимое решение, проектируйте отдельное приложение и серверную проверку.

Сначала составьте матрицу вопросов и результатов

Не начинайте с оформления. В таблице запишите вопрос, варианты, баллы и пояснение, зачем этот вопрос нужен. Рядом задайте диапазоны результатов. Например, четыре вопроса с ответами по 0, 1 и 2 балла дают сумму от 0 до 8. Диапазоны 0-2, 3-5 и 6-8 покрывают её без пробелов. Это безопасный учебный пример, а не медицинская, психологическая или профессиональная диагностика.

1. Запишите одно действие, которое тест помогает выбрать.
2. Оставьте от пяти до десяти вопросов, влияющих на это действие.
3. Дайте вариантам короткие нейтральные формулировки.
4. Назначьте баллы и отдельно посчитайте минимальную и максимальную сумму.
5. Опишите результаты через наблюдаемые признаки, а не через ярлыки личности.
6. Проверьте все границы диапазонов на бумаге.
7. Только после этого переносите матрицу в конструктор или код.

Практический элемент 1, таблица границ. Для каждого результата заведите четыре столбца: нижняя граница, верхняя граница, тестовая сумма и ожидаемый экран. Если хотя бы одна возможная сумма не попадает ни в один диапазон или попадает сразу в два, логика ещё не готова.

По теме: Как сделать ответы на сайте: FAQ без лишнего JavaScript

Выберите способ реализации

Для теста с баллами без программирования подходит блок теста Tilda BF918: в нём задаются вопросы, правильные ответы, баллы и несколько вариантов результата. Сама Tilda предупреждает, что блок не предназначен для серьёзных мероприятий и конкурсов с призами. Значит, его разумно использовать для обучения, самопроверки и контентного квиза, но не для экзамена с юридическими последствиями.

Google Формы в режиме теста позволяют включить ключ ответов, баллы и обратную связь. Этот вариант удобен, когда отдельный дизайн страницы не критичен. Перед публикацией проверьте настройки доступа: форма должна открываться в отдельном окне без вашей учётной записи и не требовать входа, если это не часть задачи.

Собственная страница нужна, если результат зависит не только от суммы, а от сочетаний ответов, нужен фирменный интерфейс или данные должны обрабатываться на вашем сервере. Если от результата зависит доступ, сертификат или другое ценное действие, баллы проверяйте повторно на сервере. Проверка только в браузере легко меняется через инструменты разработчика.

Соберите тест в конструкторе

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

Для Tilda перенесите вопросы в BF918, отметьте правильные ответы и создайте до шести экранов результата по доле верных ответов. Если нужны разные веса вариантам или произвольные диапазоны, выберите собственный код или другой инструмент. Для Google Форм включите режим теста, задайте ключ и баллы, а затем решите, показывать ли результат сразу или после проверки. Не называйте один ответ правильным, если вопрос оценивает предпочтение, а не знание.

По теме: JavaScript: как сделать сайт и понять, где JS не нужен

Сделайте форму доступной и понятной

У каждого поля должна быть видимая подпись, связанная с элементом управления. Это помогает программам чтения с экрана и посетителям, которые потеряли контекст. В руководстве W3C по подписям форм показано, почему явная связь label и поля надёжнее текста-заполнителя.

• Вопрос читается без опоры только на цвет или картинку.
• Клавиша Tab проходит варианты в логичном порядке.
• Выбранный вариант заметен при достаточном контрасте.
• Ошибка объясняет, что исправить, и не очищает остальные ответы.
• После отправки фокус переходит к результату или уведомлению.
• На узком экране кнопки не перекрываются и помещаются по ширине.

Проведите проверку по трём слоям

Практический элемент 2, диагностическая последовательность. Слой 1 проверяет арифметику: вручную сложите баллы для заранее выбранного набора ответов. Слой 2 проверяет маршрутизацию: убедитесь, что сумма открывает нужный экран. Слой 3 проверяет интерфейс: повторите тот же сценарий на телефоне, с клавиатуры и в приватном окне.

1. Пройдите тест, выбирая везде минимальный балл.
2. Повторите сценарий с максимальными баллами.
3. Проверьте значение ровно на нижней и верхней границе каждого диапазона.
4. Перезагрузите страницу на середине прохождения и оцените ожидаемое поведение.
5. Отправьте форму без обязательного ответа и прочитайте сообщение об ошибке.
6. Откройте ссылку без авторизации в двух браузерах.
7. Сверьте отправку события аналитики с фактически показанным результатом.

Если сумма правильная, а итог неверный, ищите ошибку в диапазонах или порядке правил. Если итог правильный, но после обновления исчезает, решите, должен ли прогресс храниться и где. Если тест работает у автора, но не у посетителя, сначала проверяйте права доступа, сторонние скрипты и блокировщики, а не переписывайте вопросы.

По теме: Как сделать полный скрин сайта: 3 способа в 2026

Ограничения и случаи, когда тест не подходит

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

Сайт-тест не подходит и тогда, когда посетителю нужен один точный ответ из базы данных. В этом случае лучше калькулятор, поиск или пошаговая форма. Для обычной анкеты без правильных ответов пригодится руководство как сделать сайт-анкету, а механику полей разбирает статья как сделать сайт с формой.

Чек-лист перед публикацией

• Все возможные суммы входят ровно в один диапазон.
• Каждый результат объясняет следующий шаг без запугивания.
• Тест проходит без ввода контакта, если контакт не обязателен по сути.
• Ссылка открывается у пользователя без прав автора.
• Клавиатура, мобильный экран и сообщения об ошибках проверены.
• Событие аналитики не содержит ответов с персональными данными.
• Есть дата проверки и сохранённая матрица баллов.

Частые вопросы

Сколько вопросов должно быть в тесте?

Столько, сколько нужно для выбранного результата. Для первого прототипа достаточно короткой серии, где каждый вопрос заметно влияет на итог. Лишние вопросы увеличивают отказы и усложняют проверку.

Можно ли показывать разные результаты без кода?

Да, если конструктор поддерживает баллы и диапазоны. Сначала проверьте граничные суммы, потому что ошибка чаще возникает в правилах, а не в дизайне.

Нужно ли собирать телефон или почту?

Нет, если контакт не нужен для результата. Запрашивайте только необходимые данные и объясняйте, зачем они нужны.