---
metadata:
  - name: generator
    content: Diplodoc Platform v5.44.0
alternate:
  - https://yandex.ru/support/tasks-requester/ru/tutorials/appendix-expanded-code.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/tasks-requester/ru/llms.txt

# Приложение: полный код всех проектов

<!-- source: ru/_includes/button-text.md -->
Напишите нам, если не нашли ответ в Справке. Вы можете приложить скриншоты или видео, чтобы ускорить помощь:
<!-- endsource: ru/_includes/button-text.md -->

<a class="support_btn msg" target="_blank" href="https://yandex.ru/chat?context=%7B%22entrypoint%22%3A%22%7B%5C%22page_name%5C%22%3A%5C%22tutorials-appendix-expanded-code%5C%22%2C%5C%22a_pageurl%5C%22%3A%5C%22https%3A%2F%2Fyandex.ru%2Fsupport%2Ftasks-requester%2Fru%2Ftutorials%2Fappendix-expanded-code%5C%22%7D%22%7D#/user/bb41c200-08e6-94b4-5c5b-e9694fa7b06e">Написать в чат</a>  <a class="support_btn" target="_blank" href="https://t.me/YandexTasksSupport_Bot">Написать в Telegram</a>

## Проект 1. Содержит ли фотография определенный объект? {#contain-item}

{% cut "Спецификации" %}

#|
||**Входные данные:**|**Выходные данные:**||
||
```json
{
  "image": {
    "type": "url",
    "hidden": false,
    "required": true
  }
}
```
|
```json
{
  "result": {
    "type": "string",
    "hidden": false,
    "required": true
  }
}
```
||
|#

{% endcut %}

{% cut "Блок HTML" %}

```html
{{img src=image width="100%" height="400px"}}
<div>Есть ли <b>обувь</b> на картинке?<div>
<div> {{field type="radio" name="result" value="OK" label="Да" hotkey="1"}}
{{field type="radio" name="result" value="BAD" label="Нет" hotkey="2"}}
{{field type="radio" name="result" value="404" label="Ошибка загрузки" hotkey="3"}}</div>
```

{% endcut %}

{% cut "Блок JavaScript" %}

```javascript
exports.Task = extend(TolokaHandlebarsTask, function(options) {
    TolokaHandlebarsTask.call(this, options);
}, {
    onRender: function() {
        // DOM element for task is formed (available via #getDOMElement())
    },
    onDestroy: function() {
        // Task is completed. Global resources can be released (if used)
    }
});

function extend(ParentClass, constructorFunction, prototypeHash) {
    constructorFunction = constructorFunction || function() {};
    prototypeHash = prototypeHash || {};
    if (ParentClass) {
        constructorFunction.prototype = Object.create(ParentClass.prototype);
    }
    for (var i in prototypeHash) {
        constructorFunction.prototype[i] = prototypeHash[i];
    }
    return constructorFunction;
}
```

{% endcut %}

## Проект 2. Найти похожий объект в интернет-магазине {#find-an-item-in-store}

{% cut "Спецификации" %}

#|
||**Входные данные:**|**Выходные данные:**||
||
```json
{
  "image": {
    "type": "url",
    "hidden": false,
    "required": true
  }
}
```
|
```json
{
  "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
  }
}
```
||
|#

{% endcut %}

{% cut "Блок HTML" %}

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

{% endcut %}

{% cut "Блок JavaScript" %}

```javascript
exports.Task = extend(TolokaHandlebarsTask, function(options) {
    TolokaHandlebarsTask.call(this, options);
}, {
    validate: function(solution) {

        if (!solution.output_values.found_image) {

            return {
                task_id: this.getTask().id,
                errors: {
                    '__TASK__': {
                        message: 'Upload photo or mark that there is no photo'
                    }
                }
            };
        } else {
            return TolokaHandlebarsTask.prototype.validate.apply(this, arguments);
        }
    },
    onRender: function() {
        // DOM element for task is formed (available via #getDOMElement())
    },
    onDestroy: function() {
        // Task is completed. Global resources can be released (if used)
    }
});

function extend(ParentClass, constructorFunction, prototypeHash) {
    constructorFunction = constructorFunction || function() {};
    prototypeHash = prototypeHash || {};
    if (ParentClass) {
        constructorFunction.prototype = Object.create(ParentClass.prototype);
    }
    for (var i in prototypeHash) {
        constructorFunction.prototype[i] = prototypeHash[i];
    }
    return constructorFunction;
}
```

{% endcut %}

{% cut "Блок CSS" %}

```css
.task {
    display: block;
    height: 500px;
    width: 800px;
}

.img {
    float: left;
    width: 50%;
}

.answers {
    float: left;
    width: 40%;
    margin: 5%;
}
```

{% endcut %}

## Проект 3. Похож ли найденный объект на исходный? {#item-look-similar}

{% cut "Спецификации" %}

#|
||**Входные данные:**|**Выходные данные:**||
||
```json
{
  "image": {
    "type": "url",
    "hidden": false,
    "required": true
  },
  "found_image": {
    "type": "url",
    "hidden": false,
    "required": true
  },
  "found_link": {
    "type": "url",
    "hidden": false,
    "required": true
  },
  "assignment_id": {
    "type": "string",
    "hidden": true,
    "required": true
  }
}
```
|
```json
{
  "result": {
    "type": "string",
    "hidden": false,
    "required": true
  }
}
```
||
|#

