troodle-expcontent/global.js

document.addEventListener("DOMContentLoaded", function () {

  const modalHTML = `
  <div id="fullScreenModal" class="modal" tabindex="-1"
    aria-labelledby="modalLabel" aria-hidden="true">
    <div style="background-color:#294084;" class="modal-dialog modal-fullscreen">
      <div style="background-color:#294084;" class="modal-content">
        <div style="background-color:#294084;" class="modal-body"><iframe style="background-color:#294084;" id="modal-iframe"></iframe></div>
      </div>
    </div>
  </div>
  <div id="regularModal" style="background: rgb(255,255,255,.7);" class="modal" tabindex="-2"
    aria-labelledby="modalLabel" aria-hidden="true">
    <div style="background-color:#294084;height:90%;" class="modal-dialog modal-lg">
      <div style="background-color:#294084;height:100%;" class="modal-content">
        <div style="background-color:#294084;" class="modal-body"><iframe style="background-color:#294084;width:100%;height:100%;" id="regular-modal-iframe"></iframe></div>
      </div>
    </div>
  </div>
`;

  // Append the modal HTML to the document body
  document.body.insertAdjacentHTML('beforeend', modalHTML);

  // Function to load a script into the DOM
  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 to get URL parameters
  function getUrlParameter(name) {
    url = document.location.href;
    urlobj = new URL(url);
    return urlobj.searchParams.get(name);
  }

  // Check if the 'embed' parameter is set to '1'
  if (getUrlParameter("embed") === "1") {
    // Apply custom CSS to hide Moodle interface elements
    var style = document.createElement("style");
    style.innerHTML = `
            body.path-mod {
                #header, #footer, .breadcrumb, .navbar, .side-pre, .side-post, .drawer, .drawer-toggler, .footer-popover, .navigation {
                    display: none !important;
                }
                #region-main {
                    margin: 0;
                    padding: 0;
                }
            }
        `;
    document.head.appendChild(style);

    loadScript(
      "https://code.jquery.com/jquery-3.7.1.min.js",
      "sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=",
      "anonymous"
    )
      .then(() => {
        console.log("jQuery loaded successfully");
        // Load Bootstrap after jQuery is loaded
        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");
        $(document).ready(function () {
          $(".btn-secondary:contains('Back')").hide()

          var embedded = getUrlParameter("embed");
          var inModal = getUrlParameter("modal");

          // Set required attribute on inputs associated with labels containing <i title="Required field">
          $('label:has(i[title="Required field"])').each(function () {
            var inputId = $(this).attr("for");
            $("#" + inputId).attr("required", "required");
          });

          // Hide the modal if the 'cancel' button is clicked
          $("[name=cancel]").click(function () {
            hideContent();
          });

          $("form").each(function () {
            var form = $(this);

            form.submit(function (event) {
              event.preventDefault(); // Prevent the default form submission

              // Check if the form is valid
              if (!form[0].checkValidity()) {
                form[0].reportValidity();
                return;
              }

              // Serialize the form data
              var formData = form.serialize();

              // Add the submit button's data to formData
              var submitButton = form.find(
                'input[type="submit"][name="savevalues"]'
              );
              if (submitButton.length) {
                formData +=
                  "&" +
                  encodeURIComponent(submitButton.attr("name")) +
                  "=" +
                  encodeURIComponent(submitButton.val());
              }

              var sesskey = form.find('input[name=sesskey]').val();
              var attempt = form.find('input[name=attempt]').val();

              console.log(sesskey);
              console.log(attempt);

              // Perform the AJAX request
              $.ajax({
                url: form.attr("action"), // Use the form's action attribute
                type: form.attr("method"), // Use the form's method attribute
                data: formData,
                success: function (response) {
                  if (form.attr("action").includes("/quiz/")) {
                    var finalize = "/mod/quiz/processattempt.php";
                    var data = {
                      attempt: attempt,
                      finishattempt: 1,
                      sesskey: sesskey,
                    };
                    $.post(finalize, data, function (response) {
                      console.log(response);
                      // Close the modal if `modal=1` is set
                      if (inModal === "1") {
                        window.top.closeQuizModal();
                      } else {
                        // Else call the nextContent function
                        window.top.nextContent();
                      }
                    });
                  } else {
                    // Close the modal if `modal=1` is set
                    if (inModal === "1") {
                      window.top.closeQuizModal();
                    } else {
                      // Else call the nextContent function
                      window.top.nextContent();
                    }
                  }
                },
                error: function (xhr, status, error) {
                  // Handle any errors that occur during the AJAX request
                  console.error(
                    "Form submission failed: " + status + " - " + error
                  );
                },
              });
            });
          });
        });
      })
      .catch((error) => {
        console.error(error);
      });
  }
});