Add: enhance filter functionality with toggle options for specialty a…

…nd difficulty; improve UI layout and styling
Skippou · Jan 2, 2025 · b3d9a1d · b3d9a1d
1 parent 14fb3e5
commit b3d9a1d
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 25 deletions.
diff --git a/src/index.html b/src/index.html
@@ -10,26 +10,32 @@
     <h1>Internal Medicine Questions</h1>
     <div class="question-list">
         <div class="filters">
-            <label for="specialty">Filter by Specialty:</label>
-            <select id="specialty" multiple>
-                <option value="">All Specialties</option>
-            </select>
+            <div class="filter-group">
+                <label for="specialty">Filter by Specialty:</label>
+                <button class="toggle-all" onclick="toggleAll('specialty')">Select All/None</button>
+                <select id="specialty" multiple>
+                </select>
+            </div>
 
-            <label for="difficulty">Filter by Difficulty:</label>
-            <select id="difficulty" multiple>
-                <option value="">All Difficulties</option>
-                <option value="easy">Easy</option>
-                <option value="medium">Medium</option>
-                <option value="hard">Hard</option>
-                <option value="ultra-hard">Ultra Hard</option>
-            </select>
-
-            <label for="viewedFilter">Show:</label>
-            <select id="viewedFilter">
-                <option value="all">All Questions</option>
-                <option value="viewed">Viewed Only</option>
-                <option value="unviewed">Unviewed Only</option>
-            </select>
+            <div class="filter-group">
+                <label for="difficulty">Filter by Difficulty:</label>
+                <button class="toggle-all" onclick="toggleAll('difficulty')">Select All/None</button>
+                <select id="difficulty" multiple>
+                    <option value="easy">Easy</option>
+                    <option value="medium">Medium</option>
+                    <option value="hard">Hard</option>
+                    <option value="ultra-hard">Ultra Hard</option>
+                </select>
+            </div>
+
+            <div class="filter-group">
+                <label for="viewedFilter">Filter by Viewed:</label>
+                <select id="viewedFilter">
+                    <option value="all">All Questions</option>
+                    <option value="viewed">Viewed Only</option>
+                    <option value="unviewed">Unviewed Only</option>
+                </select>
+            </div>
         </div>
         <!-- Add count display -->
         <div id="questionCount" class="question-count"></div>
@@ -156,14 +162,22 @@ <h3>
             }
         };
 
+        // Add toggle function
+        window.toggleAll = function(selectId) {
+            const select = document.getElementById(selectId);
+            const allSelected = Array.from(select.options).every(opt => opt.selected);
+            Array.from(select.options).forEach(opt => opt.selected = !allSelected);
+            filterQuestions(true);
+        };
+
         // Modify the loadQuestions function
         async function loadQuestions() {
             const isGitHubPages = location.hostname.includes('github.io');
             const basePath = isGitHubPages ? '/internal-med-questions' : '';
             const response = await fetch(`${basePath}/questionIndex.json`);
             window.questionsData = await response.json(); // Store in global variable
 
-            // Populate specialty dropdown
+            // Populate specialty dropdown (remove "All Specialties" option)
             const specialties = [...new Set(window.questionsData.map(q => q.specialty))].sort();
             const specialtySelect = document.getElementById('specialty');
             specialties.forEach(specialty => {
@@ -173,15 +187,22 @@ <h3>
                 specialtySelect.appendChild(option);
             });
 
-            // Set initial filter values from URL
+            // Set initial filter values from URL or select all by default
             const urlParams = getUrlParams();
+            const hasSpecialtiesInUrl = urlParams.specialties.length > 0;
+            const hasDifficultiesInUrl = urlParams.difficulties.length > 0;
+
             Array.from(specialtySelect.options).forEach(option => {
-                option.selected = urlParams.specialties.includes(option.value);
+                option.selected = hasSpecialtiesInUrl ? 
+                    urlParams.specialties.includes(option.value) : 
+                    true; // Select all by default
             });
 
             const difficultySelect = document.getElementById('difficulty');
             Array.from(difficultySelect.options).forEach(option => {
-                option.selected = urlParams.difficulties.includes(option.value);
+                option.selected = hasDifficultiesInUrl ? 
+                    urlParams.difficulties.includes(option.value) : 
+                    true; // Select all by default
             });
 
             document.getElementById('viewedFilter').value = urlParams.viewed;

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -47,6 +47,26 @@ details {
     margin-bottom: 5px;
 }
 
+.filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.toggle-all {
+    padding: 4px 8px;
+    background: #e0e0e0;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.8em;
+    margin-bottom: 5px;
+}
+
+.toggle-all:hover {
+    background: #d0d0d0;
+}
+
 .question-item {
     border: 1px solid #ddd;
     margin: 10px 0;
@@ -74,10 +94,10 @@ select {
     border-radius: 4px;
     border: 1px solid #ddd;
 }
-the 
+
 select[multiple] {
     min-width: 200px;
-    min-height: 100px;
+    min-height: 150px;
     padding: 5px;
     margin: 0 10px;
     border-radius: 4px;