Максим

Автоматически записать данные в поле анкеты геткурс. На примере записи даты заполнения анкеты

2023-06-10T14:53:23.611Z

Шаг 1. Создаем поле анкеты с типом "Дата"

Переходим в раздел Анкеты. В созданной анкете создаем поле даты. Поле можно назвать "Дата заполнения анкеты". Сохраняем

Шаг 2. Добавляем блок анкеты на страницу. Присваиваем блоку класс

Нужно поставить класс блоку, например survey_block Это нужно для того, чтобы скрипт обратился к нужному нам блоку с анкетой

Шаг 3. Пишем js код

Добавляем блок JavaScript-код и вставляем туда код

JS v1.0

/**
 * Script Name: JS Запись данных в поле анкеты на Getcourse
 * Script description: Автоматически записать данные в поле анкеты геткурс c помощью js кода. На примере записи даты заполнения анкеты
 * Version: 1.0
 * Author: Максим Калмыков
 * Url: https://t.me/getcomponent
 */

$(() => {

  // Получаем дату для записи в поле анкеты
  const nowDate = new Date().toLocaleDateString('ru');

  setTimeout(() => {

    // Записываем данные в поле анкеты     
    // Вместо 1111111 - id поля анкеты
    putDataToSurveyInput(1111111, nowDate, '.survey_block'); // putDataToSurveyInput(ID_ПОЛЯ_АНКЕТЫ, ЧТО_ЗАПИСЫВАЕТСЯ_В_ПОЛЕ, 'СЕЛЕКТОР_БЛОКА_АНКЕТЫ');

  })


});


// Функция для записи данных в поле анкеты
function putDataToSurveyInput(surveyDataInputId, enteredData = "Данные в поле анкеты", surveyBlocksSelector = '.lt-form-survey') {

  // Получаем блок анкеты
  const surveyBlocks = $(surveyBlocksSelector);

  surveyBlocks.each((_, survey) => {
    // Получаем скрытый инпут в анкете
    const surveyJsonInput = $(survey).find('input[name="surveyData"]');

    // Получаем поле для записи данных
    const fieldForEntered = $(survey).find(`#field-input-${surveyDataInputId}`);

    // Если такие поля не найдены, то скрипт дальше не выполняем
    if (fieldForEntered.length === 0 || surveyJsonInput.length === 0) return;

    // Скрываем видимость блока поля анкеты
    fieldForEntered.parents('.field-wrapper').hide();

    // Получаем объект данных анкеты
    const surveyData = JSON.parse(surveyJsonInput.val());

    // Записываем в свойство объекта данные
    surveyData[surveyDataInputId] = enteredData;

    // В скрытый инпут записываем json с обновленном значением поля
    surveyJsonInput.val(JSON.stringify(surveyData));


    // Если это поле type="text" или тег "TEXTAREA" можно записать в них видимые данные (не обязательно)
    if (fieldForEntered.attr('type') === 'text' || fieldForEntered[0]?.tagName === 'TEXTAREA') {
      fieldForEntered.val(enteredData);
    }

  })


}

Нужно прописать в функции параметры

putDataToSurveyInput(ID_ПОЛЯ_АНКЕТЫ, ЧТО_ЗАПИСЫВАЕТСЯ_В_ПОЛЕ, 'СЕЛЕКТОР_БЛОКА_АНКЕТЫ');

СЕЛЕКТОР_БЛОКА_АНКЕТЫ - класс блока анкеты который мы задали (например survey_block или survey_block_1 или другой)

Как найти `ID_ПОЛЯ_АНКЕТЫ`?

1. Навести мышку на поле анкеты

2. Нажать ПКМ -> Просмотреть код

3. В html коде скопировать цифры из атрибута id="field-input-1673820"

Вставляем id в код

Шаг 4. Проверяем

После сохранения можно проверить в коде страницы или отправить анкету

*Скриптом это поле скрывается при просмотре страницы, на данном скриншоте оно показано с помощью инструментов разработчика в хроме

Результат после отправки анкеты

Готово

Доп. заметки по решению

1. В поле анкеты записать с помощью скрипта можно не только дату и не только в поле с типом "Дата"

2. Если скрипт будет использоваться часто в аккаунте, можно подключить функцию через тему в настройки аккаунта getcourse. Это позволит писать только вызов функции там где нужно (т.е. без самого тела функции, это позволит менять(если нужно будет) функцию из единого места - в теме)

3 В данном скрипте запись в скрытое поле происходит после загрузки страницы(+небольшой задержки). Можно записать и по триггеру нажатия на кнопку отправки анкеты (это если вдруг хочется заморочиться и учитывать ситуацию при которой пользователь зашел заполнять анкету в 23:59 а отправил на след. день и считать именно то число, когда нажал кнопку отправки )

Нужно задать класс для кнопки анкеты, например btn_send_survey

$(() => {

  // Получаем дату для записи в поле анкеты
  const nowDate = new Date().toLocaleDateString('ru');


  // Записать после загрузки страницы
  setTimeout(() => {
    putDataToSurveyInput(1673718, nowDate, '.survey_block');
  })



  // Записать при клике на кнопку 
  $('.btn_send_survey .btn').on('click', function (e) {
    e.preventDefault();

    // Записываем данные
    putDataToSurveyInput(1673718, nowDate, '.survey_block');

    // затем отправляем форму
    $(this).parents('form').submit()
  });

});

// ...

Телеграм-канал: https://t.me/getcomponent

Оформить модуль, в котором уроки недоступны + вывести дату выхода первого урока. JS код для списка тренингов в getcourse

2023-05-11T17:12:10.368Z

JS-код:

/**
 * Script Name: Добавить класс модулю, в  котором уроки недоступны + вывести дату выхода первого урока. JS код для списка тренингов в getcourse 
 * Version: 1.0
 * Author: Максим Калмыков
 * Url: https://t.me/getcomponent
 */


$(function () {
  // Название класса для модуля в котором недоступные уроки
  const notReachedClassName = 'not_reached';

  // Получить модули
  const modules = $('.stream-table > tbody > tr');

  if (modules.length === 0) return;

  modules.each(function (_, tr) {

    const link = $(tr).find('a').attr("href");

    $.get(link, function (data) {

      const pageDom = $('<div></div>').html(data);

      const lessons = pageDom.find('.lesson-list li:not(.lesson-is-hidden)');

      // Вывести дату первого урока
      showFirstLessonStart(lessons, tr);

      // Присвоить класс модулю, если нет доступных уроков внутри
      checkLessonsNotReached(lessons, tr);
    });

  });


  function checkLessonsNotReached(lessons, tr) {

    if (lessons.length === 0) return;

    let isNotReached = true;

    for (let i = 0; i < lessons.length; i++) {
      if (!$(lessons[i]).hasClass("user-state-not_reached")) {
        isNotReached = false;
        break;
      }
    }

    if (isNotReached) {
      $(tr).addClass(notReachedClassName)
    }
  }


  function showFirstLessonStart(lessons, tr) {

    const dateStartEl = lessons.eq(0).find('.has-start-at');

    if (dateStartEl.length === 0) return;

    $(tr).find('a').prepend(dateStartEl);

  }

})

