vault backup: 2025-12-22 22:49:13

quiz/templates/partials/matching_question.html

@@ -53,6 +53,13 @@
     .matching-table .radio-cell {
         width: 60px;
         background: white;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+
+    .matching-table .radio-cell:hover:not(.diagonal-block) {
+        background: #f0f4ff;
+        border-color: var(--primary);
     }
 
     .matching-table .diagonal-block {
@@ -114,11 +121,12 @@
                     <strong>{{ forloop.counter }}.</strong> {{ left_item }}
                 </td>
                 {% for top_item in question.matching_data.top_items %}
-                <td class="radio-cell">
+                <td class="radio-cell" data-left="{{ forloop.parentloop.counter0 }}" data-top="{{ forloop.counter0 }}">
                     {% if forloop.parentloop.counter0 != forloop.counter0 %}
                     <input type="radio" name="match-{{ forloop.parentloop.counter0 }}" value="{{ forloop.counter0 }}"
                         data-left="{{ forloop.parentloop.counter0 }}" data-top="{{ forloop.counter0 }}"
-                        id="radio-{{ forloop.parentloop.counter0 }}-{{ forloop.counter0 }}">
+                        id="radio-{{ forloop.parentloop.counter0 }}-{{ forloop.counter0 }}"
+                        style="pointer-events: none;">
                     {% else %}
                     <!-- Diagonal - no radio button -->
                     <span class="diagonal-block">—</span>
@@ -129,15 +137,6 @@
             {% endfor %}
         </tbody>
     </table>
-
-    <div class="top-items-legend">
-        <h4>Kolumnalternativ:</h4>
-        {% for top_item in question.matching_data.top_items %}
-        <div class="top-item-label">
-            <strong>{{ forloop.counter }}.</strong> {{ top_item }}
-        </div>
-        {% endfor %}
-    </div>
 </div>
 
 <script>
@@ -146,6 +145,26 @@
         const quizContent = document.getElementById('quiz-content');
         if (!quizContent) return;
 
+        // Handle clicks on table cells to select radio buttons
+        quizContent.addEventListener('click', (e) => {
+            const cell = e.target.closest('.radio-cell');
+            if (!cell) return;
+
+            // Don't do anything for diagonal cells
+            if (cell.querySelector('.diagonal-block')) return;
+
+            const leftIdx = cell.dataset.left;
+            const topIdx = cell.dataset.top;
+
+            if (leftIdx !== undefined && topIdx !== undefined) {
+                const radio = document.getElementById('radio-' + leftIdx + '-' + topIdx);
+                if (radio) {
+                    radio.checked = true;
+                    saveMatchingAnswer();
+                }
+            }
+        });
+
         quizContent.addEventListener('change', (e) => {
             if (e.target.type === 'radio' && e.target.dataset.left) {
                 saveMatchingAnswer();