Update services/quiz_service.py

services/quiz_service.py

@@ -104,150 +104,119 @@ def _validate_questions(questions: list[dict]) -> list[dict]:
 
 def _render_quiz_html(questions: list[dict], title: str) -> str:
     """
-    Render quiz as pure HTML/CSS using the checkbox hack.
-    Each question has a hidden checkbox; clicking 'Show Answer' reveals
-    the correct answer and explanation via CSS :checked selector.
-    No JavaScript required — works inside Gradio's gr.HTML sandbox.
+    Pure CSS/HTML interactive quiz using radio buttons.
+
+    Mechanic:
+    - Each option is a <label> for a hidden <input type="radio">
+    - Clicking an option selects that radio
+    - CSS :checked selectors immediately highlight:
+        * Selected correct answer → green
+        * Selected wrong answer → red + correct answer reveals green
+        * Explanation panel appears on any selection
+    - No JavaScript needed — works in Gradio gr.HTML sandbox
     """
-    quiz_id = f"q{uuid.uuid4().hex[:8]}"
+    qid = f"q{uuid.uuid4().hex[:8]}"
 
-    css = f"""
-<style>
-  .{quiz_id}-quiz {{
-    font-family: inherit;
-    max-width: 700px;
-  }}
-  .{quiz_id}-title {{
-    font-size: 1.05rem;
-    font-weight: 700;
-    color: #e0e0f0;
-    margin-bottom: 20px;
-    padding-bottom: 10px;
+    css = f"""<style>
+  .{qid}-wrap {{ font-family: inherit; max-width: 700px; }}
+  .{qid}-title {{
+    font-size: 1.05rem; font-weight: 700; color: #e0e0f0;
+    margin-bottom: 20px; padding-bottom: 10px;
     border-bottom: 1px solid rgba(255,255,255,0.08);
   }}
