Skip to content

Commit b53e27b

Browse files
TobiasMue91TobiasMue91
committed
- overhaul stroop test UI with responsive design and visual improvements
- implement visual timer bar with color transitions - refactor game initialization and color generation logic - fix color button handling with proper data attributes - add game over on incorrect answers instead of timer-only
1 parent fde0102 commit b53e27b

File tree

3 files changed

+114
-55
lines changed

3 files changed

+114
-55
lines changed

‎games/human_benchmark/html/stroop_test.html‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,46 @@
11
<div id="stroop-test" class="test-screen tab-content">
22
<h2 class="text-3xl font-bold mb-4">Stroop Test</h2>
3+
34
<div class="start-button-container flex justify-center mt-12">
45
<button id="start-stroop-test"
56
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">
67
Start Test
78
</button>
89
</div>
9-
<div id="stroop-word" class="text-4xl hidden mt-12 font-bold"></div>
10-
<div id="controls" class="hidden">
11-
<div class="mb-4 text-2xl">Which color is the word above?</div>
12-
<div id="color-buttons" class="flex justify-center mt-12">
13-
<!-- buttons will be added dynamically -->
10+
11+
<div id="game-area" class="hidden mt-8 max-w-2xl mx-auto">
12+
<!-- Timer bar with better visual indicators -->
13+
<div id="progress-container" class="w-full h-6 bg-gray-200 rounded-full mb-6 border border-gray-400 shadow-inner">
14+
<div id="progress-bar" class="h-full bg-blue-600 rounded-full transition-all duration-1000 relative" style="width: 100%;">
15+
<div class="absolute inset-0 bg-stripes opacity-20"></div>
16+
</div>
1417
</div>
15-
<div id="stroop-timer" class="mt-4">Time remaining: 30 seconds</div>
16-
<div id="score" class="mt-4">Score: 0</div>
18+
19+
<div class="flex justify-center my-10">
20+
<div id="stroop-word" class="text-5xl font-bold"></div>
21+
</div>
22+
23+
<div id="controls">
24+
<div class="mb-6 text-2xl">Which color is the word above?</div>
25+
<div id="color-buttons" class="flex flex-wrap justify-center gap-3 mb-8">
26+
<!-- buttons will be added dynamically -->
27+
</div>
28+
29+
<!-- Compact stats container -->
30+
<div class="flex justify-center gap-20 w-full mt-2 py-2 border-t border-gray-300">
31+
<div id="stroop-timer" class="text-xl font-medium">Time: 30s</div>
32+
<div id="score" class="text-xl font-medium">Score: 0</div>
33+
</div>
34+
</div>
35+
</div>
36+
37+
<div id="results" class="hidden mt-8 text-center">
38+
<h3 class="text-2xl font-bold mb-4">Game Over!</h3>
39+
<p id="final-score" class="text-xl mb-4">Score: 0</p>
40+
41+
<button id="play-again"
42+
class="text-xl mt-4 bg-green-500 hover:bg-green-700 text-white rounded px-6 py-3">
43+
Play Again
44+
</button>
1745
</div>
18-
</div>
46+
</div>

‎games/human_benchmark/js/stroop_test.js‎

