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.
What's next
- Create a task pool in the project.
- Learn more about how to set up a project:
Troubleshooting
- Click the gear button in project editing mode.
- In the field that opens on the left, enter the links and press Enter.
- See how it's implemented in the template "Find information online".
- To solve the second problem, you can add another validation like this:
if (solution.output_values.url && solution.output_values.check) {return {task_id: this.getTask().id,errors: {'url': {code: 'Insert a link or select the checkbox if the site doesn't exist'}}}}
- With checkboxes
- With a drop-down list
- With radio buttons
- Click the gear button to open the settings.
- Delete
$TOLOKA_ASSETS/js/toloka-handlebars-templates.js
. - Select an arbitrary area in the image. For example, put a square in the upper-right corner.
Mention this in your instructions for reviewers.
- Ask the performer to skip the task and report it in a personal message. Messages are reviewed by the requester. If the selectable object is missing, the task is deleted from the pool (by resetting the overlap).
- Add the "No object" checkbox to the interface and make sure that your JS checks that either the object is selected or the checkbox is selected.
For control purposes, add information about the value of this checkbox to the task interface.
If none of the performers can submit the assignment, the most likely reason is JS validation. Run JS validation again.
Export your project to the sandbox and try to complete the task in the sandbox yourself.
To check the task's look-and-feel on the mobile phone screen, enable the emulation mode in Chrome or Safari and edit the CSS block.
You can also use the mobile version of the sandbox. Write to support to get access to it.
You can hide text in an expandable section by using CSS styles, both in the task itself and in the instructions. You can see the sample code here.
You can see an example in the comments for this project. The example includes the output data format and libraries to be added.
You can't check loading of audio files in the preview mode, but you can do it in the sandbox if you do your task. To do this, register in the sandbox as a performer and add the performer username to your trusted list on the Users page. For more information, see this post.
To pass a label
in the input data, enter the input field name into the label.
For example, if you have the asd
input field with the string type, the component would look like: {{field type="checkbox" name="like" label=asd hotkey="q"}}
.
If you want to pass different label values in different tasks or the number of checkboxes may differ, use concatenation.
The names of the output fields must differ: each checkbox must have its own unique name. For more information about this component, see here.
The issue is probably in the JS block. Try deleting its content, then test the Submit button in the preview mode.
You can use JavaScript to add assignment validation depending on the checkbox. An example is provided in the "Find information online" template.
{{field type="checkbox" name=(concat "result." @index ) label=(concat "checkbox –
" @index) size="L"}}
You can't deselect a radio button. You can only select another radio button as a different response option.
You can use JavaScript to add assignment validation depending on a checkbox. An example is provided in the "Find information online" template.
.task
or .task-suite
element. For example, to use a black background:.task-suite {
background-color: #000000;
}
.task {
background-color: #000000;
}
You can also assign a class to the interface block with the image and set the background for this block only.<input type=""range"" list=""rng"" class=""res"">
and include the following onRender in your JS:
onRender: function() {
// DOM element of the task is loaded (available via #getDOMElement())
// Adding auxiliary variables
var $root = $(this.getDOMElement());
var _this = this;
var solution = TolokaHandlebarsTask.prototype.getSolution.apply(this, arguments);
$root.on('change', '.res', function(){
var range_result = $(this).val()
_this.setSolutionOutputValue('result', range_result);
return solution;
})
}
You can't expand the HTML window. To expand the JS and CSS fields, click any area within the field.
We didn't intend this window for any sophisticated development. Usually, the content is prepared in a third-party prettified editor, and the resulting code is pasted to the window prior to the update.
However, in the context of TolokaHandlebars editability, there are no differences between our window and a third-party editor.
If the tags or attributes disappear after you save the instructions (for example, checked="true"
), it means that they are not supported. For the full list of tags that can be used in the instructions, see the Guide.
Try to disable extensions in your browser. They might block iframe loading.
{{field type="button-clicked" name="ads" label="Click me" href=name_escape
action=true}}
Pass an array of strings as the input field. For example, as shown in the screenshot:
{{#each words}}
{{field type="radio" name="result" value=this label=this}}
{{/each}}
Enclose the input field in double curly brackets {{text}}
.
Enclose the input field in triple curly brackets {{{input_field}}}
.
For more information about using the component, see the Requester's guide.
To change the number of output fields dynamically, use the recommendations from this page.
To display the text in the input field with HTML tags, use the <pre>
tag. For example:<pre>{{text}}</pre>
.
.task {
max-width: 800px;
}
pre {
white-space: pre-wrap;
}
Here you can read more about the template's JS extension.
To avoid conflict between the Vue markup and the Handlebars syntax, disable the "toloka-handlebars-templates" library and inherit from the Task/TaskSuite classes.
setSolution: function(solution) {
var secondScale = this.getDOMElement().querySelector('.second-scale');
if(secondScale) {
secondScale.style.display = solution.output_values.grammar === 'no' ? 'block' : 'none';
}
TolokaHandlebarsTask.prototype.setSolution.call(this, solution);
},
You can check the link format using regular expressions. To do this, add the link validation JavaScript code with regexp
to the task template.
For example: var regexp = /^(https://www.myurl.com/).{4,200}$/
.
input
field with the string type to 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}}
To the component that inserts the image, add the parameters: real-size=true
and screenshot=true
.
onKey: function(key) {
var el = this.getDOMElement().querySelector(".image-annotation-editor__shape-polygon");
if (key === 'D') {
el.click();
el.classList.add('image-annotation-editor__shape_active')
}
If you need to further modify the area-selection editor, use this library.
In this case, you need to leave the field optional in the output data and set up validation depending on the performer response. You can see how it's implemented in the "Text classification with additional options" template.
Add sources="CAMERA"
to the attributes of the image loading component. This disables adding photos from the gallery.
You can create a selection and drop-down list with category selection. See how it is implemented on this page (Dropdown list tab).
The "Side-by-side" template uses a component rather than HTML tag. This means that you should enclose your proxy in curly brackets as in the example: {{img src=(proxy image)}}
.