Документация Толоки

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

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

    Документация на русском языке может быть устаревшей. Самые последние изменения доступны в документации на английском языке.

    Примечание

    Справочник по настройке интерфейса описывает работу редактора HTML/JS/CSS. Вы также можете попробовать создать интерфейс задания в Конструкторе шаблонов.

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

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

      Пример 1
      exports.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;
      }
      
      Пример 2
      exports.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;
      }
      
    2. Добавьте в блок HTML компонент {{field type="suggest" name="<название выходного поля>" source=<название массива>}}. Пример:

      {{field type="suggest" name="result" source=countries allowCustomInput=true}}
      
    1. Добавьте в блок HTML компонент {{field type="suggest" name="<название выходного поля>" source=<название входного поля>}}. Пример:

      {{field type="suggest" name="result" source=countries allowCustomInput=true}}
      
    2. Добавьте поле с типом массив строк в описании входных данных. Например:

      {
      "counries": {
      "type": "array_string",
      "required": true
      }
      }
      
    3. Экранируйте данные и добавьте их в файл с заданиями.

      Пример

    Параметры

    Параметр

    Описание

    Обязательный

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

    type

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

    да

    нет

    name

    Атрибут для поля выходных данных. Содержит имя поля выходных данных.

    да

    нет

    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"