From 3a4afbb433acd7a7d80877bed955215082484a69 Mon Sep 17 00:00:00 2001 From: JimWentworth <94124230+JimWentworth@users.noreply.github.com> Date: Wed, 7 Jan 2026 16:14:37 -0600 Subject: [PATCH 1/2] Refine AI essentials navigation --- .../activity-hallucinations-rag.html | 149 ++++ .../activity-prompts-temperature.html | 183 +++++ ai-essentials/activity-tokens-context.html | 156 +++++ ai-essentials/index.html | 108 +++ ai-essentials/shared.js | 201 ++++++ ai-essentials/styles.css | 646 ++++++++++++++++++ ai-essentials/terminology.html | 549 +++++++++++++++ 7 files changed, 1992 insertions(+) create mode 100644 ai-essentials/activity-hallucinations-rag.html create mode 100644 ai-essentials/activity-prompts-temperature.html create mode 100644 ai-essentials/activity-tokens-context.html create mode 100644 ai-essentials/index.html create mode 100644 ai-essentials/shared.js create mode 100644 ai-essentials/styles.css create mode 100644 ai-essentials/terminology.html diff --git a/ai-essentials/activity-hallucinations-rag.html b/ai-essentials/activity-hallucinations-rag.html new file mode 100644 index 0000000..12256a1 --- /dev/null +++ b/ai-essentials/activity-hallucinations-rag.html @@ -0,0 +1,149 @@ + + + + + + Hallucinations & RAG - AI Essentials + + + +
+

Identifying Hallucinations & Using RAG

+

AI Essentials for Faculty

+
+ + + +
+
+

Core Concepts

+

Hallucinations: When AI models confidently generate false or fabricated information. This happens because LLMs predict the next word based on patterns in their training data—they don't access a truth database or verify facts.

+ +

RAG (Retrieval-Augmented Generation): A two-step process that reduces hallucinations by combining search with generation. First, the system retrieves relevant information from external sources. Second, it provides this retrieved information to the LLM as context when generating responses.

+ +

Key Difference: ChatGPT relies primarily on training patterns from its knowledge cutoff date, making it prone to hallucinations about recent events or obscure topics. Perplexity searches the web first and provides cited answers, reducing hallucinations. NotebookLM only uses your uploaded documents, grounding responses in your sources.

+ +
+ 20 min + Core Concepts +
+ +
+ ChatGPT + Perplexity + NotebookLM +
+
+ +
+

Exercise: Compare AI with and without RAG

+
    +
  1. + Ask ChatGPT about a recent, obscure study +

    Test ChatGPT's tendency to hallucinate by asking about something specific and recent:

    +
    +
    Tell me about the 2023 study on [insert your research area] published in [insert specific journal]. What were the main findings?
    + +
    +

    Observe: ChatGPT may confidently provide details about a study that doesn't exist, or conflate multiple studies.

    +
    2. +
  2. + Ask the same question in Perplexity +

    Now try the identical query in Perplexity, which uses RAG by searching the web first.

    +

    Observe: Perplexity searches current sources and provides citations. If it can't find the study, it will say so.

    +
    3. +
  3. + Compare the outputs +
      +
    • Does it provide specific citations or sources?
      • +
    • Can you verify the information through the provided sources?
      • +
    • How confident does each response sound?
      • +
    • Which would you trust for academic work?
      • +
    +
    4. +
  4. + Advanced: Test NotebookLM with your own documents +

    Upload 3-5 research papers or course materials to NotebookLM, then ask questions about them.

    +
    5. +
+
+ +
+

Understanding the Difference

+

Click each card to see how RAG changes AI behavior:

+ +
+
+
+
+

Without RAG

+

ChatGPT (Standard Mode)

+

Click to see details →

+
+
+

Without RAG

+
    +
  • Pros: Fast, creative, good for brainstorming
    • +
  • Cons: May hallucinate facts, no source verification
    • +
  • Best for: Drafting, ideation, general knowledge
    • +
+
+
+
+ +
+
+
+

With RAG

+

Perplexity / NotebookLM

+

Click to see details →

+
+
+

With RAG

+
    +
  • Pros: Cited answers, verifiable sources, current info
    • +
  • Cons: May miss nuance, limited to available sources
    • +
  • Best for: Research, fact-checking, current events
    • +
