* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Arial, sans-serif; background: #f5f0eb; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } .container { max-width: 900px; width: 100%; background: #fff; border-radius: 24px; padding: 30px 25px 35px; box-shadow: 0 8px 30px rgba(0,0,0,.12); text-align: center; } h1 { font-size: 1.7rem; color: #333; margin-bottom: 4px; } .subtitle { color: #666; font-size: 1rem; margin-bottom: 22px; } .tableau { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 18px; } .col { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); min-width: 0; } .col-header { padding: 10px 4px; font-size: .9rem; font-weight: 700; color: #fff; text-align: center; line-height: 1.2; overflow-wrap: break-word; word-break: break-word; } .col-cell { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; font-weight: 700; background: #fafafa; color: #333; position: relative; transition: background .2s; } .col-cell .digit { display: inline-block; transition: all .4s cubic-bezier(.34,1.56,.64,1); } .col-cell .digit.slide-left { transform: translateX(-100%); opacity: 0; } .col-cell .digit.slide-right { transform: translateX(100%); opacity: 0; } .col-cell .digit.appear { animation: popIn .35s ease-out; } @keyframes popIn { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* Column colors */ .col-0 .col-header { background: #ffbf00; } .col-0 .col-cell { border-bottom: 4px solid #ffbf00; } .col-1 .col-header { background: #800080; } .col-1 .col-cell { border-bottom: 4px solid #800080; } .col-2 .col-header { background: #00a933; } .col-2 .col-cell { border-bottom: 4px solid #00a933; } .col-3 .col-header { background: #e60000; } .col-3 .col-cell { border-bottom: 4px solid #e60000; } .col-4 .col-header { background: #2a6099; } .col-4 .col-cell { border-bottom: 4px solid #2a6099; } .controls { background: #f5f5f5; border-radius: 16px; padding: 18px 20px 20px; margin-top: 6px; } .input-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .input-row label { font-weight: 600; color: #444; font-size: 1rem; } .input-row input { width: 160px; padding: 8px 12px; font-size: 1.3rem; font-weight: 700; text-align: center; border: 2px solid #ccc; border-radius: 10px; outline: none; transition: border .2s; } .input-row input:focus { border-color: #2a6099; } .btn-group { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .btn { padding: 12px 22px; font-size: 1.2rem; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; transition: transform .12s, box-shadow .12s, opacity .12s; min-width: 68px; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); } .btn:active { transform: scale(.96); opacity: .85; } .btn-mult { background: #2a6099; color: #fff; } .btn-div { background: #e60000; color: #fff; } .btn-reset { background: #888; color: #fff; font-size: .9rem; } .btn-check { background: #00a933; color: #fff; } .result { margin-top: 14px; padding: 14px 12px; background: #fff; border-radius: 12px; border: 2px solid #e0ddd8; font-size: 1rem; color: #444; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; } .result strong { color: #222; } .result .highlight { display: inline-block; padding: 2px 10px; border-radius: 6px; font-weight: 700; font-size: 1.2rem; } .result .hl-mult { background: #dce6f5; color: #2a6099; } .result .hl-div { background: #fde0e0; color: #c00; } .mode-tabs { display: flex; gap: 4px; justify-content: center; margin-bottom: 14px; } .mode-tab { padding: 6px 16px; border: 2px solid #ddd; border-radius: 20px; background: #fff; cursor: pointer; font-weight: 600; font-size: .85rem; color: #666; transition: all .15s; } .mode-tab.active { border-color: #2a6099; background: #2a6099; color: #fff; } .mode-tab:hover:not(.active) { border-color: #aaa; } .quiz-area { margin-top: 8px; display: none; } .quiz-area.show { display: block; } .quiz-question { font-size: 1.2rem; font-weight: 600; color: #333; margin-bottom: 10px; } .quiz-input { width: 120px; padding: 8px; font-size: 1.2rem; font-weight: 700; text-align: center; border: 2px solid #ccc; border-radius: 10px; outline: none; } .quiz-input:focus { border-color: #00a933; } .quiz-feedback { margin-top: 6px; font-weight: 600; font-size: 1rem; } .quiz-feedback.correct { color: #00a933; } .quiz-feedback.wrong { color: #e60000; } .legend { display: flex; gap: 16px; justify-content: center; margin-top: 10px; flex-wrap: wrap; font-size: .8rem; color: #888; } .legend span { display: flex; align-items: center; gap: 5px; } .legend .dot { display: inline-block; width: 14px; height: 14px; border-radius: 4px; } @media (max-width: 600px) { .container { padding: 16px 10px; } .col-header { font-size: .6rem; padding: 8px 2px; } .col-cell { font-size: 1.6rem; min-height: 65px; } .btn { padding: 8px 12px; font-size: .95rem; min-width: 54px; } .input-row input { width: 120px; font-size: 1.1rem; } h1 { font-size: 1.3rem; } } const COLORS = ['#ffbf00', '#800080', '#00a933', '#e60000', '#2a6099']; const LABELS = ['Dizaine de milliers', 'Milliers', 'Centaines', 'Dizaines', 'Unités']; const MAX_DIGITS = 5; const nbInput = document.getElementById('nbInput'); const resultDiv = document.getElementById('result'); const cells = document.querySelectorAll('.col-cell'); const resetBtn = document.getElementById('resetBtn'); const modeTabs = document.querySelectorAll('.mode-tab'); const quizArea = document.getElementById('quizArea'); const quizQuestion = document.getElementById('quizQuestion'); const quizInput = document.getElementById('quizInput'); const quizCheck = document.getElementById('quizCheck'); const quizFeedback = document.getElementById('quizFeedback'); let currentNumber = 0; let currentDigits = []; let quizMode = false; let quizAnswer = 0; function digitsFromNumber(n) { const s = String(Math.floor(n)); const arr = s.split('').map(Number); while (arr.length < MAX_DIGITS) arr.unshift(0); return arr.slice(-MAX_DIGITS); } function render(digits, animateDir = null) { for (let i = 0; i < MAX_DIGITS; i++) { const cell = cells[i]; const d = digits[i]; if (d === 0 && i x === 0)) { cell.innerHTML = ''; continue; } const span = document.createElement('span'); span.className = 'digit'; span.textContent = d; if (animateDir === 'left') span.classList.add('slide-left'); else if (animateDir === 'right') span.classList.add('slide-right'); else span.classList.add('appear'); cell.innerHTML = ''; cell.appendChild(span); requestAnimationFrame(() => { span.classList.remove('slide-left', 'slide-right'); }); } } function updateResult(op, factor, oldVal, newVal) { const opSym = op === 'mult' ? '×' : '÷'; const cls = op === 'mult' ? 'hl-mult' : 'hl-div'; if (Number.isInteger(newVal)) { resultDiv.innerHTML = ` ${oldVal} ${opSym} ${factor} = ${newVal} `; } else { resultDiv.innerHTML = ` ${oldVal} ${opSym} ${factor} = ${newVal} (le résultat n'est pas entier) `; } } function applyOperation(op, factor) { const val = parseInt(nbInput.value, 10); if (isNaN(val) || val < 0) { resultDiv.innerHTML = 'Veuillez entrer un nombre valide'; return; } const oldDigits = digitsFromNumber(val); render(oldDigits); let newVal = op === 'mult' ? val * factor : val / factor; const dir = op === 'mult' ? 'left' : 'right'; currentNumber = val; setTimeout(() => { const newDigits = digitsFromNumber(newVal); render(newDigits, dir); updateResult(op, factor, val, newVal); }, 150); } function resetDisplay() { const val = parseInt(nbInput.value, 10); if (isNaN(val) || val < 0) { for (const cell of cells) cell.innerHTML = ''; resultDiv.innerHTML = 'Entrez un nombre et cliquez sur × ou ÷'; return; } const digits = digitsFromNumber(val); render(digits); resultDiv.innerHTML = `${val} — Choisissez une opération`; } // Quiz function generateQuiz() { const factors = [10, 100, 1000]; const factor = factors[Math.floor(Math.random() * factors.length)]; const ops = ['mult', 'div']; const op = ops[Math.floor(Math.random() * ops.length)]; let base, answer; if (op === 'mult') { base = Math.floor(Math.random() * 1000) + 1; answer = base * factor; } else { base = Math.floor(Math.random() * 10000) + 1; base = Math.floor(base / factor) * factor; if (base === 0) base = factor; answer = base / factor; } const opSym = op === 'mult' ? '×' : '÷'; const opWord = op === 'mult' ? 'Multiplie' : 'Divise'; quizQuestion.textContent = `${opWord} ${base} par ${factor}. Combien trouves-tu ?`; quizAnswer = answer; quizInput.value = ''; quizFeedback.textContent = ''; quizFeedback.className = 'quiz-feedback'; quizInput.focus(); } function checkQuiz() { const userAns = parseFloat(quizInput.value); if (isNaN(userAns)) { quizFeedback.textContent = 'Écris un nombre !'; quizFeedback.className = 'quiz-feedback wrong'; return; } if (userAns === quizAnswer) { quizFeedback.textContent = 'Bravo ! 🎉 C\'est juste !'; quizFeedback.className = 'quiz-feedback correct'; setTimeout(generateQuiz, 1500); } else { quizFeedback.textContent = `Ce n'est pas ça. Essaie encore !`; quizFeedback.className = 'quiz-feedback wrong'; quizInput.value = ''; quizInput.focus(); } } // Events document.querySelectorAll('.btn[data-op]').forEach(btn => { btn.addEventListener('click', () => { if (quizMode) { document.querySelector('[data-mode="play"]').click(); } const op = btn.dataset.op; const factor = parseInt(btn.dataset.factor, 10); applyOperation(op, factor); }); }); resetBtn.addEventListener('click', resetDisplay); nbInput.addEventListener('keydown', e => { if (e.key === 'Enter') resetDisplay(); }); // Mode tabs modeTabs.forEach(tab => { tab.addEventListener('click', () => { modeTabs.forEach(t => t.classList.remove('active')); tab.classList.add('active'); quizMode = tab.dataset.mode === 'quiz'; quizArea.classList.toggle('show', quizMode); if (quizMode) { generateQuiz(); } else { quizFeedback.textContent = ''; } }); }); quizCheck.addEventListener('click', checkQuiz); quizInput.addEventListener('keydown', e => { if (e.key === 'Enter') checkQuiz(); }); // Init resetDisplay();