*JS код вставлять в javascript блок или подключать через тему

*Данная версия скрипта(v 1.0) проверяет список уроков только на первом уровне вложенности (т.е. подмодули модуля скрипт не проверяет).

В результате работы скрипта:

Присвоился класс для модулей, в которых уроки недоступны
Добавлена дата выхода первого урока в списке (ищется именно первый урок в списке и в нем элемент даты)

Можно использовать добавленный класс not_reached чтобы обратиться к этим модулям для стилизации

Простой пример CSS кода для списка модулей

.xdget-trainingList .stream-table,
.xdget-trainingList .stream-table tbody,
.xdget-trainingList .stream-table tr,
.xdget-trainingList .stream-table tr td {
  display: block;
  margin: 0;
}


.xdget-trainingList .stream-table tr {
  margin-bottom: 10px;
  border: 1px solid #cccccc;
  border-radius: 10px;
}

.xdget-trainingList .stream-table tr.not_reached {
  opacity: 0.6;
  background-color: #f7f7f7;

}

.xdget-trainingList .stream-table tr td {
  height: auto;
  padding: 0;

}

.xdget-trainingList .stream-table tr td:hover {
  background-color: transparent;
}

.xdget-trainingList .stream-table tr a {
  padding: 10px 10px 10px 20px;
}

.xdget-trainingList .stream-table tr.not_reached a {
  cursor: default;
}

.xdget-trainingList .stream-table tr .has-start-at {
  font-size: 12px;
}


.xdget-trainingList .stream-table a>div>b {
  display: none;
}

Телеграм-канал: https://t.me/getcomponent

Кнопка навигации «Прокрутить наверх». Код для getcourse

2023-03-18T15:35:22.262Z

Что делает код:

Показывает кнопку при определенном значении прокрутки страницы. При нажатии на эту кнопку происходит плавный скролл до начала страницы.

Можно применять на длинных страницах или уроках с множеством блоков контента в визуальном конструкторе геткурса

CSS

/* Скрыть виджет обратной связи */
.talks-widget-button {
  display: none;
}

#button_to_top {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 50px;
  position: fixed;
  bottom: 20px;
  right: 20px;

  /* Иконка стрелки вверх */
  background-image: url("https://fs.getcourse.ru/fileservice/file/download/a/629406/sc/385/h/b5328a61e88bd4e767caaa1e5baf96ca.svg");

  /* Цвет фона кнопки */
  background-color: #ffffff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.18);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s;
}


#button_to_top:hover {
  cursor: pointer;
  transition: all 0.4s;
}

#button_to_top.btn_show {
  opacity: 0.85;
  visibility: visible;
}

#button_to_top.btn_show:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  #button_to_top {
    margin: 5px;
    width: 40px;
    height: 40px;
    bottom: 10px;
    right: 0;
    background-size: 15px;
  }

  .with-left-menu #button_to_top {
    bottom: 50px;
  }

}

HTML в Блок: HTML

<div id="button_to_top">
</div>

JS в Блок: JavaScript

$(function() {
    /* Сколько нужно проскроллить чтобы появилась кнопка */
    const scroll_value = 600;
    
    /* За сколько миллисекунд должна быть прокрутка до верха страницы */
    const ms = 300;
    
    /* Получаем кнопку */
    const btn = $('#button_to_top');
    

      if ($(window).scrollTop() > scroll_value) {
        btn.addClass('btn_show');
      } else {
        btn.removeClass('btn_show');
      }
    
    
    $(window).scroll(function() {
      if ($(window).scrollTop() > scroll_value) {
        btn.addClass('btn_show');
      } else {
        btn.removeClass('btn_show');
      }
    });
    
    btn.on('click', function(e) {
      e.preventDefault();
      $('html, body').animate({scrollTop:0}, ms);
    });
})

Телеграм-канал: https://t.me/getcomponent

Блок "Аккордеон" на Getcourse

2023-03-06T15:10:01.827Z

Аккордеон-блок на геткурсе можно применить для описания популярных вопросов и ответов, мини-инструкций и т.п.

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

Данное решение предназначено для использования в визуальном конструкторе на платформе getcourse

Как выглядит блок-аккордеон на геткурсе

Шаг 1. Добавляем CSS блок

CSS-код:

/* Подключение шрифта  Montserrat 400;600 */
@import url('https://fonts.googleapis.com/css2?family=El+Messiri&family=Montserrat:wght@400;600&display=swap');

:root {

  /* Цвет фона плашки */
  --ac_bgColor: #ffffff;

  /* Цвет заголовка */
  --ac_titleColor: #333333;

  /* Цвет текста */
  --ac_textColor: #777777;

  /* Цвет плюса */
  --ac_accentColor: #f9ba49;

  /* Цвет кружочка плюса */
  --ac_lightColor: #fff1d7;


  --fontM: "Montserrat", "proxima-nova", sans-serif;
}


.accordeon_block p {
  line-height: 1.4;
}

.accordeon_block p,
.accordeon_block div,
.accordeon_block .btn {
  font-family: var(--fontM);
}



.accordeon_item {
  margin-bottom: 10px;
  border: 1px solid #ededed;
  border-radius: 5px;
  background-color: var(--ac_bgColor);
  transition: box-shadow 0.4s ease;
}

.accordeon_item:hover {
  box-shadow: 0 15px 25px 0 rgb(0 0 0 / 4%);
  transition: box-shadow 0.4s ease;
}


/* Заголовок элемента аккордена */
.accordeon_item>.f-header {
  padding: 20px 60px 20px 15px;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}

.accordeon_item>.f-header p {
  margin: 0;
  font-size: 20px;
  user-select: none;
  color: var(--ac_titleColor);
}

/* Оформление плюса(+) */
.accordeon_item>.f-header::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  line-height: 1;
  font-size: 36px;
  font-weight: 400;
  font-family: "Arial", sans-serif;
  color: var(--ac_accentColor);
  transition: all .4s ease;
}

/* При наведнии на заголовок аккордеона */
.accordeon_item>.f-header:hover:after {
  background-color: var(--ac_lightColor);
  transition: all .4s ease;
}

