Toloka documentation

Video comparison (Side-by-side)

For this type of project, you can use the Video comparison (Side-by-side) preset.

Take a look at the example: there are two videos and 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.video: A video player.

    Show code
    {
      "type": "view.video",
      "validation": {
        "type": "condition.played",
        "hint": "Please, watch the video"
      },
      "url": {
        "type": "data.input",
        "path": "video_1"
      }
    }
    
  • layout.columns: Arranges videos 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 videos the same or different?",
      "options": [],
      "validation": {
        "type": "condition.required",
        "hint": "Choose one of the options"
      },
      "data": {
        "type": "data.output",
        "path": "result"
      }
    }
    
  • condition.required: Checks if at least one option is selected.

    Show code
    {
      "type": "condition.required",
      "hint": "Choose one of the options"
    }
    
  • plugin.toloka: Customizes the task layout.

    Show code
    {
      "type": "plugin.toloka",
      "layout": {
        "kind": "pager",
        "taskWidth": 1200
      }
    }
    
  • 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"
      },
      "3": {
        "type": "action.set",
        "data": {
          "type": "data.output",
          "path": "result"
        },
        "payload": "error"
      },
      "type": "plugin.hotkeys"
    }
    

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 check whether a Toloker watched videos up to the end, replace the condition.played component with condition.played-fully.

    Show code
    {
      "type": "condition.played-fully",
      "hint": "Please, watch the video"
    }
    

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

    Show code
    {
      "type": "view.text",
      "content": "Watch the videos and tell if they are the same."
    }
    

  • 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": "Watch the videos and tell if they are the same."
  }
},
{
  "type": "view.alert",
  "theme": "warning",
  "content": {
    "type": "field.radio-group",
    "label": "Are the videos the same or different?",
    "options": [],
    "validation": {
      "type": "condition.required",
      "hint": "Choose one of the options"
    },
    "data": {
      "type": "data.output",
      "path": "result"
    }
  }
}