Редактор для сегментации текста

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

Исполнители могут размечать текст при помощи редактора в веб-версии Толоки и в приложении. В веб-версии удобнее, особенно, если у вас большой список категорий или длинный текст. У разметки с мобильного телефона есть своя специфика. Вы помещаете текст в редактор, а исполнитель выделяет отдельные слова и целые фразы, а потом — размечает их подходящими тегами.

Что может редактор

Шаблон поддерживает 10 цветов для тегов-категорий. По умолчанию включены 5 из них, а первый тег из массива — активен. Можно добавлять и больше 10-ти тегов, но тогда цвета начнут повторяться.

Рисунок 1. Пример работы в редакторе
Совет.

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

Описание тегов в шаблоне

У каждого тега есть три параметра:

  • tag_color — в какой цвет будет перекрашен текст.
  • tag_name — в какую категорию нужно отнести выделенный текст.
  • tag_hotkey — на какую кнопку нажать, чтобы было быстрее.
Цвета и горячие клавиши
  • Синий — Q.
  • Желтый — W.
  • Зеленый — E.
  • Серый — T.
  • Красный — R.
  • Коричневый — Y.
  • Фиолетовый — U.
  • Оранжевый — I.
  • Розовый — A.
  • Бирюзовый — S.

Вы можете менять название тега и назначенную горячую клавишу, а цвет менять нельзя — он зашит в js-библиотеку редактора для выделения текста.

Так выглядит фрагмент js-кода с описанием тегов:

var tagsData = [
  {
    'tag_color': 'Синий',
    'tag_name': 'Название',
    'tag_hotkey': 'q'
  },
  {
    'tag_color': 'Желтый',
    'tag_name': 'Бренд',
    'tag_hotkey': 'w'
  },
  {
    'tag_color': 'Зеленый',
    'tag_name': 'Объем',
    'tag_hotkey': 'e'
  },
  {
    'tag_color': 'Красный',
    'tag_name': 'Ошибка',
    'tag_hotkey': 'r'
  }
];

Часть тегов в шаблоне убрана в комментарий. Поэтому по умолчанию вы получаете редактор с пятью тегами (как в примере).

Совет.

Чтобы добавить новый тег, раскомментируйте элемент массива tagsData в фигурных скобках.

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

Как написан редактор

Вот так редактор встраивается в интерфейс задания при помощи HTML:

{{textAnnotationInterface input tagsData}}

