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

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

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. Нажмите кнопку Предпросмотр и посмотрите, что получилось.

• Синий — Q.
• Желтый — W.
• Зеленый — E.
• Серый — T.
• Красный — R.
• Коричневый — Y.
• Фиолетовый — U.
• Оранжевый — I.
• Розовый — A.
• Бирюзовый — S.