Интерфейс задания

Примечание. Справочник по настройке интерфейса описывает работу редактора HTML/JS/CSS. Вы также можете попробовать создать интерфейс задания в Конструкторе шаблонов.

Интерфейс задания определяет внешний вид задания для исполнителя и логику обработки ответов.

Хороший интерфейс повысит качество результатов и позволит исполнителям выполнять задания быстрее, а это позволит вам снизить цену за задание.

О том, как сделать хороший интерфейс, читайте в нашем блоге статью «9 правил хорошего тона в интерфейсах»: часть 1, часть 2.

Блок настройки интерфейса

Наведите на элемент на изображении, чтобы увидеть всплывающую подсказку:

Совет. Чтобы раскрыть блоки html, css и js в интерфейсе, нажмите на название блока справа.

Блок HTML

Добавьте в этот блок элементы для всех входных и выходных данных, которые вы хотите отобразить в интерфейсе задания. Вы можете использовать специальные компоненты или HTML-теги, используемые в теге <body>.

Как добавить компонент
  1. Нажмите кнопку {} в блоке Интерфейс задания и выберите элемент.

    Нажмите Подробнее, чтобы посмотреть пример и полный список параметров.

  2. Скопируйте выражение (кнопка ) и вставьте его в блок HTML.
  3. Укажите имя поля из входных или выходных данных.
Примеры использования входных данных
  • Отобразить текст в задании. Добавьте во входные данные поле text с типом строка. Затем в интерфейсе задания (в блоке HTML) вы сможете добавить этот текст в качестве переменной, например:
    <p>Прочитайте текст: {{text}}</p>
    Скопировано
  • Загрузить файл в задание, например картинку. Добавьте во входные данные поле url с типом ссылка. Затем добавьте компонент Картинка в интерфейс задания (в блок HTML) и укажите имя поля в атрибуте src:
    {{img src=url width="400px" height="300px"}}
    Скопировано
  • Оформить ссылку на файл с Яндекс.Диска.

    Если элемент интерфейса будет использоваться для передачи ссылок на файлы с Яндекс.Диска, в блоке HTML добавьте к названию поля входных данных слово proxy. В зависимости от типа элемента оформление поля будет выглядеть по разному. Например:

    HTML-тег Компонент
    Ссылка на аудио: <audio src="{{audio_link}}" controls> → <audio src="{{proxy audio_link}}" controls> Ссылка на изображение: {{img src=image }} → {{img src=(proxy image)}}

    Подробнее в разделе Использование файлов с Яндекс.Диска.

Примеры использования выходных данных
  • Попросить исполнителя ввести текст. Добавьте в выходные данные поле input с типом строка. Сделайте поле обязательным. Затем добавьте компонент Поле для ввода текста в интерфейс задания (в блок HTML) и укажите имя поля в атрибуте name:
    {{field type="textarea" name="input" width="270px" rows=5}} 
    Скопировано
  • Попросить выбрать одно из значений. Добавьте в выходные данные поле result с типом строка. Сделайте поле обязательным и укажите допустимые значения Yes и No. Затем добавьте компонент Переключатель в интерфейс задания (в блок HTML) и укажите имя поля в атрибуте name:
    {{field type="radio" name="result" label="Да" value="Yes" hotkey="1"}}
    {{field type="radio" name="result" label="Нет" value="No" hotkey="2"}}
    Скопировано

Блок JS

В блоке JS вы можете добавить дополнительные правила обработки ответа на JavaScript. Для этого разработаны специальные расширения для классов заданий.

Кроме того, вы можете подключать JavaScript-библиотеки для создания интерфейса. Например, если у вас есть несколько проектов с похожими заданиями, сохраните описание методов в отдельном файле и подключите его как библиотеку.

Чтобы подключить JavaScript-библиотеку, нажмите кнопку в блоке Интерфейс задания и добавьте ссылки на библиотеки в поле JS.

Блок CSS

В блоке CSS вы можете объявлять оформление для тегов и классов. Например, отступ снизу после текстового поля с классом task-text:

.task-text{
  margin-bottom: 15px;
};
Скопировано

Кроме того, вы можете подключать CSS-библиотеки. Для этого нажмите кнопку в блоке Интерфейс задания и добавьте ссылки на библиотеки в поле CSS.

Возможности предпросмотра

Внимание. Изменение входных и выходных данных, а также количества заданий на странице не сохраняются после выхода из Предпросмотра.

Чтобы увидеть получившееся задание, нажмите кнопку Предпросмотр. В предварительном просмотре отображается страница с заданием, которое имеет стандартные данные. Измените входные данные и убедитесь, что изображения, ссылки или текст правильно отображаются на странице заданий. Также вы можете выполнить и получить ответы на одно или несколько заданий.

