Hugging Face's logo

Spaces:
SaidAmchghal
/
trifocus
Running

App Files Community
SaidAmchghal commited on
Commit
73c2f0b
·
verified ·
1 Parent(s): dfe7ba4

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +329 -77
  2. prompts.txt +2 -1
index.html CHANGED
@@ -79,6 +79,38 @@
79
  from { opacity: 0; transform: translateY(20px); }
80
  to { opacity: 1; transform: translateY(0); }
81
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
82
  </style>
83
  </head>
84
  <body class="bg-gray-50 min-h-screen font-sans">
@@ -90,7 +122,29 @@
90
  <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold text-xl mr-3">TF</div>
91
  <h1 class="text-3xl font-bold text-gray-800">TriFocus</h1>
92
  </div>
93
- <div class="flex space-x-4">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94
  <button id="historyBtn" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700">
95
  <i class="fas fa-history"></i>
96
  </button>
@@ -105,8 +159,8 @@
105
  <!-- Home Screen -->
106
  <section id="homeScreen" class="fade-in">
107
  <div class="bg-white rounded-xl shadow-md p-6 mb-6">
108
- <h2 class="text-2xl font-bold text-gray-800 mb-4">Welcome to TriFocus</h2>
109
- <p class="text-gray-600 mb-6">Train your cognitive skills with our three specialized modules. Choose your training mode below.</p>
110
 
111
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
112
  <div class="bg-blue-50 rounded-lg p-6 border border-blue-100 hover:border-blue-300 transition-all cursor-pointer" onclick="startExpressSession()">
@@ -114,9 +168,9 @@
114
  <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">
115
  <i class="fas fa-bolt"></i>
116
  </div>
117
- <h3 class="text-lg font-semibold text-gray-800">Express Session</h3>
118
  </div>
119
- <p class="text-gray-600 text-sm">Complete all 3 modules in sequence for a comprehensive cognitive assessment.</p>
120
  </div>
121
 
122
  <div class="bg-purple-50 rounded-lg p-6 border border-purple-100 hover:border-purple-300 transition-all cursor-pointer" onclick="showModuleSelection()">
@@ -124,18 +178,18 @@
124
  <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center text-white mr-3">
125
  <i class="fas fa-sliders-h"></i>
126
  </div>
127
- <h3 class="text-lg font-semibold text-gray-800">Individual Module</h3>
128
  </div>
129
- <p class="text-gray-600 text-sm">Focus on one specific cognitive skill with a single module.</p>
130
  </div>
131
  </div>
132
 
133
  <div class="bg-gray-50 rounded-lg p-4">
134
- <h4 class="font-medium text-gray-700 mb-2">Your last session score:</h4>
135
  <div class="flex items-center">
136
  <div class="radial-progress text-blue-500" style="--value: 72; --size: 3rem; --thickness: 4px;">72</div>
137
  <div class="ml-4">
138
- <p class="text-sm text-gray-600">Your focus score was <span class="font-semibold">72/100</span></p>
139
  <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
140
  <div class="bg-blue-500 h-2 rounded-full" style="width: 72%"></div>
141
  </div>
@@ -145,31 +199,31 @@
145
  </div>
146
 
147
  <div class="bg-white rounded-xl shadow-md p-6">
148
- <h2 class="text-xl font-bold text-gray-800 mb-4">Your Progress</h2>
149
  <div class="grid grid-cols-3 gap-4 mb-4">
150
  <div class="text-center">
151
  <div class="radial-progress text-blue-500 mx-auto mb-2" style="--value: 85;">85</div>
152
- <p class="text-xs font-medium text-gray-600">Reaction</p>
153
  </div>
154
  <div class="text-center">
155
  <div class="radial-progress text-purple-500 mx-auto mb-2" style="--value: 68;">68</div>
156
- <p class="text-xs font-medium text-gray-600">Attention</p>
157
  </div>
158
  <div class="text-center">
159
  <div class="radial-progress text-green-500 mx-auto mb-2" style="--value: 76;">76</div>
160
- <p class="text-xs font-medium text-gray-600">Memory</p>
161
  </div>
162
  </div>
163
 
164
  <div class="flex justify-between items-center">
165
  <div>
166
- <p class="text-sm font-medium text-gray-700">Current Level: <span class="font-bold">Novice</span></p>
167
  <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
168
  <div class="bg-yellow-500 h-2 rounded-full" style="width: 45%"></div>
169
  </div>
170
  </div>
171
  <div class="text-right">
172
- <p class="text-xs text-gray-500">Next badge at 100 points</p>
173
  <div class="inline-block bg-yellow-100 rounded-full p-1">
174
  <i class="fas fa-medal text-yellow-500"></i>
175
  </div>
@@ -185,7 +239,7 @@
185
  <button onclick="backToHome()" class="mr-4 p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700">
186
  <i class="fas fa-arrow-left"></i>
187
  </button>
188
- <h2 class="text-2xl font-bold text-gray-800">Select a Module</h2>
189
  </div>
190
 
191
  <div class="grid grid-cols-1 gap-4">
@@ -195,16 +249,16 @@
195
  <i class="fas fa-hand-pointer"></i>
196
  </div>
197
  <div>
198
- <h3 class="text-lg font-semibold text-gray-800">Reaction Tap</h3>
199
- <p class="text-sm text-gray-600">Test your reaction speed</p>
200
  </div>
201
  </div>
202
  <div class="flex justify-between items-center mt-4">
203
  <div class="text-sm">
204
- <span class="font-medium text-gray-700">Best: </span>
205
  <span class="font-bold text-blue-600">215ms</span>
206
  </div>
207
- <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">30% weight</span>
208
  </div>
209
  </div>
210
 
@@ -214,16 +268,16 @@
214
  <i class="fas fa-palette"></i>
215
  </div>
216
  <div>
217
- <h3 class="text-lg font-semibold text-gray-800">Color Match</h3>
218
- <p class="text-sm text-gray-600">Stroop test for selective attention</p>
219
  </div>
220
  </div>
221
  <div class="flex justify-between items-center mt-4">
222
  <div class="text-sm">
223
- <span class="font-medium text-gray-700">Best: </span>
224
  <span class="font-bold text-purple-600">92% accuracy</span>
225
  </div>
226
- <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">40% weight</span>
227
  </div>
228
  </div>
229
 
@@ -233,16 +287,16 @@
233
  <i class="fas fa-brain"></i>
234
  </div>
235
  <div>
236
- <h3 class="text-lg font-semibold text-gray-800">Sequence Recall</h3>
237
- <p class="text-sm text-gray-600">Challenge your working memory</p>
238
  </div>
239
  </div>
