Interactive Learning Tool Creation Prompt

Use this prompt to build an interactive educational web application on any topic. Copy and customize it for your subject matter.

PROMPT FOR CLAUDE:

I want to build an interactive learning tool about [YOUR TOPIC HERE] using React. This should be a comprehensive, hands-on educational experience similar to an interactive textbook. Let's build this one section at a time so I can test and refine each part before moving forward.

Overall Structure

Create a single-page React application with:

A home page with topic cards leading to different sections
A tabbed navigation bar at the top for easy section switching
7-10 main content sections covering different aspects of the topic
An interactive hands-on section (like a simulator, synthesizer, or interactive tool)
A quiz section with both multiple-choice and AI-graded open-ended questions
An AI tutor assistant using Claude's API for Socratic tutoring

Phase 1: Start with the Home Page

First, let's build just the home page with:

A welcoming title and description
Topic overview cards (7-10 cards) arranged in a responsive grid
Each card should have: an emoji/icon, title, and brief description
Cards should be clickable and indicate which section they lead to
Include a "Take Quiz" button prominently displayed
Make it mobile-responsive from the start (test on mobile before proceeding)

Don't build anything else yet. Let me review and approve the home page first.

Phase 2: Build Content Sections One at a Time

For each content section, follow this pattern:

Section Template:

Concept Explanation
- Clear, simple language explaining the concept from first principles
- Use analogies and real-world examples
- Break complex ideas into digestible parts
- Include "Key Insight" callout boxes for important points
Interactive Controls
- Sliders, buttons, or input fields to manipulate parameters
- Real-time visual feedback showing how parameters affect the outcome
- Preset buttons for common configurations
- Clear labels showing current values
Visualizations
- Create custom SVG diagrams (NOT placeholder images)
- Use React components that dynamically update based on controls
- Canvas elements for real-time waveforms or animations
- Color-coded elements with legends
Try This Experiments
- Callout boxes suggesting specific experiments
- Step-by-step instructions for discovering concepts
- "What to listen for" or "What to observe" guidance
Key Takeaways
- Summary box at the end of each section
- Bullet points of main concepts
- Blue background for visual consistency

Important: Build ONE section at a time

After completing each section, ask: "I've completed the [section name] section. Please review it, and when you're ready, I'll move on to the next section."

Phase 3: Interactive Tool/Simulator

Build a hands-on interactive tool relevant to your topic. For example:

For sound physics: A music synthesizer with keyboard
For chemistry: A molecule builder
For physics: A simulation tool
For math: A graphing calculator

Requirements:

Fully functional, not a demo
Multiple controls to adjust parameters
Real-time visual and/or audio feedback
Preset configurations or examples
Educational tips explaining what's happening
Mobile-friendly (test thoroughly on small screens)

Phase 4: The Quiz System

Create a comprehensive quiz with:

Multiple Choice Questions (12-15 questions)

{
  id: 1,
  type: 'multiple-choice',
  question: 'Your question here?',
  options: [
    'Option A',
    'Option B', 
    'Option C',
    'Option D'
  ],
  correctAnswer: 1 // index of correct answer
}

Open-Ended Questions (3-5 questions)

{
  id: 16,
  type: 'open-ended',
  question: 'Explain in your own words...'
}

Quiz Features:

Question navigator showing which questions are answered
Free navigation (jump to any question)
Submit button after all questions
Auto-grading for multiple choice
AI grading button for open-ended questions using Claude API
Results page showing score and feedback

Claude API Integration for Open-Ended Grading:

const gradeOpenEndedQuestion = async (questionId, answer) => {
  const response = await fetch("https://api.anthropic.com/v1/messages", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      model: "claude-sonnet-4-20250514",
      max_tokens: 500,
      messages: [{
        role: 'user',
        content: `Grade this student answer:
Question: ${question.question}
Answer: ${answer}

Provide: 1) What went well 2) What to improve 3) Grade (A-F)`
      }]
    })
  });
};

Phase 5: AI Tutor Assistant

Add a Socratic AI tutor using Claude's API:

Button Design:

Mobile: Circular button (64px) with emoji 🤖 and "AI" text, fixed bottom-right
Desktop: Same button with hover tooltip showing "Ask AI Tutor"

Chat Interface:

Mobile: Full-screen takeover (covers entire screen)
Desktop: Floating chat box (400px wide, 500px tall) in bottom-right
Gradient orange/red header with close button
Scrollable message area
Input field with Send button
"Powered by Claude AI" footer

Socratic Tutoring Prompt:

const tutorPrompt = `You are a Socratic tutor for [YOUR TOPIC]. 
NEVER give direct answers. Instead:
1. Ask guiding questions
2. Break complex topics into steps
3. Reference the interactive demos
4. Use analogies
5. Only give direct answers if student says "just tell me the answer"

Topics covered: [list your sections]`;

