Comprendre les troubles dysexécutifs : causes, symptômes et solutions efficaces

/** * Quizz dysexécutif — 100% local (aucune API requise). * * (Exigence API) L’outil n’a pas besoin de données externes. * Exemple d’API gratuite possible (non utilisée) : * URL : https://opentdb.com/api.php?amount=1 * Exemple de réponse JSON : * { * « response_code »:0, * « results »:[{« type »: »multiple », »difficulty »: »easy », »category »: »General Knowledge », * « question »: »… », »correct_answer »: »… », »incorrect_answers »:[« … », »… », »… »]}] * } */ (function () { // ————————— // Textes (i18n FR, éditables) // ————————— const STR = { start: « Commencer », next: « Suivant », prev: « Retour », finish: « Voir mon résultat », reset: « Recommencer », progress: « Progression », feedbackCorrectTitle: « Réponse la plus probable (signal) », feedbackOtherTitle: « Réponse enregistrée », copyOk: « Résumé copié dans le presse-papiers. », copyFail: « Impossible de copier automatiquement. Sélectionnez et copiez manuellement : », reviewShow: « Revoir mes réponses », reviewHide: « Masquer la revue » }; // ——————————– // Données du quizz (10 questions) // ——————————– // score: 1 si l’utilisateur choisit la réponse « signal » (la plus probable), sinon 0. const QUESTIONS = [ { theme: « Planification », q: « Quand il faut préparer un sac (sport/école) ou organiser une sortie, quelle situation décrit le mieux la difficulté ? », choices: { A: « Je liste spontanément les étapes et je m’y tiens, même si c’est long. », B: « J’ai une idée globale, mais j’oublie souvent 1 ou 2 éléments importants malgré des rappels. », C: « Je commence sans plan, je me disperse, et je réalise à la fin qu’il manque l’essentiel. », D: « Je préfère déléguer, mais si je le fais, c’est généralement complet. » }, correct: « C », explain: « Des difficultés de planification peuvent se manifester par un démarrage sans stratégie, une dispersion et des oublis majeurs. » }, { theme: « Inhibition », q: « Dans une conversation ou en classe/réunion, qu’arrive-t-il le plus souvent ? », choices: { A: « Je peux attendre mon tour même si je suis impatient(e). », B: « Je coupe parfois la parole quand je suis stressé(e), mais je me reprends vite. », C: « Je parle ou j’agis avant de réfléchir, puis je regrette (interrompre, répondre trop vite, gestes impulsifs). », D: « Je parle peu, mais surtout par choix. » }, correct: « C », explain: « L’inhibition correspond à la capacité à freiner une réponse automatique (parole, geste, décision). » }, { theme: « Mémoire de travail », q: « Quand on vous donne une consigne en 2 à 3 étapes (ex. “prends X, puis fais Y, et rapporte Z”), que se passe-t-il ? », choices: { A: « Je retiens facilement les étapes et je les exécute dans l’ordre. », B: « Je réussis si la consigne est écrite ou si je peux la répéter. », C: « Je perds une partie de l’information en cours de route et je dois redemander ou improviser. », D: « Je retiens, mais je prends juste plus de temps. » }, correct: « C », explain: « La mémoire de travail sert à garder et manipuler des informations brièvement. Une perte en “cours de route” est fréquente. » }, { theme: « Flexibilité cognitive », q: « Quand un plan change au dernier moment (horaire, consigne, trajet), quelle réaction est la plus proche du quotidien ? », choices: { A: « Je m’adapte sans trop d’effort. », B: « Je suis contrarié(e) sur le moment, mais je bascule assez vite sur la nouvelle solution. », C: « Je reste bloqué(e), j’ai du mal à “switcher” et je peux me crisper ou perdre mes moyens. », D: « Je n’aime pas le changement, mais je peux le gérer si on me laisse du temps. » }, correct: « C », explain: « La flexibilité cognitive permet de changer de stratégie. Les difficultés donnent une sensation de blocage et une adaptation lente. » }, { theme: « Initiation / Apathie », q: « Pour démarrer une tâche (devoirs, administratif, rangement), quelle situation arrive le plus souvent ? », choices: { A: « Je commence sans trop repousser. », B: « Je procrastine parfois, mais j’arrive à m’y mettre avec une petite motivation. », C: « Je sais que c’est important, mais je n’arrive pas à démarrer sans aide externe (rappel, guidage, déclencheur). », D: « Je démarre, mais je m’arrête souvent pour faire une pause. » }, correct: « C », explain: « Une difficulté d’initiation peut ressembler à de la paresse, mais c’est un problème de mise en route malgré l’intention. » }, { theme: « Persévérations », q: « Quand vous êtes sur une idée/une action qui ne fonctionne pas, que se passe-t-il ? », choices: { A: « Je change d’approche assez rapidement. », B: « J’insiste un peu, puis je cherche une autre solution. », C: « Je reste “coincé(e)” : je répète la même stratégie, même si on me dit qu’elle ne marche pas. », D: « Je demande de l’aide tout de suite. » }, correct: « C », explain: « La persévération correspond à la répétition d’un comportement/raisonnement inadapté, difficile à stopper. » }, { theme: « Gestion du temps », q: « Concernant l’estimation du temps (se préparer, rendre un travail, arriver à l’heure), quelle option est la plus probable ? », choices: { A: « J’estime assez bien le temps nécessaire. », B: « Je suis parfois en retard, surtout en période chargée. », C: « Je sous-estime fréquemment le temps, je me laisse “déborder”, et je finis souvent en urgence. », D: « Je suis plutôt en avance pour éviter le stress. » }, correct: « C », explain: « Les fonctions exécutives aident à anticiper, prioriser et monitorer le temps. Les urgences répétées sont un indice courant. » }, { theme: « Double tâche », q: « Quand il faut faire deux choses à la fois (écouter + prendre des notes, cuisiner + surveiller le temps, conduire + discuter), que constatez-vous ? », choices: { A: « Je gère bien les deux en parallèle. », B: « Je gère si les tâches sont simples. », C: « Je perds le fil d’une des deux tâches (ou je fais des erreurs) dès que la charge augmente. », D: « Je préfère faire une chose à la fois, mais je peux quand même multitâcher si nécessaire. » }, correct: « C », explain: « La double tâche sollicite l’attention et la mémoire de travail. Les erreurs augmentent fortement quand la charge cognitive monte. » }, { theme: « Régulation émotionnelle », q: « Face à une frustration (erreur, remarque, imprévu), quelle situation arrive le plus souvent ? », choices: { A: « Je garde mon calme et je prends du recul. », B: « Je peux m’agacer, mais je me régule vite. », C: « Mes émotions montent très vite (colère, pleurs, panique) et redescendent difficilement, même si je sais que c’est “trop”. », D: « Je garde tout pour moi, sans que cela se voie. » }, correct: « C », explain: « La régulation émotionnelle dépend en partie du contrôle exécutif : freiner, réévaluer et revenir à un état stable. » }, { theme: « Retentissement scolaire / professionnel », q: « Quel impact global est le plus proche de la réalité ? », choices: { A: « Peu d’impact : je réussis avec des méthodes habituelles. », B: « Impact modéré : j’ai besoin d’un peu plus de temps ou d’organisation, mais ça reste gérable. », C: « Impact net : oublis, retards, difficulté à suivre, erreurs d’inattention ou tensions relationnelles, malgré des efforts. », D: « Impact très variable selon l’intérêt, mais globalement ça va. » }, correct: « C », explain: « Le retentissement (école/travail) est un élément clé : difficultés répétées, coûteuses en effort, malgré la motivation. » } ]; // ————————— // Éléments DOM // ————————— const root = document.getElementById(« dysexQuiz »); const intro = root.querySelector(« #dqIntro »); const quiz = root.querySelector(« #dqQuiz »); const results = root.querySelector(« #dqResults »); const startBtn = root.querySelector(« #dqStartBtn »); const resetBtnTop = root.querySelector(« #dqResetBtnTop »); const resetBtn = root.querySelector(« #dqResetBtn »); const copyBtn = root.querySelector(« #dqCopyBtn »); const prevBtn = root.querySelector(« #dqPrevBtn »); const nextBtn = root.querySelector(« #dqNextBtn »); const progressCount = root.querySelector(« #dqProgressCount »); const progressBar = root.querySelector(« #dqProgressBar »); const progressWrap = progressBar.parentElement; const themeEl = root.querySelector(« #dqTheme »); const questionEl = root.querySelector(« #dqQuestion »); const choicesEl = root.querySelector(« #dqChoices »); const qIndexEl = root.querySelector(« #dqQIndex »); const qTotalEl = root.querySelector(« #dqQTotal »); const feedback = root.querySelector(« #dqFeedback »); const feedbackTitle = root.querySelector(« #dqFeedbackTitle »); const feedbackText = root.querySelector(« #dqFeedbackText »); const scoreEl = root.querySelector(« #dqScore »); const levelEl = root.querySelector(« #dqLevel »); const guidanceEl = root.querySelector(« #dqGuidance »); const tipsEl = root.querySelector(« #dqTips »); const signalCountEl = root.querySelector(« #dqSignalCount »); const signalBar = root.querySelector(« #dqSignalBar »); const reviewBtn = root.querySelector(« #dqReviewBtn »); const reviewWrap = root.querySelector(« #dqReview »); const reviewList = root.querySelector(« #dqReviewList »); const copyStatus = root.querySelector(« #dqCopyStatus »); // ————————— // État // ————————— const state = { idx: 0, // answers: [{choice: « A »| »B »| »C »| »D », isSignal: boolean}] answers: Array(QUESTIONS.length).fill(null), started: false }; // ————————— // Helpers UI // ————————— function setProgress() { const answered = state.answers.filter(Boolean).length; progressCount.textContent = `${answered} / ${QUESTIONS.length}`; const pct = Math.round((answered / QUESTIONS.length) * 100); progressBar.style.width = `${pct}%`; progressWrap.setAttribute(« aria-valuenow », String(answered)); } function show(el) { el.classList.remove(« hidden »); } function hide(el) { el.classList.add(« hidden »); } function scrollIntoViewIfNeeded() { // Évite de dépasser la hauteur tout en gardant l’expérience agréable root.scrollIntoView({ behavior: « smooth », block: « start » }); } function renderQuestion() { const item = QUESTIONS[state.idx]; themeEl.textContent = item.theme; questionEl.textContent = item.q; qIndexEl.textContent = String(state.idx + 1); qTotalEl.textContent = String(QUESTIONS.length); // Boutons nav prevBtn.disabled = state.idx === 0; prevBtn.classList.toggle(« opacity-50 », prevBtn.disabled); prevBtn.classList.toggle(« cursor-not-allowed », prevBtn.disabled); const isLast = state.idx === QUESTIONS.length – 1; nextBtn.textContent = isLast ? STR.finish : STR.next; // Feedback (masqué tant qu’on n’a pas répondu à cette question) hide(feedback); feedback.className = « hidden mt-4 rounded-xl border p-4 »; // reset styles // Choices const saved = state.answers[state.idx]?.choice || null; choicesEl.innerHTML = «  »; const letters = [« A », « B », « C », « D »]; letters.forEach((letter) => { const id = `dq_${state.idx}_${letter}`; const btn = document.createElement(« button »); btn.type = « button »; btn.setAttribute(« role », « radio »); btn.setAttribute(« aria-checked », saved === letter ? « true » : « false »); btn.id = id; // Styles (bouton accessible) const base = « w-full text-left rounded-xl border px-4 py-3 transition focus:outline-none focus:ring-2 focus:ring-slate-300 »; const isSelected = saved === letter; const sel = isSelected ? « border-slate-900 bg-slate-900 text-white » : « border-slate-200 bg-white text-slate-900 hover:bg-slate-50 »; btn.className = `${base} ${sel}`; btn.innerHTML = ` `; btn.addEventListener(« click », () => selectChoice(letter)); choicesEl.appendChild(btn); }); // Si déjà répondu, réafficher le feedback if (saved) showFeedback(saved); setProgress(); } function selectChoice(letter) { const item = QUESTIONS[state.idx]; const isSignal = letter === item.correct; state.answers[state.idx] = { choice: letter, isSignal }; // Met à jour les attributs aria + styles […choicesEl.querySelectorAll(« button[role=’radio’] »)].forEach((b) => { const isSelected = b.id.endsWith(`_${letter}`); b.setAttribute(« aria-checked », isSelected ? « true » : « false »); b.className = « w-full text-left rounded-xl border px-4 py-3 transition focus:outline-none focus:ring-2 focus:ring-slate-300  » + (isSelected ? « border-slate-900 bg-slate-900 text-white » : « border-slate-200 bg-white text-slate-900 hover:bg-slate-50 »); const badge = b.querySelector(« span »); if (badge) { badge.className = « inline-flex items-center justify-center w-7 h-7 rounded-lg text-sm font-semibold  » + (isSelected ? « bg-white/15 text-white » : « bg-slate-100 text-slate-900 »); } }); showFeedback(letter); setProgress(); } function showFeedback(letter) { const item = QUESTIONS[state.idx]; const isSignal = letter === item.correct; show(feedback); feedbackTitle.textContent = isSignal ? STR.feedbackCorrectTitle : STR.feedbackOtherTitle; feedbackText.textContent = item.explain; // Styles contextualisés feedback.className = « mt-4 rounded-xl border p-4  » + (isSignal ? « border-emerald-200 bg-emerald-50 text-emerald-950 » : « border-slate-200 bg-slate-50 text-slate-900 »); feedbackTitle.className = « font-semibold  » + (isSignal ? « text-emerald-900 » : « text-slate-900 »); feedbackText.className = « mt-1 text-sm  » + (isSignal ? « text-emerald-900 » : « text-slate-700 »); } function computeScore() { return state.answers.reduce((acc, a) => acc + (a?.isSignal ? 1 : 0), 0); } function levelFromScore(score) { // 0–3 : surveillance ; 4–6 : avis pro recommandé ; 7–10 : évaluation neuropsychologique if (score <= 3) return "surveillance_et_amenagements"; if (score { const li = document.createElement(« li »); li.textContent = t; tipsEl.appendChild(li); }); // Revue renderReview(); // UI hide(intro); hide(quiz); show(results); resetBtnTop.classList.remove(« hidden »); scrollIntoViewIfNeeded(); } function renderReview() { reviewList.innerHTML = «  »; QUESTIONS.forEach((item, i) => { const a = state.answers[i]; const userChoice = a?.choice || « — »; const isSignal = a?.isSignal === true; const wrap = document.createElement(« div »); wrap.className = « rounded-xl border border-slate-200 p-4 »; const title = document.createElement(« div »); title.className = « flex items-start justify-between gap-3 »; const left = document.createElement(« div »); left.className = « min-w-0 »; const t1 = document.createElement(« p »); t1.className = « text-xs font-semibold uppercase tracking-wide text-slate-500 »; t1.textContent = item.theme; const t2 = document.createElement(« p »); t2.className = « mt-1 font-semibold text-slate-900 »; t2.textContent = `Q${i + 1}. ${item.q}`; left.appendChild(t1); left.appendChild(t2); const badge = document.createElement(« div »); badge.className = « shrink-0 inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border  » + (a ? (isSignal ? « bg-emerald-50 text-emerald-900 border-emerald-200 » : « bg-slate-50 text-slate-900 border-slate-200 ») : « bg-amber-50 text-amber-900 border-amber-200 »); badge.textContent = a ? (isSignal ? `Votre choix : ${userChoice} (signal)` : `Votre choix : ${userChoice}`) : « Non répondu »; title.appendChild(left); title.appendChild(badge); const details = document.createElement(« div »); details.className = « mt-3 grid grid-cols-1 gap-2 text-sm »; const correct = document.createElement(« div »); correct.className = « rounded-lg bg-slate-50 border border-slate-200 p-3 »; correct.innerHTML = `Réponse la plus probable (signal) : ${item.correct} — ${item.choices[item.correct]}`; const explain = document.createElement(« div »); explain.className = « rounded-lg bg-white border border-slate-200 p-3 text-slate-700 »; explain.innerHTML = `Pourquoi ? ${item.explain}`; details.appendChild(correct); details.appendChild(explain); wrap.appendChild(title); wrap.appendChild(details); reviewList.appendChild(wrap); }); } function goTo(idx) { state.idx = Math.max(0, Math.min(QUESTIONS.length – 1, idx)); renderQuestion(); scrollIntoViewIfNeeded(); } function start() { state.started = true; hide(intro); show(quiz); hide(results); resetBtnTop.classList.remove(« hidden »); renderQuestion(); scrollIntoViewIfNeeded(); } function resetAll() { state.idx = 0; state.answers = Array(QUESTIONS.length).fill(null); state.started = false; show(intro); hide(quiz); hide(results); reviewWrap.classList.add(« hidden »); reviewBtn.textContent = STR.reviewShow; copyStatus.textContent = «  »; startBtn.textContent = STR.start; setProgress(); resetBtnTop.classList.add(« hidden »); scrollIntoViewIfNeeded(); } function validateBeforeNext() { // Laisse passer sans bloquer, mais encourage à répondre // (Vous pouvez changer ici pour bloquer strictement) return true; } function next() { if (!validateBeforeNext()) return; const isLast = state.idx === QUESTIONS.length – 1; if (isLast) { renderResults(); return; } goTo(state.idx + 1); } function prev() { goTo(state.idx – 1); } async function copySummary() { const score = computeScore(); const level = levelFromScore(score); const levelLabel = level === « surveillance_et_amenagements » ? « Surveillance et aménagements » : level === « avis_professionnel_recommande » ? « Avis professionnel recommandé » : « Évaluation neuropsychologique à envisager »; const answered = state.answers.filter(Boolean).length; const lines = []; lines.push(« Résumé du quizz — Signaux compatibles avec troubles dysexécutifs »); lines.push(`Score : ${score}/10`); lines.push(`Niveau : ${levelLabel}`); lines.push(`Questions répondues : ${answered}/10`); lines.push(« Rappel : ce résultat ne remplace pas un diagnostic. »); lines.push(«  »); lines.push(« Détail des réponses : »); QUESTIONS.forEach((q, i) => { const a = state.answers[i]; const user = a?.choice ?? « — »; lines.push(`Q${i + 1} (${q.theme}) : ${user} | Signal : ${q.correct}`); }); const text = lines.join(« n »); copyStatus.textContent = «  »; try { await navigator.clipboard.writeText(text); copyStatus.textContent = STR.copyOk; } catch (e) { // Fallback : affiche le texte dans un bloc sélectionnable copyStatus.innerHTML = ` `; const ta = copyStatus.querySelector(« textarea »); ta.value = text; ta.focus(); ta.select(); } } function toggleReview() { const isHidden = reviewWrap.classList.contains(« hidden »); if (isHidden) { reviewWrap.classList.remove(« hidden »); reviewBtn.textContent = STR.reviewHide; scrollIntoViewIfNeeded(); } else { reviewWrap.classList.add(« hidden »); reviewBtn.textContent = STR.reviewShow; } } // ————————— // Events // ————————— startBtn.addEventListener(« click », start); resetBtnTop.addEventListener(« click », resetAll); resetBtn.addEventListener(« click », resetAll); nextBtn.addEventListener(« click », next); prevBtn.addEventListener(« click », prev); copyBtn.addEventListener(« click », copySummary); reviewBtn.addEventListener(« click », toggleReview); // Navigation clavier: flèches pour changer de question (optionnel) root.addEventListener(« keydown », (ev) => { if (!state.started) return; if (results.classList.contains(« hidden ») === false) return; if (ev.key === « ArrowLeft ») { ev.preventDefault(); if (state.idx > 0) prev(); } else if (ev.key === « ArrowRight ») { ev.preventDefault(); next(); } }); // Init qTotalEl.textContent = String(QUESTIONS.length); setProgress(); })();