240
  <div class="flex justify-between items-center mt-4">
241
  <div class="text-sm">
242
- <span class="font-medium text-gray-700">Best: </span>
243
  <span class="font-bold text-green-600">8 items</span>
244
  </div>
245
- <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">30% weight</span>
246
  </div>
247
  </div>
248
  </div>
@@ -254,23 +308,23 @@
254
  <div class="flex flex-col items-center justify-center h-64">
255
  <h2 id="moduleTitle" class="text-2xl font-bold text-gray-800 mb-8"></h2>
256
  <div class="countdown" id="countdown">3</div>
257
- <p class="text-gray-600 mt-4">Get ready...</p>
258
  </div>
259
  </section>
260
 
261
  <!-- Reaction Tap Game -->
262
  <section id="reactionGame" class="hidden">
263
  <div class="bg-white rounded-xl shadow-md p-6 mb-6">
264
- <h2 class="text-2xl font-bold text-gray-800 mb-2">Reaction Tap</h2>
265
- <p class="text-gray-600 mb-4">Tap the dot as soon as it appears</p>
266
 
267
  <div class="flex justify-between items-center mb-6">
268
  <div>
269
- <span class="text-sm font-medium text-gray-700">Trials: </span>
270
  <span id="reactionTrials" class="font-bold">0/10</span>
271
  </div>
272
  <div>
273
- <span class="text-sm font-medium text-gray-700">Avg. reaction: </span>
274
  <span id="avgReaction" class="font-bold">-</span>
275
  </div>
276
  </div>
@@ -281,7 +335,7 @@
281
 
282
  <div class="mt-6">
283
  <div class="flex justify-between text-sm text-gray-600 mb-1">
284
- <span>Progress</span>
285
  <span id="reactionProgressText">0%</span>
286
  </div>
287
  <div class="w-full bg-gray-200 rounded-full h-2">
@@ -294,16 +348,16 @@
294
  <!-- Stroop Test Game -->
295
  <section id="stroopGame" class="hidden">
296
  <div class="bg-white rounded-xl shadow-md p-6 mb-6">
297
- <h2 class="text-2xl font-bold text-gray-800 mb-2">Color Match</h2>
298
- <p class="text-gray-600 mb-4">Select the color of the text, not the word itself</p>
299
 
300
  <div class="flex justify-between items-center mb-6">
301
  <div>
302
- <span class="text-sm font-medium text-gray-700">Questions: </span>
303
  <span id="stroopTrials" class="font-bold">0/12</span>
304
  </div>
305
  <div>
306
- <span class="text-sm font-medium text-gray-700">Accuracy: </span>
307
  <span id="stroopAccuracy" class="font-bold">-</span>
308
  </div>
309
  </div>
@@ -312,16 +366,16 @@
312
  <div id="stroopQuestion" class="stroop-card bg-white shadow-md text-3xl mb-8">WORD</div>
313
 
314
  <div class="grid grid-cols-2 gap-4">
315
- <div class="stroop-card bg-red-500 text-white" onclick="checkStroopAnswer('red')">Red</div>
316
- <div class="stroop-card bg-blue-500 text-white" onclick="checkStroopAnswer('blue')">Blue</div>
317
- <div class="stroop-card bg-green-500 text-white" onclick="checkStroopAnswer('green')">Green</div>
318
- <div class="stroop-card bg-yellow-500 text-white" onclick="checkStroopAnswer('yellow')">Yellow</div>
319
  </div>
320
  </div>
321
 
322
  <div class="mt-6">
323
  <div class="flex justify-between text-sm text-gray-600 mb-1">
324
- <span>Progress</span>
325
  <span id="stroopProgressText">0%</span>
326
  </div>
327
  <div class="w-full bg-gray-200 rounded-full h-2">
@@ -334,16 +388,16 @@
334
  <!-- Sequence Recall Game -->
335
  <section id="sequenceGame" class="hidden">
336
  <div class="bg-white rounded-xl shadow-md p-6 mb-6">
337
- <h2 class="text-2xl font-bold text-gray-800 mb-2">Sequence Recall</h2>
338
- <p class="text-gray-600 mb-4">Memorize and repeat the sequence</p>
339
 
340
  <div class="flex justify-between items-center mb-6">
341
  <div>
342
- <span class="text-sm font-medium text-gray-700">Level: </span>
343
  <span id="sequenceLevel" class="font-bold">1</span>
344
  </div>
345
  <div>
346
- <span class="text-sm font-medium text-gray-700">Best: </span>
347
  <span id="sequenceBest" class="font-bold">5 items</span>
348
  </div>
349
  </div>
@@ -358,7 +412,7 @@
358
 
359
  <div class="mt-6">
360
  <div class="flex justify-between text-sm text-gray-600 mb-1">
361
- <span>Progress</span>
362
  <span id="sequenceProgressText">0%</span>
363
  </div>
364
  <div class="w-full bg-gray-200 rounded-full h-2">
@@ -375,13 +429,13 @@
375
  <button onclick="backToHome()" class="mr-4 p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700">
376
  <i class="fas fa-arrow-left"></i>
377
  </button>
378
- <h2 class="text-2xl font-bold text-gray-800">Session Results</h2>
379
  </div>
380
 
381
  <div class="flex flex-col items-center mb-8">
382
  <div class="radial-progress text-blue-500 mb-4" style="--value: 78;">78</div>
383
- <h3 class="text-xl font-bold text-gray-800 mb-2">Your Focus Score</h3>
384
- <p class="text-gray-600 mb-6">Better than 65% of your previous sessions</p>
385
 
386
  <div class="w-full bg-gray-100 rounded-full h-4 mb-6">
387
  <div class="bg-gradient-to-r from-blue-500 via-purple-500 to-green-500 h-4 rounded-full" style="width: 78%"></div>
@@ -391,86 +445,86 @@
391
  <div class="grid grid-cols-1 gap-6 mb-8">
392
  <div class="bg-blue-50 rounded-lg p-4">
393
  <div class="flex justify-between items-center mb-2">
394
- <h4 class="font-medium text-gray-700">Reaction Tap</h4>
395
- <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">30%</span>
396
  </div>
397
  <div class="flex justify-between items-center">
398
  <div>
399
- <p class="text-sm text-gray-600">Avg. reaction: <span class="font-semibold">248ms</span></p>
400
- <p class="text-sm text-gray-600">Accuracy: <span class="font-semibold">90%</span></p>
401
  </div>
402
  <div class="text-right">
403
  <div class="text-lg font-bold text-blue-600">24/30</div>
404
- <p class="text-xs text-gray-500">Score</p>
405
  </div>
406
  </div>
407
  </div>
408
 
