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 performer and the logic for processing responses.

A good interface improves the quality of results, helps performers complete tasks faster, and lets you set a lower price for a task.

Interface configuration block

Hover over an item in the image to see a hint:

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 used in the <body> tag.

How do I add a component?

  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 in the HTML block.
  3. Enter the field name from the input or output data.
Examples of using input data
  • Display the text in the task. Add the text field with the string type in the input data. Then in the task interface (in the HTML block), you can add this text as a variable, for example:
    <p>Read the text: {{text}}</p>
  • Upload a file to the task, for example, an image. Add the url field with the link type in the input data. Then add the Picture component in the task interface (in the HTML block) and specify the field name in the src attribute:
    {{img src=url width="400px" height="300px"}}
  • Insert a link to the file on Yandex.Disk

    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)}}
    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)}}

    For more information, see Using files from Yandex.Disk.

Examples of using output data
  • Ask performers to enter the text. Add the input field with the string type in the output data. Make the field mandatory. Then add the Text input field field in the task interface (in the HTML block) and specify the field name in the name attribute:
    {{field type="textarea" name="input" width="270px" rows=5}}
  • Ask to select one of the values. Add the result field with the string type in the output data. Make this field mandatory and specify Yes and No as acceptable values. Then add a component Radio button component in the task interface (in the HTML block) and specify the field name in the name attribute:
    {{field type="radio" name="result" label="Yes" value="Yes" hotkey="1"}}
{{field type="radio" name="result" label="No" value="No" hotkey="2"}}

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

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 responses 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 the Sandbox to check if files, images, audio, or videos 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.

Tip.

Read our blog post on how to make the task interface intuitive and user-friendly.