Пешеходные задания

Напишите нам, если не нашли ответ в Справке. Вы можете приложить скриншоты или видео, чтобы ускорить помощь:

Написать в чат  Написать в Telegram

Пресет используется для полевых задач в мобильном приложении Яндекс Заданий. Исполнитель выбирает точку на карте, едет к этому месту, делает фотографии и пишет комментарий.

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

В этом примере интерфейс содержит:

  • блок текста;
  • кнопку для отправки координат устройства исполнителя;
  • кнопку для загрузки фотографий;
  • поле для комментариев.

Обратите внимание, что настройка валидации и внешнего вида задачи уже настроены в этом примере кода.

Компоненты, которые используются в примере
  • view.list — отображает данные списком;
  • view.text — показывает текст;

Если вам нужен форматированный текст, используйте компонент view.markdown.

Показать код
{
  "type": "view.text",
  "label": "Название магазина:",
  "content": {
    "type": "data.input",
    "path": "name"
  }
}

view.divider — горизонтальный разделитель, в который можно добавить вспомогательные элементы: всплывающую подсказку (hint) и надпись (label);

  • view.action-button — добавляет кнопку, которая вызывает действие из свойства action;

В этом примере кнопка вызывает компонент @toloka/data.location, который отправляет координаты устройства исполнителя.

Компонент @toloka/condition.distance сравнивает координаты исполнителя с указанными в задании. По умолчанию, исполнитель может отправить ответ, если разница меньше 50 метров. Чтобы изменить расстояние, укажите в свойстве max новое максимальное значение.

Показать код
{
  "type": "view.action-button",
  "label": "Поделиться координатами",
  "action": {
    "type": "action.set",
    "payload": {
      "type": "@toloka/data.location"
    },
    "data": {
      "type": "data.output",
      "path": "worker_coordinates"
    }
  },
  "validation": {
    "type": "condition.all",
    "conditions": [
      {
        "type": "condition.required",
        "hint": "Нажмите, чтобы отправить координаты.",
        "data": {
          "type": "data.output",
          "path": "worker_coordinates"
        }
      },
      {
        "type": "@toloka/condition.distance",
        "hint": "вы слишком далеко от указаной локации.",
        "from": {
          "type": "@toloka/data.location"
        },
        "to": {
          "type": "data.input",
          "path": "position"
        },
        "max": 50
      }
    ]
  }
}
  • field.media-file — добавляет кнопки для разных видов загрузки файлов;

Используйте компонент conditions.required внутри свойства validation для проверки загрузки фото.

Показать код
{
  "type": "field.media-file",
  "label": "Сделайте фото магазина",
  "accept": {
    "photo": true
  },
  "multiple": true,
    "data": {
      "type": "data.output",
      "path": "photo"
    },
  "validation": {
    "type": "condition.required",
    "hint": "Прикрепите фото организации."
  }
}
  • field.textarea — добавляет поле для ввода многострочного текста;
Показать код
{
  "type": "field.textarea",
  "label": "Комментарий",
  "placeholder": "Если фото содержит недостаточно информации, опишите детали здесь.",
  "data": {
    "type": "data.output",
    "path": "comment"
  }
}
  • plugin.toloka — настраивает внешний вид задания.
Показать код
{
  "type": "plugin.toloka",
  "layout": {
    "kind": "scroll",
    "taskWidth": 600
  }
}

Если вам не подходит этот пресет, посмотрите другие примеры в этом разделе.

Добавить описание

Чтобы добавить описание к заданию, воспользуйтесь компонентом view.text.

Показать код
{
  "type": "view.text",
  "content": "Найдите магазин, сделайте и загрузите его фотографии. \nЕсли ваши фотографии не содержат всей необходимой информации, добавьте комментарий."
}

Добавить оформление

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

В этом примере текст выделен синим цветом.

Показать код
  {
    "type": "view.alert",
    "theme": "info",
    "content": {
      "type": "view.text",
      "label": "Найдите магазин в вашем городе:",
      "content": {
        "type": "data.input",
        "path":"name"
      }
    }
  }

Написать в службу поддержки