409
  <div class="bg-purple-50 rounded-lg p-4">
410
  <div class="flex justify-between items-center mb-2">
411
- <h4 class="font-medium text-gray-700">Color Match</h4>
412
- <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">40%</span>
413
  </div>
414
  <div class="flex justify-between items-center">
415
  <div>
416
- <p class="text-sm text-gray-600">Avg. time: <span class="font-semibold">1.8s</span></p>
417
- <p class="text-sm text-gray-600">Accuracy: <span class="font-semibold">83%</span></p>
418
  </div>
419
  <div class="text-right">
420
  <div class="text-lg font-bold text-purple-600">32/40</div>
421
- <p class="text-xs text-gray-500">Score</p>
422
  </div>
423
  </div>
424
  </div>
425
 
426
  <div class="bg-green-50 rounded-lg p-4">
427
  <div class="flex justify-between items-center mb-2">
428
- <h4 class="font-medium text-gray-700">Sequence Recall</h4>
429
- <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">30%</span>
430
  </div>
431
  <div class="flex justify-between items-center">
432
  <div>
433
- <p class="text-sm text-gray-600">Max sequence: <span class="font-semibold">6 items</span></p>
434
- <p class="text-sm text-gray-600">Avg. time: <span class="font-semibold">3.2s</span></p>
435
  </div>
436
  <div class="text-right">
437
  <div class="text-lg font-bold text-green-600">22/30</div>
438
- <p class="text-xs text-gray-500">Score</p>
439
  </div>
440
  </div>
441
  </div>
442
  </div>
443
 
444
  <div class="bg-yellow-50 rounded-lg p-4 border border-yellow-200">
445
- <h4 class="font-medium text-gray-700 mb-2">Recommendations</h4>
446
  <ul class="list-disc pl-5 text-sm text-gray-700 space-y-1">
447
- <li>Practice Color Match to improve your selective attention</li>
448
- <li>Try morning sessions when your reaction time is typically faster</li>
449
- <li>Take a 5-minute break between sessions for better focus</li>
450
  </ul>
451
  </div>
452
  </div>
453
 
454
  <div class="bg-white rounded-xl shadow-md p-6">
455
- <h2 class="text-xl font-bold text-gray-800 mb-4">Earned Badges</h2>
456
  <div class="flex space-x-4">
457
  <div class="text-center">
458
  <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mx-auto mb-2">
459
  <i class="fas fa-bolt text-xl"></i>
460
  </div>
461
- <p class="text-xs font-medium text-gray-600">Quick Reflexes</p>
462
  </div>
463
  <div class="text-center">
464
  <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center text-purple-500 mx-auto mb-2">
465
  <i class="fas fa-brain text-xl"></i>
466
  </div>
467
- <p class="text-xs font-medium text-gray-600">Memory Builder</p>
468
  </div>
469
  <div class="text-center opacity-40">
470
  <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 mx-auto mb-2">
471
  <i class="fas fa-trophy text-xl"></i>
472
  </div>
473
- <p class="text-xs font-medium text-gray-600">Master Focus</p>
474
  </div>
475
  </div>
476
  </div>
@@ -490,7 +544,171 @@
490
  let reactionTimes = [];
491
  let stroopAnswers = [];
492
  let sequenceLevel = 1;
 
493
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
494
  // DOM elements
495
  const homeScreen = document.getElementById('homeScreen');
496
  const moduleSelectionScreen = document.getElementById('moduleSelectionScreen');
@@ -532,13 +750,13 @@
532
  // Set module title
533
  switch(module) {
534
  case 'reaction':
535
- moduleTitle.textContent = 'Reaction Tap';
536
  break;
537
  case 'stroop':
538
- moduleTitle.textContent = 'Color Match';
539
  break;
540
  case 'sequence':
541
- moduleTitle.textContent = 'Sequence Recall';
542
  break;
543
  }
544
 
@@ -873,6 +1091,40 @@
873
  finishModule();
874
  }, 1500);
875
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
876
  </script>
877
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SaidAmchghal/trifocus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
878
  </html>
 
79
  from { opacity: 0; transform: translateY(20px); }
80
  to { opacity: 1; transform: translateY(0); }
81
  }
82
+ .language-selector {
83
+ position: relative;
84
+ display: inline-block;
85
+ }
86
+ .language-dropdown {
87
+ display: none;
88
+ position: absolute;
89
+ right: 0;
90
+ background-color: white;
91
+ min-width: 120px;
92
+ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.1);
93
+ z-index: 1;
94
+ border-radius: 8px;
95
+ overflow: hidden;
96
+ }
97
+ .language-selector:hover .language-dropdown {
98
+ display: block;
99
+ }
100
+ .language-option {
101
+ padding: 10px 16px;
102
+ display: flex;
103
+ align-items: center;
104
+ cursor: pointer;
105
+ transition: background-color 0.2s;
106
+ }
107
+ .language-option:hover {
108
+ background-color: #f3f4f6;
109
+ }
110
+ .language-flag {
111
+ width: 20px;
112
+ margin-right: 8px;
113
+ }
114
  </style>
115
  </head>
116
  <body class="bg-gray-50 min-h-screen font-sans">
 
122
  <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold text-xl mr-3">TF</div>
123
  <h1 class="text-3xl font-bold text-gray-800">TriFocus</h1>
124
  </div>
125
+ <div class="flex space-x-4 items-center">
126
+ <!-- Language Selector -->
127
+ <div class="language-selector">
128
+ <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700 flex items-center">
129
+ <i class="fas fa-globe mr-1"></i>
130
+ <span id="currentLanguage">EN</span>
131
+ </button>
132
+ <div class="language-dropdown mt-1">
133
+ <div class="language-option" onclick="changeLanguage('en')">
134
+ <img src="https://flagcdn.com/w20/gb.png" class="language-flag" alt="English">
135
+ <span>English</span>
136
+ </div>
137
+ <div class="language-option" onclick="changeLanguage('fr')">
138
+ <img src="https://flagcdn.com/w20/fr.png" class="language-flag" alt="Français">
139
+ <span>Français</span>
140
+ </div>
141
+ <div class="language-option" onclick="changeLanguage('ar')">
142
+ <img src="https://flagcdn.com/w20/sa.png" class="language-flag" alt="العربية">
143
+ <span>العربية</span>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
  <button id="historyBtn" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700">
149
  <i class="fas fa-history"></i>
150
  </button>
 
159
  <!-- Home Screen -->
160
  <section id="homeScreen" class="fade-in">
161
  <div class="bg-white rounded-xl shadow-md p-6 mb-6">
