Task class

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.

The Task base class is responsible for the task interface. This class is available in the global variable window.TolokaTask.



Implements the logic for removing the focus from the task and calls the onBlur() method.

The task UI constructor. Parameters:
  • options.task — The Task task model.
  • options.specs — Parameters for input and output data and the task interface. See the task_spec object format.
  • options.workspaceOptionsSandbox initialization parameters {{isReadOnly: boolean}}
Releases resources, services, and event handlers used in the global space. Calls onDestroy() .

Implements the logic for setting the focus on the task by calling the onFocus() method.


Returns a link to an instance of the TolokaAssignment class. After that, you can access all its properties and methods.

// skip current assignment
Copied to clipboard

Returns the DOM element of the task.


Returns the parameters passed to the constructor() method.

Returns the full URL for accessing data on the proxy server. Parameter:
  • path — Relative file path.

Returns the saved state of the task (object).

Retrieves the saved state of the task from the browser's local storage using the TASK_STATE:{assignmentId}:{taskId} key.


Returns the Solution task responses.


Returns a DOM element for task styles that is added to document.head when rendering.


Returns the Task task model.


Returns the object received by the template engine before compiling the task template.

The method is available in toloka-handlebars-templates. It returns a set of fields and their values passed to the task input: return this.getTask().input_values.

The method allows you to process the existing values or pass new custom parameters to the template engine. For example, you can pass strings to localize a template and use the same project for Russian-speaking and English-speaking users.

// if the user completes the assignment under iOS, we show additional layout
getTemplateData: function() {
    let data = TolokaHandlebarsTask.prototype.getTemplateData.call(this),
        userAgent = navigator.userAgent || navigator.vendor || window.opera;

    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        data.ios = true;

    return data;
Copied to clipboard

Returns the sandbox initialization parameters passed to the constructor() method.


Hides a global error (only if the toloka-handlebars-templates library is connected).


Contains the current task's id.


let myId = this.getTask().id

Called after removing the focus.
Called after the task is destroyed ( destroy() ). The best method for releasing memory, deleting global event handlers and DOM elements, and so on.
Called after setting the focus.
Passes the pressed key. Parameter:
  • key — Alphanumeric character pressed on the keyboard. Can be used as a shortcut.
Called after the task is put on pause.
Called after the task is rendered ( render() ). All manipulations with the DOM element of a task should be performed here.
Called after the task is resumed.
Called when the performer's response validation fails. Parameter:

Pauses task completion. Saves the intermediate state of the task in the browser's local storage (saveState) and calls the onPause method.

proxy(path, options)

Creates a GET or POST request via proxy.


  • path — Request path (string).
  • options — Request parameters (object). Read more in Jquery Ajax.

Returns a promise object.

Important. Some features (such as timeouts or custom headers) are not supported.
// need to find user logins which start with 'jones' and 'smith' (not more than 10 of each instance)
// we make two POST requests to the search service
// then wait for results

let promises = [],
     patterns = ['jones*', 'smith*'];

patterns.forEach(pattern => promises.push(Promise.resolve(this.proxy('myproxy/search', {
   type: 'POST',
   contentType: 'application/json',
   dataType: 'json',
   data: JSON.stringify({
       query: pattern,
       limit: 10
   processData: false

       .then(results => console.log(results))
       .catch(error => console.error(error));
Copied to clipboard

Forms the DOM representation of the task interface. Calls onRender() . Returns this.


Resumes task completion. Retrieves the saved state of the task from the browser's local storage. Restores responses from it and re-executes the requests in the file and webview services that were not completed before. Calls onResume.


Checks assignmentIdto make sure that the task is working in performer mode and not in preview mode. Receives a set of responses and unprocessed requests in the file and webview services. Saves them in the browser's local storage with the TASK_STATE:{assignmentId}:{taskId} key using the storage service.

Sets the responses. Parameter:
  • solution — The performer's response to the task ( Solution ).
setSolutionOutputValue(fieldName, value)

Writes the required value in the specified field. Parameters:

  • fieldName — A field (string) in the output specification, to which the value is passed.
  • value — The value of the type set for fieldName in the project specification.

Updates the output specification by writing the passed object with responses in it. Calls saveState to save intermediate results in the browser's local storage. Parameter:

  • outputValues — Object with responses.

Forcibly shows a global error in the task (only if the toloka-handlebars-templates library is connected). Parameters:

  • message — Error text (string).
Template engine for the task. In the task's HTML interface, it replaces occurrences such as ${fieldX} with the corresponding value and the fieldX key from the data parameter. Returns the task's HTML interface as a string. Parameter:
  • data — Object with data to insert in the template.
Validates responses according to output data parameters. Returns SolutionValidationError if the responses are incorrect, otherwise null. Parameter:
  • solution — The performer's response to the task. If omitted, the current one is used ( getSolution() ).