Creating a 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

The HTML block inserts expressions that define the user interface elements of the task. The expression can be an HTML tag or component. Depending on the element type, use the input or output data fields in expressions:

Step 1: Put the expression in the HTML block
  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.
Step 2: Specify the input or output field name

To insert input or output data in the standard expression, specify the field name from the Specifications block.

How do I insert a link to the Yandex.Disk file?

To use the interface element for passing links to Yandex.Disk files, in the HTML block, add proxy to the input data field name. Depending on the element type, the field design looks different. Example:

HTML tag Component
Link to the audio file: <audio src={{audio_link}} controls> → <audio src={{proxy audio_link}} controls> Link to the image file: {{img src=image }} → {{img src=(proxy image)}}

Read more about connecting to Yandex.Disk and adding file links from Yandex.Disk in the task interface.

Full list of special components and helpers

For common purposes, Toloka offers special Handlebars components.

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

The specifications include:
  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 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, 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

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

To view the resulting task, click Preview. 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 page. You can also complete one or more tasks and get responses.

How do I change the number of standard tasks?
You can change the number of tasks with standard data on the Preview page:
  1. Click Change input data.
  2. To add a task, click Add task.

    To delete a task, click its number, then click .

  3. Click Apply.
How to check the input data display

Add th input data to check if files or text hints are displayed on the task page. To do this, click Change input data and choose one of the methods:

  1. Change the input data fields.

    To change the task type to 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.

How do I check if output data is received correctly?

You can check some of the received data on the task page.

To check if the data from text comments or checkboxes is received correctly, fill in these task fields and click Submit. Then click View responses.

Tip. Use Sandbox to check if files, images, audio, or video submitted from the task page are received correctly. To do this, complete the project creation, create the same project in the Sandbox, and complete it from a trusted user account.

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.