How to use JavaScript extensions

Note

The task interface configuration guide describes the features of the HTML/JS/CSS editor. You can also try creating a task interface in Template Builder.

All aspects of the task's lifecycle are controlled by three JavaScript classes:

  • The Assignment class manages task progress, processes the task suite commands for sending responses, skipping or pausing tasks, and more. It also creates an instance of the TaskSuite class.

  • TaskSuite is a “wrapper class” for the task suite interface. You can redefine this class, like if you need to display a shared element on the page.

  • The Task class 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 more nuanced needs like subscribing to keypress events or getting the Toloker's GPS coordinates.

Lifecycle of a task

When a Toloker starts a task, their workspace is initialized in an iframe. A messaging channel is created between the Toloka head page and the iframe. First, a list of tasks is requested and an Assignment instance is created. 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 suite, the render() method of the TaskSuite class is called. This method calls the render() method of the Task 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 suites.

Response validation

When the Toloker clicks Send, the TaskSuite.validate(solutions) method is called to validate ther Toloker's responses. It calls the Task.validate(solutions) method for each task and returns errors.

Here you can make an additional review of the Toloker's responses.

Removal

When the Toloker has finished all tasks on the page or skipped it, the destroy() method of the TaskSuite class is called. It calls the destroy() method of the Task 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

Task

The Task object is the task to perform.

{
"id": <string>,
"input_values": {
"<ID of the field with input data>": <value>,
}
}
KeyValue
idTask ID.
input_values

Task input data in the format "<field ID>":"<field value>".

Example:

"input_values": {
"image": "https://images.com/1.png"
}

Solution

The Solution object is the Toloker's response in the task.

{
"task_id": <string>,
"output_values": {
"<input field id>": <value>,
}
}
KeyValue
task_idTask ID.
output_values

Responses in the format "<input field ID>":"<value>".

Example:

"outputValues": {
"colour": "white",
"comment": "So white"
}

SolutionValidationError

The SolutionValidationError object is a validation error for the Toloker's response.

{
"task_id": string,
"errors": {
"<input field ID>": {
"code": "<error code>",
"message": "<string>"
},
}
}
KeyValue
task_idTask ID.
errors

Errors in the format: "<field ID>": {code: "<error code>", message: "<error message>"}.

Example:

"errors": {
"colour": {
"code": "REQUIRED",
"message": "Required field"
}
}

See also

Contact support

Last updated: February 15, 2023

Introduction
Getting started
Important tips
Useful recommendations
Working with Toloka
Projects
Pools
Tasks
Results
Project analysis
Toloka settings
Task interface
Template Builder
HTML/CSS/JS editor
Help and support
FAQTroubleshootingSupportGlossary