162
+ <h2 class="text-2xl font-bold text-gray-800 mb-4" data-i18n="welcome">Welcome to TriFocus</h2>
163
+ <p class="text-gray-600 mb-6" data-i18n="welcome_sub">Train your cognitive skills with our three specialized modules. Choose your training mode below.</p>
164
 
165
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
166
  <div class="bg-blue-50 rounded-lg p-6 border border-blue-100 hover:border-blue-300 transition-all cursor-pointer" onclick="startExpressSession()">
 
168
  <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">
169
  <i class="fas fa-bolt"></i>
170
  </div>
171
+ <h3 class="text-lg font-semibold text-gray-800" data-i18n="express_session">Express Session</h3>
172
  </div>
173
+ <p class="text-gray-600 text-sm" data-i18n="express_desc">Complete all 3 modules in sequence for a comprehensive cognitive assessment.</p>
174
  </div>
175
 
176
  <div class="bg-purple-50 rounded-lg p-6 border border-purple-100 hover:border-purple-300 transition-all cursor-pointer" onclick="showModuleSelection()">
 
178
  <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center text-white mr-3">
179
  <i class="fas fa-sliders-h"></i>
180
  </div>
181
+ <h3 class="text-lg font-semibold text-gray-800" data-i18n="individual_module">Individual Module</h3>
182
  </div>
183
+ <p class="text-gray-600 text-sm" data-i18n="individual_desc">Focus on one specific cognitive skill with a single module.</p>
184
  </div>
185
  </div>
186
 
187
  <div class="bg-gray-50 rounded-lg p-4">
188
+ <h4 class="font-medium text-gray-700 mb-2" data-i18n="last_session">Your last session score:</h4>
189
  <div class="flex items-center">
190
  <div class="radial-progress text-blue-500" style="--value: 72; --size: 3rem; --thickness: 4px;">72</div>
191
  <div class="ml-4">
192
+ <p class="text-sm text-gray-600" data-i18n="score_was">Your focus score was <span class="font-semibold">72/100</span></p>
193
  <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
194
  <div class="bg-blue-500 h-2 rounded-full" style="width: 72%"></div>
195
  </div>
 
199
  </div>
200
 
201
  <div class="bg-white rounded-xl shadow-md p-6">
202
+ <h2 class="text-xl font-bold text-gray-800 mb-4" data-i18n="your_progress">Your Progress</h2>
203
  <div class="grid grid-cols-3 gap-4 mb-4">
204
  <div class="text-center">
205
  <div class="radial-progress text-blue-500 mx-auto mb-2" style="--value: 85;">85</div>
206
+ <p class="text-xs font-medium text-gray-600" data-i18n="reaction">Reaction</p>
207
  </div>
208
  <div class="text-center">
209
  <div class="radial-progress text-purple-500 mx-auto mb-2" style="--value: 68;">68</div>
210
+ <p class="text-xs font-medium text-gray-600" data-i18n="attention">Attention</p>
211
  </div>
212
  <div class="text-center">
213
  <div class="radial-progress text-green-500 mx-auto mb-2" style="--value: 76;">76</div>
214
+ <p class="text-xs font-medium text-gray-600" data-i18n="memory">Memory</p>
215
  </div>
216
  </div>
217
 
218
  <div class="flex justify-between items-center">
219
  <div>
220
+ <p class="text-sm font-medium text-gray-700" data-i18n="current_level">Current Level: <span class="font-bold">Novice</span></p>
221
  <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
222
  <div class="bg-yellow-500 h-2 rounded-full" style="width: 45%"></div>
223
  </div>
224
  </div>
225
  <div class="text-right">
226
+ <p class="text-xs text-gray-500" data-i18n="next_badge">Next badge at 100 points</p>
227
  <div class="inline-block bg-yellow-100 rounded-full p-1">
228
  <i class="fas fa-medal text-yellow-500"></i>
229
  </div>
 
239
  <button onclick="backToHome()" class="mr-4 p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700">
240
  <i class="fas fa-arrow-left"></i>
241
  </button>
242
+ <h2 class="text-2xl font-bold text-gray-800" data-i18n="select_module">Select a Module</h2>
243
  </div>
244
 
245
  <div class="grid grid-cols-1 gap-4">
 
249
  <i class="fas fa-hand-pointer"></i>
250
  </div>
251
  <div>
252
+ <h3 class="text-lg font-semibold text-gray-800" data-i18n="reaction_tap">Reaction Tap</h3>
253
+ <p class="text-sm text-gray-600" data-i18n="reaction_desc">Test your reaction speed</p>
254
  </div>
255
  </div>
256
  <div class="flex justify-between items-center mt-4">
257
  <div class="text-sm">
258
+ <span class="font-medium text-gray-700" data-i18n="best">Best: </span>
259
  <span class="font-bold text-blue-600">215ms</span>
260
  </div>
261
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded" data-i18n="weight">30% weight</span>
262
  </div>
263
  </div>
264
 
 
268
  <i class="fas fa-palette"></i>
269
  </div>
270
  <div>
271
+ <h3 class="text-lg font-semibold text-gray-800" data-i18n="color_match">Color Match</h3>
272
+ <p class="text-sm text-gray-600" data-i18n="stroop_desc">Stroop test for selective attention</p>
273
  </div>
274
  </div>
275
  <div class="flex justify-between items-center mt-4">
276
  <div class="text-sm">
277
+ <span class="font-medium text-gray-700" data-i18n="best">Best: </span>
278
  <span class="font-bold text-purple-600">92% accuracy</span>
279
  </div>
280
+ <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded" data-i18n="weight">40% weight</span>
281
  </div>
282
  </div>
283
 
 
287
  <i class="fas fa-brain"></i>
288
  </div>
289
  <div>
290
+ <h3 class="text-lg font-semibold text-gray-800" data-i18n="sequence_recall">Sequence Recall</h3>
291
+ <p class="text-sm text-gray-600" data-i18n="sequence_desc">Challenge your working memory</p>
292
  </div>
293
  </div>
294
  <div class="flex justify-between items-center mt-4">
295
  <div class="text-sm">
296
+ <span class="font-medium text-gray-700" data-i18n="best">Best: </span>
297
  <span class="font-bold text-green-600">8 items</span>
298
  </div>
299
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded" data-i18n="weight">30% weight</span>
300
  </div>
301
  </div>
302
  </div>
 
308
  <div class="flex flex-col items-center justify-center h-64">
309
  <h2 id="moduleTitle" class="text-2xl font-bold text-gray-800 mb-8"></h2>
310
  <div class="countdown" id="countdown">3</div>
311
+ <p class="text-gray-600 mt-4" data-i18n="get_ready">Get ready...</p>
312
  </div>
313
  </section>
314
 
