.qcmf-wrap { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; max-width: 900px; margin: 24px auto; padding: 16px; }
.qcmf-card { background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.08); padding: 24px; }
.qcmf-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; gap:12px; flex-wrap: wrap; }
.qcmf-title { font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; margin:0; }
.qcmf-badge { font-size:12px; padding:6px 10px; border-radius:999px; background:#f2f4f7; }
.qcmf-progress { height:10px; background:#eef2f7; border-radius:999px; overflow:hidden; margin:12px 0 20px; }
.qcmf-progress > div { height:100%; width:0; background: linear-gradient(90deg,#4f46e5,#22c55e); transition: width .35s ease; }
.qcmf-question { font-size: clamp(18px, 2.6vw, 22px); line-height: 1.4; margin: 10px 0 14px; }
.qcmf-sub { color:#475569; font-size:14px; margin-top:-8px; margin-bottom:10px; }
.qcmf-options { display:grid; gap:12px; grid-template-columns: 1fr; }
.qcmf-btn { border:1px solid #e5e7eb; background:#fff; border-radius: 12px; padding: 12px 14px; text-align:left; cursor:pointer; font-size:16px; transition: transform .06s ease, border-color .2s, background .2s; color:#111; }
.qcmf-btn:hover { transform: translateY(-1px); border-color:#c7d2fe; background:#f8fafc; }
.qcmf-btn[disabled] { opacity:.8; cursor:not-allowed; }
.qcmf-btn.correct { border-color:#22c55e; background:#ecfdf5; }
.qcmf-btn.wrong { border-color:#ef4444; background:#fef2f2; }
.qcmf-feedback { margin-top: 12px; padding: 12px 14px; border-left: 4px solid #e5e7eb; border-radius:10px; background:#f8fafc; font-size:14px; }
.qcmf-feedback.good { border-color:#22c55e; background:#ecfdf5; }
.qcmf-feedback.bad { border-color:#ef4444; background:#fef2f2; }
.qcmf-actions { display:flex; gap:10px; margin-top:16px; flex-wrap: wrap; }
.qcmf-cta { border:none; border-radius:10px; padding:10px 14px; font-weight:600; cursor:pointer; }
.qcmf-cta.primary { background:#4f46e5; color:#fff; }
.qcmf-cta.secondary { background:#e5e7eb; }
.qcmf-footer { margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap: wrap; }
.qcmf-meter { font-size:14px; color:#334155; background:#f1f5f9; padding:6px 10px; border-radius:8px; }
.qcmf-encourage { font-size:14px; color:#1f2937; }
.qcmf-note { font-size: clamp(20px, 3vw, 28px); font-weight:800; }
.qcmf-small { font-size:12px; color:#64748b; }
@media (min-width: 640px) { .qcmf-options { grid-template-columns: 1fr 1fr; } }
(function(){
// ————————————————
// 1) BANQUE DE QUESTIONS (JSON)
// ————————————————
const QUESTIONS = [
// 1 — Définition
{
question: « Quel est l’énoncé correct du théorème de Pythagore ? »,
options: [
« Dans un triangle quelconque, a² + b² = c². »,
« Dans un triangle rectangle, la somme des carrés des longueurs des deux côtés de l’angle droit est égale au carré de l’hypoténuse. »,
« Dans un triangle isocèle, a² + b² = c². »,
« Dans tous les triangles, la somme des côtés est égale à la somme des carrés. »
],
correctIndex: 1,
explications: [
« Non : ce n’est vrai que pour les triangles rectangles, pas pour tous. »,
« Oui ! C’est exactement l’énoncé : c’est valable uniquement si le triangle est rectangle. »,
« Non : le théorème vise les triangles rectangles, pas spécifiquement les isocèles. »,
« Non : cette phrase n’a pas de sens en géométrie euclidienne. »
]
},
// 2 — Reconnaître un triangle rectangle (3-4-5)
{
question: « Un triangle a pour côtés 3, 4 et 5. Est-il rectangle ? »,
options: [
« Oui, car 3² + 4² = 5². »,
« Oui, car 3 + 4 = 5. »,
« Non, car 3² + 4² ≠ 5². »,
« On ne peut pas savoir. »
],
correctIndex: 0,
explications: [
« Correct : 9 + 16 = 25, donc c’est un triangle rectangle (hypoténuse 5). »,
« Additionner les longueurs ne prouve rien ici. »,
« Faux : 3² + 4² = 25, soit bien 5². »,
« Si, on peut savoir en testant la relation de Pythagore. »
]
},
// 3 — Hypoténuse simple
{
question: « Dans un triangle rectangle, les deux côtés de l’angle droit mesurent 6 et 8. Quelle est la longueur de l’hypoténuse ? »,
options: [« 10 », « 12 », « 7 », « 9 »],
correctIndex: 0,
explications: [
« Oui : √(6²+8²)=√(36+64)=√100=10. »,
« Non : 12 serait la somme 6+6, rien à voir. »,
« Non : 7 correspondrait à √49, pas au bon calcul. »,
« Non : 9 correspondrait à √81, pas au bon calcul. »
]
},
// 4 — Côté manquant avec hypoténuse 13
{
question: « Un triangle rectangle a pour hypoténuse 13 et un côté de l’angle droit de 5. Quelle est la longueur de l’autre côté ? »,
options: [« 12 », « 10 », « 8 », « 9 »],
correctIndex: 0,
explications: [
« Bravo : √(13²−5²)=√(169−25)=√144=12. »,
« Non : 10 ne vérifie pas 10²+5²=13². »,
« Non : 8²+5²=89 ≠ 169. »,
« Non : 9²+5²=106 ≠ 169. »
]
},
// 5 — Échelle (mot problème)
{
question: « Une échelle de 7 m est posée contre un mur. Le pied est à 4 m du mur. À quelle hauteur arrive-t-elle ? »,
options: [« ≈ 5,74 m », « 6 m », « 5 m », « 4,5 m »],
correctIndex: 0,
explications: [
« Oui : √(7²−4²)=√(49−16)=√33≈5,744… donc ≈5,74 m. »,
« Non : 6 serait trop grand par rapport au calcul exact. »,
« Non : 5 est sous-estimé. »,
« Non : 4,5 n’est pas le résultat du calcul de Pythagore ici. »
]
},
// 6 — Triple pythagoricien (7-24-25)
{
question: « Les longueurs 7, 24 et 25 peuvent-elles former un triangle rectangle ? »,
options: [
« Oui, car 7² + 24² = 25². »,
« Non, car 7 + 24 ≠ 25. »,
« Non, car 7² + 24² ≠ 25². »,
« On ne peut pas déterminer. »
],
correctIndex: 0,
explications: [
« Exact : 49 + 576 = 625, donc c’est rectangle (hypoténuse 25). »,
« La somme des côtés ne permet pas de conclure. »,
« Faux : on vient de vérifier que c’est égal. »,
« Si, on peut : on teste simplement la relation a²+b²=c². »
]
},
// 7 — Diagonale rectangle 9×12
{
question: « Quelle est la diagonale d’un rectangle de 9 cm par 12 cm ? »,
options: [« 15 cm », « 13 cm », « 21 cm », « √(9+12) cm »],
correctIndex: 0,
explications: [
« Oui : √(9²+12²)=√(81+144)=√225=15 cm. »,
« Non : 13 ne correspond à aucun calcul ici. »,
« Non : 21 est simplement 9+12, pas un calcul de Pythagore. »,
« Non : la formule correcte est √(9²+12²), pas √(9+12). »
]
},
// 8 — Test non-rectangle
{
question: « Un triangle a pour côtés 6, 7 et 10. Est-il rectangle ? »,
options: [
« Non, car 6² + 7² ≠ 10². »,
« Oui, car 6² + 7² = 10². »,
« Oui, car 6 + 7 = 13. »,
« On ne peut pas savoir. »
],
correctIndex: 0,
explications: [
« Correct : 36 + 49 = 85 ≠ 100, donc pas rectangle. »,
« Faux : 85 n’est pas égal à 100. »,
« La somme simple ne prouve rien. »,
« Si, on peut en vérifiant la relation de Pythagore. »
]
},
// 9 — Hypoténuse 9 et 40
{
question: « Dans un triangle rectangle, les côtés de l’angle droit mesurent 9 et 40. L’hypoténuse vaut : »,
options: [« 41 », « 49 », « 39 », « √(9×40) »],
correctIndex: 0,
explications: [
« Oui : √(9²+40²)=√(81+1600)=√1681=41. »,
« Non : 49 est 7², un nombre sorti de nulle part ici. »,
« Non : 39 est inférieur à 40, impossible pour l’hypoténuse. »,
« Non : on additionne les carrés, on ne multiplie pas les longueurs. »
]
},
// 10 — Distance dans le plan
{
question: « Quelle est la distance entre A(1;2) et B(5;5) dans le plan ? »,
options: [« 5 », « 4 », « √10 », « 3 »],
correctIndex: 0,
explications: [
« Oui : √((5−1)²+(5−2)²)=√(4²+3²)=√25=5. »,
« Non : 4 serait la différence sur l’axe x uniquement. »,
« Non : √10 correspondrait à (3;1), pas ici. »,
« Non : 3 serait la différence sur l’axe y uniquement. »
]
},
// 11 — Autre triple (8-15-17)
{
question: « Les longueurs 8, 15 et 17 forment-elles un triangle rectangle ? »,
options: [
« Oui, car 8² + 15² = 17². »,
« Non, car 8 + 15 ≠ 17. »,
« Non, car 8² + 15² ≠ 17². »,
« On ne peut pas conclure. »
],
correctIndex: 0,
explications: [
« Exact : 64 + 225 = 289 = 17², donc oui. »,
« La somme des côtés ne sert pas ici. »,
« Faux : on vient de montrer que c’est égal. »,
« Si, on peut en appliquant Pythagore (ou sa réciproque). »
]
},
// 12 — Diagonale d’un carré (5)
{
question: « Quelle est la diagonale d’un carré de côté 5 cm ? »,
options: [« ≈ 7,07 cm », « 10 cm », « 5 cm », « 6,5 cm »],
correctIndex: 0,
explications: [
« Oui : √(5²+5²)=√50≈7,071 → ≈7,07 cm. »,
« Non : 10 serait 2×5, pas la diagonale. »,
« Non : la diagonale est plus grande que le côté. »,
« Non : 6,5 ne provient pas du calcul exact. »
]
},
// 13 — Côté manquant (hypoténuse 10, autre côté 6)
{
question: « Dans un triangle rectangle, l’hypoténuse vaut 10 et un côté mesure 6. L’autre côté vaut : »,
options: [« 8 », « 7 », « 4 », « 9 »],
correctIndex: 0,
explications: [
« Oui : √(10²−6²)=√(100−36)=√64=8. »,
« Non : 7 ne vérifie pas 7²+6²=10². »,
« Non : 4 donnerait 16+36=52 ≠ 100. »,
« Non : 9 donnerait 81+36=117 ≠ 100. »
]
},
// 14 — Diagonale d’un terrain 60×80
{
question: « On traverse en diagonale un terrain rectangulaire de 60 m par 80 m. Quelle est la longueur du trajet ? »,
options: [« 100 m », « 140 m », « 90 m », « √(60+80) m »],
correctIndex: 0,
explications: [
« Bravo : √(60²+80²)=√(3600+6400)=√10000=100 m. »,
« Non : 140 est simplement 60+80. »,
« Non : 90 n’a pas de base pythagoricienne ici. »,
« Non : on additionne les carrés, pas les longueurs. »
]
},
// 15 — Multiple de 3-4-5
{
question: « Un triangle a pour côtés 9, 12 et 15. Est-il rectangle ? »,
options: [
« Oui, c’est un multiple de (3,4,5). »,
« Non, car 9 + 12 ≠ 15. »,
« Non, car 9² + 12² ≠ 15². »,
« On ne peut pas savoir. »
],
correctIndex: 0,
explications: [
« Exact : (3×3, 4×3, 5×3) → 9²+12²=81+144=225=15². »,
« La somme simple ne conclut à rien. »,
« Faux : on a justement 225=225. »,
« Si, on peut : c’est un triple pythagoricien connu. »
]
}
];
// ————————————————
// 2) RENDU & LOGIQUE DU QUIZ
// ————————————————
const elRoot = document.getElementById(« qcm-maths-pythagore »);
let index = 0, correct = 0;
const h=(t,a={},…c)=>{
const e=document.createElement(t);
for(const[k,v] of Object.entries(a||{})){
if(k=== »class ») e.className=v;
else if(k=== »html ») e.innerHTML=v;
else if(k=== »style ») e.setAttribute(« style », v);
else e.setAttribute(k,v);
}
c.forEach(x=>{ if(x!=null) e.appendChild(typeof x=== »string »?document.createTextNode(x):x); });
return e;
};
function encouragement(note20){
if(note20 >= 18) return « 🔥 Masterclass ! Tu gères le théorème de Pythagore. »;
if(note20 >= 15) return « Super ! Encore un petit effort et c’est parfait ! »;
if(note20 >= 10) return « Bien joué, tu es sur la bonne voie. Continue 💪 »;
return « Pas grave, on apprend en se trompant. Reprends calmement et tu vas y arriver ✨ »;
}
function render(){
elRoot.innerHTML = « »;
const q = QUESTIONS[index];
const header = h(« div »,{class: »qcmf-header »},
h(« h2″,{class: »qcmf-title »}, »Théorème de Pythagore — QCM »),
h(« span »,{class: »qcmf-badge »},`Question ${index+1}/${QUESTIONS.length}`)
);
const progress = h(« div »,{class: »qcmf-progress »}, h(« div »,{style:`width:${(index/QUESTIONS.length)*100}%`}));
const sub = h(« div »,{class: »qcmf-sub »}, index<5 ? "Niveau : facile" : (index{
const btn = h(« button »,{class: »qcmf-btn »}, opt);
btn.onclick = ()=>{
[…opts.children].forEach(b=>{ if(b.tagName=== »BUTTON ») b.disabled = true; });
if(i===q.correctIndex){ correct++; btn.classList.add(« correct »); }
else { btn.classList.add(« wrong »); }
const good = i===q.correctIndex;
const fb = h(« div »,{class:`qcmf-feedback ${good? »good »: »bad »}`}, q.explications[i]);
opts.appendChild(fb);
const actions = h(« div »,{class: »qcmf-actions »});
const next = h(« button »,{class: »qcmf-cta primary »}, »Suivant ▶ »);
next.onclick = ()=>{ if(index{ index=0; correct=0; render(); };
const footer = h(« div »,{class: »qcmf-footer »},
h(« span »,{class: »qcmf-meter »}, `Taux de réussite : ${pct}%`),
again
);
elRoot.appendChild(h(« div »,{class: »qcmf-card »},
h(« h2″,{class: »qcmf-title »}, »Résultat »),
h(« p »,{class: »qcmf-note »},`Note : ${note.toFixed(1)}/20`),
h(« p »,{},`Bonnes réponses : ${correct}/${QUESTIONS.length}`),
h(« p »,{class: »qcmf-encourage »}, encouragement(note))
));
elRoot.appendChild(footer);
}
render();
})();
Pour t’aider :
1. Théorème de Pythagore
- Énoncé : dans un triangle rectangle
- Formule : a² + b² = c² (avec c = hypoténuse)
2. Identifier les éléments
- Triangle rectangle → angle droit ⚡
- Hypoténuse = côté le plus long
- Côtés de l’angle droit = « côtés adjacents »
3. Applications directes
- Trouver l’hypoténuse :
→ c=a2+b2c = \sqrt{a² + b²}c=a2+b2
- Trouver un côté :
→ a=c2−b2a = \sqrt{c² – b²}a=c2−b2
4. Utilisations pratiques
- Vérifier si un triangle est rectangle
- Calculer une diagonale (rectangle, carré)
- Distances dans un plan (coordonnées)
- Problèmes concrets : échelle, terrain, mur…
5. Jeux de nombres (triples pythagoriciens)
- (3, 4, 5)
- (5, 12, 13)
- (7, 24, 25)
- Multiples de ces triplets
6. Erreurs fréquentes
- Oublier que c’est uniquement pour les triangles rectangles
- Confondre addition et soustraction
- Prendre le mauvais côté comme hypoténuse
- Croire que la somme des côtés suffit