Попарное сравнение изображений
Обратите внимание
Документация на русском языке может быть устаревшей. Самые последние изменения доступны в документации на английском языке.
Для такого проекта в Толоке есть пресет Сравнение изображений (Side-by-side).
Посмотрите пример — он состоит из двух изображений и кнопок выбора ответа. В нем уже настроена валидация, горячие клавиши и внешний вид задания.
-
view.image — изображение;
Показать код{ "type": "view.image", "url": "https://tlk.s3.yandex.net/dataset/toloka_logos/b2b_dandelion_icon.png" }
-
layout.side-by-side — размещает изображения справа и слева друг от друга;
Показать код{ "type": "layout.side-by-side", "items": [], "controls": { "type": "view.list", "items": [] } }
-
field.radio-group — кнопки вариантов ответа;
Показать код{ "type": "field.radio-group", "label": "Which icon do you like more?", "options": [], "data": { "type": "data.output", "path": "result" }, "validation": { "type": "condition.required" } }
-
condition.required — проверяет, что выбран хотя бы один вариант;
Показать код{ "type": "condition.required" }
-
plugin.hotkeys — горячие клавиши.
Показать код{ "1": { "type": "action.set", "data": { "type": "data.output", "path": "result" }, "payload": "LEFT" }, "2": { "type": "action.set", "data": { "type": "data.output", "path": "result" }, "payload": "RIGHT" }, "3": { "type": "action.set", "data": { "type": "data.output", "path": "result" }, "payload": "404" }, "type": "plugin.hotkeys" }
Примечание
Вы можете добавлять медиафайлы (аудио, видео, картинки) со своего сервера, Яндекс Диска или из облачных хранилищ, таких как Yandex Cloud, Google Cloud, Amazon AWS и т.п.
Что еще можно настроить
-
Чтобы добавить подробное описание к заданию, используйте компонент view.text.
Показать код{ "type": "view.text", "content": "Look at the pictures and choose the one you like more." }
-
Чтобы исполнитель мог оставить комментарий к заданию или своему ответу, добавьте поле для ввода текста field.textarea.
Показать код{ "type": "field.textarea", "label": "Comments", "placeholder": "Enter text", "data": { "type": "data.output", "path": "comment" } }
Если вам не подходит этот пресет, посмотрите другие примеры в этом разделе.
Добавить оформление
Также вы можете цветом оформлять разные типы данных с помощью view.alert, чтобы исполнитель легче в них ориентировался. В этом примере исходный текст выделен синей рамкой, а кнопки — желтой.
{
"type": "view.alert",
"theme": "info",
"content": {
"type": "view.text",
"content": "Look at the pictures and choose the one you like more."
}
},
{
"type": "layout.side-by-side",
"items": [],
"controls": {
"type": "view.alert",
"theme": "warning",
"content": {
"type": "field.radio-group",
"label": "Which icon do you like more?",
"options": [],
"data": {
"type": "data.output",
"path": "result"
},
"validation": {
"type": "condition.required"
}
}
}
}