315
  <!-- Reaction Tap Game -->
316
  <section id="reactionGame" class="hidden">
317
  <div class="bg-white rounded-xl shadow-md p-6 mb-6">
318
+ <h2 class="text-2xl font-bold text-gray-800 mb-2" data-i18n="reaction_tap">Reaction Tap</h2>
319
+ <p class="text-gray-600 mb-4" data-i18n="tap_instruction">Tap the dot as soon as it appears</p>
320
 
321
  <div class="flex justify-between items-center mb-6">
322
  <div>
323
+ <span class="text-sm font-medium text-gray-700" data-i18n="trials">Trials: </span>
324
  <span id="reactionTrials" class="font-bold">0/10</span>
325
  </div>
326
  <div>
327
+ <span class="text-sm font-medium text-gray-700" data-i18n="avg_reaction">Avg. reaction: </span>
328
  <span id="avgReaction" class="font-bold">-</span>
329
  </div>
330
  </div>
 
335
 
336
  <div class="mt-6">
337
  <div class="flex justify-between text-sm text-gray-600 mb-1">
338
+ <span data-i18n="progress">Progress</span>
339
  <span id="reactionProgressText">0%</span>
340
  </div>
341
  <div class="w-full bg-gray-200 rounded-full h-2">
 
348
  <!-- Stroop Test Game -->
349
  <section id="stroopGame" class="hidden">
350
  <div class="bg-white rounded-xl shadow-md p-6 mb-6">
351
+ <h2 class="text-2xl font-bold text-gray-800 mb-2" data-i18n="color_match">Color Match</h2>
352
+ <p class="text-gray-600 mb-4" data-i18n="stroop_instruction">Select the color of the text, not the word itself</p>
353
 
354
  <div class="flex justify-between items-center mb-6">
355
  <div>
356
+ <span class="text-sm font-medium text-gray-700" data-i18n="questions">Questions: </span>
357
  <span id="stroopTrials" class="font-bold">0/12</span>
358
  </div>
359
  <div>
360
+ <span class="text-sm font-medium text-gray-700" data-i18n="accuracy">Accuracy: </span>
361
  <span id="stroopAccuracy" class="font-bold">-</span>
362
  </div>
363
  </div>
 
366
  <div id="stroopQuestion" class="stroop-card bg-white shadow-md text-3xl mb-8">WORD</div>
367
 
368
  <div class="grid grid-cols-2 gap-4">
369
+ <div class="stroop-card bg-red-500 text-white" onclick="checkStroopAnswer('red')" data-i18n="red">Red</div>
370
+ <div class="stroop-card bg-blue-500 text-white" onclick="checkStroopAnswer('blue')" data-i18n="blue">Blue</div>
371
+ <div class="stroop-card bg-green-500 text-white" onclick="checkStroopAnswer('green')" data-i18n="green">Green</div>
372
+ <div class="stroop-card bg-yellow-500 text-white" onclick="checkStroopAnswer('yellow')" data-i18n="yellow">Yellow</div>
373
  </div>
374
  </div>
375
 
376
  <div class="mt-6">
377
  <div class="flex justify-between text-sm text-gray-600 mb-1">
378
+ <span data-i18n="progress">Progress</span>
379
  <span id="stroopProgressText">0%</span>
380
  </div>
381
  <div class="w-full bg-gray-200 rounded-full h-2">
 
388
  <!-- Sequence Recall Game -->
389
  <section id="sequenceGame" class="hidden">
390
  <div class="bg-white rounded-xl shadow-md p-6 mb-6">
391
+ <h2 class="text-2xl font-bold text-gray-800 mb-2" data-i18n="sequence_recall">Sequence Recall</h2>
392
+ <p class="text-gray-600 mb-4" data-i18n="sequence_instruction">Memorize and repeat the sequence</p>
393
 
394
  <div class="flex justify-between items-center mb-6">
395
  <div>
396
+ <span class="text-sm font-medium text-gray-700" data-i18n="level">Level: </span>
397
  <span id="sequenceLevel" class="font-bold">1</span>
398
  </div>
399
  <div>
400
+ <span class="text-sm font-medium text-gray-700" data-i18n="best">Best: </span>
401
  <span id="sequenceBest" class="font-bold">5 items</span>
402
  </div>
403
  </div>
 
412
 
413
  <div class="mt-6">
414
  <div class="flex justify-between text-sm text-gray-600 mb-1">
415
+ <span data-i18n="progress">Progress</span>
416
  <span id="sequenceProgressText">0%</span>
417
  </div>
418
  <div class="w-full bg-gray-200 rounded-full h-2">
 
429
  <button onclick="backToHome()" class="mr-4 p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-700">
430
  <i class="fas fa-arrow-left"></i>
431
  </button>
432
+ <h2 class="text-2xl font-bold text-gray-800" data-i18n="session_results">Session Results</h2>
433
  </div>
434
 
435
  <div class="flex flex-col items-center mb-8">
436
  <div class="radial-progress text-blue-500 mb-4" style="--value: 78;">78</div>
437
+ <h3 class="text-xl font-bold text-gray-800 mb-2" data-i18n="focus_score">Your Focus Score</h3>
438
+ <p class="text-gray-600 mb-6" data-i18n="better_than">Better than 65% of your previous sessions</p>
439
 
440
  <div class="w-full bg-gray-100 rounded-full h-4 mb-6">
441
  <div class="bg-gradient-to-r from-blue-500 via-purple-500 to-green-500 h-4 rounded-full" style="width: 78%"></div>
 
445
  <div class="grid grid-cols-1 gap-6 mb-8">
446
  <div class="bg-blue-50 rounded-lg p-4">
447
  <div class="flex justify-between items-center mb-2">
448
+ <h4 class="font-medium text-gray-700" data-i18n="reaction_tap">Reaction Tap</h4>
449
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded" data-i18n="weight">30%</span>
450
  </div>
451
  <div class="flex justify-between items-center">
452
  <div>
453
+ <p class="text-sm text-gray-600" data-i18n="avg_reaction">Avg. reaction: <span class="font-semibold">248ms</span></p>
454
+ <p class="text-sm text-gray-600" data-i18n="accuracy">Accuracy: <span class="font-semibold">90%</span></p>
455
  </div>
456
  <div class="text-right">
457
  <div class="text-lg font-bold text-blue-600">24/30</div>
458
+ <p class="text-xs text-gray-500" data-i18n="score">Score</p>
459
  </div>
460
  </div>
461
  </div>
462
 
463
  <div class="bg-purple-50 rounded-lg p-4">
464
  <div class="flex justify-between items-center mb-2">
