ИнтОпрос

Как работает виджет ИнтОпрос?

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

Термины и определения

Термины и определения


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

Алгоритм работы клиентской части виджета


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

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

В нужном месте целевой страницы размещается блок-контейнер Канала, в который будут транслироваться создаваемые вами опросы. Контейнер имеет один единственный атрибут data-id, который содержит зашифрованный идентификатор Канала. Важно помнить, что удалять или изменять его нельзя.

...
<div class='intopros' data-id='[зашифрованный_id_канала]'></div>
...

Обратите внимание:

  • Размеры контейнера и его содержимого будут автоматически адаптированы под родителя.
  • Стили элементов блока опроса могут быть свободно переопределены с использованием CSS. Например, внутри селектора
    ...
    div [data-id='[зашифрованный_id_канала]']{
    
    }
    ...
    

    Подробную спецификацию CSS-селекторов элементов виджета можно просмотреть в настройках стиля в личном кабинете.

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

В произвольном месте подключается JS-скрипт виджета. Рекомендуется сделать это в самую последнюю очередь, перед закрывающем тегом body страницы:

...
<script src='//intopros.volego.ru/js/intopros.min.js'></script>
...

После загрузки, скрипт первым делом проверяет наличие библиотеки JQuery и в случае её отсутствия, подключает последнюю версию с официального CDN по ссылке http://code.jquery.com/jquery-latest.min.js

Как только устанавливается доступность JQuery, на сервер отправляются data-id найденных на странице Каналов, в соответствии с настройками для каждого из которых задаётся внешний вид и загружается установленный порядок вопросов.

При выборе каждого ответа, данные об этом отправляются на сервер и в соответствии со Сценарием загружается следующий вопрос.

После отправки ответа, для которого не установлен следующий вопрос, работа виджета завершается.

Возможности серверной части


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

  • Процентное и числовое соотношение голосов
  • Линейные и круговые диаграммы
  • Экспорт диаграмм в виде растровой графики
  • Настраиваемый публичный доступ к результатам опроса
Возможности серверной части

Оцените интерфейс и функционал виджетов от ИнтОпрос - пройдите демонстрационные опросы на странице готовых примеров!