/* При активном аккордеоне поворачиваем плюс */
.accordeon_item.active>.f-header:after {
  background-color: var(--ac_lightColor);
  transform: translateY(-50%) rotate(-45deg);
}

.accordeon_item.active>.f-header:hover:after {
  filter: brightness(101%);
}


/* Контейнер контента */
.accordeon_block .ac_content_wrapper {
  padding: 5px 15px 15px 15px;
}

/* Текст контента */
.accordeon_block .f-text {
  font-size: 16px;
  font-weight: 400;
  color: var(--ac_textColor);
}




/* Адапатация под моб. экраны */
@media (max-width: 640px) {

  .accordeon_item>.f-header {
    padding: 15px 50px 15px 15px;
  }

  .accordeon_item>.f-header p {
    font-size: 16px;
  }

  .accordeon_block .f-text {
    font-size: 14px;
  }

  .accordeon_item>.f-header::after {
    right: 5px;
    width: 40px;
    height: 40px;
    font-size: 32px;
  }

}

Шаг 2. Добавляем блоки контента и проставляем классы

Добавляем блок "Заголовок и текст"

Ставим этому блоку в настройках класс accordeon_block

Для заголовка(который будет заголовком вкладки элемента аккордеона) ставим класс accordeon_item

Контентные элементы ниже заголовка будут относиться к этому заголовку до следующего заголовка с классом accordeon_item

Шаг 3. Добавляем блок с js-кодом

JS-код:

/**
 * Script Name: Активация аккордеона в визуальном редакторе Getcourse
 * Version: 1.01
 * Author: Максим Калмыков
 * Url: https://t.me/getcomponent
 */

$(function () {


  accordeonInit({
    accordeonBlockSelector: '.accordeon_block', // Класс блока с аккордеоном
    isBind: false, // Активна только одна вкладка(на которой был клик) (true - да / false - нет)
    showFirstItem: true // Открыть первую вкладку (true - да / false - нет)
  });


});


function accordeonInit({ accordeonBlockSelector = '.accordeon_block', isBind = false, showFirstItem = false }) {

  const acItems = $(accordeonBlockSelector).find('.accordeon_item');

  if (acItems.length === 0) return;

  acItems.append('<div class="ac_content_wrapper" style="display: none; "></div>');

  acItems.each((_, item) => {

    $(item).find(".ac_content_wrapper").append($(item).nextUntil(".accordeon_item").not("style"));

    $(item).find(".f-header").on("click", function () {

      const acItem = $(this).parent();
      const acItemContent = $(this).nextAll('.ac_content_wrapper');


      console.log('acItemContent', acItemContent)
      if (isBind) {
        acItem.toggleClass('active').siblings().removeClass('active');

        acItem.parent().find('.ac_content_wrapper').slideUp();

        if (acItemContent.is(":hidden")) {
          acItemContent.slideDown();
        }

        return;
      }

      acItem.toggleClass('active');

      if (acItemContent.is(":hidden")) {
        acItemContent.slideDown();
      } else {
        acItemContent.slideUp();
      }

    });
  });


  if (showFirstItem) {

    const firstAcItem = $(`${accordeonBlockSelector} .accordeon_item`).eq(0);

    firstAcItem.addClass('active');
    firstAcItem.find(".ac_content_wrapper").show();
  }

}

В этом месте кода мы активируем аккордеон и можем включить некоторые настройки:

isBInd - при нажатию на одну вкладку, она открывается а остальные закрываются (true - сделать, false - не делать)
showFirstItem - Открыть первую вкладку (true - сделать, false - не делать)

Готово

Телеграм-канал: https://t.me/getcomponent

Youtube: https://www.youtube.com/channel/UCAVwlN_NSAEFR4mJRpzyvCg

VK: https://vk.com/getcomponent

Нельзяграм: @maximilia_n

Меняем текст в блоке продления покупки в тренингах на геткурсе с помощью JS

2023-02-07T22:08:54.304Z

JS-код:

/*
  * Name: Функция для замены текста в блоке продления покупки в тренингах на геткурсе
  * Version: 1.0
*/



// Объявление функции которая заменяет текст в блоке продления продукта в гк 
function changeTextOnProductBlock(productBlockSelector = '.xdget-productTiming', replaceTextArr = ['Поддержка доступна', "Поддержка", 'Поддержка закончилась']) {

  if (!Array.isArray(replaceTextArr)) return;

  const productInfo = document.querySelector(`${productBlockSelector} .user-product-block`);

  if (!productInfo) return;

  const notAccessEl = productInfo.querySelector("b");

  if (notAccessEl && productInfo.childNodes[0].textContent.trim() == '') {
    notAccessEl.textContent = notAccessEl.textContent.replace('Доступ к тренингу закончился', replaceTextArr[2]);
    return;
  }
  const newTextProduct = productInfo.childNodes[0].textContent
    .replace('Тренинг доступен', replaceTextArr[0])
    .replace("Доступ к тренингу", replaceTextArr[1]);
  productInfo.childNodes[0].textContent = newTextProduct;


}


$(function () {

  // Примеры вызова функции для заменты текста в блоке продления покупки


  changeTextOnProductBlock('.product_1', ['Курс доступен', 'Доступ к курсу', 'Доступ к курсу закончился']);

  changeTextOnProductBlock('.product_2', ['Поддержка доступна', 'Поддержка', 'Поддержка закончилась']);

});

*Перед тем как выполнить скрипт блокам были заданы классы, в данном примере это product_1 и product_2

В вызове функции можно написать свои строки текста

changeTextOnProductBlock('.product_3', ['База знаний доступна', 'Доступ к базе знаний', 'Доступ к базе знаний закончился']);

Вариант CSS-стилизации:

/* Блок продления продукта */
.xdget-productTiming {
  margin-bottom: 20px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0 0 0 / 0.15);
  background-color: #7367F0;
  background-image: linear-gradient(225deg, rgba(206, 159, 252, 1) -20%, rgba(115, 103, 240, 1) 90%);
}


.xdget-productTiming .user-product-block>.text-muted {
  margin-top: 2px;
  font-weight: 400;
  color: #ffffff;
}


/* Продлить доступ */
.user-product-block a.dotted-link {
  margin-top: 4px;
  display: inline-block;
  font-weight: 400;
  color: #ffffff;
  border-color: #ffffff;
  transition: all .4s ease;
}

.user-product-block a.dotted-link:hover {
  color: #FAC9B4;
  border-color: #FAC9B4;
  transition: all .4s ease;
}



/* Кнопка "Продлить" */
.xdget-productTiming .user-product-block .prolong-offers button {
  border: 0;
  border-radius: 30px;
  font-size: 16px;
  padding: 8px 60px;
  min-height: 50px;
  background-color: #2b2e43;
  transition: filter .4s ease;
}

