TaskSuite 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.

“Wrapper class” for task suites creates instances of task classes. You can redefine this class (for example, if you need to display a shared element on the page with tasks or get more control over tasks, like custom keyboard shortcuts).

The main purpose of the TaskSuite class is to render tasks on the page ( render() ). It is also used for collecting responses ( getSolutions() ), validating them ( validate(solutions) ) nd managing keyboard shortcuts ( focusNextTask() , onKey(key) , and so on).

The base class for TaskSuite is available in the window.TolokaTaskSuite global variable.


Basic task suite class constructor. Parameters:
  • options.task — Array of Task models.
  • options.specs — Parameters for input and output data and the task interface. See the task_spec object format.
  • options.assignmentId — IDs of tasks on the page.
  • options.workspaceOptionsSandbox initialization parameters {{isReadOnly: boolean}}
  • options.TaskClass — Array of classes for the task you create.
  • options.solutions — Array of responses Solution . Can be empty.
Destroys all tasks on the page. Releases resources, services, and event handlers used in the global space. Calls onDestroy() .
Sets the focus on the next task.
Sets the focus on the previous task.
Sets the focus on the task by the index. Parameter:
  • index — Task index on the page.

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

// skip current assignment

Returns the DOM element of the page (it is empty before rendering, and after rendering it is initialized and contains the interface).


Returns a link to the active task. Gets the index of the active task from a private property _focusedTaskIndex and returns a link to that task using getTasks() .

// remove the class .some_class from all elements of the active task
let elements = Array.from(this.getFocusedTask().getDOMElement().querySelectorAll('.some_class'));
elements.forEach(el => el.classList.remove('some_class'));

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 an array of Solution responses.


Returns the DOM element of the page styles.


Returns an array of Task initialized task models.


Returns the DOM element of the task suite (div.task-suite). If the DOM element is missing, the method creates it.

Returns tasks indexed by their IDs: "<taskId>": Task, …

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

Hotkey handler initializer:
  • Sets the focus to the previous task when the left arrow or up arrow is pressed.
  • Sets the focus to the next task when the right arrow or down arrow is pressed.
  • Passes the pressed keys to the active task.
  • Sets the focus on the first task.
A method you can redefine to execute your code when a task suite is deleted. Called after the page is destroyed ( destroy() ). The best method for releasing memory, deleting global event handlers and DOM elements, and so on.
Passes the pressed key to the active task.
A method you can redefine to execute your code when a task suite stops working.
A method you can redefine to execute your code when rendering a task suite. Called after page rendering ( render() ). All manipulations with the DOM element of a task should be performed here.
A method you can redefine to execute your code when a task suite resumes working.
Called if the validation failed. Contains error descriptions in the parameter. Parameter:
Calls the pause() method for each task in the suite. It also calls the onPause() method.
proxy(path, options)
Makes a GET/POST request via proxy. Returns the result of the request as an object. Parameters:
Attention. Some features (such as timeouts or custom headers) are not supported.
// we need to find usernames starting with 'jones' and 'smith' (no more than 10 of each)
// we make two POST requests to the search service
// then wait for results

let promises = [],
patterns = ['ivanov*', 'egorov*'];

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));> > >

Creates a DOM representation of the task suite: renders all tasks in the task suite. Calls render() in the class Task for each task. Calls onRender() . Returns this.

Validates responses according to output data parameters. Returns a promise object with an array of SolutionValidationError errors if the responses are incorrect, or null. Parameter:
  • solutions — Array of the performer's task responses. If omitted, the current values are used ( getSolutions() ).