# poleznaya funkciya dlya shkoly vstavka koda

Источник: https://docs.emdesell.ru/kak-eto-nastroit-i-drugie-funkcii-shkoly/poleznaya-funkciya-dlya-shkoly-vstavka-koda

***

[Как проверить статистику курса](../../kak-eto-nastroit-i-drugie-funkcii-shkoly/kak-proverit-statistiku-kursa-v-shkole-5-prostykh-shagov) <--- [Полезная функция - Вставка кода](../../kak-eto-nastroit-i-drugie-funkcii-shkoly/poleznaya-funkciya-dlya-shkoly-vstavka-koda) ---> [Как продлить доступ к курсу](../../kak-eto-nastroit-i-drugie-funkcii-shkoly/kak-prodlit-dostup-k-kursu-vsem-uchenikam-v-shkole)

***

# Полезная функция для школы - Вставка кода

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

Данная функция доступна только на тарифах Эксперт или WhiteLabel+Эксперт.

При добавлении сформированного кода (скрипта) позволяет изменять наименование текста в блоках или формах школы, изменять цвет кнопок или цвет текста, добавлять доп. элементы и так далее.

Рассмотрим несколько примеров, которые возможно применить в школе.

Для начала нужно удостовериться в том, что в школе подключен тариф Эксперт.

Для этого необходимо перейти в раздел школы - **О системе**.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/2.png)

И в открывшемся окне проверить наименование включенного тарифа.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/3.png)

Если выбран другой тариф, то поменять тариф можно в разделе - **Оплата и тарифы**.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/4.png)

Подраздел - **Смена тарифа**.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/5.png)

Далее, переходим в раздел школы - **Настройки**.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/6.png)

И переходим в подраздел **Вставка кода**.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/7.png)

И в данном разделе есть возможность вставки скрипта кода для изменения тех или иных параметров в кабинете школы.

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

***

## Пример 1

Необходимо поменять наименование слова «преподавателя» на слово «педагога» в разделе обращений вопросов - **Мои вопросы**, кабинета ученика школы.

Также, необходимо заменить слово «курсы» на другое слово «программы» в разделе кабинета ученика школы - **Мои доступы**.

Таким образом, был сформирован скрипт кода для вставки в раздел - Вставка собственного кода в конец тега \<BODY> для раздела ученика.

Пример такого кода:

\<script>

$(document).ready(function (){

$('.c-section\_\_title').each((i, el) => $(el).text($(el).text().replace('преподавателя','педагога')));

$('.c-menu\_\_item-link\[href$="tickets"]').each((i, el) => $(el).text($(el).text().replace('преподавателя','педагога')));

$('.c-breadcrumbs>span:not(.c-breadcrumbs\_\_sep)').each((i, el) => $(el).text($(el).text().replace('преподавателя','педагога')));

$('.c-subscribes\_\_subtitle').each((i, el) => $(el).text($(el).text().replace('курсы','программы')));

});

\</script>

Далее, скопировали этот код и вставили в соответствующий раздел в настройки школы.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/8.png)

Сохранили изменения в этом разделе настроек и проверили отображение этих разделов в кабинете школы для ученика.

Отображение слова - «педагога» в разделе - Мои вопросы.

<figure><img src="https://sun9-67.userapi.com/impg/gbiJSkyu5m076yTchHWO1c6EHyL-hf70ALSCbw/VRij0JUgA8s.jpg?size=807x372&#x26;quality=96&#x26;sign=803eba569a970e5a219557267f6b88fa&#x26;type=album" alt="Полезная функция для школы - Вставка кода, изображение №7"><figcaption></figcaption></figure>

Отображение слова - «программы» в разделе - Мои доступы.

<figure><img src="https://sun9-22.userapi.com/impg/gYAztRiWezobwxI9hOiAkJIuR_0_Wn7bise_mw/9DUbzx3kD1Y.jpg?size=807x529&#x26;quality=96&#x26;sign=c553cb38e13525f8691d817cf52750be&#x26;type=album" alt="Полезная функция для школы - Вставка кода, изображение №8"><figcaption></figcaption></figure>

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

***

## Пример 2

Задача - необходимо поменять текст на кнопке платежной формы с ценой - 0.

При формировании платежной формы в школе с ценой 0 на кнопке по умолчанию устанавливается текст - **Получить бесплатно**.

Сформируем такую платежную форму в школе.

### Создание платежной формы

Перейдем в раздел школы - Платежные формы.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/9.png)

И создадим новую форму по кнопке - Создать форму.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/10.png)

Вводим название формы, Вводим Анкор формы (любое сочетание англ. или лат. букв с цифрами или без), указываем Доступ и длительность доступа, и обязательно указываем цену - 0.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/11.png)

