Skip to content

Latest commit

 

History

History
227 lines (173 loc) · 4.95 KB

sbs-video.md

File metadata and controls

227 lines (173 loc) · 4.95 KB
Raw

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.

{% cut "Components used in the example" %}

  • view.video: A video player.

    {% cut "Show code" %}

    {
  "type": "view.video",
  "validation": {
    "type": "condition.played",
    "hint": "Please, watch the video"
  },
  "url": {
    "type": "data.input",
    "path": "video_1"
  }
}

    {% endcut %}

  • layout.columns: Arranges videos side by side.

    {% cut "Show code" %}

    {
  "type": "layout.columns",
  "items": []
}

    {% endcut %}

  • field.radio-group: Buttons for answer options.

    {% cut "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"
  }
}

    {% endcut %}

  • condition.required: Checks if at least one option is selected.

    {% cut "Show code" %}

    {
  "type": "condition.required",
  "hint": "Choose one of the options"
}

    {% endcut %}

  • plugin.toloka: Customizes the task layout.

    {% cut "Show code" %}

    {
  "type": "plugin.toloka",
  "layout": {
    "kind": "pager",
    "taskWidth": 1200
  }
}

    {% endcut %}

  • plugin.hotkeys: Keyboard shortcuts.

    {% cut "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"
}

    {% endcut %}

{% endcut %}

{% include toloka-tb-source-add-media %}

What else can be configured {#add-more}

  • To check whether a Toloker watched videos up to the end, replace the condition.played component with condition.played-fully.

    {% cut "Show code" %}

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

    {% endcut %}

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

    {% cut "Show code" %}

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

    {% endcut %}

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

    {% cut "Show code" %}

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

    {% endcut %}

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

Add a layout {#add-color}

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.

{% cut "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"
    }
  }
}

{% endcut %}

{% include contact-support %}