@pimaonline/pimaonline-themepack 3.10.13 → 3.12.1

package/dist/js/scripts2.js

@@ -1,6 +1,7 @@
 const columnWidget = document.querySelector("#column-widget");
+const contentLockWidgets = document.querySelectorAll(".content-lock-widget");
 const contentLockInstructions = document.querySelectorAll(".instructions");
-const contentUnlockBtns = document.querySelectorAll(".unlock-btn");
+const contentLockQuizzes = document.querySelectorAll(".quiz");
 const contentWrapper = document.querySelector("#content-wrapper");
 const courseBody = document.querySelector("body");
 const docHead = document.querySelector("head");
@@ -285,23 +286,26 @@ const callTabsWidget = () => {
     tab.setAttribute("role", "region");
     tab.setAttribute("aria-label", `tab group ${groupNum}`)
 
+    // Iterate over the entries of the tabInputs NodeList using a for loop. Inside the loop, tabIndex is the index of the current tab input element. tabInput is the actual input element itself.
     for (tabIndex = 0; tabIndex < tabInputs.length; tabIndex++) {
 
+      // Add the hide-tab class to the "Hide" label
+      if (tabLabels[tabIndex].textContent.trim() === "Hide") {
+        tabLabels[tabIndex].classList.add("hide-tab");
+      }
+
       let tabNum = tabsWidgetsNum + 1;
 
       // Check on present variables
-      if (tabInputs == null) {
+      if (tabInputs === null) {
         console.log("Document error: no inputs found for tabs widget");
+        console.log("Document error: no divs (tab panels) found for tabs widget");
       }
 
-      if (tabLabels == null) {
+      if (tabLabels === null) {
         console.log("Document error: no labels found for tabs widget");
       }
 
-      if (tabInputs == null) {
-        console.log("Document error: no divs (tab panels) found for tabs widget");
-      }
-
       //Add class, id, name, and aria-described by for inputs
       tabInputs[tabIndex].classList.add("tab-input");
       tabInputs[tabIndex].setAttribute("type", "radio")
@@ -321,13 +325,39 @@ const callTabsWidget = () => {
       }
 
       //Add attributes for hide tab
-      if (tabIndex + 1 == tabInputs.length) {
-        tabLabels[tabIndex].classList.add("hide-tab");
-        tabInputs[tabIndex].checked = true;
+      if (tabIndex ===  0) { // Change this condition to check the first tab
+        tabLabels[tabIndex].classList.remove("hide-tab"); // Remove the hide-tab class
+        tabInputs[tabIndex].checked = true; // Check the first tab input
+        if (tabDivs[tabIndex]) {
+          tabDivs[tabIndex].classList.remove("hide-panel"); // Remove the hide-panel class
+        }
+      } else {
+        tabInputs[tabIndex].checked = false;
         if (tabDivs[tabIndex]) {
           tabDivs[tabIndex].classList.add("hide-panel");
         }
       }
+
+      // Add click event listener to each tab label
+      tabLabels[tabIndex].addEventListener("click", ((index) => {
+        return () => {
+          // Check if the clicked label is the "Hide" label
+          if (tabLabels[index].textContent.trim() === "Hide") {
+            // Hide all tab panels
+            tabDivs.forEach(div => div.classList.add("hide-panel"));
+          } else {
+            // Uncheck all tab inputs
+            tabInputs.forEach(input => input.checked = false);
+            // Check the clicked tab input
+            tabInputs[index].checked = true;
+            // Show the clicked tab panel
+            if (tabDivs[index]) {
+              tabDivs[index].classList.remove("hide-panel");
+            }
+          }
+        };
+      })(tabIndex)); // Immediately invoke the function with the current tabIndex
+
       tabsWidgetsNum++;
     }
   })
@@ -541,122 +571,361 @@ const cleanMarkup = () => {
   });
 };
 cleanMarkup();
-// Content Lock Widget
+const handleContentLockWidget = (contentLockWidgets) => {
+
+  const lockedContentQuizIncorrectAnswer = "Incorrect response. Please try again."; // Error response for quizzes
+  const lockedContentQuizEmptyResponse = "Please select an option before submitting."; // Error response for quizzes
+  const unlockBtnContent = []; // Save text content of unlock button
+
+  // ––––––––– Functions –––––––––
+
+  // Function to run when local storage is updated
+  const handleContentLockLocalStorageUpdate = (event, courseNumber) => {
+    if (event && event.key === "contentLockData" && event.newValue) {
+      // Update contentLockData variable
+      contentLockData = JSON.parse(event.newValue);
+      // Run your code here
+      checkHiddenContent(courseNumber);
+    }
+  }
+
+  // Function that checks key status, toggles classes, and updates local storage, and checks for other content areas
+  const unlockCheck = (contentLockKeyNum, courseNumber, buttonIndex) => {
+
+    // Toggle the key status to true to unlock the content
+    contentLockData[courseNumber].keys[contentLockKeyNum] = true;
+
+    // Toggle classes based on key status
+    if (contentLockData[courseNumber].keys[contentLockKeyNum]) {
+      lockedContent[buttonIndex].classList.add("open");
+      contentLockInstructions[buttonIndex].classList.add("complete");
+    } else {
+      lockedContent[buttonIndex].classList.remove("open");
+      contentLockInstructions[buttonIndex].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);
+  }
+
+  // Function to display the error message from the form
+  const displayError = (quizForm, contentLockErrorMessage) => {
+
+    // Create a new paragraph element for the error message
+    let contentLockerrorContainer = quizForm.querySelector(".error-container");
+    let errorMessage = document.createElement("span");
+
+    // Clear any previous error messages
+    contentLockerrorContainer.innerHTML = "";
+
+    // Clear error message
+    errorMessage.textContent = "";
+
+    // Append the blank text message to the container
+    contentLockerrorContainer.appendChild(errorMessage);
+
+    // Add a timer to apply the new error message to ensure the user understands it is a new error message
+    setTimeout(function () {
+
+      // Clear error message
+      errorMessage.textContent = contentLockErrorMessage;
+
+      // Append the new error message to the container
+      contentLockerrorContainer.appendChild(errorMessage);
+
+    }, 200); // 200 milliseconds = .2 seconds
+  }
+
+  // Quiz checking function
+  const submitContentLockQuiz = (contentLockKeyNum) => {
+    let contentLockQuizForm = document.getElementById(`quiz${contentLockKeyNum}`);
+
+    // This selects the option that the user selected
+    let selectedOption = contentLockQuizForm.querySelector("input[name='options']:checked");
+
+    // This finds the input option that had the correct answer
+    let contentLockQuizcorrectAnswer = contentLockQuizForm.querySelector("input.correct-answer");
+
+    // Initialize a variable for error message, that can changed based on which error
+    let contentLockErrorMessage = "";
 
-// Save text content of unlock button
-const unlockContent = [];
+    // If there is a selected option, run the logic to see if it matches
+    if (selectedOption) {
+      // If selected option matches correct answer
+      if (selectedOption.value === contentLockQuizcorrectAnswer.value) {
 
-contentUnlockBtns.forEach((button) => {
-  unlockContent.push(button.textContent)
-})
+        // Tells the user they selected the correct response
+        alert("Correct response");
+        return true;
+      } else {
+
+        // Sets the error message for the user
+        contentLockErrorMessage = lockedContentQuizIncorrectAnswer;
+        displayError(contentLockQuizForm, contentLockErrorMessage)
+        return false;
+      }
+    } else {
+      contentLockErrorMessage = lockedContentQuizEmptyResponse;
+      displayError(contentLockQuizForm, contentLockErrorMessage)
+      return false;
+    }
+  }
+
+  /* This function loops through each  content area on the page
+   * and checks the status of the data-key to see if it should
+   * be unlocked or not
+   */
+  const checkHiddenContent = (courseNumber) => {
+
+    // Get data-key number for each content area
+    lockedContent.forEach((contentArea, contentAreaIndex) => {
+      let contentLockKeyNum = contentArea.getAttribute("data-key");
+
+      // Toggle classes based on key status
+      if (contentLockData[courseNumber].keys[contentLockKeyNum]) {
+        lockedContent[contentAreaIndex].classList.add("open");
+        contentLockInstructions[contentAreaIndex].classList.add("complete");
+      } else {
+        lockedContent[contentAreaIndex].classList.remove("open");
+        contentLockInstructions[contentAreaIndex].classList.remove("complete");
+      }
+    });
+  }
+
+  /* This function is when a user clicks or keysdown to unlock
+  * a content area. This function is the same wether clicked on 
+  * or if it is through a keyboard
+  */
+  const handleContentUnlock = (unlockButton, buttonIndex, unlockBtnContent, courseNumber) => {
+
+    /* This variable acts as a flag, for determining if a content unlock button is related to a quiz
+  * or if the content related to this button is supposed to use a confirmation window.
+  */
+    let quizElement = false;
+
+    // Loop through all the contentUnlockBtns and add an event listener
+
+    let contentLockKeyNum = lockedContent[buttonIndex].getAttribute("data-key");
+
+    // This is used as a flag. Needs to be set to true in order to unlock the content
+    let contentLockAnswerConfirmed = false;
+
+    //Query Selector to see if there is a quiz option or not
+    if (unlockButton.tagName === "INPUT") {
+      quizElement = true;
+    }
+
+    // If quiz exists for this data key number, otherwise, do the confirmation window
+    if (quizElement) {
+
+      // Show the html for the quiz. The html will handle the quiz functionality. Returns true or false.
+      contentLockAnswerConfirmed = submitContentLockQuiz(contentLockKeyNum)
+      if (contentLockAnswerConfirmed) {
+
+        // Unlock the content and perform other related actions (see function for more)
+        unlockCheck(contentLockKeyNum, courseNumber, buttonIndex)
+      }
+    } else {
+
+      /* Add a confirmation window that pops up and waits for the user to confirm 
+       * the instructions were followed to unlock the content(if no quiz is available)
+       */
+      contentLockAnswerConfirmed = window.confirm(`Please confirm: ${unlockBtnContent[buttonIndex]}`)
 
-// Create an object that keeps track of keys and their statuses
-let contentLockData = JSON.parse(localStorage.getItem("contentLockData")) || {};
+      if (contentLockAnswerConfirmed) {
+        unlockCheck(contentLockKeyNum, courseNumber, buttonIndex)
+      }
+    }
+  }
 
-if (lockedContent) {
+  // –––––––––––––––– End of Functions ––––––––––––––––
 
   // 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;
 
+  // Error Checking - course number exists
+  if (!courseNumber) {
+    console.log("Document Error: course number does not exist");
+  }
+
+  // Letters are used in inputs as values. Each letter represents an input option.
+  const optionLetters = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
+
+  // Create an object that keeps track of keys and their statuses
+  const contentLockData = JSON.parse(localStorage.getItem("contentLockData")) || {};
+
   // Add event listener for storage changes
   window.addEventListener("storage", (event) => {
     if (courseNumber) {
-      handleLocalStorageUpdate(event, courseNumber);
+      handleContentLockLocalStorageUpdate(event, courseNumber);
     }
   });
 
-  if (courseNumber) {
+  // Apply the quiz IDs and search if quizzes are being used
+  contentLockWidgets.forEach((contentLockWidget, contentLockWidgetIndex) => {
 
-    // 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;
-    }
+    let contentLockForm = contentLockWidget.querySelector(".quiz form");
 
-    // Get key number for each content area
-    lockedContent.forEach((contentArea, index) => {
-      let keyNum = contentArea.getAttribute("data-key");
+    /* If a quiz is present in content lock widget, then go through the page
+     * and assign the quiz ID based on the data-key for the corresponding
+     * locked-content.
+     */
+    if (contentLockForm) {
+      let lockedContent = contentLockWidget.querySelector(".locked-content");
+      let contentLockKeyNum = lockedContent.getAttribute("data-key");
+      let contentLockQuizcorrectAnswer = contentLockWidget.querySelector(".quiz .correct-answer");
 
-      // Check if key already exists within the course, if it doesn't, add the key
-      if (!contentLockData[courseNumber].keys[keyNum]) {
+      // Error checking - locked-content class
+      if (!lockedContent) {
+        console.log(`Document Error: missing the locked-content class for widget number ${contentLockWidgetIndex + 1} on this page`)
+      }
 
-        // Add the key to the course keys
-        contentLockData[courseNumber].keys[keyNum] = false;
+      // Error checking - data key
+      if (!contentLockKeyNum) {
+        console.log(`Document Error: missing data-key for locked content for widget number ${contentLockWidgetIndex + 1} on this page`)
       }
-    });
 
-    // Go through each show/hide button and add click listener
-    contentUnlockBtns.forEach((button, index) => {
+      // Error Check - correct-answer class for the quiz
+      if (!contentLockQuizcorrectAnswer) {
+        console.log(`Document Error: missing correct-answer for content lock quiz for widget number ${contentLockWidgetIndex + 1} on this page`)
+      }
 
-      button.tabIndex = 0;
+      // Assign each form an ID
+      contentLockForm.id = `quiz${contentLockKeyNum}`;
 
-      button.addEventListener("click", function () {
-        let keyNum = lockedContent[index].getAttribute("data-key");
+      // Search for error container in the widget
+      let errorContainerExists = contentLockWidget.querySelector(".error-container");
 
-        // Add alert to ensure the user confirms the action to unlock the content
-        let confirmed = window.confirm(`Please confirm: ${unlockContent[index]}`)
+      // If the error container doesn't exist, add it via HTML
+      if (!errorContainerExists) {
+        let errorContainer = document.createElement("div");
+        errorContainer.classList.add("error-container");
+        let contentLockSubmitBtn = contentLockWidget.querySelector("input[value='Submit']");
+        if (contentLockSubmitBtn) {
+          // Add the error container above the submit button in the quiz
+          contentLockSubmitBtn.insertAdjacentHTML("beforebegin", errorContainer.outerHTML)
+        } else {
+          console.log(`Document Error: quiz is missing an input with value 'Submit' for widget number ${contentLockWidgetIndex + 1} on this page.`)
+        }
+      }
+    }
+    // If the content lock widget does not use a form and uses a confirmation window instead
+    else {
+      // Error checking - ensure it has an unlock button in the HTML 
+      let unlockBtn = contentLockWidget.querySelector(".unlock-btn");
+      if (!unlockBtn) {
+        console.log(`Document Error: locked content area (that is not using a quiz) is missing <a> with .unlock-btn  for widget number ${contentLockWidgetIndex + 1} on this page.`)
+      }
+    }
+  })
 
-        if (confirmed) {
+  /* Function to apply attributes to quiz elements. This function uses
+   * an asynchronous function to ensure that the JS doesn't run until 
+   * after this function is complete and the promise has been returned. 
+   * This helps ensure that no other querySelectors are broken.
+   */
+  const applyAttributesToQuiz = () => {
+
+    // Returns the resolve value or reject value depending on if the promise is successful or fails
+    return new Promise((resolve, reject) => {
+      let contentLockQuizForms = document.querySelectorAll(".quiz form");
+
+      // If there are forms, then apply the specific attributes to the inputs
+      if (contentLockQuizForms) {
+        contentLockQuizForms.forEach((quizForm) => {
+          let quizInputs = quizForm.querySelectorAll("input");
+
+          // Loop through all the inputs and apply the correct attributes
+          quizInputs.forEach((quizInput, InputIndex) => {
+
+            // If the values are null, then populate it with the right attributes
+            if (!quizInput.getAttribute("value")) {
+              quizInput.setAttribute("value", optionLetters[InputIndex]);
+              quizInput.setAttribute("name", "options");
+              quizInput.setAttribute("type", "radio");
+            }
 
-          // Toggle the key status
-          contentLockData[courseNumber].keys[keyNum] = !contentLockData[courseNumber].keys[keyNum];
+            // If the input has the value "submit" then apply different attributes for submit button
+            else if (quizInput.getAttribute("value") == "Submit") {
+              quizInput.setAttribute("type", "button");
+              quizInput.classList.add("unlock-btn");
+            }
+          })
+        })
+      }
+      resolve(); // Resolve the Promise once attributes are applied
+    });
+  }
+  applyAttributesToQuiz().then(() => {
 
-          // 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");
-          }
+    /* This query selector relies on the dynamically added attributes above, so do not put this
+     * variable with the other ones at the top of the file
+     */
+    const contentUnlockBtns = document.querySelectorAll(".unlock-btn");
 
-          // Save the updated contentLockData object to local storage
-          localStorage.setItem("contentLockData", JSON.stringify(contentLockData));
+    /* Check if the course data object has the course number. If not, then add it.
+     * The contentLockData object that lives in local storage stores the course number and keys.  
+     */
+    if (!contentLockData.hasOwnProperty(courseNumber)) {
+      contentLockData[courseNumber] = {
+        keys: {},
+      };
+    }
 
-          // Update the hidden content based on the key status
-          checkHiddenContent(courseNumber);
+    // Get key number for each content area
+    lockedContent.forEach((contentArea, contentAreaIndex) => {
+      let contentLockKeyNum = contentArea.getAttribute("data-key");
+
+      // Error check - ensure it is wrapped in parent container
+      let contentLockWrapper = contentArea.parentElement;
+      if (contentLockWrapper) {
+        let hasContentLockWrapper = contentLockWrapper.classList.contains("content-lock-widget");
+        if (!hasContentLockWrapper) {
+          console.log(`Document Error: content lock widget wrapper is missing .content-lock-widget class for widget number ${contentAreaIndex + 1} on this page`);
         }
-      });
-
-      button.addEventListener("keydown", function (e) {
-        if (e.key == "Enter") {
-          let keyNum = lockedContent[index].getAttribute("data-key");
+      } else {
+        console.log(`Document Error: content lock widget is missing parent container for widget number ${contentAreaIndex + 1} on this page`);
+      }
 
-          // Add alert to ensure the user confirms the action to unlock the content
-          let confirmed = window.confirm(`Please confirm: ${unlockContent[index]}`)
+      // Error check - ensure it has an instructions <div> as sibling element
+      let lockedContentSibling = contentArea.nextElementSibling;
+      if (lockedContentSibling) {
+        let hasInstructions = lockedContentSibling.classList.contains("instructions");
+        if (!hasInstructions) {
+          console.log(`Document Error: instructions <div> is missing .instructions class for widget number ${contentAreaIndex + 1} on this page`);
+        }
+      } else {
+        console.log(`Document Error: locked content area is missing <div> with instructions for widget number ${contentAreaIndex + 1} on this page`);
+      }
 
-          if (confirmed) {
+      // Check if key already exists within the course, if it doesn't, add the key
+      if (!contentLockData[courseNumber].keys[contentLockKeyNum]) {
+        // Add the key to the course keys and set it equal to false by default
+        contentLockData[courseNumber].keys[contentLockKeyNum] = false;
+      }
+    });
 
-            // Toggle the key status
-            contentLockData[courseNumber].keys[keyNum] = !contentLockData[courseNumber].keys[keyNum];
+    // Go through each show/hide button and add click listener
+    contentUnlockBtns.forEach((unlockButton, buttonIndex) => {
 
-            // 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");
-            }
+      // For each unlock-btn take the text and put the text content into an array for the confirmation window to use
+      unlockBtnContent.push(unlockButton.textContent);
 
-            // Save the updated contentLockData object to local storage
-            localStorage.setItem("contentLockData", JSON.stringify(contentLockData));
+      // Add tab index to each unlock button
+      unlockButton.setAttribute("tabIndex", "0");
 
-            // Update the hidden content based on the key status
-            checkHiddenContent(courseNumber);
-          }
-        }
+      // Applies click event listener (and by default in HTML the keydown event will fire this function) to unlock the content
+      unlockButton.addEventListener("click", () => {
+        handleContentUnlock(unlockButton, buttonIndex, unlockBtnContent, courseNumber)
       });
 
       // Apply initial classes based on key status
-      let keyNum = lockedContent[index].getAttribute("data-key");
+      let contentLockKeyNum = lockedContent[buttonIndex].getAttribute("data-key");
 
       // Make sure contentLockData[courseNumber] is initialized
       if (!contentLockData[courseNumber]) {
@@ -666,9 +935,9 @@ if (lockedContent) {
         };
       }
 
-      if (contentLockData[courseNumber].keys[keyNum]) {
-        lockedContent[index].classList.add("open");
-        contentLockInstructions[index].classList.add("complete");
+      if (contentLockData[courseNumber].keys[contentLockKeyNum]) {
+        lockedContent[buttonIndex].classList.add("open");
+        contentLockInstructions[buttonIndex].classList.add("complete");
       }
     });
 
@@ -677,36 +946,17 @@ if (lockedContent) {
 
     // 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");
-    }
+  }).catch(error => {
+    // Handle the error if needed
+    console.log("Error occurred during applyAttributesToQuiz:", error);
   });
 }
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Your script code here
+  if (contentLockWidgets) { handleContentLockWidget(contentLockWidgets) }
+});
 // Flip Card Widget
 function callFlipCardWidget() {
   // Loop through each card
@@ -962,6 +1212,290 @@ callJquery();
 const jumpTo = (anchor) => {
   document.getElementById(anchor).scrollIntoView();
 }
+const sliderWidgets = document.querySelectorAll(".slider-widget");
+const slideHeight = 300;
+
+// Function to check if all direct children of each slider have the 'slider-item' class
+const checkSliderChildren = () => {
+  [...sliderWidgets].forEach((slider) => {
+    // Check if every direct child of the slider has the 'slider-item' class
+    let sliderChildren = [...slider.children].every(child => child.classList.contains("slider-item"));
+      
+    // Log an error message if any direct child does not have the 'slider-item' class
+    if (!sliderChildren) {
+      console.log(`Document error: not all direct children of .slider have the .slider-item class.`);
+    }
+  });
+};
+checkSliderChildren();
+
+// Function to hide all slides except the active one and deactivate all dots except the active one
+const hideSlidesAndDots = (sliderItems, sliderDots, newIndex) => {
+  // Iterate over each slider item
+  sliderItems.forEach((item, index) => {
+    // Set the display style based on whether the item is the active slide
+    item.style.display = index === newIndex ? "block" : "none";
+  });
+  // Iterate over each dot
+  sliderDots.forEach((sliderDot, index) => {
+    // Toggle the 'active' class based on whether the dot corresponds to the active slide
+    sliderDot.classList.toggle("active", index === newIndex);
+  });
+};
+
+// Function to update the display of slides and dots when a new slide is selected
+const updateSlide = (sliderItems, sliderDots, newIndex) => {
+  // Call the function to hide all slides and deactivate all dots except for the active ones
+  hideSlidesAndDots(sliderItems, sliderDots, newIndex);
+};
+
+// Function to create a button element with the specified class name
+const createSliderButton = (className) => {
+  // Create a new button element
+  const sliderButton = document.createElement("button");
+  // Set the class name of the button
+  sliderButton.className = className;
+  // Set tabindex to -1 to skip when tabbing
+  sliderButton.setAttribute("tabindex", "-1");
+  // Return the created button
+  return sliderButton;
+};
+
+// Function to vertically center the content of a slide if it is short and does not contain videos
+const totalSlideContentHeight = (sliderItem) => {
+  // Initialize a variable to keep track of the total height of the content
+  let totalContentHeight = 0;
+  // Iterate over each child element of the slider item
+  for (let child of sliderItem.children) {
+    // Add the height of the child to the total content height
+    totalContentHeight += child.offsetHeight;
+  }
+  // Check if the total content height is less than 300px and the item does not contain a video
+  if (totalContentHeight < slideHeight && !sliderItem.querySelector(".media-container")) {
+    // Create a wrapper div to contain the content
+    const sliderWrapper = document.createElement("div");
+    // Move each child of the slider item into the wrapper
+    while (sliderItem.firstChild) {
+      sliderWrapper.appendChild(sliderItem.firstChild);
+    }
+    // Append the wrapper to the slider item
+    sliderItem.appendChild(sliderWrapper);
+    // Add the 'short-content' class to the slider item to apply vertical centering
+    sliderItem.classList.add("short-content");
+  }
+};
+
+// Initialize each slider with navigation buttons, dots, and keyboard navigation
+[...sliderWidgets].forEach((slider, index) => {
+  // Set accessibility attributes for the slider
+  slider.setAttribute("tabindex", "0");
+  slider.setAttribute("role", "group");
+
+  // Create a hidden label for the slider for screen readers
+  const sliderLabel = document.createElement("span");
+  sliderLabel.id = `slider-label-${index + 1}`;
+  sliderLabel.textContent = "Interactive Slider";
+  sliderLabel.hidden = true;
+  // Insert the label at the beginning of the slider
+  slider.prepend(sliderLabel);
+
+  // Associate the label with the slider for screen readers
+  slider.setAttribute("aria-labelledby", `slider-label-${index + 1}`);
+
+  // Initialize the current index for the slider
+  let currentSlide = 0;
+  // Select all slider items within the current slider
+  const sliderItems = [...slider.querySelectorAll(".slider-item")];
+  // Create a div to contain the dots for navigation
+  const sliderDotsBar = document.createElement("div");
+  sliderDotsBar.className = "slider-dots-bar";
+  // Append the dots bar to the slider
+  slider.appendChild(sliderDotsBar);
+  // Initialize an array to keep track of the dots
+  let sliderDots = [];
+
+  // Create dots for each slide and set up click events to navigate to the slide
+  sliderItems.forEach((sliderItem, i) => {
+    // Create a span element to represent a dot
+    const sliderDot = document.createElement("span");
+    sliderDot.className = "slider-dot";
+    // Add a click event listener to the dot
+    sliderDot.addEventListener("click", () => {
+      // Update the current index to the index of the clicked dot
+      currentSlide = i;
+      // Call the function to update the slide display
+      hideSlidesAndDots(sliderItems, sliderDots, currentSlide);
+      // Ensure the current slide is displayed
+      sliderItems[currentSlide].style.display = "block";
+      // Add the 'active' class to the current dot
+      sliderDot.classList.add("active");
+      // Call the function to align the slide content if necessary
+      totalSlideContentHeight(sliderItems[currentSlide]);
+    });
+    // Append the dot to the dots bar
+    sliderDotsBar.appendChild(sliderDot);
+    // Add the dot to the array of dots
+    sliderDots.push(sliderDot);
+
+    // Hide the slide if it's not the current one
+    sliderItem.style.display = i !== currentSlide ? "none" : "block";
+    // If it's the current slide, add the 'active' class to the corresponding dot
+    if (i === currentSlide) {
+      sliderDot.classList.add("active");
+    }
+  });
+
+  // Create navigation buttons and set up click events to navigate between slides
+  const sliderLeftArrow = createSliderButton("slider-arrow icon-chevron-left");
+  const sliderRightArrow = createSliderButton("slider-arrow icon-chevron-right");
+  // Append the navigation buttons to the slider
+  slider.appendChild(sliderLeftArrow);
+  slider.appendChild(sliderRightArrow);
+
+  // Add a click event listener to the left arrow button
+  sliderLeftArrow.addEventListener("click", () => {
+    // Update the current index to the previous slide, wrapping around if necessary
+    currentSlide = currentSlide > 0 ? currentSlide - 1 : sliderItems.length - 1;
+    // Call the function to update the slide display
+    updateSlide(sliderItems, sliderDots, currentSlide);
+    // Call the function to align the slide content if necessary
+    totalSlideContentHeight(sliderItems[currentSlide]);
+  });
+
+  // Add a click event listener to the right arrow button
+  sliderRightArrow.addEventListener("click", () => {
+    // Update the current index to the next slide, wrapping around if necessary
+    currentSlide = currentSlide < sliderItems.length - 1 ? currentSlide + 1 : 0;
+    // Call the function to update the slide display
+    updateSlide(sliderItems, sliderDots, currentSlide);
+    // Call the function to align the slide content if necessary
+    totalSlideContentHeight(sliderItems[currentSlide]);
+  });
+
+  // Function to update the label text when the slide changes
+  function updateSliderLabel() {
+    // Update the text content of the label to reflect the current slide number
+    sliderLabel.textContent = `Interactive Slide: slide ${currentSlide + 1} of ${sliderItems.length}`;
+  }
+
+  // Set up keyboard navigation for the slider
+  slider.addEventListener("keydown", (event) => {
+    // Handle the left and right arrow keys
+    switch (event.key) {
+      case "ArrowLeft":
+        // Update the current index to the previous slide, wrapping around if necessary
+        currentSlide = currentSlide > 0 ? currentSlide - 1 : sliderItems.length - 1;
+        break;
+      case "ArrowRight":
+        // Update the current index to the next slide, wrapping around if necessary
+        currentSlide = currentSlide < sliderItems.length - 1 ? currentSlide + 1 : 0;
+        break;
+      default:
+        // If any other key is pressed, do nothing and return
+        return;
+    }
+    // Call the function to update the slide display
+    updateSlide(sliderItems, sliderDots, currentSlide);
+    // Call the function to align the slide content if necessary
+    totalSlideContentHeight(sliderItems[currentSlide]);
+    // Prevent the default action for the keydown event
+    event.preventDefault();
+    // Call the function to update the label text
+    updateSliderLabel();
+    // Focus the slider widget
+    slider.focus();
+  });
+
+  // Variables to store the starting and ending X coordinates of a touch event
+  let touchStartX =  0;
+  let touchEndX =  0;
+
+  // Event listener for the 'touchstart' event, which fires when a touch point is placed on the touch surface
+  slider.addEventListener("touchstart", (e) => {
+    // Store the X coordinate of the touch point when the touch starts
+    touchStartX = e.changedTouches[0].screenX;
+  }, false);
+
+  // Event listener for the 'touchend' event, which fires when a touch point is removed from the touch surface
+  slider.addEventListener("touchend", (e) => {
+    // Store the X coordinate of the touch point when the touch ends
+    touchEndX = e.changedTouches[0].screenX;
+    // Call the function to handle the swipe gesture
+    sliderSwipe();
+  }, false);
+
+  // Function to handle the swipe gesture
+  const sliderSwipe = () => {
+    // Calculate the difference between the starting and ending X coordinates
+    let diffX = touchEndX - touchStartX;
+
+    // Check if the absolute value of the difference is greater than a minimum threshold (50 pixels)
+    if (Math.abs(diffX) >  50) { // Minimum distance for a swipe
+      // Determine the direction of the swipe based on the sign of the difference
+      if (diffX >  0) {
+        // If the difference is positive, the user swiped to the left
+        // Update the current slide index to the previous slide, wrapping around if necessary
+        currentSlide = currentSlide >  0 ? currentSlide -  1 : sliderItems.length -  1;
+      } else {
+        // If the difference is negative, the user swiped to the right
+        // Update the current slide index to the next slide, wrapping around if necessary
+        currentSlide = currentSlide < sliderItems.length -  1 ? currentSlide +  1 :  0;
+      }
+      // Call the function to update the slide display
+      updateSlide(sliderItems, sliderDots, currentSlide);
+      // Call the function to align the slide content if necessary
+      totalSlideContentHeight(sliderItems[currentSlide]);
+      // Refocus the slider widget to maintain accessibility
+      slider.focus();
+    }
+  }
+});
+
+// Function to check if the slider contains all required elements for navigation
+const checkSliderNavs = (slider, index) => {
+  // Select the navigation controls within the context of the current slider
+  const sliderNextButton = slider.querySelector(".icon-chevron-right");
+  const sliderPrevButton = slider.querySelector(".icon-chevron-left");
+  const sliderDotsBar = slider.querySelector(".slider-dots-bar");
+
+  // Check if the navigation controls are present
+  if (!sliderNextButton) {
+    console.log(`Document error: next button is missing for slider ${index + 1}.`);
+  }
+  if (!sliderPrevButton) {
+    console.log(`Document error: previous button is missing for slider ${index + 1}.`);
+  }
+  if (!sliderDotsBar) {
+    console.log(`Document error: dots bar is missing for slider ${index + 1}.`);
+  }
+};
+
+// Call the function for each slider to perform the check
+[...sliderWidgets].forEach((slider, index) => {
+  checkSliderNavs(slider, index);
+});
+
+// Check if slider items are empty
+const checkEmptySliderItems = () => {
+  [...sliderWidgets].forEach((slider, sliderIndex) => {
+    // Get all .slider-item children of the current slider
+    let sliderItems = [...slider.querySelectorAll(".slider-item")];
+
+    // Check each .slider-item to see if it is empty
+    sliderItems.forEach((item, itemIndex) => {
+      // An element is considered empty if it has no children, or all its children are either comment nodes or text nodes with only whitespace
+      const isEmpty = [...item.childNodes].every(node => {
+        return node.nodeType === Node.COMMENT_NODE || (node.nodeType === Node.TEXT_NODE && !node.textContent.trim());
+      });
+
+      // Log an error message if the .slider-item is empty
+      if (isEmpty) {
+        console.log(`Document error: .slider-item at index ${itemIndex} in slider ${sliderIndex + 1} is empty.`);
+      }
+    });
+  });
+};
+checkEmptySliderItems();
 // Array for all themes that require theme specific js
 const customJsThemes = ["ecn", "hrs", "ss"];