Как создать тест на сайте

Как сделать тест на сайте: развлекай и властвуй

Если ты зовешь пользователей на свой сайт, то должен ему предложить что-то крутое. Текст может быть 1000 раз качественным, но какая разница, если ЦА ушла в пятничный рейв. Спасти ситуацию может геймификация. Наш первый тест Подходите ли вы на должность интернет-маркетолога в GUSAROV? был пробным и создавался на очень простом конструкторе, однако его сразу же прошло более 600 человек.

Для создания второго теста Что вы знаете о новинках SEO и интернет-маркетинга был выбран Playbuzz. Это платформа для создания опросов, викторин, тестов и иного вирусного контента. Сайт на английском языке, но пользоваться им достаточно легко.

Внимание! Самый подробный и понятный туториал, как сделать тест на Playbuzz за несколько шагов.

Шаг 1 – написать текст на тест, вопросы и ответы

В интернете большое количество тестов, но не советуем идти по пути наименьшего сопротивления и копировать чужие вопросы-ответы. Скучные академические тесты – совершенно не то, что может привлечь пользователя. Тема текста должна быть актуальна, подача – оригинальна, а вопросы и варианты ответов – продуманны.

Определитесь с темой теста, напишите вопросы и ответы. Обратите внимание:

• Оптимальный вариант: сочетание развлекательного и образовательного контента
• Самая популярная тема для тестов – «ты». Используйте персонификацию

Главная цель использования такой геймификации – побудить пользователя пройти тест и поделиться результатом – распространить информацию о себе. Каждый так или иначе становится АВТОРОМ.

Шаг 2 – создать тест на playbuzz.com

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

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

В переводе с английского это значит «Пустяки». Это классическая викторина с правильными/неправильными вариантами ответов и персональным результатом.

Бесплатное обучение маркетингу от Edugusarov.by на 7 дней

У нас вы сможете учиться в удобном темпе, понять, как работает маркетинг, и оценить необходимость его изучения.

Итак, как сделать тест на сайт на примере Что вы знаете о новинках SEO и интернет-маркетинга в 2017?

Добавляем название теста и описание. Используйте простые и понятные предложения – обращения к пользователям в интернете в развлекательном контенте не должны напоминать школьный экзамен. Загрузите главную фотографию теста.

Добавьте фото, которое будет отображаться в социальной сети.

Установите теги. Их можно выбрать из списка или вписать самостоятельно.

Учитывайте рекомендации по размеру и качеству фотографий.

Посмотрите дополнительные настройки для теста.

Permissions – укажите, кто будет видеть ваш тест. Можно выбрать варианты «Только я», «Доступ по ссылке» и «Публичный» (рекомендуется).

Язык – язык, на котором был написан тест. В нашем случае – русский.

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

Создаем первый вопрос. Для всех последующих алгоритм сохраняется.

• Впишите в поле вопрос
• Добавьте необходимое количество вариантов ответа
• Отметьте галочкой правильный ответ
• Выберите фотографию

Внимание! Следите за тем, чтобы качество фото было достаточно хорошим. А содержание – так или иначе поддерживало идею теста и вписывалось в общий стиль. GUSAROV – еноты. Классика. Работаем дальше.

По этому принципу добавляем остальные вопросы — Add question.

Пропишите результаты. Для этого нужно снова добавить фото и текст. На прощание можете оставить какой-нибудь комментарий – ожидания пользователя должны быть оправданы!

Получившийся тест можно:

• Посмотреть – Preview
• Сохранить изменения (черновик) – Save draft
• Опубликовать – Publish

Получить консультацию

Шаг 3 – добавить код теста на сайт

После сохранения теста, можно добавить его код на сайт.

Готово. Вы – великолепны!

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

Получить консультацию

Директор компании, консультант и интернет-маркетолог. Автор статей по интернет-маркетингу, которые стали инструкциями у крупного бизнеса. Постоянный организатор и спикер на мастер-классах по юзабилити и отстройке от конкурентов.

Похожие записи:

Бонус от Андрея Гусарова!

Руководитель агентства GUSAROV подготовил для вас подарок: чек-лист с 74 убойными лид-магнитами для маркетологов и руководителей!

Забрать подарок

• Продвижение по трафику
• Продвижение молодого сайта
• Продвижение сайта в США
• Продвижение сайта в Москве

• Наша команда
• Словарь терминов
• Вакансии
• Услуги
• Политика конфиденциальности

СПАСИБО, ЧТО ДОВЕРИЛИСЬ НАМ!

Мы вас не подведём! Наш менеджер перезвонит в течение часа, чтобы обсудить всё, что вам интересно. Не бойтесь спрашивать, мы не кусаемся!

СПАСИБО, ЧТО ДОВЕРИЛИСЬ НАМ!

