Refine AI Essentials navigation: add Core Concepts dropdown and remove tool mini-badges

ai-essentials/activity-hallucinations-rag.html

@@ -28,9 +28,6 @@ <h2>Core Concepts</h2>
       <div class="activity-meta">
         <span class="duration-badge">20 min</span>
         <span class="category-badge">Core Concepts</span>
-        <span class="tool-mini-badge">ChatGPT</span>
-        <span class="tool-mini-badge">Perplexity</span>
-        <span class="tool-mini-badge">NotebookLM</span>
       </div>
 
       <div style="margin-top: 15px;">

ai-essentials/activity-prompts-temperature.html

@@ -28,8 +28,6 @@ <h2>Core Concepts</h2>
       <div class="activity-meta">
         <span class="duration-badge">15 min</span>
         <span class="category-badge">Core Concepts</span>
-        <span class="tool-mini-badge">ChatGPT</span>
-        <span class="tool-mini-badge">Copilot</span>
       </div>
 
       <div style="margin-top: 15px;">

ai-essentials/activity-tokens-context.html

@@ -28,8 +28,6 @@ <h2>Core Concepts</h2>
       <div class="activity-meta">
         <span class="duration-badge">18 min</span>
         <span class="category-badge">Core Concepts</span>
-        <span class="tool-mini-badge">Claude</span>
-        <span class="tool-mini-badge">ChatGPT</span>
       </div>
 
       <div style="margin-top: 15px;">

ai-essentials/shared.js

@@ -5,36 +5,32 @@ const pages = [
     id: 'overview',
     title: 'Overview',
     href: 'index.html',
-    trackProgress: false,
   },
   {
     id: 'terms',
     title: 'AI Terminology',
     href: 'terminology.html',
-    trackProgress: false,
   },
+];
+
+const coreConcepts = [
   {
     id: 'prompts-temperature',
     title: 'Prompts & Temperature',
     href: 'activity-prompts-temperature.html',
-    trackProgress: true,
   },
   {
     id: 'hallucinations-rag',
     title: 'Hallucinations & RAG',
     href: 'activity-hallucinations-rag.html',
-    trackProgress: true,
   },
   {
     id: 'tokens-context',
     title: 'Tokens & Context Windows',
     href: 'activity-tokens-context.html',
-    trackProgress: true,
   },
 ];
 
-const activityLookup = pages.filter((page) => page.trackProgress);
-
 const getProgress = () => {
   const saved = localStorage.getItem(STORAGE_KEY);
   return saved ? JSON.parse(saved) : {};
@@ -125,9 +121,6 @@ const initNavigation = () => {
     const link = document.createElement('a');
     link.href = page.href;
     link.textContent = page.title;
-    if (page.trackProgress) {
-      link.dataset.activityLink = page.id;
-    }
 
     if (currentPage === page.id) {
       link.classList.add('active');
@@ -136,6 +129,37 @@ const initNavigation = () => {
     navContainer.appendChild(link);
   });
 
+  const dropdownGroup = document.createElement('div');
+  dropdownGroup.className = 'nav-group';
+
+  const dropdownToggle = document.createElement('a');
+  dropdownToggle.href = '#';
+  dropdownToggle.className = 'nav-dropdown-toggle';
+  dropdownToggle.textContent = 'Core Concepts';
+  dropdownToggle.setAttribute('aria-haspopup', 'true');
+  dropdownToggle.setAttribute('aria-expanded', 'false');
+  dropdownToggle.addEventListener('click', (event) => {
+    event.preventDefault();
+  });
+
+  const dropdownMenu = document.createElement('div');
+  dropdownMenu.className = 'nav-dropdown';
+
+  coreConcepts.forEach((page) => {
+    const link = document.createElement('a');
+    link.href = page.href;
+    link.textContent = page.title;
+    link.dataset.activityLink = page.id;
+    if (currentPage === page.id) {
+      link.classList.add('active');
+    }
+    dropdownMenu.appendChild(link);
+  });
+
+  dropdownGroup.appendChild(dropdownToggle);
+  dropdownGroup.appendChild(dropdownMenu);
+  navContainer.appendChild(dropdownGroup);
+
   applyCompletionIndicators();
 };
 

ai-essentials/styles.css

@@ -67,6 +67,46 @@ body.terms-page {
   gap: 6px;
 }
 
+.nav-group {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.nav-dropdown-toggle::after {
+  content: '▾';
+  font-size: 0.9em;
+}
+
+.nav-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  background: white;
+  border: 1px solid #e5e5e5;
+  border-radius: 12px;
+  min-width: 220px;
+  padding: 8px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  display: none;
+  flex-direction: column;
+  gap: 4px;
+  z-index: 10;
+}
+
+.nav-dropdown a {
+  border-radius: 10px;
+  border: 1px solid transparent;
+  padding: 8px 10px;
+  justify-content: space-between;
+}
+
+.nav-group:hover .nav-dropdown,
+.nav-group:focus-within .nav-dropdown {
+  display: flex;
+}
+
 .site-nav a:hover,
 .site-nav a.active {
   border-color: var(--illini-orange);
@@ -179,8 +219,7 @@ body.terms-page {
 }
 
 .duration-badge,
-.category-badge,
-.tool-mini-badge {
+.category-badge {
   padding: 4px 12px;
   border-radius: 12px;
   font-size: 0.85em;
@@ -197,10 +236,6 @@ body.terms-page {
   color: white;
 }
 
-.tool-mini-badge {
-  background: #e8f5e9;
-  color: #2e7d32;
-}
 
 .prompt-box {
   background: #fff;

index.html

@@ -7,3 +7,5 @@
 
 <br />
 <a href="https://jimwentworth.github.io/GenAI-Testing/genai-model-taxonomy.html">GenAI Model Taxonomy Playground (UIUC Edition)</a>
+<br />
+<a href="https://jimwentworth.github.io/GenAI-Testing/ai-essentials/index.html">AI Essentials Workshop</a>