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

Напишите нам, если не нашли ответ в Справке. Вы можете приложить скриншоты или видео, чтобы ускорить помощь:

Написать в чат  Написать в Telegram

Примечание

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

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

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

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

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

Примечание

Чтобы раскрыть блоки HTML, CSS и JS, нажмите на название блока справа.

Блок HTML

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

В качестве шаблонизатора для HTML используется Handlebars.

Как добавить компонент

  1. Откройте помощник по созданию интерфейса задания. Для этого в блоке Интерфейс задания нажмите кнопку и выберите компонент.

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

  2. Скопируйте выражение с помощью кнопки и вставьте его в блок HTML.

  3. Укажите имя поля из входных или выходных данных.

Примеры использования входных данных

  • Отобразить текст в задании. Добавьте во входные данные поле text с типом строка. Затем в интерфейсе задания (в блоке HTML) вы сможете добавить этот текст в качестве переменной, например:

    <p>Прочитайте текст: not_var{{text}}</p>

  • Загрузить файл в задание, например картинку. Добавьте во входные данные поле url с типом ссылка. Затем добавьте компонент Картинка в интерфейс задания (в блок HTML) и укажите имя поля в атрибуте src:

    {{img src=url width="400px" height="300px"}}

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

    HTML-тег

    Компонент

    Ссылка на аудио:

    <audio src="not_var{{audio_link}}" controls>

    ↓

    <audio src="not_var{{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. Нажмите кнопку Применить.

  1. Скачайте пример загрузочного файла по ссылке Скачать пример файла.

  2. Добавьте данные для заданий в файл.

  3. Сохраните файл в кодировке UTF-8 с расширением tsv.

  4. Нажмите кнопку Загрузить файл и выберите файл.

  5. Проверьте корректность заполнения полей в Таблице.

    Если заголовки столбцов некорректны, вы получите сообщение «Ошибка при загрузке файла».

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

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

  1. Выберите вид JSON.

  2. Подставьте необходимые для проверки данные в формате JSON.

    Если рамка поля стала красной, JSON не валидный и данные не сохранятся.

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

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

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

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

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

Примечание

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

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

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

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

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

  • Цена за страницу заданий.

  • Название задания (название проекта).

  • Кнопки Написать заказчику, Инструкция, На весь экран, Отправить, Пропустить, Выйти.

Что дальше

Написать в службу поддержки

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

Подробнее

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

Группа из нескольких заданий, ответы на которые должен отправить исполнитель за один раз.

Подробнее

Определенная цель для разметки. Например, модерация комментариев, классификация изображений, транскрипция аудиозаписей или еще что-то.

Подробнее

Предыдущая
Решение проблем
Следующая
Адаптировать задание для мобильных устройств