Adding elements to an assignment page by editing the DOM with Javascript

[stuartriceaz]

Hello All!

I've done my best to figure this out using the available resources, but I can't seem to get it to work.

I'm attempting to add visual elements around a SCORM object in an assignment (reason: We need to capture whether someone has completed this activity and pass a grade). We have put SCORM objects on other pages and wrapped them in these visual elements, and so we want to have it in assignments to ensure similarity.

I've tried this multiple ways, and I keep getting nothing in the Chrome console log and no changes in the file (it should be writing in the footer you see in the code). Does anyone have any suggestions or code snippets I could review?

Thanks much!

Stuart

function initCustomJS() {
  console.log("Initializing custom JavaScript");

  // Set up a MutationObserver to watch for the SCORM iframe
  const observer = new MutationObserver((mutations, obs) => {
    // Use a specific selector to find the iframe
    const iframe = document.querySelector("iframe[name^='tool_content']");
    console.log("Checking for SCORM iframe...", iframe);

    if (iframe) {
      // Stop the observer once the element is found
      obs.disconnect();

      // Create and insert the navigation bar
      const navBar = document.createElement("div");
      navBar.innerHTML = `
        <div style="background: #f8f8f8; padding: 15px; text-align: center; border-top: 2px solid #ccc;">
          <a href="/courses/7110" style="margin: 0 10px; text-decoration: none; color: #007D8A; font-weight: bold;">Home</a>
          <a href="/courses/7110/modules" style="margin: 0 10px; text-decoration: none; color: #007D8A; font-weight: bold;">Modules</a>
          <a href="/courses/7110/grades" style="margin: 0 10px; text-decoration: none; color: #007D8A; font-weight: bold;">Grades</a>
        </div>
      `;
      iframe.parentNode.insertBefore(navBar, iframe.nextSibling);
      console.log("Navigation bar added.");
    }
  });

  // Observe the document body for changes
  observer.observe(document.body, { childList: true, subtree: true });
}

// Check if the document is already fully loaded
if (document.readyState === "complete") {
  initCustomJS();
} else {
  window.addEventListener("load", initCustomJS);
}