Проект 2. Найти похожий объект в интернет-магазине

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

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

   2. Выберите шаблон Поиск фотографий товаров.

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

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

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

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

   4. Сохраните изменения.

3. Отредактируйте интерфейс задания в выбранном редакторе:

   Выбрать

   Конструктор шаблонов

   Редактор HTML/CSS/JS

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

      Исполнитель не сможет отправить задание, если:

      • не перейдет по кнопке в интернет-магазин;
      • не добавит ссылку на найденный товар;
      • не загрузит изображение товара.
   2. Чтобы увидеть поля входных и выходных данных, нажмите Показать спецификации.

      • Поле входных данных: image — ссылка для загрузки картинки.

      • Поля выходных данных:

        • found_link — для ссылки на товар, найденный пользователем в интернет-магазине;
        • found_image — для загрузки изображения этого товара.

   1. В Интерфейсе задания удалите шаблонный код из блока HTML и вставьте следующий код:

      {{img src=image width="50%" height="400px"}}
      <div class='answers'>
       <p>Найти похожую <b>обувь</b> в интернет-магазине ASOS</p>
       {{field type="button-clicked" name="button" label="ASOS" href="https://www.asos.com" action=true}}
       <p>Обувь должна быть похожа по цвету, материалу, длине и стилю.</p>
       <p>Вставьте ссылку</p>
       {{field width="100%" type="input" name="found_link"}}
       <p>Загрузите изображение</p>
       <div>
       {{field width="100%" type="file-img" name="found_image" preview=true}}
       </div>
      </div>
      Скопировано

   2. Чтобы проверить корректность ссылки и изображения, предоставленных исполнителем, в 5-ой сроке блока JS замените следующий код:

      if (!solution.output_values.image && !solution.output_values.no_image) {

      на

      if (!solution.output_values.found_image) {

      Внимание.

      Будьте внимательны при изменении кода. Если у вас возникли проблемы с предварительным просмотром, обратитесь в службу поддержки или сравните ваш код с кодом в приложении.

   3. Удалите шаблонный код из блока CSS и вставьте следующий код, отвечающий за установку пропорционального размера изображения.

      .task {
        display: block;
        height: 500px;
        width: 800px;
      }
      .img {
        float: left; 
        width: 50%;
      }
      .answers {
        float: left; 
        width: 40%;
        margin: 5%;
      }
      Скопировано

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

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

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

         {
           "image": { 
               "type": "url",
               "hidden": false, 
               "required": true 
            } 
         }
         Скопировано

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

         Примечание.

         Если вы хотите выбрать другой интернет-магазин, измените строку с "pattern": "https://www.asos.com/.*" на "pattern": "your_store.*".

         {
           "button": {
             "type": "boolean",
             "hidden": false,
             "required": true,
             "allowed_values": [
               true
             ]
           },
           "found_link": {
             "type": "string",
             "hidden": false,
             "pattern": "https://www.asos.com/.*",
             "required": true
           },
           "found_image": {
             "type": "file",
             "hidden": false,
             "required": true
           }
         }
         Скопировано

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

      4. Нажмите кнопку , чтобы увидеть получившееся задание.

         Примечание. В предварительном просмотре проекта отображается одно задание со стандартными данными. Количество заданий на странице вы сможете настроить далее.
      5. 1. В открывшемся окне проверьте работу опций задания. В правом нижнем углу нажмите Отправить.

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

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

4. Сохраните изменения.

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

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

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

   2. Сохраните изменения.

6. Чтобы выйти на страницу Проекты, нажмите Завершить редактирование.

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