Ma voiture fait chanter les sons

<!doctype html><html lang="fr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>Ma voiture fait chanter les sons</title><style>
*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:linear-gradient(#eef7ff,#fff8e8);color:#263e55}main{max-width:850px;margin:auto;padding:16px}header,.card{background:#fff;border-radius:22px;padding:18px;margin-bottom:14px;box-shadow:0 5px 18px #31516a12}header{text-align:center;background:#e3f1ff}h1{font-size:clamp(1.5rem,4vw,2.25rem);margin:4px}p{text-align:center}.pick{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}select,button{font:inherit;padding:12px;border:1px solid #cbd8e5;border-radius:13px;background:#f5faff;color:#263e55;font-weight:700}.track{position:relative;display:flex;gap:8px;padding:16px 4px 76px;border:0;touch-action:pan-y;overflow:visible}.tile{flex:1;min-width:0;text-align:center;border:2px solid #d7e2eb;background:white;border-radius:15px;padding:14px 2px 10px}.tile b{font-size:clamp(1.9rem,7vw,3.5rem)}.tile small{display:block;font-size:clamp(.7rem,2.4vw,.95rem);font-weight:700;color:#5c748b;min-height:1.5em;margin-top:7px}.tile.active{background:#ffe7a0;border-color:#e1a324;transform:translateY(-4px)}.tile.passed{background:#e0f3e5;border-color:#a3d3ad}#car{position:absolute;bottom:9px;left:0;transform:translateX(-50%);width:78px;height:44px;z-index:2;touch-action:none;user-select:none;cursor:grab;background:transparent;border:0;padding:0;display:block} .carbody{position:absolute;bottom:8px;left:5px;width:68px;height:23px;background:#e74c3c;border:3px solid #923126;border-radius:12px 15px 7px 7px}.carroof{position:absolute;bottom:27px;left:22px;width:37px;height:17px;background:#e74c3c;border:3px solid #923126;border-radius:12px 12px 0 0}.windowcar{position:absolute;bottom:30px;left:29px;width:12px;height:10px;background:#bfeaff;border-radius:4px 2px 0 0;z-index:1}.wheel{position:absolute;bottom:2px;width:17px;height:17px;background:#253344;border:3px solid #111;border-radius:50%;z-index:2}.wheel.one{left:14px}.wheel.two{right:12px}#msg{text-align:center;font-weight:800;min-height:2rem;font-size:1.15rem}#success{display:none;text-align:center;background:#e2f4e6;border-radius:15px;padding:14px;font-weight:800;font-size:1.25rem}.buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.hint{font-size:.9rem;color:#61778b}
</style></head><body><main><header><div style="font-size:1rem">JEU DE LECTURE</div><h1>Ma voiture fait chanter les sons!</h1><p>Je glisse doucement et je lis chaque son.</p></header><section class="card"><div class="pick"><label>Niveau <select id="level"><option value="0">Mots de 2 sons</option><option value="1">Mots de 2 syllabes</option><option value="2">Mots plus longs</option></select></label><label>Mot <select id="choice"></select></label></div></section><section class="card"><p><b>Pose ton doigt sur la voiture et fais-la glisser sous les sons</b></p><div id="track" class="track"><div id="car" role="slider" aria-label="Voiture à déplacer" tabindex="0"><span class="carroof"></span><span class="windowcar"></span><span class="carbody"></span><span class="wheel one"></span><span class="wheel two"></span></div></div><div id="msg">Prêt? Fais rouler la voiture!</div><div id="success">Bravo! Tu as lu tous les sons!<div id="full"></div></div><p class="hint">Arrête-toi sous chaque graphème. Prononce le son, puis continue.</p><div class="buttons"><button id="again">Recommencer</button><button id="show">Voir le mot complet</button><button id="next">Mot suivant</button></div></section></main><script>
const levels=[
[{w:'TU',p:[['T','/t/'],['U','/y/']]},{w:'LU',p:[['L','/l/'],['U','/y/']]},{w:'VU',p:[['V','/v/'],['U','/y/']]},{w:'DU',p:[['D','/d/'],['U','/y/']]},{w:'BU',p:[['B','/b/'],['U','/y/']]},{w:'NU',p:[['N','/n/'],['U','/y/']]},{w:'SU',p:[['S','/s/'],['U','/y/']]},{w:'RUE',p:[['R','/ʁ/'],['UE','/y/']]},
{w:'LIT',p:[['L','/l/'],['I','/i/']]},{w:'NI',p:[['N','/n/'],['I','/i/']]},{w:'DIT',p:[['D','/d/'],['I','/i/']]},{w:'RIZ',p:[['R','/ʁ/'],['I','/i/']]},
{w:'MOT',p:[['M','/m/'],['O','/o/']]},{w:'TÔT',p:[['T','/t/'],['Ô','/o/']]},{w:'DOS',p:[['D','/d/'],['O','/o/']]},{w:'FAUX',p:[['F','/f/'],['AU','/o/']]},{w:'VEAU',p:[['V','/v/'],['EAU','/o/']]},{w:'BEAU',p:[['B','/b/'],['EAU','/o/']]},{w:'CHOU',p:[['CH','/ʃ/'],['OU','/u/']]},{w:'FOU',p:[['F','/f/'],['OU','/u/']]},{w:'LOUP',p:[['L','/l/'],['OU','/u/']]},{w:'MOU',p:[['M','/m/'],['OU','/u/']]},{w:'NOUS',p:[['N','/n/'],['OU','/u/']]},{w:'TOUT',p:[['T','/t/'],['OU','/u/']]},{w:'DÉ',p:[['D','/d/'],['É','/e/']]},{w:'FÉE',p:[['F','/f/'],['É','/e/']]},{w:'NEZ',p:[['N','/n/'],['É','/e/']]},{w:'JEU',p:[['J','/ʒ/'],['EU','/ø/']]},{w:'FEU',p:[['F','/f/'],['EU','/ø/']]},{w:'PEU',p:[['P','/p/'],['EU','/ø/']]},{w:'RAT',p:[['R','/ʁ/'],['A','/a/']]},{w:'ART',p:[['A','/a/'],['R','/ʁ/']]},{w:'AIR',p:[['AI','/ɛ/'],['R','/ʁ/']]},{w:'OR',p:[['O','/ɔ/'],['R','/ʁ/']]},{w:'ÎLE',p:[['Î','/i/'],['L','/l/']]},
{w:'AIME',p:[['AI','/ɛ/'],['M','/m/']]},{w:'AILE',p:[['AI','/ɛ/'],['L','/l/']]},{w:'ELLE',p:[['È','/ɛ/'],['LLE','/l/']]},{w:'SOL',p:[['S','/s/'],['OL','/ɔl/']]}
],
[{w:'MOTO',p:[['MO','/mo/'],['TO','/to/']]},{w:'PAPA',p:[['PA','/pa/'],['PA','/pa/']]},{w:'LAMA',p:[['LA','/la/'],['MA','/ma/']]},{w:'VÉLO',p:[['VÉ','/ve/'],['LO','/lo/']]}],
[{w:'TAPIS',p:[['TA','/ta/'],['PIS','/pi/']]},{w:'RADIS',p:[['RA','/ʁa/'],['DIS','/di/']]},{w:'SALAMI',p:[['SA','/sa/'],['LA','/la/'],['MI','/mi/']]}]
];let li=0,wi=0,pct=0,drag=false;const track=document.querySelector('#track'),car=document.querySelector('#car'),msg=document.querySelector('#msg'),success=document.querySelector('#success'),full=document.querySelector('#full'),level=document.querySelector('#level'),choice=document.querySelector('#choice');function word(){return levels[li][wi]}function options(){choice.innerHTML=levels[li].map((x,i)=>`<option value="${i}">${x.w}</option>`).join('');wi=0;draw()}function draw(){track.querySelectorAll('.tile').forEach(e=>e.remove());word().p.forEach(([g,s])=>{let d=document.createElement('div');d.className='tile';d.innerHTML=`<b>${g}</b><small>${s}</small>`;track.insertBefore(d,car)});reset()}function reset(){pct=0;success.style.display='none';full.textContent='';position(0);paint()}function bounds(){let r=track.getBoundingClientRect();return {l:r.left+20,w:r.width-40}}function position(v){pct=Math.max(0,Math.min(100,v));let b=bounds(),r=track.getBoundingClientRect();car.style.left=(b.l+b.w*pct/100-r.left)+'px';car.setAttribute('aria-valuenow',Math.round(pct))}function paint(){let tiles=[...track.querySelectorAll('.tile')],idx=Math.min(tiles.length-1,Math.floor(pct/100*tiles.length));tiles.forEach((t,i)=>{t.classList.toggle('active',i===idx);t.classList.toggle('passed',i<idx||(pct>=100&&i===idx))});if(pct>=100){msg.textContent='Dernier son! Assemble-les!';success.style.display='block';full.textContent=word().w}else msg.textContent=`Son ${idx+1} : ${word().p[idx][1]}`}function move(x){let b=bounds();position((x-b.l)/b.w*100);paint()}car.addEventListener('pointerdown',e=>{drag=true;car.setPointerCapture(e.pointerId);move(e.clientX);e.preventDefault()});car.addEventListener('pointermove',e=>{if(drag){move(e.clientX);e.preventDefault()}});car.addEventListener('pointerup',()=>drag=false);car.addEventListener('pointercancel',()=>drag=false);track.addEventListener('pointerdown',e=>{if(e.target!==car)move(e.clientX)});document.querySelector('#again').onclick=reset;document.querySelector('#show').onclick=()=>{success.style.display='block';full.textContent=word().w;msg.textContent='Essaie de lire le mot en entier!'};document.querySelector('#next').onclick=()=>{wi=(wi+1)%levels[li].length;choice.value=wi;draw()};level.onchange=()=>{li=+level.value;options()};choice.onchange=()=>{wi=+choice.value;draw()};window.addEventListener('resize',()=>position(pct));options();
</script></body></html>