Implement lazy loading for category examples and improve type safety

src/common.ts

@@ -128,11 +128,11 @@ export const yearGroupsSl: Record<string, Category[]> = {
 };
 
 export const categoryToGroup: Record<Category, string> = (() => {
-	const dict: any = {};
+	const dict: Partial<Record<Category, string>> = {};
 	for (const group in categoryGroups) {
 		for (const category of categoryGroups[group]!) {
 			dict[category] = group;
 		}
 	}
-	return dict;
+	return dict as Record<Category, string>;
 })();

src/index.ts

@@ -170,7 +170,7 @@ document.addEventListener("DOMContentLoaded", () => {
 				const solved = JSON.parse(
 					localStorage.getItem(category) || "[]",
 				);
-				const count = (solved as any[]).length;
+				const count = (solved as string[]).length;
 
 				const labelText = document.createTextNode(
 					getCategoryDisplayName(category as Category),
@@ -191,32 +191,50 @@ document.addEventListener("DOMContentLoaded", () => {
 				topDiv.appendChild(label);
 				checkboxItem.appendChild(topDiv);
 
-				// Add examples for this category
+				// Add examples container (populated lazily on group toggle)
 				const examplesDiv = document.createElement("div");
 				examplesDiv.className = "category-examples";
-
-				const examplesList = document.createElement("div");
-				examplesList.className = "examples-list";
-
-				// Generate 3 example problems
-				for (let i = 0; i < 3; i++) {
-					const exampleProblem = getRandomProblem(
-						category as Category,
-					);
-					const exampleDiv = document.createElement("div");
-					exampleDiv.className = "example-problem";
-					exampleDiv.textContent = exampleProblem.text;
-					examplesList.appendChild(exampleDiv);
-				}
-
-				examplesDiv.appendChild(examplesList);
 				checkboxItem.appendChild(examplesDiv);
 
 				checkboxGrid.appendChild(checkboxItem);
 			});
 
+			// Lazily generate example problems when the group is first opened
+			groupDetails.addEventListener(
+				"toggle",
+				() => {
+					if (!groupDetails.open) return;
+					const emptyExamples = checkboxGrid.querySelectorAll(
+						".category-examples:empty",
+					);
+					emptyExamples.forEach((examplesDiv) => {
+						const item = examplesDiv.closest(".checkbox-item");
+						const cat = item?.querySelector("input")?.value;
+						if (!cat) return;
+
+						const examplesList = document.createElement("div");
+						examplesList.className = "examples-list";
+						for (let i = 0; i < 3; i++) {
+							const exampleProblem = getRandomProblem(
+								cat as Category,
+							);
+							const exampleDiv = document.createElement("div");
+							exampleDiv.className = "example-problem";
+							exampleDiv.textContent = exampleProblem.text;
+							examplesList.appendChild(exampleDiv);
+						}
+						examplesDiv.appendChild(examplesList);
+					});
+				},
+			);
+
 			groupDetails.appendChild(checkboxGrid);
 			categoryGroupsEl.appendChild(groupDetails);
+
+			// If group was auto-opened (has checked items), populate examples now
+			if (groupDetails.open) {
+				groupDetails.dispatchEvent(new Event("toggle"));
+			}
 		});
 	}
 

src/practice.ts

@@ -74,7 +74,7 @@ document.addEventListener("DOMContentLoaded", () => {
 	) as HTMLButtonElement;
 
 	// State Variables
-	let currentProblem: any;
+	let currentProblem: Problem;
 	let currentCategory: Category;
 	let selectedCategories: string[] = [];
 	let currentRewardImageId: number | null = null;
@@ -259,7 +259,6 @@ document.addEventListener("DOMContentLoaded", () => {
 	// Function to generate a new math problem
 	function newProblem() {
 		const result = getProblem(selectedCategories as Category[]);
-		console.log(JSON.stringify(result, null, 2));
 		currentProblem = result.problem;
 		currentCategory = result.category;