Мы вас не подведём! Наш менеджер перезвонит в течение часа, чтобы обсудить всё, что вам интересно. Не бойтесь спрашивать, мы не кусаемся!

СПАСИБО, ЧТО ДОВЕРИЛИСЬ НАМ!

Мы вас не подведём! Наш менеджер перезвонит в течение часа, чтобы обсудить всё, что вам интересно. Не бойтесь спрашивать, мы не кусаемся!

СПАСИБО, ЧТО ДОВЕРИЛИСЬ НАМ!

Мы вас не подведём! Наш менеджер перезвонит в течение часа, чтобы обсудить всё, что вам интересно. Не бойтесь спрашивать, мы не кусаемся!

СПАСИБО, ЧТО ДОВЕРИЛИСЬ НАМ!

Мы вас не подведём! Наш менеджер перезвонит в течение часа, чтобы обсудить всё, что вам интересно. Не бойтесь спрашивать, мы не кусаемся!

Как создавать тесты и викторины на JavaScript

Разбираемся, как создавать тесты и викторины для сайта на ванильном JavaScript.

Евгений Кучерявый

Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.

Тесты и викторины хороши не только ради проверки знаний, но и как развлекательный контент, который заставляет пользователей дольше оставаться на сайте.

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

Репозиторий проекта на GitHub

Вёрстка страницы

Тест мы поместим в файл quiz.html, чтобы его можно было вставлять с помощью iframe в другие страницы. Давайте сверстаем тест:

Наверху находится сам вопрос, под ним — варианты ответов, а в самом низу — прогресс прохождения теста.

Создаём классы

Тест будет работать с помощью следующих классов:

• Quiz — сам тест. Содержит все данные, отвечает за переход к следующему вопросу и завершение теста.
• Question — вопрос. Содержит текст вопроса и варианты ответов.
• Answer — ответ. Содержит текст ответа и количество очков.
• Result — результат. Содержит финальный текст и количество очков, которое необходимо для достижения этого результата.

Вот сами классы:

Когда пользователь завершит тест, то увидит свой результат:

Особенности создания разных тестов

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

• Кто ты из «Чародеек» (W. I. T. C. H.).
• За кого из «Сверхъестественного» ты выйдешь замуж.
• Твой гороскоп на сегодня.
• На какой факультет ты бы попал в Хогвартсе.

Всё это может быть очень забавным и вовлекающим, если учитывать особенности своей аудитории. Например, для программистов есть интересные тесты на сайте tproger.ru.

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

То же самое касается и таймеров: если вы даёте ограниченное время на прохождение теста, то время начала отсчёта должно храниться на сервере, а не в JS-коде.

Заключение

С помощью кода из статьи можно создавать сколько угодно тестов. Разве что для каждого придётся дублировать файл app.js, чтобы указать новые вопросы.

Исправить это можно с помощью HTTP-запросов — вопросы будут храниться на сервере и отправляться пользователю в виде JSON. Это очень распространённая практика в веб-разработке, которую нужно знать каждому разработчику.

Читайте также:

• Пишем простой редактор аватарок на JavaScript
• Apache, Mozilla, Sun и Eclipse: свободные лицензии компаний и некоммерческих организаций
• Как работает Docker: подробный гайд от техлида

Создайте свой тест

Настройте специальные правила, чтобы каждый участник мог увидеть свой результат, а также собственные правильные и неправильные ответы.

Подготовьте индивидуальный текст завершения для разных групп участников.

Анализ результатов и статистика

Получите доступ к результатам тестирования в режиме реального времени. Все данные представлены в виде таблиц и диаграмм.

Знакомьтесь с общей статистикой или проверьте ответ конкретного участника. Выгружайте результаты в Word, Excel, PDF, SPSS.

Настройка внешнего вида
и адаптивный дизайн

Раскрасьте свой тест яркими красками. Загружайте изображения, аудио и видео.

Оформите тест в корпоративном стиле. Участники могут пройти тестирование на смартфонах и планшетах.

Создайте тест самостоятельно

Создать тест

Конструктор тестов

Простой и удобный сервис для создания тестов и проведения тестирования.

Гибкая настройка теста параметрами

В конструкторе тестов предусмотрено большое количество различных настроек тестов. Вы можете быстро и удобно создать действительно уникальный тест под ваши цели и задачи.

17 типов вопросов

Одиночный выбор (+ шкала) , множественный выбор (+ шкала) , ввод числа , ввод текста , ответ в свободной форме , установление последовательности , установление соответствий , заполнение пропусков — (числа, текст, список) , интерактивный диктант , последовательное исключение , слайдер (ползунок) , загрузка файла , служебный текст .

4 типа результата

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

Удобный инструмент статистики

