lesson css try

phase/Student_view/lesson.py

@@ -18,6 +18,72 @@ USE_LOCAL_DB = os.getenv("DISABLE_DB", "1") != "1"
 
 FALLBACK_TAG = "<!--fallback-->"
 
+
+# ---- NEW: minimal Markdown -> HTML helper (keeps cards as single HTML blocks)
+def _md_to_html(text: str) -> str:
+    """
+    Best-effort conversion so markdown-like lesson text can live *inside* a single HTML block.
+    Uses python-markdown if available; otherwise a tiny fallback that handles paragraphs + bullets.
+    """
+    if not text:
+        return ""
+    try:
+        # If python-markdown is available, use it for better fidelity.
+        from markdown import markdown as _mk
+        return _mk(text, extensions=["extra", "sane_lists"])
+    except Exception:
+        # Fallback: paragraphs + simple lists
+        lines = text.strip().splitlines()
+        html_parts = []
+        in_ul = False
+
+        def close_ul():
+            nonlocal in_ul
+            if in_ul:
+                html_parts.append("</ul>")
+                in_ul = False
+
+        for ln in lines:
+            s = ln.rstrip()
+            if not s:
+                close_ul()
+                html_parts.append("<p></p>")
+                continue
+
+            # Headings (#, ##, ###) basic support
+            if s.startswith("### "):
+                close_ul()
+                html_parts.append(f"<h3>{s[4:].strip()}</h3>")
+                continue
+            if s.startswith("## "):
+                close_ul()
+                html_parts.append(f"<h2>{s[3:].strip()}</h2>")
+                continue
+            if s.startswith("# "):
+                close_ul()
+                html_parts.append(f"<h1>{s[2:].strip()}</h1>")
+                continue
+
+            # Bullet lines
+            bullet_prefixes = ("- ", "* ", "• ", "– ")
+            if s.startswith(bullet_prefixes):
+                if not in_ul:
+                    html_parts.append("<ul>")
+                    in_ul = True
+                html_parts.append(f"<li>{s[2:].strip()}</li>")
+                continue
+
+            # Regular paragraph
+            close_ul()
+            # light bold/italic
+            p = re.sub(r"\*\*(.+?)\*\*", r"<strong>\1</strong>", s)
+            p = re.sub(r"\*(.+?)\*", r"<em>\1</em>", p)
+            html_parts.append(f"<p>{p}</p>")
+
+        close_ul()
+        return "\n".join(html_parts)
+
+
 # --- Load external CSS (optional) ---
 def load_css(file_name: str):
     try:
@@ -38,7 +104,6 @@ _SS_DEFAULTS = {
 }
 
 
-
 def _ensure_state():
     for k, v in _SS_DEFAULTS.items():
         if k not in st.session_state:
@@ -418,6 +483,9 @@ def _get_topics(level: str, module_id: int) -> List[Tuple[str, str]]:
 
 
 def _render_lesson():
+    ensure_quiz_state()
+    # make sure quiz keys exist
+    
     """Render the lesson interface"""
     level = st.session_state.get("level", "beginner")
     module_id = st.session_state.get("module_id")
@@ -570,7 +638,27 @@ def _render_lesson():
     with col_main:
         t_title, t_text = topics[topic_idx]
 
