Поле для ввода строки с саджестом
Обратите внимание
Документация на русском языке может быть устаревшей. Самые последние изменения доступны в документации на английском языке.
Примечание
Справочник по настройке интерфейса описывает работу редактора HTML/JS/CSS. Вы также можете попробовать создать интерфейс задания в Конструкторе шаблонов.
Саджест — это текстовые подсказки, которые отображаются, когда исполнитель устанавливает курсор в поле ввода строки. Подсказки могут быть:
- одинаковыми во всех заданиях;
- своими в каждом задании.
-
Задайте массив строчек-подсказок в блоке JS (метод
getTemplateData
), чтобы включить его в набор входных данныхпроекта:Пример 1exports.Task = extend(TolokaHandlebarsTask, function (options) { TolokaHandlebarsTask.call(this, options); }, { getTemplateData: function() { var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments); data. < название массива > = ['строка 1', 'строка 2', ... 'строка n' ]; return data; }, onRender: function() { // DOM-элемент задания сформирован (доступен через #getDOMElement()) }, onDestroy: function() { // Задание завершено, можно освобождать (если были использованы) глобальные ресурсы } }); function extend(ParentClass, constructorFunction, prototypeHash) { constructorFunction = constructorFunction || function () {}; prototypeHash = prototypeHash || {}; if (ParentClass) { constructorFunction.prototype = Object.create(ParentClass.prototype); } for (var i in prototypeHash) { constructorFunction.prototype[i] = prototypeHash[i]; } return constructorFunction; }
Пример 2exports.Task = extend(TolokaHandlebarsTask, function (options) { TolokaHandlebarsTask.call(this, options); }, { getTemplateData: function() { var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments); data.countries = ['Poland', 'Lithuania', 'Russia', 'Belarus', 'Latvia', 'Germany', 'France']; return data; }, onRender: function() { // DOM-элемент задания сформирован (доступен через #getDOMElement()) }, onDestroy: function() { // Задание завершено, можно освобождать (если были использованы) глобальные ресурсы } }); function extend(ParentClass, constructorFunction, prototypeHash) { constructorFunction = constructorFunction || function () {}; prototypeHash = prototypeHash || {}; if (ParentClass) { constructorFunction.prototype = Object.create(ParentClass.prototype); } for (var i in prototypeHash) { constructorFunction.prototype[i] = prototypeHash[i]; } return constructorFunction; }
-
Добавьте в блок HTML компонент
{{field type="suggest" name="<название выходного поля>" source=<название массива>}}
. Пример:{{field type="suggest" name="result" source=countries allowCustomInput=true}}
-
Добавьте в блок HTML компонент
{{field type="suggest" name="<название выходного поля>" source=<название входного поля>}}
. Пример:{{field type="suggest" name="result" source=countries allowCustomInput=true}}
-
Добавьте поле с типом массив строк в описании входных данных. Например:
{ "counries": { "type": "array_string", "required": true } }
-
Экранируйте данные и добавьте их в файл с заданиями.
Пример
Параметры
Параметр |
Описание |
Обязательный |
Значение по умолчанию |
|
Тип поля: |
да |
нет |
|
Атрибут для поля выходных данных. Содержит имя поля выходных данных. |
да |
нет |
|
Название массива строк с подсказками. Например: |
да |
нет |
|
Возможность для исполнителя игнорировать подсказки и ввести свою строку. |
нет |
|
|
Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода. Допустимые значения:
|
нет |
|
|
Текст, отображаемый в пустом поле ввода. Примечание Если указано значение |
нет |
нет |
|
Горячая клавиша для наведения фокуса на поле. |
нет |
нет |
|
Значение, которое нужно записать в ответы, если исполнитель не заполнил поле. Примечание Значение |
нет |
нет |
|
CSS-класс для поля. Например: |
нет |
|