How to use JavaScript extensions
All aspects of the task's lifecycle are controlled by two JavaScript classes:
Task is responsible for rendering and validating an individual task. Typically, you should extend this class if a task needs to have non-standard behavior.
You can use services for specific needs (such as subscribing to keyboard presses or getting the user's GPS coordinates).
Lifecycle of a task
When a user starts a task, the workspace is initialized in the iframe. First, the list of tasks is requested. Then the received list is passed to the TaskSuite
class. It creates an instance of the Task
class for each task.
- Rendering
-
To render the task page, the
render()
method of theTaskSuite
class is called. This method calls therender()
method of theTask
class for each task and collects the created DOM tree components in a single list.Here you can change the rendering of tasks and task pages.
- Response validation
-
When the performer clicks Send, the
TaskSuite.validate(solutions)
method is called to validate ther performer's responses. It calls theTask.validate (solutions)
method for each task and returns errors.Here you can make an additional review of the performer's responses.
- Removal
-
When the performer has finished all tasks on the page or skipped it, the
destroy()
method of theTaskSuite
class is called. It calls thedestroy()
method of theTask
class for each task. These methods free up resources and remove the services and event handlers associated with tasks.
Class inheritance
To keep the code from looking heavy, use the following function for class inheritance and redefinition:
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;
}
Function call:
var ChildClass = extend(ParentClass, function() {
ParentClass.call(this);
}, {
method: function() {}
})
Data types
The Task
object is the task to perform.
{
"id": <строка>,
"input_values": {
"<id поля с входными данными>": <значение>,
…
}
}
Key | Value |
---|---|
| Task ID. |
| Task input data in the format "<field ID>":"<field value>" . Example:
|
Key | Value |
---|---|
| Task ID. |
| Task input data in the format "<field ID>":"<field value>" . Example:
|
The Solution
object is the performer's response in the task.
{
"task_id": <строка>,
"output_values": {
"<id поля ввода>": <значение>,
…
}
}
Key | Value |
---|---|
| Task ID. |
| Responses in the format "<input field ID>":"<value>" . Example:
|
Key | Value |
---|---|
| Task ID. |
| Responses in the format "<input field ID>":"<value>" . Example:
|
The SolutionValidationError
object is a validation error for the performer's response.
{
"task_id": string,
"errors": {
"<id поля ввода>": {
"code": "<код ошибки>",
"message": "<строка>"
},
…
}
}
Key | Value |
---|---|
| Task ID. |
| Errors in the format: "<field ID>": {code: "<error code>", message: "<error message>"} . Example:
|
Key | Value |
---|---|
| Task ID. |
| Errors in the format: "<field ID>": {code: "<error code>", message: "<error message>"} . Example:
|