+
+
+
+
+

Click the cards above to flip them and see more details

+
+ +
+

Reflection Questions

+ +
+ +
+

Key Takeaways

+ +
+ +
+

Mark as Complete

+

Have you finished this activity?

+ +
+ ✓ Activity completed! Great work. Your progress has been saved. +
+
+
+ + + + diff --git a/ai-essentials/activity-prompts-temperature.html b/ai-essentials/activity-prompts-temperature.html new file mode 100644 index 0000000..770cb66 --- /dev/null +++ b/ai-essentials/activity-prompts-temperature.html @@ -0,0 +1,183 @@ + + + + + + Prompts & Temperature - AI Essentials + + + +
+

Prompts & Temperature: The Foundation

+

AI Essentials for Faculty

+
+ + + +
+
+

Core Concepts

+

Prompt: The input text or instructions given to an AI model to guide its response or behavior. The quality and specificity of your prompt directly affects the quality of the AI's output.

+ +

Temperature: A parameter that controls randomness in text generation. Lower values (0.0-0.3) make output focused and deterministic—the model will choose the most probable next words, resulting in consistent, predictable responses. Higher values (0.7-1.0) increase creativity and variability—the model considers less probable options, producing more diverse and surprising outputs.

+ +

Important Note: In most AI chat interfaces like ChatGPT and Copilot, you don't directly control temperature—it's preset by the system. However, you can influence how the model behaves through your prompts. The model adjusts its randomness based on what you're asking for.

+ +
+ 15 min + Core Concepts +
+ +
+ ChatGPT + Microsoft Copilot +
+
+ +
+

Exercise: Observe Temperature Effects in Real Tools

+
    +
  1. + Test with a factual prompt (lower temperature behavior) +

    Start with a prompt that requests factual, straightforward information:

    +
    +
    Explain quantum entanglement to an undergraduate physics student in 3 sentences.
    + +
    +

    Click "regenerate" 3 times and observe: The core facts stay the same, but phrasing varies slightly. This is low-temperature behavior—consistent information with minor stylistic changes.

    +
    2. +
  2. + Test with a creative prompt (higher temperature behavior) +
    +
    Write a creative opening line for a research paper about climate change impacts on migration patterns.
    + +
    +

    Regenerate this 3 times and observe: You get very different opening lines—some formal, some dramatic, completely different framing.

    +
    3. +
  3. + Experiment with prompt phrasing to influence temperature +

    Try these variations and notice how outputs differ:

    +
    +
    Provide the standard definition of machine learning.
    + +
    +

    vs.

    +
    +
    Brainstorm 5 creative ways to explain machine learning to a 10-year-old.
    + +
    +

    The first prompt triggers lower temperature behavior. The second triggers higher temperature behavior.

    +
    4. +
  4. + Advanced: Test with ambiguous prompts +
    +
    Write an introduction for a paper on social media's effects.
    + +
    +

    Regenerate several times. Because this prompt is ambiguous, you'll see high variation.

    +
    5. +
+
+ +
+

How to Take Advantage of Temperature Variation

+
+

When You Want Consistency (Low Temperature Behavior)

+
    +
  • Request "standard," "technical," "precise," or "accurate" information
    • +
  • Ask for definitions, explanations, or step-by-step procedures
    • +
  • Be very specific about what you want
    • +
+

Best for: Technical documentation, grading rubrics, factual summaries, instructional content

+
+ +
+

When You Want Variety (High Temperature Behavior)

+
    +
  • Request "creative," "brainstorm," "innovative," or "multiple options"
    • +
  • Ask for alternatives, variations, or diverse perspectives
    • +
  • Use words like "imagine," "explore," "generate ideas"
    • +
+

Best for: Brainstorming, generating multiple versions, creative writing, exploring possibilities

+
+
+ +
+

Understanding Prompt Quality

+

Click each card to compare:

+ +
+
+
+
+

Vague Prompts

+

"Tell me about AI"

+

Click to see details →

+
+
+

Vague Prompts

+
    +
  • Result: Generic, surface-level responses
    • +
  • Problem: AI doesn't know your context, audience, or purpose
    • +
  • Use when: You're just exploring and want a broad overview
    • +
+
+
+
+ +
+
+
+

Specific Prompts

+

"Explain transformers in NLP for grad students"

+