Key Features:

Maintains conversation history across messages
Loading state while Claude responds
Mobile-optimized (test scrolling and keyboard behavior)
Works on all pages/tabs

Phase 6: Mobile Responsiveness

Critical: Test every section on mobile (375px width) and make adjustments:

Responsive Patterns to Use:

// Containers
className="max-w-4xl mx-auto p-3 sm:p-6"

// Headers
className="text-2xl sm:text-3xl font-bold"

// Grids
className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4"

// Buttons
className="px-3 sm:px-6 py-2 sm:py-3"

// Navigation
className="flex gap-2 sm:gap-4 overflow-x-auto"

// Hide/show content
className="hidden sm:block" // desktop only
className="sm:hidden" // mobile only

Navigation Bar Requirements:

Horizontal scrolling on mobile (no gradients that hide content)
Smaller padding on mobile
All tabs fully visible
Smooth scroll behavior

Common Mobile Issues to Fix:

Text too small → Use sm: breakpoints
Buttons overflow → Add flex-wrap or stack vertically
Images too large → Set max-width: 100%
Chat interface cut off → Use inset-0 on mobile for full-screen
Piano/keyboard too wide → Scale down or allow horizontal scroll

Phase 7: Navigation Between Sections

Implement tab navigation with:

Previous/Next buttons at bottom of each section
Buttons should show section names on desktop
On mobile: just "Previous" and "Next"
Home button when reaching the last section
Tab order array defines sequence

const tabs = ['home', 'section1', 'section2', ... , 'interactive-tool'];
// Quiz is separate, only accessible from home or top nav

Design System

Use consistent styling throughout:

Colors:

Primary: Blue (#3b82f6)
Success: Green (#10b981)
Warning: Orange (#f59e0b)
Danger: Red (#ef4444)
Accent: Purple (#8b5cf6)

Callout Boxes:

Blue background: Key insights and takeaways
Yellow background: Experiments and "Try This"
Green background: Success states and presets
Red background: Warnings and safety notes

Typography:

Headers: Bold, dark gray (#111827)
Body: Gray (#374151)
Small text: Light gray (#6b7280)

SVG Best Practices

Create educational SVGs that:

Illustrate concepts visually
Use clear labels and annotations
Animate when appropriate (show motion, waves, etc.)
Scale responsively
Include legends/keys for colors

Example SVG structure:

const ConceptDiagramSVG = () => (
  <svg viewBox="0 0 600 400" className="w-full max-w-2xl mx-auto">
    {/* Visual elements */}
    <text x="300" y="30" textAnchor="middle" fontSize="16" fontWeight="bold">
      Diagram Title
    </text>
    {/* More elements */}
  </svg>
);

Audio/Canvas Considerations

If your topic involves audio, simulations, or animations:

Use Web Audio API for sound generation
Use Canvas or SVG for real-time visualizations
Provide volume controls and safety warnings
Test on mobile browsers (some features may differ)
Add "Loading..." states for heavy computations

Development Process

Step-by-step approach (CRITICAL):

Build home page → Review → Approve
Build Section 1 → Review → Fix mobile → Approve
Build Section 2 → Review → Fix mobile → Approve
(Continue for all sections)
Build interactive tool → Test thoroughly → Approve
Build quiz → Test all question types → Approve
Add AI tutor → Test chat → Approve
Final mobile pass → Test everything on phone → Fix issues
Polish and refinement

Never build everything at once. Build incrementally, test each part, and refine before moving forward.

Testing Checklist

Before considering the project complete, verify:

CUSTOMIZATION FOR YOUR TOPIC

Replace these placeholders:

Topic-Specific Content:

Main topic name: [YOUR TOPIC]
7-10 section titles: [YOUR SECTIONS]
Interactive tool concept: [YOUR TOOL]
Quiz questions: [YOUR QUESTIONS]
AI tutor knowledge base: [YOUR CONCEPTS]

Example Topics:

Chemistry: Periodic table, bonding, reactions, molecule builder
Physics: Forces, motion, energy, simulation tool
Biology: Cells, DNA, evolution, organism builder
Mathematics: Algebra, geometry, calculus, graphing calculator
Programming: Variables, loops, functions, code playground
History: Timeline, events, figures, map explorer
Language: Grammar, vocabulary, practice exercises

START THE BUILD

Begin with: "Let's start with the home page for my topic: [YOUR TOPIC]. Create a welcoming home page with 7-10 topic cards that I can click to navigate to different sections. Make it mobile-responsive. Don't build any other sections yet."

Then proceed one section at a time, testing and refining as you go.

This prompt reflects the iterative, test-as-you-go approach that creates polished, functional educational tools. Good luck with your interactive learning experience! 🚀

vlad-ds/artifact_prompt.md

Select an option

No results found