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

Попарное сравнение изображений

Для такого проекта в Толоке есть пресет Сравнение изображений (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"
      }
    }
  }
}

В этой статье: