diff --git a/templates/js/annotationOverlay.js b/templates/js/annotationOverlay.js
index 7fd8f219..13cffad7 100644
--- a/templates/js/annotationOverlay.js
+++ b/templates/js/annotationOverlay.js
@@ -3,6 +3,12 @@
 
 const PPT_EMU = { W: 9_144_000, H: 6_858_000 }; // PowerPoint slide size in EMUs
 
+/**
+ * Ensures the annotation stage (overlay container) exists inside the given container,
+ * creating it if necessary. The stage holds both the SVG line layer and the label div.
+ * @param {HTMLElement} container - The parent element to attach the stage to.
+ * @returns {HTMLElement} The existing or newly created annotation stage element.
+ */
 function ensureStage(container) {
   let stage = container.querySelector(".annotation-stage");
   if (!stage) {
@@ -17,6 +23,11 @@ function ensureStage(container) {
   return stage;
 }
 
+/**
+ * Removes the annotation stage and all its contents from the given container.
+ * @param {HTMLElement} container - The container whose annotation stage should be removed.
+ * @returns {void}
+ */
 export function clearAnnotations(container) {
   if (!container) return;
   const stage = container.querySelector(".annotation-stage");
@@ -67,8 +78,14 @@ function normalizedPointToPx(pt, box, norm) { // <--- RENAMED to reflect change
 }
 
 /**
- * Draw labels + lines from a JSON object:
- * { annotations: [...], normalized_geometry: { normX, normY, normW, normH } }
+ * Draws text annotation labels and pointer lines onto the given container.
+ * Reads normalized geometry and slide dimensions from the JSON to map PowerPoint
+ * EMU coordinates onto the displayed pixel size of the container.
+ * @param {HTMLElement} container - The element to draw annotations into.
+ * @param {Object} annotationsJson - Annotation data from the API, containing:
+ *   `annotations` {Array}, `normalized_geometry` {Object}, `slide_width` {number},
+ *   and `slide_height` {number}.
+ * @returns {void}
  */
 export function drawAnnotations(container, annotationsJson) {
   if (!container || !annotationsJson) return;
@@ -143,7 +160,13 @@ export function drawAnnotations(container, annotationsJson) {
   stage.__lastJson = annotationsJson;
 }
 
-/** Load JSON from a URL and draw it. Returns a promise. */
+/**
+ * Fetches annotation JSON from a URL, draws it onto the container,
+ * and attaches a ResizeObserver so annotations redraw when the container resizes.
+ * @param {HTMLElement} container - The element to draw annotations into.
+ * @param {string} jsonUrl - URL of the annotation JSON file.
+ * @returns {Promise<void>}
+ */
 export async function loadAndDrawAnnotations(container, jsonUrl) {
   if (!container || !jsonUrl) return;
   const res = await fetch(jsonUrl);
@@ -155,7 +178,12 @@ export async function loadAndDrawAnnotations(container, jsonUrl) {
   attachAutoscale(container); // keep aligned on resize
 }
 
-/** Re-draw on container resize using the last JSON used. */
+/**
+ * Attaches a ResizeObserver to the container that redraws annotations whenever
+ * the container's dimensions change. Does nothing if an observer is already attached.
+ * @param {HTMLElement} container - The container to watch for size changes.
+ * @returns {void}
+ */
 function attachAutoscale(container) {
   const stage = ensureStage(container);
   if (stage.__resizeObs) return; // already attached
diff --git a/templates/js/api.js b/templates/js/api.js
index ee79f035..dd994784 100644
--- a/templates/js/api.js
+++ b/templates/js/api.js
@@ -10,6 +10,12 @@ const API_CONFIG = {
     }
 };
 
+/**
+ * Fetches the combined boneset/bone/subbone data from the backend API.
+ * This is the primary data source used to populate all dropdowns on page load.
+ * @returns {Promise<Object>} Combined data object containing `bonesets`, `bones`, and `subbones` arrays.
+ * @throws {Error} If the network request fails or the server returns a non-OK response.
+ */
 export async function fetchCombinedData() {
     const API_URL = `${API_CONFIG.BASE_URL}${API_CONFIG.ENDPOINTS.COMBINED_DATA}`;
 
@@ -25,6 +31,11 @@ export async function fetchCombinedData() {
     }
 }
 
+/**
+ * Fetches mock bone data from a local JSON file. Used for development and testing
+ * without a running backend server.
+ * @returns {Promise<Object|null>} The mock bone data object, or null if the fetch fails.
+ */
 export async function fetchMockBoneData() {
     try {
         const response = await fetch(API_CONFIG.ENDPOINTS.MOCK_BONE_DATA);
diff --git a/templates/js/coloredRegionsOverlay.js b/templates/js/coloredRegionsOverlay.js
index 5919818d..041f85ea 100644
--- a/templates/js/coloredRegionsOverlay.js
+++ b/templates/js/coloredRegionsOverlay.js
@@ -517,6 +517,7 @@ export async function displayColoredRegions(imageElement, boneId, imageIndex = 0
 /**
  * Clear all colored region overlays from a container
  * @param {HTMLElement} container - The container element
+ * @returns {void}
  */
 export function clearColoredRegions(container) {
     if (!container) return;
@@ -527,6 +528,7 @@ export function clearColoredRegions(container) {
 
 /**
  * Clear all colored region overlays in the entire image container
+ * @returns {void}
  */
 export function clearAllColoredRegions() {
     const container = document.getElementById("bone-image-container");
diff --git a/templates/js/description.js b/templates/js/description.js
index 57b1c617..08e1640a 100644
--- a/templates/js/description.js
+++ b/templates/js/description.js
@@ -1,6 +1,14 @@
 // js/description.js
 const GITHUB_RAW_URL = "https://raw.githubusercontent.com/oss-slu/DigitalBonesBox/data/data/descriptions/";
 
+/**
+ * Fetches the description JSON for the given bone/subbone ID from GitHub and
+ * renders it as a list of bullet points inside the `#description-Container` element.
+ * Shows an error message in the container if the fetch fails.
+ * @param {string} id - The bone or subbone ID (e.g. `"ilium"`, `"iliac_crest"`),
+ *   used to construct the filename `{id}_description.json`.
+ * @returns {Promise<void>}
+ */
 export async function loadDescription(id) {
     const container = document.getElementById("description-Container");
     container.innerHTML = "";
diff --git a/templates/js/dropdowns.js b/templates/js/dropdowns.js
index f7581e14..61e2af8e 100644
--- a/templates/js/dropdowns.js
+++ b/templates/js/dropdowns.js
@@ -12,10 +12,22 @@ document.addEventListener("DOMContentLoaded", () => {
 // ---- Map/lookup you can extend later -----------------
 let _boneById = {}; // filled in setupDropdownListeners
 
+/**
+ * Returns the `#bone-image-container` element, which serves as the host for
+ * displayed bone images and their annotation overlays.
+ * @returns {HTMLElement|null} The image container element, or null if not found.
+ */
 function getImageStage() {
   return /** @type {HTMLElement|null} */ (document.getElementById("bone-image-container"));
 }
 
+/**
+ * Clears any existing annotation overlay from the image stage.
+ * Annotation loading is now handled directly in the dropdown change listeners
+ * via the `opts.annotationsUrl` option passed to `loadBoneImages`.
+ * @param {string} boneId - The bone ID (unused; retained for future use).
+ * @returns {Promise<void>}
+ */
 // Function maybeLoadAnnotations: Logic removed. Annotation URL construction is now in the listeners.
 async function maybeLoadAnnotations(boneId) {
   const stage = getImageStage();
@@ -32,7 +44,12 @@ async function maybeLoadAnnotations(boneId) {
 // Backend API base (runs on 8000)
 const API_BASE = "http://127.0.0.1:8000";
 
-/** Helper: fetch images for a bone/sub-bone and render them */
+/** Helper: fetch images for a bone/sub-bone and render them
+ * @param {string} boneId - The bone or subbone ID to load images for.
+ * @param {Object} [options={}] - Options forwarded to `displayBoneImages`, e.g.
+ *   `{ annotationsUrl: string, boneId: string, isBonesetSelection: boolean }`.
+ * @returns {Promise<void>}
+ */
 async function loadBoneImages(boneId, options = {}) {
   const stage = getImageStage();
   if (!boneId) {
@@ -57,6 +74,12 @@ async function loadBoneImages(boneId, options = {}) {
   }
 }
 
+/**
+ * Populates the boneset `<select>` element with options from the provided array.
+ * Disables the dropdown if no bonesets are available.
+ * @param {Array<{id: string, name: string}>} bonesets - Array of boneset objects.
+ * @returns {void}
+ */
 export function populateBonesetDropdown(bonesets) {
   const bonesetSelect = document.getElementById("boneset-select");
   if (!bonesetSelect) {
@@ -78,6 +101,13 @@ export function populateBonesetDropdown(bonesets) {
   bonesetSelect.disabled = false;
 }
 
+/**
+ * Wires up change event listeners on the boneset, bone, and subbone `<select>` elements.
+ * Each listener loads images, descriptions, and annotations appropriate to the selection.
+ * @param {Object} combinedData - The full application data set containing:
+ *   `bonesets` {Array}, `bones` {Array}, and `subbones` {Array}.
+ * @returns {void}
+ */
 export function setupDropdownListeners(combinedData) {
   const bonesetSelect  = document.getElementById("boneset-select");
   const boneSelect     = document.getElementById("bone-select");
diff --git a/templates/js/imageCaptions.js b/templates/js/imageCaptions.js
index 28e61325..604c6fb2 100644
--- a/templates/js/imageCaptions.js
+++ b/templates/js/imageCaptions.js
@@ -1,6 +1,14 @@
 // js/imageCaptions.js
 // Image captions for bone images, extracted from PowerPoint slides
 
+/**
+ * A lookup map of image captions keyed by bone/subbone ID.
+ * Each entry provides caption strings for up to two images (`image1`, `image2`).
+ * Captions describe the anatomical view shown in the corresponding image
+ * (e.g. lateral aspect, medial aspect).
+ *
+ * @type {Object.<string, {image1: string|null, image2: string|null}>}
+ */
 export const imageCaptions = {
   // Bony Pelvis (main boneset)
   "bony_pelvis": {
diff --git a/templates/js/imageDisplay.js b/templates/js/imageDisplay.js
index 040ccf5e..fc373295 100644
--- a/templates/js/imageDisplay.js
+++ b/templates/js/imageDisplay.js
@@ -9,13 +9,20 @@ import { imageCaptions } from "./imageCaptions.js";
 let currentBoneId = null;
 let currentIsBonesetSelection = false; // Track if this is a boneset selection
 
+/**
+ * Returns the `#bone-image-container` DOM element.
+ * @returns {HTMLElement|null} The image container element, or null if not found.
+ */
 function getImageContainer() {
   return /** @type {HTMLElement|null} */ (
     document.getElementById("bone-image-container")
   );
 }
 
-/** Helper function to get captions for a boneId */
+/** Helper function to get captions for a boneId
+ * @param {string|null} boneId - The bone or subbone ID.
+ * @returns {{image1: string|null, image2: string|null}} Caption strings for the two images, or nulls if not found.
+ */
 function getCaptionsForBone(boneId) {
   if (!boneId || !imageCaptions[boneId]) {
     return { image1: null, image2: null };
@@ -23,7 +30,9 @@ function getCaptionsForBone(boneId) {
   return imageCaptions[boneId];
 }
 
-/** Helper to clear existing caption container */
+/** Removes the `#caption-container` element from the DOM if it exists.
+ * @returns {void}
+ */
 function clearCaptionContainer() {
   const existingCaptions = document.getElementById("caption-container");
   if (existingCaptions) {
@@ -31,7 +40,11 @@ function clearCaptionContainer() {
   }
 }
 
-/** ---- Empty-state / clearing ------------------------------------------- */
+/**
+ * Renders the empty-state placeholder message inside the image container
+ * and clears all annotations, colored regions, and captions.
+ * @returns {void}
+ */
 export function showPlaceholder() {
   const c = getImageContainer();
   if (!c) return;
@@ -53,6 +66,10 @@ export function showPlaceholder() {
   if (imagesContent) imagesContent.classList.remove("has-images");
 }
 
+/**
+ * Clears all images, annotations, colored regions, and captions from the image container.
+ * @returns {void}
+ */
 export function clearImages() {
   const c = getImageContainer();
   if (c) {
@@ -72,8 +89,16 @@ export function clearImages() {
   if (imagesContent) imagesContent.classList.remove("has-images");
 }
 
-/** ---- Public entry: render images array --------------------------------
- * Optionally pass { annotationsUrl: 'templates/data/annotations/xyz.json', boneId: 'bone_name' }
+/**
+ * Renders one or more bone images into the image container, applying the appropriate
+ * layout (single, two-up, or grid) based on the number of images provided.
+ * Also loads colored region overlays and text annotation overlays if applicable.
+ * @param {Array<{url?: string, src?: string, alt?: string, filename?: string}>} images - Array of image objects to display.
+ * @param {Object} [options={}] - Optional display configuration:
+ *   @param {string} [options.annotationsUrl] - API URL for text annotation JSON.
+ *   @param {string} [options.boneId] - Bone ID used for colored region overlays.
+ *   @param {boolean} [options.isBonesetSelection] - True when displaying the full boneset view.
+ * @returns {void}
  */
 export function displayBoneImages(images, options = {}) {
   const container = getImageContainer();
@@ -114,6 +139,13 @@ export function displayBoneImages(images, options = {}) {
 }
 
 //** ---- Single image ------------------------------------------------------ */
+/**
+ * Renders a single bone image with its colored region overlay and text annotations.
+ * @param {{url?: string, src?: string, alt?: string, filename?: string}} image - The image object to display.
+ * @param {HTMLElement} container - The image container element.
+ * @param {Object} [options={}] - Options forwarded from `displayBoneImages`.
+ * @returns {void}
+ */
 function displaySingleImage(image, container, options = {}) {
   // Get captions for this bone
   const captions = getCaptionsForBone(currentBoneId);
@@ -197,6 +229,15 @@ const TWO_IMAGE_ROTATION = {
   right: { rot_deg: 0, flipH: false },
 };
 
+/**
+ * Applies a CSS rotation (and optional horizontal flip) to an image element
+ * based on the PowerPoint rotation template for the given view.
+ * @param {HTMLImageElement} imgEl - The image element to transform.
+ * @param {Object} [options={}] - Rotation parameters.
+ * @param {number} [options.rot_deg=0] - Rotation angle in degrees.
+ * @param {boolean} [options.flipH=false] - Whether to flip the image horizontally.
+ * @returns {void}
+ */
 function applyRotation(imgEl, { rot_deg = 0, flipH = false } = {}) {
   const parts = [];
   if (flipH) parts.push("scaleX(-1)");
@@ -206,6 +247,14 @@ function applyRotation(imgEl, { rot_deg = 0, flipH = false } = {}) {
   imgEl.style.willChange = "transform";
 }
 
+/**
+ * Renders two bone images side by side, each with its own colored region overlay.
+ * Appends a two-column caption bar beneath the images if captions are available.
+ * @param {Array<{url?: string, src?: string, alt?: string, filename?: string}>} images - Array of exactly two image objects.
+ * @param {HTMLElement} container - The image container element.
+ * @param {Object} [options={}] - Options forwarded from `displayBoneImages`.
+ * @returns {void}
+ */
 function displayTwoImages(images, container, options = {}) {
   // Get captions for this bone
   const captions = getCaptionsForBone(currentBoneId);
@@ -299,6 +348,13 @@ function displayTwoImages(images, container, options = {}) {
 }
 
 /** ---- 3+ images grid ---------------------------------------------------- */
+/**
+ * Renders three or more bone images in a wrapping grid layout.
+ * Does not load colored regions or annotations (used for supplementary views).
+ * @param {Array<{url?: string, src?: string, alt?: string, filename?: string}>} images - Array of image objects.
+ * @param {HTMLElement} container - The image container element.
+ * @returns {void}
+ */
 function displayMultipleImages(images, container) {
   const wrapper = document.createElement("div");
   wrapper.className = "multiple-image-wrapper";
diff --git a/templates/js/main.js b/templates/js/main.js
index 9dfc0a6b..0d0c515d 100644
--- a/templates/js/main.js
+++ b/templates/js/main.js
@@ -109,6 +109,16 @@ document.addEventListener("DOMContentLoaded", async () => {
     clearViewer();
 });
 
+/**
+ * Populates the subbone `<select>` element with options for the given subbone IDs.
+ * Inserts a placeholder option and disables the dropdown if no subbones are provided.
+/**
+ * Populates the subbone `<select>` element with options for the given subbone IDs.
+ * Inserts a placeholder option and disables the dropdown if no subbones are provided.
+ * @param {HTMLSelectElement} dropdown - The subbone select element to populate.
+ * @param {string[]} subbones - Array of subbone ID strings.
+ * @returns {void}
+ */
 function populateSubboneDropdown(dropdown, subbones) {
     // Leave a placeholder option so the user must explicitly select a subbone
     dropdown.innerHTML = "";
diff --git a/templates/js/navigation.js b/templates/js/navigation.js
index 8d861baf..3ad59fb7 100644
--- a/templates/js/navigation.js
+++ b/templates/js/navigation.js
@@ -2,6 +2,15 @@ let currentBone = null;
 let currentSubboneIndex = -1;
 let subbones = [];
 
+/**
+ * Initialises the previous/next subbone navigation buttons and the Home button.
+ * @param {HTMLButtonElement} prevButton - The "previous" navigation button.
+ * @param {HTMLButtonElement} nextButton - The "next" navigation button.
+ * @param {HTMLSelectElement} subboneDropdown - The subbone `<select>` element to keep in sync.
+ * @param {function(string): void} updateDescription - Callback invoked with the selected subbone ID
+ *   whenever the navigation changes.
+ * @returns {void}
+ */
 export function setupNavigation(prevButton, nextButton, subboneDropdown, updateDescription) {
   // Setup Previous/Next button navigation
   prevButton.addEventListener("click", () => {
@@ -71,24 +80,46 @@ function resetToInitialState() {
   window.location.reload();
 }
 
+/**
+ * Sets the currently active bone and its associated subbones for navigation,
+ * resetting the index to the first subbone.
+ * @param {string} bone - The ID of the currently selected bone.
+ * @param {string[]} boneSubbones - Array of subbone IDs belonging to that bone.
+ * @returns {void}
+ */
 export function setBoneAndSubbones(bone, boneSubbones) {
   currentBone = bone;
   subbones = boneSubbones || [];
   currentSubboneIndex = subbones.length > 0 ? 0 : -1;
 }
 
+/**
+ * Decrements the current subbone index (moves to the previous subbone), if possible.
+ * @returns {void}
+ */
 function prevSubbone() {
   if (currentSubboneIndex > 0) {
     currentSubboneIndex--;
   }
 }
 
+/**
+ * Increments the current subbone index (moves to the next subbone), if possible.
+ * @returns {void}
+ */
 function nextSubbone() {
   if (currentSubboneIndex < subbones.length - 1) {
     currentSubboneIndex++;
   }
 }
 
+/**
+ * Syncs the subbone dropdown to the current index and invokes the description callback.
+ * Does nothing if no subbones are loaded.
+ * @param {HTMLSelectElement} subboneDropdown - The subbone select element to update.
+ * @param {function(string): void} updateDescription - Callback invoked with the selected subbone ID.
+ * @returns {void}
+ */
 function updateUI(subboneDropdown, updateDescription) {
   if (subbones.length === 0 || currentSubboneIndex === -1) return;
 
@@ -97,6 +128,13 @@ function updateUI(subboneDropdown, updateDescription) {
   updateDescription(selectedSubbone);
 }
 
+/**
+ * Enables or disables the previous/next buttons depending on whether any subbones
+ * are currently loaded.
+ * @param {HTMLButtonElement} prevButton - The "previous" navigation button.
+ * @param {HTMLButtonElement} nextButton - The "next" navigation button.
+ * @returns {void}
+ */
 export function disableButtons(prevButton, nextButton) {
   const disabled = subbones.length === 0;
   prevButton.disabled = disabled;
diff --git a/templates/js/quiz.js b/templates/js/quiz.js
index 17b58444..74471724 100644
--- a/templates/js/quiz.js
+++ b/templates/js/quiz.js
@@ -3,6 +3,12 @@
 import {fetchBoneData, fetchCombinedData} from "./api.js";
 import {displayColoredRegions} from "./coloredRegionsOverlay.js";
 
+/**
+ * Manages the interactive bone-identification quiz.
+ * Fetches bones and subbones from the API, generates randomised questions,
+ * handles answer scoring, and controls quiz UI visibility.
+ * @class
+ */
 class QuizManager {
     constructor() {
         this.questions = [];
@@ -17,7 +23,10 @@ class QuizManager {
     }
 
     /**
-     * Initialize the quiz system
+     * Loads bone data from the API, builds the master question pool, and
+     * attaches UI event listeners. Must be called before starting a quiz.
+     * @returns {Promise<boolean>} Resolves to `true` if initialisation succeeded,
+     *   `false` if there was an error or too few items to form a quiz.
      */
     async initialize() {
         try {
@@ -44,7 +53,9 @@ class QuizManager {
     }
 
     /**
-     * Create a master pool of all bones and subbones
+     * Populates {@link QuizManager#masterQuestionPool} by combining all bones
+     * and subbones fetched during initialisation.
+     * @returns {void}
      */
     createMasterQuestionPool() {
         this.masterQuestionPool = [];
@@ -71,7 +82,9 @@ class QuizManager {
     }
 
     /**
-     * Setup event listeners for quiz UI
+     * Attaches click handlers to the start-quiz, exit-quiz, and next-question
+     * buttons in the DOM.
+     * @returns {void}
      */
     setupEventListeners() {
         const quizButton = document.getElementById("start-quiz-btn");
@@ -92,7 +105,10 @@ class QuizManager {
     }
 
     /**
-     * Generate quiz questions using the master pool
+     * Randomly selects items from the master pool to build
+     * {@link QuizManager#questions}, each with one correct answer and three
+     * distractors.
+     * @returns {void}
      */
     generateQuestions() {
         this.questions = [];
@@ -130,7 +146,11 @@ class QuizManager {
     }
 
     /**
-     * Generate wrong answer choices from the master pool
+     * Picks `count` distractor names from the master pool, excluding the
+     * correct item.
+     * @param {string} correctItemId - The ID of the correct answer item to exclude.
+     * @param {number} count - Number of wrong answers to generate.
+     * @returns {string[]} Array of distractor name strings.
      */
     generateWrongAnswers(correctItemId, count) {
         const wrongAnswers = [];
@@ -149,7 +169,11 @@ class QuizManager {
     }
 
     /**
-     * Shuffle array using Fisher-Yates algorithm
+     * Returns a new array with the same elements in a random order using the
+     * Fisher-Yates algorithm.
+     * @template T
+     * @param {T[]} array - The array to shuffle.
+     * @returns {T[]} A new shuffled array (the original is not mutated).
      */
     shuffleArray(array) {
         const shuffled = [...array];
@@ -161,9 +185,14 @@ class QuizManager {
     }
 
     /**
- * Fetch and display bone image from API
- */
-async fetchBoneImage(itemId, container) {
+     * Fetches bone data from the API and renders the primary image into
+     * `container`. Falls back to a placeholder on missing or failed images.
+     * Also attempts to overlay coloured regions once the image loads.
+     * @param {string} itemId - The bone or subbone ID whose image to display.
+     * @param {HTMLElement} container - The DOM element to render the image into.
+     * @returns {Promise<void>}
+     */
+    async fetchBoneImage(itemId, container) {
     try {
         const data = await fetchBoneData(itemId);
         
@@ -226,12 +255,11 @@ async fetchBoneImage(itemId, container) {
 }
 
     /**
-     * Start the quiz
+     * Generates a fresh set of questions, resets state, switches the UI to
+     * quiz mode, and displays the first question.
+     * @returns {void}
      */
-    /**
- * Start the quiz
- */
-startQuiz() {
+    startQuiz() {
     // Generate questions
     this.generateQuestions();
 
@@ -292,7 +320,10 @@ startQuiz() {
 }
 
     /**
-     * Display current question
+     * Renders the current question (image, answer choices, progress) in the
+     * quiz UI. Calls {@link QuizManager#showResults} when all questions are
+     * exhausted.
+     * @returns {void}
      */
     displayQuestion() {
         if (this.currentQuestionIndex >= this.questions.length) {
@@ -351,7 +382,10 @@ startQuiz() {
     }
 
     /**
-     * Display answer choice buttons
+     * Renders the answer choice buttons for the given question.
+     * @param {{allAnswers: string[], correctAnswer: string}} question - The
+     *   current question object.
+     * @returns {void}
      */
     displayAnswerChoices(question) {
         const choicesContainer = document.getElementById("quiz-choices");
@@ -370,7 +404,12 @@ startQuiz() {
     }
 
     /**
-     * Handle answer selection
+     * Processes a user's answer selection: updates the score, highlights
+     * correct/incorrect buttons, shows feedback, and reveals the next-question
+     * button.
+     * @param {string} selectedAnswer - The answer text the user clicked.
+     * @param {string} correctAnswer - The correct answer text for this question.
+     * @returns {void}
      */
     handleAnswerClick(selectedAnswer, correctAnswer) {
         if (this.answered) return; // Prevent multiple answers
@@ -413,7 +452,11 @@ startQuiz() {
     }
 
     /**
-     * Show feedback after answer
+     * Displays a correct/incorrect feedback banner below the answer choices.
+     * @param {boolean} isCorrect - Whether the selected answer was correct.
+     * @param {string} correctAnswer - The correct answer text, shown on
+     *   incorrect responses.
+     * @returns {void}
      */
     showFeedback(isCorrect, correctAnswer) {
         const feedback = document.getElementById("quiz-feedback");
@@ -437,7 +480,8 @@ startQuiz() {
     }
 
     /**
-     * Move to next question
+     * Advances to the next question in the sequence.
+     * @returns {void}
      */
     nextQuestion() {
         this.currentQuestionIndex++;
@@ -446,12 +490,11 @@ startQuiz() {
 
   
     /**
-     * Show quiz results
+     * Replaces the quiz container with a results summary showing the final
+     * score and a contextual message. Attaches retry and exit handlers.
+     * @returns {void}
      */
-/**
- * Show quiz results
- */
-showResults() {
+    showResults() {
     const percentage = Math.round((this.score / this.questions.length) * 100);
     
     let message = "";
@@ -519,7 +562,8 @@ showResults() {
 }
 
     /**
-     * Show quiz mode (hide main content)
+     * Hides the main page content and shows the quiz modal overlay.
+     * @returns {void}
      */
     showQuizMode() {
         const mainContent = document.querySelector(".container");
@@ -530,7 +574,8 @@ showResults() {
     }
 
     /**
-     * Exit quiz and return to main view
+     * Ends the active quiz, restores the main view, and resets all quiz state.
+     * @returns {void}
      */
     exitQuiz() {
         this.isQuizActive = false;
diff --git a/templates/js/search.js b/templates/js/search.js
index 01cc1e57..e3935878 100644
--- a/templates/js/search.js
+++ b/templates/js/search.js
@@ -1,7 +1,11 @@
 let selectedIndex = -1;
 let searchTimeout;
 
-// Handle search result clicks and keyboard navigation
+/**
+ * Sets up the search bar's input, keyboard navigation, and outside-click
+ * handlers. Should be called once after the DOM is ready.
+ * @returns {void}
+ */
 export function initializeSearch() {
     const searchBar = document.getElementById("search-bar");
     const searchResultsContainer = document.getElementById("search-results");
@@ -64,6 +68,12 @@ export function initializeSearch() {
     });
 }
 
+/**
+ * Sends a search query to the API and renders the resulting HTML into
+ * the search-results container.
+ * @param {string} query - The search string typed by the user.
+ * @returns {Promise<void>}
+ */
 async function performSearch(query) {
     const searchResultsContainer = document.getElementById("search-results");
     const searchLoading = document.getElementById("search-loading");
@@ -93,6 +103,11 @@ async function performSearch(query) {
     }
 }
 
+/**
+ * Attaches click-event listeners to every `.search-result` element currently
+ * in the DOM so that clicking one triggers {@link selectSearchResult}.
+ * @returns {void}
+ */
 function attachClickHandlers() {
     const results = document.querySelectorAll(".search-result");
     results.forEach(result => {
@@ -103,6 +118,12 @@ function attachClickHandlers() {
     });
 }
 
+/**
+ * Highlights the result at `selectedIndex` and removes highlighting from all
+ * others, scrolling the highlighted item into view.
+ * @param {NodeListOf<HTMLElement>} results - The current set of result elements.
+ * @returns {void}
+ */
 function updateSelection(results) {
     results.forEach((result, index) => {
         if (index === selectedIndex) {
@@ -114,6 +135,14 @@ function updateSelection(results) {
     });
 }
 
+/**
+ * Reads the data attributes from a result element and delegates to
+ * {@link updateDropdowns} to navigate the main viewer to that bone.
+ * @param {HTMLElement} resultElement - The clicked or keyboard-selected result
+ *   element carrying `data-type`, `data-boneset`, `data-bone`, and optionally
+ *   `data-subbone` attributes.
+ * @returns {void}
+ */
 function selectSearchResult(resultElement) {
     const type = resultElement.dataset.type;
     const bonesetId = resultElement.dataset.boneset;
@@ -129,6 +158,16 @@ function selectSearchResult(resultElement) {
     clearSearch();
 }
 
+/**
+ * Cascades selection through the boneset → bone → subbone dropdowns by
+ * dispatching `change` events with short timeouts between each tier.
+ * @param {string} type - The type of result: `'boneset'`, `'bone'`, or `'subbone'`.
+ * @param {string} bonesetId - The boneset ID to set on the boneset dropdown.
+ * @param {string} boneId - The bone ID to set on the bone dropdown (when relevant).
+ * @param {string} subboneId - The subbone ID to set on the subbone dropdown
+ *   (only used when `type` is `'subbone'`).
+ * @returns {void}
+ */
 function updateDropdowns(type, bonesetId, boneId, subboneId) {
     const bonesetSelect = document.getElementById("boneset-select");
     const boneSelect = document.getElementById("bone-select");
@@ -163,12 +202,21 @@ function updateDropdowns(type, bonesetId, boneId, subboneId) {
     }
 }
 
+/**
+ * Clears the search bar input and removes all results.
+ * @returns {void}
+ */
 function clearSearch() {
     const searchBar = document.getElementById("search-bar");
     searchBar.value = "";
     clearSearchResults();
 }
 
+/**
+ * Empties the search-results container, hides the loading indicator, and
+ * resets the keyboard-navigation index.
+ * @returns {void}
+ */
 function clearSearchResults() {
     const searchResults = document.getElementById("search-results");
     const searchLoading = document.getElementById("search-loading");
diff --git a/templates/js/sidebar.js b/templates/js/sidebar.js
index 36a98c82..96667792 100644
--- a/templates/js/sidebar.js
+++ b/templates/js/sidebar.js
@@ -1,4 +1,9 @@
 // js/sidebar.js
+/**
+ * Wires up the sidebar toggle button to lazily load `sidebar.html` and
+ * slide the sidebar panel in and out.
+ * @returns {Promise<void>}
+ */
 export async function initializeSidebar() {
     const toggleButton = document.getElementById("toggle-sidebar");
     const sidebarContainer = document.getElementById("sidebar-container");
@@ -32,6 +37,11 @@ export async function initializeSidebar() {
     }
 }
 
+/**
+ * Fetches `helpButton.html`, injects it into the help-button container, and
+ * attaches click/keyboard handlers to open and close the help modal.
+ * @returns {Promise<void>}
+ */
 export async function loadHelpButton() {
     const helpButtonContainer = document.getElementById("help-button-container");
     if (helpButtonContainer) {
diff --git a/templates/js/viewer.js b/templates/js/viewer.js
index 88dd2423..abe9f406 100644
--- a/templates/js/viewer.js
+++ b/templates/js/viewer.js
@@ -71,7 +71,8 @@ export function displayAnnotations(annotations) {
 
 /**
  * Main function to display complete bone data (annotations only - images handled by imageDisplay.js)
- * @param {Object} boneData - The complete bone object
+ * @param {Object} boneData - The complete bone object.
+ * @returns {void}
  */
 export function displayBoneData(boneData) {
     if (!boneData) {
@@ -86,6 +87,7 @@ export function displayBoneData(boneData) {
 
 /**
  * Clears the viewer display (annotations only - images handled by imageDisplay.js)
+ * @returns {void}
  */
 export function clearViewer() {
     // NOTE: Images are now cleared by imageDisplay.js