Toloka documentation

Text comparison (Side-by-side)

For this type of project, you can use the Product matching preset.

This preset allows you to compare two product names and determine whether they belong to different products or the same.

Take a look at the example: there are two text boxes and radio buttons to choose an answer. Note that validation, keyboard shortcuts, and task layout are already configured in this example.

Components used in the example
  • view.text: The texts that you want to compare.

    Show code
    {
      "type": "view.text",
      "content": {
        "type": "data.input",
        "path": "text_1"
      }
    }
    
  • layout.columns: Arranges texts side by side.

    Show code
    {
      "type": "layout.columns",
      "items": []
    }
    
  • field.radio-group: Buttons for answer options.

    Show code
    {
      "type": "field.radio-group",
      "label": "Are the product names the same or different?",
      "options": [],
      "validation": {
        "type": "condition.required"
      },
      "data": {
        "type": "data.output",
        "path": "result"
      }
    }
    
  • condition.required: Checks if at least one option is selected.

    Show code
    {
      "type": "condition.required"
    }
    
  • plugin.toloka: Customizes the task layout.

    Show code
    {
      "type": "plugin.toloka",
      "layout": {
        "kind": "scroll",
        "taskWidth": 800
      }
    }
    
  • plugin.hotkeys: Keyboard shortcuts.

    Show code
    {
      "1": {
        "type": "action.set",
        "data": {
          "type": "data.output",
          "path": "result"
        },
        "payload": "equal"
      },
      "2": {
        "type": "action.set",
        "data": {
          "type": "data.output",
          "path": "result"
        },
        "payload": "different"
      },
      "type": "plugin.hotkeys"
    }
    

What else can be configured

  • To add a detailed description to the task, use the view.text component.

    Show code
    {
      "type": "view.text",
      "content": "Look at the texts and tell if they are the same or different."
    }
    

  • To let Tolokers leave comments about the task or their response, add a text field using field.textarea.

    Show code
    {
      "type": "field.textarea",
      "label": "Comments",
      "placeholder": "Enter text",
      "data": {
        "type": "data.output",
        "path": "comment"
      }
    }
    

If this preset doesn't meet your needs, see other examples in this section.

Add a layout

To enhance Toloker's experience, you can highlight different types of data with colors using view.alert. In this example, the source text is highlighted with a blue border, and the buttons are highlighted with a yellow one.

Show code
{
  "type": "view.alert",
  "theme": "info",
  "content": {
    "type": "view.text",
    "content": "Look at the texts and tell if they are the same or different."
  }
},
{
  "type": "view.alert",
  "theme": "warning",
  "content": {
    "type": "field.radio-group",
    "label": "Are the product names the same or different?",
    "options": [],
    "validation": {
      "type": "condition.required"
    },
    "data": {
      "type": "data.output",
      "path": "result"
    }
  }
}