Upload 7 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+logo.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -10,8 +10,9 @@ pinned: false
 
 # BOS AI Training Platform
 
-Six module course on using AI at BOS Security. Content is in `modules.py`; UI and styling are in `app.py`.
+Six module course on using AI at BOS Security. Lessons are in `modules.py`, knowledge checks in `quizzes.py`, the tools by team reference in `teams.py`, and UI and styling in `app.py`.
 
 To edit a module, change the matching entry in `MODULES` in `modules.py`. To change the help text shown at the bottom of every module, edit `IT_HELP`.
 
 To make the Space private, set Visibility to Private in the Space settings.
+Quizzes are matched to modules by position, so if you add a module, add a matching list in `quizzes.py`.

app.py

@@ -1,90 +1,175 @@
 """
 BOS AI Training Platform
 A guided, module based course on using AI at BOS Security, delivered as a
-HuggingFace Gradio Space. Content lives in modules.py.
+HuggingFace Gradio Space.
+
+Content: modules.py (lessons), quizzes.py (knowledge checks), teams.py (tools by team).
+Logo: logo.png next to this file.
 """
 
+import base64
 import html
+from pathlib import Path
+
 import gradio as gr
 from modules import MODULES, IT_HELP
+from quizzes import QUIZZES
+from teams import TEAMS, TEAMS_INTRO
 
-NAVY = "#0B2545"
+# Palette sampled from the BOS logo, teal as the single accent
+BLUE = "#15516B"
+BLUE_DEEP = "#0E3A4D"
 TEAL = "#13A89E"
-TEAL_DARK = "#0E7F78"
-INK = "#1F2933"
-MUTED = "#5B6B7A"
+TEAL_DEEP = "#0E7F78"
+INK = "#1B2430"
+MUTED = "#61707E"
 PAPER = "#FFFFFF"
