Handlebars

For creating the task interface, you can use the following in the html field on the project page:

Libraries for using Handlebars and additional components are connected by default when you create a project.

String input field

To add an input field into the task, use the {{field type="input" name="<field id>"}} component. Field ID must match the field name in the output data description . For example:

{{field type="input" name="result" placeholder="Enter a word" validation-show="right-center"}}
Full list of parameters

Parameter

Description

Required

Default value

type

Field type: input — String input field.

yes

no

name

Field ID. Must must match the field name in the output data description.

yes

no

value

A string to be recorded into the output data file by default.

no

no

width

Width of the field. Set in the following units:

  • Pixels. For example, width="100px".

  • Percentage of the size of the parent element. For example, width="100%".

You can also use a formula for setting the width. For exaple, width="calc(100%-30px)".

no

size of field content

validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no

"top-left"

size

Size of the field.

Supported values: "S", "M", "L", "XL".

no

"L"

disabled

Whether data can be edited:

  • disabled=true — The field can't be edited.

  • disabled=false — The field can be edited.

no

false

placeholder

The prompt text to display in the empty field.

no

no

class

The CSS class for the field. For example, class="annotation".

no

".field" ".field_type_input"

Add a field of string type into the output data description. For example:

{
  "result": {
        "type": "string",
        "required": true
    }
}

Text input field

To add a multistring text input field into the task, use the {{field type="textarea" name="<field id>"}} component. Field ID must match the field name in the output data description . For example:

{{field type="textarea" name="result" width="270px" rows=5}} 
Full list of parameters

Parameter

Description

Required

Default value

type

Field type: textarea — Multistring text input field.

yes

no

name

Field ID. Must must match the field name in the output data description.

yes

no

value

Text to be recorded into the output data file by default.

no

no

validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no

"top-left"

size

Size of the field.

Supported values: "M", "L".

no

"L"

width

Width of the field. Set in the following units:

  • Pixels. For example, width="100px".

  • Percentage of the size of the parent element. For example, width="100%".

You can also use a formula for setting the width. For exaple, width="calc(100%-30px)".

no

size of field content

rows

The height of the text field (the number of lines shown without scrolling).

Example: {{field type="textarea" name="result" width="270px" rows=5}}

no

3

disabled

Whether data can be edited:

  • disabled=true — The field can't be edited.

  • disabled=false — The field can be edited.

no

false

resize

If the field can be resized by the user.

  • resize="vertical" — Resizable height.

  • resize="horizontal" — Resizabe width.

  • resize="both" — Resizable height and width.

no

no

placeholder

The prompt text to display in the empty field.

no

no

class

The CSS class for the field. For example, class="annotation".

no

".field" ".field_type_textarea"

Add a field of string type into the output data description. For example:

{
  "result": {
        "type": "string",
        "required": true
    }
}

String input with suggest list

Suggest list contains text suggestions that are displayed when the user points the cursor in the input field. To add a field with suggest list to the task:

  1. Define an array of strings with suggestions in JS-code (getTemplateData method) to include it into the set of input data for the project. Example:

    getTemplateData: function() {
        var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
        data. < name of array > = ['string 1', 'string 2', ...
            'string n'
        ];
        return data;
    }
    Example
    getTemplateData: function() {
        var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
        data.countries = ['Poland', 'Lithuania', 'Russia', 'Belarus', 'Latvia', 'Germany', 'France'];
        return data;
    }
  2. Add {{field type="suggest" name="<field id>" source=<name of array>}} component to HTML-code. Field ID must match the field name in the output data description . Example:

    {{field type="suggest" name="result" source=countries allowCustomInput=true}}
    Full list of parameters

    Parameter

    Description

    Required

    Default value

    type

    Field type: suggest — string input field with suggest list.

    yes

    no

    name

    Field ID. Must must match the field name in the output data description.

    yes

    no

    source

    Name of array with suggested strings. For example: source=countries. The array is defined in the JS-code of the project ( getTemplateData method).

    yes

    no

    allowCustomInput

    Whether the user can ignore suggestions and enter their own string.

    no

    false

    validation-show

    The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

    Supported values:

    • Above the input field: "top-left", "top-center", "top-right".

    • Below the input field: "bottom-left", "bottom-center", "bottom-right".

    • To the left of the input field: "left-top", "left-center", "left-bottom".

    • To the right of the input field: "right-top", "right-center", "right-bottom".

    • Don't display the message ("false").

    no

    "top-left"

    placeholder

    The text to display in the empty field.

    Note.

    If value is set, it is displayed in the input field instead of placeholder.

    no

    no

    hotkey

    Hot key for setting focus on the field.

    no

    no

    value

    Value that should be recorded as response if the user has not filled in the field.

    Note.

    Value is displayed in the empty field instead of placeholder.

    no

    no

    class

    The CSS class for the field. For example: class="mytask_field".

    no

    ".field" ".field_type_suggest"

Radio button

To add radio buttons into the task, use the {{field type="radio" name="<field id>"}} component. Field ID must match the field name in the output data description . For example, a set of two radio buttons:

{{field type="radio" name="result" label="Yes" value="Yes" hotkey="1"}}
{{field type="radio" name="result" label="No" value="No" hotkey="2"}}
Full list of parameters

Parameter

Description

Required

Default value

type

Field type: radio — Radio button.

yes

no

name

Field ID. Must must match the field name in the output data description.

yes

no

label

The name of the input element in the interface. For example, label="Yes".

no

no

value

The value to pass (written to the output file).

no

no

hotkey

The shortcut for selecting a value.

no

no

validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no

"top-left"

checked

The state of radio button when the page is displayed:

  • checked=true — selected.

  • checked=false — deselected.

no

false

size

Size of the field.

Supported values: "M", "L".

no

"L"

width

Width of the field. Set in the following units:

  • Pixels. For example, width="100px".

  • Percentage of the size of the parent element. For example, width="100%".

You can also use a formula for setting the width. For exaple, width="calc(100%-30px)".

no

size of field content

disabled

Whether data can be edited:

  • disabled=true — The field can't be edited.

  • disabled=false — The field can be edited.

no

false

class

The CSS class for the field. For example, class="annotation".

no

".field" ".field_type_radio"

Add a field of string type into the output data description. For example:

{
  "result": {
        "type": "string",
        "required": true
    }
}

Checkbox

To add a checkbox into the task, use the {{field type="checkbox" name="<field id>"}} component. Field ID must match the field name in the output data description . For example, a set of three checkboxes:
{{field type="checkbox" name="red" label="Red" hotkey="1"}}
{{field type="checkbox" name="green" label="Green" hotkey="2"}}
{{field type="checkbox" name="yellow" label="Yellow" hotkey="3"}}
Full list of parameters

Parameter

Description

Required

Default value

type

Field type: checkbox.

yes

no

name

Field ID. Must must match the field name in the output data description.

yes

no

label

The name of the input element in the interface. For example, label="Yes".

no

no

hotkey

The shortcut for selecting a value.

no

no

value

The value to pass (written to the output file).

Supported values: true, false.

no

false

validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no

"top-left"

checked

The state of a checkbox when the page displayed:

  • checked=true — checked.

  • checked=false — unchecked.

no

false

size

Size of the field.

Supported values: "M", "L".

no

"L"

width

Width of the field. Set in the following units:

  • Pixels. For example, width="100px".

  • Percentage of the size of the parent element. For example, width="100%".

You can also use a formula for setting the width. For exaple, width="calc(100%-30px)".

no

size of field content

disabled

Whether data can be edited:

  • disabled=true — The field can't be edited.

  • disabled=false — The field can be edited.

no

false

class

The CSS class for the field. For example, class="annotation".

no

".field" ".field_type_checkbox"

Add a field of boolean type into the output data description. For example:
{
  "red": {
        "type": "boolean",
        "required": true
            }
}

Dropdown list

