Every AI model received this exact identical prompt to ensure a fair comparison of their creative coding capabilities.
"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"
Each AI was given the same prompt: create an interactive educational application about the Trolley Problem, Consequentialism, and Deontology. See how they differ.
A minimalist, content-focused implementation prioritizing clarity and accessibility. Single HTML file with embedded CSS and JavaScript.
A feature-rich, sophisticated implementation with extensive content, multiple moral scenarios, and academic depth. Professional-grade design.
A modern React-based implementation with TypeScript, demonstrating current web development best practices and modular architecture.
A detailed breakdown of how each AI approached different aspects of the implementation.
| Aspect | ChatGPT | Claude | Gemini |
|---|---|---|---|
| Architecture | Single File | Single File | Component-based |
| Code Size | 258 lines | 2,868 lines | Multiple files |
| Styling | Tailwind CDN | Custom CSS | Tailwind + CSS |
| Interactivity | Basic JS | Advanced JS | React State |
| Content Depth | Overview | Comprehensive | Structured |
| Moral Scenarios | 1 (Classic) | 3 (Variants) | 1 (Classic) |
| Quiz System | 1 Question | 7 Questions | None |
| Visual Design | Clean & Simple | Sophisticated | Modern |
| Dependencies | None | None | React, Vite, etc. |
| Build Required | No | No | Yes |
| Philosophy Focus | Basic Concepts | Academic Depth | Core Ideas |
| Accessibility | Simple HTML | Enhanced | React Patterns |
All three implementations explore the same fundamental ethical concepts.
A classic ethical dilemma: A runaway trolley is heading toward five people. You can pull a lever to divert it to another track where it will kill one person. What is the morally right action? This thought experiment reveals fundamental disagreements about moral reasoning.
The ethical theory that judges actions by their outcomes. The morally right action is the one that produces the best overall consequences. Utilitarianism, the most famous form, holds that we should maximize total happiness and minimize suffering for all affected.
Kant's duty-based ethics argues that morality is grounded in rules and duties, not consequences. The Categorical Imperative requires acting only on principles that could become universal laws, and treating persons as ends in themselves, never merely as means.
This experiment was designed to test how different AI models approach the same creative coding task. Each model was given an identical prompt to create an interactive philosophy application about the Trolley Problem and ethical frameworks.
The results reveal distinct approaches: ChatGPT prioritized simplicity and accessibility, Claude focused on comprehensive content and sophisticated design, while Gemini demonstrated modern development practices with React and TypeScript.
No code was modified from the original AI-generated output, only documentation (README files) was added. This preserves the authentic differences in how each model interprets and executes the same requirements.