Проект 4. Какой из найденных объектов больше похож на исходный?

1. Выберите шаблон:

   1. Нажмите кнопку + Создать проект.

   2. Выберите шаблон Попарное сравнение изображений.

2. Заполните общую информацию:

   1. В поле Название проекта введите Какой из найденных объектов похож на исходный?.

   2. В поле Описание введите Решите, какая пара обуви больше похожа на исходную..

   3. По желанию добавьте Приватный комментарий.

   4. Нажмите кнопку Сохранить.

3. Отредактируйте Интерфейс задания и блок Спецификации:

   Примечание. В этом туториале показано, как создать интерфейс задания в редакторе HTML/JS/CSS. Вы также можете попробовать создать интерфейс задания в Конструкторе шаблонов.

   1. Подготовьте Интерфейс задания.

      1. Удалите шаблонный код из блока html.

      2. В блок html вставьте следующий код:

         <div class="header">
             <div class="left caption">
                 {{button label="Перейдите на сайт" href=uploaded_link_left size="L"}}
                 <p class="url">{{uploaded_link_left}}</p>
             </div>
             <div class="right caption">
                 <p class="url">{{uploaded_link_right}}</p>
                 {{button label="Перейдите на сайт" href=uploaded_link_right  size="L"}}
             </div>
         </div>
         
         {{img src=image}}
         
         <div class="content clearfix">
             <div class="left page">
                 {{iframe src=uploaded_link_left width="100%" height="700px" real-size=true screenshot=true}}
             </div>
             <div class="right page">
                 {{iframe src=uploaded_link_right width="100%" height="700px" real-size=true screenshot=true}}
             </div>
         </div>
         
         <div class="footer">
             {{field type="radio" name="result" label="Левое изображение лучше" value=result_left hotkey="1"}}
             {{field type="radio" name="result" label="Правое изображение лучше" value=result_right hotkey="2"}}
         </div>

      3. В блоке js отредактируйте код, добавив следующие строки до строки OnRender.

         Внимание.

         Не удаляйте существующий код.

         getTemplateData: function() {
                 var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments),
                 input = this.getTask().input_values;
                 var left_link = input.left_link;
                 var right_link = input.right_link;
                 var uploaded_link_left = '',
                     uploaded_link_right = ''
                 if (Math.floor(Math.random() * 2)) {
                     uploaded_link_left = left_link
                     uploaded_link_right = right_link
                 } else {
                     uploaded_link_left = right_link
                     uploaded_link_right = left_link
                 }
           data.uploaded_link_left = uploaded_link_left;
                 data.uploaded_link_right = uploaded_link_right;
                 data.result_left = uploaded_link_left;
                 data.result_right = uploaded_link_right;
         
                 return data;
         
             },

      4. Удалите шаблонный код из блока css.

      5. В блок css вставьте следующий код, отвечающий за установку пропорционального размера изображения.

         .task {
           display: block;
           text-align:center;
         }
         
         .header {
           overflow: hidden;
           background-color: #FFCC00;
         }
         
         .caption {
           width: 50%;
         }
         
         .url {
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
         
           max-width: calc(100% - 182px);
         
           display: inline-block;
           vertical-align: bottom;
         }
         
         .button {
           margin: 10px;
           max-width: 182px;
         }
         
         .button__label {
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           max-width: 150px;
         }
         
         .content {
           margin: 10px 0;
         }
         
         .page {
           display: inline-block;
           width: 50%;
         }
         
         .left {
           float: left;
           text-align: left;
         }
         
         .right {
           float: right;
           text-align: right;
         }
         
         .clearfix {
           overflow: hidden;
           width: 100%;
         }

   2. Отредактируйте входные и выходные данные в блоке Спецификации.

      1. Нажмите кнопку , чтобы переключить графический режим на формат JSON.

      2. В поле Входные данные введите:

         {
           "image": {
             "type": "url",
             "hidden": false,
             "required": true
           },
           "left_link": {
             "type": "url",
             "hidden": false,
             "required": true
           },
           "right_link": {
             "type": "url",
             "hidden": false,
             "required": true
           }
         }

      3. В поле Выходные данные введите:

         {
           "result": {
             "type": "url",
             "hidden": false,
             "required": true
           }
         }

      Подробнее о параметрах Спецификации читайте в разделе Входные и выходные данные.

4. Нажмите кнопку Предпросмотр.

5. В открывшемся окне проверьте работу опций задания.

   1. Ответьте на вопрос.

   2. В правом нижнем углу нажмите кнопку Отправить.

6. Выйдите из режима предпросмотра.

   1. В нижнем левом углу нажмите кнопку Выйти.

   2. В открывшемся окне нажмите кнопку Выйти.

7. В поле Инструкция введите инструкцию.

   1. Текст инструкции:

      Посмотрите на две фотографии с разной обувью и решите, какая пара обуви больше похожа на исходную пару. 
      Используйте свое собственное чувство стиля, но помните, что обувь будет выглядеть одинаково, если 
      она похожа по цвету, материалу, длине и стилю.

   2. Нажмите кнопку Завершить.

Подробнее о работе с проектом читайте в разделе Проект.