Task interface

The task interface defines the task appearance 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.

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

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. For more information, see Handlebars Specifications.

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.

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.