:root{ --labo-green:#39ff14; --ink:#0f172a; --muted:#64748b; --bg:#ffffff; --card:#f8fafc; } *{box-sizing:border-box} html,body{margin:0;background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:var(--ink)} .wrap{max-width:980px;margin:0 auto;padding:24px} header{display:flex;align-items:center;gap:16px} header .brand{display:flex;align-items:center;gap:12px} img.logo{height:56px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.08))} h1{font-size:clamp(1.3rem,2.4vw,2rem);margin:0;font-weight:800;letter-spacing:-.02em} .tag{display:inline-flex;gap:8px;background:var(--card);border:1px solid #e2e8f0;padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)} .start-card{margin:28px 0;padding:24px;border-radius:20px;background:linear-gradient(180deg,#fff,#f9fbff);border:1px solid #eef2f7;box-shadow:0 10px 30px rgba(0,0,0,.05)} .start-card h2{margin:0 0 10px 0;font-size:1.4rem} .start-card p{color:#334155} .btn{appearance:none;border:0;border-radius:14px;padding:14px 18px;font-weight:700;cursor:pointer} .btn-primary{background:var(--ink);color:#fff;transition:transform .08s ease, box-shadow .2s ease} .btn-primary:hover{transform:translateY(-1px)} .btn-secondary{background:#f1f5f9;color:#0f172a} .quiz{display:none;margin-top:20px} .progress{position:sticky;top:0;background:#fff;border-bottom:1px solid #e2e8f0;padding:10px 0;z-index:5} .bar{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden} .bar>span{display:block;height:100%;width:0;background:var(--labo-green)} .hud{display:flex;align-items:center;justify-content:space-between;margin:10px 0;color:#334155} .card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:22px;box-shadow:0 8px 18px rgba(0,0,0,.04)} .q{font-size:1.05rem;font-weight:700;margin:0 0 14px 0} .options{display:grid;gap:10px} .option{border:1px solid #e2e8f0;border-radius:14px;padding:14px;cursor:pointer;transition:transform .06s ease,background .15s ease,border-color .15s ease} .option:hover{transform:translateY(-1px);background:#f8fafc} .option input{display:none} .option.correct{border-color:#16a34a;background:#ecfdf5} .option.wrong{border-color:#ef4444;background:#fef2f2} .actions{display:flex;gap:10px;margin-top:16px} .result{display:none} .score-badge{display:inline-block;background:var(--ink);color:#fff;padding:10px 14px;border-radius:12px;font-weight:800} .best{font-size:12px;color:#64748b} /* Confetti */ .confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden} .confetti i{position:absolute;top:-10px;width:8px;height:14px;background:var(--labo-green);opacity:.9;transform:rotate(15deg);animation:fall 1.4s linear forwards} @keyframes fall{to{transform:translateY(110vh) rotate(360deg);opacity:0}} // --- utilitaire de mélange (Fisher–Yates) --- function shuffleArray(arr){ for(let i=arr.length-1;i>0;i--){ const j=Math.floor(Math.random()*(i+1)); [arr[i],arr[j]]=[arr[j],arr[i]]; } return arr; } document.addEventListener('DOMContentLoaded', function(){ // Données (indices 'a' = index correct dans l'ordre affiché A-D) const DATA = [ {q:"1. Quel est l’objectif principal du dispositif Agil’Cadres ?", opts:[ "Financer des projets personnels", "Aider à créer son entreprise", "Permettre un retour rapide et durable à l’emploi cadre", "Proposer des formations diplômantes" ], a:2}, {q:"2. Quels publics sont concernés par Agil’Cadres ?", opts:[ "Étudiants en recherche de stage", "Demandeurs d’emploi cadres, personnes en reconversion et salariés souhaitant booster leur carrière", "Tous les demandeurs d’emploi", "Uniquement les jeunes diplômés" ], a:1}, {q:"3. Combien de temps dure en moyenne l’accompagnement Agil’Cadres ?", opts:[ "12 mois maximum", "9 mois maximum", "6 mois maximum", "3 mois maximum" ], a:2}, {q:"4. Quelles sont les trois phases principales du parcours ?", opts:[ "Préparation – Actions – Suivi", "Accueil – Orientation – Bilan", "Inscription – Entretien – Sortie", "Diagnostic – Formation – Évaluation" ], a:0}, {q:"5. Quelle structure peut prescrire la participation au dispositif Agil’Cadres ?", opts:[ "Pôle emploi, Cap Emploi ou une structure d’accompagnement spécialisée", "La Mission Locale uniquement", "Une agence d’intérim", "L’université" ], a:0}, {q:"6. Parmi ces bénéfices, lequel n’est PAS directement cité dans l’article ?", opts:[ "Développer son réseau professionnel", "Booster la confiance en soi", "Structurer sa recherche d’emploi", "Obtenir un crédit bancaire préférentiel" ], a:3}, {q:"7. Dans quel état d’esprit les participants ressortent-ils généralement du dispositif Agil’Cadres ?", opts:[ "Plus confiants et motivés", "Plus stressés qu’avant", "Indifférents", "Prêts à changer totalement de métier sans réflexion" ], a:0} ]; initLaboQuiz('laboQuiz-agilcadres-article-v3', DATA); }); // --- Moteur multi-instance avec mélange aléatoire des options --- function initLaboQuiz(rootId, DATA){ const root=document.getElementById(rootId); if(!root) return; const start=root.querySelector('[data-start]'); const quiz=root.querySelector('[data-quiz]'); const result=root.querySelector('[data-result]'); const qEl=root.querySelector('[data-question]'); const optsEl=root.querySelector('[data-options]'); const btnStart=root.querySelector('[data-btn-start]'); const btnVoir=root.querySelector('[data-btn-see]'); const btnNext=root.querySelector('[data-btn-next]'); const btnSkip=root.querySelector('[data-btn-skip]'); const idxEl=root.querySelector('[data-idx]'); const totEl=root.querySelector('[data-tot]'); const scoreEl=root.querySelector('[data-score]'); const barFill=root.querySelector('[data-bar]'); const finalScoreEl=root.querySelector('[data-final-score]'); const finalTotalEl=root.querySelector('[data-final-total]'); const bestScoreEl=root.querySelector('[data-best]'); const commentEl=root.querySelector('[data-comment]'); const sheetEl=root.querySelector('[data-sheet]'); const cardEl=root.querySelector('[data-card]'); const cf=root.querySelector('[data-confetti]'); totEl.textContent=DATA.length; finalTotalEl.textContent=DATA.length; let i=0, score=0, selected=null, answered=false; function mountQuestion(){ const item=DATA[i]; idxEl.textContent=i+1; qEl.textContent=item.q; optsEl.innerHTML=''; btnNext.disabled=true; answered=false; selected=null; // Mélange des options (on garde l'index d'origine pour corriger) const indexed = item.opts.map((txt,ix)=>({txt,ix})); const shuffled = shuffleArray(indexed); shuffled.forEach(({txt,ix})=>{ const div=document.createElement('label'); div.className='option'; div.innerHTML=` ${txt}`; div.addEventListener('click',()=>onSelect(ix,div)); optsEl.appendChild(div); }); barFill.style.width=`${(i/DATA.length)*100}%`; cardEl.classList.add('pop'); setTimeout(()=>cardEl.classList.remove('pop'),200); } function onSelect(ix, el){ if(answered) return; selected=ix; answered=true; btnNext.disabled=false; const correct=(ix===DATA[i].a); el.classList.add(correct?'correct':'wrong'); if(!correct) el.classList.add('shake'); if(correct){ score++; scoreEl.textContent=score; confettiBurst(); } [...optsEl.children].forEach(c=>{c.style.opacity=c===el?'1':'.65'}); } function next(){ if(i<DATA.length-1){ i++; mountQuestion(); } else finish(); } function skip(){ if(i=6){ txt="Vous êtes prêt à accélérer comme un pro ! 🚀"; confettiStorm(); } else if(score>=4){ txt="Le turbo est enclenché, mais révisez encore un peu ! ⚡"; } else { txt="Pas de panique, repartez au stand (l’article) et relancez la machine ! 😉"; } commentEl.textContent=txt; } function showAnswers(){ sheetEl.style.display='block'; sheetEl.innerHTML = `

Corrigé détaillé

` + DATA.map((it,idx)=>{ return `

${idx+1}. ${it.q}

${it.opts.map((o,ix)=>`
1. ${o}
`).join('')}

`; }).join(''); sheetEl.scrollIntoView({behavior:'smooth'}); } // Confetti 💚 function confettiBurst(){ for(let k=0;k.2?'var(--labo-green)':'#a7f3d0'; iEl.style.transform=`rotate(${Math.random()*360}deg)`; iEl.style.animationDuration=(0.9+Math.random()*0.8)+'s'; cf.appendChild(iEl); setTimeout(()=>iEl.remove(),1600); } } function confettiStorm(){ for(let p=0;p{ start.style.display='none'; quiz.style.display='block'; i=0; score=0; scoreEl.textContent=score; mountQuestion(); }); btnVoir.addEventListener('click',()=>{ start.style.display='none'; result.style.display='block'; showAnswers(); }); btnNext.addEventListener('click', next); btnSkip.addEventListener('click', skip); root.querySelector('[data-btn-retry]').addEventListener('click',()=>{ sheetEl.style.display='none'; result.style.display='none'; quiz.style.display='block'; i=0; score=0; scoreEl.textContent=score; mountQuestion(); }); root.querySelector('[data-btn-answers]').addEventListener('click', showAnswers); }