Skip to content

Commit 3934c77

Browse files
TobiasMue91TobiasMue91
authored
Merge pull request #3 from TobiasMue91/claude/improve-human-benchmark-games-01GXuXoYLXSVUoMsXzcxmNuP
Enhance human benchmark games quality
2 parents 1b6b00f + ec797e9 commit 3934c77

38 files changed

+737
-2083
lines changed

‎games/human_benchmark/html/aim_test.html‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
1-
<div id="aim-test" class="test-screen tab-content">
2-
<h2 class="text-3xl font-bold mb-4">Aim Test</h2>
3-
<div class="aim-button-container flex justify-center mt-12">
4-
<button id="start-aim-test"
5-
class="text-2xl waves-effect waves-light mt-4 font-bold bg-green-500 hover:bg-green-700 text-white rounded px-8 py-4">
6-
Start Test
7-
</button>
8-
</div>
9-
<div id="aim-area" class="relative w-1000 h-500 bg-gray-100 m-auto hidden">
10-
<div id="target" class="absolute w-20 h-20 bg-red-500 rounded-full m-auto hidden cursor-pointer"></div>
11-
</div>
12-
<div id="target-counter" class="mt-12 text-2xl">Targets left: 30</div>
13-
<div id="average-time" class="mt-12 text-2xl"></div>
1+
<div id="aim-test" class="test-screen tab-content max-w-6xl mx-auto px-4">
2+
<h2 class="text-4xl font-bold mb-6 text-white">Aim Test</h2>
3+
<div class="mb-6"><p class="text-gray-300 mb-4">Click the targets as fast as you can!</p><div class="flex gap-4 justify-center flex-wrap"><div class="level-badge">Remaining: <span id="aim-remaining" class="text-blue-400">30</span></div><div class="level-badge">Best: <span id="aim-best" class="text-green-400">-</span></div></div></div>
4+
<div class="aim-button-container flex justify-center mb-6"><button id="start-aim-test" class="btn-game btn-success">Start Test</button></div>
5+
<div id="aim-area" class="relative w-full bg-gray-800 rounded-2xl border-2 border-gray-700 hidden" style="height:500px;max-height:66vh;"><div id="target" class="absolute w-16 h-16 bg-red-500 rounded-full cursor-pointer hidden transition-all duration-200 hover:scale-110" style="box-shadow:0 0 20px rgba(239,68,68,0.6);"></div></div>
6+
<div id="aim-result" class="mt-6 text-center hidden"><div class="score-display" id="average-time"></div></div>
147
</div>

‎games/human_benchmark/html/blind_timer_challenge.html‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,5 @@
1-
<div id="blind-timer-challenge" class="test-screen tab-content">
2-
<h2 class="text-3xl font-bold mb-4">Blind Timer Challenge</h2>
3-
<div class="timer-button-container flex flex-col items-center mt-12">
4-
<p id="instructions" class="text-xl mb-4">Click 'Start' and try to click 'Stop' exactly 10 seconds later!</p>
5-
<button id="start-timer"
6-
class="text-2xl waves-effect waves-light mt-4 font-bold bg-green-500 hover:bg-green-700 text-white rounded px-8 py-4">
7-
Start
8-
</button>
9-
<button id="stop-timer"
10-
class="text-2xl waves-effect waves-light mt-4 font-bold bg-red-500 hover:bg-red-700 text-white rounded px-8 py-4 opacity-50 cursor-not-allowed"
11-
disabled>
12-
Stop
13-
</button>
14-
</div>
15-
<div id="result" class="mt-12 text-2xl"></div>
16-
<div id="score" class="mt-4 text-2xl"></div>
1+
<div id="blind-timer-challenge" class="test-screen tab-content max-w-4xl mx-auto px-4">
2+
<h2 class="text-4xl font-bold mb-6 text-white">Blind Timer Challenge</h2>
3+
<div class="mb-6"><p class="text-gray-300 mb-4">Try to stop the timer at exactly 10 seconds without seeing the time!</p><div class="flex gap-4 justify-center flex-wrap"><div class="level-badge">Attempts: <span id="btc-attempts" class="text-blue-400">0</span></div><div class="level-badge">Best: <span id="btc-best" class="text-green-400">-</span> ms</div></div></div>
4+
<div class="stat-card mb-6 flex flex-col items-center justify-center min-h-[300px]"><p id="btc-instruction" class="text-2xl font-bold text-gray-300 mb-8 text-center">Click START and try to click STOP exactly 10 seconds later!</p><div class="flex gap-4"><button id="btc-start" class="btn-game" style="background:#10b981;">START</button><button id="btc-stop" class="btn-game opacity-50 cursor-not-allowed" disabled style="background:#ef4444;">STOP</button></div><p id="btc-result" class="text-3xl font-bold mt-8"></p></div>
175
</div>

