troodle-expcontent/script.js

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() {
  // Select all <a> elements with the class "stretched-link"
  const links = document.querySelectorAll("a.stretched-link");

  // Initialize an array to store the href attributes
  const feedbackLinks = [];

  // Iterate through the selected links
  links.forEach((link) => {
    const href = link.getAttribute("href");
    // Check if the href includes "/feedback/"
    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;

    contentUrl = $(currentScript).attr("data-content-url");

    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() {
      // Get the currently executing <script> element
      var modal = $("#fullScreenModal");
      var currentLi = $("#" + modal.attr("data-block"));

      // Find the next <li> sibling with the "section" class
      var nextLi = currentLi.next("li.section");

      // Find the <a> element with the "stretched-link" class within the next <li> element
      var aLink = nextLi.find("a.stretched-link");

      if (aLink.length > 0) {
        // Get the "href" attribute of the <a> element
        let hrefValue = aLink.attr("href");

        // Check if "feedback" is in the "href" attribute
        if (hrefValue.includes("feedback")) {
          // Replace "view" with "complete" in the "href" attribute
          hrefValue = hrefValue.replace("view", "complete");

          // Go to embed mode
          hrefValue = hrefValue + "&embed=1";
        } else if (hrefValue.includes("/quiz/")) {
          // Replace "view" with "attempt" in the "href" attribute
          hrefValue = hrefValue.replace("view", "attempt");

          try {
            // Call URL to see where it redirects to
            const response = await fetch(hrefValue);
            hrefValue = response.url;
          } catch (error) {
            console.error('Error fetching the URL:', error);
          }

          // Go to embed mode
          hrefValue = hrefValue + "&embed=1";
        }

        return openInModal(hrefValue, nextLi.attr("id"));
      } else {
        // Check if there is a button with the "btn-primary" class
        var button = nextLi.find("button.btn-primary");

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

      hideContent();
    }

    nextActivity = nextContent;
    window.top.nextContent = nextContent;

    async function openQuizModal(number) {
      // Get the feedback link
      let href = getFeedbackLinks()[number - 1];

      if (href.includes("/feedback/")) {
        href = href.replace("view", "complete");
      } else if (href.includes("/quiz/")) {
        // Replace "view" with "attempt" in the "href" attribute
        href = href.replace("view", "attempt");

        try {
          // Call URL to see where it redirects to
          const response = await fetch(href);
          href = response.url;
        } catch (error) {
          console.error('Error fetching the URL:', error);
        }

        console.log(href);
      }

      // Go to embed mode
      href = href + "&embed=1&modal=1";

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

      // Show the modal
      $("#regularModal").modal("show");
    }

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

    window.top.openQuizModal = openQuizModal;
    window.top.openModal = openQuizModal;
    window.top.closeQuizModal = closeQuizModal;

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