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

  1. Что может редактор
  2. Как настроить
  3. Описание тегов
  4. Входные и выходные данные
  5. Как работать с редактором
Примечание. Справочник по настройке интерфейса описывает работу редактора HTML/JS/CSS. Вы также можете попробовать создать интерфейс задания в Конструкторе шаблонов.

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

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

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

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

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

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

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

Как настроить

Чтобы исполнители могли пользоваться редактором, подключите библиотеки, добавьте JS-код и стили CSS.

Подробнее

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

  1. На странице редактирования проекта в блоке Интерфейс задания нажмите
  2. В блоке Библиотеки добавьте:
    • JS toloka-handlebars-templates.js
    • 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:
    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'
        },
        {
            'tag_color': 'Серый',
            'tag_name': 'Производитель',
            'tag_hotkey': 't'
        }
    ];
    
    function extend(ParentClass, constructorFunction, prototypeHash) {
        constructorFunction = constructorFunction || function () {};
        prototypeHash = prototypeHash || {};
        if (ParentClass) {
            constructorFunction.prototype = Object.create(ParentClass.prototype);
        }
        for (var i in prototypeHash) {
            constructorFunction.prototype[i] = prototypeHash[i];
        }
        return constructorFunction;
    }
    
    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. Нажмите кнопку Предпросмотр и посмотрите, что получилось.

Описание тегов

Для сегментации текста в редакторе используются теги-категории. У каждого тега есть три параметра:

  • tag_color — в какой цвет будет перекрашен текст. Редактор поддерживает 10 цветов для тегов.
  • 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'
  },
  {
    'tag_color': 'Серый',
    'tag_name': 'Производитель',
    'tag_hotkey': 't'
  },
  {
    'tag_color': 'Коричневый',
    'tag_name': 'Название',
    'tag_hotkey': 'y'
  },
  {
    'tag_color': 'Фиолетовый',
    'tag_name': 'Бренд',
    'tag_hotkey': 'u'
  },
  {
    'tag_color': 'Оранжевый',
    'tag_name': 'Объем',
    'tag_hotkey': 'i'
  },
  {
    'tag_color': 'Розовый',
    'tag_name': 'Ошибка',
    'tag_hotkey': 'a'
  },
  {
    'tag_color': 'Бирюзовый',
    'tag_name': 'Производитель',
    'tag_hotkey': 's'
  }
];
Скопировано

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

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

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

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

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

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

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

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

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