-WASH = "#F3F6F8"
-RULE = "#D9E1E7"
+WASH = "#F4F7F9"
+RULE = "#E1E8ED"
+MISS = "#C0563A"
+
+LOGO_PATH = Path(__file__).with_name("logo.png")
+LOGO_SRC = ""
+if LOGO_PATH.exists():
+    LOGO_SRC = "data:image/png;base64," + base64.b64encode(LOGO_PATH.read_bytes()).decode()
+
+N = len(MODULES)
+TEAM_PAGE = N  # index of the Tools by team page in the rail
+MAXQ = max(len(q) for q in QUIZZES)
 
 CSS = f"""
-:root {{ --navy: {NAVY}; --teal: {TEAL}; --teal-dark: {TEAL_DARK}; --ink: {INK};
-         --muted: {MUTED}; --paper: {PAPER}; --wash: {WASH}; --rule: {RULE}; }}
+:root {{ --blue: {BLUE}; --blue-deep: {BLUE_DEEP}; --teal: {TEAL}; --teal-deep: {TEAL_DEEP};
+         --ink: {INK}; --muted: {MUTED}; --paper: {PAPER}; --wash: {WASH}; --rule: {RULE}; --miss: {MISS}; }}
 * {{ font-family: Arial, Helvetica, sans-serif !important; }}
 body, .gradio-container {{ background: var(--wash) !important; color: var(--ink); }}
-.gradio-container {{ max-width: 1240px !important; margin: 0 auto !important; padding: 0 20px 48px !important; }}
+.gradio-container {{ max-width: 1280px !important; margin: 0 auto !important; padding: 20px 20px 56px !important; }}
 footer {{ display: none !important; }}
 
 /* Masthead */
-.masthead {{ background: var(--navy); color: #fff; padding: 26px 32px 24px; border-radius: 6px 6px 0 0;
-             display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }}
-.masthead h1 {{ margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }}
-.masthead .tag {{ margin: 6px 0 0; font-size: 14px; color: #C7D4E0; }}
-.masthead .org {{ font-size: 14px; color: #C7D4E0; }}
-.masthead .org b {{ color: #fff; }}
+.masthead {{ display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
+             background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 18px 26px; }}
+.masthead .brand {{ display: flex; align-items: center; gap: 22px; }}
+.masthead img {{ height: 52px; width: auto; display: block; }}
+.masthead .divider {{ width: 1px; height: 44px; background: var(--rule); }}
+.masthead h1 {{ margin: 0; font-size: 22px; font-weight: 700; color: var(--blue); letter-spacing: -0.01em; }}
+.masthead .tag {{ margin: 3px 0 0; font-size: 14px; color: var(--muted); }}
+.masthead .tool {{ font-size: 13px; color: var(--muted); padding: 8px 14px; border: 1px solid var(--rule);
+                   border-radius: 999px; background: var(--wash); }}
+.masthead .tool b {{ color: var(--blue); }}
+
+/* Progress bar */
+.track {{ height: 6px; background: var(--rule); border-radius: 999px; overflow: hidden; margin: 14px 4px 4px; }}
+.track div {{ height: 100%; background: var(--teal); border-radius: 999px; transition: width .35s ease; }}
 
 /* Rail */
-.rail {{ background: var(--paper); border: 1px solid var(--rule); border-top: 4px solid var(--teal);
-         padding: 8px 0 12px; border-radius: 0 0 6px 6px; }}
-.rail .rail-head {{ padding: 14px 20px 8px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--rule); }}
-.rail .wrap {{ border: none !important; background: transparent !important; padding: 0 !important; }}
-.rail label.svelte-1gfkn6j, .rail .wrap > label {{ display: none !important; }}
-.rail fieldset {{ border: none !important; }}
-.rail .wrap label {{
-  display: flex !important; align-items: flex-start; gap: 12px; padding: 12px 20px !important; margin: 0 !important;
-  border: none !important; border-left: 4px solid transparent !important; border-radius: 0 !important;
-  background: transparent !important; cursor: pointer; font-size: 15px; line-height: 1.35; color: var(--ink);
-  box-shadow: none !important; }}
-.rail .wrap label:hover {{ background: var(--wash) !important; }}
-.rail .wrap label.selected {{ border-left-color: var(--teal) !important; background: #EAF7F6 !important; font-weight: 700; color: var(--navy); }}
-.rail .wrap label input {{ display: none !important; }}
-.rail .wrap label span {{ white-space: normal !important; }}
+.rail {{ background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 14px !important;
+         padding: 14px 10px !important; position: sticky; top: 16px; align-self: flex-start; gap: 4px !important; }}
+.rail .rail-head {{ padding: 4px 12px 10px; font-size: 13px; color: var(--muted); }}
+.rail .rail-sub {{ padding: 14px 12px 6px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--rule); margin-top: 6px; }}
+.rail button {{ width: 100%; justify-content: flex-start !important; text-align: left !important;
+                padding: 12px 14px !important; margin: 0 !important; border-radius: 10px !important;
+                font-size: 15px !important; line-height: 1.35 !important; font-weight: 400 !important;
+                white-space: normal !important; transition: background .15s ease, color .15s ease, transform .1s ease; }}
+.rail button.secondary {{ background: transparent !important; border: 1px solid transparent !important; color: var(--ink) !important; box-shadow: none !important; }}
+.rail button.secondary:hover {{ background: var(--wash) !important; }}
+.rail button.primary {{ background: #E7F6F4 !important; border: 1px solid #C6EBE7 !important; color: var(--blue) !important;
+                        font-weight: 700 !important; box-shadow: none !important; }}
+.rail button:active {{ transform: scale(.985); }}
+.rail button:focus-visible {{ outline: 2px solid var(--teal) !important; outline-offset: 2px; }}
 
 /* Reading column */
-.reader {{ background: var(--paper); border: 1px solid var(--rule); border-radius: 0 0 6px 6px; padding: 40px 56px 32px; }}
-.reader .depth {{ font-size: 13px; color: var(--teal-dark); font-weight: 700; margin: 0 0 6px; }}
-.reader h2 {{ font-size: 32px; line-height: 1.15; color: var(--navy); margin: 0 0 10px; letter-spacing: -0.015em; }}
-.reader .summary {{ font-size: 17px; color: var(--muted); margin: 0 0 30px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); max-width: 66ch; }}
-.reader h3 {{ font-size: 19px; color: var(--navy); margin: 34px 0 10px; }}
+.reader {{ background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 44px 60px 36px;
+           animation: rise .28s ease both; }}
+@keyframes rise {{ from {{ opacity: 0; transform: translateY(6px); }} to {{ opacity: 1; transform: none; }} }}
+@media (prefers-reduced-motion: reduce) {{ .reader, .result {{ animation: none; }} .track div {{ transition: none; }} }}
+.reader .meta {{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }}
+.reader .pill {{ display: inline-block; padding: 4px 11px; border-radius: 999px; font-weight: 700; font-size: 12px;
+                 background: #E7F6F4; color: var(--teal-deep); }}
+.reader .pill.required {{ background: var(--blue); color: #fff; }}
+.reader h2 {{ font-size: 34px; line-height: 1.12; color: var(--blue); margin: 0 0 10px; letter-spacing: -0.02em; }}
+.reader .summary {{ font-size: 18px; color: var(--muted); margin: 0 0 32px; padding-bottom: 24px;
+                    border-bottom: 1px solid var(--rule); max-width: 64ch; line-height: 1.45; }}
+.reader h3 {{ font-size: 20px; color: var(--blue); margin: 36px 0 10px; letter-spacing: -0.01em; }}
 .reader h3:first-of-type {{ margin-top: 0; }}
-.reader p {{ font-size: 16px; line-height: 1.6; margin: 0 0 14px; max-width: 70ch; color: var(--ink); }}
-.reader p b {{ color: var(--navy); }}
-.reader .help {{ margin-top: 40px; padding: 18px 22px; background: #EAF7F6; border-left: 4px solid var(--teal); }}
-.reader .help p {{ margin: 0; max-width: none; }}
-.reader .help p b {{ color: var(--teal-dark); }}
+.reader p {{ font-size: 16.5px; line-height: 1.65; margin: 0 0 14px; max-width: 70ch; color: var(--ink); }}
+.reader p b {{ color: var(--blue); }}
+.reader .help {{ margin-top: 44px; padding: 20px 24px; background: var(--wash); border-radius: 12px; border-left: 4px solid var(--teal); }}
+.reader .help p {{ margin: 0; max-width: none; font-size: 15.5px; }}
+.reader .help p b {{ color: var(--teal-deep); }}
+
+/* Quiz */
+.quiz {{ background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 14px !important;
+         padding: 28px 36px 26px !important; margin-top: 16px; gap: 6px !important; }}
+.quiz .qhead h3 {{ font-size: 20px; color: var(--blue); margin: 0 0 4px; }}
+.quiz .qhead p {{ color: var(--muted); font-size: 15px; margin: 0 0 12px; max-width: 70ch; }}
+.quiz fieldset {{ border: none !important; padding: 0 !important; margin: 0 !important; }}
+.quiz .block {{ border: none !important; background: transparent !important; padding: 6px 0 !important; box-shadow: none !important; }}
+.quiz span[data-testid="block-info"] {{ font-size: 16px !important; font-weight: 700 !important; color: var(--ink) !important;
+                                         margin-bottom: 10px !important; display: block; line-height: 1.4; }}
+.quiz .wrap {{ display: flex; flex-direction: column; gap: 6px !important; }}
+.quiz .wrap label {{ display: flex !important; align-items: center; gap: 12px; padding: 11px 14px !important;
+                      border: 1px solid var(--rule) !important; border-radius: 10px !important; background: var(--paper) !important;
+                      cursor: pointer; font-size: 15px; box-shadow: none !important; transition: border-color .12s ease, background .12s ease; }}
+.quiz .wrap label:hover {{ border-color: var(--teal) !important; }}
+.quiz .wrap label.selected {{ border-color: var(--teal) !important; background: #E7F6F4 !important; color: var(--blue); }}
+.quiz .wrap label input {{ accent-color: var(--teal); }}
+.quiz .wrap label span {{ white-space: normal !important; }}
+.quiz .check {{ background: var(--blue) !important; border: 1px solid var(--blue) !important; color: #fff !important; box-shadow: none !important;
+                border-radius: 10px !important; font-weight: 700 !important; padding: 12px 22px !important; margin-top: 8px; width: auto; }}
+.quiz .check:hover {{ background: var(--blue-deep) !important; }}
+.result {{ margin-top: 12px; animation: rise .25s ease both; }}
+.result .score {{ font-size: 18px; font-weight: 700; color: var(--blue); margin: 0 0 12px; }}
+.result .item {{ padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; font-size: 15px; line-height: 1.5; }}
+.result .item.ok {{ background: #E7F6F4; border-left: 4px solid var(--teal); }}
+.result .item.miss {{ background: #FBEFEA; border-left: 4px solid var(--miss); }}
+.result .item p {{ margin: 0 0 6px; }}
+.result .item p:last-child {{ margin: 0; }}
+.result .item b {{ color: var(--blue); }}
+.result .warn {{ color: var(--miss); font-weight: 700; }}
+
+/* Tools by team */
+.teamwrap .tabs {{ margin-top: -14px; }}
+.teamwrap .tab-nav {{ border-bottom: 1px solid var(--rule) !important; gap: 2px; }}
+.teamwrap .tab-nav button {{ font-size: 15px !important; font-weight: 700 !important; color: var(--muted) !important; border: none !important;
+                              border-bottom: 3px solid transparent !important; border-radius: 0 !important; padding: 12px 18px !important;
+                              background: transparent !important; box-shadow: none !important; }}
+.teamwrap .tab-nav button.selected {{ color: var(--blue) !important; border-bottom-color: var(--teal) !important; }}
+.teamwrap .tabitem {{ border: none !important; padding: 4px 0 0 !important; background: transparent !important; }}
+.teamwrap .tabitem h3 {{ font-size: 19px; color: var(--blue); margin: 26px 0 8px; }}
+.teamwrap .tabitem h3:first-child {{ margin-top: 10px; }}
+.teamwrap .tabitem p {{ font-size: 16px; line-height: 1.65; margin: 0 0 12px; max-width: 72ch; color: var(--ink); }}
+.teamwrap .tabitem p b {{ color: var(--blue); }}
 
 /* Nav */
-.navrow {{ margin-top: 14px; }}
-.navrow button {{ border-radius: 4px !important; font-weight: 700 !important; font-size: 14px !important; }}
-.navrow .primary {{ background: var(--teal) !important; border: 1px solid var(--teal) !important; color: #fff !important; }}
-.navrow .primary:hover {{ background: var(--teal-dark) !important; }}
-.navrow .secondary {{ background: var(--paper) !important; border: 1px solid var(--rule) !important; color: var(--navy) !important; }}
-.progress {{ text-align: center; color: var(--muted); font-size: 14px; padding-top: 10px; }}
+.navrow {{ margin-top: 14px; align-items: center; }}
+.navrow button {{ border-radius: 10px !important; font-weight: 700 !important; font-size: 14px !important;
+                  padding: 12px 20px !important; transition: background .15s ease, transform .1s ease; }}
+.navrow button:active {{ transform: scale(.98); }}
+.navrow .primary {{ background: var(--teal) !important; border: 1px solid var(--teal) !important; color: #fff !important; box-shadow: none !important; }}
+.navrow .primary:hover {{ background: var(--teal-deep) !important; }}
+.navrow .secondary {{ background: var(--paper) !important; border: 1px solid var(--rule) !important; color: var(--blue) !important; box-shadow: none !important; }}
+.navrow .secondary:hover {{ background: var(--wash) !important; }}
+.progress {{ text-align: center; color: var(--muted); font-size: 14px; }}
 
 @media (max-width: 900px) {{
+  .rail {{ position: static; }}
   .reader {{ padding: 28px 22px; }}
-  .reader h2 {{ font-size: 26px; }}
+  .quiz {{ padding: 22px 20px !important; }}
+  .reader h2 {{ font-size: 27px; }}
+  .masthead .divider {{ display: none; }}
 }}
 """
 
