Toloka

Handlebars

Для создания интерфейса задания в поле html на странице проекта можно использовать:

Библиотеки для использования Handlebars и дополнительных компонентов подключены по умолчанию при создании проекта.

Поле для ввода строки

Чтобы добавить в задание поле для ввода строки, используйте компонент {{field type="input" name="<идентификатор поля>"}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Например:

{{field type
[no-highlight[

Описание

Тип поля: input — поле для ввода строки.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="input" name
[no-highlight[

Описание

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="result" placeholder
[no-highlight[

Описание

Текст-подсказка, отображаемый в пустом поле ввода.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="Введите слово" validation-show
[no-highlight[

Описание

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: “top-left“ (слева), “top-center“ (посередине), “top-right“ (справа).

  • Под полем ввода: “bottom-left“ (слева), “bottom-center“ (посередине), “bottom-right“ (справа).

  • Слева от поля ввода: “left-top“ (сверху), “left-center“ (посередине), “left-bottom“ (внизу).

  • Справа от поля ввода: “right-top“ (сверху), “right-center“ (посередине), “right-bottom“ (внизу).

  • Не показывать сообщение (“false“).

Обязательность

нет

Значение по умолчанию

“top-left“

]no-highlight]
="right-center"}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

value

Строка, которая записывается в файл с выходными данными по умолчанию.

нет

нет

width

Ширина поля. Указывается в следующих единицах:

  • Пиксели. Например: width="100px".

  • Доля от размера родительского элемента. Например: width="100%".

Можно также задать ширину формулой. Например: width="calc(100%-30px)".

нет

размер содержимого поля

validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

size

Размер поля.

Допустимые значения: "S", "M", "L", "XL".

нет

"L"

disabled

Возможность редактирования:

  • disabled=true — поле закрыто для редактирования.

  • disabled=false — поле открыто для редактирования.

нет

false

placeholder

Текст-подсказка, отображаемый в пустом поле ввода.

нет

нет

class

CSS-класс для поля. Например: class="annotation".

нет

".field" ".field_type_input"

В выходных данных добавьте поле с типом string. Например:

{
  "result": {
        "type": "string",
        "required": true
    }
}

Поле для ввода текста

Чтобы добавить в задание поле для ввода многострочного текста, используйте компонент {{field type="textarea" name="<идентификатор поля>"}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Например:

{{field type
[no-highlight[

Описание

Тип поля: textarea — поле для ввода многострочного текста.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="textarea" name
[no-highlight[

Описание

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="result" width
[no-highlight[

Описание

Ширина поля. Указывается в следующих единицах:

  • Пиксели. Например: width=“100px“.

  • Доля от размера родительского элемента. Например: width=“100%“.

Можно также задать ширину формулой. Например: width=“calc(100%-30px)“.

Обязательность

нет

Значение по умолчанию

размер содержимого поля

]no-highlight]
="270px" rows
[no-highlight[

Описание

Высота текстового поля (количество строк, которые отображаются без прокрутки).

Пример: {{field type=“textarea“ name=“result“ width=“270px“ rows=5}}

Обязательность

нет

Значение по умолчанию

3

]no-highlight]
=5}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

value

Текст, который записывается в файл с выходными данными по умолчанию.

нет

нет

validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

size

Размер поля.

Допустимые значения: "M", "L".

нет

"L"

width

Ширина поля. Указывается в следующих единицах:

  • Пиксели. Например: width="100px".

  • Доля от размера родительского элемента. Например: width="100%".

Можно также задать ширину формулой. Например: width="calc(100%-30px)".

нет

размер содержимого поля

rows

Высота текстового поля (количество строк, которые отображаются без прокрутки).

Пример: {{field type="textarea" name="result" width="270px" rows=5}}

нет

3

disabled

Возможность редактирования:

  • disabled=true — поле закрыто для редактирования.

  • disabled=false — поле открыто для редактирования.

нет

false

resize

Возможность для пользователя изменять размер поля:

  • resize="vertical" — возможность изменять высоту.

  • resize="horizontal" — возможность изменять ширину.

  • resize="both" — возможность изменять высоту и ширину.

нет

нет

placeholder

Текст-подсказка, отображаемый в пустом поле ввода.

нет

нет

class

CSS-класс для поля. Например: class="annotation".

нет

".field" ".field_type_textarea"

В выходных данных добавьте поле с типом string. Например:

{
  "result": {
        "type": "string",
        "required": true
    }
}

Поле для ввода строки с саджестом

Саджест — это текстовые подсказки, которые отображаются, когда пользователь устанавливает курсор в поле ввода строки. Чтобы добавить в задание поле с подсказками:

  1. Задайте массив строчек-подсказок в JS-коде (метод getTemplateData), чтобы включить его в набор входных данных проекта. Пример:

    getTemplateData: function() {
        var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
        data. < название массива > = ['строка 1', 'строка 2', ...
            'строка n'
        ];
        return data;
    }
    Пример
    getTemplateData: function() {
        var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
        data.countries = ['Poland', 'Lithuania', 'Russia', 'Belarus', 'Latvia', 'Germany', 'France'];
        return data;
    }
  2. Добавьте в HTML-код компонент {{field type="suggest" name="<идентификатор поля>" source=<название массива>}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Пример:

    {{field type
    [no-highlight[

    Описание

    Тип поля: suggest — поле для ввода строки с подсказками.

    Обязательность

    да

    Значение по умолчанию

    нет

    ]no-highlight]
    ="suggest" name
    [no-highlight[

    Описание

    Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

    Обязательность

    да

    Значение по умолчанию

    нет

    ]no-highlight]
    ="result" source
    [no-highlight[

    Описание

    Название массива строк с подсказками. Например: source=countries. Массив определяется в JS-коде проекта (метод getTemplateData).

    Обязательность

    да

    Значение по умолчанию

    нет

    ]no-highlight]
    =countries allowCustomInput
    [no-highlight[

    Описание

    Возможность для пользователя игнорировать подсказки и ввести свою строку.

    Обязательность

    нет

    Значение по умолчанию

    false

    ]no-highlight]
    =true}}
    Полный список параметров

    Параметр

    Описание

    Обязательность

    Значение по умолчанию

    type

    Тип поля: suggest — поле для ввода строки с подсказками.

    да

    нет

    source

    Название массива строк с подсказками. Например: source=countries. Массив определяется в JS-коде проекта (метод getTemplateData).

    да

    нет

    allowCustomInput

    Возможность для пользователя игнорировать подсказки и ввести свою строку.

    нет

    false

    validation-show

    Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

    Допустимые значения:

    • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

    • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

    • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

    • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

    • Не показывать сообщение ("false").

    нет

    "top-left"

    placeholder

    Текст, отображаемый в пустом поле ввода.

    Примечание. 

    Если указано значение value, в поле ввода отображается value, а не placeholder.

    нет

    нет

    hotkey

    Горячая клавиша для наведения фокуса на поле.

    нет

    нет

    value

    Значение, которое нужно записать в ответы, если пользователь не заполнил поле.

    Примечание. 

    Значение value отображается в пустом поле ввода вместо placeholder.

    нет

    нет

    class

    CSS-класс для поля. Например: class="mytask_field".

    нет

    ".field" ".field_type_suggest"

Переключатель

Чтобы вставить в задание переключатель, используйте компонент {{field type="radio" name="<идентификатор поля>"}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Например (переключатель из двух элементов):

{{field type
[no-highlight[

Описание

Тип поля: radio — переключатель.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="radio" name
[no-highlight[

Описание

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="result" label
[no-highlight[

Описание

Название элемента в интерфейсе. Например: label=“Да“.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="Да" value
[no-highlight[

Описание

Строка, которая записывается в файл с выходными данными по умолчанию.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="Yes" hotkey
[no-highlight[

Описание

Горячая клавиша для выбора значения.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="1"}} {{field type
[no-highlight[

Описание

Тип поля: radio — переключатель.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="radio" name
[no-highlight[

Описание

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="result" label
[no-highlight[

Описание

Название элемента в интерфейсе. Например: label=“Да“.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="Нет" value
[no-highlight[

Описание

Строка, которая записывается в файл с выходными данными по умолчанию.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="No" hotkey
[no-highlight[

Описание

Горячая клавиша для выбора значения.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="2"}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

label

Название элемента в интерфейсе. Например: label="Да".

нет

нет

value

Передаваемое значение (записывается в файл с выходными данными).

нет

нет

hotkey

Горячая клавиша для выбора значения.

нет

нет

validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

checked

Состояние переключателя при отображении страницы:

  • checked=true — включен.

  • checked=false — выключен.

нет

false

size

Размер поля.

Допустимые значения: "M", "L".

нет

"L"

width

Ширина поля. Указывается в следующих единицах:

  • Пиксели. Например: width="100px".

  • Доля от размера родительского элемента. Например: width="100%".

Можно также задать ширину формулой. Например: width="calc(100%-30px)".

нет

размер содержимого поля

disabled

Возможность редактирования:

  • disabled=true — поле закрыто для редактирования.

  • disabled=false — поле открыто для редактирования.

нет

false

class

CSS-класс для поля. Например: class="annotation".

нет

".field" ".field_type_radio"

В выходных данных добавьте поле с типом string. Например:

{
  "result": {
        "type": "string",
        "required": true
    }
}

Флажок

Чтобы вставить в задание флажок, используйте компонент {{field type="checkbox" name="<идентификатор поля>"}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Например (набор из трех флажков):
{{field type
[no-highlight[

Описание

Тип поля: checkbox — флажок.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="checkbox" name
[no-highlight[

Описание

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="red" label
[no-highlight[

Описание

Название элемента в интерфейсе. Например: label=“Да“.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="красный" hotkey
[no-highlight[

Описание

Горячая клавиша для выбора значения.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="1"}} {{field type
[no-highlight[

Описание

Тип поля: checkbox — флажок.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="checkbox" name
[no-highlight[

Описание

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="green" label
[no-highlight[

Описание

Название элемента в интерфейсе. Например: label=“Да“.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="зелёный" hotkey
[no-highlight[

Описание

Горячая клавиша для выбора значения.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="2"}} {{field type
[no-highlight[

Описание

Тип поля: checkbox — флажок.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="checkbox" name
[no-highlight[

Описание

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="yellow" label
[no-highlight[

Описание

Название элемента в интерфейсе. Например: label=“Да“.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="желтый" hotkey
[no-highlight[

Описание

Горячая клавиша для выбора значения.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="3"}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

label

Название элемента в интерфейсе. Например: label="Да".

нет

нет

hotkey

Горячая клавиша для выбора значения.

нет

нет

value

Передаваемое значение (записывается в файл с выходными данными).

Допустимые значения: true, false.

нет

false

validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

checked

Состояние флажка при отображении страницы:

  • checked=true — установлен.

  • checked=false — снят.

нет

false

size

Размер поля.

Допустимые значения: "M", "L".

нет

"L"

width

Ширина поля. Указывается в следующих единицах:

  • Пиксели. Например: width="100px".

  • Доля от размера родительского элемента. Например: width="100%".

Можно также задать ширину формулой. Например: width="calc(100%-30px)".

нет

размер содержимого поля

disabled

Возможность редактирования:

  • disabled=true — поле закрыто для редактирования.

  • disabled=false — поле открыто для редактирования.

нет

false

class

CSS-класс для поля. Например: class="annotation".

нет

".field" ".field_type_checkbox"

В выходных данных добавьте поле с типом boolean. Например:

{
  "red": {
        "type": "boolean",
        "required": true
            }
}

Выпадающий список

Чтобы добавить в задание выпадающий список, используйте компонент {{#field type="select" name="<идентификатор поля>"}}... {{/field}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Элементы выпадающего списка создаются с помощью вложенного выражения {{select_item}}. Например:

{{#field type
[no-highlight[

Описание

Тип поля: select — выпадающий список.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="select" name
[no-highlight[

Описание

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="colour" placeholder
[no-highlight[

Описание

Название выпадающего списка в интерфейсе.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="Выберите цвет" width
[no-highlight[

Описание

Ширина поля. Указывается в следующих единицах:

  • Пиксели. Например: width=“100px“.

  • Доля от размера родительского элемента. Например: width=“100%“.

Можно также задать ширину формулой. Например: width=“calc(100%-30px)“.

Обязательность

нет

Значение по умолчанию

размер содержимого поля

]no-highlight]
="200px"}} {{select_item value
[no-highlight[

Описание

Текст, который записывается в файл с выходными данными при выборе данного элемента.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="red" text
[no-highlight[

Описание

Название элемента списка.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="Красный"}} {{select_item value
[no-highlight[

Описание

Текст, который записывается в файл с выходными данными при выборе данного элемента.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="green" text
[no-highlight[

Описание

Название элемента списка.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="Зеленый"}} {{/field}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

placeholder

Название выпадающего списка в интерфейсе.

нет

нет

width

Ширина поля. Указывается в следующих единицах:

  • Пиксели. Например: width="100px".

  • Доля от размера родительского элемента. Например: width="100%".

Можно также задать ширину формулой. Например: width="calc(100%-30px)".

нет

размер содержимого поля

validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

size

Размер поля.

Допустимые значения: "S", "M", "L".

нет

"L"

class

CSS-класс для поля. Например: class="annotation".

нет

".field" ".field_type_select"

disabled

Возможность редактирования:

  • disabled=true — поле закрыто для редактирования.

  • disabled=false — поле открыто для редактирования.

нет

false

mode

Направление, в котором раскрывается список:

  • mode="dropdown" — вниз.

  • mode="dropup" — вверх.

нет

"dropdown"

value

Текст, который записывается в файл с выходными данными при выборе данного элемента.

нет

нет

text

Название элемента списка.

нет

нет

selected

Элемент списка, который выбран по умолчанию:

  • selected=true — сделать элемент списка выбранным по умолчанию.

  • selected=false — оставить элемент списка невыбранным по умолчанию.

нет

false

В выходных данных добавьте поле с типом string:

{
  "colour": {
        "type": "string",
        "required": true
    }
}

Кнопка для загрузки файла

Чтобы добавить в задание кнопку для загрузки файла, используйте компонент {{field type="file" name="<идентификатор поля>"}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Например:

{{field type
[no-highlight[

Описание

Тип поля: file — кнопка для загрузки файла.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="file" name
[no-highlight[

Описание

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="result" }}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

label

Название кнопки в интерфейсе. Например, label="Нажми меня".

нет

В зависимости от языка интерфейса «Загрузить файл» (русский), «Upload file» (английский), «Dosya yükle» (турецкий), «Unggah file» (индонезийский).

validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

class

CSS-класс для поля. Например: class="annotation".

нет

".field" ".field_type_file"

В выходных данных добавьте поле с типом file. Например:

{
  "result": {
        "type": "file",
        "required": true
    }
}

Кнопка для загрузки картинки

Чтобы добавить в задание кнопку для загрузки картинки , используйте компонент {{field type="file-img" name="<идентификатор поля>"}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. После загрузки картинки пользователь увидит иконку для предварительного просмотра изображения. Например:

{{field type
[no-highlight[

Описание

Тип поля: file-img — кнопка для загрузки картинки.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="file-img" name
[no-highlight[

Описание

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="photo" camera
[no-highlight[

Описание

Запуск камеры при нажатии на кнопку загрузки картинки:

  • camera=true — запускать камеру.

  • camera=false — не запускать камеру.

Обязательность

нет

Значение по умолчанию

false

]no-highlight]
=true}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

preview

Отображение уменьшенного изображение после загрузки:

  • preview=true — отображать.

  • preview=false — не отображать.

нет

true

camera

Запуск камеры при нажатии на кнопку загрузки картинки:

  • camera=true — запускать камеру.

  • camera=false — не запускать камеру.

нет

false

В выходных данных добавьте поле с типом file. Например:

{
  "result": {
        "type": "file",
        "required": true
    }
}

Кнопка с проверкой перехода по ссылке

Если в задании требуется перейти по ссылке (например, открыть веб-страницу), Толока может проверить, выполнил ли пользователь этот переход. Ссылка для перехода отображается в задании в виде кнопки.

Варианты использования кнопки:

  • Проверка перехода по ссылке. В выходных данных задания будет поле со значением true (переход выполнен) или false (переход не выполнен).

  • Запрет на выполнение задания без перехода по ссылке. Для этого добавьте параметр "allowed_values":[true] в описание выходных данных.

Чтобы добавить кнопку со ссылкой в интерфейс задания, используйте компонент {{field type="button-clicked" name="<идентификатор поля>"}}. Идентификатор поля должен совпадать с названием поля в описании выходных данных. Например:

{{field type
[no-highlight[

Описание

Тип поля: button-clicked — кнопка с проверкой перехода по ссылке.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="button-clicked" name
[no-highlight[

Описание

Идентификатор поля. Должен совпадать с названием поля в описании выходных данных.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
="ads" label
[no-highlight[

Описание

Название элемента в интерфейсе. Например: label=“Да“.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="Нажми меня" href
[no-highlight[

Описание

URL ресурса, на который должен перейти пользователь для выполнения задания.

Обязательность

нет

Значение по умолчанию

нет

]no-highlight]
="https://yandex.ru" action
[no-highlight[

Описание

Цвет кнопки:

  • action=true — желтый.

  • action=false — белый.

Обязательность

нет

Значение по умолчанию

false

]no-highlight]
=true}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

label

Название элемента в интерфейсе. Например: label="Да".

нет

нет

href

URL ресурса, на который должен перейти пользователь для выполнения задания.

нет

нет

size

Размер поля.

Допустимые значения: "S", "M", "L", "XL".

нет

"L"

action

Цвет кнопки:

  • action=true — желтый.

  • action=false — белый.

нет

false

В выходных данных добавьте поле с типом boolean. Чтобы запретить отправку ответов без перехода по ссылке, добавьте параметр "allowed_values":[true].

{
  "ads": {
      "type": "boolean",
      "required": true,
      "allowed_values": [true]
     }
}

Картинка

Чтобы вставить в задание картинку, используйте компонент {{img src=<URL изображения>}}. Например:

{{img src
[no-highlight[

Описание

URL изображения. Варианты значений:

  • URL из входных данных задания. Например, из поля с идентификатором url: src=url.

  • Прямая ссылка. Рекомендуется использовать протокол HTTPS. Например: src=“https://mywebsite.ru/img1.png“.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
=url width
[no-highlight[

Описание

Ширина изображения. Указывается в следующих единицах:

  • Пиксели. Например: width=“100px“.

  • Доля от размера родительского элемента. Например: width=“100%“.

Можно также задать ширину с формулой. Например, width=“calc(100%-30px)“.

Обязательность

нет

Значение по умолчанию

300px

]no-highlight]
="100px" height
[no-highlight[

Описание

Высота изображения. Указывается в следующих единицах:

  • Пиксели. Например, height=“100px“.

  • Доля от размера родительского элемента. Например, height=“100%“.

Можно также задать ширину с формулой. Например, height=“calc(100%-30px)“.

Обязательность

нет

Значение по умолчанию

300px

]no-highlight]
="75px"}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

src

URL изображения. Варианты значений:

  • URL из входных данных задания. Например, из поля с идентификатором url: src=url.

  • Прямая ссылка. Рекомендуется использовать протокол HTTPS. Например: src="https://mywebsite.ru/img1.png".

да

нет

width

Ширина изображения. Указывается в следующих единицах:

  • Пиксели. Например: width="100px".

  • Доля от размера родительского элемента. Например: width="100%".

Можно также задать ширину с формулой. Например, width="calc(100%-30px)".

нет

300px

height

Высота изображения. Указывается в следующих единицах:

  • Пиксели. Например, height="100px".

  • Доля от размера родительского элемента. Например, height="100%".

Можно также задать ширину с формулой. Например, height="calc(100%-30px)".

нет

300px

real-size

Масштабирование изображения. Возможные значения:

  • real-size=false — растягивать изображение по размеру родительского элемента.

  • real-size=true — использовать исходный размер изображения (если он не превышает размер родительского элемента).

нет

false

class

CSS-класс для картинки.

нет

".img"

Кнопка

Чтобы вставить в задание кнопку, используйте компонент {{button}}. Например:

{{button label
[no-highlight[

Описание

Название кнопки в интерфейсе.

Обязательность

нет

Значение по умолчанию

пустая строка

]no-highlight]
="Нажми меня" href
[no-highlight[

Описание

Ссылка, которая откроется при нажатии на кнопку. Ссылка открывается в новой вкладке браузера.

Обязательность

нет

Значение по умолчанию

]no-highlight]
="https://yandex.ru" action
[no-highlight[

Описание

Цвет кнопки:

  • action=true — желтый.

  • action=false — белый.

Обязательность

нет

Значение по умолчанию

false

]no-highlight]
=true}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

label

Название кнопки в интерфейсе.

нет

пустая строка

href

Ссылка, которая откроется при нажатии на кнопку. Ссылка открывается в новой вкладке браузера.

нет

action

Цвет кнопки:

  • action=true — желтый.

  • action=false — белый.

нет

false

size

Размер кнопки (с сохранением соотношения высоты и ширины):
  • "S" — высота 24 px.

  • "M" — высота 28 px.

  • "L" — высота 32 px.

  • "XL" — высота 38 px.

нет

"M"

class

CSS-класс.

нет

".button"

Встроенный фрейм

Чтобы добавить в задание встроенный фрейм, используйте компонент {{iframe src=<URL объекта>}}. Например:

{{iframe src
[no-highlight[

Описание

URL страницы.

Обязательность

да

Значение по умолчанию

нет

]no-highlight]
=url width
[no-highlight[

Описание

Ширина фрейма. Указывается в следующих единицах:

  • Пиксели. Например, width=“100px“.

  • Доля от размера родительского элемента. Например, width=“100%“.

Можно также задать ширину с формулой. Например: width=“calc(100%-30px)“.

Обязательность

нет

Значение по умолчанию

“300px“

]no-highlight]
="100px" height
[no-highlight[

Описание

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

  • Пиксели. Например, height=“100px“;

  • Доля от размера родительского элемента. Например, height=“100%“.

Можно также задать ширину с формулой. Например: height=“calc(100%-30px)“.

Обязательность

нет

Значение по умолчанию

“500px“

]no-highlight]
="100px"}}
Полный список параметров

Параметр

Описание

Обязательность

Значение по умолчанию

src

URL страницы.

да

нет

width

Ширина фрейма. Указывается в следующих единицах:

  • Пиксели. Например, width="100px".

  • Доля от размера родительского элемента. Например, width="100%".

Можно также задать ширину с формулой. Например: width="calc(100%-30px)".

нет

"300px"

height

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

  • Пиксели. Например, height="100px";

  • Доля от размера родительского элемента. Например, height="100%".

Можно также задать ширину с формулой. Например: height="calc(100%-30px)".

нет

"500px"

content-width

Ширина содержимого во фрейме в пикселях. Например, content-width="700".

Чтобы фрейм был шириной с экран, задайте content-width="false".

нет

"1280"

zoom

Кнопка для увеличения фрейма до размера окна браузера:

  • zoom=true — увеличить фрейм до размера окна браузера.
  • zoom=false — сохранить заданный размер фрейма.

нет

false

class

CSS-класс для фрейма.

нет

".iframe"

sandbox

Включает режим песочницы, ограничивающий работу во фрейме.

Чтобы выключить некоторые запреты, можно использовать следующие значения (комбинируются через пробел):

  • "allow-same-origin" — разрешает переходить по ссылкам внутри фрейма (воспринимает их как контент из того же источника, что и родительский документ).

  • "allow-top-navigation" — разрешает открывать ссылки фрейма в родительском документе.

  • "allow-forms" — разрешает содержимому фрейма отправлять формы.

  • "allow-scripts" — разрешает запуск и выполнение скриптов. Создание всплывающих окон при этом запрещено.

  • "false" — выключает перечисленные ограничения.

нет

"allow-scripts", "allow-same-origin"

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

Чтобы получить полный URL-путь для получения данных через прокси-сервер, используйте компонент {{proxy "<относительная ссылка>"}}. Относительная ссылка должна начинаться с уникального имени источника данных, которое указывается при подключении внешнего HTTP-сервиса. Например:

{{proxy "my_files/images"}}