Toloka documentation

TaskSuite class


    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()](#render)). It is also used for collecting responses ([getSolutions()](#getSolutions)), validating them ([validate(solutions)](#validate)), and managing hotkeys (focusNextTask(), onKey(key)).

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



    Basic task suite class constructor.


    • options.task — Array of Task models.

    • options.specs — Parameters for input and output data and the task interface.

    • options.assignmentId — IDs of tasks on the page.

    • options.workspaceOptions — Toloker's workspace initialization parameters.

    • options.TaskClass — Array of classes for the task you create.

    • — 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 Assignmentinstance. 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()](#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 an object with a set of parameters passed to the [constructor()](#constructor) method during initialization.

    // getting specifications for all required fields:
    let outputSpec = this.getOptions().specs.output_spec,
         requiredFields = Object.keys(outputSpec)
                                .filter(key => outputSpec[key].required)
                                .reduce((item, key) => (item[key] = outputSpec[key], item), {});


    Returns a complete URL to access the data on the proxy server. Parameter:

    • path — the relative path to the file.


    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 an object with the Toloker's workspace settings.

    The most important settings:

    • agent — The value is FRONTEND for full task versions, ANDROID for the Android app, and so forth.

    • isReadOnly — "Read-only" mode flag (for example, for viewing the history of completed tasks).

    • isReviewMode — Review mode flag (for example, manual review). This setting and isReadOnly are useful if you want to do something like change the template layout in history view mode.

    • language — A two-letter code of the language selected by the Toloker in Toloka settings. It's useful when you want to create multilingual templates.

    • origin — Parent page FQDN.


    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()](#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()](#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()](#onPause) method.

    proxy(path, options)

    Makes a GET or POST request through a proxy. Returns the response as an object.


    • path — the path for the request (string).

    • options — the request parameters (object). More information in the Jquery Ajax parameter description.

    Returns the promise object.


    Some features are not supported (for example, timeouts and custom headers).

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


    Creates a DOM representation of the task suite: renders all tasks in the task suite. Calls render() in the Task class for each task. Calls [onRender()](#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 Toloker's task responses. If omitted, the current values are used (getSolutions()).