Как изменить количество стандартных заданий
Вы можете изменить количество заданий со стандартными данными на странице Предпросмотра:
  1. Нажмите кнопку Изменить входные данные.
  2. Чтобы добавить задание, нажмите кнопку Добавить задание.

    Чтобы удалить задание, нажмите на его номер, затем нажмите .

  3. Нажмите кнопку Применить.
Как проверить отображение входных данных

Добавьте входные данные, чтобы проверить отображение файлов или текстовых подсказок на странице задания. Для этого нажмите кнопку Изменить входные данные и выберите один из способов:

  1. Измените поля с входными данными.

    Чтобы сделать задание контрольным или обучающим, добавьте правильные ответы и подсказку (кнопка Добавить правильные ответы).

    Для перехода к другому заданию, нажмите номер задания внизу таблицы. Чтобы удалить задание, нажмите кнопку .

  2. Нажмите кнопку Применить.

Выполните задание и нажмите кнопку Отправить.

Как проверить получение выходных данных

Вы можете проверить получение некоторых данных со страницы задания.

Чтобы проверить получение текстовых комментариев или ответов из флажка (checkbox), заполните соответствующие поля заданий и нажмите кнопку Отправить. Затем нажмите Посмотреть ответы.

Совет. Проверить получение файлов, изображений, аудио или видео, отправленных со страницы задания, можно в Песочнице. Для этого завершите создание проекта, создайте аналогичный проект в Песочнице и выполните его, используя аккаунт доверенного пользователя.

Элементы управления в задании

Чтобы изменить набор элементов управления, нажмите кнопку в блоке Интерфейс задания.

По умолчанию на странице заданий отображаются:

  • Таймер (отсчитывает время выполнения задания).

  • Цена за страницу заданий.
  • Заголовок (название проекта).

  • Кнопки Написать заказчику, Инструкция, На весь экран, Далее, Пропустить, На главную.

Совет.

Прочитайте статью в блоге о том, как сделать интерфейс задания понятным и удобным.

Решение проблем

Настройка заданий, предпросмотр
Исполнитель не может загрузить файл в задание?

Если никто из исполнителей не смог отправить задание, скорее всего проблема в валидации в JS. Проверьте её ещё раз.

Перенесите проект в сендбокс и попробуйте выполнить задание самостоятельно в песочнице.

Как проверить отображение задания в мобильном приложении Яндекс.Толоки?

Чтобы проверить, как выглядит задание на экране мобильного телефона, можно переключиться в режим эмуляции в браузерах Chrome или Safari и отредактировать блок CSS.

Также вы можете воспользоваться мобильной версией сендбокса. Чтобы получить к ней доступ, напишите в службу поддержки.

Как убрать текст под кат?

Текст под кат можно убрать с помощью стилей CSS как в самом задании, так и в инструкции. Пример кода можно посмотреть здесь.

Как вставить календарь?

Посмотреть пример вы можете в комментариях к проекту. В примере есть формат выходных данных и библиотеки, которые нужно подключить.

Чтобы подключить библиотеки:
  1. В режиме редактирования проекта нажмите «шестеренку».
  2. В открывшемся поле слева введите ссылки и нажмите Ввод.
Как в режиме предпросмотра включить загрузку аудиофайлов?

В режиме предпросмотра проверить загрузку файлов нельзя, но это можно сделать в песочнице, выполнив своё задание. Для этого нужно зарегистрироваться в сендбоксе в качестве исполнителя и добавить логин в доверенные на странице Пользователи. Подробнее можете прочитать в этой статье .

Настройка элементов управления
Как в label чекбокса добавлять текст из входной переменной?

Чтобы передать label во входных данных, укажите в нём имя входного поля.

Например, если у вас входное поле asd с типом строка, то компонент может быть записан так: {{field type="checkbox" name="like" label=asd hotkey="q"}}.

Если вы хотите передавать различные значения лейблов в разных заданиях или количество чекбоксов может меняться, то воспользуйтесь конкатенацией.

Выбираю один чекбокс, а отмечаются все.

Названия выходных полей должны отличаться: для каждого чекбокса своё имя. Подробнее об этом компоненте здесь.

Как в JS сделать так, чтобы если чекбокс отмечен, то ссылку не запрашивать, а если ссылка вставлена, то галочка стоять не должна?
  1. Посмотрите как это реализовано в шаблоне « Поиск данных в сети ».
  2. Для решения второй задачи вы можете добавить ещё одну валидацию по аналогии с этой:
    if (solution.output_values.url && solution.output_values.check) {return {task_id:
    this.getTask().id,errors: {'url': {code: 'Вставьте ссылку или отметьте галочкой,что сайта нет'}}}}
    Скопировано