Click to see details →

+
+
+

Specific Prompts

+
    +
  • Result: Targeted, appropriate-level responses
    • +
  • Benefit: AI tailors content to your needs
    • +
  • Use when: You need precise, actionable information
    • +
+
+
+
+
+

Click the cards above to flip them and see more details

+
+ +
+

Reflection Questions

+ +
+ +
+

Key Takeaways

+ +
+ +
+

Mark as Complete

+

Have you finished this activity?

+ +
+ ✓ Activity completed! Great work. Your progress has been saved. +
+
+
+ + + + diff --git a/ai-essentials/activity-tokens-context.html b/ai-essentials/activity-tokens-context.html new file mode 100644 index 0000000..9cb4bee --- /dev/null +++ b/ai-essentials/activity-tokens-context.html @@ -0,0 +1,156 @@ + + + + + + Tokens & Context Windows - AI Essentials + + + +
+

Tokens & Context Windows: Understanding Limits

+

AI Essentials for Faculty

+
+ + + +
+
+

Core Concepts

+

Tokens: Basic units of text that AI models process. A typical English word is 1-2 tokens. Numbers, punctuation, and spaces also count as tokens. This matters because AI models have limits on how many tokens they can process at once.

+ +

Context Window: The maximum amount of text (measured in tokens) that an AI model can consider at one time, including both your input and the model's output. Once you exceed the context window, the model starts "forgetting" earlier parts of the conversation.

+ +

Key Insight: Different AI tools have dramatically different context windows. ChatGPT handles ~128,000 tokens (~96,000 words or ~300 pages). Claude handles ~200,000 tokens (~150,000 words or ~500 pages).

+ +
+ 18 min + Core Concepts +
+ +
+ Claude + ChatGPT +
+
+ +
+

Exercise: Test Context Window Limits

+
    +
  1. + Test with a short document (2-3 pages) +

    Upload or paste a short research paper, article, or document into ChatGPT or Claude.

    +
    +
    Summarize the main argument and key findings of this document in 3 paragraphs. Then identify any methodological limitations discussed by the author.
    + +
    +

    Observe: The AI should handle this easily and reference specific sections accurately.

    +
    2. +
  2. + Test with a longer document (10-20 pages) +

    Upload a longer paper, book chapter, or report.

    +
    +
    How does the argument in section 2 connect to the conclusions in the final section? Provide specific examples from both sections.
    + +
    +

    Observe: Does the AI maintain accuracy across different sections? Can it connect ideas from the beginning and end?

    +
    3. +
  3. + Test with an extremely long document (50+ pages) in Claude +

    Upload a dissertation chapter, book, or comprehensive report to Claude.

    +
    +
    Create a detailed outline of this document's structure, including all major sections and their key points. Then identify the 3 most important arguments made across the entire document.
    + +
    +

    Observe: Even with a large context window, very long documents may lead to the AI emphasizing recent sections over earlier ones.

    +
    4. +
  4. + Advanced: Test conversation length limits +

    Have an extended conversation with multiple back-and-forth exchanges (10+ turns). Then ask the AI to reference something from your first message.

    +
    5. +
+
+ +
+

Understanding Context Window Trade-offs

+
+

When Context Window Size Matters

+
    +
  • Analyzing long documents: Research papers, books, dissertations, comprehensive reports
    • +
  • Comparing multiple sources: Literature reviews requiring synthesis across many papers
    • +
  • Extended conversations: Multi-turn dialogues where context from early exchanges matters
    • +
  • Complex projects: Tasks requiring the AI to reference many different pieces of information
    • +
+

Example: Claude's 200K token window can handle an entire PhD dissertation (~500 pages) in one conversation, while ChatGPT's 128K window might require breaking it into chunks.

+
+ +
+

⚡ Pro Strategy: Chunking for Better Results

+

Even with large context windows, breaking complex analysis into focused questions often yields better results than asking the AI to process everything at once. Instead of "Analyze this 300-page book," try:

+
    +
  • "What are the main arguments in chapters 1-3?"
    • +
  • "How does the author's methodology in chapter 4 address the limitations identified earlier?"
    • +
  • "Synthesize the key findings from chapters 5-7 and explain how they support the thesis."
    • +
+

This approach works better because it directs the AI's attention to specific sections rather than trying to "see" the entire document at once.