.xdget-productTiming .user-product-block .prolong-offers button:hover {
  filter: brightness(120%);
  transition: filter .4s ease;
}

.xdget-productTiming .user-product-block>b {
  color: #FAC9B4 !important;
}

/* </ Блок продления продукта */

Результат:

* Возможность продлить доступ появляется если это предварительно настроено в настройках продукта

Telegram: https://t.me/getcomponent

JS скрипт для файлового хранилища Getcourse

2023-01-27T16:33:07.750Z

Пример работы скрипта

Оглавление

Что делает скрипт

1. В боковой панели в подменю добавляет к ссылке на файловое хранилище параметры, при которых страница файлового хранилища будет открываться с сортировкой файлов от новым к старым (новые файлы сверху).

2. Добавляет кнопки быстрого переключения "Сначала новые файлы" "Сначала старые файлы"

3. Добавляет превью файлов(в основных популярных форматах):

Изображения
Видео
Аудио

4. Для некоторых документов с популярным форматом (docx, xlsx, pdf) добавляет иконки

5. Добавляет кнопку копирования ссылки на файл (ссылка берется из страницы файла в поле где рекомендуемая для размещения ссылка)

6. Добавляет иконку при загрузке файла в хранилище. При клике на иконку происходит копирование ссылки на файл

JS-код

/**
 * Script Name: JS-скрипт для файлового хранилища Getcourse
 * Version: 1.0
 * Author: Максим Калмыков
 * Url: https://t.me/getcomponent
 */


$(function () {

    if (!window.userInfo.isAdmin) return;

    (function () {

        if (!window.gcAccountUserMenu) return;

        const profile = window.gcAccountUserMenu.items.find(menuItem => menuItem.id === 'profile');
        if (!profile) return;

        const fileService = profile.subitems.find(profileItem => profileItem.id === 'fileserviceAccountStat');
        if (fileService) fileService.url += '?sort=-created_at';

    })();

    if (location.pathname.indexOf("/fileservice/control/account/storage") === -1) return;

    $('.standard-page-content > .btn-group').prepend("<p><strong>Показать сначала:</strong></p><a href='/fileservice/control/account/storage?sort=-created_at' class='btn btn-default sort_new'>Новые файлы</a><a href='/fileservice/control/account/storage' class='btn btn-default sort_old'>Старые файлы</a>");

    const archiveImage = "https://fs.getcourse.ru/fileservice/file/download/a/556025/sc/469/h/389a4619093e40c4ae3576d7b6340425.png";

    const docsInfo = {

        pdf: {
            icon: "https://fs.getcourse.ru/fileservice/file/download/a/556025/sc/206/h/d8f3c98573c09bc7e43750dc7ad51d54.png",
            exts: ['pdf']
        },

        sheet: {
            icon: "https://fs.getcourse.ru/fileservice/file/download/a/556025/sc/163/h/39f56b599f06e954a521c515bf3df8c3.png",
            exts: ['xlsx', 'csv']
        },

        doc: {
            icon: "https://fs.getcourse.ru/fileservice/file/download/a/556025/sc/245/h/a58bcff963c7d8ad326014b6328bfb64.png",
            exts: ['docx', 'doc']
        },

        js: {
            icon: "https://fs.getcourse.ru/fileservice/file/download/a/556025/sc/111/h/d1093f7c9ea35d210357795a495e28ee.png",
            exts: ['js']
        },

        css: {
            icon: "https://fs.getcourse.ru/fileservice/file/download/a/556025/sc/294/h/7d9010eb630eeaf84fd3c88aaa92791e.png",
            exts: ['css']
        },

        eml: {
            icon: "https://fs.getcourse.ru/fileservice/file/download/a/602055/sc/204/h/7d037cda84be880d8964cac137f3c663.png",
            exts: ['eml']
        }
    };


    $('#files .gc-file-link').each((_, row) => {

        const $fileShowContainer = $(row).find('td[data-col-seq="2"]'),
            fileNameStr = $fileShowContainer.text().trim(),
            fileShowItemLink = $fileShowContainer.find('a').attr('href'),
            fileTypeText = $(row).find('td[data-col-seq="3"]').text(),
            pageFileLink = $(row).find('td[data-col-seq="1"] > a').attr('href');

        if (fileTypeText == 'изображение' || fileTypeText == 'image' || fileTypeText == 'fotografías') {
            $fileShowContainer.append(`<div><img height="200" src="${fileShowItemLink}"></div>`);
        } else if (fileTypeText == 'видео' || fileTypeText == 'video' || fileTypeText == 'vídeos') {
            $fileShowContainer.append(`
    <div>
        <video width="100%" controls="controls" src="${fileShowItemLink}"></video>
    </div>`);
        } else if (fileTypeText == 'аудио' || fileTypeText == 'audio' || fileTypeText == 'audios') {
            $fileShowContainer.append(`
    <div>
        <audio src="${fileShowItemLink}" controls="controls"></audio>
    </div>`);
        } else if (fileTypeText == 'архив' || fileTypeText == 'archive' || fileTypeText == 'archivos') {
            insertBadge($fileShowContainer, archiveImage);
        } else if (fileTypeText == 'документ' || fileTypeText == 'document' || fileTypeText == 'documentos') {
            insertBadge($fileShowContainer, getDocIcon(fileNameStr, docsInfo));
        }

        getFileLink(pageFileLink, $fileShowContainer);

    });


    function insertBadge($container, badge) {

        if (!badge) return;

        $container.prepend(`
            <div style="display: inline-block; width: 40px; height: 40px; margin: 0 10px 5px 0;">
                <img src="${badge}" width="100%">
            </div>`);
    }

    function getDocIcon(fileName, docsInfo) {

        const extension = fileName.match(/\.([^.]+)$|$/)[1];

        if (!extension) return false;

        for (key in docsInfo) {
            if (docsInfo[key]['exts'].includes(extension)) {
                return docsInfo[key]['icon'];
            }
        }

        return false;

    }

    function getFileLink(fileToLink, $container) {

        $.get(fileToLink, function (data) {

            const htmlPage = $('<div></div>').html(data);

            $container.append(htmlPage.find('.col-md-10 > input[type="text"]').css({ "display": "block", "height": 0, "padding": 0, "opacity": 0, "border": 0 }));
            $container.append("<button class='btn btn-success btn_copy' style='display:block; margin-top:5px;'><i class='fa fa-copy'></i> Копировать ссылку</button>");


            $container.on('click', (e) => {
                if (e.target && ($(e.target).hasClass('btn_copy') || $(e.target).hasClass('form-control'))) {


                    $(e.target).parent().find('input')[0].select();
                    document.execCommand('copy');


                    $(e.target).parent().find('.btn_copy').html('<i class="fa fa-check-square" aria-hidden="true"></i> Скопированна').addClass('btn-info');

                }
            });
        });

    }

    $('.uploadify-container').data('uploadifive').settings.onUploadComplete = function (e, fileHashNameStr) {

        const $item = e.queueItem;
        const link = `/fileservice/control/account/file-by-hash?hash=${fileHashNameStr}&from=storage`;

        $item.find('.fileinfo').html(` <a target="_blank" href="${link}">${fileHashNameStr}</a> `);

        $.get(link, (data) => {


            const pageHtml = $('<div></div>').html(data),

                fileLinkStr = pageHtml.find('input.form-control[type="text"]').val(),
                inputEl = document.createElement('input'),
                spanEl = document.createElement('span');

            $item.find('span.filename').before(spanEl);
            $item.find('span.filename').after(inputEl);
            $(inputEl).attr('type', 'text').val(fileLinkStr).css({ "display": "block", "height": 0, "padding": 0, "opacity": 0, "border": 0 });


            $(spanEl).html('<i class="fa fa-copy"></i> ')
                .css({ "cursor": "pointer", "font-size": "20px" }).on('click', function () {
                    inputEl.select();
                    document.execCommand('copy');
                    $(spanEl).css('color', "#45dc4b");
                });
        });

    }


});