-LABELS = [f"{i + 1}.  {m['title']}" for i, m in enumerate(MODULES)]
 
+# Rendering helpers
 
-def render(idx: int) -> str:
+def render_module(idx: int) -> str:
     m = MODULES[idx]
+    pill_cls = "pill required" if m["depth"].lower() == "required" else "pill"
     parts = [
-        f'<div class="reader">',
-        f'<p class="depth">Module {idx + 1} of {len(MODULES)}. {html.escape(m["depth"])}</p>',
+        '<div class="reader">',
+        f'<div class="meta"><span class="{pill_cls}">{html.escape(m["depth"])}</span>'
+        f'<span>Module {idx + 1} of {N}</span></div>',
         f'<h2>{html.escape(m["title"])}</h2>',
         f'<p class="summary">{html.escape(m["summary"])}</p>',
     ]
@@ -96,49 +181,146 @@ def render(idx: int) -> str:
     return "\n".join(parts)
 
 
+def render_team_header() -> str:
+    return (
+        '<div class="reader" style="padding-bottom:20px">'
+        '<div class="meta"><span class="pill">Reference</span><span>Tools by team</span></div>'
+        "<h2>Where Claude fits next to Zoho, Apollo, and Microsoft 365</h2>"
+        f"{TEAMS_INTRO}</div>"
+    )
+
+
+def track(idx: int) -> str:
+    pct = 100 if idx >= N else round((idx + 1) / N * 100)
+    return f'<div class="track"><div style="width:{pct}%"></div></div>'
+
+
 def progress_text(idx: int) -> str:
