Image classification
For this type of project, you can use the Image classification preset. Note that validation, keyboard shortcuts, and task layout are already configured in this example.
- view.image: Image.
- field.button-radio-group: Buttons for answer options.
- condition.required: Checks if at least one option is selected.
- plugin.toloka: Customizes the task layout.
- plugin.hotkeys: Keyboard shortcuts.
Note
You can add media files (audio files, videos, images) from your own server, Yandex Disk, or a cloud storage like Yandex Cloud, Google Cloud, or Amazon AWS.
What else can be configured
-
To add a detailed description to the task, use the view.text component.
-
To let Tolokers leave comments about the task or their response, add a text field using field.textarea.
-
Add keyboard shortcuts to rotate and zoom in images in the plugin.hotkeys configuration.
If this preset doesn't meet your needs, see other examples in this section.
Other options for buttons
Decide whether a Toloker can select only one or multiple answer options:
If there are several possible answers to the question, use field.checkbox-group checkboxes.
The field.button-radio-group component is displayed as solid buttons. It's better to use these buttons if the question has 2–4 short answer options.
If there are more answer options, or they are long, it's better to use field.radio-group, as in the example.
Add conditions
The helper.if component displays an interface element after a specific response is selected. For example, it lets a Toloker select correct statements about an image only if the image is loaded.
Image and search query comparison
Does the image match the search query
Add a button that opens the search results and generate a search query link using the helper.search-query component. To make sure that a Toloker clicked on the link and checked its contents, configure validation, as in the example.
Side-by-side image and web page comparison
You can display the web page in the built-in window using the view.iframe component. Place the image next to it using layout.side-by-side.
Side-by-side image and mobile web page comparison
This is a more complex example that compares the image with the results of a search query. The following components are added:
- view.iframe: Displays the web page in an embedded window.
- view.device-frame: Wraps the window in a smartphone frame.
- layout.side-by-side: Places the image and the search results window next to each other.