Spaces:

Scartxx
/

trolley-problems-the-game

Running

App Files Files Community

Scartxx commited on Apr 6, 2025

Commit

b347dd6

verified ·

1 Parent(s): 26742c1

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +425 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Trolley Problems The Game
-emoji: 🦀
-colorFrom: red
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: trolley-problems-the-game
+emoji: 🐳
+colorFrom: pink
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,425 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>
+        .fade-in {
+            animation: fadeIn 0.5s;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        .track {
+            position: relative;
+            height: 4px;
+            background-color: #333;
+        }
+        .track::before, .track::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 2px;
+            background-color: #666;
+            top: -8px;
+        }
+        .track::after {
+            top: 8px;
+        }
+        .trolley {
+            position: absolute;
+            width: 60px;
+            height: 30px;
+            background-color: #d32f2f;
+            border-radius: 4px;
+            top: -13px;
+            left: 0;
+            transition: left 0.3s ease-out;
+        }
+        .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;
+        }
+        .person.dead {
+            background-color: #f44336;
+            transform: rotate(90deg);
+        }
+        /* Toggle switch styles */
+        .toggle-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 20px 0;
+        }
+        .toggle-option {
+            padding: 8px 16px;
+            background-color: #e5e7eb;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .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: #3b82f6;
+            color: white;
+        }
+        .philosopher-badge {
+            display: inline-block;
+            background-color: #f3f4f6;
+            border-radius: 12px;
+            padding: 4px 8px;
+            margin-top: 8px;
+            font-size: 12px;
+            color: #4b5563;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 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">
+        <div class="p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h1 class="text-2xl font-bold text-gray-800">Ethical Trolley Problems</h1>
+                <div class="flex items-center space-x-2">
+                    <div class="flex space-x-4">
+                        <div class="text-center">
+                            <span class="text-red-500 font-semibold"><i class="fas fa-hand-paper mr-1"></i> <span id="actionDeaths">0</span></span>
+                            <p class="text-xs text-gray-500">Action</p>
+                        </div>
+                        <div class="text-center">
+                            <span class="text-blue-500 font-semibold"><i class="fas fa-hand mr-1"></i> <span id="inactionDeaths">0</span></span>
+                            <p class="text-xs text-gray-500">Inaction</p>
+                        </div>
+                    </div>
+                    <button id="endGameBtn" class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-lg text-sm transition">
+                        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="bg-blue-50 p-4 rounded-lg h-32 relative" id="track1">
+                            <!-- People will be added here by JS -->
+                        </div>
+                        <p class="text-center mt-2 text-sm text-gray-600">Main Track</p>
+                    </div>
+                    <div class="w-1/2 pl-2">
+                        <div class="bg-red-50 p-4 rounded-lg h-32 relative" id="track2">
+                            <!-- People will be added here by JS -->
+                        </div>
+                        <p class="text-center mt-2 text-sm text-gray-600">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="bg-gray-50 p-4 rounded-lg mb-6 min-h-32 fade-in" id="scenarioText">
+                <p class="text-gray-700">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 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition flex items-center">
+                    <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 text-gray-600">Your choice aligns with:</p>
+                <span class="philosopher-badge" id="philosopherName"></span>
+            </div>
+        </div>
+    </div>
+    <div id="gameOverModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
+        <div class="bg-white rounded-xl p-6 max-w-md w-full fade-in">
+            <h2 class="text-2xl font-bold text-gray-800 mb-4">Ethical Summary</h2>
+            <div class="grid grid-cols-2 gap-4 mb-6">
+                <div class="bg-red-50 p-4 rounded-lg">
+                    <p class="text-center font-semibold text-red-500"><i class="fas fa-hand-paper mr-1"></i> Action</p>
+                    <p class="text-center text-3xl font-bold" id="finalActionDeaths">0</p>
+                    <p class="text-center text-xs text-gray-600">lives lost</p>
+                </div>
+                <div class="bg-blue-50 p-4 rounded-lg">
+                    <p class="text-center font-semibold text-blue-500"><i class="fas fa-hand mr-1"></i> Inaction</p>
+                    <p class="text-center text-3xl font-bold" id="finalInactionDeaths">0</p>
+                    <p class="text-center text-xs text-gray-600">lives lost</p>
+                </div>
+            </div>
+            <div class="mb-4">
+                <p class="text-sm text-gray-600 mb-1">Most referenced philosopher:</p>
+                <p class="font-medium" id="dominantPhilosopher"></p>
+            </div>
+            <button id="restartBtn" class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition">
+                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: "Utilitarianism (Bentham/Mill)", description: "Maximizing overall happiness by minimizing total deaths" },
+                { name: "Consequentialism", description: "Focusing on outcomes rather than intentions" },
+                { name: "Peter Singer", description: "Practical Ethics: We should act to minimize suffering" }
+            ],
+            inaction: [
+                { name: "Deontological Ethics (Kant)", description: "Duty-based ethics where some actions are always wrong" },
+                { name: "Virtue Ethics (Aristotle)", description: "Focus on moral character rather than consequences" },
+                { name: "Thomas Aquinas", description: "Natural law theory emphasizing moral absolutes" }
+            ]
+        };
+        // Scenario database
+        const scenarios = [
+            {
+                description: "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?",
+                track1: 5,
+                track2: 1
+            },
+            {
+                description: "The trolley is approaching three elderly people on the main track. The side track has a young child. The elderly have lived full lives while the child has their whole life ahead. What do you do?",
+                track1: 3,
+                track2: 1
+            },
+            {
+                description: "On the main track are four convicted murderers serving life sentences. On the side track is a Nobel Prize-winning scientist working on a cure for cancer. The lever is within your reach.",
+                track1: 4,
+                track2: 1
+            },
+            {
+                description: "The main track has two doctors who could save hundreds of lives. The side track has a pregnant woman. The lever is sticky and hard to pull.",
+                track1: 2,
+                track2: 2
+            },
+            {
+                description: "A trolley is barreling toward a group of five tourists who ignored warning signs. The side track has a local worker repairing the rails. Do you intervene?",
+                track1: 5,
+                track2: 1
+            }
+        ];
+        // 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 dominantPhilosopher = document.getElementById('dominantPhilosopher');
+        // 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 class="text-gray-700">${scenario.description}</p>`;
+            // Clear previous people
+            track1.innerHTML = '';
+            track2.innerHTML = '';
+            // Add people to tracks
+            for (let i = 0; i < scenario.track1; i++) {
+                const person = document.createElement('div');
+                person.className = 'person';
+                person.style.left = `${20 + i * 25}px`;
+                person.style.bottom = '10px';
+                track1.appendChild(person);
+            }
+            for (let i = 0; i < scenario.track2; i++) {
+                const person = document.createElement('div');
+                person.className = 'person';
+                person.style.left = `${20 + i * 25}px`;
+                person.style.bottom = '10px';
+                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;
+                    // Show philosopher reference for action
+                    const randomPhilosopher = philosophers.action[Math.floor(Math.random() * philosophers.action.length)];
+                    philosopherName.textContent = randomPhilosopher.name;
+                    philosopherName.title = 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;
+                    // Show philosopher reference for inaction
+                    const randomPhilosopher = philosophers.inaction[Math.floor(Math.random() * philosophers.inaction.length)];
+                    philosopherName.textContent = randomPhilosopher.name;
+                    philosopherName.title = 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 delay
+                setTimeout(() => {
+                    currentScenario = (currentScenario + 1) % scenarios.length;
+                    loadScenario(currentScenario);
+                    philosopherFeedback.classList.add('hidden');
+                }, 3000);
+            }, 1000);
+        }
+        // Find most referenced philosopher
+        function getDominantPhilosopher() {
+            let maxCount = 0;
+            let dominant = "No clear pattern";
+            for (const [name, count] of Object.entries(philosopherCounts)) {
+                if (count > maxCount) {
+                    maxCount = count;
+                    dominant = name;
+                }
+            }
+            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;
+            dominantPhilosopher.textContent = getDominantPhilosopher();
+            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>