-    return f'<div class="progress">Module {idx + 1} of {len(MODULES)}</div>'
+    return '<div class="progress">Reference</div>' if idx >= N else f'<div class="progress">{idx + 1} of {N}</div>'
+
+
+def rail_updates(idx: int):
+    return [gr.update(variant="primary" if i == idx else "secondary") for i in range(N + 1)]
+
+
+def quiz_updates(idx: int):
+    """Return updates for the MAXQ radio components for module idx."""
+    qs = QUIZZES[idx] if idx < N else []
+    out = []
+    for i in range(MAXQ):
+        if i < len(qs):
+            out.append(gr.update(label=f"{i + 1}. {qs[i]['q']}", choices=qs[i]["options"], value=None, visible=True))
+        else:
+            out.append(gr.update(visible=False, value=None))
+    return out
 
 
-def go_to(label: str):
-    idx = LABELS.index(label)
-    return idx, render(idx), progress_text(idx)
+def grade(idx: int, *answers) -> str:
+    qs = QUIZZES[idx]
+    unanswered = [i + 1 for i, a in enumerate(answers[: len(qs)]) if a is None]
+    if unanswered:
+        nums = ", ".join(str(n) for n in unanswered)
+        return f'<div class="result"><p class="warn">Answer question {nums} before checking.</p></div>'
+    items = []
+    correct = 0
+    for i, q in enumerate(qs):
+        chosen = answers[i]
+        right = q["options"][q["answer"]]
+        if chosen == right:
+            correct += 1
+            items.append(
+                f'<div class="item ok"><p><b>Question {i + 1}.</b> Correct.</p>'
+                f'<p>{html.escape(right)}</p></div>'
+            )
+        else:
+            items.append(
+                f'<div class="item miss"><p><b>Question {i + 1}.</b> Not quite. You chose: {html.escape(chosen)}</p>'
+                f'<p><b>Correct answer:</b> {html.escape(right)}</p>'
+                f'<p>{html.escape(q["why"])}</p></div>'
+            )
+    score = f'<p class="score">You got {correct} of {len(qs)} right.</p>'
+    if correct == len(qs):
+        score = f'<p class="score">All {len(qs)} correct. Move on to the next module.</p>'
+    return f'<div class="result">{score}{"".join(items)}</div>'
 
 
-def step(idx: int, delta: int):
-    idx = max(0, min(len(MODULES) - 1, idx + delta))
-    return idx, LABELS[idx], render(idx), progress_text(idx)
+def show(idx: int):
+    idx = max(0, min(TEAM_PAGE, idx))
+    on_module = idx < N
+    return [
+        idx,
+        gr.update(visible=on_module),          # module_view
+        gr.update(visible=not on_module),      # team_view
+        render_module(idx if on_module else 0),
+        track(idx),
+        progress_text(idx),
+        gr.update(interactive=idx > 0),
+        gr.update(interactive=idx < TEAM_PAGE, value="Next module" if idx < N - 1 else "Tools by team"),
+        "",                                    # clear quiz result
+        *rail_updates(idx),
+        *quiz_updates(idx),
+    ]
 
 
 with gr.Blocks(css=CSS, title="BOS AI Training") as demo:
+    logo_html = f'<img src="{LOGO_SRC}" alt="BOS">' if LOGO_SRC else ""
     gr.HTML(
         f"""
 <div class="masthead">
-  <div>
-    <h1>AI Training Platform</h1>
-    <p class="tag">Six modules, in order, from what AI is to how we use it safely at BOS.</p>
+  <div class="brand">
+    {logo_html}
+    <div class="divider"></div>
+    <div>
+      <h1>AI Training Platform</h1>
+      <p class="tag">Six modules with a knowledge check at the end of each, plus a tools by team reference.</p>
+    </div>
   </div>
-  <div class="org"><b>BOS Security</b> including BOS Staffing, BOS Medical Staffing, and VirtuGuard</div>
+  <div class="tool">Company standard: <b>Claude Enterprise</b></div>
 </div>
 """
     )
-
+    bar = gr.HTML(track(0))
     state = gr.State(0)
 
     with gr.Row(equal_height=False):
-        with gr.Column(scale=3, min_width=260, elem_classes=["rail"]):
+        with gr.Column(scale=3, min_width=250, elem_classes=["rail"]):
             gr.HTML('<div class="rail-head">Learning path</div>')
