• Шаг 1. Создаем поле анкеты с типом \
• Шаг 2. Добавляем блок анкеты на страницу. Присваиваем блоку класс
• Шаг 3. Пишем js код
• Как найти ID_ПОЛЯ_АНКЕТЫ?
• Шаг 4. Проверяем

Шаг 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()
  });

});

// ...

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;
}

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

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

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);
    });
})

• Шаг 1. Добавляем CSS блок
• Шаг 2. Добавляем блоки контента и проставляем классы
• Шаг 3. Добавляем блок с js-кодом

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

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

Данное решение предназначено для использования в визуальном конструкторе на платформе 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 - не делать)

Готово

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

Оглавление

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

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

Включаем

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

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

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

Шаг 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

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

Готово ✨

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

• Шаг 1. Подключаем Plyr
• Шаг 2. Вставляем видео в HTML
• Шаг 3. Вставляем JS-код
• Шаг 4. Заголовок-контейнер для таймкодов на геткурс
• Шаг 5. Добавляем стилизацию

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

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

1. Визуальный конструктор геткурса(можно вставлять плеер на страницы и в уроки)
2. Plyr плеер (Ссылка на документацию: https://github.com/sampotts/plyr )
3. 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

ИЛИ

2. В 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

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

Шаг 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('балл', 'кристалл'));
});

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

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

Тренинги

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

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;
}