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

Откройте Яндекс.Толоку для заказчика.

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

В открывшемся окне выберите шаблон Бок-о-боки изображений, для этого наведите указатель на шаблон и нажмите кнопку Выбрать.

В открывшемся окне заполните параметры проекта.

1. В поле Название проекта введите Найти такую же или похожую обувь в интернет-магазине.

2. В поле Описание введите Зайдите в интернет-магазин и предоставьте ссылку и изображение такой же или похожей пары обуви..

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

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

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

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

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
     }
   }

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

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

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

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

   <div class="header">
       <div class="left caption">
           {{button label="Перейдите на сайт" href=left_link size="L"}}
           <p class="url">{{left_link}}</p>
       </div>
       <div class="right caption">
           <p class="url">{{right_link}}</p>
           {{button label="Перейдите на сайт" href=right_link  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%;
   }

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

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

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

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

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

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

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

В открывшемся окне нажмите кнопку Завершить редактирование.