Setting up a project

There are three options:

• Put your instructions inside the task, but make sure that it doesn't clutter the interface.

• Use a side window for your instructions so that the Toloker can quickly expand or collapse them.

• Hide the instructions in an expandable section or add hints for the individual interface elements.

For best results, we recommend that you pre-select the Tolokers that meet your requirements and set up the quality control rules.

No, but you can add links to them.

You can't use unsupported tags because they are deleted when you save the project. List of supported tags.

By default, the project instructions are displayed in the training pool. To use separate instructions for the training pool, deselect Use project instructions. Don't forget to update the training instructions if you change something in the general task instructions.

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.

To the component that inserts the image, add the parameters: real-size=true and screenshot=true.

To create a shortcut, add the following action to the "onKey" method:

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.

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 Toloker and add the Toloker username to your trusted list on the Tolokers page. For more information, see this post.

If none of the Tolokers 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.

Use concatenation, for example:

{{field type="checkbox" name=(concat "result." @index ) label=(concat "checkbox –
          " @index) size="L"}}

Try to disable extensions in your browser. They might block iframe loading.

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.

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.

Specify the name of the input field where you pass the link, without the brackets:

{{field type="button-clicked" name="ads" label="Click me" href=name_escape
          action=true}}

1. See how this is implemented in the “Mining business contacts” template.

2. 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 check the box if the site doesn't exist'}}}}
   

The names of the output fields must differ: each checkbox must have its own unique name. For more information about this component, see here.

You can use JavaScript to add assignment validation depending on the checkbox. An example is provided in the “Search for information online” template.

You can see an example in the comments for this project. The example includes the output data format and libraries to be added.

To add libraries:

1. Click the “gear button” in project editing mode.

2. In the field that opens on the left, enter the links and press Enter.

The issue is probably in the JS block. Try deleting its content, then test the Submit button in the preview mode.

You can do this using concatenation.

See the sample projects that can help you build an interface:

• with checkboxes

• with a dropdown list

• with radio buttons

If you pass an array of values to the input field, use commas to separate the array elements. A response option will be generated for each of them in the interface. Input/output data for the sample projects are provided in the comments at codepen.io.

You can't deselect a radio button. You can only select another radio button as a different response option.

In this case, you need to leave the field optional in the output data and set up validation depending on the Toloker response. You can see how this is implemented in the “Text classification” template.

Add sources="CAMERA" to the attributes of the image loading component. This disables adding photos from the gallery.

Try to add a condition to check for the second progress bar:

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 create a selection and drop-down list with category selection. See how it is implemented on this page (Dropdown list tab).

Learn more about the template's JS extension here.

To avoid conflict between the Vue markup and the Handlebars syntax, disable the "toloka-handlebars-templates" library and inherit from the Task/TaskSuite classes.

The “Side-by-side image comparison” template uses a component rather than an HTML tag. This means that you should enclose your proxy in curly brackets like this example: {{img src=(proxy image)}}.

Use CSS to specify the color for the .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.

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}$/.

You can also add a regular expression to 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}}

You can use JavaScript to add assignment validation depending on a checkbox. An example is provided in the “Search for information online” template.

Pass an array of strings as the input field. For example, as shown in the screenshot:

In HTML, use a special handlebar to iterate over this field. The code structure will look like this:

{{#each words}}
{{field type="radio" name="result" value=this label=this}}
{{/each}}

In the HTML code of the template, enter the following:

<input type=""range"" list=""rng"" class=""res"">

and include the following in onRender in your JS:

onRender: function() {
// Generated DOM element for the task (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.

Enclose the input field in double curly brackets {{text}}.

Enclose the input field in triple curly brackets {{{input_field}}}.

More information about using the component.

You don't have to use our components for task interfaces. Feel free to create a custom design for your tasks. To do this, delete the library from the project template:

• Click the “gear button” to open the settings.

• Delete $TOLOKA_ASSETS/js/toloka-handlebars-templates.js.

See the descriptions of the structure of classes and how they work.

To change the number of output fields dynamically, use the recommendations from this page.

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.

To display the text in the input field with HTML tags, use the <pre> tag. For example:<pre>{{text}}</pre>.

In this case, the text is rendered as is, in one scrollable line. To remove the scroll and avoid stretching the task card, add the following CSS to the block:

.task {
  max-width: 800px;
}

pre {
  white-space: pre-wrap;
}

There are four options:

• Decompose the task: First select images with the items you need, then select areas in them.

• 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 Toloker 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.

Other questions

You can find an example of the task template for selecting image groups at this link. The input and output data, as well as a fragment of the instructions, are in the comments to the project.

To validate the input data format, you can use the output field type, specifying the acceptable or minimum/maximum values. For example, create an output field for the taxpayer number with the "string" type and enter its minimum and maximum length (like 10 and 12). To use a more sophisticated validation in the template, use RegExp.

To enter a date, you can add a calendar to the task interface. See an example of a calendar.

You can use different image sizes.

You can't use a range as a fixed value.