Макс и компоненты | Getcourse components

Статус уроков «‎Задание не принято» в списке уроков на геткурс

Как это сделать?

1. Добавить класс для уроков с отклоненным ответом на задание.
Это можно сделать с помощью js-кода, который сделает запрос в уроки, определит те из них, в которых задание не принято и добавит таким урокам класс, например

mission_rejected

2. Оформить уроки с помощью css-стилей
В стилях прописать обращение к нашему новому добавленному классу для непринятых уроков

Коды на странице со списком уроков

JS-код в блок "Javascript"

  // СКРИПТ ДЛЯ СТАТУСА УРОКА "ОТКЛОНЕН"
  $(function () {

    if (window.location.href.indexOf("/teach/control/stream/view/id") == -1) return;

    // Название класса, который будет добавлен к урокам с отклоненным заданием
    const missionRejectedClass = "mission_rejected";


    const lessons = $(".lesson-list li.user-state-has_mission, .lesson-list li.user-state-need_accomplish").not(`.${missionRejectedClass}`);
    if (!lessons.length) return;

    lessons.each((_, lesson) => {
      const lessonId = $(lesson).attr("data-lesson-id");
      const lessonUrl = `/pl/teach/control/lesson/webview?id=${lessonId}&mode=mission`;

      $.getJSON(lessonUrl, data => {
        const pageHtml = $("<div/>").html(data.data.html);
        if (pageHtml.find(".lt-lesson-mission-block .answer-status-label span").hasClass("glyphicon-ban-circle")) {
          $(lesson).addClass(missionRejectedClass);
        }
      });
    });
  });

*Этот js-код добавит класс mission_rejected для непринятых уроков.

Простой пример CSS:

  /* СТИЛИ ДЛЯ СТАТУСА УРОКА "ОТКЛОНЕН" */
  li.mission_rejected .item-a {
    position: relative;
  }

  li.mission_rejected .item-a::before {
    content: "\f071 \00a0 Задание не принято";
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: "FontAwesome", "proxima-nova", sans-serif;
    color: #e74c3c;
    z-index: 5;
  }

  @media (max-width: 767px) {
    li.mission_rejected .item-a::before {
      top: 2px;
      font-size: 12px;
    }
  }

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

Для того чтобы выполнить коды для всех уроков в аккаунте можно прописать в поле Счетчики и прочие скрипты для BODY

<style>
  /* СТИЛИ ДЛЯ СТАТУСА УРОКА "ОТКЛОНЕН" */
  .lesson-list li.mission_rejected .item-a {
    position: relative;
  }

  .lesson-list li.mission_rejected .item-a::before {
    content: "\f071 \00a0 Задание не принято";
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: "FontAwesome", "proxima-nova", sans-serif;
    color: #e74c3c;
    z-index: 5;
  }

  @media (max-width: 767px) {
    .lesson-list li.mission_rejected .item-a::before {
      top: 2px;
      font-size: 12px;
    }
  }
</style>


<script>

  // СКРИПТ ДЛЯ СТАТУСА УРОКА "ОТКЛОНЕН"
  $(function () {

    if (window.location.href.indexOf("/teach/control/stream/view/id") == -1) return;

    // Название класса, который будет добавлен к урокам с отклоненным заданием
    const missionRejectedClass = "mission_rejected";


    const lessons = $(".lesson-list li.user-state-has_mission, .lesson-list li.user-state-need_accomplish").not(`.${missionRejectedClass}`);
    if (!lessons.length) return;

    lessons.each((_, lesson) => {
      const lessonId = $(lesson).attr("data-lesson-id");
      const lessonUrl = `/pl/teach/control/lesson/webview?id=${lessonId}&mode=mission`;

      $.getJSON(lessonUrl, data => {
        const pageHtml = $("<div/>").html(data.data.html);
        if (pageHtml.find(".lt-lesson-mission-block .answer-status-label span").hasClass("glyphicon-ban-circle")) {
          $(lesson).addClass(missionRejectedClass);
        }
      });
    });
  });

</script>

* Прежде чем перенести на аккаунт рекомендую сначала протестировать на одном списке уроков
* Коды для аккаунта более удобнее хранить и подключать с помощью тем

🔥21

1.24K viewsedited 14:42