‎games/human_benchmark/html/button_mashing.html‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
1-
<div id="button-mashing-test" class="test-screen tab-content">
2-
<h2 class="text-3xl font-bold mb-4">Button Mashing Test</h2>
3-
<div id="mashing-area" class="mb-4 relative">
4-
<div id="mashing-button-area" class="cursor-pointer w-full h-60 bg-blue-500 flex flex-col items-center justify-center">
5-
<p id="mashing-instruction" class="mb-2 text-4xl text-bold text-white pointer-events-none">Click here or press any key to start mashing!</p>
6-
<p id="mashing-counter" class="text-6xl text-bold text-white pointer-events-none">0</p>
7-
</div>
8-
<p id="mashing-timer" class="mb-2 absolute top-4 right-4 text-white text-2xl font-bold">10.000</p>
9-
</div>
10-
<div id="mashing-results-area" class="hidden">
11-
<p>Button Mashed: <span id="mashed-button"></span></p>
12-
<p>Total Presses: <span id="total-presses"></span></p>
13-
<p>Presses per Minute: <span id="presses-per-minute"></span></p>
14-
</div>
1+
<div id="button-mashing-test" class="test-screen tab-content max-w-4xl mx-auto px-4">
2+
<h2 class="text-4xl font-bold mb-6 text-white">Button Mashing Test</h2>
3+
<div class="mb-6"><p class="text-gray-300 mb-4">Mash a button or key as fast as you can for 10 seconds!</p><div class="flex gap-4 justify-center flex-wrap"><div class="level-badge">Presses: <span id="bm-count" class="text-blue-400">0</span></div><div class="level-badge">Time: <span id="bm-timer" class="text-green-400">10.00s</span></div><div class="level-badge">Best: <span id="bm-best" class="text-yellow-400">-</span></div></div></div>
4+
<div id="bm-game-area" class="stat-card cursor-pointer flex flex-col items-center justify-center min-h-[300px] mb-6 bg-blue-600 hover:bg-blue-700 transition-colors select-none"><p id="bm-instruction" class="text-3xl font-bold text-white mb-4 pointer-events-none">Click or press any key to start!</p><p id="bm-counter" class="text-7xl font-extrabold text-white pointer-events-none">0</p></div>
155
</div>