Вам доступен просмотр каждого результата, статистики ответов и набранных баллов по каждому вопросу, статистики по каждому результату. В табличном виде представлены все результаты, регистрационные параметры, ответы на все вопросы, которые вы можете сохранить в Excel.

Стилизация и брэндирование

Широкие возможности для управления внешним видом теста (цвет, шрифт, размер, отступы, рамки и многое другое) с возможностью добавить собственный логотип бренда.

Удобно на всех девайсах

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

Cпособы доступа к тесту

Основная ссылка

По основной ссылке ваш тест всегда доступен. Эту ссылку подобрать практически невозможно, поэтому тест пройдут только те, кому вы отправите эту ссылку.

Виджет для сайта

Специальный html-код, который позволит вам встроить тест на ваш собственный сайт, блог, форум.

Публикация в общий доступ

Вы можете опубликовать свой тест в общий доступ на нашем сайте в соответствующую категорию. Ваш тест сможет пройти любой наш пользователь.

Приглашения

С помощью приглашений вы можете сформировать группы ваших пользователей и разослать им приглашение по email с персонализированной ссылкой на прохождение теста.

Настройки теста

• Добавление описания и инструкции к тесту.
• Добавление формы регистрации к тесту с параметрами типа пол, дата, число, строка, числовой список, пользовательский список.
• Изменение текста кнопок «Назад», «Далее», «Завершить».
• Добавление информации по автору теста и источнику с возможностью указанния ссылки.
• Включение / отключение отображения номеров вопросов, progress bar ответов на вопросы.
• Установка обязательного ответа на все вопросы теста, а также для отдельно взятого вопроса.
• Перемешивание вопросов и/или вариантов ответов в случайном порядке.
• Установка ограничения на отбор вопросов теста для прохождения.
• Включение отображения времени прохождения теста.
• Установка ограничения по времени на прохождение теста, а также для ответа на отдельно взятый вопрос.
• Экспорт теста в pdf-файл и html-файл.
• Установка языковой принадлежности теста: русский, украинский, английский.

Редактор вопросов

• Редактирование вопроса в удобном инфтерфейсе с моментальным предварительным просмотром.
• Настройка оформления текста вопроса с возможностью добавлять файлы изображений и формулы.
• Установка нужного кол-ва баллов для каждого варианта ответа. Гибкая настройка подсчета баллов для каждого типа вопроса.
• Изменение графических параметров отображения вопроса.
• Добавление комментария к вопросу.
• Возможность копирования вопроса внутри теста, а также копирование вопросов из других тестов.
• Перемещение вопросов с помощью мышки.
• Изменение порядка отображения вариантов ответов: вертикально, горизонтально (+ по центру), таблица от 2 до 7-ми колонок.
• Настройка общего текста для вопросов, который добавляется один раз и отображается для выбранных вопросов.
• Настройка групп вопросов с возможностью гибкого отбора вопросов для прохождения: перемешивание и случайный выбор ограниченного кол-ва.

Результат теста

• Психологический тест — определение суммарного количество баллов по ответам или порядкового номера варианта ответа, который был выбран больше всего. Добавление текстовой расшифровки результата с возможностью добавить изображение.
• Личностный тест — каждый вариант ответа сопоставляется с определенной текстовой расшифровкой и выбирается преобладающий.
• Образовательный тест — производится расчет набранного количества баллов за правильные ответы и процент от максимального, которое можно набрать за правильные ответы на все вопросы.
• Профессиональная настройка шкал — инструмент для реализации сложной логики расчета результата теста: 14 типов шкал, построение графика по результатам теста, настройка оформления результата.
• Включение / отключение показа ответов на вопросы, правильных ответов.
• Показ рейтинга результатов, статистики ответов и результатов.
• Выдача сертификата с возможностью замены изображения и настройки дополнительных блоков.

Статистика теста

• Графическое представление кол-ва прохождений теста по дням.
• Статистика по отдельным ответам с отображением правильных/неправильных ответов.
• Статистика ответов на каждый вопрос в табличном и графическом представлении. Сохранение графика как изображение.
• Табличное представление результатов теста, регистрационных параметров и дополнительных данных (имя пользователя, IP, дата и время). Возможность сохранить эти данные в Excel (формат файла csv).
• Табличное представление своднных данных: регистрационные параметры, результаты теста, ответы на все вопросы теста. Возможность сохранить эти данные в Excel (формат файла csv).

Доступ к тесту

• Быстрая установка статуса теста Открыт — Закрыт.
• Установка кодового слова для прохождения теста.
• Установка временного интревала для прохождения теста.
• Установка ограничения на прохождение по IP и/или Cookie.
• Включение уведомлений о новых результатах.
• Создание виджета для сайта с настройкой внешнего вида.
• Публикация теста в общий доступ на сайте с указанием категорий теста и темами.