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

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

Блок HTML

Блок HTML служит для вставки выражений, которые определяют элементы интерфейса здания. Выражение может быть HTML-тегом или компонентом. В зависимости от типа элемента, используйте в выражениях поля входных или выходных данных:

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

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

  2. Скопируйте выражение (кнопка ) и вставьте его в интерфейс задания.
Шаг 2: Укажите имя поля входных или выходных данных

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

Как оформить ссылку на файл из Яндекс.Диска

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

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

Подробнее о подключении Яндекс.Диска и добавлении ссылок на файлы из Диска в интерфейс задания.

Полный список специальных компонентов и хелперов

Для решения типовых задач в Яндекс.Толоке разработаны специальные компоненты 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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