For this type of project, you can use the Copywriting preset (view code in the sandbox). It has pre-configured validation and task layout.
- view.image: Image.
- layout.columns: Places the image in a separate column to the left of other interface elements.
- view.text: Shows the text from the task input data.
- field.textarea: Text input field.
- condition.required: Checks if the text field is filled in.
- plugin.toloka: Customizes the task width.
What else can be configured
To set the desired text length, use the condition.schema component instead of condition.required. It won't let a Toloker submit a response if the text they entered is longer or shorter than specified.
If a Toloker needs to search for information online to complete the task, add the helper.search-query component. The search query can be put together from words taken from the input data.
If this preset doesn't meet your needs, see other examples in this section.
Example without an image
A simplified example without an image or columns It can be used for tasks that don't require visual display, such as translations.
To compare two texts, place them in adjacent columns using the layout.columns component. It allows you to set the column width and vertical alignment.
The view.group component adds frames around the texts to visually separate them from each other and make them easier to read.
The third column in the example contains two input fields for Tolokers to write their text.
Show hidden field
This example is suitable for text search, such as for finding errors in a text. If a Toloker finds mistakes, selecting the relevant option opens the text input field.
Decide how you want to display the options: with radio buttons, regular buttons, or a checkbox.
Use the field.radio-group component.
Use the field.button-radio-group component.
Use the field.checkbox component.
A Toloker adds input fields
This is a complex example that consists of four main parts:
- view.image: Image.
- field.radio-group: Response selection options.
- field.text: The text input field.
- field.list: A button that adds new text input fields.
What's unique about this example is that a Toloker can add and remove text input fields.
In addition, the example checks that each line has at least three characters, including Russian or English letters and spaces. The condition is implemented using condition.schema.