Как вставить код на геткурс

Способ 1. Через подключение темы в настройках аккаунта

При таком способе скрипт будет выполняться для всех админов в аккаунте

Последовательность:

Добавить тему

Вставить код во вкладке JS

Сохранить

Скопировать ссылку на js файл

Подключить в настройки аккаунта в скрипты для BODY

<!-- Скрипт для файлового хранилища -->
<script src="ССЫЛКА_НА_ТЕМУ"></script>

Способ 2 Подключить файл js из хранилища

Подключить в настройки аккаунта в скрипты для BODY

<!-- Скрипт для файлового хранилища v1.0 -->
<script src="https://fs.getcourse.ru/fileservice/file/download/a/608456/sc/251/h/9690e8beee22036e4f2a9eaf95dc7122.js"></script>

Файл закружен в хранилище геткурса, также можно загрузить js файл в свое хранилище на аккаунте и вставить ссылку в атрибут src

Скачать файл можно по ссылке:

https://drive.google.com/file/d/1mRQr8aczrmGEZ_1X8sJSTSjY1U57-m7k/view?usp=share_link

Способ 3. Подключить скрипт локально в своем браузере

При подключении скрипта локально скрипт будет выполняться только у вас в браузере

Например, можно использовать расширение для хрома User JavaScript and CSS

https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

Добавляем скрипт в расширение в поле JS

Включаем

Обновляем страницу и смотрим результат

Телеграм-канал: https://t.me/getcomponent

Youtube: https://www.youtube.com/channel/UCAVwlN_NSAEFR4mJRpzyvCg

VK: https://vk.com/getcomponent

Нельзяграм: @maximilia_n

Отправляем задание урока после заполнения анкеты. Скрипт для getcourse

2022-11-24T11:09:47.395Z

Изначально понадобится сделать:

Урок с заданием (стандартное поле задания и автопринятие ответа)
Блок с анкетой в уроке

Шаг 1. Подключаем JS код на страницу урока

JS-код v1.1:

// ОТПРАВЛЯЕМ ДЗ ЧЕРЕЗ СКРИПТ
function sendLessonAnswer(answerText = "Анкета отправлена") {

  const link = window.location.href;

  // Проверка на нахождение внутри урока
  if (link.indexOf("teach/control/lesson/") === -1) return;


  // Проверка на наличие блока с заданием ( если находимся в веб-браузере )
  if (link.indexOf("teach/control/lesson/view") !== -1 && $("#LessonAnswer_answer_text").length == 0) return;


  // Проверка на наличие блока с вкладкой "Задание" ( если находимся в приложении )
  if (link.indexOf("teach/control/lesson/webview") !== -1 && $("nav.mode-selector a[data-mode='mission']").length == 0) return;

  // .. если проверки пройдены

  // Формируем параметры запроса
  const dataPost = { "LessonAnswer[answer_text]": answerText, "send-answer": "" };

  // Делаем запрос (Отправка ДЗ)
  $.post(link, dataPost);

}

Код можно вставить в JS-блок на странице урока либо подключить через тему (рекомендуется).

<script src="ССЫЛКА_НА_ТЕМУ"></script>

Пример

Подключение темы в блоке HTML:

<!--[JS] Автоматически отправить ответ в уроке -->
<script src="/pl/cms/layout/js?id=21248&hash=a7dc761c666dd70b4aba1e9329b518c2&bundle=1"></script>

* в src ставить ссылку без домена на вашу тему

Если уроков с отправкой задания после заполнения анкеты будет много, то можно подключить тему с нашей функцией глобально в Настройки аккаунта --> Счетчики и прочие скрипты для BODY (применяются в течение 10 минут )

Шаг 2. Вызываем скрипт после отправки анкеты

В обработчике анкеты выбираем "Произвольное действие" → "Вызов Javascript"

В поле "Javascript" пишем вызов функцию

sendLessonAnswer();

Опционально:

sendLessonAnswer("Анкета заполнена и отправлена");

В параметры функции можно передать строку, эта строка будет в ответе к заданию. Если не передавать строку, то по умолчанию ответ в уроке будет "Анкета отправлена" (в функции можно изменить ответ по умолчанию)

Если на данном этапе протестировать, то после заполнения анкеты:

анкета и задание отправляется
страница перезагружаться
ответ принят автоматически

Само поле для ответа нужно скрыть, чтобы ученики не отправляли ответы без заполнения анкеты. Это можно сделать с помощью CSS.

Шаг 3. Скрываем блок ответа

Вариант 1

В редактировании урока блоку с заданием прописываем класс view-collapsed Этот класс скроет видимость всего блока с заданием при просмотре

Вариант 2

Для показа текста задания и блока статуса задания после отправки

Написать текст задания, например: Заполните и отправьте анкету

В подробные настройки блока "Задание":

CSS

/* Скрываем поля ответа в уроке */
.lesson-send-answer-block {
    display: none;
}

или подключить этот стиль через тему

@import url("/pl/cms/layout/css?id=21248&hash=8ac884e322f5a4e345f338722db1cd29&bundle=1");

Показываем ученику "Задание принято"

Доп. информация:

Версия JS 1.1
Работает в приложении Getcourse