-            picker = gr.Radio(choices=LABELS, value=LABELS[0], show_label=False, container=False)
+            rail_btns = [
+                gr.Button(f"{i + 1}.  {m['title']}", variant="primary" if i == 0 else "secondary")
+                for i, m in enumerate(MODULES)
+            ]
+            gr.HTML('<div class="rail-sub">Reference</div>')
+            rail_btns.append(gr.Button("Tools by team", variant="secondary"))
+
         with gr.Column(scale=8):
-            content = gr.HTML(render(0))
+            with gr.Column(visible=True) as module_view:
+                content = gr.HTML(render_module(0))
+                with gr.Column(elem_classes=["quiz"]):
+                    gr.HTML('<div class="qhead"><h3>Knowledge check</h3>'
+                            "<p>Pick one answer per question, then check. Anything you miss shows the correct answer and why.</p></div>")
+                    radios = [gr.Radio(choices=[], label="", visible=False) for _ in range(MAXQ)]
+                    check_btn = gr.Button("Check answers", elem_classes=["check"])
+                    result = gr.HTML("")
+
+            with gr.Column(visible=False, elem_classes=["teamwrap"]) as team_view:
+                gr.HTML(render_team_header())
+                with gr.Tabs():
+                    for t in TEAMS:
+                        with gr.Tab(t["name"]):
+                            gr.HTML(t["html"])
+
             with gr.Row(elem_classes=["navrow"]):
-                prev_btn = gr.Button("Previous module", elem_classes=["secondary"])
+                prev_btn = gr.Button("Previous module", variant="secondary", interactive=False)
                 progress = gr.HTML(progress_text(0))
-                next_btn = gr.Button("Next module", elem_classes=["primary"])
+                next_btn = gr.Button("Next module", variant="primary")
 
-    picker.change(go_to, inputs=picker, outputs=[state, content, progress])
-    prev_btn.click(lambda i: step(i, -1), inputs=state, outputs=[state, picker, content, progress])
-    next_btn.click(lambda i: step(i, 1), inputs=state, outputs=[state, picker, content, progress])
+    outputs = [state, module_view, team_view, content, bar, progress, prev_btn, next_btn, result, *rail_btns, *radios]
+    for i, b in enumerate(rail_btns):
+        b.click(lambda i=i: show(i), outputs=outputs)
+    prev_btn.click(lambda s: show(s - 1), inputs=state, outputs=outputs)
+    next_btn.click(lambda s: show(s + 1), inputs=state, outputs=outputs)
+    check_btn.click(grade, inputs=[state, *radios], outputs=result)
+    demo.load(lambda: show(0), outputs=outputs)
 
 if __name__ == "__main__":
     demo.launch()

quizzes.py