‎games/human_benchmark/html/chimp_test.html‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
<div id="chimp-test" class="test-screen tab-content">
2-
<h2 class="text-3xl font-bold mb-4">Chimp Test</h2>
3-
<div class="chimp-button-container flex justify-center mt-12">
4-
<button id="start-chimp-test"
5-
class="text-2xl mt-4 font-bold bg-green-500 hover:bg-green-700 text-white rounded px-8 py-4 transition duration-300">
6-
Start Test
7-
</button>
8-
</div>
9-
<div class="chimp-grid grid gap-2.5 max-w-2xl mx-auto mt-12 grid-cols-5 md:grid-cols-8 grid-rows-5"></div>
1+
<div id="chimp-test" class="test-screen tab-content max-w-4xl mx-auto px-4">
2+
<h2 class="text-4xl font-bold mb-6 text-white">Chimp Test</h2>
3+
<div class="mb-6"><p class="text-gray-300 mb-4">Click the numbers in ascending order. After the first click, the numbers will hide!</p><div class="flex gap-4 justify-center flex-wrap"><div class="level-badge">Level: <span id="chimp-level" class="text-blue-400">1</span></div><div class="level-badge">Best: <span id="chimp-best" class="text-green-400">-</span></div><div class="level-badge" id="chimp-strikes-container"><span id="chimp-strikes" class="text-red-400">3</span> ❤️ Lives</div></div></div>
4+
<div class="chimp-button-container flex justify-center mb-6"><button id="start-chimp-test" class="btn-game btn-success">Start Test</button></div>
5+
<div class="chimp-grid grid gap-2.5 max-w-2xl mx-auto grid-cols-5 md:grid-cols-8 grid-rows-5"></div>
106
</div>

‎games/human_benchmark/html/emotion_recognition.html‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,7 @@
1-
<div id="emotion-recognition-test" class="test-screen tab-content">
2-
<h2 class="text-3xl font-bold mb-4">Emotion Recognition Test</h2>
3-
<p id="emo-timer" class="text-lg font-semibold"></p>
4-
<div id="image-area" class="mb-4">
5-
<img id="emotion-image" src="" alt="emotion" class="max-w-sm mx-auto hidden">
6-
</div>
7-
<div id="options-area" class="flex flex-wrap justify-center max-w-lg mx-auto hidden">
8-
<!-- Buttons for each emotion -->
9-
</div>
10-
<div id="score-area" class="hidden">
11-
<p>Your Score: <span id="emo-score"></span></p>
12-
</div>
13-
<button id="start-emotion-test"
14-
class="text-2xl font-bold bg-blue-500 hover:bg-blue-700 text-white rounded px-8 py-4">
15-
Start Test
16-
</button>
1+
<div id="emotion-recognition-test" class="test-screen tab-content max-w-4xl mx-auto px-4">
2+
<h2 class="text-4xl font-bold mb-6 text-white">Emotion Recognition Test</h2>
3+
<div class="mb-6"><p class="text-gray-300 mb-4">Identify the emotion shown in each image as quickly as you can!</p><div class="flex gap-4 justify-center flex-wrap"><div class="level-badge">Score: <span id="emo-score" class="text-blue-400">0</span></div><div class="level-badge">Time: <span id="emo-timer" class="text-yellow-400">60s</span></div><div class="level-badge">Lives: <span id="emo-lives" class="text-red-400">3</span> ❤️</div><div class="level-badge">Best: <span id="emo-best" class="text-green-400">-</span></div></div></div>
4+
<div id="emo-image-area" class="stat-card mb-6 hidden flex items-center justify-center min-h-[300px]"><img id="emo-image" src="" alt="emotion" class="max-w-sm rounded-lg"></div>
5+
<div id="emo-options-area" class="hidden flex flex-wrap justify-center gap-3 mb-6"></div>
6+
<button id="emo-start" class="btn-game btn-success">Start Test</button>
177
</div>