Анкету можно скрыть по сегменту. В сегмент включить тех, кто выполнил урок("Ответ принят")

Готово ✨

Обязательно все внимательно проверьте и протестируйте

Телеграм-канал: https://t.me/getcomponent

Youtube: https://www.youtube.com/channel/UCAVwlN_NSAEFR4mJRpzyvCg

VK: https://vk.com/getcomponent

Нельзяграм: @maximilia_n

Делаем плеер с таймкодами на getcourse с помощью плагина Plyr и скриптов

2022-11-14T20:36:59.256Z

Плеер с таймкодами делаем используя "Визуальный конструктор" геткурса т.е. можно разместить видео в уроках или на страницах.

Что мы будем использовать:

Визуальный конструктор геткурса(можно вставлять плеер на страницы и в уроки)
Plyr плеер (Ссылка на документацию: https://github.com/sampotts/plyr )
HTML(для вставки видео), CSS и JS(в геткурсе по умолчанию подключен JQuery)

Шаг 1. Подключаем Plyr

HTML:

<!-- plyr 3.7.2 -->
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.2/plyr.css" />
<script src="https://cdn.plyr.io/3.7.2/plyr.polyfilled.js"></script>

Подключение Plyr на Getcourse страницу, варианты:

1. В поле страницы Теги в разделе HEAD

Пример вставки кода для подключиения Plyr в "Теги в разделе HEAD"

ИЛИ

2. В HTML блок наверху страницы

Пример вставки кода для подключиения Plyr в "HTML блок"

Шаг 2. Вставляем видео в HTML

<video id="player" playsinline controls>
  <source src="https://fs.getcourse.ru/fileservice/file/download/a/581768/sc/356/h/ed8c52d4e70d8cc5da72ac875e88b65f.mp4" type="video/mp4" />
</video>

*где src="ССЫЛКА_НА_ВИДЕО_ИЗ_ГЕТКУРС_ХРАНИЛИЩА"

id="player" - player это идентификатор, по которому мы скриптом обращаемся к видео

Шаг 3. Вставляем JS-код

Для того, чтобы на данном этапе убедиться что мы все делаем правильно, вставляем в JS-блок код

const player = new Plyr('#player');

*Javascript-блок должен находиться ниже чем блок с видео

Сохраняем -> Проверяем

Если в нашем видео интерфейс плеера Plyr, значит мы подключили и инициализировали его правильно.

Очищаем JS поле, вместо него ставим

JS-код:

/*  
@name timecodesForPlyrOnGetcourse  
@author Maksim Kalmykov  
@version 1.0
*/

$(function () {


  const timecodesArr = [
    {
      time: "00:06",
      label: "Чебурашка начинает петь"
    },

    {
      time: "00:25",
      label: "Чебурашка летит в пузыре"
    },
    {
      time: "00:40",
      label: "Чебурашка крутит юлу"
    },
    {
      time: "01:21",
      label: "Чебурашка и Гена играют в шахматы"
    }

  ];


  initPlyr("#player", timecodesArr, ".timecodes-title");


});


function initPlyr(plyrVideoSelector, timecodesArr = [], timecodeTitleSelector = null) {

  const videoPlayer = document.querySelector(plyrVideoSelector);

  if (!videoPlayer) return;

  const timecodesTitle = document.querySelector(timecodeTitleSelector);

  const timecodesContent = document.createElement("div");
  timecodesContent.className = "timecodes-ac-content";


  timecodesArr.forEach(item => {
    timecodesContent.innerHTML += `
<p class="timecode_item">
<span class="item_time">${item.time}</span>
<span class="item_desc">${item.label}</span>
</p>
`;
  });


  const timecodesArrForPlyr = timecodesArr.reduce((acc, curr) => {
    curr.time = parseTimeInSeconds(curr.time);
    acc.push(curr);
    return acc;
  }, []);


  const player = new Plyr(videoPlayer, {
    markers: {
      enabled: true,
      points: timecodesArrForPlyr
    }
  });

  timecodesContent.querySelectorAll(".timecode_item").forEach((timecode, i) => {

    timecode.addEventListener("click", function () {
      player.currentTime = timecodesArrForPlyr[i].time;
    });

  });


  if (timecodesTitle && timecodesArr.length) {
    timecodesTitle.append(timecodesContent);
  }

  if ($(timecodesTitle).hasClass("timecodes-ac-trigger")) {
    $(timecodesTitle).find(".f-header").on("click", function () {
      $(this).toggleClass("active");
      $(this).next().slideToggle();
    });
  }
}


function parseTimeInSeconds(timeStr) {

  let s = 0;

  if (typeof timeStr !== "string") return s;

  const arrTime = timeStr.split(':');

  if (arrTime.length === 2) {
    s = parseInt(arrTime[0]) * 60 + parseInt(arrTime[1]);
  } else if (arrTime.length === 3) {
    s = parseInt(arrTime[0]) * 60 * 60 + parseInt(arrTime[1]) * 60 + parseInt(arrTime[2]);
  }

  return s;

}

P.S. Уже просматривая видео решил что лучше будет если порядок аргументов в функции будет такой:

initPlyr("#player", timecodesArr, ".timecodes-title");

(массив объектов таймкодов стал вторым а селектор заголовка 3-м)

timecodesArr - массив объектов, в котором через запятую прописаны свойства конкретного таймкода. В этом массиве мы ставим свои значения. Эти значения подтянутся скриптом в метки на видео и в html код внутри контейнера указанного заголовка таймкодов.

  const timecodesArr = [
    {
    
      time: "00:06", // Время таймкода
      label: "Чебурашка начинает петь" // Описаине таймкода
    }

  ];

  initPlyr("#player", timecodesArr, ".timecodes-title");

initPlyr("*CЕЛЕКТОР_ЭЛЕМЕНТА_ВИДЕО*", *МАССИВ_ОБЪЕКТОВ_ТАЙМКОДОВ*, "*CЕЛЕКТОР_ЗАГОЛОВКА_ТАЙМКОДОВ*");

Шаг 4. Заголовок-контейнер для таймкодов на геткурс

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

Для того, чтобы вставить html-разметку таймкодов, нам нужно привязаться к какому либо контейнеру на странице. Этим контейнером будет блок геткурс с заголовком, скрипт найдет его по определенному классу(например timecodes-title)

Создаем заголовок на геткурс стандартным способом

Ставим блоку с заголовком класс - timecodes-title

Сохраняем

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

Шаг 5. Добавляем стилизацию

CSS-стили

/* Подключение шрифта Montserrat 400;700 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');


:root {

  /* Основной цвет плеера */
  --plyr-color-main: #C96BFF;

  --fontTimecodes: "Montserrat", "proxima-nova", sans-serif;
}


