Расширение шаблона на JavaScript

Все аспекты жизненного цикла заданий контролируются двумя 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"
}

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

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

Ключ

Значение

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": "Обязательное поле"
  }
}