‎games/human_benchmark/html/math_test.html‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,7 @@
1-
<div id="math-test" class="test-screen tab-content">
2-
<h2 class="text-3xl font-bold mb-4">Math Test</h2>
3-
<div id="math-timer" class="text-xl font-bold mb-2">Time Left: 60s</div>
4-
<div id="math-question" class="mb-4"></div>
5-
<div class="flex flex-col w-1/2 mx-auto items-center">
6-
<input type="text" id="math-answer" class="border-2 border-gray-300 mb-4" placeholder="Your answer">
7-
</div>
8-
<div id="math-results" class="hidden">
9-
<p>Your Score:</p>
10-
<span id="math-score"></span>
11-
</div>
12-
<button id="start-math-test"
13-
class="text-2xl waves-effect waves-light mt-4 font-bold bg-green-500 hover:bg-green-700 text-white rounded px-8 py-4">
14-
Start Test
15-
</button>
1+
<div id="math-test" class="test-screen tab-content max-w-4xl mx-auto px-4">
2+
<h2 class="text-4xl font-bold mb-6 text-white">Math Test</h2>
3+
<div class="mb-6"><p class="text-gray-300 mb-4">Solve as many math problems as you can in 60 seconds!</p><div class="flex gap-4 justify-center flex-wrap"><div class="level-badge">Score: <span id="mt-score" class="text-blue-400">0</span></div><div class="level-badge">Time: <span id="mt-timer" class="text-green-400">60s</span></div><div class="level-badge">Best: <span id="mt-best" class="text-yellow-400">-</span></div></div></div>
4+
<div id="mt-question-area" class="stat-card text-6xl font-extrabold flex items-center justify-center min-h-[200px] mb-6 hidden"></div>
5+
<div id="mt-answer-area" class="hidden flex flex-col items-center gap-4 mb-6"><input id="mt-input" class="px-6 py-4 text-3xl text-center bg-gray-700 border-2 border-gray-600 rounded-xl text-white focus:border-blue-500 focus:outline-none w-64" type="number" placeholder="?"><button id="mt-submit" class="btn-game">Submit</button></div>
6+
<button id="mt-start" class="btn-game btn-success">Start Test</button>
167
</div>

‎games/human_benchmark/html/number_memory.html‎

Lines changed: 7 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,8 @@
1-
<div id="number-memory-test" class="test-screen tab-content">
2-
<h2 class="text-3xl font-bold mb-4">Number Memory Test</h2>
3-
<div id="number-area"
4-
class="card-panel bg-gray-200 text-7xl text-gray-900 font-extrabold flex items-center justify-center min-h-[200px]"></div>
5-
<div id="progress-bar-container" class="w-1/2 h-5 bg-gray-300 rounded-full mx-auto my-4">
6-
<div id="progress-bar" class="w-full h-full bg-blue-700 rounded-full"></div>
7-
</div>
8-
<div id="answer-area" class="flex flex-col w-1/2 mx-auto items-center">
9-
<input id="answer-input" class="hidden" type="number" placeholder="Enter numbers here...">
10-
<button id="submit-answer" class="hidden text-2xl bg-blue-500 px-8 py-4 waves-effect waves-light">Submit
11-
</button>
12-
</div>
13-
<div id="results-area" class="hidden flex flex-col items-center">
14-
<p class="mb-2">Your Level:</p>
15-
<span id="number-level"></span>
16-
</div>
17-
<button id="start-number-memory-test"
18-
class="text-2xl waves-effect waves-light mt-4 font-bold bg-green-500 hover:bg-green-700 text-white rounded px-8 py-4">
19-
Start Test
20-
</button>
1+
<div id="number-memory-test" class="test-screen tab-content max-w-4xl mx-auto px-4">
2+
<h2 class="text-4xl font-bold mb-6 text-white">Number Memory Test</h2>
3+
<div class="mb-6"><p class="text-gray-300 mb-4">Memorize the number shown, then enter it correctly to advance!</p><div class="flex gap-4 justify-center flex-wrap"><div class="level-badge">Level: <span id="nm-level" class="text-blue-400">1</span></div><div class="level-badge">Best: <span id="nm-best" class="text-green-400">-</span></div></div></div>
4+
<div id="nm-number-area" class="stat-card text-6xl font-extrabold flex items-center justify-center min-h-[250px] mb-6 transition-all duration-300"></div>
5+
<div id="nm-progress-container" class="mb-6 hidden"><div class="hb-progress-bar"><div class="hb-progress-fill" id="nm-progress"></div></div></div>
6+
<div id="nm-answer-area" class="flex flex-col items-center gap-4 mb-6"><input id="nm-input" class="hidden px-6 py-4 text-3xl text-center bg-gray-700 border-2 border-gray-600 rounded-xl text-white focus:border-blue-500 focus:outline-none w-full max-w-md" type="text" inputmode="numeric" pattern="[0-9]*" placeholder="Enter the number..."><button id="nm-submit" class="hidden btn-game">Submit</button></div>
7+
<button id="nm-start" class="btn-game btn-success">Start Test</button>
218
</div>

