diff --git a/ai-essentials/activity-tokens-context.html b/ai-essentials/activity-tokens-context.html
index e065258..9cb4bee 100644
--- a/ai-essentials/activity-tokens-context.html
+++ b/ai-essentials/activity-tokens-context.html
@@ -28,8 +28,6 @@
diff --git a/ai-essentials/shared.js b/ai-essentials/shared.js
index ec78a1d..78435e9 100644
--- a/ai-essentials/shared.js
+++ b/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();
};
diff --git a/ai-essentials/styles.css b/ai-essentials/styles.css
index 58148e5..267cd1d 100644
--- a/ai-essentials/styles.css
+++ b/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;
diff --git a/index.html b/index.html
index b79ce42..ab79355 100644
--- a/index.html
+++ b/index.html
@@ -7,3 +7,5 @@
GenAI Model Taxonomy Playground (UIUC Edition)
+
+
AI Essentials Workshop