Also list KSAs by Category

theme/reports/ksa.html

@@ -12,9 +12,11 @@
             This is not a report on your progress, but rather
             what you would have covered if you had worked every exercise available.
         </p>
-        <table class="errors">
 
+        <div class="KSAsByCategory">
+            <h2>All KSAs by Category</h2>
         </div>
+
         <table class="puzzles">
             <thead>
                 <tr>

theme/reports/ksa.mjs

@@ -24,6 +24,20 @@ async function init() {
     let puzzles = state.Puzzles()
     for (let puzzle of puzzles) {
         await puzzle.Populate().catch(x => {})
+    }
+
+    doing("Filling tables")
+    let KSAsByCategory = {}
+    for (let puzzle of puzzles) {
+        let KSAs = KSAsByCategory[puzzle.Category]
+        if (!KSAs) {
+            KSAs = new Set()
+            KSAsByCategory[puzzle.Category] = KSAs
+        }
+        for (let KSA of (puzzle.KSAs || [])) {
+            KSAs.add(KSA)
+        }
+
         for (let tbody of document.querySelectorAll("tbody")) {
             let row = puzzlerowTemplate.content.cloneNode(true)
             row.querySelector(".category").textContent = puzzle.Category
@@ -34,6 +48,20 @@ async function init() {
         }
     }
 
+    doing("Filling KSAs By Category")
+    for (let div of document.querySelectorAll(".KSAsByCategory")) {
+        for (let category of state.Categories()) {
+            let KSAs = [...KSAsByCategory[category]]
+            KSAs.sort()
+
+            div.appendChild(document.createElement("h3")).textContent = category
+            let ul = div.appendChild(document.createElement("ul"))
+            for (let k of KSAs) {
+                ul.appendChild(document.createElement("li")).textContent = k
+            }
+        }
+    }
+
     doing()
 }