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 && href.includes("/feedback/")) {
      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");
    }

    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
        var hrefValue = aLink.attr("href");

        // Check if "feedback" is in the "href" attribute
        if (hrefValue.includes("feedback")) {
          // Get the id URL parameter for debugging purposes
          var url = new URL(hrefValue);
          var id = url.searchParams.get("id");

          // Replace "view" with "complete" in the "href" attribute
          hrefValue = hrefValue.replace("view", "complete");

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

    function openQuizModal(number) {
      // Get the feedback link
      var href = getFeedbackLinks()[number - 1];
      href = href.replace("view", "complete");

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