Как использовать JavaScript-расширения

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

Все аспекты жизненного цикла заданий контролируются двумя JavaScript-классами:

  • Task отвечает за отрисовку и валидацию отдельного задания. Если от задания требуется нестандартное поведение, как правило, следует расширять именно его.

  • TaskSuite«класс-обертка» для интерфейса страницы заданий. Вы можете переопределить этот класс, чтобы, например, отобразить общий элемент на этой странице.

Для решения специфических задач, таких как подписка на нажатие клавиш или получение GPS-координат пользователя, можно использовать сервисы.

Жизненный цикл задания

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

Отрисовка

Для отрисовки страницы заданий вызывается метод render() класса TaskSuite. Этот метод вызывает метод render() класса Task для каждого из заданий и собирает созданные компоненты DOM-дерева в единый список.

Здесь вы можете изменять отрисовку задания и страницы заданий.

Валидация ответов

Когда исполнитель нажимает на кнопку Отправить, вызывается метод TaskSuite.validate(solutions) для валидации ответов исполнителя. Он вызывает метод Task.validate(solutions) для каждого задания и возвращает ошибки.

Здесь вы можете проводить дополнительную проверку ответов исполнителя.

Удаление

Когда исполнитель закончил все задания на странице или пропустил ее, вызывается метод destroy() класса TaskSuite. Он вызывает метод destroy() класса Task для каждого задания. Эти методы освобождают ресурсы и удаляют сервисы и обработчики событий, связанные с заданиями.

Наследование классов

Чтобы код не выглядел громоздким, для наследования и переопределения классов используйте функцию:

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;
}
Скопировано

Вызов функции:

var ChildClass = extend(ParentClass, function() {    
    ParentClass.call(this);
}, {    
    method: function() {}
})
Скопировано

Типы данных

Объект Task — задание.

{
    "id": <строка>,
    "input_values": {
        "<id поля с входными данными>": <значение>,
        …
     }
}
Скопировано

Ключ

Значение

id

Идентификатор задания.

input_values

Входные данные задания в формате "<id поля>":"<значение поля>". Пример:
"input_values": {
  "image": "http://images.com/1.png"
}
Скопировано

Ключ

Значение

id

Идентификатор задания.

input_values

Входные данные задания в формате "<id поля>":"<значение поля>". Пример:
"input_values": {
  "image": "http://images.com/1.png"
}
Скопировано

Объект Solution — ответ исполнителя на задание.

{
    "task_id": <строка>,
    "output_values": { 
        "<id поля ввода>": <значение>,
        …
    }
}
Скопировано

Ключ

Значение

task_id

Идентификатор задания.

output_values

Ответы в формате "<id поля ввода>":"<значение>". Пример:
"outputValues": {
  "colour": "white",
  "comment": "So white"
}
Скопировано

Ключ

Значение

task_id

Идентификатор задания.

output_values

Ответы в формате "<id поля ввода>":"<значение>". Пример:
"outputValues": {
  "colour": "white",
  "comment": "So white"
}
Скопировано

Объект SolutionValidationError — ошибка валидации ответа исполнителя.

{
    "task_id": string,
    "errors": { 
        "<id поля ввода>": {
            "code": "<код ошибки>",
            "message": "<строка>"
        },
        …
    }
}
Скопировано

Ключ

Значение

task_id

Идентификатор задания.

errors

Ошибки в формате: "<id поля ввода>": {code: "<код ошибки>", message: "<сообщение об ошибке>"}. Пример:
"errors": { 
  "colour": {
    "code": "REQUIRED",
    "message": "Обязательное поле"
  }
}
Скопировано

Ключ

Значение

task_id

Идентификатор задания.

errors

Ошибки в формате: "<id поля ввода>": {code: "<код ошибки>", message: "<сообщение об ошибке>"}. Пример:
"errors": { 
  "colour": {
    "code": "REQUIRED",
    "message": "Обязательное поле"
  }
}
Скопировано