.plyr__progress .plyr__tooltip {
  
/* Ширина тултипов */
  width: 160px;
}


.timecodes-title p,
.timecode_item {
  font-family: var(--fontTimecodes);
}

.timecodes-title .f-header {
  font-size: 24px;
  padding-bottom: 15px;
}

.timecode_item {
  padding: 4px 0;
  font-size: 16px;
  display: flex;
  cursor: pointer;
}

.timecode_item span {
  display: inline-block;
  line-height: 1.2;
}


.timecode_item .item_time {
  margin-right: 8px;
  flex:0 0 50px;
  font-weight: 700;

  /* Цвет времени в таймкоде*/
  color: #4848ee;
  transition: color .4s ease;
}


.timecode_item:hover .item_time {
  /* Цвет времени в таймкоде при наведении*/
  color: var(--plyr-color-main);
}

@media (max-width: 375px) {
  .timecode_item {
    font-size: 14px;
  }
}



/* СТИЛИ АККОРДЕОНА */
.timecodes-ac-trigger {
  cursor: pointer;
  box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
  border-radius: 4px;
}


.timecodes-ac-trigger .f-header {
  padding: 20px 16px 20px 70px;
  position: relative;
  user-select: none;
}


.timecodes-ac-trigger .f-header::before {
  content: "";
  width: 40px;
  height: 40px;
  display: inline-block;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50px;
/* Изображение стрелки */
  background-image: url("https://fs.getcourse.ru/fileservice/file/download/a/581768/sc/243/h/5d184da29d96d2785c216cca452febb3.svg");
/* Цвет круглого фона стрелки */
  background-color: #ffdda7;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  transition:filter .4s ease, transform .4s ease ;
}

.timecodes-ac-trigger .f-header.active::before {
  transform: translateY(-50%) rotate(180deg);
}

.timecodes-ac-trigger .f-header:hover::before {
  filter: brightness(105%);
}


.timecodes-ac-trigger .timecodes-ac-content {
  display: none;
  padding: 8px 16px 16px 16px;
}


@media (max-width: 375px) {
  .timecodes-ac-trigger .f-header {
    font-size: 18px;
  }

  .timecodes-ac-trigger .f-header::before {
    width: 32px;
    height: 32px;
    background-size: 16px;
  }

  .timecodes-ac-trigger .f-header {
    padding: 15px 15px 15px 60px;
  }

}
/* </ СТИЛИ АККОРДЕОНА */

Можно добавить в CSS-блок либо вставить и подключить через тему

На данный момент таймкоды и видео выглядят так

Простой вариант:

В скрипте и стилях предусмотрен вариант таймкодов в виде выпадающего списка

Чтобы инициализировать аккордеон добавляем класс timecodes-ac-trigger в классы заголовка

Результат:

Как сделать несколько видео с таймкодами?

Самый простой способ - вызывать несколько функций инициализации плеера с уникальными параметрами

Пример

$(function () {


    const timecodesArr1 = [
        {
            time: "00:06",
            label: "Чебурашка начинает петь"
        },

        {
            time: "00:26",
            label: "Чебурашка летит в пузыре"
        },
        {
            time: "00:40",
            label: "Чебурашка крутит юлу"
        },
        {
            time: "01:22",
            label: "Чебурашка и Гена играют в шахматы"
        }

    ];

    const timecodesArr2 = [
        {
            time: "00:06",
            label: "2 Чебурашка начинает петь"
        },

        {
            time: "00:26",
            label: "2 Чебурашка летит в пузыре"
        },
        {
            time: "00:40",
            label: "2 Чебурашка крутит юлу"
        },
        {
            time: "01:22",
            label: "2 Чебурашка и Гена играют в шахматы"
        }

    ];


    initPlyr("#player", timecodesArr1, ".timecodes-title_1");

    
    // player2 - id видео в html
    // timecodesArr2 - еще один массив с таймкодами
    // timecodes-title_2 - класс заголовка
    initPlyr("#player2", timecodesArr2, ".timecodes-title_2");

});

id видео ставится в html атрибуте - id

Уникальный класс для заголовка можно поставить в настройках заголовка

initPlyr("#player", timecodesArr1, ".timecodes-title_1");

Передавая параметры в функцию мы решаем, какая сущность к чему относится

т.е. #player - инициализируем тот плеер, которого id="player"

timecodesArr1 - берем именно этот массив таймкодов

".timecodes-title_1" - контейнером таймкодов будет заголовок с классом timecodes-title_1

Телеграм-канал: https://t.me/getcomponent

Youtube: https://www.youtube.com/channel/UCAVwlN_NSAEFR4mJRpzyvCg

VK: https://vk.com/getcomponent

Нельзяграм: @maximilia_n

Геткурс. Оформление блока «Достижение пользователя»

2022-09-10T11:57:24.647Z

Мини-инструкция о том, как можно стилизовать блок "Достижение пользователя в тренинге"

Прежде чем оформлять данный блок, он должен быть на странице

Создание шкалы достижений в тренинге

Вид по умолчанию блока "Достижение пользователя в тренинге"

Шаг 1. Вставляем CSS код

CSS-код:

/* Шрифт Montserrat 400, 500, 700 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');


:root {
  --fontM: "Montserrat", "proxima-nova", sans-serif;
}


/* ШКАЛА ДОСТИЖЕНИЙ */