Lines changed: 55 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,102 @@
1-
// STROOP TEST
21
$(function () {
32
const colors = ['red', 'green', 'blue', 'orange', 'purple', 'pink'];
43
let timer, score, interval;
54

65
function initializeGame() {
76
timer = 30;
87
score = 0;
9-
$('#start-stroop-test').show();
10-
$('#controls, #stroop-word').addClass('hidden');
11-
$('#stroop-timer').text(`Time remaining: ${timer} seconds`);
8+
9+
$('#progress-bar').css('width', '100%').removeClass('bg-yellow-500 bg-red-500').addClass('bg-blue-600');
10+
$('#stroop-timer').text(`Time: ${timer}s`);
1211
$('#score').text(`Score: ${score}`);
12+
13+
$('.start-button-container').show();
14+
$('#game-area, #results').addClass('hidden');
15+
16+
$('#color-buttons').empty();
17+
colors.forEach(color => {
18+
$('#color-buttons').append(
19+
`<button class="bg-${color}-500 hover:bg-${color}-600 active:bg-${color}-700 text-white rounded-md px-6 py-3 font-medium text-lg transition-colors"
20+
data-color="${color}">${color}</button>`
21+
);
22+
});
1323
}
1424

1525
function shuffleArray(array) {
16-
for (let i = array.length - 1; i > 0; i--) {
26+
const newArray = [...array];
27+
for (let i = newArray.length - 1; i > 0; i--) {
1728
const j = Math.floor(Math.random() * (i + 1));
18-
[array[i], array[j]] = [array[j], array[i]];
29+
[newArray[i], newArray[j]] = [newArray[j], newArray[i]];
1930
}
31+
return newArray;
2032
}
2133

2234
function gameOver() {
23-
alert(`Game Over! Your final score is ${score}`);
2435
clearInterval(interval);
25-
saveScore("Stroop Test", score);
26-
initializeGame();
27-
}
2836

37+
$('#final-score').text(`Score: ${score}`);
2938

30-
let displayColor = '';
39+
saveScore("Stroop Test", score);
40+
41+
$('#game-area').addClass('hidden');
42+
$('#results').removeClass('hidden');
43+
}
3144

3245
function generateStroop() {
33-
const actualColor = colors[Math.floor(Math.random() * colors.length)];
34-
const oldDisplayColor = displayColor;
35-
displayColor = colors[Math.floor(Math.random() * colors.length)];
46+
const colorName = colors[Math.floor(Math.random() * colors.length)];
47+
const textColor = colors[Math.floor(Math.random() * colors.length)];
3648

3749
const $stroop = $('#stroop-word');
38-
$stroop.removeClass(`text-${oldDisplayColor}-500`).addClass(`text-${displayColor}-500`);
39-
$stroop.text(actualColor).data('color', displayColor);
4050

41-
shuffledColors = [...colors];
42-
shuffleArray(shuffledColors);
43-
44-
$('#color-buttons').children().each(function (index) {
45-
const oldColor = $(this).data('bg-color'); // Retrieve old color from data attribute
46-
47-
if (oldColor) { // Remove classes only if oldColor exists
48-
$(this).removeClass(`bg-${oldColor}-500 hover:bg-${oldColor}-700 active:bg-${oldColor}-500`);
49-
}
50-
51-
$(this).addClass(`bg-${shuffledColors[index]}-500 hover:bg-${shuffledColors[index]}-700 active:bg-${shuffledColors[index]}-500`)
52-
.text(colors[index])
53-
.data('bg-color', shuffledColors[index]); // Store new color in data attribute
51+
colors.forEach(color => {
52+
$stroop.removeClass(`text-${color}-500`);
5453
});
54+
55+
$stroop.addClass(`text-${textColor}-500`);
56+
$stroop.text(colorName.toUpperCase()).data('color', textColor);
5557
}
5658

57-
// Initialize game state
5859
initializeGame();
5960

60-
// Initial randomized button creation
61-
let shuffledColors = [...colors];
62-
shuffleArray(shuffledColors);
63-
64-
shuffledColors.forEach((color, index) => {
65-
$('#color-buttons').append(`<button class="bg-${color}-500 hover:bg-${color}-700 active:bg-${color}-500 text-white rounded px-8 py-4 ml-1">${colors[index]}</button>`);
66-
});
61+
$('#start-stroop-test').click(function() {
62+
$('.start-button-container').hide();
63+
$('#game-area').removeClass('hidden');
6764

68-
$('#start-stroop-test').click(function () {
69-
$(this).hide();
70-
$('#controls, #stroop-word').removeClass('hidden');
65+
generateStroop();
7166

72-
interval = setInterval(function () {
67+
interval = setInterval(function() {
7368
if (timer > 0) {
7469
timer--;
75-
$('#stroop-timer').text(`Time remaining: ${timer} seconds`);
70+
const percentage = (timer / 30) * 100;
71+
$('#progress-bar').css('width', `${percentage}%`);
72+
73+
if (timer <= 10) {
74+
$('#progress-bar').removeClass('bg-blue-600 bg-yellow-500').addClass('bg-red-500');
75+
} else if (timer <= 20) {
76+
$('#progress-bar').removeClass('bg-blue-600 bg-red-500').addClass('bg-yellow-500');
77+
}
78+
79+
$('#stroop-timer').text(`Time: ${timer}s`);
7680
} else {
7781
gameOver();
7882
}
7983
}, 1000);
84+
});
8085

81-
generateStroop();
86+
$('#play-again').click(function() {
87+
initializeGame();
8288
});
8389

84-
$('#color-buttons').on('click', 'button', function () {
85-
const chosenColor = $(this).text();
86-
if (chosenColor === $('#stroop-word').data('color')) {
90+
$('#color-buttons').on('click', 'button', function() {
91+
const chosenColor = $(this).data('color');
92+
const correctColor = $('#stroop-word').data('color');
93+
94+
if (chosenColor === correctColor) {
8795
score++;
8896
$('#score').text(`Score: ${score}`);
97+
generateStroop();
8998
} else {
9099
gameOver();
91100
}
92-
generateStroop();
93101
});
94102
});

‎games/human_benchmark/styles.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,3 +205,26 @@
205205
}
206206
}
207207

208+
/* Stroop Test Styles */
209+
.bg-stripes {
210+
background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.3) 10px, rgba(255,255,255,.3) 20px);
211+
}
212+
213+
#progress-bar {
214+
transition: width 1s linear, background-color 0.5s ease;
215+
}
216+
217+
#stroop-word {
218+
border-radius: 8px;
219+
background: white;
220+
border: solid 3px #333;
221+
padding: 2rem 3rem;
222+
display: inline-block;
223+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
224+
min-width: 240px;
225+
letter-spacing: 1px;
226+
}
227+
228+
.color-button {
229+
transition: background-color 0.2s ease;
230+
}

0 commit comments

Comments
 (0)