Добавление картинок в анкету

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

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

1. Поддерживаются файлы в форматах jpeg, jpg, png, gif, webp
2. Размер файла — минимально возможный, ведь во время опроса картинка может загружаться на устройство с низкой скоростью интернет-соединения — медленно.
3. Размер изображения для веб-версии анкеты подбирать нужно опытным путём (загружать и смотреть, как оно выглядит на странице), учитывая соотношение сторон и решаемую задачу.
4. Если картинки должны быть в ответах, то список выглядит лучше, когда у них одинаковое соотношение сторон. Например, логотипы компаний можно поместить в каком-либо графическом редакторе на белый фон одного размера.

к сведению

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

Загрузка файлов в анкету

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

примечание

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

Теперь можно переходить к добавлению картинок в вопросы и ответы. Это можно делать с помощью редактора или скрипта перед показом.

Вопрос

Откройте вопрос в редакторе и перейдите на вкладку Дополнительно.

В меню Изображение выберите необходимую картинку. И здесь можно указать её Расположение относительно текста вопроса, смотрите:

Добавить картинку и указать её расположение можно и скриптом.

Например:

Q.image = images['Упаковка молока'];
Q.imagePlacement = ImagePlacementIds.Right;

Более подробную информацию можно найти здесь.

Ответ (строка, колонка)

В редакторе варианта ответа, под полем с текстом, есть аналогичные меню: Изображение и Расположение — можно воспользоваться ими.

Как и в вопросе, здесь тоже можно использовать скрипт.

Пример для вариантов ответа. Для строк и колонок — просто заменяйте answers на rows (строки) или columns (ответы в таблице):

Q.answers[1].image = images['Упаковка 1'];
Q.answers[1].imagePlacement = ImagePlacementIds.Before;

Q.answers[2].image = images['Упаковка 2'];
Q.answers[2].imagePlacement = ImagePlacementIds.Before;

Более подробную информацию можно найти здесь.

Автоматизация

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

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

Ответы и строки

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

function addImages(Q, name, placement) {
    let objName;
    switch (Q.type) {
        case QuestionTypeIds.SingleChoice:
        case QuestionTypeIds.MultipleChoice:
        case QuestionTypeIds.Ranking:
            objName = 'answers';
            break;

        case QuestionTypeIds.Table_Text:
        case QuestionTypeIds.Table_Numeric:
        case QuestionTypeIds.Table_SingleChoice:
        case QuestionTypeIds.Table_MultipleChoice:
        case QuestionTypeIds.Table_Rating:
        case QuestionTypeIds.Table_Slider:
        case QuestionTypeIds.GrouppingAndRanking:
            objName = 'rows';
            break;
        
        case QuestionTypeIds.MaxDiff:
            objName = 'columns';
            break;

        default:
            return;
    }

    if (name === undefined) name = '';

    for (let A of Q[objName].getVisible()) {
        if (A.image !== undefined) continue;

        A.image = images[name + A.code];
        A.imagePlacement = placement ? placement : ImagePlacementIds.Default;
    }
}

Этот скрипт берёт ответы (или строки) вопроса и вставляет в каждый из них картинку с таким же кодом в её названии.

В самом простом случае, когда в названии есть только код (просто число: 1, 2…, 46…), в скрипте перед показом вопроса нужно написать:

addImages(Q);

Если в ответах разных вопросов должны быть разные изображения, например в одном вопросе — логотипы компаний, в другом — марки продуктов, то в названии файлов использовать только код уже нельзя, ведь имена должны быть уникальными, а коды ответов в вопросах повторяются. Поэтому нужно добавить в название, перед кодом, какой-либо идентификатор, например логотипы назвать Логотип_1, Логотип_2, Логотип_3…, а марки — Марка_1, Марка_2….

И теперь в вопросе с логотипами пишем:

addImages(Q, 'Логотип_');

А в вопросе с марками:

addImages(Q, 'Марка_');

примечание

В функцию можно передать и расположение картинок относительно текста:

addImages(Q, 'Логотипы_', ImagePlacementIds.Right);

Вопрос в цикле

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

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

Возможно, дочитав до этого места, вы уже догадались, что сделать такое очень просто с помощью скрипта перед показом:

Q.image = images[Q.number % 100];

Это если в названии изображения есть только код. А если есть префикс перед кодом, то:

Q.image = images['Реклама_' + Q.number % 100];