465
+ <h4 class="font-medium text-gray-700" data-i18n="color_match">Color Match</h4>
466
+ <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded" data-i18n="weight">40%</span>
467
  </div>
468
  <div class="flex justify-between items-center">
469
  <div>
470
+ <p class="text-sm text-gray-600" data-i18n="avg_time">Avg. time: <span class="font-semibold">1.8s</span></p>
471
+ <p class="text-sm text-gray-600" data-i18n="accuracy">Accuracy: <span class="font-semibold">83%</span></p>
472
  </div>
473
  <div class="text-right">
474
  <div class="text-lg font-bold text-purple-600">32/40</div>
475
+ <p class="text-xs text-gray-500" data-i18n="score">Score</p>
476
  </div>
477
  </div>
478
  </div>
479
 
480
  <div class="bg-green-50 rounded-lg p-4">
481
  <div class="flex justify-between items-center mb-2">
482
+ <h4 class="font-medium text-gray-700" data-i18n="sequence_recall">Sequence Recall</h4>
483
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded" data-i18n="weight">30%</span>
484
  </div>
485
  <div class="flex justify-between items-center">
486
  <div>
487
+ <p class="text-sm text-gray-600" data-i18n="max_sequence">Max sequence: <span class="font-semibold">6 items</span></p>
488
+ <p class="text-sm text-gray-600" data-i18n="avg_time">Avg. time: <span class="font-semibold">3.2s</span></p>
489
  </div>
490
  <div class="text-right">
491
  <div class="text-lg font-bold text-green-600">22/30</div>
492
+ <p class="text-xs text-gray-500" data-i18n="score">Score</p>
493
  </div>
494
  </div>
495
  </div>
496
  </div>
497
 
498
  <div class="bg-yellow-50 rounded-lg p-4 border border-yellow-200">
499
+ <h4 class="font-medium text-gray-700 mb-2" data-i18n="recommendations">Recommendations</h4>
500
  <ul class="list-disc pl-5 text-sm text-gray-700 space-y-1">
501
+ <li data-i18n="recommendation1">Practice Color Match to improve your selective attention</li>
502
+ <li data-i18n="recommendation2">Try morning sessions when your reaction time is typically faster</li>
503
+ <li data-i18n="recommendation3">Take a 5-minute break between sessions for better focus</li>
504
  </ul>
505
  </div>
506
  </div>
507
 
508
  <div class="bg-white rounded-xl shadow-md p-6">
509
+ <h2 class="text-xl font-bold text-gray-800 mb-4" data-i18n="earned_badges">Earned Badges</h2>
510
  <div class="flex space-x-4">
511
  <div class="text-center">
512
  <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mx-auto mb-2">
513
  <i class="fas fa-bolt text-xl"></i>
514
  </div>
515
+ <p class="text-xs font-medium text-gray-600" data-i18n="quick_reflexes">Quick Reflexes</p>
516
  </div>
517
  <div class="text-center">
518
  <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center text-purple-500 mx-auto mb-2">
519
  <i class="fas fa-brain text-xl"></i>
520
  </div>
521
+ <p class="text-xs font-medium text-gray-600" data-i18n="memory_builder">Memory Builder</p>
522
  </div>
523
  <div class="text-center opacity-40">
524
  <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 mx-auto mb-2">
525
  <i class="fas fa-trophy text-xl"></i>
526
  </div>
527
+ <p class="text-xs font-medium text-gray-600" data-i18n="master_focus">Master Focus</p>
528
  </div>
529
  </div>
530
  </div>
 
544
  let reactionTimes = [];
545
  let stroopAnswers = [];
546
  let sequenceLevel = 1;
547
+ let currentLanguage = 'en';
548
 
