For this type of project, you can use the Copywriting template (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 the other interface elements.
- view.text: Shows the text from the task output 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
If the user 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 template doesn't meet your needs, see other examples in this section.
Example without an image
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 users to write their text.
Show hidden field
This example is suitable for text search, like for finding errors in a text. If the user 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.
The user adds input fields
What's unique about this example is that the user 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.