Rebuild Prompt Engineering Guide with dashboard UI and 4 new advanced modules

index.html

@@ -656,8 +656,8 @@
                     <div class="module-card-body">
                         <h2 class="module-card-title">Prompt Engineering</h2>
                         <p class="module-card-description">
-                            Mastering LLMs. Zero-shot, Few-shot, Chain-of-Thought, and advanced prompting strategies for
-                            GPT-4/Claude.
+                            Mastering LLMs. Zero-shot, Few-shot, Chain-of-Thought, plus Claude, Gemini &amp; OpenAI
+                            provider-specific techniques.
                         </p>
                     </div>
                     <div class="module-progress">

prompt-engineering-guide/app.js

@@ -1,628 +1,815 @@
-// Topics data
-const topics = [
-    { id: 1, title: "Introduction to Prompt Engineering", subtitle: "What & Why" },
-    { id: 2, title: "Prompt Structure", subtitle: "Building Blocks" },
-    { id: 3, title: "Clarity & Specificity", subtitle: "Writing Precise Prompts" },
-    { id: 4, title: "Context & Background", subtitle: "Providing Information" },
-    { id: 5, title: "Output Format", subtitle: "Specifying Structure" },
-    { id: 6, title: "Iterative Refinement", subtitle: "Testing & Improving" },
-    { id: 7, title: "Advanced Techniques", subtitle: "Expert Methods" },
-    { id: 8, title: "Real-World Applications", subtitle: "Putting It Together" }
+// Prompt Engineering Masterclass — Dashboard Module
+const modules = [
+    { id: "intro", title: "Introduction to Prompt Engineering", icon: "🎯", category: "Foundations", description: "What prompt engineering is, why it matters, and core principles" },
+    { id: "structure", title: "Prompt Structure", icon: "🧱", category: "Foundations", description: "Building blocks: role, context, task, and format components" },
+    { id: "clarity", title: "Clarity & Specificity", icon: "🔍", category: "Foundations", description: "Writing precise, unambiguous prompts that get exact results" },
+    { id: "context", title: "Context & Background", icon: "📋", category: "Foundations", description: "Providing the right information and constraints" },
+    { id: "output", title: "Output Format", icon: "📐", category: "Techniques", description: "Specifying structure, length, tone, and formatting" },
+    { id: "refinement", title: "Iterative Refinement", icon: "🔄", category: "Techniques", description: "Testing, evaluating, and improving prompts over time" },
+    { id: "advanced", title: "Advanced Techniques", icon: "⚙️", category: "Advanced", description: "Chain-of-thought, few-shot, system prompts, and more" },
+    { id: "applications", title: "Real-World Applications", icon: "🌍", category: "Advanced", description: "Applying prompt engineering across domains" },
+    { id: "claude", title: "Claude Prompt Mastery", icon: "🟣", category: "Provider — Anthropic", description: "XML tags, thinking blocks, prefilling, prompt chaining" },
+    { id: "gemini", title: "Google Gemini Prompting", icon: "🔵", category: "Provider — Google", description: "System instructions, multimodal, JSON Schema, ReAct" },
+    { id: "openai", title: "OpenAI GPT Best Practices", icon: "🟢", category: "Provider — OpenAI", description: "Delimiters, function calling, RAG, context engineering" },
+    { id: "comparison", title: "Provider Comparison", icon: "⚡", category: "Strategy", description: "Claude vs Gemini vs GPT — when to use what" }
 ];
 
-// State management
-let currentTopic = 1;
-let completedTopics = [];
-
-// Initialize app
-function init() {
-    renderTopicList();
-    initializeCanvases();
-    updateProgress();
-    showContextExample('minimal');
-    showFormatExample('list');
-    showIteration(1);
-    updateSpecificity();
-    setChallenge('email');
-}
-
-// Render topic list in sidebar
-function renderTopicList() {
-    const topicList = document.getElementById('topicList');
-    topicList.innerHTML = topics.map(topic => `
-        <li class="topic-item ${topic.id === currentTopic ? 'active' : ''}" onclick="navigateTo(${topic.id})">
-            <h3>${topic.id}. ${topic.title}</h3>
-            <p>${topic.subtitle}</p>
-        </li>
-    `).join('');
-}
-
-// Navigate to topic
-function navigateTo(topicId) {
-    // Hide current section
-    const currentSection = document.querySelector('.content-section.active');
-    if (currentSection) {
-        currentSection.classList.remove('active');
-    }
-
-    // Show new section
-    const newSection = document.getElementById(`topic-${topicId}`);
-    if (newSection) {
-        newSection.classList.add('active');
-        currentTopic = topicId;
-        
-        // Mark previous topics as completed
-        if (!completedTopics.includes(topicId - 1) && topicId > 1) {
-            completedTopics.push(topicId - 1);
-        }
-        
-        renderTopicList();
-        updateProgress();
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-    }
-}
-
-// Update progress bar
-function updateProgress() {
-    const progress = (currentTopic / topics.length) * 100;
-    const progressBar = document.getElementById('progressBar');
-    progressBar.style.width = `${progress}%`;
-}
-
-// Prompt quality evaluation
-function updatePromptQuality() {
-    const role = document.getElementById('roleInput').value;
-    const context = document.getElementById('contextInput').value;
-    const task = document.getElementById('taskInput').value;
-    const format = document.getElementById('formatInput').value;
-
-    const components = [role, context, task, format];
-    const filledComponents = components.filter(c => c.trim().length > 0).length;
-
-    const qualityGrade = document.getElementById('qualityGrade');
-    const combinedPrompt = document.getElementById('combinedPrompt');
-
-    let gradeText = '';
-    let gradeClass = '';
-
-    if (filledComponents === 0) {
-        gradeText = 'Quality: Poor';
-        gradeClass = 'grade-poor';
-        combinedPrompt.textContent = 'Start filling in the components above...';
-    } else if (filledComponents <= 2) {
-        gradeText = 'Quality: Poor';
-        gradeClass = 'grade-poor';
-    } else if (filledComponents === 3) {
-        gradeText = 'Quality: Good';
-        gradeClass = 'grade-good';
-    } else {
-        gradeText = 'Quality: Excellent';
-        gradeClass = 'grade-excellent';
-    }
-
-    qualityGrade.textContent = gradeText;
-    qualityGrade.className = 'quality-grade ' + gradeClass;
-
-    if (filledComponents > 0) {
-        const parts = [];
-        if (role) parts.push(role);
-        if (context) parts.push(context);
-        if (task) parts.push(task);
-        if (format) parts.push(format);
-        combinedPrompt.textContent = parts.join(' ');
-    }
-}
-
-// Specificity slider
-const specificityLevels = [
-    {
-        level: 1,
-        prompt: "Write about AI.",
-        quality: "Poor - Too vague, could mean anything"
-    },
-    {
-        level: 2,
-        prompt: "Write about machine learning.",
-        quality: "Poor - Still too broad, no specific focus"
-    },
-    {
-        level: 3,
-        prompt: "Explain how machine learning works in simple terms.",
-        quality: "Good - More specific, mentions simplicity"
+const MODULE_CONTENT = {
+    "intro": {
+        concepts: `
+            <div class="section">
+                <h2>What is Prompt Engineering?</h2>
+                <p>Prompt engineering is the art of writing clear, specific instructions to AI models to produce desired outputs. Think of it as learning to communicate effectively with an intelligent assistant.</p>
+                <div class="info-box">
+                    <div class="box-title">💡 The difference between a vague and specific prompt can be 10x in output quality</div>
+                    <div class="box-content">Just like giving directions to a colleague, the more precise you are, the better the result.</div>
+                </div>
+                <h3>Real-World Analogy: Ordering Food</h3>
+                <div class="comparison">
+                    <div class="comparison-bad">
+                        <h4>❌ Vague Order</h4>
+                        <p>"Give me something to eat"</p>
+                        <p style="color:#888;margin-top:8px">Result: Random item, probably not what you wanted</p>
+                    </div>
+                    <div class="comparison-good">
+                        <h4>✓ Detailed Order</h4>
+                        <p>"I'd like a medium margherita pizza with extra basil, thin crust, no olives"</p>
+                        <p style="color:#888;margin-top:8px">Result: Exactly what you wanted</p>
+                    </div>
+                </div>
+                <h3>Why Does It Matter?</h3>
+                <table>
+                    <tr><th>Factor</th><th>Without PE</th><th>With PE</th></tr>
+                    <tr><td>Output Quality</td><td>Inconsistent</td><td>Reliable & precise</td></tr>
+                    <tr><td>Iterations Needed</td><td>5-10 tries</td><td>1-2 tries</td></tr>
+                    <tr><td>Token Cost</td><td>Higher (retries)</td><td>Lower (first-shot)</td></tr>
+                    <tr><td>Reproducibility</td><td>Low</td><td>High</td></tr>
+                </table>
+            </div>`,
+        code: `
+            <div class="section">
+                <h2>Prompt Examples: Basic vs Engineered</h2>
+                <h3>Example 1: Summarization</h3>
+                <div class="code-block">❌ Bad: "Summarize this article"
+
+✓ Good: "Summarize this article in 3 bullet points,
+each under 20 words, focusing on key findings
+and their business implications."</div>
+                <h3>Example 2: Code Generation</h3>
+                <div class="code-block">❌ Bad: "Write a Python function"
+
+✓ Good: "Write a Python function called 'validate_email'
+that takes a string parameter and returns True/False.
+Use regex. Include docstring and type hints.
+Handle edge cases: empty string, None, spaces."</div>
+                <h3>Example 3: Analysis</h3>
+                <div class="code-block">❌ Bad: "Analyze this data"
+
+✓ Good: "Analyze the Q4 sales data below.
+Identify the top 3 trends, calculate YoY growth
+for each product line, and flag any anomalies
+more than 2 standard deviations from the mean.
+Present as a markdown table."</div>
+            </div>`,
+        interview: `
+            <div class="section">
+                <h2>Interview Questions: Prompt Engineering Basics</h2>
+                <div class="interview-box">
+                    <div class="box-title">Q1: What is prompt engineering and why is it important?</div>
+                    <div class="box-content">Prompt engineering is the practice of designing effective inputs for AI language models. It's important because the quality of AI output is directly proportional to the quality of the input prompt. Good prompts reduce costs (fewer retries), improve reliability, and enable consistent automation.</div>
+                </div>
+                <div class="interview-box">
+                    <div class="box-title">Q2: What are the four components of an effective prompt?</div>
+                    <div class="box-content"><strong>Role</strong> (who the AI should be), <strong>Context</strong> (background info), <strong>Task</strong> (specific action), and <strong>Format</strong> (how to structure output). Not all are required for every prompt, but complex tasks benefit from all four.</div>
+                </div>
+                <div class="interview-box">
+                    <div class="box-title">Q3: How do you measure prompt quality?</div>
+                    <div class="box-content">Key metrics: accuracy (correctness), relevance (on-topic), completeness (nothing missing), consistency (same prompt → similar results), and efficiency (tokens used). Use evaluation rubrics and A/B testing across multiple runs.</div>
+                </div>
+            </div>`
     },
-    {
-        level: 4,
-        prompt: "Explain how machine learning works in 200 words, using simple terms for beginners.",
-        quality: "Very Good - Specifies length and audience"
-    },
-    {
-        level: 5,
-        prompt: "Write a 200-word beginner's guide explaining how machine learning works, using a coffee shop analogy. Keep language simple for 10th graders.",
-        quality: "Excellent - Specific length, audience, analogy, and complexity level"
-    }
-];
-
-function updateSpecificity() {
-    const slider = document.getElementById('specificitySlider');
-    const value = parseInt(slider.value);
-    document.getElementById('specificityValue').textContent = value;
-
-    const level = specificityLevels[value - 1];
-    document.getElementById('specificityPrompt').textContent = level.prompt;
-    document.getElementById('specificityQuality').textContent = level.quality;
-}
-
-// Context examples
-const contextExamples = {
-    minimal: {
-        prompt: "Write a marketing email.",
-        quality: "⚠️ Poor - No context about product, audience, or goal"
+    "structure": {
+        concepts: `
+            <div class="section">
+                <h2>The Four Building Blocks</h2>
+                <table>
+                    <tr><th>Component</th><th>Purpose</th><th>Example</th></tr>
+                    <tr><td><strong>Role</strong></td><td>Sets expertise level & perspective</td><td>"You are a senior data scientist..."</td></tr>
+                    <tr><td><strong>Context</strong></td><td>Background information</td><td>"Given this dataset of 10K customer records..."</td></tr>
+                    <tr><td><strong>Task</strong></td><td>Specific action to perform</td><td>"Identify the top 5 churn predictors"</td></tr>
+                    <tr><td><strong>Format</strong></td><td>Output structure</td><td>"Present as a numbered list with confidence scores"</td></tr>
+                </table>
+                <h3>How Components Work Together</h3>
+                <div class="info-box">
+                    <div class="box-title">🧱 Think of it like building a house</div>
+                    <div class="box-content">Role = architect's style, Context = site conditions, Task = what to build, Format = blueprint specs. Missing any one leads to suboptimal results.</div>
+                </div>
+            </div>`,
+        code: `
+            <div class="section">
+                <h2>Prompt Structure Templates</h2>
+                <h3>Full 4-Component Template</h3>
+                <div class="code-block">ROLE: You are a [expertise] with [years] experience in [domain].
+
+CONTEXT: [Background information, constraints, data description]
+
+TASK: [Specific action — be precise about what to do]
+
+FORMAT: [How to structure the output — bullets, table, JSON, etc.]</div>
+                <h3>Minimal Template (simple tasks)</h3>
+                <div class="code-block">As a [role], [task]. Output as [format].</div>
+                <h3>Professional Email Template</h3>
+                <div class="code-block">ROLE: You are a professional business writer.
+
+CONTEXT: We're launching a new SaaS product for HR teams.
+The audience is VP-level decision makers.
+Tone: confident but not aggressive.
+
+TASK: Write a cold outreach email under 150 words that
+highlights 3 pain points and our solution.
+
+FORMAT: Subject line + email body. Use short paragraphs.</div>
+            </div>`,
+        interview: `
+            <div class="section">
+                <h2>Interview Questions: Prompt Structure</h2>
+                <div class="interview-box">
+                    <div class="box-title">Q1: When would you omit the Role component?</div>
+                    <div class="box-content">For simple, factual questions ("What's the capital of France?") or when the default assistant behavior is sufficient. Role is most valuable for specialized tasks requiring domain expertise or a particular perspective.</div>
+                </div>
+                <div class="interview-box">
+                    <div class="box-title">Q2: How does adding context affect token usage vs quality?</div>
+                    <div class="box-content">More context uses more input tokens but typically reduces output tokens (fewer retries needed). The ROI is positive for complex tasks. For simple tasks, minimal context is fine — over-contextualizing can actually confuse models.</div>
+                </div>
+            </div>`
     },
-    moderate: {
-        prompt: "Write a marketing email for our new coffee subscription service. Target coffee enthusiasts.",
-        quality: "⚡ Good - Has product and audience, but could use more details"
+    "clarity": {
+        concepts: `
+            <div class="section">
+                <h2>Writing Precise Prompts</h2>
+                <p>Ambiguity is the #1 cause of poor AI output. Every word in your prompt should serve a purpose.</p>
+                <h3>5 Rules of Clarity</h3>
+                <table>
+                    <tr><th>#</th><th>Rule</th><th>Bad Example</th><th>Good Example</th></tr>
+                    <tr><td>1</td><td>Be specific</td><td>"Make it better"</td><td>"Reduce word count by 30%"</td></tr>
+                    <tr><td>2</td><td>Use numbers</td><td>"Write a short summary"</td><td>"Write a 50-word summary"</td></tr>
+                    <tr><td>3</td><td>Define terms</td><td>"Analyze sentiment"</td><td>"Rate sentiment 1-5 (1=very negative)"</td></tr>
+                    <tr><td>4</td><td>Set boundaries</td><td>"List some examples"</td><td>"List exactly 5 examples"</td></tr>
+                    <tr><td>5</td><td>Specify format</td><td>"Give me the data"</td><td>"Return as CSV with headers"</td></tr>
+                </table>
+            </div>`,
+        code: `
+            <div class="section">
+                <h2>Clarity Examples</h2>
+                <div class="code-block">❌ Vague: "Help me with my resume"
+
+✓ Clear: "Review my resume below for a Senior Data Engineer role.
+Score each section 1-10: summary, experience, skills, education.
+For any section scoring below 7, provide specific rewrite 
+suggestions with before/after examples."</div>
+                <div class="code-block">❌ Vague: "Make this code faster"
+
+✓ Clear: "Optimize this Python function for speed.
+Current: processes 10K records in 5 seconds.
+Target: under 1 second.
+Constraints: must maintain the same input/output interface.
+Show benchmarks before and after."</div>
+            </div>`,
+        interview: `
+            <div class="section">
+                <h2>Interview Questions: Clarity & Specificity</h2>
+                <div class="interview-box">
+                    <div class="box-title">Q1: How do you handle inherently ambiguous tasks?</div>
+                    <div class="box-content">Break ambiguous tasks into specific sub-tasks. Ask the AI to first clarify assumptions, then proceed. Use constraints to narrow the scope. For creative tasks where some ambiguity is desired, control it with parameters like "creative but professional tone."</div>
+                </div>
+            </div>`
     },
-    rich: {
-        prompt: "Write a marketing email for our new coffee subscription service. We're a sustainable brand targeting environmentally-conscious coffee enthusiasts aged 25-40. The service delivers ethically-sourced beans monthly. Tone should be warm and knowledgeable. Email should introduce the service, highlight sustainability, and include a 20% off first order offer. Keep it under 200 words.",
-        quality: "✓ Excellent - Complete context with audience, brand voice, key points, and constraints"
-    }
-};
-
-function showContextExample(level) {
-    // Update button states
-    const buttons = document.querySelectorAll('#topic-4 .scenario-btn');
-    buttons.forEach(btn => btn.classList.remove('active'));
-    event.target.classList.add('active');
-
-    const example = contextExamples[level];
-    document.getElementById('contextPromptText').textContent = example.prompt;
-    document.getElementById('contextQuality').textContent = example.quality;
-}
-
-// Format examples
-const formatExamples = {
-    list: {
-        prompt: "Provide the information as a numbered list with brief explanations for each point.",
-        output: "1. First Point\n   Brief explanation here\n\n2. Second Point\n   Brief explanation here\n\n3. Third Point\n   Brief explanation here"
+    "context": {
+        concepts: `
+            <div class="section">
+                <h2>Providing the Right Context</h2>
+                <p>Context bridges the gap between what you know and what the AI knows. Too little = guessing. Too much = distraction.</p>
+                <h3>Types of Context</h3>
+                <table>
+                    <tr><th>Type</th><th>When to Use</th><th>Example</th></tr>
+                    <tr><td><strong>Domain</strong></td><td>Specialized fields</td><td>"In the context of Kubernetes orchestration..."</td></tr>
+                    <tr><td><strong>Audience</strong></td><td>Tailoring output</td><td>"The audience is non-technical executives"</td></tr>
+                    <tr><td><strong>Constraints</strong></td><td>Setting boundaries</td><td>"Must comply with HIPAA regulations"</td></tr>
+                    <tr><td><strong>Data</strong></td><td>Working with specific info</td><td>"Given this JSON payload: {...}"</td></tr>
+                    <tr><td><strong>History</strong></td><td>Multi-turn conversations</td><td>"Building on our previous analysis..."</td></tr>
+                </table>
+            </div>`,
+        code: `
+            <div class="section">
+                <h2>Context Templates</h2>
+                <div class="code-block">TEMPLATE: Data Analysis with Context
+
+CONTEXT:
+- Dataset: 50K rows of e-commerce transactions (Jan-Dec 2024)
+- Columns: order_id, customer_id, product, amount, date, region
+- Business goal: reduce cart abandonment by 15%
+- Constraint: recommendations must be implementable within 30 days
+
+TASK: Identify the top 3 actionable insights from this data.</div>
+            </div>`,
+        interview: `
+            <div class="section">
+                <h2>Interview Questions: Context</h2>
+                <div class="interview-box">
+                    <div class="box-title">Q1: What's the difference between over-contextualization and under-contextualization?</div>
+                    <div class="box-content"><strong>Under</strong>: AI fills gaps with assumptions (often wrong). <strong>Over</strong>: AI gets confused by irrelevant details, wastes tokens, and may focus on the wrong aspects. The sweet spot is providing only context that directly affects the desired output.</div>
+                </div>
+            </div>`
     },
-    table: {
-        prompt: "Create a comparison table with columns: Feature, Pros, Cons",
-        output: "| Feature    | Pros              | Cons              |\n|------------|-------------------|-------------------|\n| Feature A  | Advantage 1       | Disadvantage 1    |\n| Feature B  | Advantage 2       | Disadvantage 2    |"
+    "output": {
+        concepts: `
+            <div class="section">
+                <h2>Specifying Output Format</h2>
+                <p>Format specifications eliminate guesswork and make AI output directly usable in your workflow.</p>
+                <table>
+                    <tr><th>Format Type</th><th>Use Case</th><th>Prompt Pattern</th></tr>
+                    <tr><td>JSON</td><td>API responses, data pipelines</td><td>"Return valid JSON with keys: name, score, reasons"</td></tr>
+                    <tr><td>Markdown</td><td>Documentation, reports</td><td>"Use ## headers, bullet points, code blocks"</td></tr>
+                    <tr><td>Table</td><td>Comparisons, structured data</td><td>"Present as a table with columns: X, Y, Z"</td></tr>
+                    <tr><td>Numbered List</td><td>Steps, rankings</td><td>"List as numbered steps, each under 20 words"</td></tr>
+                    <tr><td>Code</td><td>Implementation</td><td>"Write in Python 3.11+ with type hints and docstrings"</td></tr>
+                </table>
+            </div>`,
+        code: `
+            <div class="section">
+                <h2>Output Format Examples</h2>
+                <div class="code-block">JSON Output:
+"Analyze this product review and return JSON:
+{
+  'sentiment': 'positive|negative|neutral',
+  'confidence': 0.0-1.0,
+  'key_topics': ['topic1', 'topic2'],
+  'summary': 'one sentence summary'
+}"</div>
+                <div class="code-block">Table Output:
+"Compare React, Vue, and Angular. 
+Format as a markdown table with columns:
+Feature | React | Vue | Angular
+Include rows for: learning curve, performance,
+ecosystem, job market, best for."</div>
+            </div>`,
+        interview: `
+            <div class="section">
+                <h2>Interview Questions: Output Format</h2>
+                <div class="interview-box">
+                    <div class="box-title">Q1: How do you ensure consistent JSON output from LLMs?</div>
+                    <div class="box-content">1) Provide the exact schema in the prompt. 2) Use API features like OpenAI's function calling or Gemini's JSON Schema mode. 3) For Claude, use response prefilling starting with "{". 4) Include an example of the expected output. 5) Add "Return ONLY valid JSON, no other text" as a constraint.</div>
+                </div>
+            </div>`
     },
-    narrative: {
-        prompt: "Write the response as a 3-paragraph narrative with introduction, body, and conclusion.",
-        output: "Introduction paragraph setting context...\n\nBody paragraph with main information and details...\n\nConclusion paragraph summarizing key points..."
+    "refinement": {
+        concepts: `
+            <div class="section">
+                <h2>Iterative Prompt Refinement</h2>
+                <p>Great prompts aren't written — they're refined. Use systematic testing to improve results.</p>
+                <h3>The Refinement Loop</h3>
+                <table>
+                    <tr><th>Step</th><th>Action</th><th>Goal</th></tr>
+                    <tr><td>1. Draft</td><td>Write initial prompt</td><td>Get a baseline result</td></tr>
+                    <tr><td>2. Evaluate</td><td>Score output quality</td><td>Identify weaknesses</td></tr>
+                    <tr><td>3. Diagnose</td><td>Find root cause</td><td>Understand why it failed</td></tr>
+                    <tr><td>4. Refine</td><td>Modify prompt</td><td>Address specific issues</td></tr>
+                    <tr><td>5. Test</td><td>Run again with variations</td><td>Verify improvement</td></tr>
+                </table>
+                <div class="callout tip">
+                    <div class="callout-title">✅ Pro Tip</div>
+                    <p>Keep a prompt journal — track what you changed and why. This builds your personal prompt library over time.</p>
+                </div>
+            </div>`,
+        code: `
+            <div class="section">
+                <h2>Refinement in Practice</h2>
+                <div class="code-block">Iteration 1 (Draft):
+"Write a product description for headphones."
+→ Result: Generic, bland, 200 words
+
+Iteration 2 (Add specifics):
+"Write a product description for Sony WH-1000XM5.
+Target: audiophiles. Tone: technical but accessible."
+→ Result: Better, but too long
+
+Iteration 3 (Add constraints):
+"Write a 60-word product description for Sony WH-1000XM5.
+Target: audiophiles. Tone: technical but accessible.
+Must mention: noise cancellation, 30-hour battery, LDAC codec.
+End with a call to action."
+→ Result: ✓ Excellent — concise, targeted, actionable</div>
+            </div>`,
+        interview: `
+            <div class="section">
+                <h2>Interview Questions: Refinement</h2>
+                <div class="interview-box">
+                    <div class="box-title">Q1: How do you systematically A/B test prompts?</div>
+                    <div class="box-content">1) Define clear evaluation criteria (accuracy, format, completeness). 2) Run both prompts on the same set of 10+ test inputs. 3) Score each output against criteria. 4) Use statistical significance tests if needed. 5) Keep the winning prompt and iterate further.</div>
+                </div>
+            </div>`
     },
-    code: {
-        prompt: "Provide Python code with inline comments explaining each step.",
-        output: "# Calculate factorial of a number\ndef factorial(n):\n    # Base case: factorial of 0 or 1 is 1\n    if n <= 1:\n        return 1\n    # Recursive case\n    return n * factorial(n - 1)"
+    "advanced": {
+        concepts: `
+            <div class="section">
+                <h2>Advanced Prompting Techniques</h2>
+                <table>
+                    <tr><th>Technique</th><th>What It Does</th><th>Best For</th></tr>
+                    <tr><td><strong>Zero-Shot</strong></td><td>Direct instruction, no examples</td><td>Simple, well-defined tasks</td></tr>
+                    <tr><td><strong>Few-Shot</strong></td><td>Provide 2-5 examples</td><td>Pattern replication, formatting</td></tr>
+                    <tr><td><strong>Chain-of-Thought</strong></td><td>"Think step by step"</td><td>Math, logic, reasoning</td></tr>
+                    <tr><td><strong>System Prompts</strong></td><td>Persistent role/rules</td><td>Chatbots, consistent behavior</td></tr>
+                    <tr><td><strong>Self-Consistency</strong></td><td>Generate multiple answers, pick majority</td><td>High-stakes decisions</td></tr>
+                    <tr><td><strong>Tree of Thoughts</strong></td><td>Explore multiple reasoning paths</td><td>Complex problem solving</td></tr>
+                </table>
+                <h3>Chain-of-Thought Deep Dive</h3>
+                <div class="info-box">
+                    <div class="box-title">🧠 Why CoT works</div>
+                    <div class="box-content">By asking the model to show its reasoning, you force it to decompose the problem. This reduces errors in math, logic, and multi-step tasks by 30-50%.</div>
+                </div>
+            </div>`,
+        code: `
+            <div class="section">
+                <h2>Advanced Techniques in Action</h2>
+                <h3>Few-Shot Example</h3>
+                <div class="code-block">Classify the sentiment of each review:
+
+Review: "The battery life is incredible!"
+Sentiment: Positive
+
+Review: "Broke after 2 days, terrible quality"
+Sentiment: Negative
+
+Review: "It's okay, nothing special"
+Sentiment: Neutral
+
+Review: "Best purchase I've made this year!"
+Sentiment:</div>
+                <h3>Chain-of-Thought Example</h3>
+                <div class="code-block">"A store has 45 apples. They sell 60% on Monday 
+and half of the remainder on Tuesday. 
+How many are left?
+
+Think through this step by step before answering."
+
+→ Step 1: 60% of 45 = 27 sold on Monday
+→ Step 2: Remaining = 45 - 27 = 18
+→ Step 3: Half of 18 = 9 sold on Tuesday
+→ Step 4: Remaining = 18 - 9 = 9 apples</div>
+            </div>`,
+        interview: `
+            <div class="section">
+                <h2>Interview Questions: Advanced Techniques</h2>
+                <div class="interview-box">
+                    <div class="box-title">Q1: When would you use few-shot over zero-shot?</div>
+                    <div class="box-content">Use few-shot when: 1) The task has a specific format the model might not default to. 2) You need consistent output patterns. 3) The task is domain-specific and examples clarify expectations. Zero-shot is better when: the task is straightforward, examples might bias the output, or you want more creative/diverse responses.</div>
+                </div>
+                <div class="interview-box">
+                    <div class="box-title">Q2: Explain self-consistency prompting.</div>
+                    <div class="box-content">Generate multiple responses (3-5) to the same prompt using higher temperature, then take the majority answer. This is like polling multiple experts — reduces variance and improves reliability on reasoning tasks. Trade-off: costs more tokens.</div>
+                </div>
+            </div>`
     },
-    json: {
-        prompt: "Return the data as a JSON object with proper structure.",
-        output: "{\n  \"name\": \"Example\",\n  \"items\": [\n    { \"id\": 1, \"value\": \"Item 1\" },\n    { \"id\": 2, \"value\": \"Item 2\" }\n  ]\n}"
-    }
-};
-
-function showFormatExample(format) {
-    // Update button states
-    const buttons = document.querySelectorAll('#topic-5 .scenario-btn');
-    buttons.forEach(btn => btn.classList.remove('active'));
-    event.target.classList.add('active');
-
-    const example = formatExamples[format];
-    document.getElementById('formatPromptText').textContent = example.prompt;
-    document.getElementById('formatOutputExample').textContent = example.output;
-}
-
-// Iteration examples
-const iterations = [
-    {
-        iteration: 1,
-        prompt: "Help me with my website.",
-        score: "25/100 - Very Poor",
-        notes: "❌ Issues: No context, unclear task, no specifics. AI won't know what kind of help you need."
+    "applications": {
+        concepts: `
+            <div class="section">
+                <h2>Real-World Applications</h2>
+                <table>
+                    <tr><th>Domain</th><th>Use Case</th><th>Key Technique</th></tr>
+                    <tr><td>Software Dev</td><td>Code review, debugging, documentation</td><td>Role + structured output</td></tr>
+                    <tr><td>Marketing</td><td>Ad copy, SEO content, A/B variants</td><td>Few-shot + constraints</td></tr>
+                    <tr><td>Data Science</td><td>EDA, feature engineering, reporting</td><td>Context + CoT</td></tr>
+                    <tr><td>Education</td><td>Tutoring, quiz generation, explanations</td><td>Role + audience-aware</td></tr>
+                    <tr><td>Legal</td><td>Contract analysis, compliance checks</td><td>RAG + structured output</td></tr>
+                    <tr><td>Healthcare</td><td>Literature review, patient summaries</td><td>Context + safety constraints</td></tr>
+                </table>
+            </div>`,
+        code: `
+            <div class="section">
+                <h2>Application Templates</h2>
+                <h3>Code Review Prompt</h3>
+                <div class="code-block">You are a senior software engineer (15 years, Python expert).
+
+Review this code for:
+1. Bugs and edge cases
+2. Performance issues (O(n) analysis)
+3. Security vulnerabilities (OWASP Top 10)
+4. Code style (PEP 8 compliance)
+
+For each issue found:
+- Severity: Critical / Major / Minor
+- Line number
+- Description
+- Fix with code example
+
+Code to review:
+"""
+[paste code here]
+"""</div>
+            </div>`,
+        interview: `
+            <div class="section">
+                <h2>Interview Questions: Applications</h2>
+                <div class="interview-box">
+                    <div class="box-title">Q1: How do you design prompts for production systems vs ad-hoc use?</div>
+                    <div class="box-content">Production prompts need: 1) Deterministic output (low temperature). 2) Structured format (JSON/schema). 3) Error handling instructions ("If input is invalid, return {error: ...}"). 4) Version control. 5) Evaluation metrics. Ad-hoc prompts can be more flexible and creative.</div>
+                </div>
+            </div>`
     },
-    {
-        iteration: 2,
-        prompt: "I have an e-commerce website and need help improving the checkout process. Can you suggest improvements?",
-        score: "65/100 - Good",
-        notes: "✓ Better: Added context (e-commerce) and specific area (checkout). ⚠️ Still missing: What problems exist? What's the current user experience?"
+    "claude": {
+        concepts: `
+            <div class="section">
+                <h2>Why Claude Is Different</h2>
+                <p>Claude is fine-tuned by Anthropic with emphasis on <strong>helpfulness, harmlessness, and honesty</strong>. It's specifically trained to respect <strong>XML-based structure</strong> in prompts.</p>
+                <div class="info-box">
+                    <div class="box-title">💡 Think of Claude as a brilliant new employee</div>
+                    <div class="box-content">It has broad knowledge but needs explicit context about your specific situation.</div>
+                </div>
+                <h3>Key Claude Techniques</h3>
+                <table>
+                    <tr><th>Technique</th><th>What It Does</th><th>When to Use</th></tr>
+                    <tr><td><strong>XML Tags</strong></td><td>Semantic structure for prompts</td><td>Always — Claude's killer feature</td></tr>
+                    <tr><td><strong>Thinking Blocks</strong></td><td>Step-by-step reasoning scratchpad</td><td>Math, logic, complex analysis</td></tr>
+                    <tr><td><strong>Response Prefilling</strong></td><td>Start Claude's response for you</td><td>Forcing JSON, controlling format</td></tr>
+                    <tr><td><strong>Prompt Chaining</strong></td><td>Sequential subtask pipeline</td><td>Complex multi-step workflows</td></tr>
+                    <tr><td><strong>Positive Framing</strong></td><td>Say "do X" not "don't do Y"</td><td>All Claude prompts</td></tr>
+                    <tr><td><strong>Allow Uncertainty</strong></td><td>Let Claude say "I don't know"</td><td>Reducing hallucinations</td></tr>
+                </table>
+            </div>`,
+        code: `
+            <div class="section">
+                <h2>Claude Prompt Templates</h2>
+                <h3>XML-Structured Code Review</h3>
+                <div class="code-block">&lt;role&gt;Expert Python code reviewer&lt;/role&gt;
+
+&lt;code&gt;
+def factorial(n):
+    return n * factorial(n-1)
+&lt;/code&gt;
+
+&lt;instructions&gt;
+1. Identify all bugs and edge cases
+2. Suggest improvements with examples
+3. Rate code quality (1-10)
+&lt;/instructions&gt;
+
+&lt;output_format&gt;markdown with code blocks&lt;/output_format&gt;</div>
+                <h3>Response Prefilling (API)</h3>
+                <div class="code-block">User: "Extract name, age, city from: 'John is 30, lives in NYC'"
+
+Prefilled assistant response: {"name":
+
+→ Claude continues: {"name": "John", "age": 30, "city": "NYC"}</div>
+                <h3>Prompt Chaining Pipeline</h3>
+                <div class="code-block">Step 1: "Read this document and extract the 5 main arguments."
+         ↓ output feeds into...
+Step 2: "For each argument: [step 1 output], evaluate strength 
+         (1-10) and identify counterarguments."
+         ↓ output feeds into...
+Step 3: "Using this analysis: [step 2 output], write a balanced 
+         500-word summary."</div>
+                <h3>Document Analysis Template</h3>
+                <div class="code-block">&lt;role&gt;Expert analyst&lt;/role&gt;
+
+&lt;document&gt;
+{{paste document here}}
+&lt;/document&gt;
+
+&lt;instructions&gt;
+1. Summarize the key points
+2. Identify potential issues
+3. Provide recommendations
+&lt;/instructions&gt;
+
+&lt;output_format&gt;
+Use headers for each section.
+Keep each point under 50 words.
+&lt;/output_format&gt;</div>
+            </div>`,
+        interview: `
+            <div class="section">
+                <h2>Interview Questions: Claude</h2>
+                <div class="interview-box">
+                    <div class="box-title">Q1: Why does Claude respond better to XML tags than other models?</div>
+                    <div class="box-content">Claude is specifically fine-tuned by Anthropic to parse XML tags as semantic structure. Unlike other models that treat XML as text, Claude understands that &lt;instructions&gt; contains directives and &lt;context&gt; contains background. This training makes XML-structured prompts significantly more effective with Claude.</div>
+                </div>
+                <div class="interview-box">
+                    <div class="box-title">Q2: Explain Claude's Extended Thinking feature.</div>
+                    <div class="box-content">Extended Thinking gives Claude a dedicated scratchpad for complex reasoning before producing a final answer. Enabled via API with {"thinking": {"type": "enabled", "budget_tokens": 10000}}. The thinking is visible to you but separate from the final response. Error rates drop 50%+ on reasoning tasks.</div>
+                </div>
+                <div class="interview-box">
+                    <div class="box-title">Q3: What's Response Prefilling and when to use it?</div>
+                    <div class="box-content">Prefilling starts Claude's response with specific text via the API. Use cases: 1) Force JSON output by prefilling with "{". 2) Prevent chatty preambles. 3) Guide output format. 4) Continue from a specific point. It's unique to Claude's API and not available in the web interface.</div>
+                </div>
+            </div>`
     },
-    {
-        iteration: 3,
-        prompt: "I run an e-commerce website selling handmade jewelry. Our checkout abandonment rate is 70%. Users complain it takes too long (5+ steps). Analyze this and suggest 3-5 specific improvements to reduce friction. Format as: Problem → Solution → Expected Impact.",
-        score: "95/100 - Excellent",
-        notes: "✓ Excellent: Clear context, specific problem with data, defined task, output format specified. AI has everything needed for quality response."
-    }
-];
-
-function showIteration(num) {
-    const iteration = iterations[num - 1];
-    document.getElementById('iterationPrompt').textContent = iteration.prompt;
-    document.getElementById('iterationScore').textContent = iteration.score;
-    document.getElementById('iterationNotes').innerHTML = `<p style="color: #ccc; margin: 0;">${iteration.notes}</p>`;
+    "gemini": {
+        concepts: `
+            <div class="section">
+                <h2>The Gemini Difference</h2>
+                <p>Google's Gemini is <strong>natively multimodal</strong> — it processes text, images, audio, and video in a single prompt. It also supports <strong>system instructions</strong> that persist across turns.</p>
+                <div class="callout insight">
+                    <div class="callout-title">💡 Key Insight</div>
+                    <p>Gemini 2.0+ may over-analyze verbose prompts — keep instructions precise and direct.</p>
+                </div>
+                <h3>Key Gemini Techniques</h3>
+                <table>
+                    <tr><th>Technique</th><th>What It Does</th><th>Best For</th></tr>
+                    <tr><td><strong>System Instructions</strong></td><td>Persistent rules across all turns</td><td>Chatbots, consistent AI apps</td></tr>
+                    <tr><td><strong>JSON Schema Output</strong></td><td>Guaranteed structured responses</td><td>API integrations, data pipelines</td></tr>
+                    <tr><td><strong>Multimodal Input</strong></td><td>Text + image + audio + video</td><td>Content analysis, accessibility</td></tr>
+                    <tr><td><strong>Temperature/Top-K/Top-P</strong></td><td>Fine-grained randomness control</td><td>Tuning creativity vs accuracy</td></tr>
+                    <tr><td><strong>Step-Back Prompting</strong></td><td>Abstract before solving</td><td>Complex domain questions</td></tr>
+                    <tr><td><strong>ReAct Pattern</strong></td><td>Reason + Act loop</td><td>AI agents with tool use</td></tr>
+                </table>
+            </div>`,
+        code: `
+            <div class="section">
+                <h2>Gemini Prompt Templates</h2>
+                <h3>System Instruction Example</h3>
+                <div class="code-block">System: You are a professional data analyst at a Fortune 500 company.
+
+Rules:
+- Always cite data sources
+- Use metric units unless asked otherwise
+- Present numbers with 2 decimal places for percentages
+- If asked about topics outside data analysis, politely redirect
+- Format responses with clear headers and bullet points
+
+→ These rules apply to EVERY subsequent user message.</div>
+                <h3>JSON Schema Output (API)</h3>
+                <div class="code-block">// Set response_mime_type to "application/json"
+// Provide response_schema:
+{
+  "product_name": "string",
+  "rating": "number (1-5)",
+  "pros": ["string"],
+  "cons": ["string"],
+  "would_recommend": "boolean"
 }
 
-// Challenge scenarios
-const challenges = {
-    email: {
-        scenario: "Your manager asked you to write a follow-up email to a client who attended yesterday's product demo. The client seemed interested but had concerns about pricing and implementation timeline."
-    },
-    code: {
-        scenario: "You need to create a JavaScript function that validates email addresses and returns detailed error messages for invalid formats. It should handle edge cases like missing @ symbols, invalid domains, and special characters."
+→ Gemini GUARANTEES valid JSON matching this schema.</div>
+                <h3>Step-Back Prompting</h3>
+                <div class="code-block">Step 1: "What physics principle governs the relationship 
+between pressure, temperature, and volume of gases?"
+
+Step 2: "Using that principle, what happens to pressure 
+if temperature is tripled and volume is halved?"
+
+→ AI first recalls PV=nRT, then applies it correctly.</div>
+                <h3>ReAct Agent Pattern</h3>
+                <div class="code-block">Thought: I need to find the current stock price of NVIDIA
+Action: search("NVIDIA stock price today")
+Observation: NVIDIA (NVDA) is trading at $875.32
+
+Thought: Now I need to calculate the market cap
+Action: calculate(875.32 × 24.49 billion shares)
+Observation: Market cap ≈ $21.4 trillion
+
+Answer: NVIDIA's current market cap is approximately...</div>
+            </div>`,
+        interview: `
+            <div class="section">
+                <h2>Interview Questions: Gemini</h2>
+                <div class="interview-box">
+                    <div class="box-title">Q1: How does Gemini's multimodal capability differ from other models?</div>
+                    <div class="box-content">Gemini is natively multimodal — trained on text, images, audio, and video together from the start. Other models often bolt on vision/audio as separate modules. This means Gemini can process a video and answer questions about it in a single prompt, or analyze images alongside text naturally.</div>
+                </div>
+                <div class="interview-box">
+                    <div class="box-title">Q2: Explain Temperature, Top-K, and Top-P tuning.</div>
+                    <div class="box-content"><strong>Temperature</strong> (0-2): Controls randomness. 0 = deterministic, 2 = maximum creativity. <strong>Top-K</strong> (1-40): Limits token selection to most probable K tokens. <strong>Top-P</strong> (0-1): Nucleus sampling — selects from tokens whose cumulative probability reaches P. Use low temp for factual tasks, high for brainstorming.</div>
+                </div>
+                <div class="interview-box">
+                    <div class="box-title">Q3: What is step-back prompting?</div>
+                    <div class="box-content">A Google research technique where you ask the AI to first abstract/generalize the problem before solving it. Example: Before asking "What's 15% of $342?", first ask "What's the formula for calculating percentages?" This helps the model recall the right framework before applying it.</div>
+                </div>
+            </div>`
     },
-    creative: {
-        scenario: "Create a compelling Instagram caption for a new eco-friendly water bottle launch. Your brand targets young professionals who care about sustainability. The post should encourage engagement and include a call-to-action."
+    "openai": {
+        concepts: `
+            <div class="section">
+                <h2>OpenAI's Prompting Philosophy</h2>
+                <p>OpenAI's approach centers on <strong>six core strategies</strong>: write clear instructions, provide reference text, split complex tasks, give models time to think, use external tools, and test systematically.</p>
+                <div class="callout insight">
+                    <div class="callout-title">💡 Key Insight</div>
+                    <p>For o1/o3 reasoning models, use SIMPLER prompts — they have built-in chain-of-thought. Over-prompting can hurt.</p>
+                </div>
+                <h3>Key OpenAI Techniques</h3>
+                <table>
+                    <tr><th>Technique</th><th>What It Does</th><th>Best For</th></tr>
+                    <tr><td><strong>Delimiters</strong></td><td>### """ --- to separate sections</td><td>Preventing prompt injection</td></tr>
+                    <tr><td><strong>Function Calling</strong></td><td>Structured JSON tool outputs</td><td>API integrations, data extraction</td></tr>
+                    <tr><td><strong>RAG</strong></td><td>Ground responses in your docs</td><td>Reducing hallucinations</td></tr>
+                    <tr><td><strong>Self-Improvement</strong></td><td>AI critiques & refines own output</td><td>High-quality content</td></tr>
+                    <tr><td><strong>Multi-Perspective</strong></td><td>Simulate different expert views</td><td>Comprehensive analysis</td></tr>
+                    <tr><td><strong>Context Engineering</strong></td><td>Curate entire context window</td><td>Production AI systems</td></tr>
+                </table>
+            </div>`,
+        code: `
+            <div class="section">
+                <h2>OpenAI Prompt Templates</h2>
+                <h3>Delimiter Pattern</h3>
+                <div class="code-block">Summarize the text delimited by triple quotes.
+
+"""
+{{long article text here}}
+"""
+
+###
+Rules:
+- Keep summary under 100 words
+- Focus on key findings
+- Use bullet points
+###</div>
+                <h3>Recursive Self-Improvement (3-Step)</h3>
+                <div class="code-block">Step 1 — Generate:
+"Write a marketing email for our new SaaS product."
+
+Step 2 — Critique:
+"Review this email for: clarity, persuasiveness,
+call-to-action effectiveness, and tone.
+Score each dimension 1-10 and explain weaknesses."
+
+Step 3 — Refine:
+"Rewrite the email addressing these specific
+weaknesses: [critique output].
+Aim for 9+/10 on all dimensions."</div>
+                <h3>Multi-Perspective Analysis</h3>
+                <div class="code-block">Analyze this business proposal from three perspectives:
+
+1. CFO: Focus on financial viability, ROI, cash flow
+2. CTO: Focus on technical feasibility, scalability, risks
+3. CMO: Focus on market opportunity, brand impact
+
+For each perspective, provide:
+- Top 3 concerns
+- Top 3 opportunities
+- Recommendation (Go / No-Go / Conditional)
+
+Then synthesize a unified recommendation.</div>
+            </div>`,
+        interview: `
+            <div class="section">
+                <h2>Interview Questions: OpenAI GPT</h2>
+                <div class="interview-box">
+                    <div class="box-title">Q1: What is function calling and how does it work?</div>
+                    <div class="box-content">Function calling lets you define function signatures (name, description, parameters with types) in the API request. GPT decides when to call functions and returns structured JSON with arguments. You execute the function and return results. Supports parallel calling in GPT-4o. Perfect for building AI agents that interact with APIs.</div>
+                </div>
+                <div class="interview-box">
+                    <div class="box-title">Q2: Explain RAG and its benefits.</div>
+                    <div class="box-content">Retrieval-Augmented Generation: 1) Embed your docs as vectors. 2) On each query, retrieve relevant chunks. 3) Include them as context in the prompt. Benefits: reduces hallucinations, provides up-to-date info, enables domain-specific answers without fine-tuning, and you can cite sources.</div>
+                </div>
+                <div class="interview-box">
+                    <div class="box-title">Q3: What is "context engineering"?</div>
+                    <div class="box-content">The evolution beyond prompt engineering. Instead of crafting individual prompts, you curate the ENTIRE context window: system message (role/rules), tool definitions (available functions), retrieved context (RAG results), and conversation history (filtered/summarized). The prompt is just one piece of the bigger picture.</div>
+                </div>
+            </div>`
     },
-    analysis: {
-        scenario: "You have sales data from Q1-Q4 showing declining revenue in Q3. Analyze what might have caused this dip and provide actionable recommendations. Consider seasonality, marketing spend, and competition."
+    "comparison": {
+        concepts: `
+            <div class="section">
+                <h2>Side-by-Side Comparison</h2>
+                <table>
+                    <tr>
+                        <th>Feature</th>
+                        <th style="color:#B07DFF">🟣 Claude</th>
+                        <th style="color:#4285F4">🔵 Gemini</th>
+                        <th style="color:#10A37F">🟢 GPT</th>
+                    </tr>
+                    <tr><td>Best Structuring</td><td>XML Tags</td><td>System Instructions</td><td>Delimiters (###/""")</td></tr>
+                    <tr><td>Structured Output</td><td>Prefilling</td><td>JSON Schema</td><td>Function Calling</td></tr>
+                    <tr><td>Reasoning</td><td>Extended Thinking</td><td>Step-Back Prompting</td><td>o1/o3 Models</td></tr>
+                    <tr><td>Multimodal</td><td>Text + Images</td><td>Text+Image+Audio+Video</td><td>Text + Image + Audio</td></tr>
+                    <tr><td>Context Window</td><td>200K tokens</td><td>1M+ tokens</td><td>128K tokens</td></tr>
+                    <tr><td>Tool Use</td><td>Tool Use API</td><td>Function Declarations</td><td>Function Calling</td></tr>
+                    <tr><td>Unique Strength</td><td>Long-form analysis</td><td>Multimodal + Google</td><td>Ecosystem + tools</td></tr>
+                </table>
+                <h3>When to Use Which Model</h3>
+                <div class="info-box">
+                    <div class="box-title">🟣 Choose Claude when...</div>
+                    <div class="box-content">Long document analysis (200K context), nuanced writing, XML-structured prompts, complex reasoning, coding with explanations</div>
+                </div>
+                <div class="info-box">
+                    <div class="box-title">🔵 Choose Gemini when...</div>
+                    <div class="box-content">Multimodal tasks (image/audio/video), extremely long context (1M+), Google integration, guaranteed JSON output, grounding with Search</div>
+                </div>
+                <div class="info-box">
+                    <div class="box-title">🟢 Choose GPT when...</div>
+                    <div class="box-content">Building apps with API, complex tool-use, hard math/reasoning (o1/o3), existing OpenAI ecosystem, image generation (DALL-E)</div>
+                </div>
+            </div>`,
+        code: `
+            <div class="section">
+                <h2>Cross-Platform Prompt Adaptation</h2>
+                <p>The same task requires different prompt structures across providers:</p>
+                <h3>Task: Code Review</h3>
+                <div class="code-block">🟣 CLAUDE VERSION:
+&lt;role&gt;Senior code reviewer&lt;/role&gt;
+&lt;code language="python"&gt;
+def process(data):
+    return [x*2 for x in data if x > 0]
+&lt;/code&gt;
+&lt;instructions&gt;
+Review for bugs, performance, readability.
+Use &lt;thinking&gt; tags before responding.
+&lt;/instructions&gt;</div>
+                <div class="code-block">🔵 GEMINI VERSION:
+System: You are a senior code reviewer.
+Always respond in JSON format.
+
+User: Review this Python code:
+\`\`\`python
+def process(data):
+    return [x*2 for x in data if x > 0]
+\`\`\`
+Provide: bugs, performance, readability (1-10), improved version.</div>
+                <div class="code-block">🟢 GPT VERSION:
+You are a senior code reviewer.
+
+Review the following code:
+###
+def process(data):
+    return [x*2 for x in data if x > 0]
+###
+
+Evaluate:
+1. Bugs or edge cases
+2. Performance concerns
+3. Readability (1-10)
+4. Improved version with comments</div>
+            </div>`,
+        interview: `
+            <div class="section">
+                <h2>Interview Questions: Provider Strategy</h2>
+                <div class="interview-box">
+                    <div class="box-title">Q1: How do you decide which AI provider to use for a project?</div>
+                    <div class="box-content">Consider: 1) Task type — multimodal? Use Gemini. Long docs? Claude. API integration? GPT. 2) Context needs — 1M tokens? Gemini. 200K? Claude. 128K? GPT. 3) Output format — guaranteed JSON? Gemini Schema. Tool use? GPT Functions. 4) Budget and latency requirements. 5) Existing tech stack integration.</div>
+                </div>
+                <div class="interview-box">
+                    <div class="box-title">Q2: What's the future of prompt engineering?</div>
+                    <div class="box-content">Four key trends: 1) <strong>Context engineering</strong> — curating entire context windows, not just prompts. 2) <strong>Agentic workflows</strong> — prompts become policies for autonomous AI agents. 3) <strong>Multimodal-first</strong> — combining text, images, audio, video as standard. 4) <strong>Automated optimization</strong> — tools like DSPy auto-optimize prompts.</div>
+                </div>
+                <div class="interview-box">
+                    <div class="box-title">Q3: How do you maintain a cross-platform prompt library?</div>
+                    <div class="box-content">Keep a "prompt cookbook" with 3 versions of each template (Claude/Gemini/GPT). Version control prompts like code. Document: what each prompt does, which model it's for, expected input/output format, and performance metrics. Update when model versions change.</div>
+                </div>
+            </div>`
     }
 };
 
-let currentChallenge = 'email';
-
-function setChallenge(type) {
-    currentChallenge = type;
-    
-    // Update button states
-    const buttons = document.querySelectorAll('.challenge-box .scenario-btn');
-    buttons.forEach(btn => btn.classList.remove('active'));
-    event.target.classList.add('active');
-
-    document.getElementById('challengeScenario').textContent = challenges[type].scenario;
-    document.getElementById('challengeInput').value = '';
-    document.getElementById('challengeFeedback').classList.remove('show');
+// ============== Rendering Functions ==============
+function renderDashboard() {
+    document.getElementById('modulesGrid').innerHTML = modules.map(m => `
+        <div class="card" onclick="showModule('${m.id}')">
+            <div class="card-icon">${m.icon}</div>
+            <h3>${m.title}</h3>
+            <p>${m.description}</p>
+            <span class="category-label">${m.category}</span>
+        </div>
+    `).join('');
 }
 
-function evaluateChallenge() {
-    const input = document.getElementById('challengeInput').value;
-    const feedback = document.getElementById('challengeFeedback');
-
-    if (!input.trim()) {
-        feedback.innerHTML = '<p style="color: #FF6B35;">⚠️ Please write a prompt first!</p>';
-        feedback.classList.add('show');
-        return;
-    }
-
-    // Simple evaluation based on key elements
-    const hasRole = /you are|act as|as a/i.test(input);
-    const hasContext = input.length > 100;
-    const hasFormat = /format|structure|provide|return|list|table/i.test(input);
-    const hasConstraints = /words|length|tone|style|keep/i.test(input);
-
-    let score = 0;
-    let feedbackItems = [];
-
-    if (hasRole) {
-        score += 25;
-        feedbackItems.push('✓ Good: Includes role/persona');
-    } else {
-        feedbackItems.push('⚠️ Consider: Adding a role or persona');
-    }
-
-    if (hasContext) {
-        score += 25;
-        feedbackItems.push('✓ Good: Provides context');
-    } else {
-        feedbackItems.push('⚠️ Consider: Adding more context and background');
-    }
-
-    if (hasFormat) {
-        score += 25;
-        feedbackItems.push('✓ Good: Specifies output format');
-    } else {
-        feedbackItems.push('⚠️ Consider: Specifying the desired output format');
-    }
-
-    if (hasConstraints) {
-        score += 25;
-        feedbackItems.push('✓ Good: Includes constraints');
-    } else {
-        feedbackItems.push('⚠️ Consider: Adding constraints like length, tone, or style');
-    }
-
-    let grade = '';
-    let color = '';
-    if (score >= 75) {
-        grade = 'Excellent';
-        color = '#00FF88';
-    } else if (score >= 50) {
-        grade = 'Good';
-        color = '#FFB800';
-    } else {
-        grade = 'Needs Improvement';
-        color = '#FF6B35';
-    }
-
-    feedback.innerHTML = `
-        <h4 style="color: ${color}; margin-bottom: 12px;">Score: ${score}/100 - ${grade}</h4>
-        ${feedbackItems.map(item => `<p style="margin: 8px 0; font-size: 14px;">${item}</p>`).join('')}
-        ${score >= 75 ? '<p style="margin-top: 15px; color: #00D9FF;">🎉 Great job! Your prompt includes all key components.</p>' : ''}
+function showModule(moduleId) {
+    const module = modules.find(m => m.id === moduleId);
+    const content = MODULE_CONTENT[moduleId];
+    document.getElementById('dashboard').classList.remove('active');
+
+    document.getElementById('modulesContainer').innerHTML = `
+        <div class="module active" id="module-${moduleId}">
+            <button class="btn-back" onclick="backToDashboard()">← Back to Dashboard</button>
+            <header>
+                <h1>${module.icon} ${module.title}</h1>
+                <p class="subtitle">${module.description}</p>
+            </header>
+            <div class="tabs">
+                <button class="tab-btn active" onclick="switchTab('${moduleId}', 'concepts', event)">📖 Key Concepts</button>
+                <button class="tab-btn" onclick="switchTab('${moduleId}', 'code', event)">💻 Prompt Templates</button>
+                <button class="tab-btn" onclick="switchTab('${moduleId}', 'interview', event)">🎯 Interview Questions</button>
+            </div>
+            <div id="${moduleId}-concepts" class="tab active">${content.concepts}</div>
+            <div id="${moduleId}-code" class="tab">${content.code}</div>
+            <div id="${moduleId}-interview" class="tab">${content.interview}</div>
+        </div>
     `;
-    feedback.classList.add('show');
-}
-
-function resetChallenge() {
-    document.getElementById('challengeInput').value = '';
-    document.getElementById('challengeFeedback').classList.remove('show');
 }
 
-// Practice challenge
-function startPractice(topicId) {
-    alert('Practice mode: Try building a prompt for a simple task like \"Write a product description for noise-canceling headphones\" and include all four components: Role, Context, Task, and Format!');
-}
-
-// Template copy
-function copyTemplate(element) {
-    const template = element.querySelector('pre').textContent;
-    
-    // Create temporary textarea
-    const textarea = document.createElement('textarea');
-    textarea.value = template;
-    document.body.appendChild(textarea);
-    textarea.select();
-    
-    try {
-        document.execCommand('copy');
-        // Show feedback
-        const originalHTML = element.innerHTML;
-        element.style.borderColor = '#00FF88';
-        setTimeout(() => {
-            element.style.borderColor = '#333';
-        }, 1000);
-    } catch (err) {
-        console.error('Copy failed:', err);
-    }
-    
-    document.body.removeChild(textarea);
-}
-
-// Canvas visualizations
-function initializeCanvases() {
-    // Structure Canvas - Component visualization
-    const structureCanvas = document.getElementById('structureCanvas');
-    if (structureCanvas) {
-        const ctx = structureCanvas.getContext('2d');
-        drawStructureVisualization(ctx, structureCanvas);
-    }
-
-    // Context Canvas - Information layers
-    const contextCanvas = document.getElementById('contextCanvas');
-    if (contextCanvas) {
-        const ctx = contextCanvas.getContext('2d');
-        drawContextVisualization(ctx, contextCanvas);
-    }
-
-    // Refinement Canvas - Improvement curve
-    const refinementCanvas = document.getElementById('refinementCanvas');
-    if (refinementCanvas) {
-        const ctx = refinementCanvas.getContext('2d');
-        drawRefinementVisualization(ctx, refinementCanvas);
-    }
-
-    // Techniques Canvas - Pattern comparison
-    const techniquesCanvas = document.getElementById('techniquesCanvas');
-    if (techniquesCanvas) {
-        const ctx = techniquesCanvas.getContext('2d');
-        drawTechniquesVisualization(ctx, techniquesCanvas);
-    }
-}
-
-function drawStructureVisualization(ctx, canvas) {
-    canvas.width = canvas.offsetWidth;
-    canvas.height = canvas.offsetHeight;
-
-    const components = [
-        { name: 'Role', color: '#0066FF', y: 80 },
-        { name: 'Context', color: '#00D9FF', y: 160 },
-        { name: 'Task', color: '#FFB800', y: 240 },
-        { name: 'Format', color: '#00FF88', y: 320 }
-    ];
-
-    const centerX = canvas.width / 2;
-
-    // Draw connecting lines
-    ctx.strokeStyle = '#333';
-    ctx.lineWidth = 2;
-    ctx.beginPath();
-    ctx.moveTo(centerX, 60);
-    ctx.lineTo(centerX, 340);
-    ctx.stroke();
-
-    // Draw components
-    components.forEach(comp => {
-        // Circle
-        ctx.fillStyle = comp.color;
-        ctx.beginPath();
-        ctx.arc(centerX, comp.y, 30, 0, Math.PI * 2);
-        ctx.fill();
-
-        // Text
-        ctx.fillStyle = '#FFFFFF';
-        ctx.font = 'bold 14px sans-serif';
-        ctx.textAlign = 'center';
-        ctx.fillText(comp.name, centerX, comp.y + 5);
-    });
-
-    // Title
-    ctx.fillStyle = '#00D9FF';
-    ctx.font = 'bold 18px sans-serif';
-    ctx.textAlign = 'center';
-    ctx.fillText('Prompt Structure Components', centerX, 30);
-}
-
-function drawContextVisualization(ctx, canvas) {
-    canvas.width = canvas.offsetWidth;
-    canvas.height = canvas.offsetHeight;
-
-    const layers = [
-        { name: 'Task Only', width: 100, color: '#FF6B35' },
-        { name: '+ Basic Context', width: 200, color: '#FFB800' },
-        { name: '+ Full Context', width: 350, color: '#00FF88' }
-    ];
-
-    const startY = 100;
-    const layerHeight = 60;
-    const spacing = 30;
-
-    layers.forEach((layer, index) => {
-        const y = startY + (index * (layerHeight + spacing));
-        
-        // Draw rectangle
-        ctx.fillStyle = layer.color + '44';
-        ctx.fillRect(50, y, layer.width, layerHeight);
-        
-        // Draw border
-        ctx.strokeStyle = layer.color;
-        ctx.lineWidth = 2;
-        ctx.strokeRect(50, y, layer.width, layerHeight);
-        
-        // Draw text
-        ctx.fillStyle = '#FFFFFF';
-        ctx.font = '14px sans-serif';
-        ctx.textAlign = 'left';
-        ctx.fillText(layer.name, 60, y + 35);
-    });
-
-    // Title
-    ctx.fillStyle = '#00D9FF';
-    ctx.font = 'bold 18px sans-serif';
-    ctx.textAlign = 'left';
-    ctx.fillText('Context Layers: From Minimal to Rich', 50, 50);
-}
-
-function drawRefinementVisualization(ctx, canvas) {
-    canvas.width = canvas.offsetWidth;
-    canvas.height = canvas.offsetHeight;
-
-    const points = [
-        { x: 100, y: 300, label: 'Iteration 1' },
-        { x: 300, y: 200, label: 'Iteration 2' },
-        { x: 500, y: 120, label: 'Iteration 3' },
-        { x: 700, y: 80, label: 'Final' }
-    ];
-
-    // Draw curve
-    ctx.strokeStyle = '#0066FF';
-    ctx.lineWidth = 3;
-    ctx.beginPath();
-    ctx.moveTo(points[0].x, points[0].y);
-    
-    for (let i = 1; i < points.length; i++) {
-        const xMid = (points[i - 1].x + points[i].x) / 2;
-        ctx.quadraticCurveTo(xMid, points[i - 1].y, points[i].x, points[i].y);
+function switchTab(moduleId, tabName, e) {
+    const moduleEl = document.getElementById(`module-${moduleId}`);
+    moduleEl.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+    if (e && e.target) {
+        e.target.classList.add('active');
+    } else {
+        const tabNames = ['concepts', 'code', 'interview'];
+        const idx = tabNames.indexOf(tabName);
+        if (idx !== -1) moduleEl.querySelectorAll('.tab-btn')[idx]?.classList.add('active');
     }
-    ctx.stroke();
-
-    // Draw points
-    points.forEach((point, index) => {
-        ctx.fillStyle = '#00D9FF';
-        ctx.beginPath();
-        ctx.arc(point.x, point.y, 8, 0, Math.PI * 2);
-        ctx.fill();
-
-        // Labels
-        ctx.fillStyle = '#FFFFFF';
-        ctx.font = '12px sans-serif';
-        ctx.textAlign = 'center';
-        ctx.fillText(point.label, point.x, point.y + 25);
-    });
-
-    // Y-axis label
-    ctx.save();
-    ctx.translate(30, 200);
-    ctx.rotate(-Math.PI / 2);
-    ctx.fillStyle = '#888';
-    ctx.font = '14px sans-serif';
-    ctx.textAlign = 'center';
-    ctx.fillText('Quality', 0, 0);
-    ctx.restore();
-
-    // X-axis label
-    ctx.fillStyle = '#888';
-    ctx.font = '14px sans-serif';
-    ctx.textAlign = 'center';
-    ctx.fillText('Iterations', canvas.width / 2, canvas.height - 20);
-
-    // Title
-    ctx.fillStyle = '#00D9FF';
-    ctx.font = 'bold 18px sans-serif';
-    ctx.textAlign = 'center';
-    ctx.fillText('Prompt Improvement Through Iteration', canvas.width / 2, 30);
+    moduleEl.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
+    document.getElementById(`${moduleId}-${tabName}`).classList.add('active');
 }
 
-function drawTechniquesVisualization(ctx, canvas) {
-    canvas.width = canvas.offsetWidth;
-    canvas.height = canvas.offsetHeight;
-
-    const techniques = [
-        { name: 'Basic', score: 40, color: '#FF6B35', x: 150 },
-        { name: 'Chain-of-Thought', score: 75, color: '#FFB800', x: 350 },
-        { name: 'Few-Shot', score: 85, color: '#00D9FF', x: 550 },
-        { name: 'Combined', score: 95, color: '#00FF88', x: 750 }
-    ];
-
-    const maxHeight = 250;
-    const barWidth = 80;
-    const baseY = 320;
-
-    techniques.forEach(tech => {
-        const barHeight = (tech.score / 100) * maxHeight;
-        
-        // Draw bar
-        ctx.fillStyle = tech.color + '88';
-        ctx.fillRect(tech.x - barWidth / 2, baseY - barHeight, barWidth, barHeight);
-        
-        // Draw border
-        ctx.strokeStyle = tech.color;
-        ctx.lineWidth = 2;
-        ctx.strokeRect(tech.x - barWidth / 2, baseY - barHeight, barWidth, barHeight);
-        
-        // Score text
-        ctx.fillStyle = '#FFFFFF';
-        ctx.font = 'bold 16px sans-serif';
-        ctx.textAlign = 'center';
-        ctx.fillText(tech.score + '%', tech.x, baseY - barHeight - 10);
-        
-        // Technique name
-        ctx.font = '12px sans-serif';
-        ctx.fillText(tech.name, tech.x, baseY + 25);
-    });
-
-    // Title
-    ctx.fillStyle = '#00D9FF';
-    ctx.font = 'bold 18px sans-serif';
-    ctx.textAlign = 'center';
-    ctx.fillText('Technique Effectiveness Comparison', canvas.width / 2, 30);
-
-    // Y-axis
-    ctx.strokeStyle = '#333';
-    ctx.lineWidth = 2;
-    ctx.beginPath();
-    ctx.moveTo(80, 70);
-    ctx.lineTo(80, baseY);
-    ctx.stroke();
-
-    // Y-axis label
-    ctx.fillStyle = '#888';
-    ctx.font = '12px sans-serif';
-    ctx.textAlign = 'right';
-    ctx.fillText('0%', 75, baseY + 5);
-    ctx.fillText('50%', 75, baseY - 125);
-    ctx.fillText('100%', 75, baseY - 250);
+function backToDashboard() {
+    document.querySelectorAll('.module').forEach(m => m.remove());
+    document.getElementById('dashboard').classList.add('active');
 }
 
-// Checklist interaction
-document.addEventListener('click', function(e) {
-    if (e.target.tagName === 'LI' && e.target.parentElement.classList.contains('checklist')) {
-        e.target.classList.toggle('checked');
-    }
-});
-
-// Initialize on load
-window.addEventListener('load', init);
-
-// Handle window resize for canvases
-window.addEventListener('resize', function() {
-    initializeCanvases();
-});
+renderDashboard();

prompt-engineering-guide/index.html

@@ -1,10 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Prompt Engineering Masterclass</title>
+    <link rel="stylesheet" href="../shared/css/design-system.css">
+    <link rel="stylesheet" href="../shared/css/components.css">
     <style>
+        :root {
+            --pe-cyan: #00D9FF;
+            --pe-purple: #B07DFF;
+            --pe-green: #10A37F;
+            --pe-blue: #4285F4;
+            --color-primary: var(--pe-cyan);
+            --color-secondary: var(--pe-purple);
+        }
+
         * {
             margin: 0;
             padding: 0;
@@ -12,1650 +24,378 @@
         }
 
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background-color: #121212;
-            color: #FFFFFF;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: linear-gradient(135deg, #0a0f1e 0%, #1a1f3a 100%);
+            color: #e0e6ed;
             line-height: 1.6;
-            overflow-x: hidden;
-        }
-
-        .app-container {
-            display: flex;
-            min-height: 100vh;
-        }
-
-        /* Sidebar */
-        .sidebar {
-            width: 280px;
-            background: #1a1a1a;
-            border-right: 1px solid #333;
-            position: fixed;
-            height: 100vh;
-            overflow-y: auto;
-            padding: 20px;
-            z-index: 100;
-        }
-
-        .sidebar-header {
-            margin-bottom: 30px;
-        }
-
-        .sidebar-header h1 {
-            font-size: 20px;
-            color: #0066FF;
-            margin-bottom: 5px;
-        }
-
-        .sidebar-header p {
-            font-size: 12px;
-            color: #888;
-        }
-
-        .progress-bar {
-            width: 100%;
-            height: 4px;
-            background: #333;
-            border-radius: 2px;
-            margin: 15px 0;
-            overflow: hidden;
-        }
-
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, #0066FF, #00D9FF);
-            width: 0%;
-            transition: width 0.5s ease;
         }
 
-        .topic-list {
-            list-style: none;
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 2rem;
         }
 
-        .topic-item {
-            padding: 12px 15px;
-            margin-bottom: 8px;
-            background: #222;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            border-left: 3px solid transparent;
+        header {
+            text-align: center;
+            margin-bottom: 3rem;
+            padding: 2rem 0;
         }
 
-        .topic-item:hover {
-            background: #2a2a2a;
-            border-left-color: #0066FF;
+        header h1 {
+            font-size: 3rem;
+            background: linear-gradient(135deg, var(--pe-cyan), var(--pe-purple));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 0.5rem;
         }
 
-        .topic-item.active {
-            background: #0066FF22;
-            border-left-color: #0066FF;
-        }
-
-        .topic-item h3 {
-            font-size: 14px;
-            margin-bottom: 3px;
-            color: #fff;
+        .subtitle {
+            font-size: 1.2rem;
+            color: #8892a6;
         }
 
-        .topic-item p {
-            font-size: 11px;
-            color: #888;
-        }
-
-        /* Main Content */
-        .main-content {
-            flex: 1;
-            margin-left: 280px;
-            padding: 40px;
-            max-width: 1200px;
-        }
-
-        .content-section {
+        /* Dashboard */
+        .dashboard {
             display: none;
-            animation: fadeIn 0.5s ease;
         }
 
-        .content-section.active {
+        .dashboard.active {
             display: block;
         }
 
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        .section-header {
-            margin-bottom: 30px;
-        }
-
-        .section-header h2 {
-            font-size: 36px;
-            color: #00D9FF;
-            margin-bottom: 8px;
-        }
-
-        .section-header .subtitle {
-            font-size: 18px;
-            color: #888;
-            margin-bottom: 15px;
-        }
-
-        .section-header .description {
-            font-size: 16px;
-            color: #ccc;
-            line-height: 1.8;
+        .modules-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            gap: 2rem;
+            margin-bottom: 3rem;
         }
 
-        /* Cards */
         .card {
-            background: #1a1a1a;
-            border: 1px solid #333;
-            border-radius: 12px;
-            padding: 25px;
-            margin-bottom: 25px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(0, 217, 255, 0.3);
+            border-radius: 16px;
+            padding: 2rem;
+            cursor: pointer;
             transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
         }
 
-        .card:hover {
-            border-color: #0066FF;
-            box-shadow: 0 4px 20px rgba(0, 102, 255, 0.1);
-        }
-
-        .card h3 {
-            font-size: 20px;
-            color: #00D9FF;
-            margin-bottom: 15px;
-        }
-
-        .card p {
-            font-size: 15px;
-            color: #ccc;
-            line-height: 1.8;
+        .card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, var(--pe-cyan), var(--pe-purple));
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
         }
 
-        /* Callout Boxes */
-        .callout {
-            padding: 18px 20px;
-            border-radius: 8px;
-            margin: 15px 0;
-            border-left: 4px solid;
-            font-size: 14px;
-            line-height: 1.6;
+        .card:hover::before {
+            transform: scaleX(1);
         }
 
-        .callout-insight {
-            background: rgba(0, 217, 255, 0.1);
-            border-color: #00D9FF;
-            color: #00D9FF;
+        .card:hover {
+            transform: translateY(-8px);
+            border-color: var(--pe-cyan);
+            box-shadow: 0 20px 40px rgba(0, 217, 255, 0.3);
         }
 
-        .callout-mistake {
-            background: rgba(255, 107, 53, 0.1);
-            border-color: #FF6B35;
-            color: #FF6B35;
+        .card-icon {
+            font-size: 3rem;
+            margin-bottom: 1rem;
         }
 
-        .callout-tip {
-            background: rgba(0, 255, 136, 0.1);
-            border-color: #00FF88;
-            color: #00FF88;
+        .card h3 {
+            font-size: 1.5rem;
+            color: var(--pe-cyan);
+            margin-bottom: 0.5rem;
         }
 
-        .callout strong {
-            margin-right: 8px;
+        .card p {
+            color: #b3b9c5;
+            font-size: 0.95rem;
+            margin-bottom: 1rem;
         }
 
-        /* Interactive Elements */
-        .interactive-demo {
-            background: #0a0a0a;
-            border: 2px solid #333;
+        .category-label {
+            display: inline-block;
+            padding: 0.25rem 0.75rem;
+            background: rgba(0, 217, 255, 0.2);
+            border: 1px solid var(--pe-cyan);
             border-radius: 12px;
-            padding: 30px;
-            margin: 25px 0;
-        }
-
-        .prompt-builder {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 20px;
-            margin-top: 20px;
-        }
-
-        .prompt-component {
-            background: #1a1a1a;
-            padding: 15px;
-            border-radius: 8px;
-            border: 2px dashed #444;
-        }
-
-        .prompt-component h4 {
-            color: #0066FF;
-            font-size: 14px;
-            margin-bottom: 10px;
-        }
-
-        .prompt-component textarea {
-            width: 100%;
-            background: #222;
-            border: 1px solid #444;
-            color: #fff;
-            padding: 10px;
-            border-radius: 6px;
-            font-size: 14px;
-            font-family: inherit;
-            resize: vertical;
-            min-height: 80px;
-        }
-
-        .prompt-component textarea:focus {
-            outline: none;
-            border-color: #0066FF;
+            font-size: 0.75rem;
+            color: var(--pe-cyan);
+            font-weight: 600;
         }
 
-        .output-preview {
-            grid-column: 1 / -1;
-            background: #1a1a1a;
-            padding: 20px;
-            border-radius: 8px;
-            border: 2px solid #0066FF;
+        /* Module View */
+        .module {
+            display: none;
         }
 
-        .quality-grade {
-            display: inline-block;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-weight: 600;
-            font-size: 14px;
-            margin-bottom: 15px;
+        .module.active {
+            display: block;
+            animation: fadeIn 0.5s;
         }
 
-        .grade-poor { background: #FF6B35; color: #000; }
-        .grade-good { background: #FFB800; color: #000; }
-        .grade-excellent { background: #00FF88; color: #000; }
-
-        /* Canvas */
-        .canvas-container {
-            position: relative;
-            width: 100%;
-            height: 400px;
-            background: #0a0a0a;
-            border: 2px solid #333;
-            border-radius: 12px;
-            margin: 25px 0;
-            overflow: hidden;
-        }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
 
-        canvas {
-            display: block;
-            width: 100%;
-            height: 100%;
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
 
-        /* Buttons */
-        .btn {
-            padding: 12px 24px;
+        .btn-back {
+            background: var(--pe-cyan);
+            color: #0a0f1e;
             border: none;
+            padding: 0.75rem 1.5rem;
             border-radius: 8px;
-            font-size: 14px;
-            font-weight: 600;
             cursor: pointer;
-            transition: all 0.3s ease;
-            display: inline-block;
-            text-decoration: none;
-        }
-
-        .btn-primary {
-            background: #0066FF;
-            color: #fff;
-        }
-
-        .btn-primary:hover {
-            background: #0052CC;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
+            font-size: 1rem;
+            font-weight: 600;
+            margin-bottom: 2rem;
+            transition: all 0.3s;
         }
 
-        .btn-secondary {
-            background: #333;
-            color: #fff;
+        .btn-back:hover {
+            background: #00b8d9;
+            transform: translateX(-4px);
         }
 
-        .btn-secondary:hover {
-            background: #444;
+        .module header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
         }
 
-        .btn-group {
+        /* Tabs */
+        .tabs {
             display: flex;
-            gap: 10px;
-            margin: 20px 0;
+            gap: 1rem;
+            margin: 2rem 0;
+            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
             flex-wrap: wrap;
         }
 
-        /* Slider */
-        .slider-control {
-            margin: 25px 0;
-        }
-
-        .slider-control label {
-            display: block;
-            color: #00D9FF;
-            font-size: 14px;
-            font-weight: 600;
-            margin-bottom: 10px;
-        }
-
-        .slider {
-            width: 100%;
-            height: 6px;
-            border-radius: 3px;
-            background: #333;
-            outline: none;
-            -webkit-appearance: none;
-        }
-
-        .slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            background: #0066FF;
+        .tab-btn {
+            background: transparent;
+            border: none;
+            color: #8892a6;
+            padding: 1rem 1.5rem;
             cursor: pointer;
-            transition: all 0.3s ease;
+            font-size: 1rem;
+            border-bottom: 3px solid transparent;
+            transition: all 0.3s;
         }
 
-        .slider::-webkit-slider-thumb:hover {
-            background: #00D9FF;
-            transform: scale(1.2);
-        }
-
-        .slider::-moz-range-thumb {
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            background: #0066FF;
-            cursor: pointer;
-            border: none;
+        .tab-btn.active {
+            color: var(--pe-cyan);
+            border-bottom-color: var(--pe-cyan);
         }
 
-        .slider-value {
-            display: inline-block;
-            margin-left: 15px;
+        .tab-btn:hover {
             color: #fff;
-            font-weight: 600;
         }
 
-        /* Comparison */
-        .comparison {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 20px;
-            margin: 25px 0;
+        .tab {
+            display: none;
+            animation: fadeIn 0.4s;
         }
 
-        .comparison-item {
-            background: #1a1a1a;
-            padding: 20px;
-            border-radius: 8px;
-            border: 2px solid #333;
+        .tab.active {
+            display: block;
         }
 
-        .comparison-item.bad {
-            border-color: #FF6B35;
+        /* Content Sections */
+        .section {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            padding: 2rem;
+            margin-bottom: 2rem;
         }
 
-        .comparison-item.good {
-            border-color: #00FF88;
+        .section h2 {
+            color: var(--pe-cyan);
+            margin-bottom: 1.5rem;
+            font-size: 1.8rem;
         }
 
-        .comparison-item h4 {
-            margin-bottom: 12px;
-            font-size: 16px;
+        .section h3 {
+            color: var(--pe-purple);
+            margin: 1.5rem 0 1rem;
+            font-size: 1.3rem;
         }
 
-        .comparison-item.bad h4 {
-            color: #FF6B35;
+        /* Tables */
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 1.5rem 0;
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 8px;
+            overflow: hidden;
         }
 
-        .comparison-item.good h4 {
-            color: #00FF88;
+        th,
+        td {
+            padding: 1rem;
+            text-align: left;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
 
-        /* Navigation */
-        .nav-buttons {
-            display: flex;
-            justify-content: space-between;
-            margin-top: 40px;
-            padding-top: 30px;
-            border-top: 1px solid #333;
+        th {
+            background: rgba(0, 217, 255, 0.15);
+            color: var(--pe-cyan);
+            font-weight: 600;
         }
 
-        /* Component Grid */
-        .component-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 20px;
-            margin: 25px 0;
+        tr:hover {
+            background: rgba(255, 255, 255, 0.05);
         }
 
-        .component-card {
-            background: #1a1a1a;
-            padding: 20px;
+        /* Code Blocks */
+        .code-block {
+            background: #0d1117;
+            border: 1px solid #30363d;
             border-radius: 8px;
-            border: 2px solid #333;
-            transition: all 0.3s ease;
-        }
-
-        .component-card:hover {
-            border-color: #0066FF;
-            transform: translateY(-4px);
-        }
-
-        .component-card h4 {
-            color: #0066FF;
-            font-size: 16px;
-            margin-bottom: 10px;
-        }
-
-        .component-card p {
-            font-size: 14px;
+            padding: 1.5rem;
+            margin: 1.5rem 0;
+            overflow-x: auto;
+            font-family: 'Fira Code', 'Consolas', monospace;
+            line-height: 1.6;
+            white-space: pre-wrap;
+            font-size: 0.9rem;
             color: #ccc;
-            margin-bottom: 12px;
-        }
-
-        .component-card code {
-            display: block;
-            background: #0a0a0a;
-            padding: 10px;
-            border-radius: 4px;
-            font-size: 13px;
-            color: #00D9FF;
-            font-family: 'Courier New', monospace;
-        }
-
-        /* Steps */
-        .steps {
-            margin: 25px 0;
         }
 
-        .step {
-            display: flex;
-            gap: 20px;
-            margin-bottom: 25px;
-            padding: 20px;
-            background: #1a1a1a;
+        /* Info Boxes */
+        .info-box {
+            background: linear-gradient(135deg, rgba(0, 217, 255, 0.1), rgba(176, 125, 255, 0.1));
+            border-left: 4px solid var(--pe-cyan);
             border-radius: 8px;
-            border-left: 4px solid #0066FF;
+            padding: 1.5rem;
+            margin: 1.5rem 0;
         }
 
-        .step-number {
-            flex-shrink: 0;
-            width: 40px;
-            height: 40px;
-            background: #0066FF;
-            color: #fff;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
+        .box-title {
             font-weight: 700;
-            font-size: 18px;
+            color: var(--pe-cyan);
+            margin-bottom: 0.75rem;
+            font-size: 1.1rem;
         }
 
-        .step-content h4 {
-            color: #00D9FF;
-            font-size: 16px;
-            margin-bottom: 8px;
+        .box-content {
+            color: #d0d7de;
+            line-height: 1.7;
         }
 
-        .step-content p {
-            font-size: 14px;
-            color: #ccc;
+        /* Interview Box */
+        .interview-box {
+            background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(163, 113, 247, 0.1));
+            border-left: 4px solid #ff6b35;
+            border-radius: 8px;
+            padding: 1.5rem;
+            margin: 1.5rem 0;
         }
 
-        /* Use Cases */
-        .use-case-section {
-            margin: 30px 0;
+        /* Callouts */
+        .callout {
+            border-radius: 8px;
+            padding: 1rem 1.5rem;
+            margin: 1.5rem 0;
+            border-left: 4px solid;
         }
 
-        .use-case-section h4 {
-            color: #0066FF;
-            font-size: 18px;
-            margin-bottom: 15px;
+        .callout.tip {
+            background: rgba(46, 204, 113, 0.1);
+            border-color: #2ecc71;
         }
 
-        .use-case-list {
-            list-style: none;
-            padding-left: 0;
+        .callout.warning {
+            background: rgba(255, 193, 7, 0.1);
+            border-color: #ffc107;
         }
 
-        .use-case-list li {
-            padding: 12px 15px;
-            background: #1a1a1a;
-            border-left: 3px solid #00D9FF;
-            margin-bottom: 10px;
-            border-radius: 4px;
-            font-size: 14px;
+        .callout.insight {
+            background: rgba(0, 217, 255, 0.1);
+            border-color: var(--pe-cyan);
         }
 
-        /* Checklist */
-        .checklist {
-            list-style: none;
-            margin: 20px 0;
+        .callout-title {
+            font-weight: 700;
+            margin-bottom: 0.5rem;
         }
 
-        .checklist li {
-            padding: 12px;
-            margin-bottom: 8px;
-            background: #1a1a1a;
-            border-radius: 6px;
-            font-size: 14px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 12px;
+        /* Comparison */
+        .comparison {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1.5rem;
+            margin: 1.5rem 0;
         }
 
-        .checklist li:hover {
-            background: #222;
+        .comparison-bad {
+            background: rgba(255, 60, 60, 0.1);
+            border: 1px solid rgba(255, 60, 60, 0.3);
+            border-radius: 8px;
+            padding: 1.5rem;
         }
 
-        .checklist li::before {
-            content: '☐';
-            font-size: 20px;
-            color: #666;
+        .comparison-good {
+            background: rgba(0, 255, 136, 0.1);
+            border: 1px solid rgba(0, 255, 136, 0.3);
+            border-radius: 8px;
+            padding: 1.5rem;
         }
 
-        .checklist li.checked::before {
-            content: '✓';
-            color: #00FF88;
+        strong {
+            color: var(--pe-cyan);
         }
 
-        .checklist li.checked {
-            opacity: 0.6;
-            text-decoration: line-through;
+        .hidden {
+            display: none;
         }
 
-        /* Responsive */
         @media (max-width: 768px) {
-            .sidebar {
-                width: 100%;
-                position: relative;
-                height: auto;
-                border-right: none;
-                border-bottom: 1px solid #333;
-            }
-
-            .main-content {
-                margin-left: 0;
-                padding: 20px;
+            header h1 {
+                font-size: 2rem;
             }
 
-            .prompt-builder,
-            .comparison,
-            .component-grid {
+            .comparison {
                 grid-template-columns: 1fr;
             }
 
-            .section-header h2 {
-                font-size: 28px;
+            .modules-grid {
+                grid-template-columns: 1fr;
             }
         }
-
-        /* Template Library */
-        .template-library {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 15px;
-            margin: 25px 0;
-        }
-
-        .template-item {
-            background: #1a1a1a;
-            padding: 18px;
-            border-radius: 8px;
-            border: 2px solid #333;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .template-item:hover {
-            border-color: #0066FF;
-            background: #222;
-        }
-
-        .template-item h5 {
-            color: #00D9FF;
-            font-size: 15px;
-            margin-bottom: 10px;
-        }
-
-        .template-item pre {
-            background: #0a0a0a;
-            padding: 12px;
-            border-radius: 4px;
-            font-size: 12px;
-            color: #ccc;
-            overflow-x: auto;
-            white-space: pre-wrap;
-        }
-
-        /* Practice Challenge */
-        .challenge-box {
-            background: linear-gradient(135deg, #0066FF22, #00D9FF22);
-            border: 2px solid #0066FF;
-            border-radius: 12px;
-            padding: 30px;
-            margin: 30px 0;
-        }
-
-        .challenge-box h3 {
-            color: #00D9FF;
-            margin-bottom: 15px;
-        }
-
-        .challenge-prompt {
-            background: #0a0a0a;
-            padding: 20px;
-            border-radius: 8px;
-            margin: 15px 0;
-            font-size: 14px;
-            color: #ccc;
-        }
-
-        .feedback {
-            background: #1a1a1a;
-            padding: 15px;
-            border-radius: 8px;
-            margin-top: 15px;
-            display: none;
-        }
-
-        .feedback.show {
-            display: block;
-            animation: slideDown 0.3s ease;
-        }
-
-        @keyframes slideDown {
-            from { opacity: 0; transform: translateY(-10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        /* Scenario Selector */
-        .scenario-selector {
-            display: flex;
-            gap: 12px;
-            margin: 20px 0;
-            flex-wrap: wrap;
-        }
-
-        .scenario-btn {
-            padding: 10px 18px;
-            background: #1a1a1a;
-            border: 2px solid #333;
-            border-radius: 8px;
-            color: #fff;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 14px;
-        }
-
-        .scenario-btn:hover {
-            border-color: #0066FF;
-            background: #222;
-        }
-
-        .scenario-btn.active {
-            border-color: #0066FF;
-            background: #0066FF22;
-            color: #00D9FF;
-        }
-
-        .hidden {
-            display: none;
-        }
     </style>
 </head>
-<body>
-    <div class="app-container">
-        <!-- Sidebar -->
-        <aside class="sidebar">
-            <div class="sidebar-header">
-                <h1>Prompt Engineering</h1>
-                <p>Master the Art of AI Communication</p>
-                <div class="progress-bar">
-                    <div class="progress-fill" id="progressBar"></div>
-                </div>
-            </div>
-            <ul class="topic-list" id="topicList"></ul>
-        </aside>
-
-        <!-- Main Content -->
-        <main class="main-content">
-            <!-- Topic 1: Introduction -->
-            <section class="content-section active" id="topic-1">
-                <div class="section-header">
-                    <h2>Introduction to Prompt Engineering</h2>
-                    <p class="subtitle">What Is It and Why Does It Matter?</p>
-                    <p class="description">Learn the fundamentals of prompt engineering and why it's crucial in the AI era</p>
-                </div>
-
-                <div class="card">
-                    <h3>What is Prompt Engineering?</h3>
-                    <p>Prompt engineering is the art of writing clear, specific instructions for AI models to produce desired outputs. Think of it as learning to communicate effectively with an intelligent assistant.</p>
-                    <p>Just like how you'd give detailed instructions to a colleague for important work, prompt engineering teaches you to craft precise, contextual requests that help AI understand exactly what you need.</p>
-                </div>
-
-                <div class="callout callout-insight">
-                    <strong>💡 Insight:</strong> The difference between a vague and specific prompt can be 10x in output quality
-                </div>
-
-                <div class="card">
-                    <h3>Real-World Analogy</h3>
-                    <p><strong>Ordering Food:</strong></p>
-                    <div class="comparison">
-                        <div class="comparison-item bad">
-                            <h4>❌ Vague Order</h4>
-                            <p>"Give me something to eat."</p>
-                            <p style="margin-top: 10px; font-size: 13px; color: #888;">Result: You might get anything - could be great, could be terrible, probably not what you wanted.</p>
-                        </div>
-                        <div class="comparison-item good">
-                            <h4>✓ Detailed Order</h4>
-                            <p>"I'd like a medium pepperoni pizza with thin crust, extra cheese, and light sauce. Please deliver it to 123 Main St by 7 PM."</p>
-                            <p style="margin-top: 10px; font-size: 13px; color: #888;">Result: You get exactly what you wanted, when you wanted it.</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="callout callout-tip">
-                    <strong>✅ Tip:</strong> AI models don't read minds—be explicit about what you want
-                </div>
-
-                <div class="card">
-                    <h3>Why Does It Matter?</h3>
-                    <p>In today's AI-powered world, the ability to communicate effectively with AI systems is becoming as important as traditional communication skills. Good prompt engineering helps you:</p>
-                    <ul style="margin-left: 20px; margin-top: 10px; color: #ccc;">
-                        <li style="margin-bottom: 8px;">Save time by getting better results on the first try</li>
-                        <li style="margin-bottom: 8px;">Unlock advanced AI capabilities for complex tasks</li>
-                        <li style="margin-bottom: 8px;">Reduce errors and misunderstandings</li>
-                        <li style="margin-bottom: 8px;">Boost productivity across all domains</li>
-                    </ul>
-                </div>
-
-                <div class="card">
-                    <h3>Key Applications</h3>
-                    <div class="use-case-section">
-                        <ul class="use-case-list">
-                            <li>📧 Email writing and summarization</li>
-                            <li>📊 Report generation and data analysis</li>
-                            <li>💻 Code generation and debugging</li>
-                            <li>✍️ Creative writing and content creation</li>
-                            <li>🎓 Educational content and explanations</li>
-                        </ul>
-                    </div>
-                </div>
-
-                <div class="callout callout-mistake">
-                    <strong>⚠️ Common Mistake:</strong> Assuming AI knows what you want without explicit instructions
-                </div>
-
-                <div class="card">
-                    <h3>Summary &amp; Key Takeaways</h3>
-                    <ul class="checklist">
-                        <li>Prompt engineering is about clear AI communication</li>
-                        <li>Specificity dramatically improves output quality</li>
-                        <li>It's a learnable skill that improves with practice</li>
-                        <li>Applications span professional, technical, and creative domains</li>
-                    </ul>
-                    <div class="btn-group" style="margin-top: 20px;">
-                        <button class="btn btn-primary" onclick="startPractice(1)">Try Practice Challenge</button>
-                    </div>
-                </div>
-
-                <div class="nav-buttons">
-                    <button class="btn btn-secondary" disabled>← Previous</button>
-                    <button class="btn btn-primary" onclick="navigateTo(2)">Next: Prompt Structure →</button>
-                </div>
-            </section>
-
-            <!-- Topic 2: Prompt Structure -->
-            <section class="content-section" id="topic-2">
-                <div class="section-header">
-                    <h2>Prompt Structure: The Building Blocks</h2>
-                    <p class="subtitle">Role, Context, Task, and Format</p>
-                    <p class="description">Master the four key components of effective prompts</p>
-                </div>
-
-                <div class="card">
-                    <h3>The Four Components</h3>
-                    <p>Every effective prompt has four essential building blocks. Understanding and using these components will transform your AI interactions.</p>
-                </div>
-
-                <div class="component-grid">
-                    <div class="component-card">
-                        <h4>1. Role</h4>
-                        <p>What persona should the AI adopt?</p>
-                        <code>"You are an expert marketing consultant"</code>
-                    </div>
-                    <div class="component-card">
-                        <h4>2. Context</h4>
-                        <p>What background information is important?</p>
-                        <code>"We just launched a new coffee shop in Manhattan"</code>
-                    </div>
-                    <div class="component-card">
-                        <h4>3. Task</h4>
-                        <p>What exactly should the AI do?</p>
-                        <code>"Generate 5 creative marketing strategies"</code>
-                    </div>
-                    <div class="component-card">
-                        <h4>4. Format</h4>
-                        <p>How should the output be structured?</p>
-                        <code>"Provide as bullet points with pros and cons"</code>
-                    </div>
-                </div>
-
-                <div class="callout callout-insight">
-                    <strong>💡 Insight:</strong> Context is king—more information usually means better output
-                </div>
-
-                <div class="interactive-demo">
-                    <h3 style="color: #00D9FF; margin-bottom: 20px;">Interactive Prompt Builder</h3>
-                    <p style="color: #888; margin-bottom: 15px;">Fill in each component and watch the quality grade update in real-time:</p>
-                    
-                    <div class="prompt-builder">
-                        <div class="prompt-component">
-                            <h4>Role</h4>
-                            <textarea id="roleInput" placeholder="e.g., You are a senior software engineer..." oninput="updatePromptQuality()"></textarea>
-                        </div>
-                        <div class="prompt-component">
-                            <h4>Context</h4>
-                            <textarea id="contextInput" placeholder="e.g., Working on a mobile app for..." oninput="updatePromptQuality()"></textarea>
-                        </div>
-                        <div class="prompt-component">
-                            <h4>Task</h4>
-                            <textarea id="taskInput" placeholder="e.g., Write a function that..." oninput="updatePromptQuality()"></textarea>
-                        </div>
-                        <div class="prompt-component">
-                            <h4>Format</h4>
-                            <textarea id="formatInput" placeholder="e.g., Provide code with comments..." oninput="updatePromptQuality()"></textarea>
-                        </div>
-                        <div class="output-preview">
-                            <span class="quality-grade grade-poor" id="qualityGrade">Quality: Poor</span>
-                            <h4 style="color: #00D9FF; margin-bottom: 10px;">Combined Prompt:</h4>
-                            <p id="combinedPrompt" style="color: #ccc; font-size: 14px;">Start filling in the components above...</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="callout callout-tip">
-                    <strong>✅ Tip:</strong> Start with clear action verbs: Write, Analyze, Explain, Generate, Debug
-                </div>
-
-                <div class="canvas-container">
-                    <canvas id="structureCanvas"></canvas>
-                </div>
-
-                <div class="card">
-                    <h3>Summary &amp; Key Takeaways</h3>
-                    <ul class="checklist">
-                        <li>All four components work together for best results</li>
-                        <li>Role sets the AI's perspective and expertise level</li>
-                        <li>Context provides necessary background information</li>
-                        <li>Task defines the specific action you want</li>
-                        <li>Format ensures output matches your needs</li>
-                    </ul>
-                </div>
-
-                <div class="nav-buttons">
-                    <button class="btn btn-secondary" onclick="navigateTo(1)">← Previous</button>
-                    <button class="btn btn-primary" onclick="navigateTo(3)">Next: Clarity &amp; Specificity →</button>
-                </div>
-            </section>
-
-            <!-- Topic 3: Clarity and Specificity -->
-            <section class="content-section" id="topic-3">
-                <div class="section-header">
-                    <h2>Clarity and Specificity</h2>
-                    <p class="subtitle">Writing Precise Prompts</p>
-                    <p class="description">Learn how to eliminate ambiguity and get better results</p>
-                </div>
 
-                <div class="card">
-                    <h3>Why Specificity Matters</h3>
-                    <p>Vague prompts leave too much room for interpretation. The AI has to guess what you want, and guesses are rarely perfect. Specific prompts eliminate ambiguity and guide the AI to produce exactly what you need.</p>
-                </div>
-
-                <div class="callout callout-insight">
-                    <strong>💡 Insight:</strong> Testing and iteration is key to prompt mastery
-                </div>
-
-                <div class="card">
-                    <h3>Before &amp; After Examples</h3>
-                    <div class="comparison" style="margin-top: 20px;">
-                        <div class="comparison-item bad">
-                            <h4>❌ Vague Prompt</h4>
-                            <p style="font-family: monospace; font-size: 13px;">"Write something about AI"</p>
-                        </div>
-                        <div class="comparison-item good">
-                            <h4>✓ Specific Prompt</h4>
-                            <p style="font-family: monospace; font-size: 13px;">"Write a 200-word beginner's guide explaining how machine learning works, using a coffee shop analogy"</p>
-                        </div>
-                    </div>
-
-                    <div class="comparison" style="margin-top: 20px;">
-                        <div class="comparison-item bad">
-                            <h4>❌ Vague Prompt</h4>
-                            <p style="font-family: monospace; font-size: 13px;">"Fix my code"</p>
-                        </div>
-                        <div class="comparison-item good">
-                            <h4>✓ Specific Prompt</h4>
-                            <p style="font-family: monospace; font-size: 13px;">"I have a Python function that calculates factorial but it returns wrong results for numbers &gt; 10. Here's the code: [code]. What's the bug and how do I fix it?"</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="callout callout-mistake">
-                    <strong>⚠️ Common Mistake:</strong> Not specifying output format, then being surprised by format
-                </div>
-
-                <div class="interactive-demo">
-                    <h3 style="color: #00D9FF; margin-bottom: 20px;">Specificity Slider</h3>
-                    <p style="color: #888; margin-bottom: 15px;">Adjust the specificity level and see how the prompt improves:</p>
-                    
-                    <div class="slider-control">
-                        <label>Specificity Level: <span class="slider-value" id="specificityValue">1</span>/5</label>
-                        <input type="range" min="1" max="5" value="1" class="slider" id="specificitySlider" oninput="updateSpecificity()">
-                    </div>
-
-                    <div style="margin-top: 25px; background: #1a1a1a; padding: 20px; border-radius: 8px;">
-                        <h4 style="color: #00D9FF; margin-bottom: 12px;">Current Prompt:</h4>
-                        <p id="specificityPrompt" style="color: #ccc; font-size: 14px; line-height: 1.8;"></p>
-                        <div style="margin-top: 15px; padding: 12px; background: #0a0a0a; border-radius: 6px;">
-                            <strong style="color: #00D9FF;">Expected Quality:</strong>
-                            <span id="specificityQuality" style="margin-left: 10px;"></span>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="callout callout-tip">
-                    <strong>✅ Tip:</strong> Use phrases like 'For a 10th-grade student' to guide tone and complexity
-                </div>
-
-                <div class="card">
-                    <h3>Key Elements of Specific Prompts</h3>
-                    <div class="steps">
-                        <div class="step">
-                            <div class="step-number">1</div>
-                            <div class="step-content">
-                                <h4>Define Clear Objectives</h4>
-                                <p>State exactly what you want to achieve</p>
-                            </div>
-                        </div>
-                        <div class="step">
-                            <div class="step-number">2</div>
-                            <div class="step-content">
-                                <h4>Set Constraints</h4>
-                                <p>Specify length, style, tone, or other limitations</p>
-                            </div>
-                        </div>
-                        <div class="step">
-                            <div class="step-number">3</div>
-                            <div class="step-content">
-                                <h4>Provide Examples</h4>
-                                <p>Show the AI what good output looks like</p>
-                            </div>
-                        </div>
-                        <div class="step">
-                            <div class="step-number">4</div>
-                            <div class="step-content">
-                                <h4>Specify Audience</h4>
-                                <p>Indicate who will consume the output</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="card">
-                    <h3>Summary &amp; Key Takeaways</h3>
-                    <ul class="checklist">
-                        <li>Vague prompts lead to unpredictable results</li>
-                        <li>Add specific details: length, format, style, audience</li>
-                        <li>Include examples when possible</li>
-                        <li>Set clear constraints and boundaries</li>
-                        <li>Think about edge cases and clarify them</li>
-                    </ul>
-                </div>
-
-                <div class="nav-buttons">
-                    <button class="btn btn-secondary" onclick="navigateTo(2)">← Previous</button>
-                    <button class="btn btn-primary" onclick="navigateTo(4)">Next: Context &amp; Background →</button>
-                </div>
-            </section>
-
-            <!-- Topic 4: Context and Background -->
-            <section class="content-section" id="topic-4">
-                <div class="section-header">
-                    <h2>Context and Background</h2>
-                    <p class="subtitle">Providing Enough Information</p>
-                    <p class="description">Give AI the full picture for better outputs</p>
-                </div>
-
-                <div class="card">
-                    <h3>Why Context Matters</h3>
-                    <p>Context is the background information that helps AI understand the bigger picture. Without proper context, even the most specific task instructions can lead to irrelevant results.</p>
-                    <p style="margin-top: 15px;">Think of context as the frame around a painting—it helps define boundaries and provides essential information for interpretation.</p>
-                </div>
-
-                <div class="callout callout-insight">
-                    <strong>💡 Insight:</strong> Format specification prevents surprises in AI responses
-                </div>
-
-                <div class="card">
-                    <h3>Essential Context Elements</h3>
-                    <div class="component-grid">
-                        <div class="component-card">
-                            <h4>📄 Relevant Documents</h4>
-                            <p>Include or reference important files, data, or prior conversations</p>
-                        </div>
-                        <div class="component-card">
-                            <h4>🎯 Target Audience</h4>
-                            <p>Specify who will use or read the output</p>
-                        </div>
-                        <div class="component-card">
-                            <h4>⚙️ Constraints</h4>
-                            <p>Mention technical, budget, or time limitations</p>
-                        </div>
-                        <div class="component-card">
-                            <h4>🎨 Brand Voice</h4>
-                            <p>Describe tone, style, or brand guidelines</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="callout callout-tip">
-                    <strong>✅ Tip:</strong> Include examples of good output in your prompt
-                </div>
-
-                <div class="card">
-                    <h3>Context Levels Comparison</h3>
-                    <div class="interactive-demo">
-                        <div class="scenario-selector">
-                            <button class="scenario-btn active" onclick="showContextExample('minimal')">Minimal Context</button>
-                            <button class="scenario-btn" onclick="showContextExample('moderate')">Moderate Context</button>
-                            <button class="scenario-btn" onclick="showContextExample('rich')">Rich Context</button>
-                        </div>
-
-                        <div id="contextExample" style="margin-top: 20px; background: #1a1a1a; padding: 20px; border-radius: 8px;">
-                            <h4 style="color: #00D9FF; margin-bottom: 12px;">Prompt Example:</h4>
-                            <p id="contextPromptText" style="color: #ccc; line-height: 1.8;"></p>
-                            <div style="margin-top: 15px; padding: 12px; background: #0a0a0a; border-radius: 6px;">
-                                <strong style="color: #00D9FF;">Output Quality:</strong>
-                                <span id="contextQuality" style="margin-left: 10px;"></span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="callout callout-mistake">
-                    <strong>⚠️ Common Mistake:</strong> Providing too little context about your problem
-                </div>
-
-                <div class="card">
-                    <h3>Best Practices for Context</h3>
-                    <ul style="margin-left: 20px; margin-top: 15px; color: #ccc;">
-                        <li style="margin-bottom: 12px;"><strong style="color: #00D9FF;">Be comprehensive but focused:</strong> Include all relevant information without overwhelming details</li>
-                        <li style="margin-bottom: 12px;"><strong style="color: #00D9FF;">Front-load important context:</strong> Put crucial information at the beginning</li>
-                        <li style="margin-bottom: 12px;"><strong style="color: #00D9FF;">Use examples:</strong> Show the AI what success looks like</li>
-                        <li style="margin-bottom: 12px;"><strong style="color: #00D9FF;">Mention constraints:</strong> Be upfront about limitations</li>
-                        <li style="margin-bottom: 12px;"><strong style="color: #00D9FF;">Define your audience:</strong> Specify who will consume the output</li>
-                    </ul>
-                </div>
-
-                <div class="canvas-container">
-                    <canvas id="contextCanvas"></canvas>
-                </div>
-
-                <div class="card">
-                    <h3>Summary &amp; Key Takeaways</h3>
-                    <ul class="checklist">
-                        <li>Context provides the frame for AI to understand your request</li>
-                        <li>Include relevant documents and background information</li>
-                        <li>Specify target audience and use cases</li>
-                        <li>Mention constraints and limitations upfront</li>
-                        <li>Provide examples of desired output when possible</li>
-                    </ul>
-                </div>
-
-                <div class="nav-buttons">
-                    <button class="btn btn-secondary" onclick="navigateTo(3)">← Previous</button>
-                    <button class="btn btn-primary" onclick="navigateTo(5)">Next: Output Format →</button>
-                </div>
-            </section>
-
-            <!-- Topic 5: Output Format -->
-            <section class="content-section" id="topic-5">
-                <div class="section-header">
-                    <h2>Output Format and Constraints</h2>
-                    <p class="subtitle">Specifying Desired Output</p>
-                    <p class="description">Control exactly how the AI structures its response</p>
-                </div>
-
-                <div class="card">
-                    <h3>Why Format Matters</h3>
-                    <p>Specifying the output format ensures you get results in a structure that's immediately useful. Without format guidance, AI might provide information in a way that requires significant reformatting.</p>
-                </div>
-
-                <div class="callout callout-tip">
-                    <strong>✅ Tip:</strong> Keep prompts focused on one main task
-                </div>
-
-                <div class="card">
-                    <h3>Common Output Formats</h3>
-                    <div class="component-grid">
-                        <div class="component-card">
-                            <h4>📝 Structured List</h4>
-                            <p>Organized points with clear hierarchy</p>
-                            <code>"Return as numbered list with brief explanations"</code>
-                        </div>
-                        <div class="component-card">
-                            <h4>📊 Table Format</h4>
-                            <p>Data organized in rows and columns</p>
-                            <code>"Create a comparison table with 3 columns: Feature, Pros, Cons"</code>
-                        </div>
-                        <div class="component-card">
-                            <h4>📖 Narrative</h4>
-                            <p>Flowing prose or storytelling format</p>
-                            <code>"Write as a 3-paragraph narrative explanation"</code>
-                        </div>
-                        <div class="component-card">
-                            <h4>💻 Code Block</h4>
-                            <p>Formatted code with explanations</p>
-                            <code>"Provide Python code with comments explaining each step"</code>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="callout callout-insight">
-                    <strong>💡 Insight:</strong> Save and reuse effective prompts as templates
-                </div>
-
-                <div class="interactive-demo">
-                    <h3 style="color: #00D9FF; margin-bottom: 20px;">Format Selector</h3>
-                    <p style="color: #888; margin-bottom: 15px;">Choose a format and see how to specify it in your prompt:</p>
-                    
-                    <div class="scenario-selector">
-                        <button class="scenario-btn active" onclick="showFormatExample('list')">List</button>
-                        <button class="scenario-btn" onclick="showFormatExample('table')">Table</button>
-                        <button class="scenario-btn" onclick="showFormatExample('narrative')">Narrative</button>
-                        <button class="scenario-btn" onclick="showFormatExample('code')">Code</button>
-                        <button class="scenario-btn" onclick="showFormatExample('json')">JSON</button>
-                    </div>
-
-                    <div id="formatExample" style="margin-top: 20px; background: #1a1a1a; padding: 20px; border-radius: 8px;">
-                        <h4 style="color: #00D9FF; margin-bottom: 12px;">Format Specification:</h4>
-                        <p id="formatPromptText" style="color: #ccc; line-height: 1.8; margin-bottom: 15px;"></p>
-                        <h4 style="color: #00D9FF; margin-bottom: 12px;">Example Output:</h4>
-                        <pre id="formatOutputExample" style="background: #0a0a0a; padding: 15px; border-radius: 6px; color: #ccc; overflow-x: auto;"></pre>
-                    </div>
-                </div>
-
-                <div class="callout callout-mistake">
-                    <strong>⚠️ Common Mistake:</strong> Asking too many things in one prompt
-                </div>
-
-                <div class="card">
-                    <h3>Setting Effective Constraints</h3>
-                    <div class="steps">
-                        <div class="step">
-                            <div class="step-number">1</div>
-                            <div class="step-content">
-                                <h4>Length Constraints</h4>
-                                <p>Specify word count, character limit, or number of items</p>
-                            </div>
-                        </div>
-                        <div class="step">
-                            <div class="step-number">2</div>
-                            <div class="step-content">
-                                <h4>Style Guidelines</h4>
-                                <p>Define tone, formality, and writing style</p>
-                            </div>
-                        </div>
-                        <div class="step">
-                            <div class="step-number">3</div>
-                            <div class="step-content">
-                                <h4>Structure Rules</h4>
-                                <p>Specify sections, headings, or organization</p>
-                            </div>
-                        </div>
-                        <div class="step">
-                            <div class="step-number">4</div>
-                            <div class="step-content">
-                                <h4>Content Boundaries</h4>
-                                <p>Define what to include or exclude</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="card">
-                    <h3>Summary &amp; Key Takeaways</h3>
-                    <ul class="checklist">
-                        <li>Always specify the desired output format</li>
-                        <li>Use clear format instructions (list, table, code, etc.)</li>
-                        <li>Set length and style constraints</li>
-                        <li>Define structure and organization upfront</li>
-                        <li>Provide format examples when needed</li>
-                    </ul>
-                </div>
-
-                <div class="nav-buttons">
-                    <button class="btn btn-secondary" onclick="navigateTo(4)">← Previous</button>
-                    <button class="btn btn-primary" onclick="navigateTo(6)">Next: Iterative Refinement →</button>
-                </div>
-            </section>
-
-            <!-- Topic 6: Iterative Refinement -->
-            <section class="content-section" id="topic-6">
-                <div class="section-header">
-                    <h2>Iterative Refinement</h2>
-                    <p class="subtitle">Testing and Improving Prompts</p>
-                    <p class="description">How to iterate and optimize your prompts through testing</p>
-                </div>
-
-                <div class="card">
-                    <h3>The Refinement Process</h3>
-                    <p>Perfect prompts are rarely written on the first try. Iterative refinement is the process of testing, evaluating, and improving your prompts based on actual results.</p>
-                    <p style="margin-top: 15px;">Think of it like cooking—you taste and adjust seasonings until it's just right.</p>
-                </div>
-
-                <div class="callout callout-insight">
-                    <strong>💡 Insight:</strong> Testing and iteration is key to prompt mastery
-                </div>
-
-                <div class="card">
-                    <h3>5-Step Refinement Process</h3>
-                    <div class="steps">
-                        <div class="step">
-                            <div class="step-number">1</div>
-                            <div class="step-content">
-                                <h4>Test Your Prompt</h4>
-                                <p>Run your prompt and get initial output</p>
-                            </div>
-                        </div>
-                        <div class="step">
-                            <div class="step-number">2</div>
-                            <div class="step-content">
-                                <h4>Evaluate Results</h4>
-                                <p>Does it meet your requirements? What's missing?</p>
-                            </div>
-                        </div>
-                        <div class="step">
-                            <div class="step-number">3</div>
-                            <div class="step-content">
-                                <h4>Refine</h4>
-                                <p>Add specificity, context, or better format instructions</p>
-                            </div>
-                        </div>
-                        <div class="step">
-                            <div class="step-number">4</div>
-                            <div class="step-content">
-                                <h4>Test Again</h4>
-                                <p>Compare new output with previous version</p>
-                            </div>
-                        </div>
-                        <div class="step">
-                            <div class="step-number">5</div>
-                            <div class="step-content">
-                                <h4>Repeat</h4>
-                                <p>Keep iterating until satisfied</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="callout callout-tip">
-                    <strong>✅ Tip:</strong> Keep a library of successful prompts for future use
-                </div>
-
-                <div class="canvas-container">
-                    <canvas id="refinementCanvas"></canvas>
-                </div>
-
-                <div class="callout callout-mistake">
-                    <strong>⚠️ Common Mistake:</strong> Not iterating or refining based on initial results
-                </div>
-
-                <div class="card">
-                    <h3>What to Look For When Evaluating</h3>
-                    <div class="component-grid">
-                        <div class="component-card">
-                            <h4>✓ Accuracy</h4>
-                            <p>Is the information correct and relevant?</p>
-                        </div>
-                        <div class="component-card">
-                            <h4>✓ Completeness</h4>
-                            <p>Did it cover everything you needed?</p>
-                        </div>
-                        <div class="component-card">
-                            <h4>✓ Format</h4>
-                            <p>Is it structured as you requested?</p>
-                        </div>
-                        <div class="component-card">
-                            <h4>✓ Tone & Style</h4>
-                            <p>Does it match your requirements?</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="interactive-demo">
-                    <h3 style="color: #00D9FF; margin-bottom: 20px;">Refinement Simulator</h3>
-                    <p style="color: #888; margin-bottom: 15px;">See how a prompt improves through iterations:</p>
-                    
-                    <div class="btn-group">
-                        <button class="btn btn-primary" onclick="showIteration(1)">Iteration 1</button>
-                        <button class="btn btn-primary" onclick="showIteration(2)">Iteration 2</button>
-                        <button class="btn btn-primary" onclick="showIteration(3)">Iteration 3 (Final)</button>
-                    </div>
-
-                    <div id="iterationDisplay" style="margin-top: 20px; background: #1a1a1a; padding: 20px; border-radius: 8px;">
-                        <h4 style="color: #00D9FF; margin-bottom: 12px;">Current Iteration:</h4>
-                        <p id="iterationPrompt" style="color: #ccc; line-height: 1.8; margin-bottom: 15px;"></p>
-                        <div style="padding: 12px; background: #0a0a0a; border-radius: 6px;">
-                            <strong style="color: #00D9FF;">Quality Score:</strong>
-                            <span id="iterationScore" style="margin-left: 10px;"></span>
-                        </div>
-                        <div id="iterationNotes" style="margin-top: 15px; padding: 12px; border-left: 3px solid #00D9FF; background: #0a0a0a;"></div>
-                    </div>
-                </div>
-
-                <div class="card">
-                    <h3>Summary &amp; Key Takeaways</h3>
-                    <ul class="checklist">
-                        <li>First attempts rarely produce perfect results</li>
-                        <li>Test, evaluate, refine, and repeat</li>
-                        <li>Look for accuracy, completeness, format, and style</li>
-                        <li>Keep successful prompts as templates</li>
-                        <li>Small tweaks can lead to big improvements</li>
-                    </ul>
-                </div>
-
-                <div class="nav-buttons">
-                    <button class="btn btn-secondary" onclick="navigateTo(5)">← Previous</button>
-                    <button class="btn btn-primary" onclick="navigateTo(7)">Next: Advanced Techniques →</button>
-                </div>
-            </section>
-
-            <!-- Topic 7: Advanced Techniques -->
-            <section class="content-section" id="topic-7">
-                <div class="section-header">
-                    <h2>Prompt Patterns and Techniques</h2>
-                    <p class="subtitle">Advanced Methods for Better Results</p>
-                    <p class="description">Learn professional techniques used by prompt engineering experts</p>
-                </div>
-
-                <div class="card">
-                    <h3>Advanced Prompt Techniques</h3>
-                    <p>Once you master the basics, these advanced techniques will help you unlock even more powerful AI capabilities.</p>
-                </div>
-
-                <div class="component-grid">
-                    <div class="component-card">
-                        <h4>🧠 Chain-of-Thought</h4>
-                        <p>Ask AI to show its reasoning step-by-step</p>
-                        <code>"Think through this step-by-step before answering"</code>
-                    </div>
-                    <div class="component-card">
-                        <h4>📚 Few-Shot Examples</h4>
-                        <p>Provide examples of desired output format</p>
-                        <code>"Here are 3 examples: [examples]. Now do this:"</code>
-                    </div>
-                    <div class="component-card">
-                        <h4>⚙️ System Prompts</h4>
-                        <p>Set AI behavior and personality upfront</p>
-                        <code>"You are a helpful tutor for 10th-grade students"</code>
-                    </div>
-                    <div class="component-card">
-                        <h4>🎯 Constraints</h4>
-                        <p>Limit scope and manage complexity</p>
-                        <code>"Keep under 100 words, use simple language"</code>
-                    </div>
-                </div>
-
-                <div class="callout callout-insight">
-                    <strong>💡 Insight:</strong> Chain-of-thought prompting can improve reasoning by 50% or more
-                </div>
-
-                <div class="card">
-                    <h3>Technique Deep Dive: Chain-of-Thought</h3>
-                    <p>Chain-of-thought prompting asks the AI to show its work, which leads to better reasoning and more accurate results.</p>
-                    
-                    <div class="comparison" style="margin-top: 20px;">
-                        <div class="comparison-item bad">
-                            <h4>❌ Without Chain-of-Thought</h4>
-                            <p style="font-family: monospace; font-size: 13px; margin-bottom: 10px;">"What's 15% of 240?"</p>
-                            <p style="font-size: 13px; color: #888;">AI might give answer without showing work, making errors harder to spot.</p>
-                        </div>
-                        <div class="comparison-item good">
-                            <h4>✓ With Chain-of-Thought</h4>
-                            <p style="font-family: monospace; font-size: 13px; margin-bottom: 10px;">"What's 15% of 240? Think through this step-by-step."</p>
-                            <p style="font-size: 13px; color: #888;">AI shows: 1) 10% of 240 = 24, 2) 5% = half of 10% = 12, 3) 15% = 24 + 12 = 36</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="callout callout-tip">
-                    <strong>✅ Tip:</strong> Use few-shot examples when the output format is complex or unusual
-                </div>
-
-                <div class="card">
-                    <h3>Template Library</h3>
-                    <p style="margin-bottom: 20px;">Ready-to-use prompt templates for common scenarios:</p>
-                    
-                    <div class="template-library">
-                        <div class="template-item" onclick="copyTemplate(this)">
-                            <h5>📧 Email Writing</h5>
-                            <pre>You are a professional email writer.
-
-Write a [formal/casual] email to [recipient] about [topic].
-
-Tone: [professional/friendly]
-Length: [brief/detailed]
-Action needed: [yes/no]</pre>
-                        </div>
-                        <div class="template-item" onclick="copyTemplate(this)">
-                            <h5>💻 Code Generation</h5>
-                            <pre>You are an expert [language] developer.
-
-Write a function that [task description].
-
-Requirements:
-- [requirement 1]
-- [requirement 2]
-
-Provide code with comments.</pre>
-                        </div>
-                        <div class="template-item" onclick="copyTemplate(this)">
-                            <h5>📊 Data Analysis</h5>
-                            <pre>Analyze this data: [data]
-
-Provide:
-1. Key insights
-2. Trends or patterns
-3. Recommendations
-
-Format as bullet points.</pre>
-                        </div>
-                        <div class="template-item" onclick="copyTemplate(this)">
-                            <h5>✍️ Content Creation</h5>
-                            <pre>Write a [blog post/article] about [topic].
-
-Audience: [description]
-Tone: [conversational/professional]
-Length: [word count]
-
-Include:
-- Introduction
-- 3-5 main points
-- Conclusion</pre>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="callout callout-mistake">
-                    <strong>⚠️ Common Mistake:</strong> Using advanced techniques when simple prompts would work better
-                </div>
-
-                <div class="canvas-container">
-                    <canvas id="techniquesCanvas"></canvas>
-                </div>
-
-                <div class="card">
-                    <h3>Summary &amp; Key Takeaways</h3>
-                    <ul class="checklist">
-                        <li>Chain-of-thought improves reasoning quality</li>
-                        <li>Few-shot examples guide output format</li>
-                        <li>System prompts set overall behavior</li>
-                        <li>Constraints keep responses focused</li>
-                        <li>Use templates to save time and ensure consistency</li>
-                    </ul>
-                </div>
-
-                <div class="nav-buttons">
-                    <button class="btn btn-secondary" onclick="navigateTo(6)">← Previous</button>
-                    <button class="btn btn-primary" onclick="navigateTo(8)">Next: Real-World Applications →</button>
-                </div>
-            </section>
-
-            <!-- Topic 8: Real-World Applications -->
-            <section class="content-section" id="topic-8">
-                <div class="section-header">
-                    <h2>Real-World Applications</h2>
-                    <p class="subtitle">Putting It All Together</p>
-                    <p class="description">See prompt engineering in action across different domains</p>
-                </div>
-
-                <div class="card">
-                    <h3>Prompt Engineering in Practice</h3>
-                    <p>Now that you've learned the fundamentals and advanced techniques, let's explore how prompt engineering is applied across different real-world domains.</p>
-                </div>
-
-                <div class="card">
-                    <h3>Professional Writing</h3>
-                    <div class="use-case-section">
-                        <ul class="use-case-list">
-                            <li>Email summarization and drafting</li>
-                            <li>Report generation</li>
-                            <li>Meeting notes synthesis</li>
-                        </ul>
-                    </div>
-                    <div class="callout callout-tip" style="margin-top: 15px;">
-                        <strong>✅ Example:</strong> "Summarize this 3-page meeting transcript into 5 key action items with owners and deadlines. Format as a table."
-                    </div>
-                </div>
-
-                <div class="card">
-                    <h3>Technical Applications</h3>
-                    <div class="use-case-section">
-                        <ul class="use-case-list">
-                            <li>Code generation and debugging</li>
-                            <li>API documentation creation</li>
-                            <li>Technical explanation simplification</li>
-                        </ul>
-                    </div>
-                    <div class="callout callout-tip" style="margin-top: 15px;">
-                        <strong>✅ Example:</strong> "I have a React component that's re-rendering unnecessarily. Here's the code: [code]. Identify the issue and provide an optimized version with explanations."
-                    </div>
-                </div>
-
-                <div class="card">
-                    <h3>Creative Work</h3>
-                    <div class="use-case-section">
-                        <ul class="use-case-list">
-                            <li>Marketing copy creation</li>
-                            <li>Brainstorming ideas</li>
-                            <li>Content outline generation</li>
-                        </ul>
-                    </div>
-                    <div class="callout callout-tip" style="margin-top: 15px;">
-                        <strong>✅ Example:</strong> "Generate 10 creative Instagram post ideas for a sustainable fashion brand targeting Gen Z. Include post caption and hashtag suggestions."
-                    </div>
-                </div>
-
-                <div class="card">
-                    <h3>Educational Content</h3>
-                    <div class="use-case-section">
-                        <ul class="use-case-list">
-                            <li>Concept explanation</li>
-                            <li>Quiz generation</li>
-                            <li>Study guide creation</li>
-                        </ul>
-                    </div>
-                    <div class="callout callout-tip" style="margin-top: 15px;">
-                        <strong>✅ Example:</strong> "Explain photosynthesis to a 7th grader using an analogy they can relate to. Keep it under 150 words."
-                    </div>
-                </div>
-
-                <div class="callout callout-insight">
-                    <strong>💡 Insight:</strong> The best prompts combine multiple techniques based on the specific use case
-                </div>
-
-                <div class="challenge-box">
-                    <h3>🎯 Final Challenge: Build Your Own Prompt</h3>
-                    <p style="color: #ccc; margin-bottom: 15px;">Choose a scenario and build a complete prompt using everything you've learned:</p>
-                    
-                    <div class="scenario-selector">
-                        <button class="scenario-btn active" onclick="setChallenge('email')">Email Writing</button>
-                        <button class="scenario-btn" onclick="setChallenge('code')">Coding Help</button>
-                        <button class="scenario-btn" onclick="setChallenge('creative')">Creative Writing</button>
-                        <button class="scenario-btn" onclick="setChallenge('analysis')">Data Analysis</button>
-                    </div>
-
-                    <div class="challenge-prompt" id="challengeScenario" style="margin-top: 15px;">
-                        Scenario will appear here...
-                    </div>
-
-                    <textarea id="challengeInput" placeholder="Build your prompt here..." style="width: 100%; min-height: 150px; background: #0a0a0a; border: 2px solid #333; color: #fff; padding: 15px; border-radius: 8px; font-size: 14px; margin-top: 15px; font-family: inherit;"></textarea>
-
-                    <div class="btn-group" style="margin-top: 15px;">
-                        <button class="btn btn-primary" onclick="evaluateChallenge()">Evaluate My Prompt</button>
-                        <button class="btn btn-secondary" onclick="resetChallenge()">Reset</button>
-                    </div>
-
-                    <div class="feedback" id="challengeFeedback"></div>
-                </div>
-
-                <div class="card">
-                    <h3>Congratulations! 🎉</h3>
-                    <p>You've completed the Prompt Engineering Masterclass! You now have the knowledge and tools to communicate effectively with AI systems.</p>
-                    
-                    <div style="margin-top: 20px; padding: 20px; background: linear-gradient(135deg, #0066FF22, #00D9FF22); border-radius: 8px;">
-                        <h4 style="color: #00D9FF; margin-bottom: 15px;">What You've Learned:</h4>
-                        <ul class="checklist">
-                            <li>The four components of effective prompts</li>
-                            <li>How to write clear and specific instructions</li>
-                            <li>The importance of context and background</li>
-                            <li>How to specify output formats</li>
-                            <li>Iterative refinement techniques</li>
-                            <li>Advanced prompt patterns</li>
-                            <li>Real-world applications across domains</li>
-                        </ul>
-                    </div>
-
-                    <div class="btn-group" style="margin-top: 20px;">
-                        <button class="btn btn-primary" onclick="navigateTo(1)">↻ Review from Beginning</button>
-                        <button class="btn btn-secondary" onclick="alert('Export feature coming soon!')">📄 Export Summary</button>
-                    </div>
-                </div>
-
-                <div class="nav-buttons">
-                    <button class="btn btn-secondary" onclick="navigateTo(7)">← Previous</button>
-                    <button class="btn btn-primary" onclick="navigateTo(1)">↻ Start Over</button>
-                </div>
-            </section>
-        </main>
+<body>
+    <div class="container">
+        <div class="dashboard active" id="dashboard">
+            <header>
+                <h1>🧠 Prompt Engineering Masterclass</h1>
+                <p class="subtitle">From Fundamentals to Provider Mastery — Claude · Gemini · GPT · Advanced Techniques
+                </p>
+            </header>
+            <div class="modules-grid" id="modulesGrid"></div>
+        </div>
+        <div id="modulesContainer"></div>
     </div>
-
     <script src="app.js"></script>
 </body>
+
 </html>

shared/js/search.js

@@ -144,7 +144,11 @@
                 { title: 'Zero-Shot Prompting', section: 'topic-2' },
                 { title: 'Few-Shot Prompting', section: 'topic-3' },
                 { title: 'Chain of Thought', section: 'topic-4' },
-                { title: 'System Prompts', section: 'topic-5' }
+                { title: 'System Prompts', section: 'topic-5' },
+                { title: 'Claude Prompt Mastery', section: 'topic-9' },
+                { title: 'Google Gemini Prompting', section: 'topic-10' },
+                { title: 'OpenAI GPT Best Practices', section: 'topic-11' },
+                { title: 'Provider Comparison', section: 'topic-12' }
             ]
         },
         {