Task interface
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:

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.
Click the {} button in Task interface section and choose an item.
Click More to see an example and a full list of parameters.
- Copy the expression (the
button) and paste it in the HTML block.
- Enter the field name from the input or output 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 thesrc
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: Link to the image file: HTML tag Component Link to the audio file: Link to the image file: For more information, see Using files from Yandex.Disk.
- 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 thename
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 specifyYes
andNo
as acceptable values. Then add a component Radio button component in the task interface (in the HTML block) and specify the field name in thename
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
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.
- Click Change input data.
To add a task, click Add task.
To delete a task, click its number, then click
.
- Click Apply.
- Click Apply.
- Get the sample upload file here: Download example file.
- Add the task data to the file.
- Save the file in UTF-8 encoding with the tsv extension.
- Click the Upload file button and choose the file.
- Check whether the fields are filled in correctly in the Table.
If the column headers are invalid, you will get the message "Error loading the file".
If the value of the required input field is not specified, or the number of fields in the header and row do not match, the task won't load. Refresh the page to return to viewing, correct the errors in the file, and load it again.
- Click Apply.
- Choose JSON.
- Fill in the data for verification in JSON format.
If the box is bordered in red, the JSON is not valid and the data won't be saved.
- Click Apply.
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:
Complete the task and click Submit.
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.
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.
Read our blog post on how to make the task interface intuitive and user-friendly.
What's next
- Create a task pool in the project.
- Learn more about how to set up a project: