Как создать интерактивный тест с карточками на странице сайта.
Посмотрите видеоурок о том, как добавить квиз на страницу или прочитайте подробную инструкцию ниже.
Блок BF918 (категория «Форма») добавляет интерактивный тест в форме карточек с вопросами. Пройдя тест, пользователь увидит результат и послание, которое вы подготовите. Этот инструмент позволит вовлечь посетителей вашего сайта и дать им полезную информацию в игровой форме.
Тест состоит из трех частей: 1. Заголовок, описание и кнопка с призывом пройти тест. 2. Карточки с вопросами, которые последовательно сменяют друг друга после каждого ответа. Карточек может быть неограниченное количество. 3. Карточка с результатом и кнопкой возврата к началу.
Пример теста:
Тест
Как хорошо вы знаете Тильду?
Проверьте, насколько хорошо вы разбирайтесь в возможностях Тильды и настройках блоков.
Начать тест
C чего начать создание сайта? 👋
Обложка — важный элемент сайта. Но создание сайта начинается с анализа конкурентов и исследования аудитории.
0%
Верно!
0%
Прототип сайта рисуется после изучения аудитории, анализа конкурентов и составления структуры
0%
Следующий вопрос
Проверить
Результат
В каком году появилась Тильда? 👶
Верно!
0%
Неверно
0%
Неверно
0%
Следующий вопрос
Проверить
Результат
Что такое Zero Block? ⚡️
Точно! В Zero Block можно нарисовать свой дизайн сайта.
0%
Неверно. Пустая страничка в библиотеке шаблонов называется Blank page.
0%
Неверно. Блок без контента — это блок DV05, «Дополнительный отступ».
0%
Следующий вопрос
Проверить
Результат
Как отслеживать статистику сайта, созданного на Тильде? 📊
Да, но для более подробной аналитики можно подключить Яндекс.Метрику или Google Analytics.
0%
Да, но также вы можете смотреть встроенную статистику прямо в Тильде.
0%
Верно! Вы можете следить за показателями в Google, Яндекс и личном кабинете Тильды одновременно.
0%
Следующий вопрос
Проверить
Результат
Как добавить дополнительные функции с помощью вставки HTML? 💻
Вставка HTML кода также есть внутри Zero Block.
0%
Для вставки HTML кода также можно использовать блок T123.
0%
Верно! Вставить HTML код можно используя блок T123 и внутри Zero Block.
0%
Следующий вопрос
Проверить
Результат
Самый первый эффект анимации, который появился на Тильде ✨
Неверно, первым появился hover эффект на кнопках и ссылках в меню.
0%
Неверно, первым появился hover эффект на кнопках и ссылках в меню.
0%
Верно!
0%
Следующий вопрос
Проверить
Результат
Оптимальный размер картинки для загрузки на Тильду? 💻
Это самый большой размер для полноэкранного изображения.
0%
Такой формат подойдет для большинства изображений, кроме полноэкранных.
0%
Правильный размер изображений поможет вам оптимизировать работу сайта.
0%
Верно!
0%
Следующий вопрос
Проверить
Результат
Можно ли редактировать фотографии прямо в Тильде?
Верно!
0%
Можно. В настройках блока с фото есть встроенный редактор для изображений.
0%
Следующий вопрос
Проверить
Результат
Какие шрифты можно подключить к сайту на Тильде?
Не только. Вы можете использовать библиотеку Тильды, сторонние сервисы или загрузить свой файл шрифта.
0%
Не только. Вы также можете загрузить свой файл шрифта, воспользоваться бесплатной библиотекой шрифтов на Тильде или подключить Typekit.
0%
Верно! Вы можете воспользоваться бесплатной библиотекой шрифтов на Тильде, загрузить свой файл шрифта, подключить Typekit или Google Fonts.
0%
Следующий вопрос
Проверить
Результат
Как выглядит экспорт исходного кода на Тильде?
Верно! Вы сможете скачать исходный код проекта в виде zip-архива.
0%
Неверно. При экспорте вы получаете статичный HTML, CSS, JS и картинки.
0%
Неверно. При экспорте вы получаете zip-архив со статичным HTML, CSS, JS и картинками.
0%
Следующий вопрос
Проверить
Результат
Что главное для создания эффективного сайта? 🙌
Неверно. Чтобы оптимизировать сайт для поисковиков, прежде всего нужен хороший контент.
0%
Неверно. Неплохо, когда сайт выглядит необычно, но этого недостаточно.
0%
Точно! Сайт начинается с контента.
0%
Следующий вопрос
Проверить
Результат
Tilda Junior
Скорее всего вы недавно познакомились с Тильдой. Об основных функциях Тильды расскажет Справочный центр, а образовательный журнал Tilda Education поможет прокачать знания в интернет-маркетинге и веб-дизайне.
Попробовать еще раз
Tilda Senior
Вы неплохо разбираетесь в Тильде! Чтобы стать экспертом, поизучайте Справочный центр, а образовательный журнал Tilda Education поможет прокачать знания в интернет-маркетинге и веб-дизайне.
Попробовать еще раз
Tilda Expert
Здорово! Скорее всего, вы много работали с Тильдой. Знаете толк в проектировании, дизайне, интернет-маркетинге и можете сделать классный проект!
В библиотеке блоков перейдите в раздел «Форма» → BF918 Тест
Изменение заголовка и описания теста
Откройте меню «Контент» в левой верхней части блока. Нажмите на вкладку «Начало теста». Измените заголовок, подзаголовок и описание теста. Добавьте изображение.
Вы создали начало теста: заголовок, изображение, описание и кнопку с призывом пройти тест.
Создание карточек с вопросами и вариантами ответов
Добавьте новую карточку или отредактируйте существующую.
Заголовок — напишите вопрос. Ответ — напишите варианты ответов на вопрос. У каждого вопроса может быть до 6 вариантов ответа. Описание — комментарий ответа. Тип вариантов ответа — выбор сколько ответов могут быть правильными: один или несколько. Номер правильного ответа — укажите номер цифрой (1, 2, 3...6). Если вариантов несколько — перечислите через запятую.
Вопрос с одним вариантом ответа
Вопрос с несколькими вариантами ответа
Задайте результаты теста
Результаты записываются по порядку от меньшего к большему. «Результат 1» – это результат при наименьшем проценте правильных ответов.
Максимальное количество различных результатов – 6.
В меню «Контент» блока перейдите на вкладку «Результаты». Добавьте заголовок, описание и картинку для каждого результата. Если вы добавите изображение только в один вариант результата, оно автоматически отобразится в остальных.
Пример. У вас 10 вопросов и 4 результата: «плохо», «нормально», «хорошо», «отлично» — «плохо» будет при 0-2 правильных ответах (до 25%) — «нормально» будет при 3-4 правильных ответах (25-50%) — «хорошо» будет при 5-7 правильных ответах (50-75%) — «отлично» будет при 8-10 правильных ответах (75-100%)
Изменение названия кнопок
Перейдите на вкладку «Другое» и измените текст всех кнопок теста.
Как изменить внешний вид теста
Перейдите в настройки блока, нажав кнопку в левом верхнем углу блока с тестом.
Основные настройки — измените цвет текста и ширину поля теста. Стили карточек — измените фон, добавьте обводку. Кнопки — настройте цвет, форму и тени кнопок.
Как добавить в тест кнопки «поделиться в социальных сетях»
В меню «Контент» блока откройте подменю «Рекомендательные кнопки» и отметьте социальные сети, кнопки шаринга которых должны появится после прохождения теста.
Важно. Чтобы результатами теста можно было поделиться в Facebook, нужно зарегистрировать приложение и указать его номер в поле Facebook App ID. Ниже инструкция как зарегистрировать приложение.
Добавьте название для приложения. Оно будет отображаться на карточках шаринга.
В панели слева нажмите Настройки > Основное
На вашем сайте обязательно должны быть страницы с политикой конфиденциальности и пользовательским соглашением. Их адреса необходимо указать в соответствующих полях.
Для составления политики обработки персональных данных вы можете воспользоваться нашим конструктором.
Выберите категорию вашего приложения, затем нажмите на кнопку «Добавить платформу».
Выберите во всплывающем окне платформу «Веб-сайт».
Введите URL-адрес страницы, на которой расположен блок с тестом. Сохраните изменения.
Скопируйте ID приложения и добавьте в полe Facebook App ID в меню «Контент» блока с тестом.
Важно. Пожалуйста, не используйте блок для проведения серьезных конкурсов с призами. Блок предназначен для создания развлекательных тестов и увеличения вовлеченности посетителей сайта.