И нажимаем - Создать.

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

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/12.png)

Переходим по кнопке - глазик, чтобы проверить отображение формы.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/13.png)

И в отображении увидим значение текста кнопки - Получить бесплатно.

<figure><img src="https://sun9-78.userapi.com/impg/cniav-zI95oeDk1a2bb5tbuyPypn08AVdpTe2A/oAYw4p8t6f0.jpg?size=590x506&#x26;quality=96&#x26;sign=a47520e4cc61a0ce5e9f2b9cf43ba3e0&#x26;type=album" alt="Полезная функция для школы - Вставка кода, изображение №14"><figcaption></figcaption></figure>

Данное значение текста можно изменить при помощи формировании кода и вставки данного кода в раздел школы - Вставка кода.

### Формируем код

Код для вставки изменения текста в кнопке в платежной форме школы с ценой 0 - новый текст вместо текста - «получить бесплатно».

\<script type="text/javascript">

$(document).ready(function() {

$('.payment-button').text($('.payment-button').text().replace('Получить бесплатно', 'МОЙ ТЕКСТ'));

})

В пункте - Мой текст - необходимо написать тот текст, на который нужно заменить отображение в кнопке. Например, зададим текст - Забрать бонусные уроки.

Таким образом, изменяем в коде на данный текст:

\<script type="text/javascript">

$(document).ready(function() {

$('.payment-button').text($('.payment-button').text().replace('Получить бесплатно', 'Забрать бонусные уроки'));

})

### Вставка кода

Теперь, копируем сформированный код и вставляем в раздел школы - Настройки - Вставка кода - в последнее окно для вставки. И сохраняем изменения в данном разделе школы.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/14.png)

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

<figure><img src="https://sun9-8.userapi.com/impg/YJqVb6dRDLumijleFkfrVXqfrCmRMJTG60u93g/ogGUS3zZjJE.jpg?size=629x546&#x26;quality=96&#x26;sign=534d1a4e8697fca07ad0a5273c2052c1&#x26;type=album" alt="Полезная функция для школы - Вставка кода, изображение №16"><figcaption></figcaption></figure>

Код успешно сработал в данной платежной форме школы и изменил текст на кнопке.

***

## Пример 3

Рассмотрим пример того как поменять цвет кнопок уроков, которые недоступны ученику в школе.

Приведем пример таких кнопок в курсе у ученика в школе.

<figure><img src="https://sun9-60.userapi.com/impg/Rrghc53rx_4cKMgpkFBLNm7xxdog0iOn7zlckg/K2lyRzj_jKk.jpg?size=807x735&#x26;quality=96&#x26;sign=ecb6355ead1be8582b772b89d500cb34&#x26;type=album" alt="Полезная функция для школы - Вставка кода, изображение №17"><figcaption></figcaption></figure>

По умолчанию стоит серый цвет для всех недоступных элементов (курсы и уроки) для ученика в школе.

Формируем код вставки:

\<style>

.c-table-lessons\_\_item-btn > .c-btn.is-disabled {

background-color: red;}

Где red - это цвет кнопок для недоступных уроков в школе.

Копируем код и вставляем в раздел - Вставка кода, второе окно - Вставка собственного кода в конец тега \<BODY> для раздела ученика.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/15.png)

Сохраняем изменения и переходим в кабинет школы под аккаунтом ученика, у которого есть недоступные уроки в школе.

<figure><img src="https://sun9-76.userapi.com/impg/Uip7qMWGTE0feFdCyKFHQC7FgV39YQKaWUqirw/JpWJ6cQv270.jpg?size=807x645&#x26;quality=96&#x26;sign=15430cda5217bc9f9edc0dfe522e415a&#x26;type=album" alt="Полезная функция для школы - Вставка кода, изображение №19"><figcaption></figcaption></figure>

Кнопки поменяли цвет на заданный - красный.

Можно попробовать другой цвет, например светло-красный, или светло-коралловый. Точные названия цветов можно взять из сервиса - [Сервис кода цветов](https://colorscheme.ru/html-colors.html), но подойдут не все.

Вписываем в код новый цвет:

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/16.png)

И проверяем отображение страницы для ученика.

<figure><img src="https://sun9-75.userapi.com/impg/jieYRgGHWa0Tyhb5fzL_gKW8L4hvv8g8uXJiEA/EQuVAsRhAwM.jpg?size=807x419&#x26;quality=96&#x26;sign=31379f00ca704a5462abc7fc8679aa6a&#x26;type=album" alt="Полезная функция для школы - Вставка кода, изображение №21"><figcaption></figcaption></figure>

Также, можно добавить код для эффекта - изменение цвета при наведении на кнопку. Сделаем цвет - red (ярко-красный) при наведении на кнопки - Нет доступа.

