mirror of
https://github.com/ION606/COGMOD-HWI.git
synced 2026-05-14 22:16:57 +00:00
Compare commits
2 Commits
f15057e5ed
...
6a7fc20df8
| Author | SHA1 | Date | |
|---|---|---|---|
 ION606
|
6a7fc20df8 | ||
 ION606
|
e6c9d88561 |
Binary file not shown.
@@ -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>
|
||||
Reference in New Issue
Block a user