@pimaonline/pimaonline-themepack 2.4.1 → 3.10.11

package/dist/js/scripts2.js

@@ -1,45 +1,44 @@
-/// @description Main JS file for PimaOnline Themepack
-/// @dependencies jQuery 3.3.1 or later
-
-const courseBody = document.querySelector("body");
+const columnWidget = document.querySelector("#column-widget");
+const contentLockInstructions = document.querySelectorAll(".content-lock-instructions");
+const contentUnlockBtns = document.querySelectorAll(".content-unlock-btn");
 const contentWrapper = document.querySelector("#content-wrapper");
+const courseBody = document.querySelector("body");
+const docHead = document.querySelector("head");
+const flipCards = document.querySelectorAll(".flip-card-group");
+const focusReaderTooltipText = "Highlight text as you scroll";
+const galleryWrappers = document.querySelectorAll(".gallery-wrapper");
+const h5pIframes = document.querySelectorAll("iframe");
+const h5pResizer = document.createElement("script");
+const h5pResizerExists = docHead.querySelector("script[src='https://pima.h5p.com/js/h5p-resizer.js']");
+// This array contains CDNs for Bootstrap and Remix icon libraries stored as objects
+const iconClasses = [
+  { class: "bi-", cdn: "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" },
+  { class: "ri-", cdn: "https://cdn.jsdelivr.net/npm/remixicon@4.0.1/fonts/remixicon.css" }
+];
+const imageGallery = document.querySelector(".image-gallery");
+const imgBoxes = document.querySelectorAll(".image-box");
+const imgGalleries = document.querySelectorAll(".image-gallery");
+const lockedContent = document.querySelectorAll(".locked-content");
+const mediaContainers = document.querySelectorAll(".media-container");
+const rolePres = document.querySelectorAll('[role="presentation"]');
 const secondColumn = document.querySelector("#second-column");
+const tables = document.querySelectorAll(".display, .display-lg")
+const tabsWidgets = document.querySelectorAll(".tabs");
 const thirdColumn = document.querySelector("#third-column");
-const columnWidget = document.querySelector("#column-widget");
-const videoWrapper = document.querySelector("#video-wrapper");
-const rolePres = document.querySelectorAll('[role="presentation"]');
-const imageGallery = document.querySelector(".image-gallery");
-const vocabListWidget = document.querySelector("dl.vocab-list");
-const vocabTerms = document.querySelectorAll("dl.vocab-list dt");
-const vocabDefs = document.querySelectorAll("dl.vocab-list dd");
 const vocabCloseBtns = document.querySelectorAll("dl.vocab-list button");
+const vocabDefs = document.querySelectorAll("dl.vocab-list dd");
+const vocabListWidget = document.querySelector("dl.vocab-list");
 const vocabLists = document.querySelectorAll("dl[class^='vocab-list']");
