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;

  var myModal = document.getElementById("fullScreenModal");

  myModal.addEventListener("shown.bs.modal", function () {
    var modalContent = myModal.querySelector(".modal-content");
    var modalWidth = modalContent.offsetWidth;
    var modalHeight = modalContent.offsetHeight;

    const modalIframe = window.$("#modal-iframe");

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

  loadScript(
    "https://code.jquery.com/jquery-3.7.1.min.js",
    "sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=",
    "anonymous"
  )
    .then(() => {
      console.log("jQuery loaded successfully");
      window.$ = jQuery;
      return loadScript(
        "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js",
        "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz",
        "anonymous"
      );
    })
    .then(() => {
      console.log("Bootstrap loaded successfully");
      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();
      }

      async function openQuizModal(number) {
        let href = getFeedbackLinks()[number - 1];

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

          console.log(href);
        }

        href = href + "&embed=1&modal=1";

        $("#regular-modal-iframe").attr("src", href);

        $("#regularModal").modal("show");
      }

      function closeQuizModal() {
        $("#regularModal").modal("hide");
        $("#regular-modal-iframe").attr("src", "about:blank");
      }

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


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

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

      $("head").append(
        '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">'
      );
    })
    .catch((error) => {
      console.error(error);
    });
})();