.xdget-trainingAchievements {
  padding: 20px 20px 10px 20px;
  margin: 0 auto;
  border-radius: 12px;
  max-width: 440px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* Заголовок блока */
.xdget-trainingAchievements .table>thead>tr>th {
  border: 0;
  padding: 0 0 15px 0;
  font-size: 0;
  font-family: var(--fontM);
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  color: #333333;
}

/* Меняем строку заголовка */
.xdget-trainingAchievements .table>thead>tr>th::before {
  content: 'Мои достижения';
  font-size: 20px;
}


.xdget-trainingAchievements .table>tbody>tr>td {
  padding: 10px 0 10px 0;
  font-family: var(--fontM);
  vertical-align: middle;
}

.xdget-trainingAchievements .table>tbody>tr>td a {
  font-size: 16px;
  color: #242240;
}

/* Элемент с отображением баллов */
.xdget-trainingAchievements .badge {
  margin: 0 !important;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 20px;

  /* Цвет плашки с баллами */
  background-color: #00aa8d;
}


@media (max-width:400px) {
  .xdget-trainingAchievements {
    padding: 15px 15px 10px 15px;
  }

  .xdget-trainingAchievements .table>thead>tr>th {
    padding: 0 0 10px 0;
  }


  .xdget-trainingAchievements .table>thead>tr>th::before {
    font-size: 18px;
  }

  .xdget-trainingAchievements .table>tbody>tr>td a {
    font-size: 14px;
  }

  .xdget-trainingAchievements .badge {
    font-size: 12px;
    padding: 3px 8px;
  }
}

/* </ ШКАЛА ДОСТИЖЕНИЙ */

После вставки CSS-кода и сохранения изменений блок принимает такой вид:

Шаг 2. Меняем видимое пользователю название шкалы

Это название можно изменить с помощью стандартных настроек шкалы в геткурсе

Шаг 3. Заменяем слово «балл» с помощью JS-кода

Стандартное слово - балл

Настоить вид → Добавить блок →Javascript

JS-код:

$(document).ready(function () {
  $('.xdget-trainingAchievements .badge').text($('.xdget-trainingAchievements .badge').text()
    .replace('баллов', 'кристаллов')
    .replace('балла', 'кристалла')    
    .replace('балл', 'кристалл'));
});

* Вместо слов "кристалл" можно написать свои слова в необходимых склонениях

Наш результат:

Телеграм-канал: https://t.me/getcomponent

VK: https://vk.com/getcomponent

Нельзяграм: @maximilia_n

Скрываем элементы на геткурсе с помощью кодов

2022-08-30T08:32:26.009Z

Выписал несколько кодов по скрытию элементов на геткурсе которые часто приходилось применять на практике

Тренинги

Обратиться к конкретному тренингу в списке тренингов геткурса и скрыть его

CSS-код:

/* Скрыть конкретный тренинг */
.stream-table tr[data-training-id="635682646"] {
    display: none;
}

где 635682646 - это id нужного тренинга.

Этот id можно взять посмотрев код элемента в панели разработчика

Или из ссылки на тренинг

Скрыть количество уроков в списке тренингов

CSS-код:

/* Скрыть количество уроков в списке тренингов */
.stream-table tr > td > a > div > b {
  display: none;
}

Скрыть строку имя учителя в списке тренингов

JS код:

$(function() {
    
    const teacherStr = "Максим Калмыков.";

    $(`.stream-table tr > td > a > div:contains(${teacherStr})`).each((i, el)=> {

        $(el).html($(el).html().replace(teacherStr, ''));
    
    });
    
});

* где Максим Калмыков. - это строка имени учителя, которая удалится (прописывать внутри кавычек)

* это JS-код, его нужно вставлять в javascript блок

Скрыть описание тренингов

CSS-код:

/* Скрыть описание тренингов */
.stream-table tr > td > a > div {
  display: none;
}

Список уроков

Скрыть конкретный урок

Обратиться к конкретному уроку в списке уроков и скрыть его ( Например, чтобы вынести ссылку на него в отдельную кнопку: правила, расписание и тд. )

/* Скрыть конкретный урок */
.lesson-list .lesson-id-253731501 {
  display: none;
}

* где 253731501 - это id урока. Можно взять из ссылки на урок или из элемента в панели разработчика.

Скрыть надпись "Есть задание" в списке уроков

CSS-код:

/* Скрыть надпись "Есть задание" в списке уроков */
.lesson-list li.user-state-has_mission .user-state-label:not(.has-start-at):not(.is-stop-lesson) {
  display: none;
}

Скрыть надпись "Чтобы получить доступ к следующим урокам, вам необходимо выполнить задание в предыдущем"

/* Скрыть надпись в списке уроков "Чтобы получить доступ к следующим урокам, вам необходимо выполнить задание в предыдущем" */
.lesson-list li.divider {
     display: none; 
}

Внутри урока

Скрыть количество уроков в шапке урока

CSS-код:

/* Скрыть количество уроков в шапке урока */
.lesson-navigation tbody > tr > td.text-center.hidden-xs > span {
    display: none;
}

Скрыть кнопку "Сохранить черновик" в блоке задания

CSS-код:

/* Скрыть кнопку "Сохранить черновик" */
.lt-lesson-mission-block .btn-save-draft {
  display: none;
}

Телеграм-канал: https://t.me/getcomponent

VK: https://vk.com/getcomponent

Нельзяграм: @maximilia_n

Максим

Автоматически записать данные в поле анкеты геткурс. На примере записи даты заполнения анкеты

Шаг 1. Создаем поле анкеты с типом "Дата"

Шаг 2. Добавляем блок анкеты на страницу. Присваиваем блоку класс

Шаг 3. Пишем js код

Как найти ID_ПОЛЯ_АНКЕТЫ?

Шаг 4. Проверяем

Оформить модуль, в котором уроки недоступны + вывести дату выхода первого урока. JS код для списка тренингов в getcourse

Кнопка навигации «Прокрутить наверх». Код для getcourse

Блок "Аккордеон" на Getcourse

Шаг 1. Добавляем CSS блок

Шаг 2. Добавляем блоки контента и проставляем классы

Шаг 3. Добавляем блок с js-кодом

Меняем текст в блоке продления покупки в тренингах на геткурсе с помощью JS

JS скрипт для файлового хранилища Getcourse

Что делает скрипт

JS-код

Как вставить код на геткурс

Отправляем задание урока после заполнения анкеты. Скрипт для getcourse

Шаг 1. Подключаем JS код на страницу урока

Шаг 2. Вызываем скрипт после отправки анкеты

Шаг 3. Скрываем блок ответа

Делаем плеер с таймкодами на getcourse с помощью плагина Plyr и скриптов

Шаг 1. Подключаем Plyr

Шаг 2. Вставляем видео в HTML

Шаг 3. Вставляем JS-код

Шаг 4. Заголовок-контейнер для таймкодов на геткурс

Шаг 5. Добавляем стилизацию

Геткурс. Оформление блока «Достижение пользователя»

Шаг 1. Вставляем CSS код

Шаг 2. Меняем видимое пользователю название шкалы

Шаг 3. Заменяем слово «балл» с помощью JS-кода

Скрываем элементы на геткурсе с помощью кодов

Тренинги

Обратиться к конкретному тренингу в списке тренингов геткурса и скрыть его

Скрыть количество уроков в списке тренингов

Скрыть строку имя учителя в списке тренингов

Скрыть описание тренингов

Список уроков

Скрыть конкретный урок

Скрыть надпись "Есть задание" в списке уроков

Скрыть надпись "Чтобы получить доступ к следующим урокам, вам необходимо выполнить задание в предыдущем"

Внутри урока

Скрыть количество уроков в шапке урока

Скрыть кнопку "Сохранить черновик" в блоке задания

Как найти `ID_ПОЛЯ_АНКЕТЫ`?