Task interface

Task interface defines the visual appearance of the task for the performer and the logic for processing responses. Create an HTML interface of tasks by adding input and output data fields. If necessary, create CSS styles and additional JavaScript processing of the response and change the set of controls on the task page.

HTML block

In the HTML block, add the input and output data fields.

In three cases, to add an input field to the task interface, you need to insert its name in double curly brackets:

  • Text. For example: <p>{{input_text}}</p>. The task displays text from the input data field with paragraph margins.
  • Audio link. For example: <audio src={{audio_link}} controls>. Displays an audio player with the record button in the task.
  • Video link. For example: <video src={{video_link}} controls>. Displays a video player with the record button in the task.

In all other cases, use Handlebars expressions. These are templates that can be combined with the HTML markup. Handlebars expressions are enclosed in double curly brackets {{ }} and can have attributes.

Note. For more information, see Handlebars Specifications.
To add an interface element:
  1. Click the {} button in Task interface section and choose an item.

    Click More to see an example and a full list of parameters.

  2. Copy the expression (the button) and paste it into the task interface.

For common purposes, Toloka offers special Handlebars components.

Example of the HTML block

For example, you need to translate small texts. In the task, the performer is given a text and a field for entering the translation.

In specifications, you need to declare:
  1. Input data field — the text string for sending text.
  2. Output data field — the translation string to save the translation.

To add the text for translation to a task, insert the name of the input data field in double curly brackets {{text}}. The <div> container ensures that the text is separated from the text input field.

To add a text field, use a a special component.

<div class="task-text">
  {{text}}
</div>

{{field type="textarea" name="translation"}}

CSS block

In the CSS block, you can declare the design for tags and classes. For example, the offset after the text block in the HTML block example:

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

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 multiple projects with similar tasks, you can save the method descriptions in a separate file and connect 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.

Preview

To view the resulting task, click Preview. The preview shows a page with 4 tasks with standard data.

Add input data to view your task. To do this, click Change input data and add tasks using one of the methods:

  1. Change the input data fields.

    To make a task control or training, add correct answers and a hint (the Add correct answers button).

    To go to the next task, click the task number at the bottom of the table. To delete a task, click .

  2. Click Apply.

Complete the task and click Submit, to check how responses are validated.

Attention. Once you leave Preview, the modified input data is deleted.

Controls in a task

To change the set of controls, click the button in the Task Interface block.

By default, the task page displays:

  • Timer (counts down the time for completing the task).

  • Price per task page.
  • Header (the project title).

  • The buttons Message to requester, Guidelines, Fullscreen, Next, Skip, To home page.