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

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

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

Совет. Чтобы раскрыть блоки html, css и js в интерфейсе, нажмите на название блока справа.

Блок HTML

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

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

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

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

  2. Скопируйте выражение (кнопка ) и вставьте его в блок HTML.
  3. Укажите имя поля из входных или выходных данных.
Как оформить ссылку на файл с Яндекс.Диска

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

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

Подробнее в разделе Использование файлов с Яндекс.Диска.

Блок JS

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

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

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

Блок CSS

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

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

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

Возможности предпросмотра

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

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

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

  2. Чтобы добавить задание, нажмите кнопку Добавить задание.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Заголовок (название проекта).

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