Add row selection functionality with toggle and count updates in table view

templates/base.html

@@ -310,6 +310,118 @@
             });
 
         </script>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const toggleBtn = document.getElementById('toggle-row-selection');
+    const selectionControls = document.getElementById('selection-controls');
+    const selectAllBtn = document.getElementById('select-all');
+    const clearBtn = document.getElementById('clear-selection');
+    const selectedCountSpan = document.getElementById('selected-count');
+    const table = document.querySelector('.table-responsive table');
+    let selectionEnabled = false;
+
+    function findRowCheckboxes() {
+        if (!table) return [];
+        return Array.from(table.querySelectorAll('input[type="checkbox"]'));
+    }
+
+    function updateSelectedCount() {
+        const checks = findRowCheckboxes();
+        const count = checks.filter(c => c.checked).length;
+        selectedCountSpan.textContent = count;
+        // update row highlight based on checkbox state
+        checks.forEach(cb => {
+            const tr = cb.closest('tr');
+            if (tr) tr.classList.toggle('table-active', cb.checked);
+        });
+    }
+
+    function setCheckboxesDisabled(disabled) {
+        findRowCheckboxes().forEach(cb => {
+            cb.disabled = disabled;
+        });
+    }
+
+    function hideSelectionColumn() {
+        if (!table) return;
+        // hide any th/td that contains the selection checkbox
+        table.querySelectorAll('th, td').forEach(function(cell) {
+            if (cell.querySelector && cell.querySelector('input[type="checkbox"]')) {
+                cell.style.display = 'none';
+            }
+        });
+    }
+
+    function showSelectionColumn() {
+        if (!table) return;
+        table.querySelectorAll('th, td').forEach(function(cell) {
+            if (cell.querySelector && cell.querySelector('input[type="checkbox"]')) {
+                cell.style.display = '';
+            }
+        });
+    }
+
+    // disable checkboxes by default and hide the selection column
+    setCheckboxesDisabled(true);
+    hideSelectionColumn();
+
+    // row click toggling
+    document.addEventListener('click', function(e) {
+        if (!selectionEnabled) return;
+        // ignore clicks on inputs, anchors, buttons
+        const tag = e.target.tagName.toLowerCase();
+        if (['input','a','button','select','textarea','label'].includes(tag)) return;
+        const tr = e.target.closest('tr');
+        if (!tr || !table || !table.contains(tr)) return;
+        const cb = tr.querySelector('input[type="checkbox"]');
+        if (cb && !cb.disabled) {
+            cb.checked = !cb.checked;
+            // reflect highlight immediately
+            tr.classList.toggle('table-active', cb.checked);
+            updateSelectedCount();
+        }
+    });
+
+    if (toggleBtn) {
+        toggleBtn.addEventListener('click', function() {
+            selectionEnabled = !selectionEnabled;
+            if (selectionEnabled) {
+                toggleBtn.textContent = 'Disable row selection';
+                selectionControls.style.display = '';
+                setCheckboxesDisabled(false);
+                showSelectionColumn();
+            } else {
+                toggleBtn.textContent = 'Enable row selection';
+                selectionControls.style.display = 'none';
+                setCheckboxesDisabled(true);
+                hideSelectionColumn();
+                // clear any selected checkboxes
+                findRowCheckboxes().forEach(cb => cb.checked = false);
+                updateSelectedCount();
+            }
+        });
+    }
+
+    if (selectAllBtn) {
+        selectAllBtn.addEventListener('click', function() {
+            findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = true; });
+            updateSelectedCount();
+        });
+    }
+
+    if (clearBtn) {
+        clearBtn.addEventListener('click', function() {
+            findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = false; });
+            updateSelectedCount();
+        });
+    }
+
+    // Keep count updated if checkboxes are toggled directly
+    document.addEventListener('change', function(e) {
+        if (e.target && e.target.matches('input[type="checkbox"]')) updateSelectedCount();
+    });
+});
+</script>
     </body>
 
 

