From e6c9d88561a5f0362825e461425b499dfd850dbb Mon Sep 17 00:00:00 2001
From: ION606 <ion606@protonmail.com>
Date: Thu, 30 Oct 2025 21:37:34 +0000
Subject: [PATCH] Add Chinese Room Game

---
 Grad Presentation/chinese-room.html | 170 ++++++++++++++++++++++++++++
 1 file changed, 170 insertions(+)
 create mode 100644 Grad Presentation/chinese-room.html
diff --git a/Grad Presentation/chinese-room.html b/Grad Presentation/chinese-room.html
new file mode 100644
index 0000000..6eb8215
--- /dev/null
+++ b/Grad Presentation/chinese-room.html	
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>🎮 Understand the Chinese Room Game</title>
+		<style>
+			body {
+				font-family: Arial, sans-serif;
+				max-width: 600px;
+				margin: auto;
+				padding: 20px;
+			}
+			.game-box {
+				background: #f0f8ff;
+				padding: 20px;
+				border-radius: 10px;
+				margin: 20px 0;
+			}
+			.instructions {
+				background: #fff3cd;
+				padding: 15px;
+				border-radius: 5px;
+				margin: 15px 0;
+			}
+			button {
+				background: #4caf50;
+				color: white;
+				padding: 10px 20px;
+				border: none;
+				border-radius: 5px;
+				cursor: pointer;
+			}
+			.emoji-large {
+				font-size: 2em;
+				margin: 15px 0;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="game-box">
+			<h1>🧩 The Understanding Game</h1>
+
+			<div class="instructions" id="instructions">
+				<h2>📋 How to Play</h2>
+				<p>
+					You'll be shown <strong>emoji pairs</strong> and
+					<strong>translation rules</strong>.
+				</p>
+				<p>
+					Your job: Follow the rules <em>exactly</em> to translate
+					messages
+				</p>
+				<p>Example Rule: 🐶 → 🐕</p>
+				<p>Example Input: 🐶 = ?</p>
+				<p>Correct Answer: 🐕</p>
+				<button onclick="startGame()">Start Game!</button>
+			</div>
+
+			<div id="gameScreen" style="display: none">
+				<div class="emoji-large" id="currentRule"></div>
+				<div id="taskDisplay"></div>
+				<button onclick="submitAnswer()" id="actionButton">
+					Translate Now!
+				</button>
+				<div id="result"></div>
+			</div>
+		</div>
+
+		<script>
+			let currentRound = 0;
+			const rules = [
+				{
+					input: "🌧️🔥",
+					output: "🚪",
+					description: "Replace RAIN-FIRE with DOOR",
+				},
+				{
+					input: "🐇🎩",
+					output: "🎉",
+					description: "Replace RABBIT-HAT with PARTY",
+				},
+				{
+					input: "👁️🍯",
+					output: "🐝",
+					description: "Replace EYE-HONEY with BEE",
+				},
+			];
+
+			function startGame() {
+				document.getElementById("instructions").style.display = "none";
+				document.getElementById("gameScreen").style.display = "block";
+				nextRound();
+			}
+
+			function nextRound() {
+				if (currentRound >= rules.length) return endGame();
+
+				document.getElementById("result").textContent = "";
+				document.querySelector("#actionButton").style.display = "block";
+
+				document.getElementById("currentRule").textContent = `📜 RULE ${
+					currentRound + 1
+				}: ${rules[currentRound].description}`;
+				document.getElementById("taskDisplay").innerHTML = `
+                <div class="emoji-large">${rules[currentRound].input}</div>
+                <p>↓ Translate using the rule above ↓</p>
+            `;
+			}
+
+			function submitAnswer() {
+				const userAnswer = prompt(
+					`What does ${rules[currentRound].input} become?\n(Type the emoji)`
+				);
+
+				if (userAnswer === rules[currentRound].output) {
+					document.getElementById("result").textContent =
+						"✅ Correct! You followed the rule perfectly!\n";
+					document.getElementById(
+						"result"
+					).textContent += `But did you understand what ${rules[currentRound].input} really means?`;
+				} else {
+					document.getElementById("result").textContent = "";
+					document.getElementById("result").textContent +=
+						"❌ Incorrect translation\n";
+					document.getElementById(
+						"result"
+					).textContent += `Remember: ${rules[currentRound].description}`;
+					
+					return;
+				}
+
+				document.querySelector("#actionButton").style.display = "none";
+
+				// Create a dedicated countdown element
+				let count = 3;
+				const countdownElem = document.createElement("p");
+				countdownElem.id = "countdown";
+				document.getElementById("result").appendChild(countdownElem);
+
+				const interval = setInterval(() => {
+					countdownElem.textContent = `Next question in ${count}...`;
+					count--;
+					if (count < 0) {
+						clearInterval(interval);
+						countdownElem.remove();
+						currentRound++;
+						nextRound();
+					}
+				}, 1000);
+			}
+
+			function endGame() {
+				document.getElementById("gameScreen").innerHTML = `
+                <h2>🎉 Game Over!</h2>
+                <p>You successfully followed all the rules!</p>
+                <div class="instructions">
+                    <h3>The actual meanings you were translating:</h3>
+                    <ul>
+                        <li>🌧️🔥 = "Steam"</li>
+                        <li>🐇🎩 = "Magic trick"</li>
+                        <li>👁️🍯 = "Sweet look"</li>
+                    </ul>
+                    <p>You followed syntax perfectly...</p>
+                    <p><strong>...without ever understanding semantics!</strong></p>
+                    <p>This is basically how AI language models work</p>
+                </div>
+            `;
+			}
+		</script>
+	</body>
+</html>
