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("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")
        );
      });
    })
    .catch((error) => {
      console.error(error.message);
    });
})();