{% endcut %}

{% cut "Блок HTML" %}

```html
{{img src=image width="50%" height="400px"}}
{{img src=found_image width="50%" height="400px"}}
<p><b>Похожа ли обувь?</b></p>
<p>1. Сравните две пары обуви и определите, похожи ли они.</p>
<p>2. Убедитесь, что фотографии соответствуют товару из магазина.</p>
{{button label="Перейти на страницу товара" href=found_link action=true}}

<p>Обувь должна быть похожа по цвету, материалу, длине и стилю.</p>
{{field type="radio" name="result" value="Yes" label="Да"}}
{{field type="radio" name="result" value="No" label="Нет"}}
```

{% endcut %}

{% cut "Блок JavaScript" %}

```javascript
exports.Task = extend(TolokaHandlebarsTask, function(options) {
    TolokaHandlebarsTask.call(this, options);
}, {
    onRender: function() {
        // DOM element for task is formed (available via #getDOMElement())
    },
    onDestroy: function() {
        // Task is completed. Global resources can be released (if used)
    }
});

function extend(ParentClass, constructorFunction, prototypeHash) {
    constructorFunction = constructorFunction || function() {};
    prototypeHash = prototypeHash || {};
    if (ParentClass) {
        constructorFunction.prototype = Object.create(ParentClass.prototype);
    }
    for (var i in prototypeHash) {
        constructorFunction.prototype[i] = prototypeHash[i];
    }
    return constructorFunction;
}
```

{% endcut %}

{% cut "Блок CSS" %}

```css
.task {
    display: block;
}

.img {
    float: left;
    width: 50%;
}
```

{% endcut %}

## Проект 4. Какой из найденных объектов больше похож на исходный? {#item-more-similar}

{% cut "Спецификации" %}

#|
||**Входные данные:**|**Выходные данные:**||
||
```json
{
  "image": {
    "type": "url",
    "hidden": false,
    "required": true
  },
  "first_link": {
    "type": "url",
    "hidden": false,
    "required": true
  },
  "second_link": {
    "type": "url",
    "hidden": false,
    "required": true
  }
}
```
|
```json
{
  "result": {
    "type": "string",
    "hidden": false,
    "required": true
  }
}
```
||
|#

{% endcut %}

{% cut "Блок HTML" %}

```html
<div class="header">
    {{img src=image width="50%" height="400px"}}
    <p><b>Какая обувь больше похожа на исходную?</b></p>
    <p>Перейдите по ссылкам в интернет-магазин и определите, какая пара обуви больше похожа на исходную.</p>
    <div class="left caption">
        {{ button label="Первый товар" href=first_link size="L"}}
    </div>
    <div class="right caption">
        {{ button label="Второй товар" href=second_link size="L"}}
    </div>
</div>
<div class="footer">
    {{field type="radio" name="result" label="Первый товар" value=first hotkey="1"}}
    {{field type="radio" name="result" label="Второй товар" value=second hotkey="2"}}
</div>
```

{% endcut %}

{% cut "Блок JavaScript" %}

```javascript
exports.Task = extend(TolokaHandlebarsTask, function(options) {
    TolokaHandlebarsTask.call(this, options);
}, {
    getTemplateData: function() {
        var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments),
            input = this.getTask().input_values;
        var first_link = input.first_link;
        var second_link = input.second_link;
        var uploaded_link_first = '',
            uploaded_link_second = ''
        if (Math.floor(Math.random() * 2)) {
            uploaded_link_first = first_link
            uploaded_link_second = second_link
        } else {
            uploaded_link_first = second_link
            uploaded_link_second = first_link
        }
        data.uploaded_link_first = uploaded_link_first;
        data.uploaded_link_second = uploaded_link_second;
        data.result_first = uploaded_link_first;
        data.result_second = uploaded_link_second;

        return data;
    },

    onRender: function() {
        // DOM element for task is formed (available via #getDOMElement())
    },
    onDestroy: function() {
        // Task is completed. Global resources can be released (if used)
    }
});

function extend(ParentClass, constructorFunction, prototypeHash) {
    constructorFunction = constructorFunction || function() {};
    prototypeHash = prototypeHash || {};
    if (ParentClass) {
        constructorFunction.prototype = Object.create(ParentClass.prototype);
    }
    for (var i in prototypeHash) {
        constructorFunction.prototype[i] = prototypeHash[i];
    }
    return constructorFunction;
}
```

{% endcut %}

{% cut "Блок CSS" %}

```css
.task {
    display: block;
    text-align: center;
}

.header {
    overflow: hidden;
}

.left {
    float: left;
    text-align: left;
}

.right {
    float: right;
    text-align: right;
}

.caption {
    width: 50%;
}
```

{% endcut %}

<!-- source: ru/guide/_includes/contact-support.md -->
<!-- source: ru/_includes/btn-style.md -->

<!-- endsource: ru/_includes/btn-style.md -->

[Написать в службу поддержки](https://yandex.ru/support/tasks-requester/ru/guide/troubleshooting/support.md){.support_btn}
<!-- endsource: ru/guide/_includes/contact-support.md -->