-        st.markdown(f"""
+        # ---- CHANGED: Build the entire lesson card in ONE HTML render
+        lesson_html_text = _md_to_html((t_text or "").strip())
+
+        takeaways_html = ""
+        if t_text:
+            takeaways = _extract_takeaways(t_text)
+            if takeaways:
+                takeaways_html = (
+                    '<div class="takeaways-section" style="min-height: 150px;">'
+                    '  <div class="takeaways-header">'
+                    '    <span style="color: #10b981;">●</span>'
+                    '    <span>Key Takeaways</span>'
+                    '  </div>'
+                    + "".join(
+                        f'<div class="takeaway-item"><span class="takeaway-check">✓</span><span>{st.escape_markdown(x)}</span></div>'
+                        for x in takeaways
+                    )
+                    + "</div>"
+                )
+
+        card_html = f"""
         <div class="lesson-card">
             <div class="unit-header">
                 <span class="unit-info">Unit {topic_idx + 1} of {len(topics)}</span>
@@ -580,44 +668,20 @@ def _render_lesson():
                 </div>
             </div>
             <div class="lesson-content">
-        """, unsafe_allow_html=True)
-
-        if t_text:
-            st.markdown(t_text.strip(), unsafe_allow_html=True)
-        else:
-            st.info("Content coming soon.")
-
-        if t_text:
-            takeaways = _extract_takeaways(t_text)
-            if takeaways:
-                st.markdown("""
-                <div class="takeaways-section" style="min-height: 150px;">
-                    <div class="takeaways-header">
-                        <span style="color: #10b981;">●</span>
-                        <span>Key Takeaways</span>
-                    </div>
-                """, unsafe_allow_html=True)
-                
-                for takeaway in takeaways:
-                    st.markdown(f"""
-                    <div class="takeaway-item">
-                        <span class="takeaway-check">✓</span>
-                        <span>{takeaway}</span>
-                    </div>
-                    """, unsafe_allow_html=True)
-                
-                st.markdown("</div>", unsafe_allow_html=True)
-
-        st.markdown("</div></div>", unsafe_allow_html=True)
+                {lesson_html_text}
+            </div>
+            {takeaways_html}
+        </div>
+        """
+        st.markdown(card_html, unsafe_allow_html=True)
 
+        # Navigation buttons (stay as Streamlit widgets)
         st.markdown('<div class="nav-buttons">', unsafe_allow_html=True)
-        
         col1, col2, col3 = st.columns([1, 1, 1])
         with col1:
             if st.button("← Previous", disabled=topic_idx == 0, key="prev_btn"):
                 st.session_state.topic_idx -= 1
                 st.rerun()
-        
         with col3:
             is_last = topic_idx >= len(topics) - 1
             if is_last:
@@ -631,57 +695,53 @@ def _render_lesson():
                 if st.button("Next Unit →", key="next_btn"):
                     st.session_state.topic_idx += 1
                     st.rerun()
-        
         st.markdown('</div>', unsafe_allow_html=True)
 
     with col_sidebar:
-        # Module Progress Card
-        st.markdown("""
+        # ---- CHANGED: Render sidebar progress as a single HTML block (so it's inside the card)
+        progress = (topic_idx + 1) / max(1, len(topics))
+        progress_pct = int(progress * 100)
+
+        progress_html = f"""
         <div class="sidebar-card" style="min-height: 120px;">
             <h4>Module Progress</h4>
-        """, unsafe_allow_html=True)
-        
-        progress = (topic_idx + 1) / max(1, len(topics))
-        st.progress(progress)
-        st.markdown(f"<p style='color: #6b7280; font-size: 0.875rem; margin-top: 0.5rem;'>Unit {topic_idx + 1} of {len(topics)}</p>", unsafe_allow_html=True)
-        
-        st.markdown("</div>", unsafe_allow_html=True)
-
-        # Module Units Card
-        st.markdown("""
-        <div class="sidebar-card" style="min-height: 300px;">
-            <h4>Module Units</h4>
-        """, unsafe_allow_html=True)
-        
+            <div style="width:100%;height:10px;background:#e5e7eb;border-radius:8px;overflow:hidden;">
+                <div style="height:10px;width:{progress_pct}%;background:#10b981;"></div>
+            </div>
+            <p style="color:#6b7280;font-size:0.875rem;margin-top:0.5rem;">
+                Unit {topic_idx + 1} of {len(topics)}
+            </p>
+        </div>
+        """
+        st.markdown(progress_html, unsafe_allow_html=True)
+
+        # ---- CHANGED: Render the "Module Units" list as one HTML block too
+        units_html = '<div class="sidebar-card" style="min-height: 300px;"><h4>Module Units</h4>'
         for i, (tt, _) in enumerate(topics):
-            is_current = i == topic_idx
-            is_completed = i < topic_idx
-            
-            if is_current:
-                st.markdown(f"""
+            if i == topic_idx:
+                units_html += f"""
                 <div class="unit-item">
-                    <span style="background: #10b981; color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem;">●</span>
+                    <span style="background:#10b981;color:white;width:20px;height:20px;border-radius:50%;
+                                 display:flex;align-items:center;justify-content:center;font-size:0.75rem;">●</span>
                     <span class="unit-active">{tt}</span>
-                </div>
-                """, unsafe_allow_html=True)
-            elif is_completed:
-                st.markdown(f"""
+                </div>"""
+            elif i < topic_idx:
+                units_html += f"""
                 <div class="unit-item">
-                    <span style="color: #10b981; font-size: 1.1rem;">✓</span>
-                    <span style="color: #374151;">{tt}</span>
-                </div>
-                """, unsafe_allow_html=True)
+                    <span style="color:#10b981;font-size:1.1rem;">✓</span>
+                    <span style="color:#374151;">{tt}</span>
+                </div>"""
             else:
-                st.markdown(f"""
+                units_html += f"""
                 <div class="unit-item">
-                    <span style="background: #e5e7eb; color: #9ca3af; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem;">○</span>
+                    <span style="background:#e5e7eb;color:#9ca3af;width:20px;height:20px;border-radius:50%;
+                                 display:flex;align-items:center;justify-content:center;font-size:0.75rem;">○</span>
                     <span class="unit-inactive">{tt}</span>
-                </div>
-                """, unsafe_allow_html=True)
-        
-        st.markdown("</div>", unsafe_allow_html=True)
+                </div>"""
+        units_html += "</div>"
+        st.markdown(units_html, unsafe_allow_html=True)
 
-        # Back to modules button
+        # Back to modules button (Streamlit widget outside HTML block)
         if st.button("← Back to Modules", key="back_modules"):
             st.session_state.mode = "catalog"
             st.session_state.module_id = None