Как сделать в задании изменяющиеся варианты ответов и их количество?
Вы можете сделать это с помощью конкатенации.
Посмотрите примеры проектов, которые могут помочь вам в создании интерфейса:Во входном поле массив значений необходимо передавать через запятую. Для каждого из них в интерфейсе будет сформирован вариант ответа. Входные/выходные данные к проектам-примерам указаны в комментариях на codepen.io.
Почему в задании не работает кнопка «Отправить»?

Вероятно, проблема в блоке JS. Попробуйте удалить его содержимое, после чего проверьте кнопку Отправить в режиме предпросмотра.

Как добавить валидацию ответа в зависимости от чекбокса: если на картинке есть предмет, то его нужно выделить, а если нет — поставить галочку?

Добавить валидацию ответа в зависимости от чекбокса возможно с помощью JavaScript. Пример доступен в шаблоне «Поиск данных в сети».

Как сделать так, чтобы для разных вопросов было различное количество вариантов ответов?
Используйте конкатенацию, например:
{{field type="checkbox" name=(concat "result." @index ) label=(concat "checkbox –
          " @index) size="L"}}
Скопировано
Как снять выбор с радиокнопки?

Снять выбор нельзя. Только изменить на другую радиокнопку с ответом.

Как добавить валидацию ответа в зависимости от чекбокса?

Добавить валидацию ответа в зависимости от чекбокса можно с помощью JavaScript. Пример доступен в шаблоне «Поиск данных в сети».

Как в задании поменять фон со стандартного белого на другой цвет?
Установите фон в CSS для элемента .task или .task-suite. Например, черный:
.task-suite {
background-color: #000000;
}
.task {
background-color: #000000;
}
Скопировано
Также вы можете присвоить класс области интерфейса, где находится изображение, и установить фон только для этой области.
Как в качестве элемента интерфейса использовать ползунки для выбора значения параметра?
В HTML шаблона укажите следующий код:
<input type=""range"" list=""rng"" class=""res"">

а в JS в onRender прописать следующее:
onRender: function() {
// DOM-элемент задания сформирован (доступен через #getDOMElement())
//Добавляем служебные переменные
var $root = $(this.getDOMElement());
var _this = this;
var solution = TolokaHandlebarsTask.prototype.getSolution.apply(this, arguments);

$root.on('change', '.res', function(){
var range_result = $(this).val()
_this.setSolutionOutputValue('result', range_result);

return solution;
})

}
Скопировано
Как в онлайн редакторе заданий расширить окно с HTML/CSS/JS кодом?

Расширить окно HTML не получится. Чтобы раскрыть поля JS и CSS, кликните в любую область в пределах поля.

Возможно в Толоке построить интерфейс с помощью своего JS?
Да, вы можете не использовать наши компоненты для создания интерфейсов, а создать собственный дизайн страницы с заданиями. Для этого удалите библиотеку из шаблона проекта:
  • откройте настройки под «шестеренкой».
  • удалите $TOLOKA_ASSETS/js/toloka-handlebars-templates.js.
В Руководстве заказчика описана вся структура классов и как они устроены.
Планируется ли prettifier для HTML/JS в дизайне проекта?

Мы не задумывали, что в этом окошке будет вестить какая-то сложная разработка. Как правило, контент подготавливают в стороннем редакторе, который имеет подсветку, а в окошко копируют готовый вариант перед обновлением.

В аспекте доступности TolokaHandlebars для редактирования нет отличий между нашим окошком и редактором.

Что делать, если атрибуты радио-кнопки в предпросмотре отображаются правильно, а после сохранения — нет?

Если после сохранения инструкции пропадают теги или атрибуты (например, checked="true"), значит они не поддерживаются. Полный список допустимых в инструкции тегов можно найти в руководстве.

Входные и выходные данные
Как обращаться к элементам массива по индексу — к входным и выходным данным?
Если это в JS, то укажите в конце индекс:
this.getTask().input_values['name'][2]solution.output_values['result'][2]
Скопировано
Если в интерфейсе, то следующим образом:
Почему при добавлении входных и выходных данных в интерфейс HTML в режиме предпросмотра содержимое iframe не отображается?

Попробуйте отключать расширения браузера. Они могут блокировать загрузку iframe.

Как в ссылку перехода для «Кнопка с проверкой перехода по ссылке» передавать значение входной переменной?
Укажите название входного поля, куда передаёте ссылку, без скобок:
{{field type="button-clicked" name="ads" label="Нажми меня" href=name_escape
          action=true}}
Скопировано
Как построчно ввести список слов, для каждого отобразить элемент и сохранить результат в выходной массив?

В качестве входного поля передайте массив строк. Например, как показано на скриншоте:

В HTML используйте специальный handlebar, чтобы итерироваться по этому полю. Конструкция будет выглядеть следующим образом:
{{#each words}}
{{field type="radio" name="result" value=this label=this}}
{{/each}}
Скопировано
Как использовать входные данные как переменную в HTML-блоке?

Заключите входное поле в двойные фигурные скобки {{text}}.

Как отформатированный текст из входных данных отобразить в задании?

Заключите входное поле в тройные фигурные скобки {{{input_field}}}.

Подробнее об использовании компонента можно узнать в Руководстве заказчика.

Как в HTML вставить переменное количество инпутов, которое пользователь будет сам определять?

Для решения задачи с динамическим количеством выходных полей воспользуйтесь рекомендациями с этой страницы.

Как сделать, чтобы текст во входном поле отображался в исходном варанте с HTML-тегами?

Чтобы текст из входного поля отображался с HTML-тегами, можно использовать <pre>. Например:<pre>{{text}}</pre>.

Так текст будет записан как есть, в одну строку со скроллом.Чтобы убрать скролл и не растягивать карточку с заданием, добавьте в блок CSS:
.task {
  max-width: 800px;
}

pre {
  white-space: pre-wrap;
}
Скопировано
Валидация
Как использовать разметку Vue, не используя базовый объект TolokaHadlebarsTask?

Подробнее про расширение шаблона на JS вы можете прочитать здесь.

Чтобы разметка Vue не конфликтовала с синтаксисом Handlebars нужно отключить библиотеку toloka-handlebars-templates и наследоваться от классов Task/TaskSuite.

Как запустить валидацию setSolution в OnRender?
Попробуйте добавить условие на наличие второй шкалы:
setSolution: function(solution) {
var secondScale = this.getDOMElement().querySelector('.second-scale');

if(secondScale) {
secondScale.style.display = solution.output_values.grammar === 'no' ? 'block' : 'none';
}

TolokaHandlebarsTask.prototype.setSolution.call(this, solution);
}, 
Скопировано
Как на уровне интерфейса Толоки валидировать данные, которые ввел пользователь?

Можно сделать проверку формата ссылки с помощью регулярных выражений. Для этого в шаблоне задания добавьте валидацию ссылки на JavaScript c помощью regexp.

Например: var regexp = /^(https://www.myurl.com/).{4,200}$/.

Также можно добавить в выходные данные поле input с типом строка. Сделайте поле обязательным. Затем добавьте компонент Поле для ввода текста в интерфейс задания (в блок HTML) и укажите имя поля в атрибуте name:
{{field type="textarea" name="input" width="270px" rows=5}} 
Скопировано
Задания с изображениями
Как сделать так, чтобы при нажатии на изображение оно увеличивалось максимально?

Добавьте к компоненту для вставки картинки параметры real-size=true и screenshot=true.

Как в image-annotation добавить горячую клавишу для добавления многоугольника?
Чтобы добавить горячую клавишу, в методе onKey пропишите следующее действие:
onKey: function(key) {
          var el = this.getDOMElement().querySelector(".image-annotation-editor__shape-polygon");

          if (key === 'D') {
          el.click();
          el.classList.add('image-annotation-editor__shape_active')
          }
Скопировано

Воспользуйтесь этой библиотекой, если потребуются дальнейшие модификации редактора по выделению областей.

Как в зависимости от выбора показывать фото и делать его обязательным, либо прятать и делать необязательным?

В этом случае нужно оставить поле необязательным в выходных данных и прописать валидацию в зависимости от ответа исполнителя. Вы можете посмотреть, как это решено в шаблоне «Классификация текстов».

Как запретить добавление фото из галереи, чтобы при нажатии на кнопку добавления фотографии открывалась камера, а не выбор между галереей и камерой?

Добавьте sources="CAMERA" в атрибуты к компоненту для загрузки картинки, чтобы запретить добавлять фото из галереи.

Как реализовать выделение 3-х разных областей на картинке?

Вы можете сделать выделение и выпадающий список с выбором категории. Посмотрите, как это реализовано на этой странице (вкладка Выпадающий список).

Где в шаблоне «Попарное сравнение изображений» нужно указать proxy для Интерфейса задания, чтобы сделать задание с выбором из трех вариантов картинок?

В шаблоне «Попарное сравнение изображений» используется не HTML-тег, а компонент. Поэтому нужно подставить прокси в круглых скобках по образцу: {{img src=(proxy image)}}.

Что делать исполнителю, если в задании по выделению областей на картинке нет предмета, который нужно выделить?
Существуют три основных варианта решения:
  • Выделить произвольную область на картинке. Например, поставьте квадрат в правый верхний угол.

    Добавьте информацию об этом в инструкцию для проверяющих.

  • Предложить исполнителю пропустить задание и сообщить о нём в личном сообщении. Сообщения проверяются заказчиком и, если объекта действительно нет, задание будет удалено из пула (путем обнуления перекрытия).
  • Добавить в интерфейс чекбокс «нет объекта» и настройте в JS проверку, что в задании либо выделен объект, либо поставлена галочка.

    Для контроля добавьте в интерфейс задания информацию о значении этого чекса.