Пешеходные задания
Напишите нам, если не нашли ответ в Справке. Вы можете приложить скриншоты или видео, чтобы ускорить помощь:
Написать в чат Написать в 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"
}
}
}