Update app.py

app.py

@@ -1,5 +1,4 @@
 import streamlit as st
-st.caption("Loaded: app.py (root)")   # or "Loaded: src/streamlit_app.py"
 from io import BytesIO
 from datetime import datetime
 
@@ -114,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",  # correct
+                "Glucose excretion into the urine increases",  # (we use this phrasing per your request)
                 "Renal glucose reabsorption increases",
                 "Insulin secretion increases"
             ],
@@ -217,10 +216,35 @@ 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()
+    except Exception:
+        st.experimental_rerun()
+
 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()
+
+def set_scenario(name):
+    st.session_state.scenario = name
+    st.session_state.loop_idx = 0
+    reset_loop()
 
 def next_loop_or_finish():
     st.session_state.progress[st.session_state.scenario][st.session_state.loop_idx] = True
@@ -230,61 +254,107 @@ 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
 
 def all_loops_complete_for_current_scenario() -> bool:
     return all(st.session_state.progress[st.session_state.scenario])
 
-def set_scenario(name):
-    st.session_state.scenario = name
-    st.session_state.loop_idx = 0
-    reset_loop()
-
 # ==============================
-# Diagram (tight cubic curves)
+# Diagram (FOUR arrows)
 # ==============================
 def diagram_svg(sensor_txt, control_txt, effector_txt):
