Документация Толоки

Адаптировать задание для мобильных устройств

Обратите внимание

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

Примечание

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

По умолчанию задание будет доступно и для веб-версии Толоки и для мобильного приложения.

Чтобы задание запускалось в мобильных приложениях, выполните шаги:

Шаг 1. Убедитесь, что ваше задание подходит для мобильных устройств.

Не подходят для мобильных устройств:

  • задания со встроенными веб-страницами (iframe)
  • выделение областей на изображении;
  • оценка качества видео;
  • задания, где надо просматривать большие изображения;
  • сравнение изображений (Side-by-side), где изображения надо на экране располагать рядом;
  • задания, где надо набирать много текста.

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

Шаг 2. Повысьте качество отображения заданий на мобильных устройствах.

Мы рекомендуем использовать Конструктор шаблонов. С ним вам будет проще адаптировать задания для мобильных устройств.

Добавьте следующий код в блок CSS:

@media screen and (max-width: 800px) {

 .task {
  width: 93%;

 }
 .popup__text {
  width:auto;
 }

 .field{
  white-space: normal;
  display: block;
  width: 100% !important;
 }

 br {
  display: none
 }
}

@media (pointer: coarse) {
  .field__hotkey, .inplace_instruction  {
    display: none;
  }
}

Этот код меняет интерфейс задания для устройств с шириной экрана менее 800 пикселей:

  • умещает все элементы интерфейса на экране смартфона;
  • следит, чтобы подсказки не выходили за границы экрана;
  • убирает горячие клавиши;
  • добавляет переносы строк у полей;
  • убирает пробелы в виде пустых строк.
Шаг 3. Посмотрите, как будет отображаться задание на мобильных устройствах.
  1. Нажмите F12 или на правую кнопку мыши в любой части страницы и выберите пункт Исследовать элемент.
  2. Нажмите на значок с телефоном и планшетом, чтобы включить режим отображение для мобильных устройствах.
  3. Посмотрите, как выглядит задание на популярных мобильных платформах.

Подробнее в документации браузера.

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

Подробнее в документации браузера.

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

Совет

Если задание отображается плохо, вернитесь в блок CSS и добавьте в @media screen and (max-width: 800px) недостающие стили. Если вы не знакомы с языками CSS и HTML, воспользуйтесь услугами профессионалов или обратитесь в службу поддержки. Подробнее в разделе Получить помощь с размещением заданий

Шаг 4. При добавлении пула заданий в фильтрах включите отображение только на мобильных устройствах.

Задания в пулах по умолчанию будут доступны для веб-версии Толоки и мобильного приложения. Если вы хотите изменить настройки по умолчанию и ограничить видимость задачи для любой из версий, добавьте фильтр Клиент и выберите нужное значение: Веб-версия Толоки или Мобильная Толока.

Что дальше