Пользовательская визуализация (в виде html)

Бывают ситуации, когда необходимо показать интервьюеру или респонденту вопрос в каком-то необычном виде. Например, чтобы к каждому варианту ответа прилагалась картинка, или чтобы можно было перетаскивать картинки в разные стороны с названиями (Нравится/Не нравится) или воплотить в вопросе любые визуальные эффекты, на которые способно ваше воображение.
Чтобы это можно было сделать, мы разработали инструмент при создании вопросов в конструкторе шаблона.

Как настроить

Мобильное устройство умеет показывать html и даёт выполнять ему заданный Javascript, а также может показывать те файлы (картинки), на который заранее объявлены ссылки. Сложность написания таких визуализаций минимальна - можно использовать уроки HTML из интернета.
Визуализации при заполнении на сайте нет.

Чтобы настроить пользовательскую визуализацию, необходимо:

Общий принцип работы

Окно Html. По умолчанию содержит div с id='htmlview-maincontainer'. Рекомендуется помещать всю визуализацию в него. При написании html можно руководствоваться всей фантазией, но нужно иметь в виду два момента:
1) Мы не проверяем валидность вашего HTML. Ошибки, неточности в вёрстке, целенаправленная вставка вредоносного кода скорее всего приведут к одному результату - ваши интервьюеры не смогут пройти анкету на мобильном устройстве. 
2) Любые ссылки, как <a> так и адреса картинок <img> будут игнорироваться мобильным приложением, используйте код загруженного вами файла ( например {{img0}} ), при отправке на мобильное устройство, он будет заменён на ссылку на этот файл и добавлен в список разрешенных ссылок для мобильного устройства.

Окно CSS. Напишите сюда таблицу стилей CSS, она будет помещена в тег head при отправке на устройство. Руководствуйтесь теми же правилами, что и для HTML.

Окно JavaScript. Поместите сюда исполняемый код, который поможет вам реализовать любую анимацию или логику. В Javascript есть несколько ключевых моментов.
1) function StartQuestionHtmlView(field) - функция, которая будет вызвана нашей системой, когда страница полностью загрузится. Входной параметр field - это данные о вопросе, для каждого типа вопроса данные свои. Например для уточняющего вопроса туда будут переданы варианты ответа, которые выделил или не выделил пользователь при прохождении родительского вопроса.
2) SetAnswer(result) - системная функция, которая сообщает мобильному устройству какой ответ был дан на данный вопрос. Если этот ответ удовлетворяет всем правилам валидации, то функция вернёт 0.
3) NextQuestion() - системная функция вызывающая переход на следующий вопрос
4) function SetOldAnswer(oldAnswer) - система вызовет эту функцию, если данный вопрос был открыт повторно, в качестве параметра будет передан такой же объект, как тот что вы отправляете в SetAnswer.

Объекты ответов, которые ожидает увидеть система

1. Текст/Дата/Шкала/Число - строка, которая содержит ответ
2. Диапазон- { native: string, exact: string }, где native - это ID варианта ответа (вы задаёте его при добавлении диапазонов, а так же вам выдаст его система при StartQuestionHtmlView), а exact должен содержать строку точного значения.
3. Выбор вариантов/Уточняющий - [{native: string, other: string},{}...], массив ответов, где каждый ответ - это объект, где native - это ID варианта ответа (вы задаёте его при добавлении вариантов, а также вам выдаст его система при StartQuestionHtmlView); other должен содержать строку ответа на ответ типа "Другое".
4. Сетка - [{row:string,column:string, other: string },{}...] массив из объектов с ID колонки, ID строки и ответом "Другое" если таковой имеется (ID колонки можно посмотреть в примере JSON который передаётся на вход визуализации).

Дополнительные возможности

1. Вкладка JSON - пример объекта, который будет передан вам на вход визуализации
2. Файлы - прикреплённые к визуализации файлы. На данный момент поддерживаются только картинки.
3. Расширения - большинство людей используют разнообразные js фреймворки для работы с Javascript, мы позволяем добавлять их в визуализацию. Доступные расширения:
1) Jquery - в представлении не нуждается
2) Jquery-ui 1.10.4 - набор стандартных контролов
3) jQuery Mobile 1.4 - обёртка для создания интерфейсов приближённых к мобильным приложениям
4) jQuery UI Touch Punch - помогает устройству передать именно тач управления в контролы jquery

Предпросмотр созданного вопроса

Мы предлагаем инструмент ручной проверки - при нажатии кнопки "Просмотр" в новом модальном окне откроется страница в том виде, в котором вы её запрограммировали. Мы не можем гарантировать, что на мобильном устройстве всё будет выглядеть именно так, потому что существует бесчисленное множество устройств с разными разрешениями экрана и количеством точек на дюйм - имейте это ввиду при разработке визуализации вопроса.

Форматирование кода

При нажатии кнопки "Формат" система отформатирует ваш код в соответствии с общепринятыми правилами (открывающаяся и закрывающаяся скобки в отдельных строках друг под другом и т.д.)