-const mediaContainers = document.querySelectorAll(".media-container"); 
-const tabsWidgets = document.querySelectorAll(".tabs");
-const h5pIframes = document.querySelectorAll("iframe");
-const docHead = document.querySelector("head");
-const h5pResizerExists = docHead.querySelector("script[src='https://pima.h5p.com/js/h5p-resizer.js']");
-const h5pResizer = document.createElement("script");
-
-// Grid 
-const addGrid = () => {
-  if (secondColumn && thirdColumn) {
-    courseBody.id = "three-column";
-  } else if (secondColumn && !columnWidget) {
-      courseBody.id = "two-column";
-  } else if (columnWidget) {
-      courseBody.id = "two-col-widget";
-  } else if (videoWrapper) {
-      courseBody.id = "video-grid";
-  } else {
-      courseBody.id = "one-column";
-  }
-};
-addGrid();
-
+const vocabTerms = document.querySelectorAll("dl.vocab-list dt");
+const videoWrapper = document.querySelector("#video-wrapper");
 // JS to add role and aria-label to content-wrapper, second-column, and third-column
 const addAria = () => {
-  contentWrapper.setAttribute("role", "main");
+  if (contentWrapper) {
+    contentWrapper.setAttribute("role", "main");
+  } else if (!contentWrapper) {
+    console.error("Document error: does not contain #content-wrapper.");
+    return;
+  }
   if (secondColumn) {
     secondColumn.setAttribute("role", "region");
     secondColumn.setAttribute("aria-label", "Second column");
@@ -50,192 +49,247 @@ const addAria = () => {
   }
 };
 addAria();
+const addGrid = () => {
+  if (contentWrapper && secondColumn && thirdColumn) {
+    courseBody.id = "three-column";
+  } else if (contentWrapper && secondColumn && !columnWidget) {
+    courseBody.id = "two-column";
+  } else if (contentWrapper && secondColumn && columnWidget) {
+    courseBody.id = "two-col-widget";
+  } else if ((contentWrapper && videoWrapper)) {
+    courseBody.id = "video-grid";
+  } else if (contentWrapper && !secondColumn && !thirdColumn && !columnWidget && !videoWrapper) {
+    courseBody.id = "one-column";
+  } else if (contentWrapper && !secondColumn && (thirdColumn || columnWidget)) {
+    console.error("Document error: <body> is missing id because #second-column doesn't exist.");
+    return;
+  } else {
+    console.error("Document error: unable to determine the page layout for setting <body> id.");
+    return;
+  }
 
-// Clean up HTML
-const cleanMarkup = () => {
-// Remove role="presentation" attr from any element that has it  
-  if (rolePres) {
-    rolePres.forEach((roleElem) => roleElem.removeAttribute("role"));
-  }  
-  // Set functino to remove atrributes from elements
-  const discardAttributes = (element, ...attributes) => { 
-    attributes.forEach((attribute) => element.removeAttribute(attribute)); 
+  const topLevelElements = document.body.children;
+  let foundNestedElement = false;
+
+  // Check for additional content outside #content-wrapper, #second-column, #third-column, or footer
+  for (let i = 0; i < topLevelElements.length; i++) {
+    const element = topLevelElements[i];
+
+    if (
+      element.id !== "content-wrapper" &&
+      element.id !== "second-column" &&
+      element.id !== "third-column" &&
+      element.id !== "column-widget" &&
+      element.tagName !== "HEADER" &&
+      element.tagName !== "FOOTER" &&
+      element.tagName !== "SCRIPT" &&
+      element.id !== "loom-companion-mv3" &&
+      element.className !== "focus-reader-switches"
+    ) {
+      foundNestedElement = true;
+      break;
+    }
+  }
+
+  if (foundNestedElement) {
+    console.error("Document error: Additional content outside #content-wrapper, #second-column, #third-column, or footer.");
+    return;
   }
-  // Remove attributes from tables
-  const tableElems = document.querySelectorAll("table, thead, tbody, tr, th, td");
-  tableElems.forEach((elem) => {
-    discardAttributes(elem, "cellspacing", "cellpadding", "width", "style");
-  });
 };
-cleanMarkup();
+addGrid();
+// Media Container
+const addMediaContainersAria = () => {
+  mediaContainers.forEach((eachContainer, index) => {
+    // loopID: find the current index value, convert it to its letter equivalent, then convert to lowercase
+    let loopId = String.fromCharCode(index + 65).toLowerCase();
+    let mediaObject = eachContainer.querySelector(".media-object");
+    let iframe = eachContainer.querySelector("iframe");
+    let mediaInfo = eachContainer.querySelector(".media-info");
 
-// Helper JS for Responsive Tables
-const initResponsiveTables = () => {
-  const tables = document.querySelectorAll(".display, .display-lg")
-  for (let table = 0; table < tables.length; table++) {
-    let headertext = [],
-      headers = tables[table].querySelectorAll(".display table th, table.display th, .display-lg table th, table.display-lg th"),
-      tablebody = tables[table].querySelector(".display table tbody, table.display tbody, .display-lg table tbody, table.display-lg tbody");
-    for (let header = 0; header < headers.length; header++) {
-      let current = headers[header];
-      headertext.push(current.textContent.replace(/\r?\n|\r/, ""));
+    // Check if media container items are present
+    if (!iframe) {
+      console.error("Document error: no iframe found for media container");
+      return;
     }
-    for (let y = 0, row; row = tablebody.rows[y]; y++) {
-      for (let j = 0, col; col = row.cells[j]; j++) {
-        col.setAttribute("data-th", headertext[j]);
-      }
+    if (!mediaObject) {
+      console.error("Document error: no media object found for media container");
     }
-  }
+
+    // If element DOES NOT have "aria-describedby" && it DOES have a sibling element.
+    if (!iframe.hasAttribute("aria-describedby") && mediaInfo != null) {
+      iframe.setAttribute("aria-describedby", `${loopId}`);
+      mediaInfo.id = `${[loopId]}`;
+    }
+  });
 }
-initResponsiveTables();
+if (mediaContainers) { addMediaContainersAria(); }
+// -------- Add CDNs for Bootstrap and Remix icon libraries ---------
+
+// The respective CDN will be added to <head> only if a page contains an icon with a prefix specific to that library. We use forEach to loop through iconClasses because that's more efficient than using multiple if statements to make sure only the necessary CDNs are added.
+
+iconClasses.forEach(icon => {
+  const iconElement = document.querySelector(`[class*='${icon.class}']`);
+  if (iconElement) {
+    const metaTagRef = docHead.querySelector("meta[name='viewport']");
+    //Check if viewport meta tag exists
+    if (!metaTagRef) {
+      console.error("Document error: could not find viewport meta tag");
+      return;
+    }
 
-// This is called by anchor links via onlick="" in the HTML
-//  Added because default anchor links don't work on all browsers using D2L
-const jumpTo = (anchor) => {
-  document.getElementById(anchor).scrollIntoView();
-}  
+    const iconCDN = document.createElement("link");
+    iconCDN.setAttribute("href", icon.cdn);
+    iconCDN.setAttribute("rel", "stylesheet");
 
-// Image gallery
-const callImageGallery = () => {
-  // Create link element with font-awesome cdn and append it to the <head>
-  const docHead = document.querySelector("head");
-  const fontAwesomeCdn = document.createElement("link");
-  fontAwesomeCdn.setAttribute("rel", "stylesheet");
-  fontAwesomeCdn.setAttribute("href", "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css");
-  docHead.appendChild(fontAwesomeCdn);
-  // Begin image gallery
-  const imgGalleries = document.querySelectorAll(".image-gallery"),
-    imgBoxes = document.querySelectorAll(".image-box"),
-    modalBoxContent = `<div class="modal-box invisible">
-        <div class="gallery-overlay"></div>
-        <figure class="modal-box--image"><i class="fa-solid fa-x close-img"></i> <img src="#" alt="image here" /><figcaption class="img-caption"></figcaption></figure>
-        </div>
-        <button class="hide-gallery">Hide</button>`;
-
-  //  createModalBox.innerHTML = modalBoxContent;
-  for (let imgGallery = 0; imgGallery < imgGalleries.length; imgGallery++) {
-    imgGalleries[imgGallery].insertAdjacentHTML("afterbegin", modalBoxContent);
+    // Stylesheets are added after meta tag and before themepack stylesheets and scripts to ensure proper styling override
+    docHead.insertBefore(iconCDN, metaTagRef.nextSibling);
   }
-
-  if (document.querySelector(".modal-box")) {
-    const overlay = document.querySelector(".gallery-overlay"),
-      modalBox = document.querySelector(".modal-box"),
-      modalImg = document.querySelector(".modal-box--image img"),
-      modalCaption = document.querySelector(".img-caption"),
-      closeImg = document.querySelector(".close-img");
-
-    for (let imgBox = 0; imgBox < imgBoxes.length; imgBox++) {
-      imgBoxes[imgBox].onclick = function () {
-        modalBox.classList.remove("invisible");
-        let imgSrc = this.querySelector("img").src;
-        modalImg.src = imgSrc;
-        let imgCaption = this.querySelector("img").alt;
-        modalCaption.innerHTML = imgCaption;
-      }
-
-      // Make images tab-able
-      imgBoxes[imgBox].setAttribute("tabindex", "0");
-      imgBoxes[imgBox].addEventListener("keydown", function (enter) {
-        if (enter.key === "Enter") {
-          modalBox.classList.remove("invisible");
-          let imgSrc = this.querySelector("img").src;
-          modalImg.src = imgSrc;
-          let imgCaption = this.querySelector("img").alt;
-          modalCaption.innerHTML = imgCaption;
-        }
-      })
+});
+// Check if parent of .gallery-wrapper has .image-gallery class
+const checkGalleryWrapperParent = () => {
+  galleryWrappers.forEach((galleryWrapper) => {
+    if (!galleryWrapper.parentNode.classList.contains("image-gallery")) {
+      console.error(`Document error: parent of .gallery-wrapper does not have the .image-gallery class.`);
+      return;
     }
-    overlay.onclick = () => {
-      modalBox.classList.add("invisible");
+  });
+};
+checkGalleryWrapperParent();
+
+// Check if parent of .image-box has .gallery-wrapper class
+const checkImageBoxParent = () => {
+  imgBoxes.forEach((imgBox) => {
+    if (!imgBox.parentNode.classList.contains("gallery-wrapper")) {
+      console.error(`Document error: parent of .image-box does not have the .gallery-wrapper class.`);
+      return;
     }
-    window.onkeydown = (esc) => {
-      if (esc.keyCode === 27) {
-        modalBox.classList.add("invisible");
-      }
+  });
+};
+checkImageBoxParent();
+
+// Check if direct children of .gallery-wrapper have .image-box class
+const checkGalleryWrapperChildren = () => {
+  galleryWrappers.forEach((galleryWrapper) => {
+    let directChildren = Array.from(galleryWrapper.children).every(child => child.classList.contains("image-box"));
+      
+    if (!directChildren) {
+      console.error(`Document error: not all direct children of .gallery-wrapper have the .image-box class.`);
+      return;
     }
+  });
+};
+checkGalleryWrapperChildren();
 
-    closeImg.onclick = () => {
-      modalBox.classList.add("invisible");
-    }
-    const hideGalleries = document.querySelectorAll(".hide-gallery");
-    for (let hideGallery = 0; hideGallery < hideGalleries.length; hideGallery++) {
-      hideGalleries[hideGallery].addEventListener("click", () => {
-        hideGalleries[hideGallery].nextElementSibling.classList.toggle("invisible");
-        if (hideGalleries[hideGallery].innerHTML === "Hide") {
-          hideGalleries[hideGallery].innerHTML = "Show";
-        } else {
-          hideGalleries[hideGallery].innerHTML = "Hide";
-        }
-      });
-    }
+// Function to add Font Awesome CDN to the head
+const addFontAwesomeCdn = () => {
+  const fontAwesomeCdn = document.createElement("link");
+  fontAwesomeCdn.rel = "stylesheet";
+  fontAwesomeCdn.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css";
+  docHead.appendChild(fontAwesomeCdn);
+};
+
+// Function to create modal box HTML string
+const createModalBox = () => {
+  return `<div class="modal-box invisible">
+    <div class="gallery-overlay"></div>
+    <figure class="modal-box--image"><i class="fa-solid fa-x close-img"></i> <img src="#" alt="image here" /><figcaption class="img-caption"></figcaption></figure>
+    </div>
+    <button class="hide-gallery">Hide</button>`;
+};
+
+// Function to initialize the image gallery
+const callImageGallery = () => {
+  // Insert modal box HTML at the beginning of each image gallery
+  imgGalleries.forEach((gallery) => {
+    gallery.insertAdjacentHTML("afterbegin", createModalBox());
+  });
+
+  // Select necessary elements for later use
+  const overlay = document.querySelector(".gallery-overlay"),
+        modalBox = document.querySelector(".modal-box"),
+        modalImg = document.querySelector(".modal-box--image img"),
+        modalCaption = document.querySelector(".img-caption"),
+        closeImg = document.querySelector(".close-img"),
+        hideGalleries = document.querySelectorAll(".hide-gallery");
+
+  // Function to show modal with specified image source and caption
+  const showModal = (imgSrc, imgCaption) => {
+    modalBox.classList.remove("invisible");
+    modalImg.src = imgSrc;
+    modalCaption.innerHTML = imgCaption;
   };
-}
-if (imageGallery) {
-  callImageGallery();
-}
 
-// Vocab list widget
-const callVocabList = () => {
-  if (vocabCloseBtns) {
-    for(let btn = 0; btn < vocabCloseBtns.length; btn++) {
-      vocabCloseBtns[btn].addEventListener("click", () => {
-        for(let node = 0; node < vocabLists[btn].children.length;node++) {
-          if(vocabLists[btn].children[node].tagName == "DD") {
-            vocabLists[btn].children[node].removeAttribute("style");
-          }
-          if(vocabLists[btn].children[node].tagName == "DT") {
-            vocabLists[btn].children[node].removeAttribute("class");
-          }
-        }});    
-    }
-  }  
-  for (let activeTerm = 0; activeTerm < vocabTerms.length; activeTerm++) {
-    vocabTerms[activeTerm].addEventListener("click", function() {
-      this.classList.toggle("active");
-      let termPanel = this.nextElementSibling;
-      if (termPanel.style.display === "block") { termPanel.removeAttribute("style"); } 
-      else { termPanel.style.display = "block"; }
+  // Function to hide the modal
+  const hideModal = () => {
+    modalBox.classList.add("invisible");
+  };
+
+  // Attach event listeners to each image box
+  imgBoxes.forEach((imgBox) => {
+    // Show modal on click
+    imgBox.addEventListener("click", function () {
+      showModal(this.querySelector("img").src, this.querySelector("img").alt);
     });
 
-    vocabTerms[activeTerm].addEventListener("keydown", function(e) {
-      if(e.key === "Enter") {
-      this.classList.toggle("active");
-      let termPanel = this.nextElementSibling;
-      if (termPanel.style.display === "block") { termPanel.removeAttribute("style"); } 
-      else { termPanel.style.display = "block"; }
+    // Make images tab-able and show modal on Enter key press
+    imgBox.setAttribute("tabindex", "0");
+    imgBox.addEventListener("keydown", function (event) {
+      if (event.key === "Enter") {
+        showModal(this.querySelector("img").src, this.querySelector("img").alt);
       }
     });
-  }
-}
-if (vocabListWidget) {callVocabList();}
-
-// Media Container
-const addMediaContainersAria = () => {
-  mediaContainers.forEach((eachContainer, index) => {
-    // loopID: find the current index value, convert it to its letter equivalent, then convert to lowercase
-    let loopId = String.fromCharCode(index + 65).toLowerCase();
-    let mediaObject = eachContainer.querySelector(".media-object");
-    let iframe = mediaObject.firstElementChild;
-    let mediaInfo = mediaObject.nextElementSibling;  
+  });
 
-    // If element DOES NOT have "aria-describedby" && it DOES have a sibling element.
-    if (!iframe.hasAttribute("aria-describedby") && mediaInfo != null) {
-      iframe.setAttribute("aria-describedby", `${loopId}`);
-      mediaInfo.id = `${[loopId]}`;
+  // Attach event listeners for overlay, Escape key, and close button to hide the modal
+  overlay.onclick = hideModal;
+  window.onkeydown = (event) => {
+    if (event.keyCode === 27) {
+      hideModal();
     }
+  };
+  closeImg.onclick = hideModal;
+
+  // Attach event listeners for "Hide/Show" button to toggle gallery visibility
+  hideGalleries.forEach((hideGallery) => {
+    hideGallery.addEventListener("click", () => {
+      hideGallery.nextElementSibling.classList.toggle("invisible");
+      hideGallery.innerHTML = hideGallery.innerHTML === "Hide" ? "Show" : "Hide";
+    });
   });
-}
-if (mediaContainers) {addMediaContainersAria();}
+};
 
+// Check if imageGallery exists before initializing the image gallery
+if (imageGallery) {
+  // Add Font Awesome CDN and initialize the image gallery
+  addFontAwesomeCdn();
+  callImageGallery();
+}
 //Tabs Widget
 const callTabsWidget = () => {
 
   let tabsWidgetsNum = 0;
 
-  tabsWidgets.forEach((tab,index) => {
-    let tabInputs = tab.querySelectorAll("input")
-    let tabLabels = tab.querySelectorAll("label")
-    let tabDivs = tab.querySelectorAll("div")
+  tabsWidgets.forEach((tab, index) => {
+    let tabInputs = tab.querySelectorAll("input");
+    let tabLabels = tab.querySelectorAll("label");
+    let tabDivs = tab.querySelectorAll("div");
+
+    //Check that there are more than just one tab
+    if (tabInputs.length < 2 || tabLabels.length < 2 || tabDivs.length < 2) {
+      console.error("Document error: please add more than just one tab for tabs widget");
+      return;
+    }
+
+    // Check amount of tab elements present 
+    if (tabInputs.length < tabLabels.length || tabInputs.length < tabDivs.length) {
+      console.error("Document error: missing tab input(s) in tab widget");
+      return;
+    }
+
+    if (tabLabels.length < tabInputs.length || tabLabels.length < tabDivs.length) {
+      console.error("Document error: missing tab label(s) in tab widget");
+      return;
+    }
 
     let groupNum = index + 1;
 
@@ -243,97 +297,629 @@ const callTabsWidget = () => {
     tab.setAttribute("role", "region");
     tab.setAttribute("aria-label", `tab group ${groupNum}`)
 
-    for(tabIndex = 0; tabIndex < tabInputs.length; tabIndex++) {
+    for (tabIndex = 0; tabIndex < tabInputs.length; tabIndex++) {
 
       let tabNum = tabsWidgetsNum + 1;
 
+      // Check on present variables
+      if (tabInputs == null) {
+        console.error("Document error: no inputs found for tabs widget");
+        return;
+      }
+
+      if (tabLabels == null) {
+        console.error("Document error: no labels found for tabs widget");
+        return;
+      }
+
+      if (tabInputs == null) {
+        console.error("Document error: no divs (tab panels) found for tabs widget");
+        return;
+      }
+
       //Add class, id, name, and aria-described by for inputs
       tabInputs[tabIndex].classList.add("tab-input");
       tabInputs[tabIndex].setAttribute("type", "radio")
       tabInputs[tabIndex].setAttribute("id", `tab${tabNum}`);
-      tabInputs[tabIndex].setAttribute("name", `hint-group-${groupNum}` )
-      tabInputs[tabIndex].setAttribute("aria-describedby", `tabHeading${tabNum}`)
+      tabInputs[tabIndex].setAttribute("name", `hint-group-${groupNum}`);
+      tabInputs[tabIndex].setAttribute("aria-describedby", `tabHeading${tabNum}`);
+
       //Add class and for for labels
       tabLabels[tabIndex].classList.add("tab-header");
-      tabLabels[tabIndex].setAttribute("for", `tab${tabNum}`)
+      tabLabels[tabIndex].setAttribute("for", `tab${tabNum}`);
+
       //Add class, tabindex, and id for divs
-      tabDivs[tabIndex].classList.add("tab-panel")
-      tabDivs[tabIndex].setAttribute("tabindex", 0)
-      tabDivs[tabIndex].setAttribute("id", `tabHeading${tabNum}`)
+      if (tabDivs[tabIndex]) {
+        tabDivs[tabIndex].classList.add("tab-panel");
+        tabDivs[tabIndex].setAttribute("tabindex", 0);
+        tabDivs[tabIndex].setAttribute("id", `tabHeading${tabNum}`);
+      }
+
       //Add attributes for hide tab
-      if(tabIndex + 1 == tabInputs.length) {
-        tabLabels[tabIndex].classList.add("hide-tab")
+      if (tabIndex + 1 == tabInputs.length) {
+        tabLabels[tabIndex].classList.add("hide-tab");
         tabInputs[tabIndex].checked = true;
-        tabDivs[tabIndex].classList.add("hide-panel")
+        if (tabDivs[tabIndex]) {
+          tabDivs[tabIndex].classList.add("hide-panel");
+        }
       }
       tabsWidgetsNum++;
     }
   })
 }
-if (tabsWidgets) {callTabsWidget();}
+if (tabsWidgets) { callTabsWidget(); }
+// Vocab list widget
+const callVocabList = () => {
 
-// Toggle footnotes
-const toggleBtns = document.querySelectorAll(".toggle-btn, .toggle-footnotes");
+  const handleVocabClose = (vocabItem) => {
+    if (vocabItem) {
+      let listDefinitions = vocabItem.querySelectorAll("dd");
+      let listTerms = vocabItem.querySelectorAll("dt");
 
-if (document.querySelector(".toggle-btn") || document.querySelector(".toggle-footnotes")) {
-  for (let toggleBtn = 0; toggleBtn < toggleBtns.length; toggleBtn++) {
-    // Add tabindex
-    toggleBtns[toggleBtn].setAttribute("tabindex", "0");
+      // If the button is clicked and it is the DD - then hide it 
+      listDefinitions.forEach((definition) => {
+        definition.style.display = "none";
+      })
 
-    // Show/hide on click
-    toggleBtns[toggleBtn].addEventListener("click", () => {      
-      toggleBtns[toggleBtn].nextElementSibling.classList.toggle("show");      
-    })
+      // If the button is clicked and it is the DT - then remove active class
+      listTerms.forEach((term) => {
+        term.classList.remove("active");
+      })
+    }
+  }
+
+  // Check if the vocab list has one or multiple items within
+  vocabLists.forEach((list) => {
 
-    // Show/hide on enter for users who use tab
-    toggleBtns[toggleBtn].addEventListener("keydown", (enter) => {
-      if (enter.keyCode === 13) {
-        toggleBtns[toggleBtn].nextElementSibling.classList.toggle("show");
+    //Count and ensure it has more than 1 term and definition
+    let terms = 0;
+    let definitions = 0;
+    let closeBtnPresent = false;
+
+    // If the list contains more than one set of <dt> and <dd> tags then add a close button
+    for (let listIndex = 0; listIndex < list.children.length; listIndex++) {
+      // Count terms
+      if (list.children[listIndex].tagName == "DT") {
+        list.children[listIndex].setAttribute("tabindex", "0");
+        terms++;
       }
-    })
+      // Count definitions
+      if (list.children[listIndex].tagName == "DD") {
+        definitions++;
+      }
+
+      //Check for close all button
+      if (list.children[listIndex].tagName == "BUTTON") {
+        closeBtnPresent = true;
+      }
+    }
+
+    // Check for terms and definitions in the vocab list
+    if (terms < 1) {
+      console.error("Document error: no terms found in vocab list");
+      return;
+    }
+
+    if (definitions < 1) {
+      console.error("Document error: no definitions found in vocab list");
+      return;
+    }
+
+    if (terms > definitions) {
+      console.error("Document error: more terms than definitions in vocab list")
+    }
+
+    // If there are more than 2 terms and 2 definitions, then check for a button
+    if (terms >= 2 && definitions >= 2) {
+
+      // If there isn't a close button then add one
+      if (!closeBtnPresent) {
+        // Add a close button
+        const closeButton = document.createElement("button");
+        closeButton.textContent = "Close All"; // Set the button text as needed
+        // Add click event listener for button
+        closeButton.addEventListener("click", () => handleVocabClose(list))
+
+        // Add keydown event listener for button
+        closeButton.addEventListener("keydown", (event) => {
+          if (event.key == "Enter") {
+            handleVocabClose(list);
+          }
+        })
+        // Append the button to the end of the list
+        list.appendChild(closeButton);
+      }
+      // If button is present, remove it
+      else {
+        let closeBtn = list.querySelector("button");
+
+        // Add the same event listeners as if you were to add a new button
+        closeBtn.addEventListener("click", () => handleVocabClose(list))
+
+        closeBtn.addEventListener("keydown", (event) => {
+          if (event.key == "Enter") {
+            handleVocabClose(list);
+          }
+        })
+
+      }
+    } else {
+
+      // List does not have more than 2 pairs of terms and definitions
+
+      // Don't add a close button since there is only one term, but remove the button if it is present
+      for (let listIndex = 0; listIndex < list.children.length; listIndex++) {
+
+        //Check for close all button
+        if (list.children[listIndex].tagName == "BUTTON") {
+          closeBtnPresent = true;
+        }
+      }
+
+      if (closeBtnPresent) {
+        let closeBtn = list.querySelector("button");
+        closeBtn.style.display = "none";
+      }
+    }
+  })
+
+  // Loop through all the terms and apply click and keydown event
+  for (let activeTerm = 0; activeTerm < vocabTerms.length; activeTerm++) {
+    // Add click event for toggling vocab terms
+    vocabTerms[activeTerm].addEventListener("click", function () {
+      // When clicked, toggle the active class
+      this.classList.toggle("active");
+
+      // Target the definition <dd> element
+      let termPanel = this.nextElementSibling;
+
+      // Toggle the display from none to block
+      if (termPanel.style.display === "block") {
+        termPanel.style.display = "none";
+      } else {
+        termPanel.style.display = "block";
+      }
+
+      // Start a while loop to continue through the DOM
+      while (termPanel.nextElementSibling) {
+        // Move to the next sibling element
+        termPanel = termPanel.nextElementSibling;
+
+        // Check if the current element is a <dd>
+        if (termPanel.tagName === "DD") {
+          // Toggle the display from none to block
+          if (termPanel.style.display === "block") {
+            termPanel.style.display = "none";
+          } else {
+            termPanel.style.display = "block";
+          }
+        } else {
+          // Stop the loop if the current element is not a <dd>
+          break;
+        }
+      }
+    });
+
+
+    // Add keydown event for toggling vocab terms
+    vocabTerms[activeTerm].addEventListener("keydown", function (e) {
+
+      // When user hits enter, toggle the active class
+      if (e.key === "Enter") {
+        // When clicked, toggle the active class
+        this.classList.toggle("active");
+
+        // Target the definition <dd> element
+        let termPanel = this.nextElementSibling;
+
+        // Toggle the display from none to block
+        if (termPanel.style.display === "block") {
+          termPanel.style.display = "none";
+        } else {
+          termPanel.style.display = "block";
+        }
+        // Start a while loop to continue through the DOM
+        while (termPanel.nextElementSibling) {
+          // Move to the next sibling element
+          termPanel = termPanel.nextElementSibling;
+
+          // Check if the current element is a <dd>
+          if (termPanel.tagName === "DD") {
+            // Toggle the display from none to block
+            if (termPanel.style.display === "block") {
+              termPanel.style.display = "none";
+            } else {
+              termPanel.style.display = "block";
+            }
+          } else {
+            // Stop the loop if the current element is not a <dd>
+            break;
+          }
+        }
+      }
+    });
   }
 }
+if (vocabListWidget) { callVocabList(); }
+// Clean up HTML
+const cleanMarkup = () => {
+  // Remove role="presentation" attr from any element that has it  
+  if (rolePres) {
+    rolePres.forEach((roleElem) => roleElem.removeAttribute("role"));
+  }
+  // Set functino to remove atrributes from elements
+  const discardAttributes = (element, ...attributes) => {
+    attributes.forEach((attribute) => element.removeAttribute(attribute));
+  }
+  // Remove attributes from tables
+  const tableElems = document.querySelectorAll("table, thead, tbody, tr, th, td");
+  tableElems.forEach((elem) => {
+    discardAttributes(elem, "cellspacing", "cellpadding", "width", "style");
+  });
+};
+cleanMarkup();
+// Content Lock Widget
 
-// Change footnotes from 'show' to 'hide'
-const footnotes = document.querySelector(".toggle-footnotes");
+// Save text content of unlock button
+const unlockContent = [];
 
-if(footnotes) {
-  footnotes.addEventListener("click", () => {
-    footnotes.innerHTML = (footnotes.innerHTML === "[Show Footnotes]") ? "[Hide Footnotes]" : "[Show Footnotes]";
+contentUnlockBtns.forEach((button) => {
+  unlockContent.push(button.textContent)
+})
+
+// Create an object that keeps track of keys and their statuses
+let contentLockData = JSON.parse(localStorage.getItem("contentLockData")) || {};
+
+if (lockedContent) {
+
+  // Checks the URL for the course number
+  const currentURL = window.parent.location.href;
+  const match = currentURL.match(/\/content\/(\d+)/);
+  const courseNumber = match ? match[1] : null;
+
+  // Add event listener for storage changes
+  window.addEventListener("storage", (event) => {
+    if (courseNumber) {
+      handleLocalStorageUpdate(event, courseNumber);
+    }
+  });
+
+  if (courseNumber) {
+
+    // Check if the course data object has the course number
+    if (!contentLockData.hasOwnProperty(courseNumber)) {
+      contentLockData[courseNumber] = {
+        keys: {},
+        id: 0,
+      };
+    } else {
+      // Reset the id count to 0 when the page is loaded
+      contentLockData[courseNumber].id = 0;
+    }
+
+    // Get key number for each content area
+    lockedContent.forEach((contentArea, index) => {
+      let keyNum = contentArea.getAttribute("data-key");
+
+      // Check if key already exists within the course, if it doesn't, add the key
+      if (!contentLockData[courseNumber].keys[keyNum]) {
+
+        // Add the key to the course keys
+        contentLockData[courseNumber].keys[keyNum] = false;
+      }
+    });
+
+    // Go through each show/hide button and add click listener
+    contentUnlockBtns.forEach((button, index) => {
+
+      button.addEventListener("click", function () {
+        const keyNum = lockedContent[index].getAttribute("data-key");
+
+        // Add alert to ensure the user confirms the action to unlock the content
+        const confirmed = window.confirm(`Please confirm: ${unlockContent[index]}`)
+
+        if (confirmed) {
+
+
+          // Toggle the key status
+          contentLockData[courseNumber].keys[keyNum] = !contentLockData[courseNumber].keys[keyNum];
+
+          // Toggle classes based on key status
+          if (contentLockData[courseNumber].keys[keyNum]) {
+            lockedContent[index].classList.add("open");
+            contentLockInstructions[index].classList.add("complete");
+          } else {
+            lockedContent[index].classList.remove("open");
+            contentLockInstructions[index].classList.remove("complete");
+          }
+
+          // Save the updated contentLockData object to local storage
+          localStorage.setItem("contentLockData", JSON.stringify(contentLockData));
+
+          // Update the hidden content based on the key status
+          checkHiddenContent(courseNumber);
+        }
+      });
+
+      // Apply initial classes based on key status
+      const keyNum = lockedContent[index].getAttribute("data-key");
+
+      // Make sure contentLockData[courseNumber] is initialized
+      if (!contentLockData[courseNumber]) {
+        contentLockData[courseNumber] = {
+          keys: {},
+          id: 0
+        };
+      }
+
+      if (contentLockData[courseNumber].keys[keyNum]) {
+        lockedContent[index].classList.add("open");
+        contentLockInstructions[index].classList.add("complete");
+      }
+    });
+
+    // Call the checkHiddenContent function initially
+    checkHiddenContent(courseNumber);
+
+    // Save the updated contentLockData object to local storage
+    localStorage.setItem("contentLockData", JSON.stringify(contentLockData));
+  }
+}
+
+// Function to run when local storage is updated
+function handleLocalStorageUpdate(event, courseNumber) {
+  if (event && event.key === "contentLockData" && event.newValue) {
+    // Update contentLockData variable
+    contentLockData = JSON.parse(event.newValue);
+    // Run your code here
+    checkHiddenContent(courseNumber);
+  }
+}
+
+// Check content areas function
+
+function checkHiddenContent(courseNumber) {
+
+  // Get key number for each content area
+  lockedContent.forEach((contentArea, index) => {
+    let keyNum = contentArea.getAttribute("data-key");
+    // Toggle classes based on key status
+    if (contentLockData[courseNumber].keys[keyNum]) {
+      lockedContent[index].classList.add("open");
+      contentLockInstructions[index].classList.add("complete");
+    } else {
+      lockedContent[index].classList.remove("open");
+      contentLockInstructions[index].classList.remove("complete");
+    }
+  });
+}
+// Flip Card Widget
+function callFlipCardWidget() {
+  // Loop through each card
+  flipCards.forEach((flipCardGroup) => {
+
+    let flipCard = flipCardGroup.querySelectorAll(".flip-card");
+    let innerFlipCard = flipCardGroup.querySelectorAll(".inner-card");
+    let numOfCardsInGroup = flipCardGroup.children.length;
+
+    // Check to ensure each card has the .flip-card class
+    if (numOfCardsInGroup !== flipCard.length) {
+      console.error("Document error: missing .flip-card class for flip card widget");
+      return; // Stop execution if there's an error
+    }
+    // Check to ensure each card has the .inner-card class
+    if (numOfCardsInGroup !== innerFlipCard.length) {
+      console.error("Document error: missing .inner-card class for flip card widget");
+      return; // Stop execution if there's an error
+    }
+
+    flipCard.forEach((card) => {
+      let innerFlipCard = card.querySelectorAll(".inner-card");
+
+      innerFlipCard.forEach((innerCard) => {
+        innerCard.setAttribute("tabindex", 0); // Add tab index to allow flip cards to be tabbable
+        innerCard.addEventListener("click", () => {
+          innerCard.offsetHeight; // Force reflow by accessing the offsetHeight property
+          innerCard.classList.toggle("flip");
+        })
+
+
+        // Add a keydownevent event to each card
+        innerCard.addEventListener("keydown", (event) => {
+          if (event.key === "Enter") {
+            // Force reflow by accessing the offsetHeight property
+            innerCard.offsetHeight;
+            innerCard.classList.toggle("flip");
+          }
+        })
+      })
+    })
   })
 }
 
-// Animated border for HRS theme
-const hrsBorders = document.querySelectorAll(".hrs-border");
-
-if(hrsBorders) {
-  for (let hrsBorder = 0; hrsBorder < hrsBorders.length; hrsBorder++) {
-    const callAnimateBorder = new IntersectionObserver(entries => {
-      // Loop over the entries
-      entries.forEach(entry => {
-        // If the element is visible
-        if (entry.isIntersecting) {
-          // Add the animation class
-          entry.target.classList.add('animate-border');
-        }
+// If flip cards are present in the file, run this code
+if (flipCards) { callFlipCardWidget() }
+if (document.querySelector("body[focus-reader]")) {
+
+  // Initializations
+  let focusOn = false;
+
+  const fr_contentWrapper = document.querySelector("#content-wrapper");
+  const fr_thisBody = document.querySelector("body[focus-reader]");
+
+  // Add fontAwesome to header
+  const fr_pageHead = document.querySelector("head");
+  const fontAweLink = document.createElement("link");
+  fontAweLink.rel = "stylesheet";
+  fontAweLink.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css";
+  fr_pageHead.append(fontAweLink);
+
+  // add intersection observer to head tag
+  const observerScript = document.createElement("script");
+  observerScript.setAttribute("src", "https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver");
+  fr_pageHead.append(observerScript);
+
+  // Create Switches container
+  const fr_switchesContainer = document.createElement("div");
+  fr_switchesContainer.className = "focus-reader-switches";
+  fr_thisBody.append(fr_switchesContainer);
+
+  // Focus-text container
+  const fr_focusTextContainer = document.createElement("div");
+  fr_switchesContainer.append(fr_focusTextContainer);
+
+  // Focus-text Icon
+  const fr_focusTextIcon = document.createElement("p");
+  fr_focusTextIcon.innerHTML = "Focus Text"
+  fr_focusTextContainer.append(fr_focusTextIcon);
+
+  // info icon
+  const fr_infoIcon = document.createElement("i");
+  fr_infoIcon.classList.add("fa-solid");
+  fr_infoIcon.classList.add("fa-circle-info");
+  fr_focusTextContainer.append(fr_infoIcon);
+
+  // info tooltip
+  const fr_infoTooltip = document.createElement("span");
+  const focusReaderTooltipText = "Highlight text as you scroll";
+  fr_infoTooltip.classList.add("info-tooltip");
+  fr_infoTooltip.innerHTML = focusReaderTooltipText;
+  fr_infoIcon.append(fr_infoTooltip);
+
+  // Focus-text switch button
+  const fr_focusTextSwitch = document.createElement("button");
+  fr_focusTextSwitch.id = "focus-text";
+  fr_focusTextSwitch.innerHTML = (focusOn) ? `<i class="fas fa-toggle-on"></i>` : `<i class="fas fa-toggle-off"></i>`;
+  fr_focusTextContainer.append(fr_focusTextSwitch);
+
+  // Focus-text logic
+  fr_focusTextSwitch.addEventListener("click", () => {
+    if (focusOn) {
+      focusOn = !focusOn;
+      fr_contentWrapper.removeAttribute("on");
+      fr_focusTextSwitch.innerHTML = (focusOn) ? `<i class="fas fa-toggle-on"></i>` : `<i class="fas fa-toggle-off"></i>`;
+      removeSpans(fr_contentWrapper);
+    } else {
+      focusOn = !focusOn;
+      fr_contentWrapper.setAttribute("on", "");
+      fr_focusTextSwitch.innerHTML = (focusOn) ? `<i class="fas fa-toggle-on"></i>` : `<i class="fas fa-toggle-off"></i>`;
+      const elements = document.querySelectorAll("#content-wrapper .content-body :is(p, li, dd, dt, blockquote)");
+      elements.forEach(element => {
+        traverseAndWrapTextInSpans(element, focusText);
       });
+    }
+  });
+
+  const options = {
+    root: null,
+    rootMargin: '-48.9% 0px',
+    threshold: 0.00
+  };
+
+  const focusText = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.closest("span").classList.add("focus-text");
+      } else {
+        entry.target.closest("span").classList.remove("focus-text");
+      }
+    });
+  }, options);
+
+
+}
+
+function traverseAndWrapTextInSpans(node, focusText) {
+  if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
+    // Split the text into words
+    const words = node.textContent.split(' ');
+
+    // Wrap each word in a span
+    words.forEach(word => {
+      if (word !== '') {
+        const span = document.createElement("span");
+        span.textContent = word + ' ';  // Add a space after the word to preserve spacing
+
+        // Observe the span
+        focusText.observe(span);
+
+        // Insert the span before the text node
+        node.parentNode.insertBefore(span, node);
+      }
+    });
+
+    // Remove the original text node
+    node.parentNode.removeChild(node);
+  } else if (node.nodeType === Node.ELEMENT_NODE) {
+    // Recursively process child nodes
+    Array.from(node.childNodes).forEach(childNode => {
+      traverseAndWrapTextInSpans(childNode, focusText);
     });
-    callAnimateBorder.observe(hrsBorders[hrsBorder]);
   }
-};
+}
+
+function removeSpans(node) {
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    // If the node is a span with the class 'focus-text', an empty class attribute, is empty, or has no attributes, replace it with a text node
+    if (node.tagName === 'SPAN' && (node.className === 'focus-text' || node.className === '' || node.textContent.trim() === '' || node.attributes.length === 0)) {
+      const textNode = document.createTextNode(node.textContent);
+      node.parentNode.insertBefore(textNode, node);
+      node.parentNode.removeChild(node);
+    } else {
+      // Recursively process child nodes
+      Array.from(node.childNodes).forEach(childNode => {
+        removeSpans(childNode);
+      });
+    }
+  }
+}
+// Change footnotes from 'show' to 'hide'
+const footnotes = document.querySelector(".toggle-footnotes");
 
+if (footnotes) {
+  footnotes.addEventListener("click", () => {
+    footnotes.innerHTML = (footnotes.innerHTML === "[Show Footnotes]") ? "[Hide Footnotes]" : "[Show Footnotes]";
+  })
+}
 // Add h5p resizer dynamically
 h5pResizer.setAttribute("src", "https://pima.h5p.com/js/h5p-resizer.js");
 h5pResizer.setAttribute("charset", "UTF-8");
 h5pResizer.setAttribute("defer", "");
 
-h5pIframes.forEach(function(h5pIframe) {
-  const src = h5pIframe.getAttribute("src");
-  if (src.includes("/d2l/common/dialogs/quickLink") || src.includes("https://pima.h5p.com/content") && !h5pResizerExists) {
-    docHead.appendChild(h5pResizer);
-  }
-});
+// If any iframes are detected run this function
+function checkIframes() {
+  h5pIframes.forEach(function (h5pIframe) {
+    const src = h5pIframe.getAttribute("src");
+    if (src.includes("/d2l/common/dialogs/quickLink") || src.includes("https://pima.h5p.com/content") || src.includes("h5p") && !h5pResizerExists) {
+      docHead.appendChild(h5pResizer);
+    }
+  });
+}
+
+// Call function if iframes exist
+if (h5pIframes) { checkIframes() }
 
+
+// Helper JS for Responsive Tables
+const initResponsiveTables = () => {
+  for (let table = 0; table < tables.length; table++) {
+    let headertext = [],
+      headers = tables[table].querySelectorAll(".display table th, table.display th, .display-lg table th, table.display-lg th"),
+      tablebody = tables[table].querySelector(".display table tbody, table.display tbody, .display-lg table tbody, table.display-lg tbody");
+    for (let header = 0; header < headers.length; header++) {
+      let current = headers[header];
+      headertext.push(current.textContent.replace(/\r?\n|\r/, ""));
+    }
+    for (let y = 0, row; row = tablebody.rows[y]; y++) {
+      for (let j = 0, col; col = row.cells[j]; j++) {
+        col.setAttribute("data-th", headertext[j]);
+      }
+    }
+  }
+}
+if (tables) {
+  initResponsiveTables();
+}
 // Call function with jQuery scripts
 const callJquery = () => {
   // Toggle Button's Arrow Right Points Down on Click
@@ -358,4 +944,63 @@ const callJquery = () => {
   });
   $(".tooltip .video-container").parent().css("width", "450px");
 }
-callJquery();
+callJquery();
+// This is called by anchor links via onlick="" in the HTML
+//  Added because default anchor links don't work on all browsers using D2L
+const jumpTo = (anchor) => {
+  document.getElementById(anchor).scrollIntoView();
+}
+// Array for all themes that require theme specific js
+const customJsThemes = ["ecn", "hrs", "ss"];
+
+//Search links for theme styles
+const themeJsCheck = () => {
+
+  const links = document.querySelectorAll("link");
+
+  links.forEach((link) => {
+    const href = link.getAttribute("href");
+    customJsThemes.forEach((theme) => {
+      // If theme requires custom js, run addThemeScript()
+      if (href && href.includes(`/${theme}/styles.css`)) {
+        addThemeScript(theme);
+      }
+    });
+  });
+
+  // Adds a script to the head for that particular theme
+  function addThemeScript(theme) {
+    let themeScript = document.createElement("script");
+    // URL references theme-specific js module from CDN
+    themeScript.src = `https://cdn.jsdelivr.net/npm/@pimaonline/pimaonline-themepack/dist/js/themes/${theme}.js`;
+    document.head.appendChild(themeScript);
+  }
+}
+
+themeJsCheck()
+// Toggle footnotes
+const toggleBtns = document.querySelectorAll(".toggle-btn, .toggle-footnotes");
+
+if (toggleBtns) {
+  if (document.querySelector(".toggle-btn") || document.querySelector(".toggle-footnotes")) {
+    for (let toggleBtn = 0; toggleBtn < toggleBtns.length; toggleBtn++) {
+      // Add tabindex
+      toggleBtns[toggleBtn].setAttribute("tabindex", "0");
+      // Show/hide on click
+      toggleBtns[toggleBtn].addEventListener("click", () => {
+        if (toggleBtns[toggleBtn].nextElementSibling) {
+          toggleBtns[toggleBtn].nextElementSibling.classList.toggle("show");
+        }
+      })
+
+      // Show/hide on enter for users who use tab
+      toggleBtns[toggleBtn].addEventListener("keydown", (enter) => {
+        if (enter.keyCode === 13) {
+          if (toggleBtns[toggleBtn].nextElementSibling) {
+            toggleBtns[toggleBtn].nextElementSibling.classList.toggle("show");
+          }
+        }
+      })
+    }
+  }
+}