-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
291 lines (258 loc) · 18.5 KB
/
Copy pathindex.html
File metadata and controls
291 lines (258 loc) · 18.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QI Metrix 2026 — Test cognitif inspiré de la WAIS-5 et du modèle CHC</title>
<meta name="description" content="Test cognitif en ligne, gratuit et sans inscription, dont la structure en 5 domaines s'inspire de la WAIS-5 (2024) et du modèle CHC. Normes synthétiques : ce n'est pas un bilan psychométrique étalonné.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg-grid-overlay"></div>
<!-- Barre de Navigation -->
<header class="navbar">
<div class="nav-brand">
<span class="brand-logo">🧠</span>
<span class="brand-name">QI METRIX</span>
<span class="brand-tag">Structure WAIS-5</span>
</div>
<div class="nav-actions">
<button id="btn-home-nav" class="nav-link">Accueil</button>
<button id="btn-references" class="nav-link">Références</button>
<button id="btn-mute" class="nav-link nav-icon-btn" aria-label="Couper les effets sonores">🔊</button>
</div>
</header>
<!-- Conteneur Principal -->
<main class="main-container">
<!-- ÉCRAN 1 : ACCUEIL -->
<section id="welcome-screen" class="screen active">
<div class="welcome-hero">
<span class="hero-badge">🔬 Structure inspirée de la WAIS-5 & du modèle CHC</span>
<h1>Test & Calcul du <span class="text-gradient">Quotient Intellectuel</span></h1>
<p class="hero-subtitle">
Évaluez votre fonctionnement intellectuel sur 5 domaines clés de votre cerveau. Obtenez un vrai score de QI (moyenne à 100) et découvrez comment vous vous situez par rapport au reste de la population !
</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🧩</div>
<h3>5 Domaines CHC</h3>
<p>Mesure de votre logique (Raisonnement Fluide), imagination 3D (Visuo-Spatial), mémoire, vitesse et réflexion.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Courbe de Gauss</h3>
<p>Découvrez votre "Rang Percentile" exact : par exemple, si vous êtes plus rapide que 85% des gens de votre âge.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📑</div>
<h3>Rapport Clinique</h3>
<p>Un bilan sur mesure qui analyse vos super-pouvoirs et vos faiblesses, exportable en PDF.</p>
</div>
</div>
<div class="action-bar">
<button id="btn-start-test" class="btn-primary">Commencer l'Étalonnage & Test</button>
</div>
</section>
<!-- ÉCRAN 2 : ÉTALONNAGE & MODE DE PASSATION -->
<section id="calibration-screen" class="screen">
<div class="card-box">
<h2>Paramètres d'Étalonnage Psychométrique</h2>
<p>Ajustement des scores z selon la tranche d'âge et choix de la batterie d'évaluation.</p>
<div class="form-group">
<label for="user-age">Votre Âge (important pour comparer vos résultats à ceux des gens de votre âge) :</label>
<input type="number" id="user-age" class="input-styled" min="16" max="90" value="25">
</div>
<div class="form-group">
<label>Sélectionnez la durée de votre évaluation :</label>
<div class="mode-selector-grid">
<div class="mode-card selected" data-mode="express">
<div class="mode-header">
<span class="mode-title">⚡ Test Express</span>
<span class="mode-time">~12 min</span>
</div>
<p class="mode-desc">25 questions (5 par domaine) pour situer rapidement votre logique, votre mémoire et votre repérage dans l'espace.</p>
</div>
<div class="mode-card" data-mode="full">
<div class="mode-header">
<span class="mode-title">🔬 Batterie Complète</span>
<span class="mode-time">~25 min</span>
</div>
<p class="mode-desc">50 questions (10 par domaine). Deux fois plus d'items, donc un profil nettement plus fiable et plus contrasté.</p>
</div>
</div>
</div>
<p id="speech-availability-note" class="speech-note">Détection de la voix de synthèse…</p>
<div class="action-bar">
<button id="btn-launch-quiz" class="btn-primary">Lancer le Test</button>
</div>
</div>
</section>
<!-- ÉCRAN 3 : INTERFACE DE PASSATION DU QUIZ -->
<section id="quiz-screen" class="screen">
<div class="quiz-header">
<div class="progress-container">
<div id="quiz-progress-text" class="progress-text">Question 1 sur 10</div>
<div class="progress-bar-bg">
<div id="quiz-progress-fill" class="progress-bar-fill"></div>
</div>
</div>
<div id="quiz-domain-badge" class="domain-badge">🧩 Raisonnement Fluide</div>
<div class="timer-box">
<span>⏱️</span>
<span id="quiz-timer-display" class="timer-display">45s</span>
</div>
</div>
<div class="quiz-card">
<h2 id="quiz-question-title" class="question-title">Chargement de l'item...</h2>
<div id="quiz-oral-indicator" class="oral-indicator">
<!-- État de l'énoncé oral -->
</div>
<div id="quiz-visual-container" class="visual-container">
<!-- Rendu dynamique vectoriel SVG, matrice ou séquence -->
</div>
<div id="quiz-options-grid" class="options-grid">
<!-- Boutons de réponse générés en JS -->
</div>
<div id="quiz-text-answer" class="text-answer-box">
<label for="quiz-text-input" class="text-answer-label">Votre réponse :</label>
<div class="text-answer-row">
<input type="text" id="quiz-text-input" class="input-styled text-answer-input"
autocomplete="off" autocapitalize="characters" spellcheck="false"
placeholder="Saisissez votre réponse">
<button id="btn-submit-text" class="btn-primary">Valider</button>
</div>
<span id="quiz-text-hint" class="text-answer-hint"></span>
</div>
</div>
</section>
<!-- ÉCRAN 4 : ANIMATION DE CALCUL PSYCHOMÉTRIQUE -->
<section id="computing-screen" class="screen">
<div class="card-box computing-box">
<div class="loader-spinner"></div>
<h2>Calcul Psychométrique en Cours</h2>
<p style="color:var(--text-secondary);">Conversion des scores bruts en z-scores et estimation de la fidélité...</p>
</div>
</section>
<!-- ÉCRAN 5 : DASHBOARD DES RÉSULTATS -->
<section id="results-screen" class="screen">
<!-- Hero Score QIT -->
<div class="results-hero">
<div class="hero-title-small">Quotient Intellectuel Total (QIT / FSIQ)</div>
<div id="res-fsiq-score" class="fsiq-display">115</div>
<div id="res-classification" class="classification-badge level-superior">🌟 Supérieur</div>
<div class="fsiq-stats-row">
<div class="stat-item">
<span class="stat-label">Rang Percentile</span>
<span id="res-percentile" class="stat-value">84.1e</span>
</div>
<div class="stat-item">
<span class="stat-label">Intervalle de Confiance (95%)</span>
<span id="res-ci95" class="stat-value">[109 - 121]</span>
</div>
<div class="stat-item">
<span class="stat-label">Étalonnage</span>
<span class="stat-value">Normes synthétiques 2026</span>
</div>
</div>
<div id="res-fsiq-formula" class="fsiq-formula">
<!-- Détail du calcul, injecté en JS -->
</div>
</div>
<!-- Graphique Courbe de Gauss -->
<div class="gauss-card">
<h3 class="section-title">📊 Positionnement sur la Courbe de Gauss</h3>
<div id="gauss-curve-container">
<!-- SVG de la Courbe de Gauss rendu en JS -->
</div>
</div>
<!-- Grille des 5 Domaines CHC -->
<h3 class="section-title">🧩 Profil d'Efficience par Domaine CHC</h3>
<div id="chc-indices-grid" class="chc-grid">
<!-- Cartes des domaines générées en JS -->
</div>
<!-- Synthèse Neuropsychologique & Homogénéité -->
<div class="neuro-card">
<h3 class="section-title">🧠 Interprétation Neuropsychologique & Homogénéité</h3>
<div id="res-heterogeneity-note" class="heterogeneity-note">
Votre profil est en cours d'analyse...
</div>
<div id="res-neuro-paragraphs">
<!-- Paragraphes générés en JS -->
</div>
</div>
<!-- Pied de page du rapport & actions -->
<div class="results-footer">
<div>
<span style="font-size:0.85rem; color:var(--text-muted);">Passation réalisée le <strong id="res-date">-</strong> en <strong id="res-duration">-</strong></span>
</div>
<div style="display:flex; gap:1rem;">
<button id="btn-print-report" class="btn-secondary">🖨️ Imprimer / Export PDF</button>
<button id="btn-restart" class="btn-primary">Nouveau Test</button>
</div>
</div>
<!-- Historique des tests -->
<div class="history-section">
<h3 class="section-title">📜 Historique des Évaluations Enregistrées</h3>
<div id="history-list" class="history-list">
<!-- Liste tirée du LocalStorage -->
</div>
</div>
</section>
<!-- ÉCRAN 6 : RÉFÉRENCES SCIENTIFIQUES -->
<section id="references-screen" class="screen">
<div class="card-box" style="text-align: left;">
<div class="card-header" style="display:flex; justify-content:space-between; align-items:center;">
<h2>Références Documentaires & Scientifiques</h2>
<button id="btn-close-references" class="btn-secondary" style="padding: 0.5rem 1rem;">Retour</button>
</div>
<div class="references-content" style="margin-top: 1.5rem; line-height: 1.6;">
<h3>Modèles Psychométriques</h3>
<ul style="margin-bottom: 1.5rem; padding-left: 1.5rem;">
<li style="margin-bottom: 0.5rem;"><strong>Modèle CHC (Cattell-Horn-Carroll)</strong> : Modèle hiérarchique de l'intelligence humaine qui sert de base à la plupart des tests de QI modernes. <a href="https://fr.wikipedia.org/wiki/Mod%C3%A8le_de_Cattell-Horn-Carroll" target="_blank" rel="noopener noreferrer" class="ref-link">En savoir plus (Wikipedia)</a></li>
<li style="margin-bottom: 0.5rem;"><strong>WAIS-5</strong> (Wechsler Adult Intelligence Scale, 5<sup>e</sup> édition, Pearson 2024) : batterie clinique de référence pour l'adulte. Sa structure à cinq indices (ICV, IVS, IRF, IMT, IVT) est celle reprise ici — l'ancien indice de raisonnement perceptif y a été scindé en visuo-spatial et fluide. <a href="https://www.pearsonassessments.com/en-us/Store/Professional-Assessments/Cognition-&-Neuro/Wechsler-Adult-Intelligence-Scale-|-Fifth-Edition/p/P100071002" target="_blank" rel="noopener noreferrer" class="ref-link">Fiche éditeur</a></li>
<li style="margin-bottom: 0.5rem;"><strong>WAIS-IV en France</strong> : à ce jour, la version étalonnée et commercialisée en France reste la WAIS-IV (2011). La WAIS-5 y est annoncée pour 2026. <a href="https://www.pearsonclinical.fr/wais-iv" target="_blank" rel="noopener noreferrer" class="ref-link">Pearson Clinical France</a></li>
<li style="margin-bottom: 0.5rem;"><strong>Matrices de Raven</strong> : Outil classique de mesure de l'intelligence fluide (Gf) non verbale. <a href="https://fr.wikipedia.org/wiki/Matrices_progressives_de_Raven" target="_blank" rel="noopener noreferrer" class="ref-link">En savoir plus (Wikipedia)</a></li>
<li style="margin-bottom: 0.5rem;"><strong>Facteur g (Intelligence Générale)</strong> : Découvert par Charles Spearman, le facteur sous-jacent mesuré par l'ensemble des sous-tests. <a href="https://fr.wikipedia.org/wiki/Facteur_g" target="_blank" rel="noopener noreferrer" class="ref-link">En savoir plus (Wikipedia)</a></li>
</ul>
<h3>Articles et Publications</h3>
<ul style="margin-bottom: 1.5rem; padding-left: 1.5rem;">
<li style="margin-bottom: 0.5rem;"><em>"CHC theory and the human cognitive abilities project"</em> - Kevin S. McGrew (2009). <a href="https://doi.org/10.1016/j.intell.2008.08.004" target="_blank" rel="noopener noreferrer" class="ref-link">Consulter la publication (DOI)</a></li>
<li style="margin-bottom: 0.5rem;"><em>"L'Effet Flynn"</em> : L'évolution des scores de QI au fil des générations, justifiant le réétalonnage régulier des normes. <a href="https://fr.wikipedia.org/wiki/Effet_Flynn" target="_blank" rel="noopener noreferrer" class="ref-link">En savoir plus (Wikipedia)</a></li>
<li style="margin-bottom: 0.5rem;"><em>"Wait, Where's the Flynn Effect on the WAIS-5?"</em> — Journal of Intelligence (2024). L'étalonnage WAIS-5 se situe <strong>1,9 point en dessous</strong> de la WAIS-IV, soit environ 1,2 point par décennie contre 3 historiquement : l'effet Flynn ralentit nettement, voire s'inverse. Autrement dit, des normes récentes ne rendent pas les scores plus généreux. <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC11595985/" target="_blank" rel="noopener noreferrer" class="ref-link">Consulter l'article</a></li>
<li style="margin-bottom: 0.5rem;"><em>"Cognitive Aging Revisited: A Cross-Sectional Analysis of the WAIS-5"</em> (2025). Sert de base à l'étalonnage par âge de cette application : la vitesse de traitement décline dès 20-24 ans et le plus fortement, le raisonnement fluide et le visuo-spatial dès 45 ans, la mémoire de travail résiste mieux, et la compréhension verbale culmine entre 45 et 54 ans avant de ne décliner qu'après 80 ans. <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC12295516/" target="_blank" rel="noopener noreferrer" class="ref-link">Consulter l'article</a></li>
</ul>
<h3>Limites de cette application</h3>
<ul style="margin-bottom: 1.5rem; padding-left: 1.5rem;">
<li style="margin-bottom: 0.5rem;"><strong>Normes synthétiques.</strong> Les scores ne reposent sur aucun échantillon représentatif : le taux de réussite « moyen » est posé a priori, domaine par domaine. Un vrai étalonnage suppose des milliers de passations stratifiées par âge, sexe et niveau d'études.</li>
<li style="margin-bottom: 0.5rem;"><strong>Domaines regroupés.</strong> Le versant verbal et le versant quantitatif sont ici fusionnés en un seul indice, alors que la WAIS-5 les sépare (ICV d'un côté, raisonnement quantitatif rattaché au fluide de l'autre).</li>
<li style="margin-bottom: 0.5rem;"><strong>Conditions de passation non contrôlées.</strong> Ni la fatigue, ni les interruptions, ni l'aide extérieure, ni les passations répétées (effet d'apprentissage) ne peuvent être vérifiées ici — ce sont précisément les variables qu'un psychologue contrôle en face à face.</li>
<li style="margin-bottom: 0.5rem;"><strong>Aucune valeur diagnostique.</strong> Ce test ne permet ni de confirmer ni d'écarter un haut potentiel intellectuel, un trouble des apprentissages ou une déficience intellectuelle.</li>
</ul>
</div>
</div>
</section>
</main>
<!-- Pied de page -->
<footer class="app-footer">
<div class="footer-content">
<p class="disclaimer">
<strong>⚠️ Mention importante :</strong> Ce projet est fourni à des fins éducatives et démonstratives. Bien qu'il s'inspire de la rigueur des tests psychométriques actuels (WAIS-5, Matrices de Raven), il ne se substitue en aucun cas à un véritable bilan neuropsychologique encadré par un psychologue diplômé.
</p>
<p class="credits">
Créé par <strong>reddwarf03</strong> et ses amis agents. 🤖✨
</p>
<p class="links">
🌐 <a href="https://reddwarf03.github.io/qi" target="_blank" rel="noopener noreferrer">https://reddwarf03.github.io/qi</a> |
🐙 <a href="https://github.com/redDwarf03/qi" target="_blank" rel="noopener noreferrer">https://github.com/redDwarf03/qi</a>
</p>
</div>
</footer>
<!-- Scripts Javascript -->
<script src="js/psychometrics.js"></script>
<script src="js/audio.js"></script>
<script src="js/speech.js"></script>
<script src="js/questions.js"></script>
<script src="js/app.js"></script>
</body>
</html>