‎games/human_benchmark/html/pattern_memory.html‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
1-
<div id="pattern-memory-test" class="test-screen tab-content">
2-
<h2 class="text-3xl font-bold mb-4">Pattern Memory Test</h2>
3-
<div class="pattern-grid-container flex justify-center mt-12">
4-
<div class="pattern-grid grid gap-2.5 mx-auto">
5-
</div>
6-
</div>
7-
<div class="status-bar mt-4">
8-
Lives: <span id="lives">3</span>
9-
</div>
10-
<button id="start-pattern-memory-test"
11-
class="text-2xl waves-effect waves-light mt-4 font-bold bg-green-500 hover:bg-green-700 text-white rounded px-8 py-4">
12-
Start Test
13-
</button>
1+
<div id="pattern-memory-test" class="test-screen tab-content max-w-4xl mx-auto px-4">
2+
<h2 class="text-4xl font-bold mb-6 text-white">Pattern Memory Test</h2>
3+
<div class="mb-6"><p class="text-gray-300 mb-4">Memorize the pattern, then click the cells that were highlighted!</p><div class="flex gap-4 justify-center flex-wrap"><div class="level-badge">Level: <span id="pm-level" class="text-blue-400">1</span></div><div class="level-badge">Lives: <span id="pm-lives" class="text-red-400">3</span> ❤️</div><div class="level-badge">Best: <span id="pm-best" class="text-green-400">-</span></div></div></div>
4+
<div class="flex justify-center mb-6"><div class="pattern-grid grid gap-3"></div></div>
5+
<button id="pm-start" class="btn-game btn-success">Start Test</button>
146
</div>

‎games/human_benchmark/html/reaction_time.html‎

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,10 @@
1-
<div id="reaction-time-test" class="test-screen tab-content">
2-
<h2 class="text-3xl font-bold mb-4">Reaction Time Test</h2>
3-
<div id="wait-area" class="mb-4 relative">
4-
<div id="color-dummy" class="w-full h-60 bg-red-500"></div>
5-
<div id="color-area" class="cursor-pointer w-full absolute top-0 h-60 bg-red-500"></div>
6-
<p class="mb-2 absolute w-full top-8 text-white pointer-events-none">After clicking "Start Test" wait until
7-
the color turns green and click here</p>
8-
</div>
9-
<div id="click-area" class="hidden relative">
10-
<div id="click-color-area" class="cursor-pointer w-full absolute h-60 bg-green-500"></div>
11-
<p class="mb-2 text-4xl text-bold absolute w-full top-8 text-white pointer-events-none">NOW! CLICK!!!</p>
12-
</div>
13-
<div id="results-area" class="hidden">
14-
<p>Reaction Time 🕑</p>
15-
<span id="reaction-time"></span>
16-
</div>
17-
<button id="start-reaction-time-test"
18-
class="text-2xl waves-effect waves-light mt-4 font-bold bg-green-500 hover:bg-green-700 text-white rounded px-8 py-4">
19-
Start Test
20-
</button>
1+
<div id="reaction-time-test" class="test-screen tab-content max-w-4xl mx-auto px-4">
2+
<h2 class="text-4xl font-bold mb-6 text-white">Reaction Time Test</h2>
3+
<div class="mb-6"><p class="text-gray-300 mb-2">Test your visual reflexes. Click as soon as the screen turns green!</p><div id="rt-stats" class="flex gap-4 justify-center text-sm"><div class="stat-card py-2 px-4"><span class="text-gray-400">Attempts:</span> <span id="rt-attempts" class="font-bold text-blue-400">0</span></div><div class="stat-card py-2 px-4"><span class="text-gray-400">Best:</span> <span id="rt-best" class="font-bold text-green-400">-</span></div></div></div>
4+
<div id="rt-game-area" class="relative rounded-2xl overflow-hidden border-4 transition-all duration-300" style="min-height:400px;border-color:#dc2626;">
5+
<div id="rt-content" class="absolute inset-0 flex items-center justify-center text-center p-8 cursor-pointer transition-all duration-300" style="background-color:#dc2626;">
6+
<div id="rt-message" class="text-white text-2xl font-bold pointer-events-none">Click to Start</div>
7+
</div>
8+
</div>
9+
<div class="mt-6 flex gap-3 justify-center flex-wrap"><button id="rt-retry" class="btn-game hidden">Try Again</button><button id="rt-home" class="btn-game btn-secondary hidden">Home</button></div>
2110
</div>