To add a dropdown list into the task, use the {{#field type="select" name="<field id>"}}... {{/field}} component. Field ID must match the field name in the output data description . The entries in the dropdown list are created by the elclosed expression {{select_item}} . For example:

{{#field type="select" name="colour" placeholder="Select colour" width="200px"}}
  {{select_item value="red" text="Red"}}
  {{select_item value="green" text="Green"}}
{{/field}}
Full list of parameters

Parameter

Description

Required

Default value

type

Field type: select — Dropdown list.

yes

no

name

Field ID. Must must match the field name in the output data description.

yes

no

placeholder

The name of the dropdown list in the interface.

no

no

width

Width of the field. Set in the following units:

  • Pixels. For example, width="100px".

  • Percentage of the size of the parent element. For example, width="100%".

You can also use a formula for setting the width. For exaple, width="calc(100%-30px)".

no

size of field content

validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no

"top-left"

size

Size of the field.

Supported values: "S", "M", "L".

no

"L"

class

The CSS class for the field. For example, class="annotation".

no

".field" ".field_type_select"

disabled

Whether data can be edited:

  • disabled=true — The field can't be edited.

  • disabled=false — The field can be edited.

no

false

mode

Direction in which the list is unfolded:

  • mode="dropdown" — down.

  • mode="dropup" — up.

no

"dropdown"

value

Text to write into the output data file if the entry is selected.

no

no

text

The name of the list entry.

no

no

selected

The entry selected by default:

  • selected=true — Make entry delected by default.

  • selected=false — Leave entry deselected by default.

no

false

Add a field of string type into the output data description.

{
  "colour": {
        "type": "string",
        "required": true
    }
}

Button for file upload

To add a button for file upload into the task, use the {{field type="file" name="<field id>"}} component. Field ID must match the field name in the output data description . For example:

{{field type="file" name="result" }}
Full list of parameters

Parameter

Description

Required

Default value

type

Field type: file — Button for file upload.

yes

no

name

Field ID. Must must match the field name in the output data description.

yes

no

label

The name of the input element in the interface. For example, label="Click me".

no

Depending on the interface language “Загрузить файл” (Russian), “Upload file” (English), “Dosya yükle” (Turkish), “Unggah file” (Indonesian).

validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no

"top-left"

class

The CSS class for the field. For example, class="annotation".

no

".field" ".field_type_file"

Add a field of file type into the output data description. For example:

{
  "result": {
        "type": "file",
        "required": true
    }
}

Button for image file upload

To add a button for image file upload into the task, use the {{field type="file-img" name="<field id>"}} component. Field ID must match the field name in the output data description . After the image is uploaded the user will see an icon for image preview. For example:

{{field type="file-img" name="photo" camera=true}}
Full list of parameters

Parameter

Description

Required

Default value

type

Field type: file-img — Button for image file upload.

yes

no

name

Field ID. Must must match the field name in the output data description.

yes

no

validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no

"top-left"

preview

Displaying an image preview after image file upload:

  • preview=true — Display an image preview.

  • preview=false — Don't display an image preview.

no

true

camera

Open the camera when the image upload button is clicked:

  • camera=true — open camera.

  • camera=false — don't open camera.

no

false

compress

Image compression:
  • compress=true — Reduce image size to 1000*1000 pixels (the image is saved in JPEG format with quality level 90).

  • compress=false — Leave image without changes.

no

true

requiredCoordinates

Whether coordinates should be required in the image data.
  • requiredCoordinates=true — Coordinates should be required.

  • requiredCoordinates=false — Coordinates should not be required.

no

false

Add a field of file type into the output data description. For example:

{
  "result": {
        "type": "file",
        "required": true
    }
}

Image

To add an image into the task, use the {{img src=<imageURL>}} component. For example:

{{img src=url width="100px" height="75px"}}
Full list of parameters

Parameter

Description

Required

Default value

src

Image URL. Supported values:

  • URL from the input data of the task. For example, from the field with url ID: src=url.

  • Direct link. It is recommended to use HTTPS protocol. For example, src="https://mywebsite.ru/img1.png".

yes

no

width

Width of the image. Set in the following units:

  • Pixels. For example, width="100px".

  • Percentage of the size of the parent element. For example, width="100%".

You can also use a formula for setting the width. For example, width="calc(100%-30px)".

no

300px

height

Height of the image. Set in the following units:

  • Pixels. For example, height="100px".

  • Percentage of the size of the parent element. For example, height="100%".

You can also use a formula for setting the width. For example, height="calc(100%-30px)".

no

300px

real-size

Image scale. Acceptable values:

  • real-size=false — Stretch the image to the size of the parent element.

  • real-size=true — Use the original image size (if it isn't larger than the size of the parent element).

no

false

class

CSS class for the image.

no

".img"

Button

To add a button to the task, use the {{button}} component. For example:

{{button label="Click me" href="https://yandex.ru" action=true}}
Full list of parameters

Parameter

Description

Required

Default value

label

The name of the input element in the interface.

no

empty string

href

Link opened when the user clicks the button. The link is opened in a new browser tab.

no

action

Button colour:

  • action=true — Yellow.

  • action=false — White.

no

false

size

Size of the button.
  • "S" — 24 px high.

  • "M" — 28 px high.

  • "L" — 32 px high.

  • "XL" — 38 px high.

no

"M"

class

CSS class.

no

".button"

Iframe

To add an iframe into the task, use the {{iframe src=<object URL>}}. For example:

{{iframe src=url width="100px" height="100px"}}
Full list of parameters

Parameter

Description

Required

Default value

src

Page URL.

yes

no

width

Width of the frame. Set in the following units:

  • Pixels. For example, width="100px".

  • Percentage of the size of the parent element. For example, width="100%".

You can also use a formula for setting the width. For exaple, width="calc(100%-30px)".

no

"300px"

height

Height of the frame in pixels. Set in the following units:

  • Pixels. For example, height="100px";

  • Percentage of the size of the parent element. For example, height="100%".

You can also use a formula for setting the width. For example, height="calc(100%-30px)".

no

"500px"

content-width

The width of the content in the frame, in pixels. For example, content-width="700".

To make the frame the width of the screen, set content-width="false".

no

"1280"

zoom

Button for increasing the frame to the size of the browser window.

  • zoom=true — Increase frame to the browser window.
  • zoom=false — Keep the set size of frame.

no

false

class

CSS class for the frame.

no

".iframe"

sandbox

Enables sandbox mode, which restricts working in the frame.

To disable certain restrictions, you can use the following values (separate with spaces if combining them):

  • "allow-same-origin" — Allows following links within the frame (interprets them as content from the same source as the parent document).

  • "allow-top-navigation" — Allows opening frame links in the parent document.

  • "allow-forms" — Allows frame content to submit forms.

  • "allow-scripts" — Allows running and executing scripts. However, creating popup windows is prohibited.

  • "false" — Disables the restrictions listed.

no

"allow-scripts", "allow-same-origin"

Full URL path to receive data from external service

To get a get URL path for receiving data through proxy server, use the {{proxy "<relative link>"}} component. The relative link must begin with the unique name of the data source that is specified when connecting an external HTTP service. For example:

{{proxy "my_files/images"}}