В блоке JS описаны переменные, методы и функции, которые делают редактор рабочим. Например, в этом коде написано выдавать сообщение об ошибке, если не выделено ни одного слова:

    validate: function(solution) {
        var errors = null;

        if (Object.keys(solution.output_values).length === 0 || Object.keys(solution.output_values.result).length === 0) {
            errors = this.addError('Выделите хотя бы одно слово', '__TASK__', errors);
        }

Входные и выходные данные

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

В редакторе используются:

  • Поле input с типом «строка», куда подставляется текст для разметки.
  • Поле result в формате JSON. Через него вы получаете информацию о результате выполнения задания.
  • Поле text_review_mode — техническое. Оно нужно, чтобы в режиме проверки задания отображались теги.

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

Примечание. Не меняйте названия полей входных и выходных данных, иначе редактор не будет работать.

Как работать с редактором

Используйте эту информацию для инструкции к заданию. Пусть исполнители поймут все сразу:

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

Работа на мобильных устройствах

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

  1. Прочитайте текст и найдите слова и словосочетания из инструкции.
  2. Нажмите нужный тег над текстом.
  3. Долгим нажатием выделите слово или словосочетание. Если нужно, подвиньте границу выделения.
  4. Чтобы сбросить выделение без создания тега, нажмите область вне текста.
  5. Чтобы добавить тег, нажмите неразмеченную область текста.
  6. Чтобы изменить категорию (цвет выделения), нажмите тег над словом в рамке. Выберите нужный цвет из выпадающего списка.
  7. Чтобы удалить тег, нажмите его и крестик рядом с названием.
Примечание. Если не выбрать цвет заранее, то выделенному слову будет присвоен первый тег из списка.

Текст на устройствах с тачскрином выделяется только с помощью долгого нажатия, а потом можно менять границы выделения. Тег у выделенных слов появится после нажатия на текст (после сброса выделения). Это нужно, чтобы пользователь мог выбрать несколько слов на таких устройствах.

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

Совет.

Добавляйте фильтры Тип клиентского приложения (=браузер) и Категория устройства (=персональный компьютер). Так доступ к большим заданиям по разметке текста будет только у тех исполнителей, которые пользуются веб-браузерами.

Если вы используете другой шаблон

В шаблоне Сегментация текста редактор уже настроен. При использовании других шаблонов нужно подключить библиотеки и дописать код.

Подробнее
  1. На странице редактирования проекта в блоке Интерфейс задания нажмите
  2. В блоке Библиотеки добавьте:
    • JS https://yastat.net/s3/toloka/presets/TemplateVideoModeration/494c560d-0f4e-4e71-928f-5d9710522893.js
    • CSS https://yastat.net/s3/toloka/presets/TemplateVideoModeration/26a20e48-5dfb-4acc-abbf-a8ab7d91bf3f.css
  3. В блок Спецификация добавьте поля, которые использует редактор:
    • Во входные данные добавьте поле input с типом строка.
    • В выходные данные добавьте поля result с типом json и text_review_mode с типом массив json.
  4. В блоке HTML добавьте компонент: {{textAnnotationInterface input tagsData}}
  5. Дополните код в блоке JS:
    1. Добавьте описание тегов.
      Пример из шаблона Сегментация текста
      var tagsData = [
        {
          'tag_color': 'Синий',
          'tag_name': 'Название',
          'tag_hotkey': 'q'
        },
        {
          'tag_color': 'Желтый',
          'tag_name': 'Бренд',
          'tag_hotkey': 'w'
        },
        {
          'tag_color': 'Зеленый',
          'tag_name': 'Объем',
          'tag_hotkey': 'e'
        },
        {
          'tag_color': 'Красный',
          'tag_name': 'Ошибка',
          'tag_hotkey': 'r'
        }
      ];
      
    2. Дополните код в обработчиках getTemplateData, onRender, addError, validate кодом из шаблона Сегментация текста:

      exports.Task = extend(TolokaHandlebarsTask, function(options) {
          TolokaHandlebarsTask.call(this, options);
      }, {
          getTemplateData: function() {
              var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
              data.tagsData = updateTagsData(tagsData);
      
              return data;
          },
          onRender: function() {
              var tagsData = this.getTask().input_values.tagsData;
              createTextAnnotationInterface.call(this, tagsData);
          },
          addError: function(message, field, errors) {
              errors || (errors = {
                  task_id: this.getOptions().task.id,
                  errors: {}
              });
              errors.errors[field] = {
                  message: message
              };
      
              return errors;
          },
      
          validate: function(solution) {
              var errors = null;
      
              // Если не выделено ни одного слова, показываем сообщение об ошибке.
      
              if (Object.keys(solution.output_values).length === 0 || Object.keys(solution.output_values.result).length === 0) {
                  errors = this.addError('Выделите хотя бы одно слово', '__TASK__', errors);
              }
      
              return errors || TolokaHandlebarsTask.prototype.validate.call(this, solution);
          },
          onDestroy: function() {
              // Задание завершено, можно освобождать (если были использованы) глобальные ресурсы
          }
      });
  6. В блоке CSS дополните стили настройками из шаблона Сегментация текста:
    /* Задание на странице */
    .task {
        display: block;
        max-width: 1200px;
        margin: 20px auto;
        font-size: 18px;
    }
    
    .task-suite {
        height: 100%;
    }
    
    /* Отображение задания на мобильных устройствах */
    @media screen and (max-width: 767px) {
        .task {
            border: none;
        }
    
        .task_focused {
            box-shadow: none;
            -webkit-box-shadow: none;
        }
    }
  7. Нажмите кнопку Предпросмотр и посмотрите, что у вас получилось.