Классификация изображений

В Толоке есть шаблон Классификация изображений (посмотреть код в песочнице). В нем уже настроена валидация, горячие клавиши и внешний вид задания.

Из каких компонентов состоит этот пример
Примечание. Вы можете добавлять медиафайлы со своего сервера, Яндекс Диска или из облачных хранилищ, таких как Яндекс Облако, Google Cloud, Amazon AWS и т.п.

Что еще можно настроить

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

  • Чтобы исполнитель мог оставить комментарий к заданию или своему ответу, добавьте поле для ввода текста field.textarea.

  • Добавьте горячие клавиши на поворот и увеличение картинки в конфигурации plugin.hotkeys.

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

Другие варианты кнопок

Определите, может ли исполнитель выбрать несколько вариантов ответа или только один:

Если ответов на вопрос может быть несколько — настройте чекбоксы field.checkbox-group.

Добавить условия

С помощью helper.if можно показывать любой элемент интерфейса только при выборе определенного ответа. Например, отметить верные об изображении утверждения можно только если оно загрузилось.

Сравнение картинки и поискового запроса

Подходит ли картинка под поисковый запрос

Добавьте кнопку, по которой исполнители будут открывать результаты поиска, и сформируйте ссылку поискового запроса с помощью компонента helper.search-query. Чтобы убедиться, что исполнитель перешел по ссылке и проверил ее содержимое, настройте валидацию, как в примере.

Попарное сравнение с веб-страницей

С помощью компонента view.iframe вы можете отобразить веб-страницу во встроенном окне. Расположите рядом картинку, используя layout.side-by-side.

Попарное сравнение с веб-страницей в рамке мобильного устройства

Это более сложный пример, который сравнивает картинку с результатами поискового запроса. В нем добавлены компоненты:

  • view.iframe — отображает веб-страницу во встроенном окне;
  • view.device-frame — оборачивает окно в рамку смартфона;
  • layout.side-by-side — располагает картинку и окно с результатами запроса рядом друг с другом.