# kak sdelat knopki v uroke

Источник: https://docs.emdesell.ru/kak-eto-nastroit-i-drugie-funkcii-shkoly/kak-sdelat-knopki-v-uroke

***

[Подключение Yandex SmartCaptcha](../../kak-eto-nastroit-i-drugie-funkcii-shkoly/podklyuchenie-yandex-smartcaptcha) <--- [Как сделать кнопки в уроке](../../kak-eto-nastroit-i-drugie-funkcii-shkoly/kak-sdelat-knopki-v-uroke) ---> [Как запустить несколько потоков обучения](../../kak-eto-nastroit-i-drugie-funkcii-shkoly/kak-zapustit-neskolko-potokov-obucheniya-v-odnom-kurse)

***

# Как сделать кнопки в уроке

***

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

***

## Делаем кнопку — «Скачать»

### 1. Загрузка картинки в школу

* Переходим в личный кабинет школы в раздел — **Файлы**.

![](https://docs.emdesell.ru/.assets/kak_sdelat_knopki_v_uroke/1.png)

* Далее, нажимаем кнопку — **Выбрать файлы для загрузки**.

![](https://docs.emdesell.ru/.assets/kak_sdelat_knopki_v_uroke/2.png)

* В появившемся окне нужно выбрать файл на своем устройстве (картинку в формате png или jpg) и нажать кнопку - **Открыть**.

![](https://docs.emdesell.ru/.assets/kak_sdelat_knopki_v_uroke/3.png)

Таким способом, загрузили картинку в раздел **Файлы**.

![](https://docs.emdesell.ru/.assets/kak_sdelat_knopki_v_uroke/4.png)

* Далее, нажимаем по картинке и открывается новое окно.

![](https://docs.emdesell.ru/.assets/kak_sdelat_knopki_v_uroke/5.png)

* В появившемся окне нажимаем кнопку **Скопировать.**

![](https://docs.emdesell.ru/.assets/kak_sdelat_knopki_v_uroke/6.png)

* Вставляем скопированную ссылку также в блокнот.

![](https://docs.emdesell.ru/.assets/kak_sdelat_knopki_v_uroke/7.png)

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

***

### 2. Делаем кнопку в уроке школы

* Переходим в урок школы в раздел **Уроки**, в редактирование урока.\
  (Или создаем новый урок по кнопке - Создать новый урок).

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(186%29.png" alt=""><figcaption></figcaption></figure>

* Переходим в **Содержимое урока**, выбираем в меню настроек иконку - **Вставить/редактировать изображение**.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(187%29.png" alt=""><figcaption></figcaption></figure>

* Копируем ссылку из блокнота на изображение (которую вставляли ранее в блокнот) и вставляем ссылку в поле **Источник** в окне вставки.

\[Или, копируем ссылку на изображение из раздела - **Файлы**].

И нажимаем кнопку — **Ок**.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(188%29.png" alt=""><figcaption></figcaption></figure>

* Таким способом, выполнили вставку картинки в содержимое урока школы.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(189%29.png" alt=""><figcaption></figcaption></figure>

* Если необходимо задать другой размер картинки, то это можно сделать путем "растягивания" или "сужения" картинки за углы нажатием левой кнопки мышки, и также, можно выровнять картинку — слева, по центру, по ширине, справа по нажатию соответствующей кнопки в меню настроек Содержимого урока.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/Knopkivuroke.gif" alt=""><figcaption></figcaption></figure>

* В данном примере выставим картинку по центру и увеличим размер.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(190%29.png" alt=""><figcaption></figcaption></figure>

* Далее, оставляем блок с картинкой выделенным и нажимаем на иконку в меню настроек Содержимого урока — **Вставить/редактировать ссылку**.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(191%29.png" alt=""><figcaption></figcaption></figure>

* В новом окне в поле ввода — **Адрес ссылки**, вставляем **ссылку на файл** из блокнота (которую сохраняли из сервиса Яндекс.Диска).\
  \
  В поле ввода — **Открывать ссылку**, выбираем опцию — **В** **новом окне**.\
  &#x20;\
  И нажимаем кнопку — **Ок**.&#x20;

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/2023-11-22_10-29-36.png" alt=""><figcaption></figcaption></figure>

* Далее, нажимаем кнопку — **Сохранить изменения**.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(194%29.png" alt=""><figcaption></figcaption></figure>

Таким образом, реализовали кнопку в уроке школы.

***

### 3. Проверяем работу кнопки

* Остаемся в этом же разделе редактирования урока и переходим по кнопке — **Посмотреть урок** в верхнем меню.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(184%29.png" alt=""><figcaption></figcaption></figure>

* При переходе в кабинет ученика проверяем сначала отображение кнопки в уроке.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(185%29.png" alt=""><figcaption></figcaption></figure>

* Далее, проверяем переход по кнопке, нажимая на нее и должен произойти переход в новую вкладку браузера для просмотра файла.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/Chek_list.gif" alt=""><figcaption></figcaption></figure>

Таким образом, сделали кнопку в виде картинки в уроке, при нажатии на которую, будет сделан переход на просмотр и скачивание файла.

***

## Делаем кнопку — «Купить»

### 1. Создаем платежную форму в разделе школы — Платежные формы

* Переходим в раздел школы — **Платежные формы** и создаем новую форму для покупки курса по кнопке — **Создать форму**.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(163%29.png" alt=""><figcaption></figcaption></figure>

* Пишем Название формы, Анкор, Описание, выбираем необходимый Доступ и длительность для доступа.&#x20;

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(164%29.png" alt=""><figcaption></figcaption></figure>

* Прописываем Цену.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(165%29.png" alt=""><figcaption></figcaption></figure>

* И нажимаем кнопку - **Создать**.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(166%29.png" alt=""><figcaption></figcaption></figure>

* Таким способом, создали платежную форму.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(167%29.png" alt=""><figcaption></figcaption></figure>

* Далее, переходим в раздел редактирования платежной формы по кнопке редактирования.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(168%29.png" alt=""><figcaption></figcaption></figure>

* И копируем ссылку в блокнот из раздела - Полная ссылка для оплаты.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(169%29.png" alt=""><figcaption></figcaption></figure>

* Вставили скопированную ссылку в блокнот.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(170%29.png" alt=""><figcaption></figcaption></figure>

***

### 2. Загружаем новую картинку «Купить» в раздел школы — Файлы

Делаем все по аналогии также, как и с предыдущей картинкой - "Скачать".

* Шаг 1 - переходим в раздел школы - **Файлы** и нажимаем кнопку - **Выбрать файлы для загрузки**.

![](https://docs.emdesell.ru/.assets/kak_sdelat_knopki_v_uroke/8.png)

* Шаг 2 - В открывшемся окне нужно выбрать файл на своем устройстве (картинку в формате png или jpg) и нажать кнопку - **Открыть**

![](https://docs.emdesell.ru/.assets/kak_sdelat_knopki_v_uroke/9.png)

* Шаг 3 - Нажимаем на картинку, путем нажатия левой кнопки мышки.

![](https://docs.emdesell.ru/.assets/kak_sdelat_knopki_v_uroke/10.png)

* Шаг 4 - Копируем url адреса картинки по кнопке копирования ссылки.

![](https://docs.emdesell.ru/.assets/kak_sdelat_knopki_v_uroke/11.png)

* Шаг 5 - Вставляем скопированную ссылку в блокнот.

![](https://docs.emdesell.ru/.assets/kak_sdelat_knopki_v_uroke/12.png)

***

### 3. Делаем кнопку в уроке

Далее, переходим в урок школы и создаем кнопку в уроке.&#x20;

Ссылкой для вставки в данном случае будет ссылка на платежную форму школы.

* Переходим в редактирование урока.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(177%29.png" alt=""><figcaption></figcaption></figure>

* В разделе **Содержимого урока** нажимаем на кнопку вставки изображения.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(178%29.png" alt=""><figcaption></figcaption></figure>

* И в открывшемся окне вставляем ссылку на картинку в поле - **Источник**.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(179%29.png" alt=""><figcaption></figcaption></figure>

* Нажимаем кнопку - **Ок**.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(180%29.png" alt=""><figcaption></figcaption></figure>

* Далее, выбираем кнопку - **Вставить/редактировать ссылку**.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(181%29.png" alt=""><figcaption></figcaption></figure>

* И вставляем ссылку на платежную форму в поле ввода **Адрес ссылки**.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(182%29.png" alt=""><figcaption></figcaption></figure>

Таким способом сделали кнопку — «Купить» с переходом на платежную форму, чтобы произвести оплату.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(183%29.png" alt=""><figcaption></figcaption></figure>

Происходит вот такой переход по кнопке - Купить.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/forma_1.gif" alt=""><figcaption></figcaption></figure>

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

***

[Подключение Yandex SmartCaptcha](../../kak-eto-nastroit-i-drugie-funkcii-shkoly/podklyuchenie-yandex-smartcaptcha) <--- [Как сделать кнопки в уроке](../../kak-eto-nastroit-i-drugie-funkcii-shkoly/kak-sdelat-knopki-v-uroke) ---> [Как запустить несколько потоков обучения](../../kak-eto-nastroit-i-drugie-funkcii-shkoly/kak-zapustit-neskolko-potokov-obucheniya-v-odnom-kurse)

***