Копирайтинг
В Толоке есть шаблон Копирайтинг (посмотреть код в песочнице). В нем уже настроена валидация и внешний вид задания.
- view.image — картинка;
- layout.columns — размещает картинку в отдельном столбце слева от других элементов интерфейса;
- view.text — показывает текст из входных данных задания;
- field.textarea — поле для ввода текста;
- condition.required — проверяет, что поле для текста заполнено;
- plugin.toloka — настраивает ширину задания.
Что еще можно настроить
Чтобы задать необходимую длину текста, вместо condition.required используйте компонент condition.schema. Он не даст отправить ответ, если введенный текст будет короче или длиннее, чем вы указали.
Для ввода короткого текста в одну строку вместо field.textarea удобно использовать field.text.
Если для выполнения задания нужно что-то найти в интернете, добавьте компонент helper.search-query. Поисковый запрос можно составить из слов, взятых из входных данных.
Если вам не подходит этот шаблон, посмотрите другие примеры в этом разделе.
Пример без картинки
Упрощенный пример без картинки и без разделения компонентов по столбцам. Подойдет для заданий, в которых не нужно визуальное отображение, например, для переводов.
Несколько столбцов
Чтобы сравнить два текста, расположите их в соседних столбцах с помощью компонента layout.columns. Он позволяет задавать ширину столбцов и выравнивание по вертикали.
Компонент view.group добавляет вокруг текстов рамки, чтобы визуально отделить их друг от друга и облегчить восприятие.
Третий столбец в примере содержит два поля для ввода, куда пользователь может написать свой текст.
Показать скрытое поле
Этот пример подойдет для поиска в тексте. Например, для поиска ошибок. Если ошибки есть, то при выборе соответствующей опции откроется поле для ввода текста.
Выберите, как вы хотите оформить опции: радиокнопками, обычными кнопками или чекбоксом.
Используйте компонент field.radio-group.
Используйте компонент field.button-radio-group.
Используйте компонент field.checkbox.
Пользователь добавляет поля для ввода
- view.image — картинка;
- field.radio-group — опции выбора ответа;
- field.text — поле для ввода текста;
- field.list— кнопка, которая добавляет новые поля для ввода текста.
Особенность примера в том, что пользователь может сам добавлять и удалять поля для ввода текста.
Дополнительно в примере действует проверка, чтобы в каждой строке было не менее трех символов: русских или английских букв и пробелов. Условие реализуется с помощью condition.schema.
