Task interface

Note

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

The task interface defines the visual appearance of the task for the Toloker and the logic for processing task responses.

A user-friendly interface improves the quality of results, helps Tolokers complete tasks faster, and lets you set a lower price per task.

To learn how to create a user-friendly interface, read the article in our knowledge base.

Interface configuration block

Tip

To open the HTML, CSS, and JS blocks in the interface, click the block name on the right.

HTML block

Add elements for the input and output data to display in the task interface in this block. You can use special components or HTML tags inside the <body> tag.

Handlebars is used as a template engine for HTML.

How do I add a component?
Examples of using input data
Examples of using output data

JavaScript block

In the JS block, you can add rules for response processing in JavaScript. Special extensions for task classes are available for this purpose.

You can also connect JavaScript libraries to create the interface. For example, if you have several projects with similar tasks, save the method descriptions in a separate file and add it as a library.

To connect the JavaScript library, click the button in the Task interface block and add links to libraries in the JS field.

CSS block

In the CSS block, you can declare the design for tags and classes. For example, the indent at the bottom after a text field with the task-text class:

.task-text{
  margin-bottom: 15px;
};

In addition, you can connect a CSS library. To do this, click the button in the Task interface block and add links to libraries in the CSS filed.

Preview features

Alert

Changes to the input and output data, as well as the number of tasks per suite aren't saved after you exit Preview.

To view the resulting task, click Preview task. The preview shows a page with a task that contains standard data. Change the input data and make sure that images, links, or text are displayed correctly on the task suite. You can also complete one or more tasks and get responses.

How do I change the number of standard tasks?
How to check the input data display
How do I check if output data is received correctly?

Controls in a task

To change the set of controls, click Show common interface elements at the bottom of the Task Interface section.

By default, the task suite displays:

  • Remaining time: Counts down the time for completing the task.

  • Price per task suite.

  • Task name: Corresponds to the project name.

  • The following buttons:

    • Contact requester button.

    • Instructions.

    • Fullscreen.

    • Submit.

    • Skip.

    • Exit.

Tip

Read the article on how to make the task interface intuitive and user-friendly.

What's next

See also

Troubleshooting

Setting up tasks, preview
Setting up controls
Input and output data
Validation
Tasks with images
Contact support

Last updated: June 19, 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