549
+ // Translation dictionary
550
+ const translations = {
551
+ en: {
552
+ welcome: "Welcome to TriFocus",
553
+ welcome_sub: "Train your cognitive skills with our three specialized modules. Choose your training mode below.",
554
+ express_session: "Express Session",
555
+ express_desc: "Complete all 3 modules in sequence for a comprehensive cognitive assessment.",
556
+ individual_module: "Individual Module",
557
+ individual_desc: "Focus on one specific cognitive skill with a single module.",
558
+ last_session: "Your last session score:",
559
+ score_was: "Your focus score was",
560
+ your_progress: "Your Progress",
561
+ reaction: "Reaction",
562
+ attention: "Attention",
563
+ memory: "Memory",
564
+ current_level: "Current Level:",
565
+ next_badge: "Next badge at 100 points",
566
+ select_module: "Select a Module",
567
+ reaction_tap: "Reaction Tap",
568
+ reaction_desc: "Test your reaction speed",
569
+ best: "Best:",
570
+ weight: "weight",
571
+ color_match: "Color Match",
572
+ stroop_desc: "Stroop test for selective attention",
573
+ sequence_recall: "Sequence Recall",
574
+ sequence_desc: "Challenge your working memory",
575
+ get_ready: "Get ready...",
576
+ tap_instruction: "Tap the dot as soon as it appears",
577
+ trials: "Trials:",
578
+ avg_reaction: "Avg. reaction:",
579
+ progress: "Progress",
580
+ stroop_instruction: "Select the color of the text, not the word itself",
581
+ questions: "Questions:",
582
+ accuracy: "Accuracy:",
583
+ red: "Red",
584
+ blue: "Blue",
585
+ green: "Green",
586
+ yellow: "Yellow",
587
+ sequence_instruction: "Memorize and repeat the sequence",
588
+ level: "Level:",
589
+ session_results: "Session Results",
590
+ focus_score: "Your Focus Score",
591
+ better_than: "Better than 65% of your previous sessions",
592
+ recommendations: "Recommendations",
593
+ recommendation1: "Practice Color Match to improve your selective attention",
594
+ recommendation2: "Try morning sessions when your reaction time is typically faster",
595
+ recommendation3: "Take a 5-minute break between sessions for better focus",
596
+ earned_badges: "Earned Badges",
597
+ quick_reflexes: "Quick Reflexes",
598
+ memory_builder: "Memory Builder",
599
+ master_focus: "Master Focus",
600
+ score: "Score",
601
+ avg_time: "Avg. time:",
602
+ max_sequence: "Max sequence:"
603
+ },
604
+ fr: {
605
+ welcome: "Bienvenue sur TriFocus",
606
+ welcome_sub: "Entraînez vos capacités cognitives avec nos trois modules spécialisés. Choisissez votre mode d'entraînement ci-dessous.",
607
+ express_session: "Session Express",
608
+ express_desc: "Complétez les 3 modules en séquence pour une évaluation cognitive complète.",
609
+ individual_module: "Module Individuel",
610
+ individual_desc: "Concentrez-vous sur une compétence cognitive spécifique avec un seul module.",
611
+ last_session: "Votre score de la dernière session :",
612
+ score_was: "Votre score de concentration était",
613
+ your_progress: "Votre Progrès",
614
+ reaction: "Réaction",
615
+ attention: "Attention",
616
+ memory: "Mémoire",
617
+ current_level: "Niveau Actuel :",
618
+ next_badge: "Prochain badge à 100 points",
619
+ select_module: "Sélectionnez un Module",
620
+ reaction_tap: "Tape Réaction",
621
+ reaction_desc: "Testez votre vitesse de réaction",
622
+ best: "Meilleur :",
623
+ weight: "pondération",
624
+ color_match: "Correspondance Couleur",
625
+ stroop_desc: "Test Stroop pour l'attention sélective",
626
+ sequence_recall: "Rappel de Séquence",
627
+ sequence_desc: "Défiez votre mémoire de travail",
628
+ get_ready: "Préparez-vous...",
629
+ tap_instruction: "Tapez sur le point dès qu'il apparaît",
630
+ trials: "Essais :",
631
+ avg_reaction: "Moy. réaction :",
632
+ progress: "Progression",
633
+ stroop_instruction: "Sélectionnez la couleur du texte, pas le mot lui-même",
634
+ questions: "Questions :",
635
+ accuracy: "Précision :",
636
+ red: "Rouge",
637
+ blue: "Bleu",
638
+ green: "Vert",
639
+ yellow: "Jaune",
640
+ sequence_instruction: "Mémorisez et répétez la séquence",
641
+ level: "Niveau :",
642
+ session_results: "Résultats de la Session",
643
+ focus_score: "Votre Score de Concentration",
644
+ better_than: "Mieux que 65% de vos sessions précédentes",
645
+ recommendations: "Recommandations",
646
+ recommendation1: "Pratiquez Correspondance Couleur pour améliorer votre attention sélective",
647
+ recommendation2: "Essayez des sessions matinales lorsque votre temps de réaction est généralement plus rapide",
648
+ recommendation3: "Prenez une pause de 5 minutes entre les sessions pour une meilleure concentration",
649
+ earned_badges: "Badges Obtenus",
650
+ quick_reflexes: "Réflexes Rapides",
651
+ memory_builder: "Bâtisseur de Mémoire",
652
+ master_focus: "Maître de la Concentration",
653
+ score: "Score",
654
+ avg_time: "Moy. temps :",
655
+ max_sequence: "Séquence max :"
656
+ },
657
+ ar: {
658
+ welcome: "مرحبًا بكم في TriFocus",
659
+ welcome_sub: "قم بتدريب مهاراتك المعرفية من خلال وحداتنا الثلاث المتخصصة. اختر نمط التدريب الخاص بك أدناه.",
660
+ express_session: "جلسة سريعة",
661
+ express_desc: "أكمل جميع الوحدات الثلاث بالتسلسل لتقييم معرفي شامل.",
662
+ individual_module: "وحدة فردية",
663
+ individual_desc: "ركز على مهارة معرفية محددة مع وحدة واحدة.",
664
+ last_session: "نتيجة جلستك الأخيرة:",
665
+ score_was: "كانت درجة تركيزك",
666
+ your_progress: "تقدمك",
667
+ reaction: "رد الفعل",
668
+ attention: "الانتباه",
669
+ memory: "الذاكرة",
670
+ current_level: "المستوى الحالي:",
671
+ next_badge: "الشارة التالية عند 100 نقطة",
672
+ select_module: "اختر وحدة",
673
+ reaction_tap: "النقر السريع",
674
+ reaction_desc: "اختبر سرعة رد فعلك",
675
+ best: "الأفضل:",
676
+ weight: "الوزن",
677
+ color_match: "مطابقة الألوان",
678
+ stroop_desc: "اختبار ستروب للانتباه الانتقائي",
679
+ sequence_recall: "تذكر التسلسل",
680
+ sequence_desc: "تحدي ذاكرتك العاملة",
681
+ get_ready: "استعد...",
682
+ tap_instruction: "انقر على النقطة بمجرد ظهورها",
683
+ trials: "المحاولات:",
684
+ avg_reaction: "متوسط رد الفعل:",
685
+ progress: "التقدم",
686
+ stroop_instruction: "اختر لون النص وليس ال��لمة نفسها",
687
+ questions: "الأسئلة:",
688
+ accuracy: "الدقة:",
689
+ red: "أحمر",
690
+ blue: "أزرق",
691
+ green: "أخضر",
692
+ yellow: "أصفر",
693
+ sequence_instruction: "احفظ التسلسل وكرره",
694
+ level: "المستوى:",
695
+ session_results: "نتائج الجلسة",
696
+ focus_score: "درجة تركيزك",
697
+ better_than: "أفضل من 65% من جلساتك السابقة",
698
+ recommendations: "التوصيات",
699
+ recommendation1: "تدرب على مطابقة الألوان لتحسين انتباهك الانتقائي",
700
+ recommendation2: "جرب الجلسات الصباحية عندما يكون وقت رد فعلك أسرع عادةً",
701
+ recommendation3: "خذ استراحة لمدة 5 دقائق بين الجلسات لتحسين التركيز",
702
+ earned_badges: "شارات مكتسبة",
703
+ quick_reflexes: "ردود فعل سريعة",
704
+ memory_builder: "باني الذاكرة",
705
+ master_focus: "سيد التركيز",
706
+ score: "النتيجة",
707
+ avg_time: "متوسط الوقت:",
708
+ max_sequence: "أقصى تسلسل:"
709
+ }
710
+ };
711
+
712
  // DOM elements
713
  const homeScreen = document.getElementById('homeScreen');
714
  const moduleSelectionScreen = document.getElementById('moduleSelectionScreen');
 
750
  // Set module title
751
  switch(module) {
752
  case 'reaction':
753
+ moduleTitle.textContent = document.querySelector('[data-i18n="reaction_tap"]').textContent;
754
  break;
755
  case 'stroop':
756
+ moduleTitle.textContent = document.querySelector('[data-i18n="color_match"]').textContent;
757
  break;
758
  case 'sequence':
759
+ moduleTitle.textContent = document.querySelector('[data-i18n="sequence_recall"]').textContent;
760
  break;
761
  }
762
 
 
1091
  finishModule();
1092
  }, 1500);
1093
  }
