TaskSuite сlass

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.


Constructor for the base class of the task suite. 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.

Returns the parameters passed to the constructor() method.


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


Returns an array of Task initialized task models.

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

Returns an array of Solution responses.

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

Returns the DOM element of the page styles.


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

Validates responses according to output data parameters. Returns a promise 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()).
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.
Sets the focus on the task by the index. Parameter:
  • index — Task index on the page.
Sets the focus on the next task.
Sets the focus on the previous task.
Passes the pressed key to the active task.

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

Destroys all tasks on the page. Releases resources, services, and event handlers used in the global space. Calls onDestroy().
Called after page rendering (render()). All manipulations with the DOM element of a task should be performed here.
Called after the page is destroyed (destroy()). The best method for releasing memory, deleting global event handlers and DOM elements, and so on.
Called if the validation failed. Contains error descriptions in the parameter. Parameter: