Balise \u2014 Quiz des symboles CO<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@400;500;600;700&family=Karla:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --paper: #F6F3E7;\n --paper-line: #E3DCC4;\n --ink: #23301F;\n --ink-soft: #56604F;\n --forest: #2F4B3C;\n --forest-dark: #1D3226;\n --magenta: #B8005E;\n --magenta-dark: #8C0048;\n --brown: #8B5E34;\n --blue: #1C6FA8;\n --gold: #C99A2E;\n --card: #FFFDF6;\n --error: #A93226;\n }\n *{box-sizing:border-box;}\n html,body{margin:0;padding:0;}\n body{\n background:\n repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(139,94,52,0.07) 27px, rgba(139,94,52,0.07) 28px),\n var(--paper);\n color:var(--ink);\n font-family:'Karla',sans-serif;\n min-height:100vh;\n display:flex;\n align-items:flex-start;\n justify-content:center;\n padding:32px 16px 60px;\n }\n .wrap{ width:100%; max-width:620px; }\n\n \/* header *\/\n .masthead{\n display:flex;\n align-items:center;\n gap:16px;\n margin-bottom:22px;\n }\n .compass{ flex:0 0 auto; }\n .masthead h1{\n font-family:'Oswald',sans-serif;\n font-weight:700;\n font-size:clamp(28px,6vw,38px);\n letter-spacing:0.5px;\n color:var(--forest-dark);\n margin:0;\n line-height:1;\n }\n .masthead p{\n margin:4px 0 0;\n color:var(--ink-soft);\n font-size:14.5px;\n }\n\n \/* card = fiche de contr\u00f4le *\/\n .sheet{\n position:relative;\n background:var(--card);\n border:2px solid var(--forest-dark);\n padding:28px 26px 24px;\n }\n .sheet::before, .sheet::after,\n .sheet .tick-tl, .sheet .tick-br{\n content:\"\";\n position:absolute;\n width:14px;height:14px;\n border:2px solid var(--magenta);\n }\n .sheet::before{ top:-2px; left:-2px; border-right:none; border-bottom:none; }\n .sheet::after{ bottom:-2px; right:-2px; border-left:none; border-top:none; }\n\n .grid-ref{\n position:absolute;\n font-family:'Oswald',sans-serif;\n font-size:11px;\n letter-spacing:1px;\n color:var(--brown);\n opacity:0.75;\n }\n .grid-ref.top-right{ top:6px; right:14px; }\n .grid-ref.bottom-left{ bottom:6px; left:14px; }\n\n .progress-row{\n display:flex;\n justify-content:space-between;\n align-items:center;\n font-family:'Oswald',sans-serif;\n font-size:13px;\n letter-spacing:0.5px;\n color:var(--ink-soft);\n margin-bottom:14px;\n }\n .progress-track{\n height:5px;\n background:var(--paper-line);\n margin:0 0 22px;\n position:relative;\n overflow:hidden;\n }\n .progress-fill{\n height:100%;\n background:var(--magenta);\n width:0%;\n transition:width .35s ease;\n }\n\n .symbol-stage{\n display:flex;\n align-items:center;\n justify-content:center;\n background:\n repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(28,111,168,0.08) 39px, rgba(28,111,168,0.08) 40px),\n repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(28,111,168,0.08) 39px, rgba(28,111,168,0.08) 40px),\n #FDFCF5;\n border:1px solid var(--paper-line);\n padding:18px;\n margin-bottom:6px;\n }\n .symbol-stage svg{ width:170px; height:170px; display:block; }\n\n .question-text{\n text-align:center;\n font-family:'Oswald',sans-serif;\n font-size:19px;\n font-weight:500;\n color:var(--forest-dark);\n margin:18px 0 20px;\n }\n\n .options{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:10px;\n }\n @media (max-width:440px){ .options{ grid-template-columns:1fr; } }\n\n .opt-btn{\n font-family:'Karla',sans-serif;\n font-size:15px;\n font-weight:700;\n text-align:left;\n padding:13px 14px;\n background:var(--card);\n border:1.5px solid var(--ink);\n color:var(--ink);\n cursor:pointer;\n transition:background .15s ease, border-color .15s ease, transform .1s ease;\n display:flex;\n align-items:center;\n gap:10px;\n }\n .opt-btn .letter{\n font-family:'Oswald',sans-serif;\n font-size:13px;\n width:22px;height:22px;\n border:1.5px solid var(--ink);\n display:flex;align-items:center;justify-content:center;\n flex:0 0 auto;\n }\n .opt-btn:hover:not(:disabled){ background:#FBF6E9; transform:translateY(-1px); }\n .opt-btn:disabled{ cursor:default; }\n .opt-btn.correct{ background:#E8F2E7; border-color:var(--forest); color:var(--forest-dark); }\n .opt-btn.correct .letter{ border-color:var(--forest); background:var(--forest); color:#fff; }\n .opt-btn.wrong{ background:#F7E7E3; border-color:var(--error); color:var(--error); }\n .opt-btn.wrong .letter{ border-color:var(--error); background:var(--error); color:#fff; }\n .opt-btn.dim{ opacity:0.5; }\n\n .feedback{\n margin-top:18px;\n padding:14px 16px;\n border-left:4px solid var(--forest);\n background:#F0F3EC;\n font-size:14.5px;\n line-height:1.5;\n display:none;\n }\n .feedback.show{ display:block; }\n .feedback.bad{ border-left-color:var(--error); background:#FBEEEC; }\n .feedback b{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:0.2px; }\n\n .next-row{ margin-top:18px; text-align:right; }\n .next-btn{\n font-family:'Oswald',sans-serif;\n font-size:14px;\n letter-spacing:0.5px;\n font-weight:600;\n background:var(--magenta);\n color:#fff;\n border:none;\n padding:11px 22px;\n cursor:pointer;\n display:none;\n }\n .next-btn.show{ display:inline-block; }\n .next-btn:hover{ background:var(--magenta-dark); }\n\n \/* result screen *\/\n .result{ display:none; text-align:center; }\n .result.show{ display:block; }\n .result .big-score{\n font-family:'Oswald',sans-serif;\n font-size:64px;\n font-weight:700;\n color:var(--forest-dark);\n line-height:1;\n margin:8px 0 4px;\n }\n .result .big-score span{ font-size:28px; color:var(--ink-soft); font-weight:500; }\n .result .verdict{ font-size:16px; color:var(--ink-soft); margin-bottom:22px; }\n .punch-row{\n display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:26px;\n }\n .punch{\n width:26px;height:26px; border-radius:50%;\n border:2px solid var(--ink);\n display:flex; align-items:center; justify-content:center;\n }\n .punch.hit{ border-color:var(--forest); background:var(--forest); }\n .punch.hit::after{ content:\"\u2715\"; color:#fff; font-size:13px; font-weight:700; }\n .punch.miss{ border-color:var(--error); }\n .punch.miss::after{ content:\"\u00b7\"; color:var(--error); }\n .restart-btn{\n font-family:'Oswald',sans-serif;\n font-size:14px;\n letter-spacing:0.5px;\n font-weight:600;\n background:var(--forest);\n color:#fff;\n border:none;\n padding:12px 26px;\n cursor:pointer;\n }\n .restart-btn:hover{ background:var(--forest-dark); }\n .quiz-body.hidden{ display:none; }\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n\n <div class=\"masthead\">\n <svg class=\"compass\" width=\"46\" height=\"46\" viewBox=\"0 0 46 46\">\n <circle cx=\"23\" cy=\"23\" r=\"20\" fill=\"none\" stroke=\"#1D3226\" stroke-width=\"2\"\/>\n <polygon points=\"23,5 27,23 23,20 19,23\" fill=\"#B8005E\"\/>\n <polygon points=\"23,41 27,23 23,26 19,23\" fill=\"#1D3226\"\/>\n <circle cx=\"23\" cy=\"23\" r=\"2.4\" fill=\"#1D3226\"\/>\n <\/svg>\n <div>\n <h1>Chasse aux symboles<\/h1>\n <p>Quiz sur les pictogrammes des cartes de course d'orientation<\/p>\n <\/div>\n <\/div>\n\n <div class=\"sheet\">\n <span class=\"grid-ref top-right\">E 512 \u00b7 N 6340<\/span>\n <span class=\"grid-ref bottom-left\">1 : 10 000<\/span>\n\n <div class=\"quiz-body\" id=\"quizBody\">\n <div class=\"progress-row\">\n <span id=\"qCounter\">QUESTION 1 \/ 15<\/span>\n <span id=\"scoreLive\">SCORE 0<\/span>\n <\/div>\n <div class=\"progress-track\"><div class=\"progress-fill\" id=\"progressFill\"><\/div><\/div>\n\n <div class=\"symbol-stage\" id=\"symbolStage\"><\/div>\n\n <p class=\"question-text\">Que repr\u00e9sente ce symbole ?<\/p>\n\n <div class=\"options\" id=\"optionsBox\"><\/div>\n\n <div class=\"feedback\" id=\"feedback\"><\/div>\n <div class=\"next-row\">\n <button class=\"next-btn\" id=\"nextBtn\">Question suivante \u2192<\/button>\n <\/div>\n <\/div>\n\n <div class=\"result\" id=\"result\">\n <p style=\"font-family:'Oswald',sans-serif;letter-spacing:1px;color:var(--ink-soft);margin-bottom:0;\">R\u00c9SULTAT<\/p>\n <div class=\"big-score\"><span id=\"scoreFinal\">0<\/span><span> \/ 15<\/span><\/div>\n <p class=\"verdict\" id=\"verdict\"><\/p>\n <div class=\"punch-row\" id=\"punchRow\"><\/div>\n <button class=\"restart-btn\" id=\"restartBtn\">Refaire un parcours<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n\/* ---------- Symboles (SVG dessin\u00e9s selon les conventions ISOM) ---------- *\/\nconst svgControl = `<svg viewBox=\"0 0 120 120\"><circle cx=\"60\" cy=\"60\" r=\"34\" fill=\"none\" stroke=\"#B8005E\" stroke-width=\"5\"\/><\/svg>`;\n\nconst svgStart = `<svg viewBox=\"0 0 120 120\"><polygon points=\"60,18 100,88 20,88\" fill=\"none\" stroke=\"#B8005E\" stroke-width=\"5\" stroke-linejoin=\"round\"\/><\/svg>`;\n\nconst svgFinish = `<svg viewBox=\"0 0 120 120\"><circle cx=\"60\" cy=\"60\" r=\"34\" fill=\"none\" stroke=\"#B8005E\" stroke-width=\"4.5\"\/><circle cx=\"60\" cy=\"60\" r=\"22\" fill=\"none\" stroke=\"#B8005E\" stroke-width=\"4.5\"\/><\/svg>`;\n\nconst svgBoulder = `<svg viewBox=\"0 0 120 120\"><path d=\"M60 48c9 0 16 8 15 16s-9 13-17 12-14-9-13-17 6-11 15-11z\" fill=\"#1a1a1a\"\/><\/svg>`;\n\nconst svgCliff = `<svg viewBox=\"0 0 120 120\">\n <path d=\"M18 45 C40 40, 60 55, 82 42 S 105 50, 112 46\" fill=\"none\" stroke=\"#1a1a1a\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n ${Array.from({length:9}).map((_,i)=>{const x=22+i*10; return `<line x1=\"${x}\" y1=\"46\" x2=\"${x-4}\" y2=\"60\" stroke=\"#1a1a1a\" stroke-width=\"3\" stroke-linecap=\"round\"\/>`}).join('')}\n<\/svg>`;\n\nconst svgKnoll = `<svg viewBox=\"0 0 120 120\">\n <ellipse cx=\"60\" cy=\"65\" rx=\"26\" ry=\"18\" fill=\"none\" stroke=\"#8B5E34\" stroke-width=\"4\"\/>\n <line x1=\"60\" y1=\"47\" x2=\"60\" y2=\"30\" stroke=\"#8B5E34\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <line x1=\"48\" y1=\"51\" x2=\"36\" y2=\"38\" stroke=\"#8B5E34\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <line x1=\"72\" y1=\"51\" x2=\"84\" y2=\"38\" stroke=\"#8B5E34\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n<\/svg>`;\n\nconst svgDepression = `<svg viewBox=\"0 0 120 120\">\n <ellipse cx=\"60\" cy=\"60\" rx=\"28\" ry=\"20\" fill=\"none\" stroke=\"#8B5E34\" stroke-width=\"4\"\/>\n <line x1=\"60\" y1=\"60\" x2=\"60\" y2=\"44\" stroke=\"#8B5E34\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <line x1=\"50\" y1=\"63\" x2=\"38\" y2=\"72\" stroke=\"#8B5E34\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <line x1=\"70\" y1=\"63\" x2=\"82\" y2=\"72\" stroke=\"#8B5E34\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n<\/svg>`;\n\nconst svgWater = `<svg viewBox=\"0 0 120 120\"><path d=\"M40 35c-14 8-20 24-14 38 7 16 26 22 40 15 15-7 22-24 15-39-6-13-24-22-41-14z\" fill=\"#1C6FA8\"\/><\/svg>`;\n\nconst svgMarsh = `<svg viewBox=\"0 0 120 120\">\n <rect x=\"16\" y=\"16\" width=\"88\" height=\"88\" fill=\"#FDFCF5\" stroke=\"#E3DCC4\" stroke-width=\"1\"\/>\n ${[32,50,68,86].map(y=>`<line x1=\"30\" y1=\"${y}\" x2=\"46\" y2=\"${y}\" stroke=\"#1C6FA8\" stroke-width=\"3.5\"\/><line x1=\"60\" y1=\"${y}\" x2=\"76\" y2=\"${y}\" stroke=\"#1C6FA8\" stroke-width=\"3.5\"\/>`).join('')}\n<\/svg>`;\n\nconst svgRoad = `<svg viewBox=\"0 0 120 120\">\n <line x1=\"12\" y1=\"66\" x2=\"108\" y2=\"52\" stroke=\"#1a1a1a\" stroke-width=\"9\"\/>\n<\/svg>`;\n\nconst svgPath = `<svg viewBox=\"0 0 120 120\">\n <line x1=\"12\" y1=\"66\" x2=\"108\" y2=\"52\" stroke=\"#1a1a1a\" stroke-width=\"3\" stroke-dasharray=\"8 7\"\/>\n<\/svg>`;\n\nconst svgFence = `<svg viewBox=\"0 0 120 120\">\n <line x1=\"14\" y1=\"60\" x2=\"106\" y2=\"60\" stroke=\"#1a1a1a\" stroke-width=\"2.5\"\/>\n ${[26,44,62,80,98].map(x=>`<line x1=\"${x}\" y1=\"52\" x2=\"${x-6}\" y2=\"68\" stroke=\"#1a1a1a\" stroke-width=\"2.5\"\/>`).join('')}\n<\/svg>`;\n\nconst svgOpenLand = `<svg viewBox=\"0 0 120 120\"><rect x=\"16\" y=\"16\" width=\"88\" height=\"88\" fill=\"#F2D673\" stroke=\"#C99A2E\" stroke-width=\"1\"\/><\/svg>`;\n\nconst svgThicket = `<svg viewBox=\"0 0 120 120\">\n <rect x=\"16\" y=\"16\" width=\"88\" height=\"88\" fill=\"#2F4B3C\"\/>\n ${[[34,34],[64,30],[86,42],[28,60],[56,58],[84,68],[40,86],[70,90]].map(p=>`<circle cx=\"${p[0]}\" cy=\"${p[1]}\" r=\"3.4\" fill=\"#F6F3E7\"\/>`).join('')}\n<\/svg>`;\n\nconst svgBuilding = `<svg viewBox=\"0 0 120 120\"><rect x=\"34\" y=\"34\" width=\"52\" height=\"52\" fill=\"#1a1a1a\"\/><\/svg>`;\n\n\/* ---------- Banque de r\u00e9ponses possibles (distracteurs) ---------- *\/\nconst pool = [\n \"Bloc rocheux\",\"Falaise praticable\",\"Butte \/ sommet\",\"D\u00e9pression \/ cuvette\",\n \"Poste de contr\u00f4le\",\"Point de d\u00e9part\",\"Point d'arriv\u00e9e\",\"Eau infranchissable\",\n \"Marais\",\"Route\",\"Sentier\",\"Cl\u00f4ture\",\"Terrain d\u00e9couvert (bonne visibilit\u00e9)\",\n \"V\u00e9g\u00e9tation dense (fourr\u00e9)\",\"B\u00e2timent\",\"Ligne \u00e9lectrique\",\"Ruine\",\"Source\",\n \"Terrain semi-ouvert\",\"For\u00eat courante praticable\",\"Point cot\u00e9\",\"Foss\u00e9\"\n];\n\n\/* ---------- Questions ---------- *\/\nconst questions = [\n { svg: svgControl, answer: \"Poste de contr\u00f4le\", note: \"Un simple cercle magenta marque l'emplacement exact d'une balise \u00e0 trouver et poin\u00e7onner.\" },\n { svg: svgStart, answer: \"Point de d\u00e9part\", note: \"Le d\u00e9part est toujours repr\u00e9sent\u00e9 par un triangle magenta, plus grand qu'un cercle de poste.\" },\n { svg: svgFinish, answer: \"Point d'arriv\u00e9e\", note: \"L'arriv\u00e9e se distingue par un double cercle concentrique magenta.\" },\n { svg: svgBoulder, answer: \"Bloc rocheux\", note: \"Une petite tache noire pleine et irr\u00e9guli\u00e8re signale un rocher isol\u00e9, souvent utilis\u00e9 comme point d'attaque.\" },\n { svg: svgCliff, answer: \"Falaise praticable\", note: \"Le trait noir avec de courtes hachures perpendiculaires figure une paroi rocheuse ou un talus abrupt.\" },\n { svg: svgKnoll, answer: \"Butte \/ sommet\", note: \"Une forme ferm\u00e9e marron avec des hachures qui pointent vers l'ext\u00e9rieur indique un relief qui monte : une butte.\" },\n { svg: svgDepression,answer: \"D\u00e9pression \/ cuvette\", note: \"Ici les hachures marron pointent vers l'int\u00e9rieur : le terrain descend, c'est une cuvette ou une doline.\" },\n { svg: svgWater, answer: \"Eau infranchissable\", note: \"Une surface bleue pleine signale un plan d'eau (\u00e9tang, lac) qu'on ne peut pas traverser.\" },\n { svg: svgMarsh, answer: \"Marais\", note: \"De courts traits bleus horizontaux dispos\u00e9s en lignes indiquent un terrain mar\u00e9cageux, praticable mais spongieux.\" },\n { svg: svgRoad, answer: \"Route\", note: \"Un trait noir \u00e9pais et continu repr\u00e9sente une route carrossable.\" },\n { svg: svgPath, answer: \"Sentier\", note: \"Un trait noir fin en tirets figure un sentier ou chemin \u00e9troit.\" },\n { svg: svgFence, answer: \"Cl\u00f4ture\", note: \"Une ligne noire ponctu\u00e9e de petits piquets perpendiculaires repr\u00e9sente une cl\u00f4ture ou une barri\u00e8re.\" },\n { svg: svgOpenLand, answer: \"Terrain d\u00e9couvert (bonne visibilit\u00e9)\", note: \"Le jaune signale un terrain d\u00e9gag\u00e9, sans v\u00e9g\u00e9tation g\u00eanante, offrant une bonne visibilit\u00e9.\" },\n { svg: svgThicket, answer: \"V\u00e9g\u00e9tation dense (fourr\u00e9)\", note: \"Le vert fonc\u00e9 (parfois avec des points clairs) indique une v\u00e9g\u00e9tation dense qui ralentit fortement la course.\" },\n { svg: svgBuilding, answer: \"B\u00e2timent\", note: \"Un carr\u00e9 ou rectangle noir plein repr\u00e9sente une construction : maison, grange, abri.\" },\n];\n\n\/* ---------- Etat ---------- *\/\nlet order = [];\nlet current = 0;\nlet score = 0;\nlet hits = [];\nlet answered = false;\n\nfunction shuffle(arr){\n const a = arr.slice();\n for(let i=a.length-1;i>0;i--){\n const j = Math.floor(Math.random()*(i+1));\n [a[i],a[j]]=[a[j],a[i]];\n }\n return a;\n}\n\nfunction buildOptions(correct){\n const distractors = shuffle(pool.filter(p=>p!==correct)).slice(0,3);\n return shuffle([correct, ...distractors]);\n}\n\nfunction startQuiz(){\n order = shuffle(questions.map((_,i)=>i));\n current = 0;\n score = 0;\n hits = [];\n answered = false;\n document.getElementById('result').classList.remove('show');\n document.getElementById('quizBody').classList.remove('hidden');\n renderQuestion();\n}\n\nfunction renderQuestion(){\n answered = false;\n const q = questions[order[current]];\n document.getElementById('qCounter').textContent = `QUESTION ${current+1} \/ ${questions.length}`;\n document.getElementById('scoreLive').textContent = `SCORE ${score}`;\n document.getElementById('progressFill').style.width = `${(current\/questions.length)*100}%`;\n document.getElementById('symbolStage').innerHTML = q.svg;\n\n const opts = buildOptions(q.answer);\n const box = document.getElementById('optionsBox');\n box.innerHTML = '';\n const letters = ['A','B','C','D'];\n opts.forEach((opt, idx)=>{\n const btn = document.createElement('button');\n btn.className = 'opt-btn';\n btn.innerHTML = `<span class=\"letter\">${letters[idx]}<\/span><span>${opt}<\/span>`;\n btn.addEventListener('click', ()=>selectAnswer(btn, opt, q));\n box.appendChild(btn);\n });\n\n const fb = document.getElementById('feedback');\n fb.classList.remove('show','bad');\n fb.innerHTML = '';\n document.getElementById('nextBtn').classList.remove('show');\n}\n\nfunction selectAnswer(btn, chosen, q){\n if(answered) return;\n answered = true;\n const isCorrect = chosen === q.answer;\n if(isCorrect){ score++; hits.push(true); } else { hits.push(false); }\n\n [...document.getElementById('optionsBox').children].forEach(b=>{\n b.disabled = true;\n const label = b.querySelector('span:last-child').textContent;\n if(label === q.answer) b.classList.add('correct');\n else if(b === btn) b.classList.add('wrong');\n else b.classList.add('dim');\n });\n\n const fb = document.getElementById('feedback');\n fb.classList.add('show');\n if(!isCorrect) fb.classList.add('bad');\n fb.innerHTML = `<b>${isCorrect ? 'Correct \u2014 ' : 'Pas tout \u00e0 fait \u2014 '}${q.answer}.<\/b><br>${q.note}`;\n\n document.getElementById('scoreLive').textContent = `SCORE ${score}`;\n document.getElementById('nextBtn').classList.add('show');\n}\n\ndocument.getElementById('nextBtn').addEventListener('click', ()=>{\n current++;\n if(current >= questions.length){\n showResult();\n } else {\n renderQuestion();\n }\n});\n\nfunction showResult(){\n document.getElementById('progressFill').style.width = `100%`;\n document.getElementById('quizBody').classList.add('hidden');\n document.getElementById('result').classList.add('show');\n document.getElementById('scoreFinal').textContent = score;\n\n let verdict;\n const pct = score \/ questions.length;\n if(pct === 1) verdict = \"Carte parfaitement lue. Tu es pr\u00eat\u00b7e pour un parcours technique en for\u00eat.\";\n else if(pct >= 0.8) verdict = \"Tr\u00e8s solide \u2014 quelques symboles \u00e0 revoir avant la prochaine course.\";\n else if(pct >= 0.5) verdict = \"Bonne base, mais relis la l\u00e9gende avant ton prochain parcours.\";\n else verdict = \"Direction la l\u00e9gende de la carte pour r\u00e9viser les symboles de base.\";\n document.getElementById('verdict').textContent = verdict;\n\n const punchRow = document.getElementById('punchRow');\n punchRow.innerHTML = hits.map(h => `<div class=\"punch ${h?'hit':'miss'}\"><\/div>`).join('');\n}\n\ndocument.getElementById('restartBtn').addEventListener('click', startQuiz);\n\nstartQuiz();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Balise \u2014 Quiz des symboles CO Chasse aux symboles Quiz sur les pictogrammes des cartes de course d’orientation E 512 \u00b7 N 6340 1 : 10 000 QUESTION 1 \/ 15 SCORE 0 Que repr\u00e9sente ce symbole ? Question suivante \u2192 …<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/caponord-sports-orientation.fr\/index.php\/quiz-des-symboles\/\"> <span class=\"screen-reader-text\">Quiz des symboles<\/span> Read More »<\/a><\/p>\n","protected":false},"author":27,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"class_list":["post-4688","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages\/4688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/comments?post=4688"}],"version-history":[{"count":4,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages\/4688\/revisions"}],"predecessor-version":[{"id":4694,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages\/4688\/revisions\/4694"}],"wp:attachment":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/media?parent=4688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nBalise \u2014 Quiz des symboles CO<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@400;500;600;700&family=Karla:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --paper: #F6F3E7;\n --paper-line: #E3DCC4;\n --ink: #23301F;\n --ink-soft: #56604F;\n --forest: #2F4B3C;\n --forest-dark: #1D3226;\n --magenta: #B8005E;\n --magenta-dark: #8C0048;\n --brown: #8B5E34;\n --blue: #1C6FA8;\n --gold: #C99A2E;\n --card: #FFFDF6;\n --error: #A93226;\n }\n *{box-sizing:border-box;}\n html,body{margin:0;padding:0;}\n body{\n background:\n repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(139,94,52,0.07) 27px, rgba(139,94,52,0.07) 28px),\n var(--paper);\n color:var(--ink);\n font-family:'Karla',sans-serif;\n min-height:100vh;\n display:flex;\n align-items:flex-start;\n justify-content:center;\n padding:32px 16px 60px;\n }\n .wrap{ width:100%; max-width:620px; }\n\n \/* header *\/\n .masthead{\n display:flex;\n align-items:center;\n gap:16px;\n margin-bottom:22px;\n }\n .compass{ flex:0 0 auto; }\n .masthead h1{\n font-family:'Oswald',sans-serif;\n font-weight:700;\n font-size:clamp(28px,6vw,38px);\n letter-spacing:0.5px;\n color:var(--forest-dark);\n margin:0;\n line-height:1;\n }\n .masthead p{\n margin:4px 0 0;\n color:var(--ink-soft);\n font-size:14.5px;\n }\n\n \/* card = fiche de contr\u00f4le *\/\n .sheet{\n position:relative;\n background:var(--card);\n border:2px solid var(--forest-dark);\n padding:28px 26px 24px;\n }\n .sheet::before, .sheet::after,\n .sheet .tick-tl, .sheet .tick-br{\n content:\"\";\n position:absolute;\n width:14px;height:14px;\n border:2px solid var(--magenta);\n }\n .sheet::before{ top:-2px; left:-2px; border-right:none; border-bottom:none; }\n .sheet::after{ bottom:-2px; right:-2px; border-left:none; border-top:none; }\n\n .grid-ref{\n position:absolute;\n font-family:'Oswald',sans-serif;\n font-size:11px;\n letter-spacing:1px;\n color:var(--brown);\n opacity:0.75;\n }\n .grid-ref.top-right{ top:6px; right:14px; }\n .grid-ref.bottom-left{ bottom:6px; left:14px; }\n\n .progress-row{\n display:flex;\n justify-content:space-between;\n align-items:center;\n font-family:'Oswald',sans-serif;\n font-size:13px;\n letter-spacing:0.5px;\n color:var(--ink-soft);\n margin-bottom:14px;\n }\n .progress-track{\n height:5px;\n background:var(--paper-line);\n margin:0 0 22px;\n position:relative;\n overflow:hidden;\n }\n .progress-fill{\n height:100%;\n background:var(--magenta);\n width:0%;\n transition:width .35s ease;\n }\n\n .symbol-stage{\n display:flex;\n align-items:center;\n justify-content:center;\n background:\n repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(28,111,168,0.08) 39px, rgba(28,111,168,0.08) 40px),\n repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(28,111,168,0.08) 39px, rgba(28,111,168,0.08) 40px),\n #FDFCF5;\n border:1px solid var(--paper-line);\n padding:18px;\n margin-bottom:6px;\n }\n .symbol-stage svg{ width:170px; height:170px; display:block; }\n\n .question-text{\n text-align:center;\n font-family:'Oswald',sans-serif;\n font-size:19px;\n font-weight:500;\n color:var(--forest-dark);\n margin:18px 0 20px;\n }\n\n .options{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:10px;\n }\n @media (max-width:440px){ .options{ grid-template-columns:1fr; } }\n\n .opt-btn{\n font-family:'Karla',sans-serif;\n font-size:15px;\n font-weight:700;\n text-align:left;\n padding:13px 14px;\n background:var(--card);\n border:1.5px solid var(--ink);\n color:var(--ink);\n cursor:pointer;\n transition:background .15s ease, border-color .15s ease, transform .1s ease;\n display:flex;\n align-items:center;\n gap:10px;\n }\n .opt-btn .letter{\n font-family:'Oswald',sans-serif;\n font-size:13px;\n width:22px;height:22px;\n border:1.5px solid var(--ink);\n display:flex;align-items:center;justify-content:center;\n flex:0 0 auto;\n }\n .opt-btn:hover:not(:disabled){ background:#FBF6E9; transform:translateY(-1px); }\n .opt-btn:disabled{ cursor:default; }\n .opt-btn.correct{ background:#E8F2E7; border-color:var(--forest); color:var(--forest-dark); }\n .opt-btn.correct .letter{ border-color:var(--forest); background:var(--forest); color:#fff; }\n .opt-btn.wrong{ background:#F7E7E3; border-color:var(--error); color:var(--error); }\n .opt-btn.wrong .letter{ border-color:var(--error); background:var(--error); color:#fff; }\n .opt-btn.dim{ opacity:0.5; }\n\n .feedback{\n margin-top:18px;\n padding:14px 16px;\n border-left:4px solid var(--forest);\n background:#F0F3EC;\n font-size:14.5px;\n line-height:1.5;\n display:none;\n }\n .feedback.show{ display:block; }\n .feedback.bad{ border-left-color:var(--error); background:#FBEEEC; }\n .feedback b{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:0.2px; }\n\n .next-row{ margin-top:18px; text-align:right; }\n .next-btn{\n font-family:'Oswald',sans-serif;\n font-size:14px;\n letter-spacing:0.5px;\n font-weight:600;\n background:var(--magenta);\n color:#fff;\n border:none;\n padding:11px 22px;\n cursor:pointer;\n display:none;\n }\n .next-btn.show{ display:inline-block; }\n .next-btn:hover{ background:var(--magenta-dark); }\n\n \/* result screen *\/\n .result{ display:none; text-align:center; }\n .result.show{ display:block; }\n .result .big-score{\n font-family:'Oswald',sans-serif;\n font-size:64px;\n font-weight:700;\n color:var(--forest-dark);\n line-height:1;\n margin:8px 0 4px;\n }\n .result .big-score span{ font-size:28px; color:var(--ink-soft); font-weight:500; }\n .result .verdict{ font-size:16px; color:var(--ink-soft); margin-bottom:22px; }\n .punch-row{\n display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:26px;\n }\n .punch{\n width:26px;height:26px; border-radius:50%;\n border:2px solid var(--ink);\n display:flex; align-items:center; justify-content:center;\n }\n .punch.hit{ border-color:var(--forest); background:var(--forest); }\n .punch.hit::after{ content:\"\u2715\"; color:#fff; font-size:13px; font-weight:700; }\n .punch.miss{ border-color:var(--error); }\n .punch.miss::after{ content:\"\u00b7\"; color:var(--error); }\n .restart-btn{\n font-family:'Oswald',sans-serif;\n font-size:14px;\n letter-spacing:0.5px;\n font-weight:600;\n background:var(--forest);\n color:#fff;\n border:none;\n padding:12px 26px;\n cursor:pointer;\n }\n .restart-btn:hover{ background:var(--forest-dark); }\n .quiz-body.hidden{ display:none; }\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n\n <div class=\"masthead\">\n <svg class=\"compass\" width=\"46\" height=\"46\" viewBox=\"0 0 46 46\">\n <circle cx=\"23\" cy=\"23\" r=\"20\" fill=\"none\" stroke=\"#1D3226\" stroke-width=\"2\"\/>\n <polygon points=\"23,5 27,23 23,20 19,23\" fill=\"#B8005E\"\/>\n <polygon points=\"23,41 27,23 23,26 19,23\" fill=\"#1D3226\"\/>\n <circle cx=\"23\" cy=\"23\" r=\"2.4\" fill=\"#1D3226\"\/>\n <\/svg>\n <div>\n <h1>Chasse aux symboles<\/h1>\n <p>Quiz sur les pictogrammes des cartes de course d'orientation<\/p>\n <\/div>\n <\/div>\n\n <div class=\"sheet\">\n <span class=\"grid-ref top-right\">E 512 \u00b7 N 6340<\/span>\n <span class=\"grid-ref bottom-left\">1 : 10 000<\/span>\n\n <div class=\"quiz-body\" id=\"quizBody\">\n <div class=\"progress-row\">\n <span id=\"qCounter\">QUESTION 1 \/ 15<\/span>\n <span id=\"scoreLive\">SCORE 0<\/span>\n <\/div>\n <div class=\"progress-track\"><div class=\"progress-fill\" id=\"progressFill\"><\/div><\/div>\n\n <div class=\"symbol-stage\" id=\"symbolStage\"><\/div>\n\n <p class=\"question-text\">Que repr\u00e9sente ce symbole ?<\/p>\n\n <div class=\"options\" id=\"optionsBox\"><\/div>\n\n <div class=\"feedback\" id=\"feedback\"><\/div>\n <div class=\"next-row\">\n <button class=\"next-btn\" id=\"nextBtn\">Question suivante \u2192<\/button>\n <\/div>\n <\/div>\n\n <div class=\"result\" id=\"result\">\n <p style=\"font-family:'Oswald',sans-serif;letter-spacing:1px;color:var(--ink-soft);margin-bottom:0;\">R\u00c9SULTAT<\/p>\n <div class=\"big-score\"><span id=\"scoreFinal\">0<\/span><span> \/ 15<\/span><\/div>\n <p class=\"verdict\" id=\"verdict\"><\/p>\n <div class=\"punch-row\" id=\"punchRow\"><\/div>\n <button class=\"restart-btn\" id=\"restartBtn\">Refaire un parcours<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n\/* ---------- Symboles (SVG dessin\u00e9s selon les conventions ISOM) ---------- *\/\nconst svgControl = `<svg viewBox=\"0 0 120 120\"><circle cx=\"60\" cy=\"60\" r=\"34\" fill=\"none\" stroke=\"#B8005E\" stroke-width=\"5\"\/><\/svg>`;\n\nconst svgStart = `<svg viewBox=\"0 0 120 120\"><polygon points=\"60,18 100,88 20,88\" fill=\"none\" stroke=\"#B8005E\" stroke-width=\"5\" stroke-linejoin=\"round\"\/><\/svg>`;\n\nconst svgFinish = `<svg viewBox=\"0 0 120 120\"><circle cx=\"60\" cy=\"60\" r=\"34\" fill=\"none\" stroke=\"#B8005E\" stroke-width=\"4.5\"\/><circle cx=\"60\" cy=\"60\" r=\"22\" fill=\"none\" stroke=\"#B8005E\" stroke-width=\"4.5\"\/><\/svg>`;\n\nconst svgBoulder = `<svg viewBox=\"0 0 120 120\"><path d=\"M60 48c9 0 16 8 15 16s-9 13-17 12-14-9-13-17 6-11 15-11z\" fill=\"#1a1a1a\"\/><\/svg>`;\n\nconst svgCliff = `<svg viewBox=\"0 0 120 120\">\n <path d=\"M18 45 C40 40, 60 55, 82 42 S 105 50, 112 46\" fill=\"none\" stroke=\"#1a1a1a\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n ${Array.from({length:9}).map((_,i)=>{const x=22+i*10; return `<line x1=\"${x}\" y1=\"46\" x2=\"${x-4}\" y2=\"60\" stroke=\"#1a1a1a\" stroke-width=\"3\" stroke-linecap=\"round\"\/>`}).join('')}\n<\/svg>`;\n\nconst svgKnoll = `<svg viewBox=\"0 0 120 120\">\n <ellipse cx=\"60\" cy=\"65\" rx=\"26\" ry=\"18\" fill=\"none\" stroke=\"#8B5E34\" stroke-width=\"4\"\/>\n <line x1=\"60\" y1=\"47\" x2=\"60\" y2=\"30\" stroke=\"#8B5E34\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <line x1=\"48\" y1=\"51\" x2=\"36\" y2=\"38\" stroke=\"#8B5E34\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <line x1=\"72\" y1=\"51\" x2=\"84\" y2=\"38\" stroke=\"#8B5E34\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n<\/svg>`;\n\nconst svgDepression = `<svg viewBox=\"0 0 120 120\">\n <ellipse cx=\"60\" cy=\"60\" rx=\"28\" ry=\"20\" fill=\"none\" stroke=\"#8B5E34\" stroke-width=\"4\"\/>\n <line x1=\"60\" y1=\"60\" x2=\"60\" y2=\"44\" stroke=\"#8B5E34\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <line x1=\"50\" y1=\"63\" x2=\"38\" y2=\"72\" stroke=\"#8B5E34\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n <line x1=\"70\" y1=\"63\" x2=\"82\" y2=\"72\" stroke=\"#8B5E34\" stroke-width=\"4\" stroke-linecap=\"round\"\/>\n<\/svg>`;\n\nconst svgWater = `<svg viewBox=\"0 0 120 120\"><path d=\"M40 35c-14 8-20 24-14 38 7 16 26 22 40 15 15-7 22-24 15-39-6-13-24-22-41-14z\" fill=\"#1C6FA8\"\/><\/svg>`;\n\nconst svgMarsh = `<svg viewBox=\"0 0 120 120\">\n <rect x=\"16\" y=\"16\" width=\"88\" height=\"88\" fill=\"#FDFCF5\" stroke=\"#E3DCC4\" stroke-width=\"1\"\/>\n ${[32,50,68,86].map(y=>`<line x1=\"30\" y1=\"${y}\" x2=\"46\" y2=\"${y}\" stroke=\"#1C6FA8\" stroke-width=\"3.5\"\/><line x1=\"60\" y1=\"${y}\" x2=\"76\" y2=\"${y}\" stroke=\"#1C6FA8\" stroke-width=\"3.5\"\/>`).join('')}\n<\/svg>`;\n\nconst svgRoad = `<svg viewBox=\"0 0 120 120\">\n <line x1=\"12\" y1=\"66\" x2=\"108\" y2=\"52\" stroke=\"#1a1a1a\" stroke-width=\"9\"\/>\n<\/svg>`;\n\nconst svgPath = `<svg viewBox=\"0 0 120 120\">\n <line x1=\"12\" y1=\"66\" x2=\"108\" y2=\"52\" stroke=\"#1a1a1a\" stroke-width=\"3\" stroke-dasharray=\"8 7\"\/>\n<\/svg>`;\n\nconst svgFence = `<svg viewBox=\"0 0 120 120\">\n <line x1=\"14\" y1=\"60\" x2=\"106\" y2=\"60\" stroke=\"#1a1a1a\" stroke-width=\"2.5\"\/>\n ${[26,44,62,80,98].map(x=>`<line x1=\"${x}\" y1=\"52\" x2=\"${x-6}\" y2=\"68\" stroke=\"#1a1a1a\" stroke-width=\"2.5\"\/>`).join('')}\n<\/svg>`;\n\nconst svgOpenLand = `<svg viewBox=\"0 0 120 120\"><rect x=\"16\" y=\"16\" width=\"88\" height=\"88\" fill=\"#F2D673\" stroke=\"#C99A2E\" stroke-width=\"1\"\/><\/svg>`;\n\nconst svgThicket = `<svg viewBox=\"0 0 120 120\">\n <rect x=\"16\" y=\"16\" width=\"88\" height=\"88\" fill=\"#2F4B3C\"\/>\n ${[[34,34],[64,30],[86,42],[28,60],[56,58],[84,68],[40,86],[70,90]].map(p=>`<circle cx=\"${p[0]}\" cy=\"${p[1]}\" r=\"3.4\" fill=\"#F6F3E7\"\/>`).join('')}\n<\/svg>`;\n\nconst svgBuilding = `<svg viewBox=\"0 0 120 120\"><rect x=\"34\" y=\"34\" width=\"52\" height=\"52\" fill=\"#1a1a1a\"\/><\/svg>`;\n\n\/* ---------- Banque de r\u00e9ponses possibles (distracteurs) ---------- *\/\nconst pool = [\n \"Bloc rocheux\",\"Falaise praticable\",\"Butte \/ sommet\",\"D\u00e9pression \/ cuvette\",\n \"Poste de contr\u00f4le\",\"Point de d\u00e9part\",\"Point d'arriv\u00e9e\",\"Eau infranchissable\",\n \"Marais\",\"Route\",\"Sentier\",\"Cl\u00f4ture\",\"Terrain d\u00e9couvert (bonne visibilit\u00e9)\",\n \"V\u00e9g\u00e9tation dense (fourr\u00e9)\",\"B\u00e2timent\",\"Ligne \u00e9lectrique\",\"Ruine\",\"Source\",\n \"Terrain semi-ouvert\",\"For\u00eat courante praticable\",\"Point cot\u00e9\",\"Foss\u00e9\"\n];\n\n\/* ---------- Questions ---------- *\/\nconst questions = [\n { svg: svgControl, answer: \"Poste de contr\u00f4le\", note: \"Un simple cercle magenta marque l'emplacement exact d'une balise \u00e0 trouver et poin\u00e7onner.\" },\n { svg: svgStart, answer: \"Point de d\u00e9part\", note: \"Le d\u00e9part est toujours repr\u00e9sent\u00e9 par un triangle magenta, plus grand qu'un cercle de poste.\" },\n { svg: svgFinish, answer: \"Point d'arriv\u00e9e\", note: \"L'arriv\u00e9e se distingue par un double cercle concentrique magenta.\" },\n { svg: svgBoulder, answer: \"Bloc rocheux\", note: \"Une petite tache noire pleine et irr\u00e9guli\u00e8re signale un rocher isol\u00e9, souvent utilis\u00e9 comme point d'attaque.\" },\n { svg: svgCliff, answer: \"Falaise praticable\", note: \"Le trait noir avec de courtes hachures perpendiculaires figure une paroi rocheuse ou un talus abrupt.\" },\n { svg: svgKnoll, answer: \"Butte \/ sommet\", note: \"Une forme ferm\u00e9e marron avec des hachures qui pointent vers l'ext\u00e9rieur indique un relief qui monte : une butte.\" },\n { svg: svgDepression,answer: \"D\u00e9pression \/ cuvette\", note: \"Ici les hachures marron pointent vers l'int\u00e9rieur : le terrain descend, c'est une cuvette ou une doline.\" },\n { svg: svgWater, answer: \"Eau infranchissable\", note: \"Une surface bleue pleine signale un plan d'eau (\u00e9tang, lac) qu'on ne peut pas traverser.\" },\n { svg: svgMarsh, answer: \"Marais\", note: \"De courts traits bleus horizontaux dispos\u00e9s en lignes indiquent un terrain mar\u00e9cageux, praticable mais spongieux.\" },\n { svg: svgRoad, answer: \"Route\", note: \"Un trait noir \u00e9pais et continu repr\u00e9sente une route carrossable.\" },\n { svg: svgPath, answer: \"Sentier\", note: \"Un trait noir fin en tirets figure un sentier ou chemin \u00e9troit.\" },\n { svg: svgFence, answer: \"Cl\u00f4ture\", note: \"Une ligne noire ponctu\u00e9e de petits piquets perpendiculaires repr\u00e9sente une cl\u00f4ture ou une barri\u00e8re.\" },\n { svg: svgOpenLand, answer: \"Terrain d\u00e9couvert (bonne visibilit\u00e9)\", note: \"Le jaune signale un terrain d\u00e9gag\u00e9, sans v\u00e9g\u00e9tation g\u00eanante, offrant une bonne visibilit\u00e9.\" },\n { svg: svgThicket, answer: \"V\u00e9g\u00e9tation dense (fourr\u00e9)\", note: \"Le vert fonc\u00e9 (parfois avec des points clairs) indique une v\u00e9g\u00e9tation dense qui ralentit fortement la course.\" },\n { svg: svgBuilding, answer: \"B\u00e2timent\", note: \"Un carr\u00e9 ou rectangle noir plein repr\u00e9sente une construction : maison, grange, abri.\" },\n];\n\n\/* ---------- Etat ---------- *\/\nlet order = [];\nlet current = 0;\nlet score = 0;\nlet hits = [];\nlet answered = false;\n\nfunction shuffle(arr){\n const a = arr.slice();\n for(let i=a.length-1;i>0;i--){\n const j = Math.floor(Math.random()*(i+1));\n [a[i],a[j]]=[a[j],a[i]];\n }\n return a;\n}\n\nfunction buildOptions(correct){\n const distractors = shuffle(pool.filter(p=>p!==correct)).slice(0,3);\n return shuffle([correct, ...distractors]);\n}\n\nfunction startQuiz(){\n order = shuffle(questions.map((_,i)=>i));\n current = 0;\n score = 0;\n hits = [];\n answered = false;\n document.getElementById('result').classList.remove('show');\n document.getElementById('quizBody').classList.remove('hidden');\n renderQuestion();\n}\n\nfunction renderQuestion(){\n answered = false;\n const q = questions[order[current]];\n document.getElementById('qCounter').textContent = `QUESTION ${current+1} \/ ${questions.length}`;\n document.getElementById('scoreLive').textContent = `SCORE ${score}`;\n document.getElementById('progressFill').style.width = `${(current\/questions.length)*100}%`;\n document.getElementById('symbolStage').innerHTML = q.svg;\n\n const opts = buildOptions(q.answer);\n const box = document.getElementById('optionsBox');\n box.innerHTML = '';\n const letters = ['A','B','C','D'];\n opts.forEach((opt, idx)=>{\n const btn = document.createElement('button');\n btn.className = 'opt-btn';\n btn.innerHTML = `<span class=\"letter\">${letters[idx]}<\/span><span>${opt}<\/span>`;\n btn.addEventListener('click', ()=>selectAnswer(btn, opt, q));\n box.appendChild(btn);\n });\n\n const fb = document.getElementById('feedback');\n fb.classList.remove('show','bad');\n fb.innerHTML = '';\n document.getElementById('nextBtn').classList.remove('show');\n}\n\nfunction selectAnswer(btn, chosen, q){\n if(answered) return;\n answered = true;\n const isCorrect = chosen === q.answer;\n if(isCorrect){ score++; hits.push(true); } else { hits.push(false); }\n\n [...document.getElementById('optionsBox').children].forEach(b=>{\n b.disabled = true;\n const label = b.querySelector('span:last-child').textContent;\n if(label === q.answer) b.classList.add('correct');\n else if(b === btn) b.classList.add('wrong');\n else b.classList.add('dim');\n });\n\n const fb = document.getElementById('feedback');\n fb.classList.add('show');\n if(!isCorrect) fb.classList.add('bad');\n fb.innerHTML = `<b>${isCorrect ? 'Correct \u2014 ' : 'Pas tout \u00e0 fait \u2014 '}${q.answer}.<\/b><br>${q.note}`;\n\n document.getElementById('scoreLive').textContent = `SCORE ${score}`;\n document.getElementById('nextBtn').classList.add('show');\n}\n\ndocument.getElementById('nextBtn').addEventListener('click', ()=>{\n current++;\n if(current >= questions.length){\n showResult();\n } else {\n renderQuestion();\n }\n});\n\nfunction showResult(){\n document.getElementById('progressFill').style.width = `100%`;\n document.getElementById('quizBody').classList.add('hidden');\n document.getElementById('result').classList.add('show');\n document.getElementById('scoreFinal').textContent = score;\n\n let verdict;\n const pct = score \/ questions.length;\n if(pct === 1) verdict = \"Carte parfaitement lue. Tu es pr\u00eat\u00b7e pour un parcours technique en for\u00eat.\";\n else if(pct >= 0.8) verdict = \"Tr\u00e8s solide \u2014 quelques symboles \u00e0 revoir avant la prochaine course.\";\n else if(pct >= 0.5) verdict = \"Bonne base, mais relis la l\u00e9gende avant ton prochain parcours.\";\n else verdict = \"Direction la l\u00e9gende de la carte pour r\u00e9viser les symboles de base.\";\n document.getElementById('verdict').textContent = verdict;\n\n const punchRow = document.getElementById('punchRow');\n punchRow.innerHTML = hits.map(h => `<div class=\"punch ${h?'hit':'miss'}\"><\/div>`).join('');\n}\n\ndocument.getElementById('restartBtn').addEventListener('click', startQuiz);\n\nstartQuiz();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Balise \u2014 Quiz des symboles CO Chasse aux symboles Quiz sur les pictogrammes des cartes de course d’orientation E 512 \u00b7 N 6340 1 : 10 000 QUESTION 1 \/ 15 SCORE 0 Que repr\u00e9sente ce symbole ? Question suivante \u2192 …<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/caponord-sports-orientation.fr\/index.php\/quiz-des-symboles\/\"> <span class=\"screen-reader-text\">Quiz des symboles<\/span> Read More »<\/a><\/p>\n","protected":false},"author":27,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"class_list":["post-4688","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages\/4688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/comments?post=4688"}],"version-history":[{"count":4,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages\/4688\/revisions"}],"predecessor-version":[{"id":4694,"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/pages\/4688\/revisions\/4694"}],"wp:attachment":[{"href":"https:\/\/caponord-sports-orientation.fr\/index.php\/wp-json\/wp\/v2\/media?parent=4688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}