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

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

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

Блок HTML

В блоке HTML добавьте поля входных и выходных данных.

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

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

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

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

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

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

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

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

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

<div class="task-text">
  {{text}}
</div>

{{field type="textarea" name="translation"}}

Блок CSS

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

.task-text{
  margin-bottom: 15px;
};

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

Блок JS

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

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

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

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

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

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

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

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

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