-  .{quiz_id}-qblock {{
+  .{qid}-qblock {{
     background: rgba(255,255,255,0.03);
     border: 1px solid rgba(255,255,255,0.08);
-    border-radius: 12px;
-    padding: 18px 20px;
-    margin-bottom: 14px;
-  }}
-  .{quiz_id}-qnum {{
-    font-size: 0.72rem;
-    color: #606080;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-bottom: 6px;
+    border-radius: 12px; padding: 18px 20px; margin-bottom: 14px;
   }}
-  .{quiz_id}-qtext {{
-    font-size: 0.93rem;
-    font-weight: 600;
-    color: #d0d0e8;
-    margin-bottom: 14px;
-    line-height: 1.5;
+  .{qid}-qnum {{
+    font-size: 0.72rem; color: #505068; text-transform: uppercase;
+    letter-spacing: 0.05em; margin-bottom: 6px;
   }}
-  .{quiz_id}-options {{
-    display: flex;
-    flex-direction: column;
-    gap: 7px;
-    margin-bottom: 12px;
+  .{qid}-qtext {{
+    font-size: 0.93rem; font-weight: 600; color: #d0d0e8;
+    margin-bottom: 14px; line-height: 1.5;
   }}
-  .{quiz_id}-option {{
-    padding: 9px 14px;
+
+  /* Hide all radio inputs */
+  .{qid}-radio {{ display: none; }}
+
+  /* Option labels — look like cards */
+  .{qid}-opt {{
+    display: block; padding: 10px 15px; margin-bottom: 7px;
     background: rgba(255,255,255,0.02);
-    border: 1px solid rgba(255,255,255,0.08);
-    border-radius: 8px;
-    font-size: 0.87rem;
-    color: #a0a0c0;
-    line-height: 1.4;
-  }}
-  .{quiz_id}-toggle {{
-    display: none;
-  }}
-  .{quiz_id}-reveal-btn {{
-    display: inline-block;
-    padding: 7px 18px;
-    background: rgba(102,126,234,0.10);
-    border: 1px solid rgba(102,126,234,0.25);
-    border-radius: 20px;
-    font-size: 0.82rem;
-    color: #a5b4fc;
-    cursor: pointer;
-    user-select: none;
-    transition: background 0.15s;
-  }}
-  .{quiz_id}-reveal-btn:hover {{
-    background: rgba(102,126,234,0.20);
-  }}
-  .{quiz_id}-answer {{
-    display: none;
-    margin-top: 12px;
-    padding: 12px 16px;
-    background: rgba(34,197,94,0.07);
-    border: 1px solid rgba(34,197,94,0.20);
-    border-radius: 10px;
-  }}
-  .{quiz_id}-toggle:checked ~ .{quiz_id}-answer {{
-    display: block;
-  }}
-  .{quiz_id}-toggle:checked ~ label.{quiz_id}-reveal-btn {{
-    display: none;
-  }}
-  .{quiz_id}-toggle:checked ~ .{quiz_id}-options .{quiz_id}-correct-option {{
-    border-color: rgba(34,197,94,0.40);
-    background: rgba(34,197,94,0.08);
-    color: #86efac;
-  }}
-  .{quiz_id}-correct-label {{
-    font-size: 0.82rem;
-    color: #86efac;
-    font-weight: 700;
-    margin-bottom: 5px;
-  }}
-  .{quiz_id}-explanation {{
-    font-size: 0.83rem;
-    color: #7090a0;
-    line-height: 1.5;
+    border: 1px solid rgba(255,255,255,0.09);
+    border-radius: 8px; font-size: 0.87rem; color: #a0a0c0;
+    cursor: pointer; line-height: 1.4;
+    transition: border-color 0.12s, background 0.12s;
   }}
-  .{quiz_id}-toggle:checked ~ .{quiz_id}-options-wrap .{quiz_id}-correct-option {{
-    border-color: rgba(34,197,94,0.40);
-    background: rgba(34,197,94,0.08);
-    color: #86efac;
+  .{qid}-opt:hover {{ background: rgba(102,126,234,0.07); border-color: rgba(102,126,234,0.25); color: #c0c0e0; }}
+
+  /* Explanation — hidden until any radio in the group is checked */
+  .{qid}-exp {{
+    display: none; margin-top: 10px; padding: 11px 15px;
+    background: rgba(102,126,234,0.06);
+    border-left: 3px solid rgba(102,126,234,0.35);
+    border-radius: 0 8px 8px 0;
+    font-size: 0.83rem; color: #8888b0; line-height: 1.5;
   }}
 </style>
 """
 
-    body = f'<div class="{quiz_id}-quiz">\n'
-    body += f'<div class="{quiz_id}-title">📝 {title}</div>\n'
+    body = f'<div class="{qid}-wrap"><div class="{qid}-title">📝 {title}</div>\n'
 
     for i, q in enumerate(questions):
-        cb_id = f"{quiz_id}_cb{i}"
-        correct_letter = q["answer"]
-        correct_text = q["options"][ord(correct_letter) - 65][3:]  # text after "A) "
-
-        body += f'<div class="{quiz_id}-qblock">\n'
-        body += f'  <div class="{quiz_id}-qnum">Question {i+1} of {len(questions)}</div>\n'
-        body += f'  <div class="{quiz_id}-qtext">{q["question"]}</div>\n'
-
-        # Checkbox MUST be placed before the elements it controls via ~ sibling selector
-        body += f'  <input type="checkbox" class="{quiz_id}-toggle" id="{cb_id}">\n'
-
-        # Options wrapper — correct-option class is inert until :checked activates it via CSS
-        body += f'  <div class="{quiz_id}-options">\n'
-        for opt in q["options"]:
-            letter = opt[0]
-            extra = f' {quiz_id}-correct-option' if letter == correct_letter else ''
-            body += f'    <div class="{quiz_id}-option{extra}">{opt}</div>\n'
-        body += f'  </div>\n'
-
-        # Show Answer button — hidden after click via CSS
-        body += f'  <label for="{cb_id}" class="{quiz_id}-reveal-btn">👁 Show Answer</label>\n'
-
-        # Answer panel — hidden until :checked
-        body += f'  <div class="{quiz_id}-answer">\n'
-        body += f'    <div class="{quiz_id}-correct-label">✅ Correct Answer: {correct_letter}) {correct_text}</div>\n'
-        body += f'    <div class="{quiz_id}-explanation">{q["explanation"]}</div>\n'
-        body += f'  </div>\n'
+        correct = q["answer"]          # "A", "B", "C", or "D"
+        correct_idx = ord(correct) - 65  # 0-3
+        correct_text = q["options"][correct_idx][3:]
+        letters = ["A", "B", "C", "D"]
+
+        body += f'<div class="{qid}-qblock">\n'
+        body += f'  <div class="{qid}-qnum">Question {i+1} of {len(questions)}</div>\n'
+        body += f'  <div class="{qid}-qtext">{q["question"]}</div>\n'
+
+        # Emit all 4 radio inputs FIRST (before labels) so CSS siblings work
+        for letter in letters:
+            radio_id = f"{qid}_q{i}_{letter}"
+            body += f'  <input type="radio" class="{qid}-radio" name="{qid}_q{i}" id="{radio_id}" value="{letter}">\n'
+
+        # Now emit labels (option cards) + CSS rules inline per question
+        # We use a <style> block per question to generate the specific selectors
+        # because we need to reference the correct letter dynamically
+        body += f'  <style>\n'
+
+        for letter in letters:
+            radio_id = f"{qid}_q{i}_{letter}"
+            correct_radio_id = f"{qid}_q{i}_{correct}"
+
+            if letter == correct:
+                # Selecting the correct answer → green
+                body += f'    #{radio_id}:checked ~ label[for="{radio_id}"] {{\n'
+                body += f'      background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.45); color: #86efac;\n'
+                body += f'    }}\n'
+            else:
+                # Selecting a wrong answer → that option turns red
+                body += f'    #{radio_id}:checked ~ label[for="{radio_id}"] {{\n'
+                body += f'      background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.35); color: #fca5a5;\n'
+                body += f'    }}\n'
+                # AND the correct answer reveals green
+                body += f'    #{radio_id}:checked ~ label[for="{correct_radio_id}"] {{\n'
+                body += f'      background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.45); color: #86efac;\n'
+                body += f'    }}\n'
+
+            # Any selection reveals the explanation
+            body += f'    #{radio_id}:checked ~ .{qid}-exp {{ display: block; }}\n'
+
+        body += f'  </style>\n'
+
+        # Option labels
+        for letter in letters:
+            radio_id = f"{qid}_q{i}_{letter}"
+            opt_text = q["options"][ord(letter) - 65]
+            body += f'  <label for="{radio_id}" class="{qid}-opt">{opt_text}</label>\n'
+
+        # Explanation (revealed by CSS on any selection)
+        body += f'  <div class="{qid}-exp">💡 <strong>Explanation:</strong> {q["explanation"]}</div>\n'
         body += f'</div>\n'
 
     body += '</div>\n'