@@ -0,0 +1,300 @@
+"""
+Knowledge checks, one list per module, matched by position to MODULES in modules.py.
+Each question: prompt, options, answer (index into options), and why (shown when wrong).
+"""
+
+QUIZZES = [
+    # Module 1: AI at BOS
+    [
+        {
+            "q": "Which AI tool is approved for BOS and client information?",
+            "options": [
+                "Any tool, as long as you delete the chat afterward",
+                "The BOS Claude Enterprise account only",
+                "Claude Enterprise or a personal ChatGPT account",
+                "Whatever tool your manager prefers",
+            ],
+            "answer": 1,
+            "why": "Company and client information goes into the BOS Claude Enterprise account and nowhere else. Personal accounts, free tools, and AI features in other apps have not been reviewed and cannot be defended in an audit.",
+        },
+        {
+            "q": "What does a large language model actually do?",
+            "options": [
+                "Looks up verified facts in a database",
+                "Produces the most plausible next text based on the conversation so far",
+                "Connects to BOS systems automatically to find answers",
+                "Records everything you type for the company",
+            ],
+            "answer": 1,
+            "why": "A language model predicts plausible text from patterns it learned. It does not look up facts unless given a tool for that, and plausible is not the same as true.",
+        },
+        {
+            "q": "Which of these is the AI tool NOT good at without help?",
+            "options": [
+                "Tightening the wording of a paragraph you wrote",
+                "Summarizing a long document you attach",
+                "Knowing BOS procedures, clients, and pricing on its own",
+                "Laying out pros and cons of two approaches",
+            ],
+            "answer": 2,
+            "why": "The model does not know anything about BOS, our clients, or our procedures unless you put that context into the conversation.",
+        },
+        {
+            "q": "Why did BOS standardize on one AI tool?",
+            "options": [
+                "It was the cheapest option",
+                "Data control, consistency, and compliance",
+                "So IT could monitor every employee",
+                "Because other tools do not work",
+            ],
+            "answer": 1,
+            "why": "One approved tool puts our data under negotiated terms, lets IT support and configure it consistently, and gives us something we can defend in an audit.",
+        },
+    ],
+    # Module 2: How AI Works
+    [
+        {
+            "q": "The AI confidently gives you a statistic you did not provide. What should you do?",
+            "options": [
+                "Use it, because the tool sounded confident",
+                "Verify it against a real source before using it anywhere",
+                "Ask the AI to confirm and then use it",
+                "Round it to be safe",
+            ],
+            "answer": 1,
+            "why": "Numbers the model produces on its own are the highest hallucination risk. Every figure needs a source you can point to. Asking the AI to confirm its own guess is not verification.",
+        },
+        {
+            "q": "What is the model's context?",
+            "options": [
+                "Its knowledge of the whole internet",
+                "Everything in the current conversation, including attachments",
+                "The BOS company handbook",
+                "Its memory of your past chats",
+            ],
+            "answer": 1,
+            "why": "Context is everything the model can see in this conversation: your messages, its replies, and any files. That is its entire working knowledge for the chat.",
+        },
+        {
+            "q": "A long chat starts forgetting instructions you gave earlier. The most likely cause is:",
+            "options": [
+                "The AI is broken and IT needs to restart it",
+                "The context limit has pushed earlier material out of view",
+                "Someone else is using your account",
+                "The model updated overnight",
+            ],
+            "answer": 1,
+            "why": "Context has a size limit. Long sessions and many attachments can push earlier material out. Start a fresh chat with a clean summary of where you are.",
+        },
+        {
+            "q": "Who is the authority on whether a camera works with the VirtuGuard platform?",
+            "options": [
+                "The AI, if you describe the camera well",
+                "The camera manufacturer's website",
+                "The Immix integration matrix",
+                "Whoever sold the camera",
+            ],
+            "answer": 2,
+            "why": "Compatibility claims come from the Immix integration matrix, not from the AI's opinion or a vendor's marketing page.",
+        },
+    ],
+    # Module 3: First Conversations
+    [
+        {
+            "q": "Which request is most likely to produce something you can actually send?",
+            "options": [
+                "Write an email",
+                "Write a short email to a non technical property manager explaining that a scheduled camera check moved from Tuesday to Thursday",
+                "Email about the camera thing",
+                "Write something professional",
+            ],
+            "answer": 1,
+            "why": "Good requests carry context, specifics, and material. Who it is for, what it is about, and how long it should be all change the result.",
+        },
+        {
+            "q": "The first answer is not quite right. What do experienced users do?",
+            "options": [
+                "Start over in a new chat with the same request",
+                "Accept it and fix it by hand",
+                "Tell the tool what to change and iterate two or three times",
+                "Try a different AI tool",
+            ],
+            "answer": 2,
+            "why": "Treat the first answer as a first draft. Shorter, less formal, you dropped the part about the invoice. Two or three rounds is normal.",
+        },
+        {
+            "q": "Before using the tool for work, you should confirm that:",
+            "options": [
+                "You are signed into the BOS organization workspace, not a personal account",
+                "Your manager has approved each request",
+                "You have read the full user manual",
+                "The chat is set to private mode",
+            ],
+            "answer": 0,
+            "why": "Check the workspace shown is the BOS organization. If you are unsure which account you are in, ask BOS IT before you use it for work.",
+        },
+        {
+            "q": "Why start a new chat for each new task?",
+            "options": [
+                "The company is billed per chat",
+                "Mixing unrelated work degrades results and makes things harder to find",
+                "Old chats are deleted after an hour",
+                "It is required by the security policy",
+            ],
+            "answer": 1,
+            "why": "Unrelated work in one long conversation clutters the context and lowers quality. One task per chat keeps results sharp and searchable.",
+        },
+    ],
+    # Module 4: Better Results
+    [
+        {
+            "q": "You want consistent output in your own format and tone. The most reliable technique is:",
+            "options": [
+                "Describe your style in detail",
+                "Paste an example of past work you were happy with and ask for the same style",
+                "Ask the tool to guess your style",
+                "Use very short prompts",
+            ],
+            "answer": 1,
+            "why": "One good example teaches format and tone faster than any description. Here is how I wrote the last three, write the next one the same way.",
+        },
+        {
+            "q": "You need a long document. The better approach is:",
+            "options": [
+                "Ask for the whole thing in one request",
+                "Ask for an outline, review it, then write one section at a time",
+                "Ask three times and pick the best one",
+                "Ask for it twice as long, then cut",
+            ],
+            "answer": 1,
+            "why": "Breaking big tasks into steps catches problems early and gives each piece full attention. One shot requests for long documents invite mediocre results.",
+        },
+        {
+            "q": "Which instruction cuts hallucination sharply when working from an attached file?",
+            "options": [
+                "Be accurate",
+                "Answer only from the document and tell me when it does not cover something",
+                "Use your best judgment",
+                "Do not make mistakes",
+            ],
+            "answer": 1,
+            "why": "Telling the model to answer only from the document, and to say when the document is silent, keeps it from filling gaps with plausible guesses.",
+        },
+        {
+            "q": "Before creating a shared project for your team, you should:",
+            "options": [
+                "Just build it, then tell people",
+                "Ask BOS IT which projects already exist",
+                "Get sign off from the CEO",
+                "Copy one from a personal account",
+            ],
+            "answer": 1,
+            "why": "IT can tell you what already exists and help set one up, so we avoid a dozen slightly different versions of the same thing.",
+        },
+    ],
+    # Module 5: Security and Data
+    [
+        {
+            "q": "A document may contain Controlled Unclassified Information. You need a summary. What do you do?",
+            "options": [
+                "Summarize it with the company Claude account since it is approved",
+                "Remove the header and then summarize it",
+                "Stop and route it through the approved handling process",
+                "Summarize only the first half",
+            ],
+            "answer": 2,
+            "why": "CUI, Federal Contract Information, and export controlled material never go into any AI tool, including the company one. Treat it as controlled until IT or leadership says otherwise.",
+        },
+        {
+            "q": "You are drafting a case study that will go to a prospect. How do you refer to the client?",
+            "options": [
+                "By name, since it is good marketing",
+                "Generically by vertical and size, unless the client approved attribution in writing",
+                "By first name only",
+                "By site address so it is credible",
+            ],
+            "answer": 1,
+            "why": "External material never carries client names, site addresses, camera locations, account numbers, or contract values without written approval. Use the vertical and size instead.",
+        },
+        {
+            "q": "Which of these can go into the company Claude account?",
+            "options": [
+                "A VMS login so the tool can write setup instructions",
+                "An incident narrative tied to a specific site for a client report",
+                "A compensation spreadsheet to reformat",
+                "Your own rough meeting notes with the client referred to as Site A",
+            ],
+            "answer": 3,
+            "why": "Credentials, raw incident narratives, and personnel or payroll data never go in. Your own notes with placeholders for client specifics are exactly the right habit.",
+        },
+        {
+            "q": "A subpoena arrives and you want help drafting a response. You should:",
+            "options": [
+                "Draft it with Claude and send it to legal for review",
+                "Route it to leadership without drafting anything",
+                "Draft it yourself without AI",
+                "Ask the AI what the law requires first",
+            ],
+            "answer": 1,
+            "why": "Responses to legal notices, subpoenas, insurance claims, regulatory inquiries, and client incident disputes go to leadership. They are not drafted by staff, with or without the tool.",
+        },
+        {
+            "q": "The tool does something strange after you paste an email from an unknown sender. What should you do?",
+            "options": [
+                "Ignore it and keep working",
+                "Paste the email again to see if it repeats",
+                "Stop and report it to BOS IT",
+                "Delete the chat and start over",
+            ],
+            "answer": 2,
+            "why": "Material you give the model can contain hidden instructions that redirect it. Unexpected behavior after pasting outside content is a report, not a retry.",
+        },
+    ],
+    # Module 6: Everyday Workflows
+    [
+        {
+            "q": "Which is an appropriate Command Center use of the tool?",
+            "options": [
+                "Describing the video from last night's incident to draft the client report",
+                "Turning rough shift notes into a consistent report format with no incident specifics tied to sites",
+                "Pasting dispatch records to find patterns",
+                "Uploading the law enforcement interaction log",
+            ],
+            "answer": 1,
+            "why": "Cleaning up shift notes and rewriting procedures are good uses. Video descriptions, dispatch records, and law enforcement details stay inside operations systems.",
+        },
+        {
+            "q": "Which is written correctly per the BOS standard?",
+            "options": [
+                "Virtu Guard, a division of BOS",
+                "VirtuGuard, a division of BOS Security",
+                "VG (VirtuGuard) by B.O.S.",
+                "Virtuguard from Bos Security",
+            ],
+            "answer": 1,
+            "why": "VirtuGuard is one word with a capital V and capital G. Spell out BOS Security on first reference.",
+        },
+        {
+            "q": "Which formatting rule applies to client communications at BOS?",
+            "options": [
+                "Bullet lists for everything",
+                "Emojis to keep it friendly",
+                "Prose with bold inline labels, no em dashes, no emojis",
+                "All caps headings",
+            ],
+            "answer": 2,
+            "why": "Client communications use prose with bold inline section labels where structure is needed. No em dashes and no emojis, and plain language for non technical readers.",
+        },
+        {
+            "q": "When should you contact BOS IT?",
+            "options": [
+                "Only when the tool is completely down",
+                "Before pasting something you are unsure about, and any time the tool behaves unexpectedly",
+                "After you have already tried a few other tools",
+                "Only through your manager",
+            ],
+            "answer": 1,
+            "why": "IT would much rather hear from you before you paste something than after. A two minute question on Teams is the cheapest step in the process.",
+        },
+    ],
+]