-    sx, sy, sw, sh = 90, 260, 240, 56     # sensor (left)
-    cx, cy, cw, ch = 410, 60, 220, 56     # control (top)
-    ex, ey, ew, eh = 740, 320, 260, 56    # effector (right)
-
-    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
-    eL = (ex, ey+eh/2)                    # effector left-mid
-    eB = (ex+ew/2, ey+eh)                 # effector bottom-mid
-    sB = (sx+sw/4, sy+sh)                 # near sensor bottom
-
-    # tighter control points
-    sc_c1 = (sR[0] + 80, sR[1] - 40)
-    sc_c2 = (cL[0] - 80, cL[1] + 40)
-    ce_c1 = (cR[0] + 80, cR[1] - 40)
-    ce_c2 = (eL[0] - 80, eL[1] + 40)
-    es_c1 = (eB[0] - 80, eB[1] + 60)
-    es_c2 = (sB[0] + 100, sB[1] + 30)
-
-    path_sc = f"M {sR[0]} {sR[1]} C {sc_c1[0]} {sc_c1[1]}, {sc_c2[0]} {sc_c2[1]}, {cL[0]} {cL[1]}"
-    path_ce = f"M {cR[0]} {cR[1]} C {ce_c1[0]} {ce_c1[1]}, {ce_c2[0]} {ce_c2[1]}, {eL[0]} {eL[1]}"
-    path_es = f"M {eB[0]} {eB[1]} C {es_c1[0]} {es_c1[1]}, {es_c2[0]} {es_c2[1]}, {sB[0]} {sB[1]}"
+    # Box geometry
+    sx, sy, sw, sh = 90, 260, 240, 56     # Sensor (left)
+    cx, cy, cw, ch = 410, 60, 220, 56     # Control (top)
+    ex, ey, ew, eh = 740, 320, 260, 56    # Effector (right)
+
+    # 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
+    eB = (ex + ew/2, ey + eh)             # effector BOTTOM-mid
+
+    # Baseline
+    base_x, base_y, base_w, base_h = 330, 508, 360, 26
+    base_mid_x = base_x + base_w/2
+    base_imb_anchor = (base_x + 20, base_y + base_h/2)                  # arrow #1 start
+    base_bal_anchor = (base_x + base_w - 20, base_y + base_h/2)         # arrow #4 end
+
+    # Arrow paths (cubic Béziers)
+    # (1) Imbalance -> Sensor (to left side)
+    imbs_c1 = (base_imb_anchor[0] + 60, base_imb_anchor[1] - 40)
+    imbs_c2 = (sL[0] - 80,              sL[1] + 20)
+    path_imb_to_s = (
+        f"M {base_imb_anchor[0]} {base_imb_anchor[1]} "
+        f"C {imbs_c1[0]} {imbs_c1[1]}, {imbs_c2[0]} {imbs_c2[1]}, {sL[0]} {sL[1]}"
+    )
+
+    # (2) Sensor -> Control (sensor RIGHT to control BOTTOM)
+    sc_c1 = (sR[0] + 70, sR[1] - 100)
+    sc_c2 = (cB[0] - 70, cB[1] - 100)
+    path_s_to_c = (
+        f"M {sR[0]} {sR[1]} "
+        f"C {sc_c1[0]} {sc_c1[1]}, {sc_c2[0]} {sc_c2[1]}, {cB[0]} {cB[1]}"
+    )
+
+    # (3) Control -> Effector (control RIGHT to effector LEFT)
+    ce_c1 = (cR[0] + 80, cR[1] + 40)
+    ce_c2 = (eL[0] - 80, eL[1] - 40)
+    path_c_to_e = (
+        f"M {cR[0]} {cR[1]} "
+        f"C {ce_c1[0]} {ce_c1[1]}, {ce_c2[0]} {ce_c2[1]}, {eL[0]} {eL[1]}"
+    )
+
+    # (4) Effector -> Balance (effector BOTTOM to baseline RIGHT)
+    eb_c1 = (eB[0] - 120, eB[1] + 20)
+    eb_c2 = (base_bal_anchor[0] - 80, base_bal_anchor[1] - 20)
+    path_e_to_bal = (
+        f"M {eB[0]} {eB[1]} "
+        f"C {eb_c1[0]} {eb_c1[1]}, {eb_c2[0]} {eb_c2[1]}, "
+        f"{base_bal_anchor[0]} {base_bal_anchor[1]}"
+    )
 
     svg = f"""
     <div style="position:relative;width:100%;background:#f6f5ff;border:1px solid #e3e3f8;border-radius:16px;overflow:hidden;">
-      <svg viewBox="0 0 1000 600" style="width:100%;height:auto;display:block">
+      <svg viewBox="0 0 1000 600" style="width:100%;height:auto;display:block" preserveAspectRatio="xMidYMid meet">
         <defs>
-          <marker id="arrow" markerWidth="10" markerHeight="10" refX="6" refY="3" orient="auto" markerUnits="strokeWidth">
-            <path d="M0,0 L0,6 L9,3 z" fill="#4b2bb3"/>
+          <marker id="arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto" markerUnits="strokeWidth">
+            <path d="M0,0 L0,8 L8,4 z" fill="#4b2bb3"/>
           </marker>
         </defs>
-        <path d="{path_sc}" fill="none" stroke="#4b2bb3" stroke-width="6" marker-end="url(#arrow)"/>
-        <path d="{path_ce}" fill="none" stroke="#4b2bb3" stroke-width="6" marker-end="url(#arrow)"/>
-        <path d="{path_es}" fill="none" stroke="#4b2bb3" stroke-width="6" marker-end="url(#arrow)"/>
-        <rect x="330" y="520" width="340" height="26" rx="6" fill="none" stroke="#4b2bb3" stroke-width="6"/>
-        <polygon points="500,548 540,548 520,590" fill="#4b2bb3"/>
-        <text x="355" y="538" font-size="18" fill="#4b2bb3">Imbalance</text>
-        <text x="610" y="538" font-size="18" fill="#4b2bb3">Imbalance</text>
+
+        <!-- Four arrows -->
+        <path d="{path_imb_to_s}" fill="none" stroke="#4b2bb3" stroke-width="5"
+              stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow)"/>
+        <path d="{path_s_to_c}"  fill="none" stroke="#4b2bb3" stroke-width="5"
+              stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow)"/>
+        <path d="{path_c_to_e}"  fill="none" stroke="#4b2bb3" stroke-width="5"
+              stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow)"/>
+        <path d="{path_e_to_bal}" fill="none" stroke="#4b2bb3" stroke-width="5"
+              stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow)"/>
+
+        <!-- Baseline -->
+        <rect x="{base_x}" y="{base_y}" width="{base_w}" height="{base_h}" rx="6"
+              fill="none" stroke="#4b2bb3" stroke-width="5"/>
+        <polygon points="{base_mid_x - 20},{base_y + base_h + 2}
+                         {base_mid_x + 20},{base_y + base_h + 2}
+                         {base_mid_x},{base_y + base_h + 44}"
+                 fill="#4b2bb3"/>
+        <text x="{base_x + 70}" y="{base_y + base_h - 8}" font-size="16"
+              text-anchor="middle" fill="#4b2bb3">Imbalance</text>
+        <text x="{base_x + base_w - 70}" y="{base_y + base_h - 8}" font-size="16"
+              text-anchor="middle" fill="#4b2bb3">Balance</text>
+
+        <!-- Boxes -->
         <rect x="{sx}" y="{sy}" width="{sw}" height="{sh}" rx="10" fill="#e9ecff" stroke="#6b57e5"/>
         <text x="{sx+sw/2}" y="{sy+sh/2+6}" font-size="16" text-anchor="middle" fill="#1f1d2e">{sensor_txt}</text>
+
         <rect x="{cx}" y="{cy}" width="{cw}" height="{ch}" rx="10" fill="#e9ecff" stroke="#6b57e5"/>
         <text x="{cx+cw/2}" y="{cy+ch/2+6}" font-size="16" text-anchor="middle" fill="#1f1d2e">{control_txt}</text>
+
         <rect x="{ex}" y="{ey}" width="{ew}" height="{eh}" rx="10" fill="#e9ecff" stroke="#6b57e5"/>
         <text x="{ex+ew/2}" y="{ey+eh/2+6}" font-size="16" text-anchor="middle" fill="#1f1d2e">{effector_txt}</text>
       </svg>
@@ -341,17 +411,20 @@ def init_and_render():
 
     st.title("🧩 Interdependence Concept Game")
 
-    # Scenario + reset
-    col1, col2 = st.columns([2,1])
-    with col1:
-        scenario_list = list(SCENARIOS.keys())
-        idx = scenario_list.index(st.session_state.scenario)
-        chosen = st.selectbox("Scenario", scenario_list, index=idx)
-        if chosen != st.session_state.scenario:
-            set_scenario(chosen)
-    with col2:
+    # Scenario select with on_change that truly switches
+    scenario_list = list(SCENARIOS.keys())
+    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)
+    with top_col2:
         if st.button("Reset Loop"):
             reset_loop()
+            safe_rerun()
 
     # Stage 1
     current_loop = loop()
@@ -397,7 +470,7 @@ def init_and_render():
 
     # Stage 2 — Sensor → Control
     if st.session_state.stage >= 2:
-        st.subheader("Stage 2 · Zoom: Sensor → Control Center")
+        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")
@@ -415,9 +488,9 @@ def init_and_render():
                 st.session_state.msgs["s2"] = msg
         st.info(st.session_state.msgs["s2"])
 
-    # Stage 3 — Control → Effector
+    # Stage 3 — Control → Effector (title without "Zoom")
     if st.session_state.stage >= 3:
-        st.subheader("Stage 3 · Zoom: Control Center → Effectors")
+        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")
@@ -435,7 +508,7 @@ def init_and_render():
                 st.session_state.msgs["s3"] = msg
         st.info(st.session_state.msgs["s3"])
 
-    # Stage 4 — Outcome
+    # Stage 4 — Outcome (title already fine)
     if st.session_state.stage >= 4:
         st.subheader("Stage 4 · Outcome")
         st.markdown(f"**{current_loop['outcome_question']}**")