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

Внешний вид задания для исполнителя и логика обработки ответов определяются в спецификации проекта:

HTML

В блок HTML нужно добавить полей входных и выходных данных с помощью HTML-тегов и выражений Handlebars.

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

  • Текст. Например: <p>{{input_text}}</p>. В задании отобразится текст из поля входных данных с абзацными отступами.
  • Ссылка на аудио. Например: <audio src={{audio_link}} controls>. В задании отобразится аудиплеер с записью.
  • Ссылка на видео. Например: <video src={{video_link}} controls>. В задании отобразится видеоплеер с записью.

В остальных случаях необходимо использовать Handlebars-выражения. Handlebars — это шаблоны, совмещаемые с HTML-разметкой. В процессе обработки они заменяются стандартными HTML-тегами и контентом. Выражения Handlebars заключены в двойные фигурные скобки {{ }} и могут иметь атрибуты. Подробнее см. в Спецификации Handlebars и Руководстве по Handlebars.

Для решения типовых задач в Толоке разработаны специальные компоненты Handlebars:

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

Пример блока HTML

Задание модерации комментариев: исполнителю предъявляется текст комментария и несколько вариантов ответа в виде переключателя.

В спецификации объявлены:
  1. Поле входных данных — строка comment для передачи комментария.
  2. Поле выходных данных — строка moderation для записи ответа исполнителя.

Чтобы добавить текст комментария в задание, вставьте имя поля входных данных в двойных фигурных скобках {{comment}}. Контейнер <div> гарантирует, что текст будет отделен от переключателя.

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

<div>
  {{comment}}
</div>

{{field type="radio" name="moderation" value="OK" label="OK" hotkey="1"}}
{{field type="radio" name="moderation" value="INSULT" label="Оскорбление" hotkey="2"}}
{{field type="radio" name="moderation" value="SPAM" label="Спам" hotkey="3"}}

CSS и JavaScript

Шаблоны проектов содержат скрипты JavaScript и стили CSS. Вы можете их редактировать и дополнять.

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

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

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

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

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

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

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

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

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