templates/question_table_view.html

@@ -218,116 +218,4 @@
 {% endblock %}
 
 {% block js %}
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const toggleBtn = document.getElementById('toggle-row-selection');
-    const selectionControls = document.getElementById('selection-controls');
-    const selectAllBtn = document.getElementById('select-all');
-    const clearBtn = document.getElementById('clear-selection');
-    const selectedCountSpan = document.getElementById('selected-count');
-    const table = document.querySelector('.table-responsive table');
-    let selectionEnabled = false;
-
-    function findRowCheckboxes() {
-        if (!table) return [];
-        return Array.from(table.querySelectorAll('input[type="checkbox"]'));
-    }
-
-    function updateSelectedCount() {
-        const checks = findRowCheckboxes();
-        const count = checks.filter(c => c.checked).length;
-        selectedCountSpan.textContent = count;
-        // update row highlight based on checkbox state
-        checks.forEach(cb => {
-            const tr = cb.closest('tr');
-            if (tr) tr.classList.toggle('table-active', cb.checked);
-        });
-    }
-
-    function setCheckboxesDisabled(disabled) {
-        findRowCheckboxes().forEach(cb => {
-            cb.disabled = disabled;
-        });
-    }
-
-    function hideSelectionColumn() {
-        if (!table) return;
-        // hide any th/td that contains the selection checkbox
-        table.querySelectorAll('th, td').forEach(function(cell) {
-            if (cell.querySelector && cell.querySelector('input[type="checkbox"]')) {
-                cell.style.display = 'none';
-            }
-        });
-    }
-
-    function showSelectionColumn() {
-        if (!table) return;
-        table.querySelectorAll('th, td').forEach(function(cell) {
-            if (cell.querySelector && cell.querySelector('input[type="checkbox"]')) {
-                cell.style.display = '';
-            }
-        });
-    }
-
-    // disable checkboxes by default and hide the selection column
-    setCheckboxesDisabled(true);
-    hideSelectionColumn();
-
-    // row click toggling
-    document.addEventListener('click', function(e) {
-        if (!selectionEnabled) return;
-        // ignore clicks on inputs, anchors, buttons
-        const tag = e.target.tagName.toLowerCase();
-        if (['input','a','button','select','textarea','label'].includes(tag)) return;
-        const tr = e.target.closest('tr');
-        if (!tr || !table || !table.contains(tr)) return;
-        const cb = tr.querySelector('input[type="checkbox"]');
-        if (cb && !cb.disabled) {
-            cb.checked = !cb.checked;
-            // reflect highlight immediately
-            tr.classList.toggle('table-active', cb.checked);
-            updateSelectedCount();
-        }
-    });
-
-    if (toggleBtn) {
-        toggleBtn.addEventListener('click', function() {
-            selectionEnabled = !selectionEnabled;
-            if (selectionEnabled) {
-                toggleBtn.textContent = 'Disable row selection';
-                selectionControls.style.display = '';
-                setCheckboxesDisabled(false);
-                showSelectionColumn();
-            } else {
-                toggleBtn.textContent = 'Enable row selection';
-                selectionControls.style.display = 'none';
-                setCheckboxesDisabled(true);
-                hideSelectionColumn();
-                // clear any selected checkboxes
-                findRowCheckboxes().forEach(cb => cb.checked = false);
-                updateSelectedCount();
-            }
-        });
-    }
-
-    if (selectAllBtn) {
-        selectAllBtn.addEventListener('click', function() {
-            findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = true; });
-            updateSelectedCount();
-        });
-    }
-
-    if (clearBtn) {
-        clearBtn.addEventListener('click', function() {
-            findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = false; });
-            updateSelectedCount();
-        });
-    }
-
-    // Keep count updated if checkboxes are toggled directly
-    document.addEventListener('change', function(e) {
-        if (e.target && e.target.matches('input[type="checkbox"]')) updateSelectedCount();
-    });
-});
-</script>
 {% endblock %}