Hugging Face's logo

Spaces:
Scartxx
/
trolley-problems-the-game
Running

App Files Community
trolley-problems-the-game / index.html
Scartxx's picture
Scartxx
Add 1 files
dd24b10 verified
raw
history blame contribute delete
49.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Ethical Trolley Problems</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 :root {
 --earth-1: #F5F1E6;
 --earth-2: #DDD5C6;
 --earth-3: #C4BAA5;
 --earth-4: #AC9F84;
 --earth-5: #938463;
 --earth-6: #7B6942;
 }
body {
 background-color: var(--earth-1);
 }
.fade-in {
 animation: fadeIn 0.5s;
 }
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
.track {
 position: relative;
 height: 4px;
 background-color: var(--earth-6);
 }
.track::before, .track::after {
 content: '';
 position: absolute;
 width: 100%;
 height: 2px;
 background-color: var(--earth-5);
 top: -8px;
 }
.track::after {
 top: 8px;
 }
.trolley {
 position: absolute;
 width: 60px;
 height: 30px;
 background-color: #7B6942;
 border: 2px solid #5D4E3A;
 border-radius: 4px;
 top: -13px;
 left: 0;
 transition: left 0.3s ease-out;
 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
.trolley::before {
 content: '';
 position: absolute;
 width: 10px;
 height: 10px;
 background-color: #333;
 border-radius: 50%;
 bottom: -5px;
 left: 10px;
 }
.trolley::after {
 content: '';
 position: absolute;
 width: 10px;
 height: 10px;
 background-color: #333;
 border-radius: 50%;
 bottom: -5px;
 right: 10px;
 }
.person {
 width: 20px;
 height: 40px;
 background-color: #4CAF50;
 position: absolute;
 border-radius: 2px;
 transition: all 0.3s;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
.person.dead {
 background-color: #8B0000;
 transform: rotate(90deg);
 }
.toggle-container {
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 20px 0;
 }
.toggle-option {
 padding: 10px 20px;
 background-color: var(--earth-3);
 cursor: pointer;
 transition: all 0.3s;
 color: var(--earth-6);
 font-weight: 500;
 }
.toggle-option:first-child {
 border-radius: 8px 0 0 8px;
 }
.toggle-option:last-child {
 border-radius: 0 8px 8px 0;
 }
.toggle-option.active {
 background-color: var(--earth-6);
 color: var(--earth-1);
 }
.philosopher-badge {
 display: inline-block;
 background-color: var(--earth-2);
 border-radius: 16px;
 padding: 8px 16px;
 margin-top: 12px;
 font-size: 14px;
 color: var(--earth-6);
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 border: 1px solid var(--earth-3);
 max-width: 80%;
 }
.philosopher-description {
 font-size: 13px;
 color: var(--earth-6);
 margin-top: 4px;
 font-style: italic;
 }
.silver-accent {
 border-color: #C0C0C0;
 color: #C0C0C0;
 }
.modal-content {
 background: linear-gradient(to bottom, var(--earth-1), var(--earth-2));
 border: 1px solid var(--earth-4);
 }
.person-tag {
 position: absolute;
 bottom: -20px;
 font-size: 10px;
 white-space: nowrap;
 color: var(--earth-6);
 background-color: rgba(255,255,255,0.7);
 padding: 2px 4px;
 border-radius: 4px;
 }
.stats-box {
 background-color: var(--earth-2);
 border: 1px solid var(--earth-3);
 border-radius: 8px;
 }
 </style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
 <div class="max-w-2xl w-full bg-white rounded-xl shadow-lg overflow-hidden fade-in border border-earth-4">
 <div class="p-6" style="background-color: var(--earth-1);">
 <div class="flex justify-between items-center mb-4">
 <h1 class="text-2xl font-bold" style="color: var(--earth-6);">
 <i class="fas fa-train silver-accent mr-2"></i> Ethical Trolley Problems
 </h1>
 <div class="flex items-center space-x-2">
 <div class="flex space-x-4">
 <div class="text-center stats-box px-3 py-1">
 <span class="font-semibold" style="color: #8B0000;"><i class="fas fa-hand-paper mr-1"></i> <span id="actionDeaths">0</span></span>
 <p class="text-xs" style="color: var(--earth-6);">Action</p>
 </div>
 <div class="text-center stats-box px-3 py-1">
 <span class="font-semibold" style="color: #006400;"><i class="fas fa-hand mr-1"></i> <span id="inactionDeaths">0</span></span>
 <p class="text-xs" style="color: var(--earth-6);">Inaction</p>
 </div>
 </div>
 <button id="endGameBtn" class="px-3 py-1 stats-box hover:bg-earth-3 rounded-lg text-sm transition" style="color: var(--earth-6);">
 End Game
 </button>
 </div>
 </div>
<div class="mb-6 relative">
 <div class="track mb-8">
 <div class="trolley" id="trolley"></div>
 </div>
<div class="flex justify-between mb-2">
 <div class="w-1/2 pr-2">
 <div class="p-4 rounded-lg h-40 relative" style="background-color: var(--earth-2);" id="track1">
 <!-- People will be added here by JS -->
 </div>
 <p class="text-center mt-2 text-sm" style="color: var(--earth-6);">Main Track</p>
 </div>
 <div class="w-1/2 pl-2">
 <div class="p-4 rounded-lg h-40 relative" style="background-color: var(--earth-2);" id="track2">
 <!-- People will be added here by JS -->
 </div>
 <p class="text-center mt-2 text-sm" style="color: var(--earth-6);">Side Track</p>
 </div>
 </div>
<div class="toggle-container">
 <div class="toggle-option active" id="inactionOption">
 <i class="fas fa-hand mr-1"></i> Don't Pull
 </div>
 <div class="toggle-option" id="actionOption">
 <i class="fas fa-hand-paper mr-1"></i> Pull
 </div>
 </div>
 </div>
<div class="p-4 rounded-lg mb-6 min-h-32 fade-in" style="background-color: var(--earth-2); border: 1px solid var(--earth-3);" id="scenarioText">
 <p class="" style="color: var(--earth-6);">A runaway trolley is heading down the tracks toward five people who are unable to move. You are standing next to a lever that could switch the trolley onto a different track, where there is one person who is unable to move. Do you pull the lever?</p>
 </div>
<div class="flex justify-center">
 <button id="decideBtn" class="px-8 py-3 hover:bg-earth-6 text-white rounded-lg font-medium transition flex items-center" style="background-color: var(--earth-6);">
 <i class="fas fa-gavel mr-2"></i> Make Ethical Decision
 </button>
 </div>
<div id="philosopherFeedback" class="mt-4 text-center hidden">
 <p class="text-sm mb-2" style="color: var(--earth-6);">Your choice aligns with:</p>
 <div class="philosopher-badge" id="philosopherName"></div>
 <div class="philosopher-description" id="philosopherDescription"></div>
 </div>
 </div>
 </div>
<div id="gameOverModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
 <div class="modal-content rounded-xl p-6 max-w-md w-full fade-in shadow-xl">
 <h2 class="text-2xl font-bold mb-4" style="color: var(--earth-6);">
 <i class="fas fa-chart-pie silver-accent mr-2"></i> Ethical Summary
 </h2>
 <div class="grid grid-cols-2 gap-4 mb-6">
 <div class="p-4 rounded-lg" style="background-color: var(--earth-2); border: 1px solid var(--earth-3);">
 <p class="text-center font-semibold" style="color: #8B0000;"><i class="fas fa-hand-paper mr-1"></i> Action</p>
 <p class="text-center text-3xl font-bold" style="color: var(--earth-6);" id="finalActionDeaths">0</p>
 <p class="text-center text-xs" style="color: var(--earth-6);">lives lost</p>
 </div>
 <div class="p-4 rounded-lg" style="background-color: var(--earth-2); border: 1px solid var(--earth-3);">
 <p class="text-center font-semibold" style="color: #006400;"><i class="fas fa-hand mr-1"></i> Inaction</p>
 <p class="text-center text-3xl font-bold" style="color: var(--earth-6);" id="finalInactionDeaths">0</p>
 <p class="text-center text-xs" style="color: var(--earth-6);">lives lost</p>
 </div>
 </div>
 <div class="mb-4 p-3 rounded-lg" style="background-color: var(--earth-2); border: 1px solid var(--earth-3);">
 <p class="text-sm mb-1" style="color: var(--earth-6);">Most referenced philosopher:</p>
 <p class="font-medium" style="color: var(--earth-6);" id="dominantPhilosopher"></p>
 <p class="text-xs mt-1" style="color: var(--earth-6);" id="dominantPhilosopherDesc"></p>
 </div>
 <button id="restartBtn" class="w-full py-3 hover:bg-earth-6 text-white rounded-lg font-medium transition" style="background-color: var(--earth-6);">
 <i class="fas fa-redo mr-2"></i> Reflect Again
 </button>
 </div>
 </div>
<script>
 // Game state
 let actionDeaths = 0;
 let inactionDeaths = 0;
 let currentScenario = 0;
 let leverPulled = false;
 let philosopherCounts = {};
// Philosopher references for each position
 const philosophers = {
 action: [
 { name: "Jeremy Bentham (Utilitarianism)", description: "The greatest happiness for the greatest number should be the measure of right and wrong." },
 { name: "John Stuart Mill", description: "Actions are right in proportion as they tend to promote happiness, wrong as they tend to produce the reverse." },
 { name: "Peter Singer", description: "If it is in our power to prevent something bad from happening, without thereby sacrificing anything of comparable moral importance, we ought, morally, to do it." },
 { name: "Henry Sidgwick", description: "The good of any one individual is of no more importance than the good of any other." },
 { name: "Richard Hare (Preference Utilitarianism)", description: "We should consider the preferences of all those affected by our actions." }
 ],
 inaction: [
 { name: "Immanuel Kant (Deontological Ethics)", description: "Act only according to that maxim whereby you can at the same time will that it should become a universal law." },
 { name: "Thomas Aquinas (Natural Law)", description: "An evil action cannot be justified by reference to a good intention." },
 { name: "W.D. Ross (Prima Facie Duties)", description: "We have a prima facie duty not to harm others, which may override consequentialist considerations." },
 { name: "Elizabeth Anscombe", description: "Certain actions are intrinsically wrong regardless of consequences." },
 { name: "John Locke", description: "Natural rights to life, liberty and property cannot be justly violated." }
 ]
 };
// Scenario database (100 diverse scenarios)
 const scenarios = [
 // Basic scenarios
 {
 description: "A runaway trolley is heading toward five people who are unable to move. You can pull a lever to divert it onto a side track with one person. What do you do?",
 track1: {count: 5, tags: ["generic"]},
 track2: {count: 1, tags: ["generic"]}
 },
 {
 description: "The trolley is approaching three elderly people (ages 78, 82, 85) on the main track. The side track has one child (age 6). What do you do?",
 track1: {count: 3, tags: ["elderly"]},
 track2: {count: 1, tags: ["child"]}
 },
 {
 description: "On the main track are four convicted murderers serving life sentences. On the side track is a Nobel Prize-winning scientist. What do you do?",
 track1: {count: 4, tags: ["criminals"]},
 track2: {count: 1, tags: ["scientist"]}
 },
 {
 description: "The main track has two doctors who could save hundreds. The side track has a pregnant woman. What do you do?",
 track1: {count: 2, tags: ["doctors"]},
 track2: {count: 2, tags: ["pregnant"]}
 },
// Race/ethnicity scenarios
 {
 description: "The main track has three people of your own race. The side track has two people of a different race. Does this affect your decision?",
 track1: {count: 3, tags: ["same-race"]},
 track2: {count: 2, tags: ["different-race"]}
 },
 {
 description: "Five refugees from a war-torn country are on the main track. One wealthy tourist is on the side track. What do you do?",
 track1: {count: 5, tags: ["refugees"]},
 track2: {count: 1, tags: ["wealthy"]}
 },
 {
 description: "Four indigenous people are on the main track. One government official who has opposed their land rights is on the side track. Your choice?",
 track1: {count: 4, tags: ["indigenous"]},
 track2: {count: 1, tags: ["official"]}
 },
// Gender/sexuality scenarios
 {
 description: "Three women are on the main track. One man is on the side track. Does gender play a role in your decision?",
 track1: {count: 3, tags: ["women"]},
 track2: {count: 1, tags: ["man"]}
 },
 {
 description: "Five members of the LGBTQ+ community are on the main track. One conservative politician who has opposed their rights is on the side track. What do you do?",
 track1: {count: 5, tags: ["LGBTQ"]},
 track2: {count: 1, tags: ["politician"]}
 },
 {
 description: "Four male soldiers are on the main track. One civilian woman is on the side track. Your decision?",
 track1: {count: 4, tags: ["soldiers"]},
 track2: {count: 1, tags: ["civilian"]}
 },
// Age scenarios
 {
 description: "Two teenagers are on the main track. One senior citizen is on the side track. What do you do?",
 track1: {count: 2, tags: ["teens"]},
 track2: {count: 1, tags: ["senior"]}
 },
 {
 description: "Four middle-aged adults are on the main track. One infant is on the side track. Your choice?",
 track1: {count: 4, tags: ["adults"]},
 track2: {count: 1, tags: ["infant"]}
 },
 {
 description: "Three children (ages 7-9) are on the main track. One 45-year-old is on the side track. What do you do?",
 track1: {count: 3, tags: ["children"]},
 track2: {count: 1, tags: ["middle-aged"]}
 },
// Economic status scenarios
 {
 description: "Five homeless individuals are on the main track. One billionaire is on the side track. What do you do?",
 track1: {count: 5, tags: ["homeless"]},
 track2: {count: 1, tags: ["billionaire"]}
 },
 {
 description: "Four factory workers are on the main track. The company CEO is on the side track. Your decision?",
 track1: {count: 4, tags: ["workers"]},
 track2: {count: 1, tags: ["CEO"]}
 },
 {
 description: "Three farmers are on the main track. One agricultural corporation executive is on the side track. What do you do?",
 track1: {count: 3, tags: ["farmers"]},
 track2: {count: 1, tags: ["executive"]}
 },
// Political scenarios
 {
 description: "Five members of your preferred political party are on the main track. One member of the opposing party is on the side track. Does this affect your choice?",
 track1: {count: 5, tags: ["your-party"]},
 track2: {count: 1, tags: ["opposing-party"]}
 },
 {
 description: "Four political activists for a cause you support are on the main track. One activist for a cause you oppose is on the side track. Your choice?",
 track1: {count: 4, tags: ["your-cause"]},
 track2: {count: 1, tags: ["opposing-cause"]}
 },
 {
 description: "Three government officials are on the main track. One whistleblower is on the side track. What do you do?",
 track1: {count: 3, tags: ["officials"]},
 track2: {count: 1, tags: ["whistleblower"]}
 },
// Nationality scenarios
 {
 description: "Five citizens of your country are on the main track. One foreign national is on the side track. Does nationality matter?",
 track1: {count: 5, tags: ["your-country"]},
 track2: {count: 1, tags: ["foreigner"]}
 },
 {
 description: "Four people from a country your nation is at war with are on the main track. One of your compatriots is on the side track. Your decision?",
 track1: {count: 4, tags: ["enemy-nation"]},
 track2: {count: 1, tags: ["compatriot"]}
 },
 {
 description: "Three undocumented immigrants are on the main track. One border patrol agent is on the side track. What do you do?",
 track1: {count: 3, tags: ["immigrants"]},
 track2: {count: 1, tags: ["border-agent"]}
 },
// Behavior scenarios
 {
 description: "Five people who ignored warning signs are on the main track. One worker repairing the tracks is on the side track. What do you do?",
 track1: {count: 5, tags: ["reckless"]},
 track2: {count: 1, tags: ["worker"]}
 },
 {
 description: "Four protesters blocking the tracks are on the main track. One police officer trying to clear them is on the side track. Your choice?",
 track1: {count: 4, tags: ["protesters"]},
 track2: {count: 1, tags: ["officer"]}
 },
 {
 description: "Three people who were texting while walking are on the main track. One attentive pedestrian is on the side track. What do you do?",
 track1: {count: 3, tags: ["distracted"]},
 track2: {count: 1, tags: ["attentive"]}
 },
// Health scenarios
 {
 description: "Four terminally ill patients are on the main track. One healthy person is on the side track. What do you do?",
 track1: {count: 4, tags: ["terminally-ill"]},
 track2: {count: 1, tags: ["healthy"]}
 },
 {
 description: "Three people with severe disabilities are on the main track. One Olympic athlete is on the side track. Your decision?",
 track1: {count: 3, tags: ["disabled"]},
 track2: {count: 1, tags: ["athlete"]}
 },
 {
 description: "Five smokers are on the main track. One non-smoker is on the side track. Does this affect your choice?",
 track1: {count: 5, tags: ["smokers"]},
 track2: {count: 1, tags: ["non-smoker"]}
 },
// Occupation scenarios
 {
 description: "Four teachers are on the main track. One student is on the side track. What do you do?",
 track1: {count: 4, tags: ["teachers"]},
 track2: {count: 1, tags: ["student"]}
 },
 {
 description: "Three firefighters are on the main track. One arsonist is on the side track. Your choice?",
 track1: {count: 3, tags: ["firefighters"]},
 track2: {count: 1, tags: ["arsonist"]}
 },
 {
 description: "Five journalists are on the main track. One government censor is on the side track. What do you do?",
 track1: {count: 5, tags: ["journalists"]},
 track2: {count: 1, tags: ["censor"]}
 },
// Relationship scenarios
 {
 description: "Three strangers are on the main track. One family member is on the side track. Does this change your decision?",
 track1: {count: 3, tags: ["strangers"]},
 track2: {count: 1, tags: ["family"]}
 },
 {
 description: "Four acquaintances are on the main track. One close friend is on the side track. What do you do?",
 track1: {count: 4, tags: ["acquaintances"]},
 track2: {count: 1, tags: ["friend"]}
 },
 {
 description: "Two people you dislike are on the main track. One person you love is on the side track. Your decision?",
 track1: {count: 2, tags: ["disliked"]},
 track2: {count: 1, tags: ["loved"]}
 },
// Moral character scenarios
 {
 description: "Four generally kind people are on the main track. One generally cruel person is on the side track. What do you do?",
 track1: {count: 4, tags: ["kind"]},
 track2: {count: 1, tags: ["cruel"]}
 },
 {
 description: "Three honest people are on the main track. One habitual liar is on the side track. Your choice?",
 track1: {count: 3, tags: ["honest"]},
 track2: {count: 1, tags: ["liar"]}
 },
 {
 description: "Five philanthropists are on the main track. One miser is on the side track. What do you do?",
 track1: {count: 5, tags: ["philanthropists"]},
 track2: {count: 1, tags: ["miser"]}
 },
// Future potential scenarios
 {
 description: "Four people with no children are on the main track. One parent of five is on the side track. Does future potential matter?",
 track1: {count: 4, tags: ["childless"]},
 track2: {count: 1, tags: ["parent"]}
 },
 {
 description: "Three retired people are on the main track. One medical student is on the side track. Your decision?",
 track1: {count: 3, tags: ["retired"]},
 track2: {count: 1, tags: ["student"]}
 },
 {
 description: "Two terminally ill patients are on the main track. One young inventor is on the side track. What do you do?",
 track1: {count: 2, tags: ["terminally-ill"]},
 track2: {count: 1, tags: ["inventor"]}
 },
// Random additional scenarios to reach 100
 {
 description: "Four vegetarians are on the main track. One butcher is on the side track. What do you do?",
 track1: {count: 4, tags: ["vegetarians"]},
 track2: {count: 1, tags: ["butcher"]}
 },
 {
 description: "Three pacifists are on the main track. One soldier is on the side track. Your choice?",
 track1: {count: 3, tags: ["pacifists"]},
 track2: {count: 1, tags: ["soldier"]}
 },
 {
 description: "Five artists are on the main track. One art critic is on the side track. What do you do?",
 track1: {count: 5, tags: ["artists"]},
 track2: {count: 1, tags: ["critic"]}
 },
 {
 description: "Two priests are on the main track. One atheist is on the side track. Does this affect your decision?",
 track1: {count: 2, tags: ["priests"]},
 track2: {count: 1, tags: ["atheist"]}
 },
 {
 description: "Four veterans are on the main track. One draft dodger is on the side track. What do you do?",
 track1: {count: 4, tags: ["veterans"]},
 track2: {count: 1, tags: ["draft-dodger"]}
 },
 {
 description: "Three environmental activists are on the main track. One oil executive is on the side track. Your decision?",
 track1: {count: 3, tags: ["activists"]},
 track2: {count: 1, tags: ["executive"]}
 },
 {
 description: "Five volunteers are on the main track. One selfish individual is on the side track. What do you do?",
 track1: {count: 5, tags: ["volunteers"]},
 track2: {count: 1, tags: ["selfish"]}
 },
 {
 description: "Four people who voted like you are on the main track. One who voted opposite is on the side track. Does this matter?",
 track1: {count: 4, tags: ["like-voters"]},
 track2: {count: 1, tags: ["opposite-voter"]}
 },
 {
 description: "Three people who share your religion are on the main track. One of a different faith is on the side track. Your choice?",
 track1: {count: 3, tags: ["same-faith"]},
 track2: {count: 1, tags: ["different-faith"]}
 },
 {
 description: "Two people who look like you are on the main track. One who looks very different is on the side track. What do you do?",
 track1: {count: 2, tags: ["similar-appearance"]},
 track2: {count: 1, tags: ["different-appearance"]}
 },
 {
 description: "Four people who speak your language are on the main track. One foreign language speaker is on the side track. Does this affect you?",
 track1: {count: 4, tags: ["same-language"]},
 track2: {count: 1, tags: ["foreign-language"]}
 },
 {
 description: "Three people from your hometown are on the main track. One stranger is on the side track. What do you do?",
 track1: {count: 3, tags: ["hometown"]},
 track2: {count: 1, tags: ["stranger"]}
 },
 {
 description: "Five people who have committed minor crimes are on the main track. One judge is on the side track. Your decision?",
 track1: {count: 5, tags: ["minor-criminals"]},
 track2: {count: 1, tags: ["judge"]}
 },
 {
 description: "Two people who have wronged you are on the main track. One who has helped you is on the side track. What do you do?",
 track1: {count: 2, tags: ["wronged-you"]},
 track2: {count: 1, tags: ["helped-you"]}
 },
 {
 description: "Four people who agree with you politically are on the main track. One who strongly disagrees is on the side track. Does this matter?",
 track1: {count: 4, tags: ["agree-with-you"]},
 track2: {count: 1, tags: ["disagree-with-you"]}
 },
 {
 description: "Three people who have donated to charity are on the main track. One who never has is on the side track. Your choice?",
 track1: {count: 3, tags: ["charitable"]},
 track2: {count: 1, tags: ["uncharitable"]}
 },
 {
 description: "Five people who recycle are on the main track. One who litters is on the side track. What do you do?",
 track1: {count: 5, tags: ["recyclers"]},
 track2: {count: 1, tags: ["litterer"]}
 },
 {
 description: "Two people who have saved lives are on the main track. One who has taken a life is on the side track. Does this affect your decision?",
 track1: {count: 2, tags: ["life-savers"]},
 track2: {count: 1, tags: ["life-taker"]}
 },
 {
 description: "Four people who always tell the truth are on the main track. One pathological liar is on the side track. What do you do?",
 track1: {count: 4, tags: ["truth-tellers"]},
 track2: {count: 1, tags: ["liar"]}
 },
 {
 description: "Three people who have risked their lives for others are on the main track. One who has always played it safe is on the side track. Your decision?",
 track1: {count: 3, tags: ["heroes"]},
 track2: {count: 1, tags: ["cautious"]}
 },
 {
 description: "Five people who have never broken the law are on the main track. One career criminal is on the side track. What do you do?",
 track1: {count: 5, tags: ["law-abiding"]},
 track2: {count: 1, tags: ["criminal"]}
 },
 {
 description: "Two people who have created beautiful art are on the main track. One who has destroyed art is on the side track. Does this matter?",
 track1: {count: 2, tags: ["artists"]},
 track2: {count: 1, tags: ["art-destroyer"]}
 },
 {
 description: "Four people who have planted trees are on the main track. One who has cut down forests is on the side track. What do you do?",
 track1: {count: 4, tags: ["tree-planters"]},
 track2: {count: 1, tags: ["deforester"]}
 },
 {
 description: "Three people who have adopted children are on the main track. One who has abandoned their children is on the side track. Your choice?",
 track1: {count: 3, tags: ["adoptive-parents"]},
 track2: {count: 1, tags: ["child-abandoner"]}
 },
 {
 description: "Five people who have volunteered at shelters are on the main track. One who has abused animals is on the side track. What do you do?",
 track1: {count: 5, tags: ["volunteers"]},
 track2: {count: 1, tags: ["animal-abuser"]}
 },
 {
 description: "Two people who have invented life-saving devices are on the main track. One who has created weapons is on the side track. Does this affect your decision?",
 track1: {count: 2, tags: ["inventors"]},
 track2: {count: 1, tags: ["weapons-maker"]}
 },
 {
 description: "Four people who have taught others are on the main track. One who has misled many is on the side track. What do you do?",
 track1: {count: 4, tags: ["teachers"]},
 track2: {count: 1, tags: ["misleader"]}
 },
 {
 description: "Three people who have built homes are on the main track. One who has destroyed property is on the side track. Your decision?",
 track1: {count: 3, tags: ["builders"]},
 track2: {count: 1, tags: ["destroyer"]}
 },
 {
 description: "Five people who have cared for the sick are on the main track. One who has spread disease is on the side track. What do you do?",
 track1: {count: 5, tags: ["caregivers"]},
 track2: {count: 1, tags: ["disease-spreader"]}
 },
 {
 description: "Two people who have created jobs are on the main track. One who has caused unemployment is on the side track. Does this matter?",
 track1: {count: 2, tags: ["job-creators"]},
 track2: {count: 1, tags: ["job-destroyer"]}
 },
 {
 description: "Four people who have mediated conflicts are on the main track. One who has started wars is on the side track. What do you do?",
 track1: {count: 4, tags: ["peacemakers"]},
 track2: {count: 1, tags: ["warmonger"]}
 },
 {
 description: "Three people who have preserved history are on the main track. One who has erased history is on the side track. Your choice?",
 track1: {count: 3, tags: ["historians"]},
 track2: {count: 1, tags: ["history-eraser"]}
 },
 {
 description: "Five people who have fed the hungry are on the main track. One who has hoarded food is on the side track. What do you do?",
 track1: {count: 5, tags: ["feeders"]},
 track2: {count: 1, tags: ["hoarder"]}
 },
 {
 description: "Two people who have protected the weak are on the main track. One who has bullied others is on the side track. Does this affect your decision?",
 track1: {count: 2, tags: ["protectors"]},
 track2: {count: 1, tags: ["bully"]}
 },
 {
 description: "Four people who have created beauty are on the main track. One who has created ugliness is on the side track. What do you do?",
 track1: {count: 4, tags: ["artists"]},
 track2: {count: 1, tags: ["ugliness-creator"]}
 },
 {
 description: "Three people who have inspired others are on the main track. One who has discouraged many is on the side track. Your decision?",
 track1: {count: 3, tags: ["inspirational"]},
 track2: {count: 1, tags: ["discourager"]}
 },
 {
 description: "Five people who have risked everything for principles are on the main track. One who has compromised everything for gain is on the side track. What do you do?",
 track1: {count: 5, tags: ["principled"]},
 track2: {count: 1, tags: ["compromised"]}
 },
 {
 description: "Two people who have always kept their word are on the main track. One who has consistently broken promises is on the side track. Does this matter?",
 track1: {count: 2, tags: ["promise-keepers"]},
 track2: {count: 1, tags: ["promise-breaker"]}
 },
 {
 description: "Four people who have sacrificed for others are on the main track. One who has always put themselves first is on the side track. What do you do?",
 track1: {count: 4, tags: ["selfless"]},
 track2: {count: 1, tags: ["selfish"]}
 },
 {
 description: "Three people who have overcome great adversity are on the main track. One who has had every advantage is on the side track. Your choice?",
 track1: {count: 3, tags: ["overcomers"]},
 track2: {count: 1, tags: ["privileged"]}
 },
 {
 description: "Five people who have always given others the benefit of the doubt are on the main track. One who has always assumed the worst is on the side track. What do you do?",
 track1: {count: 5, tags: ["trusting"]},
 track2: {count: 1, tags: ["cynical"]}
 },
 {
 description: "Two people who have brought communities together are on the main track. One who has divided communities is on the side track. Does this affect your decision?",
 track1: {count: 2, tags: ["unifiers"]},
 track2: {count: 1, tags: ["divider"]}
 },
 {
 description: "Four people who have always stood up for what's right are on the main track. One who has consistently remained silent is on the side track. What do you do?",
 track1: {count: 4, tags: ["courageous"]},
 track2: {count: 1, tags: ["silent"]}
 },
 {
 description: "Three people who have created opportunities for others are on the main track. One who has closed doors is on the side track. Your decision?",
 track1: {count: 3, tags: ["opportunity-creators"]},
 track2: {count: 1, tags: ["door-closer"]}
 },
 {
 description: "Five people who have always shared what they have are on the main track. One who has hoarded resources is on the side track. What do you do?",
 track1: {count: 5, tags: ["sharers"]},
 track2: {count: 1, tags: ["hoarder"]}
 },
 {
 description: "Two people who have brightened others' days are on the main track. One who has spread misery is on the side track. Does this matter?",
 track1: {count: 2, tags: ["joy-bringers"]},
 track2: {count: 1, tags: ["misery-spreader"]}
 },
 {
 description: "Four people who have made the world better are on the main track. One who has made it worse is on the side track. What do you do?",
 track1: {count: 4, tags: ["improvers"]},
 track2: {count: 1, tags: ["deteriorator"]}
 }
 ];
// DOM elements
 const scenarioText = document.getElementById('scenarioText');
 const actionDeathsDisplay = document.getElementById('actionDeaths');
 const inactionDeathsDisplay = document.getElementById('inactionDeaths');
 const decideBtn = document.getElementById('decideBtn');
 const endGameBtn = document.getElementById('endGameBtn');
 const gameOverModal = document.getElementById('gameOverModal');
 const finalActionDeaths = document.getElementById('finalActionDeaths');
 const finalInactionDeaths = document.getElementById('finalInactionDeaths');
 const restartBtn = document.getElementById('restartBtn');
 const trolley = document.getElementById('trolley');
 const track1 = document.getElementById('track1');
 const track2 = document.getElementById('track2');
 const actionOption = document.getElementById('actionOption');
 const inactionOption = document.getElementById('inactionOption');
 const philosopherFeedback = document.getElementById('philosopherFeedback');
 const philosopherName = document.getElementById('philosopherName');
 const philosopherDescription = document.getElementById('philosopherDescription');
 const dominantPhilosopher = document.getElementById('dominantPhilosopher');
 const dominantPhilosopherDesc = document.getElementById('dominantPhilosopherDesc');
// Initialize game
 function initGame() {
 actionDeaths = 0;
 inactionDeaths = 0;
 currentScenario = 0;
 leverPulled = false;
 philosopherCounts = {};
 updateDeathCounts();
 loadScenario(currentScenario);
 inactionOption.classList.add('active');
 actionOption.classList.remove('active');
 philosopherFeedback.classList.add('hidden');
 }
// Load a scenario
 function loadScenario(index) {
 const scenario = scenarios[index];
 scenarioText.innerHTML = `<p style="color: var(--earth-6);">${scenario.description}</p>`;
// Clear previous people
 track1.innerHTML = '';
 track2.innerHTML = '';
// Add people to tracks with tags
 for (let i = 0; i < scenario.track1.count; i++) {
 const person = document.createElement('div');
 person.className = 'person';
 person.style.left = `${20 + i * 25}px`;
 person.style.bottom = '10px';
// Add tag if available
 if (scenario.track1.tags && scenario.track1.tags.length > 0) {
 const tag = document.createElement('div');
 tag.className = 'person-tag';
 tag.textContent = scenario.track1.tags[0];
 tag.style.left = `${15 + i * 25}px`;
 person.appendChild(tag);
 }
track1.appendChild(person);
 }
for (let i = 0; i < scenario.track2.count; i++) {
 const person = document.createElement('div');
 person.className = 'person';
 person.style.left = `${20 + i * 25}px`;
 person.style.bottom = '10px';
// Add tag if available
 if (scenario.track2.tags && scenario.track2.tags.length > 0) {
 const tag = document.createElement('div');
 tag.className = 'person-tag';
 tag.textContent = scenario.track2.tags[0];
 tag.style.left = `${15 + i * 25}px`;
 person.appendChild(tag);
 }
track2.appendChild(person);
 }
// Reset trolley position
 trolley.style.left = '0';
 }
// Update death count displays
 function updateDeathCounts() {
 actionDeathsDisplay.textContent = actionDeaths;
 inactionDeathsDisplay.textContent = inactionDeaths;
 }
// Animate trolley movement
 function animateTrolley() {
 trolley.style.left = 'calc(100% - 60px)';
setTimeout(() => {
 if (leverPulled) {
 // Show deaths on side track (action)
 const people = track2.querySelectorAll('.person');
 people.forEach(person => {
 person.classList.add('dead');
 });
 actionDeaths += scenarios[currentScenario].track2.count;
// Show philosopher reference for action
 const randomPhilosopher = philosophers.action[Math.floor(Math.random() * philosophers.action.length)];
 philosopherName.textContent = randomPhilosopher.name;
 philosopherDescription.textContent = randomPhilosopher.description;
// Track philosopher reference
 if (!philosopherCounts[randomPhilosopher.name]) {
 philosopherCounts[randomPhilosopher.name] = 0;
 }
 philosopherCounts[randomPhilosopher.name]++;
 } else {
 // Show deaths on main track (inaction)
 const people = track1.querySelectorAll('.person');
 people.forEach(person => {
 person.classList.add('dead');
 });
 inactionDeaths += scenarios[currentScenario].track1.count;
// Show philosopher reference for inaction
 const randomPhilosopher = philosophers.inaction[Math.floor(Math.random() * philosophers.inaction.length)];
 philosopherName.textContent = randomPhilosopher.name;
 philosopherDescription.textContent = randomPhilosopher.description;
// Track philosopher reference
 if (!philosopherCounts[randomPhilosopher.name]) {
 philosopherCounts[randomPhilosopher.name] = 0;
 }
 philosopherCounts[randomPhilosopher.name]++;
 }
updateDeathCounts();
 philosopherFeedback.classList.remove('hidden');
// Move to next scenario after longer delay (10 seconds)
 setTimeout(() => {
 currentScenario = (currentScenario + 1) % scenarios.length;
 loadScenario(currentScenario);
 philosopherFeedback.classList.add('hidden');
 }, 10000); // 10 seconds delay
 }, 1000);
 }
// Find most referenced philosopher
 function getDominantPhilosopher() {
 let maxCount = 0;
 let dominant = {name: "No clear pattern", description: ""};
for (const [name, count] of Object.entries(philosopherCounts)) {
 if (count > maxCount) {
 maxCount = count;
 // Find the philosopher object
 const allPhilosophers = [...philosophers.action, ...philosophers.inaction];
 dominant = allPhilosophers.find(p => p.name === name) || dominant;
 }
 }
return dominant;
 }
// Event listeners
 actionOption.addEventListener('click', function() {
 leverPulled = true;
 actionOption.classList.add('active');
 inactionOption.classList.remove('active');
 });
inactionOption.addEventListener('click', function() {
 leverPulled = false;
 inactionOption.classList.add('active');
 actionOption.classList.remove('active');
 });
decideBtn.addEventListener('click', () => {
 animateTrolley();
 });
endGameBtn.addEventListener('click', () => {
 finalActionDeaths.textContent = actionDeaths;
 finalInactionDeaths.textContent = inactionDeaths;
 const dominant = getDominantPhilosopher();
 dominantPhilosopher.textContent = dominant.name;
 dominantPhilosopherDesc.textContent = dominant.description;
 gameOverModal.classList.remove('hidden');
 });
restartBtn.addEventListener('click', () => {
 gameOverModal.classList.add('hidden');
 initGame();
 });
// Start the game
 initGame();
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Scartxx/trolley-problems-the-game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>