+
+
+ +
+

Comparing Context Windows Across Tools

+
+
+

ChatGPT

+

128,000 tokens

+

~96,000 words

+

~300 pages

+

Best for: Most research papers, book chapters, typical academic documents

+
+
+

Claude

+

200,000 tokens

+

~150,000 words

+

~500 pages

+

Best for: Entire books, dissertations, large codebases, comprehensive literature reviews

+
+
+

+ ⚠️ Important: Context window includes BOTH input and output. If you upload a 100,000 token document, the AI has only 28,000 tokens left (in ChatGPT) or 100,000 tokens left (in Claude) for its response and any follow-up conversation. +

+
+ +
+

Reflection Questions

+ +
+ +
+

Key Takeaways

+ +
+ +
+

Mark as Complete

+

Have you finished this activity?

+ +
+ ✓ Activity completed! Great work. Your progress has been saved. +
+
+
+ + + + diff --git a/ai-essentials/index.html b/ai-essentials/index.html new file mode 100644 index 0000000..3a0116d --- /dev/null +++ b/ai-essentials/index.html @@ -0,0 +1,108 @@ + + + + + + AI Essentials Workshop - University of Illinois + + + +
+

AI Essentials for Faculty

+

Center for Innovation in Teaching & Learning

+
+ + + +
+
+

Introduction to Generative AI Core Concepts

+

+ Explore the activities below to learn core AI concepts through practical application with real tools. Each activity is + designed for self-paced learning and saves your progress as you go. +

+
+ +
+
+

Prompts & Temperature

+

Understand how prompt phrasing influences creativity and consistency.

+ Not completed +
+ Start Activity +
+
+ +
+

Hallucinations & RAG

+

Compare AI answers with and without retrieval to spot hallucinations.

+ Not completed +
+ Start Activity +
+
+ +
+

Tokens & Context Windows

+

Learn how context limits impact long documents and conversations.

+ Not completed +
+ Start Activity +
+
+ +
+

AI Terminology Reference

+

Flip through quick definitions for core concepts, tools, and models.

+
+ Open Terms +
+
+
+ +
+

Quick Links

+ +

AI Tools

+
+ Microsoft Copilot + ChatGPT + Claude + Perplexity +
+
+ NotebookLM + Google Gemini + Adobe Firefly + GitHub Copilot +
+ +

Continue Learning

+ + +

Questions or Support?

+

+ Contact citl-info@illinois.edu for additional support and guidance. +