Код для вставки:

\<style>

.c-table-lessons\_\_item-btn > .c-btn.is-disabled {

background-color: IndianRed;

}

.c-table-lessons\_\_item-btn > .c-btn.is-disabled:hover {

background-color: red;

}

.c-btn.is-disabled {

background-color: IndianRed;

}

.c-btn.is-disabled:hover {

background-color: red;

}

<figure><img src="https://sun9-8.userapi.com/impg/shYV_myIFdM6l6BGLQAYSyUqowA5Fr4OaT5ZtQ/owZS3ZgMjjY.jpg?size=566x399&#x26;quality=96&#x26;sign=7dbad94d609db7164e71a03391a9bc53&#x26;type=album" alt="Полезная функция для школы - Вставка кода, изображение №22"><figcaption></figcaption></figure>

Сохраняем изменения и проверяем отображение в школе для ученика.

***

## Пример 4

Рассмотрим следующий пример - как поменять цвет отображения аудио плеера в уроке школы.

Цвет отображения данного плеера для аудио по умолчанию - черный.

<figure><img src="https://sun9-74.userapi.com/impg/mL4Cyzum3itEGSMF8AAD_K3CjUERV2QxwSMAYg/Lpdur3xaeXI.jpg?size=576x259&#x26;quality=96&#x26;sign=679ff912ddb028a20bf20e08717101c0&#x26;type=album" alt="Полезная функция для школы - Вставка кода, изображение №23"><figcaption></figcaption></figure>

Формируем код для вставки:

\<style>

.video-js-audio {

background-color: #7B68EE;

}

.video-js-audio .vjs-control-bar {

background-color: #1E90FF;

}

В коде можно выставлять два значения цвет:

* В первом варианте - #7B68EE (фиолетовый) - выставили основной цвет плеера, без включения.
* Во втором варианте - #1E90FF (синий) - цвет после нажатия кнопки Play.

Копируем код и вставляем в раздел - Вставка кода, во второе окно.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/17.png)

Сохраняем изменения и проверяем отображение плеера в школе.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/18.png)

Нажимаем play на плеере и проверяем изменение на другой цвет.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/19.png)

Скрипт кода сработал корректно.

***

## Пример 5

Рассмотрим следующий пример - как поменять цвет полосы на слайдере на главной странице ученика.

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

Как это выглядит в стандартном виде по умолчанию в школе на главной странице (это страница, когда первый раз входите в раздел ученика школы):

<figure><img src="https://sun9-79.userapi.com/impg/rM1E-7f3XCChVvJ2gCVRbVAcraugFHSDGYO7XQ/1ldQBegf1D4.jpg?size=807x521&#x26;quality=96&#x26;sign=0aa790693add09b1a799d07ea0865009&#x26;type=album" alt="Полезная функция для школы - Вставка кода, изображение №25"><figcaption></figcaption></figure>

Формируем код для вставки, чтобы изменить цвет полосы и цвет шрифта в том числе:

\<style>

.c-slider-main .c-slider-main\_\_item-content {

background: #7B68EE;

color: #FFFF00;

}

\</style>

Подстановка кода цвета в первом варианте всего кода - это цвет полосы, а код цвета во втором варианте - это цвет шрифта на полосе.

Вставляем код в раздел Вставка кода - можно вставить в любой раздел для ученика - первое или второе поле вставки. Вставим в первое поле.

![](https://docs.emdesell.ru/.assets/kak-prodlit-dostup-k-kursu/20.png)

Сохраняем изменения и проверяем отображение в кабинет школы.

<figure><img src="https://sun9-17.userapi.com/impg/9dcV2sL_olReGA-uNsF5zm8brL9PqDVxGE9dWw/udtiqtyzr8c.jpg?size=807x418&#x26;quality=96&#x26;sign=b7fee189e74f10f4410d2a0f83de4081&#x26;type=album" alt="Полезная функция для школы - Вставка кода, изображение №27"><figcaption></figcaption></figure>

Все отображается корректно согласно заданным параметрам цвета.

***

Таким образом, с помощью опции **Вставка кода** можно вносить изменения в отображении форм, блоков, текстов кабинета школы.

***

[Как проверить статистику курса](../../kak-eto-nastroit-i-drugie-funkcii-shkoly/kak-proverit-statistiku-kursa-v-shkole-5-prostykh-shagov) <--- [Полезная функция - Вставка кода](../../kak-eto-nastroit-i-drugie-funkcii-shkoly/poleznaya-funkciya-dlya-shkoly-vstavka-koda) ---> [Как продлить доступ к курсу](../../kak-eto-nastroit-i-drugie-funkcii-shkoly/kak-prodlit-dostup-k-kursu-vsem-uchenikam-v-shkole)

***
