AI Ethics Experiments Showcase

A comprehensive comparison showcase of how different AI models (ChatGPT, Claude, and Gemini) approach the same creative coding task: building an interactive philosophy application about the Trolley Problem.

🌐 Live Site

View the showcase: https://baney75.github.io/Trolly-Problem-Learning/

📁 Repository Structure

Trolly-Problem-Learning/
├── index.html                  # Main showcase website
├── ChatGPT-showcase/          # ChatGPT implementation (GitHub Pages copy)
│   ├── index.html             # Single-file minimalist app
│   └── README.md              # Detailed documentation
├── Claude-showcase/           # Claude implementation (GitHub Pages copy)
│   ├── index.html             # Comprehensive feature-rich app
│   └── README.md              # Detailed documentation
├── ChatGPT/                    # Original ChatGPT repo
├── Claude/                     # Original Claude repo
├── Gemini/                     # Original Gemini repo
└── ai-ethics-showcase/        # Standalone showcase repo

🎯 Purpose

This project explores how different AI models interpret and execute the same creative coding prompt. By comparing their outputs side-by-side, we can observe:

• Different architectural approaches (single-file vs. modular)
• Varying complexity levels (minimal vs. comprehensive)
• Distinct design philosophies (simple vs. sophisticated)
• Technical stack preferences (vanilla JS vs. modern frameworks)
• Content depth variations (overview vs. academic rigor)

🧪 The Experiments

ChatGPT Implementation

• Approach: Minimalist, content-focused
• Architecture: Single HTML file (258 lines)
• Styling: Tailwind CSS via CDN
• Philosophy: Simplicity and accessibility

Claude Implementation

• Approach: Comprehensive, polished
• Architecture: Single HTML file (2,868 lines)
• Styling: Custom CSS with sophisticated design
• Philosophy: Maximum features and academic depth

Gemini Implementation

• Approach: Modern, component-based
• Architecture: React + TypeScript + Vite
• Styling: Tailwind CSS with modular structure
• Philosophy: Industry-standard best practices

📊 Comparison Highlights

Aspect	ChatGPT	Claude	Gemini
Lines of Code	258	2,868	Multiple files
Files	1	1	10+
Build Required	No	No	Yes
Dependencies	0	0	React, Vite, etc.
Features	4	15+	6 components
Quiz Questions	1	7	0
Moral Scenarios	1	3	1

🚀 Deployment

This showcase is hosted on GitHub Pages at:

https://baney75.github.io/Trolly-Problem-Learning/

🔗 Individual Repositories

• ChatGPT: https://github.com/baney75/Trolly-Problem---ChatGPT-5.4
• Claude: https://github.com/baney75/Trolly-Problem---Claude-4.6-Sonnet
• Gemini: https://github.com/baney75/Trolly-Problem---Gemini-3.1-Pro

🎓 Philosophy Concepts

All implementations explore:

1. The Trolley Problem: Classic ethical dilemma testing moral intuitions
2. Consequentialism: Ethics based on outcomes and consequences
3. Deontology: Kant's duty-based moral framework
4. Moral Reasoning: How we justify ethical decisions

🔍 Key Observations

ChatGPT

• Prioritizes getting something working quickly
• Focuses on content over presentation
• Uses familiar, accessible technologies
• Minimal learning curve for users

Claude

• Invests heavily in visual design and UX
• Includes extensive educational content
• Demonstrates sophisticated CSS skills
• Creates an immersive learning environment

Gemini

• Follows modern development practices
• Uses current industry-standard tools
• Structures code for maintainability
• Demonstrates TypeScript and React proficiency

📝 Methodology

Original Prompt

Each AI model received the following identical prompt:

"Based on all of these design a philosophical learning site to teach philosophy deeply for consequentialism and deontology in an easy to understand interactive visual manner for college students. Adhere to sources. Design Principles: Use Chicago style for citations. Make it fun, original, not like a cookie cutter site, and it MUST be functional on mobile. Either: 1. Create an html file with tailwind, js all in one file or 2. A full fledged project"

Process

1. Same Prompt: Each AI received the identical request above
2. No Modifications: Original AI-generated code preserved (only READMEs added)
3. Documentation: Comprehensive READMEs created for each implementation
4. Showcase: This comparison site built to highlight differences

Citation Policy

• Default format: Chicago 17th Edition (as specified in prompt)
• All implementations use Chicago-style citations for academic sources
• Citations follow: Author, "Title," Source, Date format

🛠️ Local Development

To run this showcase locally:

# Clone or navigate to the repository
cd ai-ethics-showcase

# Serve with any static file server
python -m http.server 8000
# or
npx serve .

# Open http://localhost:8000

📚 Educational Value

This project serves as:

• AI Comparison Study: How different models approach creative tasks
• Learning Resource: Multiple implementations of the same concept
• Design Inspiration: Different UX/UI approaches
• Code Reference: Various coding styles and architectures
• Philosophy Education: Interactive ethics exploration

🤝 Contributing

This is an educational project for comparing AI outputs. If you'd like to add more AI implementations or improve the showcase:

1. Create a new directory with your AI's implementation
2. Include a comprehensive README.md
3. Update the showcase comparison table
4. Submit a pull request

📄 License

Educational project for comparing AI code generation capabilities. Feel free to use for educational purposes.

🙏 Acknowledgments

• OpenAI for ChatGPT
• Anthropic for Claude
• Google for Gemini
• Academic Sources: Chapman (2014), Gronholz (2014), Bentham (1823), Mill (1861), Kant (1785)

---

Explore the experiments and see how AI models differ in their creative approach!