mirror of
https://github.com/ION606/COGMOD-HWI.git
synced 2026-05-14 22:16:57 +00:00
171 lines
4.6 KiB
HTML
171 lines
4.6 KiB
HTML
<!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>
|