Рекомендации аксессуаров
Напишите нам, если не нашли ответ в Справке. Вы можете приложить скриншоты или видео, чтобы ускорить помощь:
Написать в чат Написать в Telegram
Используйте этот пресет, если вам небходимо обучить рекомендательную систему, которая подбирает сочетающиеся друг с другом продукты.
В этом примере интерфейс разметки включает два изображения, группу переключателей для выбора ответа (исполнитель сможет выбрать только один), проверку выполнения, горячие клавиши и оформление задания.
Из каких компонентов состоит этот пример
- view.list — отображает данные списком;
- view.text — показывает текст;
Показать код
{
"type": "view.text",
"label": "Является ли второй товар хорошей рекомендацией для первого?"
}
- view.image — показывает картинку;
Компонент layout.columns размещает два изображения рядом.
Показать код
{
"type": "layout.columns",
"items": [
{
"type": "view.image",
"label": {
"type": "data.input",
"path": "title_1"
},
"url": {
"type": "data.input",
"path": "image_1"
}
},
{
"type": "view.image",
"label": {
"type": "data.input",
"path": "title_2"
},
"url": {
"type": "data.input",
"path": "image_2"
}
}
]
}
- field.radio-group — добавляет группу переключателей-радиокнопок для выбора одного ответа;
Компонент condition.required внутри свойства validation проверяет, выбран ли хотя бы один из вариантов ответа.
Показать код
{
"type": "field.radio-group",
"options": [
{
"label": "Хорошая рекомендация",
"value": "ok"
},
{
"label": "Плохая рекомендация",
"value": "bad"
}
],
"data": {
"type": "data.output",
"path": "result"
},
"validation": {
"type": "condition.required",
"hint": "Выберите вариант ответа."
}
}
- plugin.toloka — настраивает внешний вид задания.
Показать код
{
"type": "plugin.toloka",
"layout": {
"kind": "pager"
}
}
Примечание
Вы можете добавлять медиафайлы (аудио, видео, картинки) со своего сервера или из облачных хранилищ, таких как Yandex Cloud, Google Cloud, Amazon AWS и т.п.
Если вам не подходит этот пресет, посмотрите другие примеры в этом разделе.
Добавить поле для ввода ответа
Чтобы исполнители могли оставить комментарий, добавьте компонент для ввода многострочного текста field.textarea.
Показать код
{
"type": "field.textarea",
"label": "Комментарий",
"placeholder": "Введите текст",
"data": {
"type": "data.output",
"path": "comment"
}
}
Добавить оформление
Чтобы исполнитель легче ориентировался в задании, оформите разные типы данных цветом с помощью компонента view.alert. Вы можете расположить его внутри view.list вместе с другими компонентами.
В этом примере описание задания выделено синей рамкой, а кнопки — желтой.
Показать код
{
"type": "view.alert",
"theme": "info",
"content": {
"type": "view.text",
"content": "Является ли второй товар хорошей рекомендацией для первого?"
}
},
{
"type": "view.alert",
"theme": "warning",
"content":{
"type": "field.radio-group",
"options": [
{
"label": "Хорошая рекомендация",
"value": "ok"
},
{
"label": "Плохая рекомендация",
"value": "bad"
}
],
"data": {
"type": "data.output",
"path": "result"
},
"validation": {
"type": "condition.required",
"hint": "Выберите вариант ответа."
}
}
}
Добавить другие варианты ответа
Вы можете выбрать, может ли исполнитель выбрать один или несколько вариантов ответа.
Компонент field.button-radio-group отображает варианты ответов в виде кнопок. Его лучше использовать для вопроса с 2-4 вариантами ответов.
Если у вопроса много вариантов ответа или они длинные, то лучше используйте field.radio-group.
Показать код
{
"type": "field.button-radio-group",
"label": "Выберите вариант ответа:",
"options": [
{
"label": "Товар принадлежит к категории “Конфеты и шоколад”.",
"value": "1"
},
{
"label": "Товар принадлежит к категории “Мороженое и замороженный сок”.",
"value": "2"
}
],
"data": {
"type": "data.output",
"path": "result"
},
"validation": {
"type": "condition.required",
"hint": "Выберите вариант ответа."
}
}
Если вопрос подразумевает несколько вариантов ответа, используйте компонент field.checkbox-group.
Показать код
{
"type": "field.checkbox-group",
"label": "Выберите варианты ответа, подходящие для данного товара:",
"options": [
{
"label": "Продукт принадлежит к категории «Конфеты и шоколад»",
"value": "1"
},
{
"label": "Тип шоколада «Молочный»",
"value": "2"
},
{
"label": "Вкус «Шоколад и карамель»",
"value": "3"
},
{
"label": "Форма «Батончик»",
"value": "4"
}
],
"data": {
"type": "data.output",
"path": ""
},
"validation": {
"type": "condition.required",
"hint": "Выберите один или несколько вариантов ответа."
}
}
Добавить уточняющий вопрос
Компонент helper.if показывает элемент интерфейса если выбран один из ответов. В этом примере исполнитель может ответить на вопрос только если оба изображения были загружены.
Показать код
{
"type": "helper.if",
"condition": {
"type": "condition.equals",
"data": {
"type": "data.output",
"path": "loaded"
},
"to": "yes"
},
"then": {
"type": "field.radio-group",
"options": [
{
"label": "Хорошая рекомендация",
"value": "ok"
},
{
"label": "Плохая рекомендация",
"value": "bad"
}
],
"data": {
"type": "data.output",
"path": "result"
},
"validation": {
"type": "condition.required",
"hint": "Выберите вариант ответа."
}
}
}
Если вам нужно последовательно проверить более двух условий, воспользуйтесь компонентом helper.switch.
Добавьте горячие клавиши
Добавьте горячие клавиши в конфигурации plugin.hotkeys. Так вы поможете исполнителям быстрее выполнять задания — нажимать кнопки порой удобнее, чем управлять мышкой.
Показать код
{
"type": "plugin.hotkeys",
"1": {
"type": "action.set",
"data": {
"type": "data.output",
"path": "result"
},
"payload": "ok"
},
"2": {
"type": "action.set",
"data": {
"type": "data.output",
"path": "result"
},
"payload": "bad"
}
}