Update app.py

app.py

@@ -1,4 +1,5 @@
 import streamlit as st
+import streamlit.components.v1 as components
 from io import BytesIO
 from datetime import datetime
 
@@ -6,7 +7,6 @@ from datetime import datetime
 try:
     from reportlab.pdfgen import canvas
     from reportlab.lib.pagesizes import letter
-    from reportlab.lib.units import inch
     REPORTLAB_AVAILABLE = True
 except Exception:
     REPORTLAB_AVAILABLE = False
@@ -14,7 +14,7 @@ except Exception:
 st.set_page_config(page_title="Interdependence Concept Game", page_icon="🧬", layout="centered")
 
 # ==============================
-# Content (updated per your notes)
+# Content
 # ==============================
 SCENARIOS = {
     "Blood Pressure (Hypotension)": [
@@ -39,7 +39,7 @@ SCENARIOS = {
             "stage3_rec":  "Cell membrane",
             "stage3_grad": "Concentration",
             "stage3_feedback_wrong": "Same synaptic logic: diffusion across a small gap.",
-            # Stage 4: Outcome (focus on CO + vasoconstriction)
+            # Stage 4: Outcome
             "outcome_question": "What will be the following response?",
             "outcome_options": [
                 "Cardiac output increases and vasoconstriction increases",  # correct
@@ -113,7 +113,7 @@ SCENARIOS = {
             "control_options": ["Kidney (local tubular control)", "Pancreas", "Medulla"],
             "control_correct": "Kidney (local tubular control)",
             "effector_options":[
-                "Glucose excretion into the urine increases",  # (we use this phrasing per your request)
+                "Glucose excretion into the urine increases",  # correct
                 "Renal glucose reabsorption increases",
                 "Insulin secretion increases"
             ],
@@ -160,7 +160,7 @@ SCENARIOS = {
             "stage3_feedback_wrong":"Synaptic diffusion across a small gap.",
             "outcome_question": "What will be the following response?",
             "outcome_options": [
-                "Muscle contraction",  # correct (removed '(shivering)')
+                "Muscle contraction",  # correct
                 "Muscle relaxation",
                 "Cutaneous vasodilation"
             ],
@@ -216,19 +216,6 @@ def init_state():
 def loop():
     return SCENARIOS[st.session_state.scenario][st.session_state.loop_idx]
 
-# Keys used by widgets that need clearing on reset / loop change
-WIDGET_KEYS = [
-    "s1_sensor", "s1_control", "s1_effector",
-    "st2_sig", "st2_rec", "st2_grad",
-    "st3_sig", "st3_rec", "st3_grad",
-    "st4_ans", "scenario_select"
-]
-
-def clear_widget_keys():
-    for k in WIDGET_KEYS:
-        if k in st.session_state:
-            del st.session_state[k]
-
 def safe_rerun():
     try:
         st.rerun()
@@ -239,7 +226,8 @@ def reset_loop():
     st.session_state.assign = {"sensor": None, "control": None, "effector": None}
     st.session_state.stage = 1
     st.session_state.msgs = {"s1":"", "s2":"", "s3":"", "s4":""}
-    clear_widget_keys()
+    # Clear any old radio selections by changing keys next render
+    st.session_state.get("widget_nonce")  # just touch
 
 def set_scenario(name):
     st.session_state.scenario = name
@@ -254,13 +242,17 @@ def next_loop_or_finish():
         st.session_state.msgs["s1"] = "Great—now build the second loop for this variable."
     else:
         st.session_state.msgs["s1"] = "Scenario complete! You can generate a certificate below."
-    safe_rerun()  # immediately show the next loop or the certificate UI
+    safe_rerun()
 
 def all_loops_complete_for_current_scenario() -> bool:
     return all(st.session_state.progress[st.session_state.scenario])
 
+# Make a loop-specific key suffix so widgets never collide across loops
+def loop_key_suffix():
+    return f"{st.session_state.scenario}_{st.session_state.loop_idx}"
+
 # ==============================
-# Diagram (FOUR arrows)
+# Diagram (FOUR arrows) — rendered via st.components.html
 # ==============================
 def diagram_svg(sensor_txt, control_txt, effector_txt):
     # Box geometry
@@ -271,7 +263,6 @@ def diagram_svg(sensor_txt, control_txt, effector_txt):
     # Anchors
     sL = (sx,        sy + sh/2)           # sensor LEFT-mid
     sR = (sx + sw,   sy + sh/2)           # sensor RIGHT-mid
-    cL = (cx,        cy + ch/2)           # control LEFT-mid
     cR = (cx + cw,   cy + ch/2)           # control RIGHT-mid
     cB = (cx + cw/2, cy + ch)             # control BOTTOM-mid
     eL = (ex,        ey + eh/2)           # effector LEFT-mid
@@ -363,43 +354,37 @@ def diagram_svg(sensor_txt, control_txt, effector_txt):
     return svg
 
 # ==============================
-# Certificate generation
+# Certificate
 # ==============================
 def generate_certificate_pdf(student_name: str, scenario_name: str, loops_done: list[str]) -> bytes:
     buf = BytesIO()
     c = canvas.Canvas(buf, pagesize=letter)
     W, H = letter
 
-    c.setFillColorRGB(0.29, 0.25, 0.71)
     c.setFont("Helvetica-Bold", 28)
-    c.drawCentredString(W/2, H - 1.5*inch, "Certificate of Completion")
+    c.drawCentredString(W/2, H - 100, "Certificate of Completion")
 
-    c.setFillColorRGB(0,0,0)
     c.setFont("Helvetica", 13)
-    c.drawCentredString(W/2, H - 2.0*inch, "This certifies that")
-
+    c.drawCentredString(W/2, H - 140, "This certifies that")
     c.setFont("Helvetica-Bold", 20)
-    c.drawCentredString(W/2, H - 2.5*inch, student_name if student_name.strip() else "Student")
-
+    c.drawCentredString(W/2, H - 170, student_name if student_name.strip() else "Student")
     c.setFont("Helvetica", 13)
-    c.drawCentredString(W/2, H - 3.1*inch, "has successfully completed the scenario")
-
+    c.drawCentredString(W/2, H - 200, "has successfully completed the scenario")
     c.setFont("Helvetica-Bold", 16)
-    c.drawCentredString(W/2, H - 3.55*inch, scenario_name)
+    c.drawCentredString(W/2, H - 225, scenario_name)
 
     c.setFont("Helvetica", 12)
-    y = H - 4.2*inch
+    y = H - 270
     c.drawCentredString(W/2, y, "Completed loops:")
-    y -= 0.3*inch
+    y -= 18
     for lp in loops_done:
         c.drawCentredString(W/2, y, f"• {lp}")
-        y -= 0.25*inch
+        y -= 16
 
     c.setFont("Helvetica-Oblique", 11)
-    c.drawCentredString(W/2, 1.25*inch, f"Issued on {datetime.now().strftime('%Y-%m-%d %H:%M')}")
+    c.drawCentredString(W/2, 80, f"Issued on {datetime.now().strftime('%Y-%m-%d %H:%M')}")
 
-    c.showPage()
-    c.save()
+    c.showPage(); c.save()
     buf.seek(0)
     return buf.read()
 
@@ -411,13 +396,14 @@ def init_and_render():
 
     st.title("🧩 Interdependence Concept Game")
 
-    # Scenario select with on_change that truly switches
+    # Scenario select (reruns on change)
     scenario_list = list(SCENARIOS.keys())
+    idx = scenario_list.index(st.session_state.scenario)
+
     def on_change_scenario():
         set_scenario(st.session_state["scenario_select"])
         safe_rerun()
 
-    idx = scenario_list.index(st.session_state.scenario)
     top_col1, top_col2 = st.columns([2,1])
     with top_col1:
         st.selectbox("Scenario", scenario_list, index=idx, key="scenario_select", on_change=on_change_scenario)
@@ -426,30 +412,35 @@ def init_and_render():
             reset_loop()
             safe_rerun()
 
-    # Stage 1
+    # Current loop & loop-scope key suffix
     current_loop = loop()
+    key_sfx = loop_key_suffix()
+
     st.subheader(f"Stage 1 · Build the negative feedback loop — **{current_loop['loop_name']}**")
 
+    # Diagram render via components.html (reliable for SVG)
     labels = st.session_state.assign
-    sensor_label  = labels["sensor"]  or "Sensor"
-    control_label = labels["control"] or "Control Center"
-    eff_label     = labels["effector"] or "Effector(s)"
-    st.markdown(diagram_svg(sensor_label, control_label, eff_label), unsafe_allow_html=True)
+    svg_html = diagram_svg(
+        labels['sensor'] or "Sensor",
+        labels['control'] or "Control Center",
+        labels['effector'] or "Effector(s)"
+    )
+    components.html(svg_html, height=640, scrolling=False)
 
     st.markdown("---")
 
     # Stage 1 — selections
     c = current_loop
     st.write("**Sensor options**")
-    sel_s = st.radio("Sensor", c["sensor_options"], index=None, horizontal=True, key="s1_sensor")
+    sel_s = st.radio("Sensor", c["sensor_options"], index=None, horizontal=True, key=f"s1_sensor_{key_sfx}")
     if sel_s is not None: labels["sensor"] = sel_s
 
     st.write("**Control center options**")
-    sel_c = st.radio("Control center", c["control_options"], index=None, horizontal=True, key="s1_control")
+    sel_c = st.radio("Control center", c["control_options"], index=None, horizontal=True, key=f"s1_control_{key_sfx}")
     if sel_c is not None: labels["control"] = sel_c
 
     st.write("**Effector options**")
-    sel_e = st.radio("Effector(s)", c["effector_options"], index=None, horizontal=True, key="s1_effector")
+    sel_e = st.radio("Effector(s)", c["effector_options"], index=None, horizontal=True, key=f"s1_effector_{key_sfx}")
     if sel_e is not None: labels["effector"] = sel_e
 
     if st.button("Check Stage 1"):
@@ -472,9 +463,9 @@ def init_and_render():
     if st.session_state.stage >= 2:
         st.subheader("Stage 2 · Sensor → Control Center")
         st.markdown(current_loop["stage2_desc"])
-        sig = st.radio("Signaling", ["Autocrine","Paracrine","Endocrine"], horizontal=True, key="st2_sig")
-        rec = st.radio("Receptor", ["Cell membrane","Inside the cell"], horizontal=True, key="st2_rec")
-        grd = st.radio("Gradient (primary transport)", ["Concentration","Electrochemical","Pressure"], horizontal=True, key="st2_grad")
+        sig = st.radio("Signaling", ["Autocrine","Paracrine","Endocrine"], index=None, horizontal=True, key=f"st2_sig_{key_sfx}")
+        rec = st.radio("Receptor", ["Cell membrane","Inside the cell"], index=None, horizontal=True, key=f"st2_rec_{key_sfx}")
+        grd = st.radio("Gradient (primary transport)", ["Concentration","Electrochemical","Pressure"], index=None, horizontal=True, key=f"st2_grad_{key_sfx}")
 
         if st.button("Check Stage 2"):
             ok = (sig==current_loop["stage2_sig"] and rec==current_loop["stage2_rec"] and grd==current_loop["stage2_grad"])
@@ -488,13 +479,13 @@ def init_and_render():
                 st.session_state.msgs["s2"] = msg
         st.info(st.session_state.msgs["s2"])
 
-    # Stage 3 — Control → Effector (title without "Zoom")
+    # Stage 3 — Control → Effector
     if st.session_state.stage >= 3:
         st.subheader("Stage 3 · Control Center → Effectors")
         st.markdown(current_loop["stage3_desc"])
-        sig3 = st.radio("Signaling", ["Autocrine","Paracrine","Endocrine"], horizontal=True, key="st3_sig")
-        rec3 = st.radio("Receptor", ["Cell membrane","Inside the cell"], horizontal=True, key="st3_rec")
-        grd3 = st.radio("Gradient (primary transport)", ["Concentration","Electrochemical","Pressure"], horizontal=True, key="st3_grad")
+        sig3 = st.radio("Signaling", ["Autocrine","Paracrine","Endocrine"], index=None, horizontal=True, key=f"st3_sig_{key_sfx}")
+        rec3 = st.radio("Receptor", ["Cell membrane","Inside the cell"], index=None, horizontal=True, key=f"st3_rec_{key_sfx}")
+        grd3 = st.radio("Gradient (primary transport)", ["Concentration","Electrochemical","Pressure"], index=None, horizontal=True, key=f"st3_grad_{key_sfx}")
 
         if st.button("Check Stage 3"):
             ok = (sig3==current_loop["stage3_sig"] and rec3==current_loop["stage3_rec"] and grd3==current_loop["stage3_grad"])
@@ -508,11 +499,11 @@ def init_and_render():
                 st.session_state.msgs["s3"] = msg
         st.info(st.session_state.msgs["s3"])
 
-    # Stage 4 — Outcome (title already fine)
+    # Stage 4 — Outcome
     if st.session_state.stage >= 4:
         st.subheader("Stage 4 · Outcome")
         st.markdown(f"**{current_loop['outcome_question']}**")
-        ans = st.radio("Choose one:", current_loop["outcome_options"], index=None, key="st4_ans")
+        ans = st.radio("Choose one:", current_loop["outcome_options"], index=None, key=f"st4_ans_{key_sfx}")
         if st.button("Finish Loop"):
             if ans == current_loop["outcome_correct"]:
                 st.session_state.msgs["s4"] = "✅ Correct."
@@ -528,7 +519,6 @@ def init_and_render():
         st.success("Scenario complete. Generate your PDF certificate below.")
         student_name = st.text_input("Student name for certificate", "")
         loops_list = [lp["loop_name"] for lp in SCENARIOS[st.session_state.scenario]]
-
         if st.button("Generate PDF Certificate"):
             pdf_bytes = generate_certificate_pdf(student_name, st.session_state.scenario, loops_list)
             st.download_button(