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

Интерфейс задания определяет внешний вид задания для исполнителя и логику обработки ответов. Создайте 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.

Предпросмотр

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

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

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

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

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

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

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

Внимание. После выхода из Предпросмотра измененные входные данные будут удалены.

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

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

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

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

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

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