1094
+
1095
+ // Language functions
1096
+ function changeLanguage(lang) {
1097
+ currentLanguage = lang;
1098
+ document.getElementById('currentLanguage').textContent = lang.toUpperCase();
1099
+ translatePage();
1100
+ }
1101
+
1102
+ function translatePage() {
1103
+ const elements = document.querySelectorAll('[data-i18n]');
1104
+
1105
+ elements.forEach(element => {
1106
+ const key = element.getAttribute('data-i18n');
1107
+ if (translations[currentLanguage] && translations[currentLanguage][key]) {
1108
+ if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
1109
+ element.placeholder = translations[currentLanguage][key];
1110
+ } else {
1111
+ element.textContent = translations[currentLanguage][key];
1112
+ }
1113
+ }
1114
+ });
1115
+
1116
+ // RTL support for Arabic
1117
+ if (currentLanguage === 'ar') {
1118
+ document.body.setAttribute('dir', 'rtl');
1119
+ document.body.style.textAlign = 'right';
1120
+ } else {
1121
+ document.body.setAttribute('dir', 'ltr');
1122
+ document.body.style.textAlign = 'left';
1123
+ }
1124
+ }
1125
+
1126
+ // Initialize with English
1127
+ changeLanguage('en');
1128
  </script>
1129
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SaidAmchghal/trifocus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1130
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- ## Nom provisoire : **TriFocus** ### 1. Modules intégrés 1. **Reaction Tap** * **But** : tester la vitesse de réaction tactile. * **Mécanique** : un point apparaît à des positions aléatoires et l’utilisateur doit tapoter dès que possible. * **Mesure** : * Temps de réaction moyen (ms) * Taux de taps manqués 2. **Color Match (Stroop)** * **But** : évaluer l’attention sélective et la capacité à inhiber une réponse automatique. * **Mécanique** : afficher un mot-coloré (ex. « VERT » écrit en rouge) ; l’utilisateur sélectionne la couleur d’encre, non le texte. * **Mesure** : * Temps de réponse par item * Nombre d’erreurs 3. **Sequence Recall** * **But** : mesurer la mémoire de travail et la concentration soutenue. * **Mécanique** : présentation d’une séquence de symboles (formes ou chiffres) de longueur croissante ; l’utilisateur la reproduit dans l’ordre. * **Mesure** : * Longueur max. de la séquence restituée correctement * Temps total de réponse --- ### 2. Calcul du **Score Concentré (sur 100)** Le score agrégé combine les trois modules : | Module | Pondération | | -------------------- | ----------: | | Reaction Tap | 30 % | | Color Match (Stroop) | 40 % | | Sequence Recall | 30 % | Pour chacun : * **Reaction Tap** : * 60 % rapidité normalisée * 40 % précision (taux de succès) * **Color Match** : * 70 % vitesse * 30 % exactitude * **Sequence Recall** : * 50 % longueur de séquence * 50 % rapidité de restitution Le score final = `0,3×(score RT) + 0,4×(score Stroop) + 0,3×(score Seq)` le tout ramené à 0–100. --- ### 3. Parcours utilisateur 1. **Écran d’accueil** : choix rapide du mode “Session Express” (3 modules enchaînés) ou “Mode Individuel” (un module au choix). 2. **Briefing** : décompte de 3 s avant chaque épreuve, consignes claires. 3. **Enchaînement** : * Module 1 → Module 2 → Module 3 * Transitions fluides, retours visuels (barres de progression). 4. **Synthèse finale** : * Score total sur 100 * Détail par module (scores partiels, temps, erreurs) * Graphiques d’évolution (jour / semaine / mois). 5. **Recommandations** : * Conseils pour améliorer les points faibles * Exercices ciblés facultatifs --- ### 4. Fonctionnalités annexes * **Historique et tendances** : comparaisons temporelles et avec la communauté. * **Badges et niveaux** : jalons de progression (ex. “Rapidité extrême”, “Maître Stroop”, “Mémoire d’éléphant”). * **Rappels** : notifications pour s’entraîner régulièrement. * **Personnalisation** : ajuster la difficulté initiale ou le nombre de répétitions.
 
 
1
+ ## Nom provisoire : **TriFocus** ### 1. Modules intégrés 1. **Reaction Tap** * **But** : tester la vitesse de réaction tactile. * **Mécanique** : un point apparaît à des positions aléatoires et l’utilisateur doit tapoter dès que possible. * **Mesure** : * Temps de réaction moyen (ms) * Taux de taps manqués 2. **Color Match (Stroop)** * **But** : évaluer l’attention sélective et la capacité à inhiber une réponse automatique. * **Mécanique** : afficher un mot-coloré (ex. « VERT » écrit en rouge) ; l’utilisateur sélectionne la couleur d’encre, non le texte. * **Mesure** : * Temps de réponse par item * Nombre d’erreurs 3. **Sequence Recall** * **But** : mesurer la mémoire de travail et la concentration soutenue. * **Mécanique** : présentation d’une séquence de symboles (formes ou chiffres) de longueur croissante ; l’utilisateur la reproduit dans l’ordre. * **Mesure** : * Longueur max. de la séquence restituée correctement * Temps total de réponse --- ### 2. Calcul du **Score Concentré (sur 100)** Le score agrégé combine les trois modules : | Module | Pondération | | -------------------- | ----------: | | Reaction Tap | 30 % | | Color Match (Stroop) | 40 % | | Sequence Recall | 30 % | Pour chacun : * **Reaction Tap** : * 60 % rapidité normalisée * 40 % précision (taux de succès) * **Color Match** : * 70 % vitesse * 30 % exactitude * **Sequence Recall** : * 50 % longueur de séquence * 50 % rapidité de restitution Le score final = `0,3×(score RT) + 0,4×(score Stroop) + 0,3×(score Seq)` le tout ramené à 0–100. --- ### 3. Parcours utilisateur 1. **Écran d’accueil** : choix rapide du mode “Session Express” (3 modules enchaînés) ou “Mode Individuel” (un module au choix). 2. **Briefing** : décompte de 3 s avant chaque épreuve, consignes claires. 3. **Enchaînement** : * Module 1 → Module 2 → Module 3 * Transitions fluides, retours visuels (barres de progression). 4. **Synthèse finale** : * Score total sur 100 * Détail par module (scores partiels, temps, erreurs) * Graphiques d’évolution (jour / semaine / mois). 5. **Recommandations** : * Conseils pour améliorer les points faibles * Exercices ciblés facultatifs --- ### 4. Fonctionnalités annexes * **Historique et tendances** : comparaisons temporelles et avec la communauté. * **Badges et niveaux** : jalons de progression (ex. “Rapidité extrême”, “Maître Stroop”, “Mémoire d’éléphant”). * **Rappels** : notifications pour s’entraîner régulièrement. * **Personnalisation** : ajuster la difficulté initiale ou le nombre de répétitions.
2
+ Ajoutes le choix de la langue (anglais, français, arabe)