troodle-expcontent/script.js

(function () {
  function loadScript(url, integrity, crossorigin) {
    return new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = url;
      script.integrity = integrity;
      script.crossOrigin = crossorigin;
      script.onload = () => resolve(script);
      script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
      document.head.appendChild(script);
    });
  }

  function getFeedbackLinks() {
    const links = document.querySelectorAll("a.stretched-link");
    const feedbackLinks = [];
    links.forEach((link) => {
      const href = link.getAttribute("href");
      if (href) {
        if (href.includes("/feedback/")) {
          feedbackLinks.push(href);
        } else if (href.includes("/quiz/")) {
          feedbackLinks.push(href);
        }
      }
    });
    return feedbackLinks;
  }

  var currentScript = document.currentScript;

  let openNextFlag = false;

  function waitForGlobalVariable(variableName) {
    return new Promise((resolve) => {
      const checkVariable = setInterval(() => {
        if (window[variableName]) {
          clearInterval(checkVariable);
          resolve();
        }
      }, 100);
    });
  }

  waitForGlobalVariable("$")
    .then(() => {
      waitForGlobalVariable("bootstrap")
        .then(() => {
          console.log("Bootstrap loaded successfully");

          var myModal = $("#fullScreenModal");

          myModal[0].addEventListener("shown.bs.modal", function () {
            const modalIframe = window.$("#modal-iframe");

            modalIframe.css("width", "100%");
            modalIframe.css("height", "100%");
            modalIframe.css("border", "none");

            // Add event handler to iframe load events
            modalIframe[0].addEventListener("load", function () {
              const newLocation = modalIframe[0].contentWindow.location.href;

              // If the iframe now contains a course page, open it in the parent window
              if (newLocation.includes("/course/view.php?id=")) {
                window.top.location.href = newLocation;
              };
            });
          });

          var scriptId = "script-" + Math.random().toString(36).substring(2, 9);
          currentScript.id = scriptId;

          var contentUrl = "/mod/exp360/view_content.php?id=" + $(currentScript).attr("data-activity-id");

          function openInModal(url, block) {
            $("#modal-iframe").attr("src", url);
            if (block) {
              $("#fullScreenModal").attr("data-block", block);
            } else {
              $("#fullScreenModal").removeAttr("data-block");
            }
          }

          function showContent(url, block) {
            bootstrap.Modal.getOrCreateInstance(
              document.getElementById("fullScreenModal")
            ).show();
            if (url) {
              openInModal(url, block);
            }
          }

          function hideContent() {
            bootstrap.Modal.getOrCreateInstance(
              document.getElementById("fullScreenModal")
            ).hide();
            openInModal("about:blank");
          }

          async function nextContent() {
            var modal = $("#fullScreenModal");
            var currentLi = $("#" + modal.attr("data-block"));

            var nextLi = currentLi.next("li.section");

            var aLink = nextLi.find("a.stretched-link");

            if (aLink.length > 0) {
              let hrefValue = aLink.attr("href");

              if (hrefValue.includes("feedback")) {
                hrefValue = hrefValue.replace("view", "complete");
                hrefValue = hrefValue + "&embed=1";
              } else if (hrefValue.includes("/quiz/")) {
                hrefValue = hrefValue.replace("view", "attempt");

                try {
                  const response = await fetch(hrefValue);
                  hrefValue = response.url;
                } catch (error) {
                  console.error('Error fetching the URL:', error);
                }

                hrefValue = hrefValue + "&embed=1";
              }

              return openInModal(hrefValue, nextLi.attr("id"));
            } else {
              var button = nextLi.find("button.btn-primary");

              if (button.length > 0) {
                return button.click();
              }
            }

            hideContent();
          }

          function openUrlInQuizModal(href) {
            $("#regular-modal-iframe").attr("src", href);
            $("#regularModal").modal("show");
          }

          // Function to open a quiz modal
          async function openQuizModal(number, openNext = true) {
            openNextFlag = openNext; // Store the flag in the global variable

            let href = getFeedbackLinks()[number - 1];
            const quizLink = $(`a.stretched-link[href="${href}"]`).closest("li.section");

            if (href.includes("/feedback/")) {
              href = href.replace("view", "complete");
            } else if (href.includes("/quiz/")) {
              href = href.replace("view", "attempt");
              try {
                const response = await fetch(href);
                href = response.url;
              } catch (error) {
                console.error('Error fetching the URL:', error);
              }
            }

            href = href + "&embed=1&modal=1";
            openUrlInQuizModal(href);

            if (openNext) {
              // Set the data-block attribute to the block containing the current quiz
              $("#fullScreenModal").attr("data-block", quizLink.attr("id"));
            }
          }

          // Function to close the quiz modal
          function closeQuizModal() {
            $("#regularModal").modal("hide");
            $("#regular-modal-iframe").attr("src", "about:blank");

            if (openNextFlag) {
              nextContent(); // Open the next activity
            }
          }

          function goToCourse(id) {
            window.top.location.href = "/course/view.php?id=" + id;
          }

          // Attach global functions to window.top
          window.top.nextContent = nextContent;
          window.top.openQuizModal = openQuizModal;
          window.top.openModal = openQuizModal;
          window.top.closeQuizModal = closeQuizModal;
          window.top.goToQuiz = window.top.nextContent;
          window.top.goToCourse = goToCourse;

          var contentName = $(currentScript).attr("data-activity-name");

          $(currentScript)
            .parent()
            .append(
              `<button id="contentButton-` +
              scriptId +
              `" class="btn btn-primary" type="button">` +
              contentName +
              `</button>`
            );

          var button = $("#contentButton-" + scriptId);
          button.click(function () {
            showContent(
              contentUrl,
              $(currentScript).closest("li.section").attr("id")
            );
          });

          var sections = $('.section');
          var found = false;

          sections.each(function (index) {
            if (!found && $(this).find('script[data-activity-id]').length > 0) {
              // Set found to true when the first matching section is found
              found = true;
            } else if (found) {
              // Hide all .section elements after the found one
              $(this).css('visibility', 'hidden');
            }
          });
        })
    })
    .catch((error) => {
      console.error(error.message);
    });
})();