Upload 9 files

README.md

@@ -16,3 +16,7 @@ To edit a module, change the matching entry in `MODULES` in `modules.py`. To cha
 
 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`.
+
+## Videos
+
+`videos.py` holds the official Anthropic videos embedded in each module (played in page through youtube-nocookie) and the Claude Academy links shown after the key takeaways. To add a video, take the 11 character id from the share link on the Anthropic YouTube channel or from a claude.com tutorial page and add an entry under the module index. Content is Anthropic's; the source link under each player credits the original page.

app.py

@@ -20,6 +20,7 @@ from modules import MODULES, IT_HELP
 from quizzes import QUIZZES
 from teams import TEAMS, TEAMS_INTRO
 from figures import FIGURES, TEAM_FIGURE
+from videos import VIDEOS, LINKS, TEAM_LINKS
 
 # Palette sampled from the BOS logo, teal as the single accent
 BLUE = "#15516B"
@@ -160,6 +161,31 @@ footer {{ display: none !important; }}
 .help p {{ margin: 0; max-width: none; font-size: 15px; }}
 .help p b {{ color: var(--blue); }}
 
+/* Watch panel */
+.watch {{ margin: 0 0 36px; padding: 22px 24px 20px; background: linear-gradient(180deg, #F7FBFB, var(--wash)); border: 1px solid var(--rule); border-radius: 14px; max-width: 760px; }}
+.watch .wh {{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }}
+.watch .wh h3 {{ margin: 0 !important; font-size: 17px !important; color: var(--teal-deep) !important; }}
+.watch .wh span {{ font-size: 13px; color: var(--muted); }}
+.watch .frame {{ position: relative; width: 100%; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #0E3A4D; box-shadow: 0 10px 28px -14px rgba(14,58,77,.45); }}
+.watch .frame iframe {{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }}
+.watch .wt {{ margin: 14px 0 4px; font-size: 16px; font-weight: 700; color: var(--blue); }}
+.watch .wb {{ margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); max-width: none; }}
+.watch .ws {{ margin: 8px 0 0; font-size: 12.5px; color: var(--muted); max-width: none; }}
+.watch .ws a {{ color: var(--teal-deep); text-decoration: none; font-weight: 700; }}
+.watch + .watch {{ margin-top: -18px; }}
+
+/* Further learning cards */
+.more {{ margin-top: 26px; max-width: 760px; }}
+.more h3 {{ font-size: 17px !important; color: var(--blue) !important; margin: 0 0 12px !important; }}
+.more .lgrid {{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }}
+.more a.lcard {{ display: block; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); text-decoration: none; color: var(--ink);
+                 transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }}
+.more a.lcard:hover {{ border-color: #BFE3DF; transform: translateY(-2px); box-shadow: var(--shadow); }}
+.more a.lcard .lt {{ font-size: 15px; font-weight: 700; color: var(--blue); margin: 0 0 3px; max-width: none; }}
+.more a.lcard .lm {{ font-size: 12.5px; color: var(--teal-deep); font-weight: 700; margin: 0 0 8px; max-width: none; }}
+.more a.lcard .lb {{ font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; max-width: none; }}
+@media (max-width: 720px) {{ .more .lgrid {{ grid-template-columns: 1fr; }} }}
+
 /* Quiz */
 .quiz {{ background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 16px !important; box-shadow: var(--shadow);
          padding: 30px 40px 28px !important; margin-top: 16px; gap: 4px !important; }}
@@ -331,7 +357,7 @@ def render_home(progress: dict) -> str:
   <div class="row"><span class="num">{'&#10003;' if is_done else i + 1}</span>{status}</div>
   <h4>{html.escape(m['title'])}</h4>
   <p>{html.escape(m['summary'])}</p>
-  <div class="foot"><span>{MINUTES[i]} min read</span><b>{len(QUIZZES[i])} questions</b></div>
+  <div class="foot"><span>{MINUTES[i]} min read{(' + ' + str(sum(v['minutes'] for v in VIDEOS.get(i, []))) + ' min video') if VIDEOS.get(i) else ''}</span><b>{len(QUIZZES[i])} questions</b></div>
 </button>""")
     parts.append(f"""
 <button type="button" class="mcard ref" style="animation-delay:{N*40}ms" onclick="document.getElementById('rail-team').click()">
@@ -355,6 +381,8 @@ def render_module(idx: int, progress: dict) -> str:
         f'<h2>{html.escape(m["title"])}</h2>',
         f'<p class="summary">{html.escape(m["summary"])}</p>',
     ]
+    for v in VIDEOS.get(idx, []):
+        parts.append(watch_panel(v))
     for s in m["sections"]:
         parts.append(f'<h3>{html.escape(s["heading"])}</h3>')
         parts.append(s["body"])
@@ -362,17 +390,43 @@ def render_module(idx: int, progress: dict) -> str:
         if fig:
             parts.append(figure(*fig))
     parts.append('<div class="takeaways"><h3>Key takeaways</h3><ol>' + "".join(f"<li>{html.escape(t)}</li>" for t in m["takeaways"]) + "</ol></div>")
+    parts.append(link_cards(LINKS.get(idx, [])))
     parts.append(f'<div class="help"><p><b>Need help?</b> {html.escape(IT_HELP)}</p></div>')
     parts.append("</div>")
     return "\n".join(parts)
 
 
+def watch_panel(v: dict) -> str:
+    src = f"https://www.youtube-nocookie.com/embed/{v['id']}?rel=0&modestbranding=1"
+    return (
+        '<div class="watch">'
+        f'<div class="wh"><h3>Watch</h3><span>Anthropic, {v["minutes"]} min</span></div>'
+        f'<div class="frame"><iframe src="{src}" title="{html.escape(v["title"])}" loading="lazy" '
+        'allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" '
+        'referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>'
+        f'<p class="wt">{html.escape(v["title"])}</p><p class="wb">{html.escape(v["blurb"])}</p>'
+        f'<p class="ws">Published by Anthropic. <a href="{v["source"]}" target="_blank" rel="noopener">Open the original tutorial page</a></p>'
+        "</div>"
+    )
+
+
+def link_cards(links: list, heading: str = "Go further with Anthropic's free courses") -> str:
+    if not links:
+        return ""
+    cards = "".join(
+        f'<a class="lcard" href="{l["url"]}" target="_blank" rel="noopener"><p class="lt">{html.escape(l["title"])}</p>'
+        f'<p class="lm">{html.escape(l["meta"])}</p><p class="lb">{html.escape(l["blurb"])}</p></a>'
+        for l in links
+    )
+    return f'<div class="more"><h3>{html.escape(heading)}</h3><div class="lgrid">{cards}</div></div>'
+
+
 def render_team_header() -> str:
     return (
         '<div class="card reader" style="padding-bottom:22px">'
         '<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}{figure(*TEAM_FIGURE)}</div>"
+        f"{TEAMS_INTRO}{figure(*TEAM_FIGURE)}{link_cards(TEAM_LINKS, 'Role based tutorials from Anthropic')}</div>"
     )
 
 

modules.py

@@ -29,11 +29,13 @@ MODULES = [
             {
                 "heading": "Why this training exists",
                 "body": """
-<p>BOS Staffing, Security, Medical, have adopted Claude Enterprise as the company
+<p>BOS Security, including BOS Staffing, BOS Medical Staffing, and the VirtuGuard
+remote video monitoring division, has adopted Claude Enterprise as the company
 standard AI tool. Everyone now has access to the same assistant, working from the
 same rules, under a company agreement that governs how our data is handled.</p>
-<p> This training is meant to get every BOS employee to a shared baseline: what 
-these tools actually do, how to get useful work
+<p>That is a real change from a year ago, when people were experimenting with
+whatever free tool they found online. This training is meant to get every BOS
+employee to a shared baseline: what these tools actually do, how to get useful work
 out of them, and where the hard lines are on client and company data.</p>
 <p><b>How to use this platform.</b> The six modules build on each other. Start at
 the top and read in order. Module 1 and 2 give you the mental model. Modules 3 and

videos.py

@@ -0,0 +1,75 @@
+"""
+Official Anthropic videos and further reading, keyed by module index (0 based).
+
+Video IDs below were taken from the embed markup on claude.com tutorial pages
+(claude.com/resources/tutorials/<slug>), which host the videos on YouTube.
+To add one: open the tutorial page or the Anthropic YouTube channel
+(youtube.com/@anthropic-ai), copy the 11 character id from the share link,
+and add an entry. Videos play inside the BOS page via youtube-nocookie.
+"""
+
+VIDEOS = {
+    0: [
+        {
+            "id": "j1Vk6Y-23CY",
+            "title": "What happens when you talk to AI?",
+            "minutes": 5,
+            "blurb": "Anthropic's plain language walkthrough of what is going on when the model appears to be thinking. Good first watch before the reading below.",
+            "source": "https://claude.com/resources/tutorials/what-happens-when-you-talk-to-ai",
+        }
+    ],
+    1: [
+        {
+            "id": "005JLRt3gXI",
+            "title": "Why do AI models hallucinate?",
+            "minutes": 5,
+            "blurb": "What researchers mean by hallucination, why it happens, and how to spot it in your own conversations.",
+            "source": "https://claude.com/resources/tutorials/why-do-ai-models-hallucinate",
+        }
+    ],
+    3: [
+        {
+            "id": "GJ5jTgcbRHA",
+            "title": "Intro to Projects",
+            "minutes": 7,
+            "blurb": "How Projects hold standing instructions and reference files so every chat starts with the right context. Watch this before asking BOS IT about a shared project.",
+            "source": "https://claude.com/resources/tutorials/intro-to-projects",
+        }
+    ],
+    4: [
+        {
+            "id": "cIMlBw2nqfA",
+            "title": "Can you trust what AI tells you?",
+            "minutes": 5,
+            "blurb": "Trust as a dial rather than a switch, the two ways answers go wrong, and how to set your own level of scrutiny. Pairs with the accuracy rules in this module.",
+            "source": "https://claude.com/resources/tutorials/can-you-trust-what-ai-tells-you",
+        }
+    ],
+}
+
+# Further reading from Anthropic's free Academy. These open in a new tab.
+LINKS = {
+    1: [
+        {"title": "AI Capabilities and Limitations", "meta": "Claude Academy course, 3.5 hr", "url": "https://academy.claude.com/courses/ai-capabilities-and-limitations",
+         "blurb": "A fuller mental model of prediction, knowledge, working memory, and context limits."},
+    ],
+    2: [
+        {"title": "Claude 101", "meta": "Claude Academy course, 2.5 hr, completion badge", "url": "https://academy.claude.com/courses/claude-101",
+         "blurb": "Anthropic's own onboarding course: first conversation, prompting, Projects, Artifacts, Skills, and connected tools."},
+        {"title": "Getting started with Claude.ai", "meta": "Tutorial, 5 min", "url": "https://academy.claude.com/tutorials/getting-started-with-claude-ai",
+         "blurb": "Prompting, document uploads, search, and customization options in one short pass."},
+    ],
+    5: [
+        {"title": "AI Fluency: Framework and Foundations", "meta": "Claude Academy course, 4 hr", "url": "https://academy.claude.com/courses/ai-fluency-framework-foundations",
+         "blurb": "The 4D framework: Delegation, Description, Discernment, and Diligence. The optional stretch goal for anyone who wants to go further."},
+        {"title": "The 4 Ds of AI Fluency, behavioral indicators", "meta": "Tutorial, 5 min read", "url": "https://claude.com/resources/tutorials/the-4-ds-of-ai-fluency-behavioral-indicators",
+         "blurb": "A quick reference of what fluent use looks like day to day."},
+    ],
+}
+
+TEAM_LINKS = [
+    {"title": "Claude Academy tutorials", "meta": "Filter by Sales, HR, Marketing, or Professional", "url": "https://claude.com/resources/tutorials",
+     "blurb": "Role based walkthroughs from Anthropic, including Cowork for sales account research and marketing ops."},
+    {"title": "Claude Enterprise Administrator Guide", "meta": "Tutorial, 20 min", "url": "https://academy.claude.com/tutorials/claude-enterprise-administrator-guide",
+     "blurb": "For BOS IT. Identity, governance, and enablement for the company workspace."},
+]