‎games/human_benchmark/html/sequence_memory.html‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,6 @@
1-
<div id="sequence-memory-test" class="test-screen tab-content">
2-
<h2 class="text-3xl font-bold mb-4">Sequence Memory Test</h2>
3-
<div class="grid-container flex justify-center mt-12">
4-
<div id="grid" class="grid grid-cols-3 gap-2.5 mx-auto">
5-
<div class="square bg-gray-200 w-16 h-16 border rounded-xl cursor-pointer"></div>
6-
<div class="square bg-gray-200 w-16 h-16 border rounded-xl cursor-pointer"></div>
7-
<div class="square bg-gray-200 w-16 h-16 border rounded-xl cursor-pointer"></div>
8-
<div class="square bg-gray-200 w-16 h-16 border rounded-xl cursor-pointer"></div>
9-
<div class="square bg-gray-200 w-16 h-16 border rounded-xl cursor-pointer"></div>
10-
<div class="square bg-gray-200 w-16 h-16 border rounded-xl cursor-pointer"></div>
11-
<div class="square bg-gray-200 w-16 h-16 border rounded-xl cursor-pointer"></div>
12-
<div class="square bg-gray-200 w-16 h-16 border rounded-xl cursor-pointer"></div>
13-
<div class="square bg-gray-200 w-16 h-16 border rounded-xl cursor-pointer"></div>
14-
</div>
15-
</div>
16-
<button id="start-sequence-memory-test"
17-
class="text-2xl waves-effect waves-light mt-4 font-bold bg-green-500 hover:bg-green-700 text-white rounded px-8 py-4">
18-
Start Test
19-
</button>
20-
<p class="points mt-4">Points: 0</p>
1+
<div id="sequence-memory-test" class="test-screen tab-content max-w-4xl mx-auto px-4">
2+
<h2 class="text-4xl font-bold mb-6 text-white">Sequence Memory Test</h2>
3+
<div class="mb-6"><p class="text-gray-300 mb-4">Remember the pattern! Repeat the sequence of lit squares.</p><div class="flex gap-4 justify-center flex-wrap"><div class="level-badge">Level: <span id="seq-level" class="text-blue-400">1</span></div><div class="level-badge">Best: <span id="seq-best" class="text-green-400">-</span></div></div></div>
4+
<div class="flex justify-center mb-6"><button id="start-sequence-memory-test" class="btn-game btn-success">Start Test</button></div>
5+
<div id="seq-grid" class="grid grid-cols-3 gap-4 max-w-md mx-auto"><div class="square" data-index="0"></div><div class="square" data-index="1"></div><div class="square" data-index="2"></div><div class="square" data-index="3"></div><div class="square" data-index="4"></div><div class="square" data-index="5"></div><div class="square" data-index="6"></div><div class="square" data-index="7"></div><div class="square" data-index="8"></div></div>
216
</div>

0 commit comments

Comments
 (0)