+
+
+ + + + diff --git a/ai-essentials/shared.js b/ai-essentials/shared.js new file mode 100644 index 0000000..78435e9 --- /dev/null +++ b/ai-essentials/shared.js @@ -0,0 +1,201 @@ +const STORAGE_KEY = 'aiEssentialsProgress'; + +const pages = [ + { + id: 'overview', + title: 'Overview', + href: 'index.html', + }, + { + id: 'terms', + title: 'AI Terminology', + href: 'terminology.html', + }, +]; + +const coreConcepts = [ + { + id: 'prompts-temperature', + title: 'Prompts & Temperature', + href: 'activity-prompts-temperature.html', + }, + { + id: 'hallucinations-rag', + title: 'Hallucinations & RAG', + href: 'activity-hallucinations-rag.html', + }, + { + id: 'tokens-context', + title: 'Tokens & Context Windows', + href: 'activity-tokens-context.html', + }, +]; + +const getProgress = () => { + const saved = localStorage.getItem(STORAGE_KEY); + return saved ? JSON.parse(saved) : {}; +}; + +const saveProgress = (progress) => { + localStorage.setItem(STORAGE_KEY, JSON.stringify(progress)); +}; + +const setCompletion = (activityId, completed) => { + const progress = getProgress(); + progress[activityId] = { completed }; + saveProgress(progress); +}; + +const applyCompletionIndicators = () => { + const progress = getProgress(); + + document.querySelectorAll('[data-activity-status]').forEach((element) => { + const activityId = element.dataset.activityStatus; + const completed = progress[activityId]?.completed; + element.textContent = completed ? 'Completed' : 'Not completed'; + element.classList.toggle('is-complete', Boolean(completed)); + }); + + document.querySelectorAll('[data-activity-card]').forEach((card) => { + const activityId = card.dataset.activityCard; + const completed = progress[activityId]?.completed; + card.classList.toggle('is-complete', Boolean(completed)); + }); + + document.querySelectorAll('.site-nav a[data-activity-link]').forEach((link) => { + const activityId = link.dataset.activityLink; + const completed = progress[activityId]?.completed; + link.classList.toggle('completed', Boolean(completed)); + }); +}; + +const updateCompletionButton = (button, completed) => { + if (!button) { + return; + } + + const feedback = button + .closest('.completion-section') + ?.querySelector('.completion-feedback'); + + if (completed) { + button.textContent = 'Mark as Incomplete'; + button.classList.add('completed'); + feedback?.classList.add('show'); + setTimeout(() => feedback?.classList.remove('show'), 3000); + } else { + button.textContent = 'Mark as Complete'; + button.classList.remove('completed'); + } +}; + +const initCompletionButton = () => { + const button = document.querySelector('[data-activity-id]'); + if (!button) { + return; + } + + const activityId = button.dataset.activityId; + const progress = getProgress(); + const completed = progress[activityId]?.completed; + updateCompletionButton(button, completed); + + button.addEventListener('click', () => { + const currentProgress = getProgress(); + const isCompleted = Boolean(currentProgress[activityId]?.completed); + setCompletion(activityId, !isCompleted); + updateCompletionButton(button, !isCompleted); + applyCompletionIndicators(); + }); +}; + +const initNavigation = () => { + const navContainer = document.querySelector('[data-nav]'); + if (!navContainer) { + return; + } + + const currentPage = document.body.dataset.page; + + pages.forEach((page) => { + const link = document.createElement('a'); + link.href = page.href; + link.textContent = page.title; + + if (currentPage === page.id) { + link.classList.add('active'); + } + + 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(); +}; + +const initCopyButtons = () => { + document.querySelectorAll('[data-copy]').forEach((button) => { + button.addEventListener('click', () => { + const promptId = button.dataset.copy; + const promptText = document.getElementById(promptId)?.textContent; + if (!promptText) { + return; + } + + navigator.clipboard.writeText(promptText).then(() => { + button.textContent = '✓ Copied!'; + button.classList.add('copied'); + setTimeout(() => { + button.textContent = 'Copy Prompt'; + button.classList.remove('copied'); + }, 2000); + }); + }); + }); +}; + +const initFlipCards = () => { + document.querySelectorAll('.flip-card').forEach((card) => { + card.addEventListener('click', () => { + card.classList.toggle('flipped'); + }); + }); +}; + +document.addEventListener('DOMContentLoaded', () => { + initNavigation(); + initCompletionButton(); + initCopyButtons(); + initFlipCards(); + applyCompletionIndicators(); +}); diff --git a/ai-essentials/styles.css b/ai-essentials/styles.css new file mode 100644 index 0000000..267cd1d --- /dev/null +++ b/ai-essentials/styles.css @@ -0,0 +1,646 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --illini-blue: #13294b; + --illini-orange: #e84a27; + --light-bg: #f5f5f5; + --success: #4caf50; +} + +body { + font-family: 'Helvetica Neue', Arial, sans-serif; + background: var(--light-bg); + color: var(--illini-blue); + line-height: 1.6; +} + +body.terms-page { + background: #ffffff; +} + +.header { + background: var(--illini-blue); + color: white; + padding: 36px 20px; + text-align: center; + border-bottom: 5px solid var(--illini-orange); +} + +.header h1 { + font-size: 2.4em; + margin-bottom: 8px; +} + +.header p { + font-size: 1em; + opacity: 0.9; +} + +.site-nav { + background: white; + border-bottom: 2px solid #e5e5e5; +} + +.site-nav .nav-inner { + max-width: 1100px; + margin: 0 auto; + padding: 18px 20px; + display: flex; + flex-wrap: wrap; + gap: 12px; + align-items: center; +} + +.site-nav a { + text-decoration: none; + color: var(--illini-blue); + font-weight: 600; + padding: 6px 12px; + border-radius: 999px; + border: 2px solid transparent; + display: inline-flex; + align-items: center; + 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); + color: var(--illini-orange); +} + +.site-nav a.completed::after { + content: '✓'; + font-size: 0.85em; + background: var(--success); + color: white; + width: 18px; + height: 18px; + border-radius: 50%; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 40px 20px 60px; +} + +.intro { + background: white; + padding: 30px; + margin-bottom: 30px; + border-left: 4px solid var(--illini-orange); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 20px; +} + +.card-panel { + background: white; + padding: 22px; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + border: 2px solid transparent; +} + +.card-panel h3 { + color: var(--illini-blue); + margin-bottom: 10px; +} + +.card-panel p { + margin-bottom: 16px; +} + +.status-pill { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 12px; + border-radius: 999px; + font-size: 0.85em; + font-weight: 600; + background: #f0f0f0; + color: #4d4d4d; +} + +.status-pill.is-complete { + background: #e8f5e9; + color: #2e7d32; +} + +.button, +.tool-badge { + display: inline-block; + background: var(--illini-orange); + color: white; + padding: 10px 20px; + border-radius: 6px; + text-decoration: none; + font-weight: 600; + border: none; + cursor: pointer; + transition: background 0.3s ease; +} + +.button:hover, +.tool-badge:hover { + background: #d43d1f; + color: white; +} + +.tool-badge { + margin: 5px 6px 5px 0; + font-size: 0.85em; +} + +.section-title { + color: var(--illini-blue); + margin-top: 30px; + margin-bottom: 15px; +} + +.activity-meta { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 8px; +} + +.duration-badge, +.category-badge { + padding: 4px 12px; + border-radius: 12px; + font-size: 0.85em; + font-weight: 600; +} + +.duration-badge { + background: var(--illini-blue); + color: white; +} + +.category-badge { + background: var(--illini-orange); + color: white; +} + + +.prompt-box { + background: #fff; + border: 2px solid var(--illini-blue); + border-radius: 8px; + padding: 20px; + margin: 20px 0; + position: relative; +} + +.prompt-box::before { + content: '📝 Try This Prompt'; + position: absolute; + top: -12px; + left: 15px; + background: white; + padding: 0 10px; + color: var(--illini-orange); + font-weight: 600; + font-size: 0.85em; +} + +.prompt-text { + font-family: 'Courier New', monospace; + background: #f8f9fa; + padding: 15px; + border-radius: 4px; + margin-bottom: 10px; +} + +.copy-button { + background: var(--illini-orange); + color: white; + border: none; + padding: 8px 16px; + border-radius: 4px; + cursor: pointer; + font-size: 0.9em; + font-weight: 600; + transition: background 0.3s ease; +} + +.copy-button:hover { + background: #d43d1f; +} + +.copy-button.copied { + background: var(--success); +} + +.steps { + counter-reset: step-counter; + list-style: none; + padding-left: 0; +} + +.steps li { + counter-increment: step-counter; + margin-bottom: 25px; + padding-left: 45px; + position: relative; +} + +.steps li::before { + content: counter(step-counter); + position: absolute; + left: 0; + top: 0; + background: var(--illini-orange); + color: white; + width: 30px; + height: 30px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; +} + +.steps ul { + list-style-type: disc; + margin-left: 20px; + margin-top: 10px; +} + +.steps ul li { + counter-increment: none; + padding-left: 0; +} + +.steps ul li::before { + display: none; +} + +.flip-card-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 20px; + margin: 30px 0; +} + +.flip-card { + background-color: transparent; + height: 280px; + perspective: 1000px; + cursor: pointer; +} + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; +} + +.flip-card.flipped .flip-card-inner { + transform: rotateY(180deg); +} + +.flip-card-front, +.flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + border-radius: 8px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 25px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.flip-card-front { + background: var(--illini-blue); + color: white; +} + +.flip-card-back { + background: white; + color: var(--illini-blue); + border: 3px solid var(--illini-blue); + transform: rotateY(180deg); +} + +.flip-card-back ul { + text-align: left; + list-style: none; + padding: 0; +} + +.flip-card-back li { + margin: 10px 0; + padding-left: 18px; + position: relative; +} + +.flip-card-back li::before { + content: '•'; + position: absolute; + left: 0; + color: var(--illini-orange); + font-weight: bold; +} + +.flip-instruction { + text-align: center; + color: #666; + font-size: 0.9em; + margin-top: 10px; + font-style: italic; +} + +.completion-section { + background: #f8f9fa; + padding: 25px; + margin-top: 30px; + border-radius: 8px; + border: 2px solid var(--illini-blue); + text-align: center; +} + +.mark-complete-btn { + background: var(--success); + color: white; + padding: 12px 30px; + border: none; + border-radius: 6px; + font-size: 1em; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; +} + +.mark-complete-btn:hover { + background: #45a049; + transform: scale(1.05); +} + +.mark-complete-btn.completed { + background: var(--illini-blue); +} + +.completion-feedback { + margin-top: 15px; + padding: 15px; + background: #e8f5e9; + border-radius: 4px; + display: none; +} + +.completion-feedback.show { + display: block; +} + +.resources-box { + background: var(--illini-blue); + color: white; + padding: 30px; + margin-top: 40px; + border-radius: 8px; +} + +.resources-box h2 { + color: white; + margin-bottom: 20px; +} + +.resources-box h3 { + color: var(--illini-orange); + margin-top: 25px; + margin-bottom: 15px; +} + +.resources-box ul { + margin-left: 0; + padding-left: 0; + list-style: none; +} + +.resources-box ul li { + margin: 10px 0; + line-height: 1.8; +} + +.resources-box a { + color: white; + text-decoration: underline; +} + +.resources-box a:hover { + color: var(--illini-orange); +} + +.tabs { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-bottom: 40px; + border-bottom: 2px solid #e5e5e5; +} + +.tab-button { + background: none; + border: none; + color: var(--illini-blue); + font-size: 1em; + font-weight: 600; + padding: 12px 24px; + cursor: pointer; + border-bottom: 3px solid transparent; + transition: all 0.3s ease; + margin-bottom: -2px; +} + +.tab-button:hover, +.tab-button.active { + color: var(--illini-orange); + border-bottom-color: var(--illini-orange); +} + +.tab-content { + display: none; + animation: fadeIn 0.3s ease; +} + +.tab-content.active { + display: block; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.cards-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 20px; + margin-bottom: 20px; +} + +.card-container { + perspective: 1000px; + height: 180px; +} + +.card { + width: 100%; + height: 100%; + position: relative; + transform-style: preserve-3d; + transition: transform 0.5s ease; + cursor: pointer; +} + +.card.flipped { + transform: rotateY(180deg); +} + +.card-face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + border: 2px solid var(--illini-blue); + padding: 24px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + background: white; +} + +.card-front:hover { + border-color: var(--illini-orange); + box-shadow: 0 4px 12px rgba(232, 74, 39, 0.15); +} + +.card-back { + background: var(--illini-blue); + color: white; + transform: rotateY(180deg); + border-color: var(--illini-blue); +} + +.card-term { + font-size: 1.2em; + font-weight: 700; + color: var(--illini-blue); + line-height: 1.3; +} + +.card-definition { + font-size: 0.9em; + line-height: 1.5; + overflow-y: auto; + max-height: 100%; +} + +.tool-link { + display: inline-block; + margin-top: 12px; + padding: 8px 16px; + background: var(--illini-orange); + color: white; + text-decoration: none; + border-radius: 4px; + font-weight: 600; + font-size: 0.85em; + transition: background 0.3s ease; +} + +.tool-link:hover { + background: #d43d1f; +} + +.instruction { + text-align: center; + color: var(--illini-orange); + margin-top: 40px; + font-size: 0.95em; + font-weight: 500; +} + +@media (max-width: 768px) { + .header h1 { + font-size: 1.8em; + } + + .site-nav .nav-inner { + justify-content: center; + } + + .card-container { + height: 200px; + } +} diff --git a/ai-essentials/terminology.html b/ai-essentials/terminology.html new file mode 100644 index 0000000..008d014 --- /dev/null +++ b/ai-essentials/terminology.html @@ -0,0 +1,549 @@ + + + + + + AI Terminology Reference - University of Illinois + + + +
+

AI Terminology Reference Guide

+

University of Illinois

+
+ + + +
+
+
+ +

Click any card to reveal its definition

+
+ + + + + From 92679d9640f5b7ea8e6d6d6ea3e94294176492c4 Mon Sep 17 00:00:00 2001 From: JimWentworth <94124230+JimWentworth@users.noreply.github.com> Date: Wed, 7 Jan 2026 16:20:18 -0600 Subject: [PATCH 2/2] Link AI essentials from site index --- index.html | 2 ++ 1 file changed, 2 insertions(+) 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