teams.py

@@ -0,0 +1,147 @@
+"""
+Tools by team reference. Internal audience only. Each team lists the systems it
+already uses and where Claude Enterprise fits next to them.
+
+Note on connectors: unless BOS IT has set up a connector for your team, assume
+Claude does not reach into Zoho, Apollo, or Microsoft 365 on its own. You copy
+material in, work on it, and paste results back out. Ask IT what is connected.
+"""
+
+TEAMS_INTRO = """
+<p>Every team at BOS works out of the same three platforms: Zoho for CRM, helpdesk,
+and workflow, Apollo for prospecting data and outreach, and Microsoft 365 for
+email, Teams, and files. Claude Enterprise sits alongside them as the drafting and
+thinking layer. This page shows, team by team, where it fits and what stays out.</p>
+<p><b>A note on connections.</b> Unless BOS IT has set up a connector for your team,
+assume Claude does not reach into Zoho, Apollo, or Microsoft 365 on its own. You
+copy material in, work on it, and paste the result back where it belongs. If a
+connector is available to you, IT will have told you what it can see and what
+rules apply. When in doubt, ask.</p>
+"""
+
+TEAMS = [
+    {
+        "name": "BOS Staffing",
+        "html": """
+<h3>What you already use</h3>
+<p><b>Zoho.</b> Candidate and client records, tasks, and workflow.
+<b>Microsoft 365.</b> Outlook for client and candidate email, Teams for the internal
+back and forth, SharePoint and OneDrive for documents and templates.
+<b>Internal job posting tool.</b> The BOS generator for formatted job postings, built
+and maintained by IT.</p>
+
+<h3>Where Claude fits</h3>
+<p><b>Job postings.</b> Start from the internal posting tool, then use Claude to
+adjust tone for a specific market or to write three subject line options for the
+distribution email. Give it the role, the shift pattern, and the location. Do not
+give it a candidate.</p>
+<p><b>Client communication.</b> Paste your rough notes from a client call and ask for
+a clean follow up in your voice. Refer to the client generically in the draft and
+fill the name in afterward in Outlook.</p>
+<p><b>Interview structure.</b> Ask for a competency based question set for a role
+type, then adapt it. This produces the framework, not a judgment about any person.</p>
+<p><b>Process writing.</b> Turning how you actually do a placement into a written
+procedure a new coordinator can follow.</p>
+
+<h3>What stays out</h3>
+<p>Individual resumes, applications, background or drug screening results,
+compensation, disciplinary notes, and anything from a personnel file. Any
+AI assisted resume screening happens only through the workflow IT and HR have
+approved, not through a chat window. If you are not sure whether that workflow
+exists yet, ask BOS IT before you paste a single resume.</p>
+""",
+    },
+    {
+        "name": "BOS Security",
+        "html": """
+<h3>What you already use</h3>
+<p><b>Zoho.</b> Client accounts and the helpdesk queue.
+<b>Microsoft 365.</b> Outlook for client and officer communication, Teams for shift
+coordination, SharePoint for post orders, schedules, and quality check records.</p>
+
+<h3>Where Claude fits</h3>
+<p><b>Post orders and procedures.</b> Paste an existing post order and ask for a
+version a brand new officer can follow on night one. Keep the site referred to as
+the site, and keep gate codes, alarm codes, and contact numbers out of the chat.</p>
+<p><b>Client updates.</b> Turn a week of scheduling notes into a plain language
+summary at the metric level: fills, coverage percentage, open shifts. Not which
+guard was late at which site.</p>
+<p><b>Training material.</b> Explaining a policy, a uniform standard, or a de-escalation
+principle in language that lands with the officers who read it.</p>
+<p><b>Trend analysis.</b> Describe the pattern you are seeing in incident counts by
+type and month, without the narratives, and ask what questions a client would ask
+about it.</p>
+
+<h3>What stays out</h3>
+<p>Incident narratives, dispatch records, law enforcement interaction details,
+officer personnel and pay information, client site access details, and anything
+tying a specific incident to a specific site in material that could leave the
+company.</p>
+""",
+    },
+    {
+        "name": "Sales",
+        "html": """
+<h3>What you already use</h3>
+<p><b>Zoho CRM.</b> Pipeline, accounts, contacts, the integrator and channel partner
+database, and the new site approval workflow.
+<b>Apollo.</b> Prospect data, contact lists, and outreach sequences. Lead exports from
+internal tools land here in the VirtuGuard Apollo template.
+<b>Microsoft 365.</b> Outlook, Teams, and shared proposal files.
+<b>Internal sales apps.</b> The VirtuGuard pricing calculator and the camera and VMS
+compatibility lookup, both maintained by IT.</p>
+
+<h3>Where Claude fits</h3>
+<p><b>Outreach drafts.</b> Pull the prospect's company name and industry from Apollo,
+give Claude the trigger event and the two differentiators that matter for that
+vertical, and ask for a short first touch in your voice. Then edit. Sequences
+still get built and sent from Apollo.</p>
+<p><b>Call prep and recap.</b> Paste your notes after a discovery call and ask for a
+follow up email plus a list of open questions. Log the recap in Zoho yourself.</p>
+<p><b>Explaining the service.</b> Ask for a plain language explanation of remote video
+monitoring for a property manager or general contractor who has never used it.
+Strip the jargon, keep it honest about what a camera can and cannot see.</p>
+<p><b>Proposal sections.</b> Draft the narrative sections. Pricing comes from the
+pricing calculator, never from the AI. Compatibility comes from the lookup tool
+and the Immix integration matrix, never from the AI.</p>
+
+<h3>What stays out</h3>
+<p>Contract values and client names in anything that could be forwarded, camera
+locations and site addresses in external material, and any claim about
+certifications, insurance, licensing, guaranteed response times, or regulatory
+compliance that you do not have a source document for. Never let Claude fill in
+a price or a compatibility answer.</p>
+""",
+    },
+    {
+        "name": "VirtuGuard",
+        "html": """
+<h3>What you already use</h3>
+<p><b>Immix.</b> The monitoring platform where alarms, patrols, and site details live.
+<b>Camect and camera analytics.</b> Edge detection and filtering at the site.
+<b>Zoho Desk.</b> Knowledge base for VMS sheets and SOPs, plus the helpdesk queue.
+<b>Microsoft 365.</b> Outlook for end of shift reports and outage notices, Teams for
+real time escalation, SharePoint for KPI workbooks and incident documents.
+<b>TalentLMS.</b> Monthly assigned agent training.</p>
+
+<h3>Where Claude fits</h3>
+<p><b>Shift reports and notices.</b> Standardize the format of an end of shift report or
+an outage notification without changing the facts. Refer to the site generically in
+the chat, then fill it in when you paste back to Outlook.</p>
+<p><b>SOPs and VMS sheets.</b> Paste a rough procedure and ask for a step by step version
+a new agent can follow. Publish it in Zoho Desk. Credentials, IPs, and port details
+never go into the chat.</p>
+<p><b>Understanding the technology.</b> Explaining what a detection module does, why a
+camera over alarms in wind or rain, what a voice down is meant to accomplish, or how
+edge analytics reduce noise. Good for onboarding and for the weekly tech briefing.</p>
+<p><b>KPI narrative.</b> Give it the numbers from the KPI workbook, response times,
+alarm counts, patrol compliance, and ask for the two paragraph narrative that goes
+with the charts.</p>
+
+<h3>What stays out</h3>
+<p>Video descriptions, incident narratives, dispatch and law enforcement details,
+site network configurations, NVR and VMS logins, camera locations, and the
+staffing ratio figures leadership has asked to keep internal.</p>
+""",
+    },
+]