// Breakpoints : // FN + F9 : création ou suppression // FN + Shift + F9 : suppression de tous // FN + F10 : Aller au prochain //Bug au reload : si cherche à cleaner le fait qu'on se rappelle du mot ou on en était //AAAAAAAA //-------- // Gerer l'utilisation de la touche entrée pour le code // - Gerer l'affichage du bloc "ajuster mode enfant" quand on load puis qu'on rentre en mode parent : detectMonoMot(); est pourtant lancé au debut de la fonction activerOptions // - Gerer l'espace trop haut quand on clic sur annuler // - Créer 30 phrases 5 mots mysteres // -- mettre à jour l'aide // - ecrire Le mot mystère Quand il y a qu'un seul mot // - mettre un lien Soutenir le projet // - virer les fleches de defilement numerique dans le champ code // - Impression : mettre le numero de la phrase si c'est une phrase pré-écrite sinon mettre "Phrase écrire par l'utilisateur :" // Le btn PRINT des 3 boutons du mode enfants : à gérer // Créer dans le mode parent un bouton reset all (supprime local storage entre autre) // Creer dans le mode parent un bouton Generer une url (l'url integre la phrase et les reglages, une fonction appelée dans l'url les passe dans le local storage et recharge la page). Mettre blague topito reformulées par chatty et mélangées. // Gerer Point d'exclamation barre url. // - Encoder le code //Initialisation à laisser en haut du script// let maPhraseLoad=1; //quand on met zero ça active le random, dans la liste mots savant let phraseSelected=""; const alphabetFR = "ABCDEFGHIJKLMNOPQRSTUVWXYZÉÈÊÀÇÎÛÂÔËŒÆÏÖÙÄÜŸ'-"; const chiffresEntoures = ['⓿','①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳']; /* //Permet de lister toutes les var localStorage puis de simuler un clean cache const keysUsed = [ "showOneDaySwitch", "pedagoOneDay", "userSettings", "calculsDuJour", "theme", // ajoute ici toutes les clés que ton script crée ou lit ]; // Suppression de toutes ces clés du localStorage keysUsed.forEach(key => localStorage.removeItem(key)); */ document.getElementById("baseLineTitre").addEventListener("click", () => { localStorage.removeItem('siteIntroSeen'); localStorage.removeItem('MMCodeParent'); localStorage.removeItem('MMOneDay'); localStorage.removeItem('MMDejaResolu'); localStorage.removeItem('MMPhrasePerso'); localStorage.removeItem('reglagesMathsMysteres10'); localStorage.removeItem('MMRandomSwitch'); localStorage.removeItem('firstVisitDone'); localStorage.removeItem('justPrinted'); localStorage.removeItem('justPrintedEnfant'); localStorage.removeItem('modeParentDejaVisited'); }); ////////////// //Gestion apparition du dock lettres latéral let dockActive = false; window.addEventListener("scroll", () => { if (modeEnfant==true){ if (window.scrollY > 100 && !dockActive) { //toggleDock(); // 👉 déclenche quand on descend dockActive = true; } else if (window.scrollY <= 100 && dockActive) { // toggleDock(); // 👉 déclenche quand on remonte tout en haut dockActive = false; }} }); /////////// /* function printDiv(divId) { const content = document.getElementById(divId).innerHTML; const printWindow = window.open("", "", "width=800,height=600"); // Récupère tous les et ${content} `); printWindow.document.close(); printWindow.focus(); printWindow.print(); printWindow.close(); } */ //printEnfant /////////// //Méthode 3 — Cloner la div dans un conteneur invisible function printDiv(divId) { const divToPrint = document.getElementById(divId); const originalContents = document.body.innerHTML; const printContents = divToPrint.outerHTML; document.body.innerHTML = printContents; //document.body.innerHTML = printTitle + printContents; window.print(); localStorage.setItem("justPrinted", "true"); location.reload(); // recharge la page, donc tout } function printDiv2(divId) { const divToPrint = document.getElementById(divId); const originalContents = document.body.innerHTML; const printContents = divToPrint.outerHTML; //document.body.innerHTML = printTitle + printContents; document.body.innerHTML = printContents; window.print(); localStorage.removeItem("justPrinted"); location.reload(); // recharge la page, donc tout } //au chargement de la page : window.addEventListener("load", () => { // 1. Gestion du RELOAD après impression if (localStorage.getItem("justPrinted") === "true") { // On restaure l'état désiré modeEnfant = false; parentModeConfirmation.style.display = "none"; activerOptions(); btnVersParent.style.display = "none"; btnVersEnfant.style.display = "block"; codeAskedInput.value = ""; // Repositionne la page window.scrollTo({ top: 100, behavior: 'smooth' }); // On nettoie localStorage.removeItem("justPrinted"); } // 2. Si tu veux VRAIMENT forcer un reload la toute première fois if (!localStorage.getItem("firstVisitDone")) { localStorage.setItem("firstVisitDone", "true"); location.reload(); } }); /////////// function setDockLogHeight(classe) { dockLog.classList.remove("h0", "h1", "h2", "h3"); dockLog.classList.add(classe); } setDockLogHeight("h0"); ///////////////////////////// // Gestion des blocs blancs de Réglage // ///////////////////////////// const accordion1 = document.getElementById('accordion1'); const header1 = document.getElementById('accordion-header1'); header1.addEventListener('click', () => { accordion1.classList.toggle('expanded'); boutonConseils.classList.toggle('open'); }); pedagoClose.addEventListener('click', () => { accordion1.classList.toggle('expanded'); boutonConseils.classList.toggle('open'); window.scrollTo({ top: 0, behavior: 'smooth' }); }); // const accordion2 = document.getElementById('accordion2'); const header2 = document.getElementById('accordion-header2'); header2.addEventListener('click', () => { accordion2.classList.toggle('expanded'); }); const accordion3 = document.getElementById('accordion3'); const header3 = document.getElementById('accordion-header3'); header3.addEventListener('click', () => { accordion3.classList.toggle('expanded'); }); const accordion4 = document.getElementById('accordion4'); const header4 = document.getElementById('accordion-header4'); header4.addEventListener('click', () => { accordion4.classList.toggle('expanded'); }); ///////////////////////////// // Gestion dock Alphabet // ///////////////////////////// //let dock = document.getElementById("dockPanel"); let body = document.body; let dockVisible = false; // Texte perso à afficher dans le dock let smallTexts = [ "1 A", "2 B", "3 C", "4 D", "5 E", "6 F", "7 G", "8 H", "9 I", "10 J", "11 K", "12 L", "13 M", "14 N", "15 O", "16 P", "17 Q", "18 R", "19 S", "20 T", "21 U", "22 V", "23 W", "24 X", "25 Y", "26 Z" ]; /* function toggleDock() { lettres.classList.toggle("hidden"); containerLettre.classList.toggle("hidden"); if (!dockVisible) { switchDockDisplay.textContent="Déplacer la carte des lettres ici"; dock.innerHTML = ""; smallTexts.forEach((text, index) => { // lettres.style.display="none"; const span = document.createElement("span"); span.style.whiteSpace = "pre"; // <-- respecte les espaces span.style.letterSpacing= "-2px"; span.textContent = text; // Style pour la ligne entre les spans span.style.width = "100%"; span.style.display = "block"; span.style.boxSizing = "border-box"; span.style.padding= "0px"; span.style.margin= "0px"; dock.appendChild(span); }); dock.classList.add("show"); body.classList.add("with-dock"); } else { switchDockDisplay.textContent="Placer la liste sur le côté"; dock.classList.remove("show"); body.classList.remove("with-dock"); } dockVisible = !dockVisible; } */ ///////////////////////////// // Questionnaire Checkboxes // ///////////////////////////// // Tableau des réglages des types de calculs possibles let reglages = [ {id: "LectureDirecte", valeur: false, textPerso: "Lecture directe :
5 → E
26 → Z"}, {id: "Add-TresSimple", valeur: true, textPerso: "Additions très simples :
2 + 3 = 5
10 + 2 = 12
20 + 6 = 26"}, {id: "Sous-TresSimple", valeur: true, textPerso: "Soustraction très simple :
10 - 7 = 3
20 - 8 = 12
30 - 5 = 25"}, {id: "ZZmoinsYY", valeur: true, textPerso: "Soustractions simples :
59 - 47 = 12"}, {id: "XXXplusYYYmoinsZZZ", valeur: true, textPerso: "Addition et soustraction :
341 + 149 - 483 = 7" }, {id: "ZfoisXXmoinsYY", valeur: true, textPerso: "Multiplication et soustraction :
12 x 5 - 44 = 16" }, {id: "DivisionPar10", valeur: false, textPerso: "Division par 10
240 : 10 = 24"}, {id: "DivisionPar2", valeur: true, textPerso: "Division par 2
32 : 2 = 16"}, {id: "DivisionPar4", valeur: false, textPerso: "Division par 4
64 : 4 = 16"}, {id: "DivisionPar3", valeur: false, textPerso: "Division par 3
42 : 3 = 14"}, {id: "DivisionPar5", valeur: false, textPerso: "Division par 5
35 : 5 = 7"}, {id: "ZZfoisXXXmoinsYY", valeur: false, textPerso: "Multiplication et soustraction :
47 x 592 - 27808 = 16" } ]; // Génère dynamiquement les cases à cocher dans le DOM function genererCheckboxes() { const container = document.getElementById("zoneCheckboxes"); container.innerHTML = ""; reglages.forEach((reglage, i) => { const wrapper = document.createElement("div"); wrapper.style.display = "flex"; wrapper.style.alignItems = "stretch"; wrapper.style.padding = "0 0 rem"; // espace horizontal wrapper.style.marginBottom = "1rem"; // ou "20px", à toi de choisir la taille d'espacement wrapper.style.position = "relative"; const checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.id = reglage.id; checkbox.style.marginRight = "1rem"; // on augmente l'espace pour placer le trait const separator = document.createElement("div"); separator.style.position = "absolute"; separator.style.top = "5%"; separator.style.bottom = "5%"; separator.style.left = "1.5rem"; separator.style.width = "2px"; separator.style.backgroundColor = "#ccc"; const texte = document.createElement("div"); texte.innerHTML = reglage.textPerso; texte.style.lineHeight = "1.4"; wrapper.appendChild(checkbox); wrapper.appendChild(separator); wrapper.appendChild(texte); container.appendChild(wrapper); }); } function verifierMMPhrasePerso() { // Récupérer la valeur dans localStorage const valeur = localStorage.getItem("MMPhrasePerso"); if (valeur != null) { customPhrase.value=valeur; } } // Charge les préférences depuis le localStorage et met à jour reglages[i].valeur function chargerPreferences() { let prefs = localStorage.getItem("reglagesMathsMysteres10"); let data = JSON.parse(prefs); if (Array.isArray(data)) { data.forEach((val, i) => { reglages[i].valeur = val; }); } } // Applique reglages[i].valeur aux cases à cocher visibles function appliquerCheckboxes() { reglages.forEach(r => { let cb = document.getElementById(r.id); if (cb) cb.checked = r.valeur; }); } // Sauvegarde l’état des valeurs (true/false) dans le localStorage function sauvegarderPreferences() { // Met à jour reglages[i].valeur depuis l'état des cases cochées reglages.forEach(r => { let cb = document.getElementById(r.id); if (cb) r.valeur = cb.checked; }); let valeurs = reglages.map(r => r.valeur); localStorage.setItem("reglagesMathsMysteres10", JSON.stringify(valeurs)); } // Bouton pour mettre à jour la phrase document.getElementById("updateEquations").addEventListener("click", () => { let auMoinsUneCheckee = reglages.some(r => { let cb = document.getElementById(r.id); return cb && cb.checked; }); if (auMoinsUneCheckee) { sauvegarderPreferences(); afficherPhrase(monTexte, monNumero); accordion2.classList.toggle('expanded'); // boutonConseils.classList.toggle('open'); window.scrollTo({ top: 0, behavior: 'smooth' }); } }); //////////////////////////////////// // Assombrir la couleur pour le dock // //////////////////////////////////// function assombrirHex(hex, facteur = 0.1) { // Supprimer le # si présent hex = hex.replace('#', ''); // Extraire R, G, B let r = parseInt(hex.substring(0, 2), 16); let g = parseInt(hex.substring(2, 4), 16); let b = parseInt(hex.substring(4, 6), 16); // Réduire la luminosité r = Math.floor(r * (1 - facteur)); g = Math.floor(g * (1 - facteur)); b = Math.floor(b * (1 - facteur)); // S'assurer que les valeurs sont dans [0, 255] r = Math.max(0, Math.min(255, r)); g = Math.max(0, Math.min(255, g)); b = Math.max(0, Math.min(255, b)); // Convertir en hex avec padding const toHex = (n) => n.toString(16).padStart(2, '0'); return `#${toHex(r)}${toHex(g)}${toHex(b)}`; } //////////////////////////////////// // Changement de couleur du fond // //////////////////////////////////// // Tableau des couleurs disponibles pour le fond //#00b5b8; const couleurs = ["#00b5b8", "#006cea", "#ff5e3b", "#904aae", "#ea127d","#00ba79"]; document.documentElement.style.setProperty('--couleur-principale', couleurs[0]); let couleurSombre = assombrirHex(couleurs[0], 0.2); //dockPanel.style.backgroundColor = couleurSombre; document.documentElement.style.setProperty('--couleur-principale-foncee', couleurSombre); let couleurIndex = 0; // Index de la couleur actuelle const boutonChangerCouleur = document.getElementById("changerCouleur"); const disque = document.getElementById("disque"); // Fonction pour faire tourner les couleurs function changerCouleur() { couleurIndex = (couleurIndex + 1) % couleurs.length; const nouvelleCouleur = couleurs[couleurIndex]; // Changer la couleur de fond du body document.documentElement.style.setProperty('--couleur-principale',nouvelleCouleur); couleurSombre = assombrirHex(nouvelleCouleur, 0.2); //dockPanel.style.backgroundColor = couleurSombre; document.documentElement.style.setProperty('--couleur-principale-foncee', couleurSombre); // Change la couleur du trait de l’icône dans le bouton // Attendre un tout petit moment pour que l'icône SVG soit bien injectée setTimeout(() => { const svg = boutonChangerCouleur.querySelector("svg"); if (svg) { svg.style.stroke = nouvelleCouleur; } }, 10); } // Ajout du clic sur le bouton pour changer la couleur boutonChangerCouleur.addEventListener("click", changerCouleur); //////////////////////////////////////////// // Fermeture du bandeau parent / enfants ////////////////////////////////////////// /* let varCacherJours = true; function cacherJours() { if (varCacherJours == false) { document.querySelectorAll('.motJour').forEach(el => el.style.display = 'inLine'); document.querySelectorAll('.motDuJour').forEach(el => el.style.display = 'inLine'); varCacherJours = true; } else { document.querySelectorAll('.motJour').forEach(el => el.style.display = 'none'); document.querySelectorAll('.motDuJour').forEach(el => el.style.display = 'none'); varCacherJours = false; } } */ solutionsSwitch.addEventListener("change", function () { solutionsShow(); }); let varSolutions = true; function solutionsShow() { if (varSolutions == false) { document.getElementById("phraseMyst").style.display = "none"; document.getElementById("phrase").style.display = "block"; document.querySelectorAll('.reponse').forEach(span => span.style.display = "inline"); document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "inline"); document.querySelectorAll('.placeholderIntero').forEach(span => span.style.display = "none"); document.querySelectorAll('.mot').forEach(span => span.style.display = "inline"); varSolutions = true; } else { document.querySelectorAll('.mot').forEach(span => span.style.display = "none"); document.getElementById("phraseMyst").style.display = "block"; document.getElementById("phrase").style.display = "none"; document.querySelectorAll('.reponse').forEach(span => span.style.display = "none"); document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "none"); document.querySelectorAll('.placeholderIntero').forEach(span => span.style.display = "inLine"); document.querySelectorAll('.reponse').forEach(span => span.style.display = "none"); document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "none"); varSolutions = false; } afficherPhrase(monTexte, monNumero); } //////////////////////////////////// // Réglages d'affichage initiaux // //////////////////////////////////// // Récupérer le jour de la semaine (0 = dimanche, 6 = samedi) let varOneDay="false"; let varJour=1; let nombreMotsGras=1; let monTexteEnCours=""; let aujourdHui = 10; let modeEnfant=true; zonePrint.style.display="none"; childModeConfirmation.style.display = "none"; parentModeConfirmation.style.display = "none"; accordion1.style.display="none"; accordion2.style.display="none"; accordion3.style.display="none"; accordion4.style.display="none"; btnVersEnfant.style.display = "none"; const resolvedWords = document.getElementById("resolvedWords"); updateDropdown(nombreMotsGras); if (localStorage.getItem("modeParentDejaVisited") === null) { document.getElementById("printEnfant").style.display = "none"; document.getElementById("changerCouleur").style.display = "none"; }else{ if (localStorage.getItem("modeParentDejaVisited") =="true") { btnVersParent.innerHTML = "settings"; btnVersParent.style.padding = "20px 20px 20px 20px"; document.getElementById("printEnfant").style.display = "inLine-flex"; document.getElementById("changerCouleur").style.display = "inLine-flex"; }} // Initialisation au chargement genererCheckboxes(); chargerPreferences(); appliquerCheckboxes(); verifierMMPhrasePerso(); const boutonPrint = document.getElementById("boutonPrint"); if (boutonPrint) { boutonPrint.addEventListener("click", () => { //window.print(); printDiv("contenuPrint"); }); } const boutonPrintEnfant = document.getElementById("printEnfant"); if (boutonPrintEnfant) { boutonPrintEnfant.addEventListener("click", () => { //window.print(); printDiv2("contenuPrint"); }); } const boutonPrintCarreaux = document.getElementById("boutonPrintCarreaux"); if (boutonPrintCarreaux) { boutonPrintCarreaux.addEventListener("click", () => { printA4Grid(); }); } function updateDropdown(nombreMotsGras) { resolvedWords.innerHTML = ""; // On recrée les nouvelles options for (let i = 0; i < nombreMotsGras; i++) { const option = document.createElement("option"); option.value = i; option.textContent = i; resolvedWords.appendChild(option); } resolvedWords.selectedIndex= parseInt(localStorage.getItem("MMDejaResolu")); aujourdHui= parseInt(resolvedWords.value, 10); } ///////////////////////// // Gestion des phrases // ///////////////////////// let phrases = [ "Dans tous les OCÉANS du globe, quel animal JOUEUR et MALIN peut appeler un MEMBRE précis de sa FAMILLE en sifflant son nom ? Il s'agit du DAUPHIN !", "Salut, c'est moi l'animal si MIGNON qui a trente-deux MUSCLES dans chaque OREILLE pour mieux CHASSER et montrer mes ÉMOTIONS. Tu as deviné qui je suis ? Bien sûr, le CHAT !", "Dans les mers POLAIRES, quel est le POISSON qui peut VIVRE plus de QUATRE cents ans ? C'est le REQUIN du Groënland.", "Le corps HUMAIN est une véritable USINE ! Par exemple, jusqu'à DOUZE kilomètres de CHEVEUX peuvent POUSSER sur ta tête chaque ANNÉE ! C'est décoiffant non ?! "]; let phrasesToto = [ "Qu’est-ce qui a deux bosses et qui vit au Canada ? Un CHAMEAU qui s’est perdu.", "Pourquoi ferme-t-on un OEIL pour viser ? Parce qu’avec les deux fermés, c'est plus difficile !", "Quel animal lit l’avenir ? La POULE de cristal.", "Que se passe-t-il quand deux poissons s’énervent ? Le THON monte."]; let phrasesDico = [ "Quel oiseau peut voler à reculons ou faire du surplace ? C'est le COLIBRI et ses ailes peuvent battre jusqu'à 100 fois par seconde !", "Qu’est-ce qui a deux bosses et qui vit au Canada ? Un CHAMEAU qui s’est perdu !", "Qu’est-ce qui t’appartient, mais que les autres utilisent plus que toi ? Ton PRÉNOM !", "Quel animal lit l’avenir ? La POULE de cristal.", "Que se passe-t-il quand deux poissons s’énervent ? Le THON monte.", "Quel animal peut reconnaître son reflet dans un mrioir ? Le CHIMPANZÉ !", "Quel animal possède trois cœurs ? C'est la PIEUVRE ! Elle a également huit bras et neufs cerveaux !", "Un ESCARGOT peut posséder jusqu'à 20 000 dents ! C'est l'animal qui en a le plus au monde et les siennes sont microscopiques !", "Le LÉOPARD des neiges peut faire des bonds de près de 9 mètres !", "Quel animal a une langue plus longue que la taille de son corps ? Le CAMÉLÉON ! C'est comme si un adulte avait une langue de 4 m de long !", "La termite grignote sans arrêt les poutres et les troncs : c'est un animal XYLOPHAGE, parce qu’il se nourrit directement du bois.", "La petite salamandre qui se cache sous les pierres est LUCIFUGE : elle fuit la lumière et préfère les coins sombres et humides pour rester en sécurité.", "Le serpent adapte la température de son sang à son environnement. On dit qu'il est POÏKILOTHERME !", "Le chat a la capacité de voir dans la pénombre : on dit qu’il est NYCTALOPE, c’est-à-dire qu’il distingue très bien les formes même quand la lumière est presque absente." ]; let select = document.getElementById("selectPhrase"); let selectToto = document.getElementById("selectPhraseToto"); let selectDico = document.getElementById("selectPhraseDico"); let phraseDiv = document.getElementById("phrase"); let phraseMyst = document.getElementById("phraseMyst"); let grid = document.getElementById("equations"); let lettresDiv = document.getElementById("lettres"); let lettresDiv2 = document.getElementById("lettres2"); let infoDiv = document.getElementById("infoPhrase"); let randomSwitch = document.getElementById("randomSwitch"); let monTexte = ""; let monNumero; if (maPhraseLoad === 0) { monNumero = Math.floor(Math.random() * phrases.length) + 1; } else { monNumero = maPhraseLoad; } let parcourirPremiereMoitié = true; let cachecache = 1; // Phrase personnalisé : supression de la ligne de base et apparition des conseils infos customPhrase.addEventListener('focus', function () { this.placeholder = ''; infTexte.style.display = "block"; }); customPhrase.addEventListener('blur', function () { if (this.value === '') { infTexte.style.display = "none"; this.placeholder = 'Ecrivez ici une phrase personnalisée !'; // Restaure le placeholder si le champ est vide et perd le focus } }); // Remplit la liste déroulante avec les phrases phrases.forEach((p, i) => { let opt = document.createElement("option"); opt.value = i; // opt.textContent = `Phrase numéro ${i + 1} __________________ `; let maxLength = window.innerWidth < 600 ? 35 : 70; // mobile : 35 | écran : 70 opt.textContent = `${i + 1}. ` + phrases[i].slice(0, 70)+'...'; select.appendChild(opt); }); // Remplit la liste déroulante TOTO avec les phrases phrasesToto.forEach((p, i) => { let opt = document.createElement("option"); opt.value = i; // opt.textContent = `Phrase numéro ${i + 1} __________________ `; opt.textContent = `${i + 1}. ` + phrasesToto[i].slice(0, 70)+'...'; //opt.textContent = phrases[i]; selectToto.appendChild(opt); }); // Remplit la liste déroulante TOTO avec les phrases phrasesDico.forEach((p, i) => { let opt = document.createElement("option"); opt.value = i; // opt.textContent = `Phrase numéro ${i + 1} __________________ `; opt.textContent = `${i + 1}. ` + phrasesDico[i].slice(0, 70)+'...'; //opt.textContent = phrases[i]; selectDico.appendChild(opt); }); // Quand on change de phrase pré écrite depuis la liste Mots selectDico.addEventListener("change", () => { monNumero = parseInt(selectDico.value) + 1; afficherPhrase(phrasesDico[selectDico.value], monNumero); customPhrase.value = phrasesDico[selectDico.value]; localStorage.setItem("MMPhrasePerso", customPhrase.value); detectMonoMot(); //accordion3.classList.toggle('expanded'); //window.scrollTo({ top: 0, behavior: 'smooth' }); select.value=""; selectToto.value=""; afficherLettresSpeciales(); }); // Quand on change de phrase pré écrite depuis la liste Blagues selectToto.addEventListener("change", () => { monNumero = parseInt(selectToto.value) + 1; afficherPhrase(phrasesToto[selectToto.value], monNumero); customPhrase.value = phrasesToto[selectToto.value]; localStorage.setItem("MMPhrasePerso", customPhrase.value); detectMonoMot(); //accordion3.classList.toggle('expanded'); //window.scrollTo({ top: 0, behavior: 'smooth' }); select.value=""; selectDico.value=""; afficherLettresSpeciales(); }); // Quand on change de phrase pré écrite depuis la liste select.addEventListener("change", () => { monNumero = parseInt(select.value) + 1; afficherPhrase(phrases[select.value], monNumero); customPhrase.value = phrases[select.value]; localStorage.setItem("MMPhrasePerso", customPhrase.value); detectMonoMot(); //accordion3.classList.toggle('expanded'); //window.scrollTo({ top: 0, behavior: 'smooth' }); selectToto.value=""; selectDico.value=""; afficherLettresSpeciales(); resolvedWords.value=0; aujourdHui= parseInt(resolvedWords.value, 10); localStorage.setItem("MMDejaResolu", aujourdHui); }); // Quand on saisit une phrase personnalisée majTexte.addEventListener("click", () => { detectMonoMot(); localStorage.setItem("MMPhrasePerso", customPhrase.value); // Stocke la date du jour au format ISO (lisible et simple à comparer) validerPhrase(); resolvedWords.value=0; aujourdHui= parseInt(resolvedWords.value, 10); localStorage.setItem("MMDejaResolu", aujourdHui); accordion4.classList.toggle('expanded'); // boutonConseils.classList.toggle('open'); setTimeout(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }, 0); }); function extractMotsMaj(textOS) { const regexNettoyage = new RegExp(`^[^${alphabetFR}]+|[^${alphabetFR}]+$`, 'g'); return textOS .split(' ') .map(m => m.replace(regexNettoyage, '')) // nettoyage ponctuation autour .filter(m => m.length > 2 && m === m.toUpperCase() && [...m].every(c => alphabetFR.includes(c)) ); } // Désactivée : Vérifie la validité d'une phrase personnalisée function validerPhrase() { detectMonoMot(); let texte = document.getElementById("customPhrase").value; let mots=extractMotsMaj(texte); // Code désactivé mais utile pour limiter les majuscules /* if (mots.length > 6) { erreurDiv.textContent = "❌ Maximum 7 mots en majuscules !"; }*/ select.value = ""; monTexte = texte; monNumero = null; afficherPhrase(texte, null); } //// //// //// function motsMajEnGrasMin(texte) { const regexNettoyage = new RegExp(`^[^${alphabetFR}]+|[^${alphabetFR}]+$`, 'g'); return texte .split(' ') .map(motOriginal => { const net = motOriginal.replace(regexNettoyage, ''); if ( net.length > 2 && net === net.toUpperCase() && [...net].every(c => alphabetFR.includes(c)) ) { const prefix = motOriginal.slice(0, motOriginal.indexOf(net)); const suffix = motOriginal.slice(motOriginal.indexOf(net) + net.length); return `${prefix}${net.toLocaleLowerCase('fr')}${suffix}`; } else { return motOriginal; } }) .join(' '); } //// //// //// function grasEnMaj(texteHTML) { let resultat = ''; let i = 0; while (i < texteHTML.length) { // Cherche une balise if ( texteHTML.slice(i, i + 8).toLowerCase() === '' ) { resultat += ''; i += 8; // Passe la balise ouvrante let contenu = ''; // Récupère le contenu jusqu’à while ( i < texteHTML.length && texteHTML.slice(i, i + 9).toLowerCase() !== '' ) { contenu += texteHTML[i]; i++; } resultat += contenu.toUpperCase(); // Transforme en majuscules resultat += ''; i += 9; // Passe la balise fermante } else { resultat += texteHTML[i]; i++; } } return resultat; } // Fonction pour mettre à jour l'affichage function updateMotNumber() { aujourdHui= parseInt(resolvedWords.value, 10); localStorage.setItem("MMDejaResolu", aujourdHui); } // Met à jour dès le chargement //updateMotNumber(); // Et à chaque changement de sélection resolvedWords.addEventListener('change', updateMotNumber); // Fonction principale : affiche la phrase à l’écran, la transforme en version mystère (blanks pour les mots en majuscules), génère les équations associées function afficherPhrase(texte, numero) { afficherLettresSpeciales(); aujourdHui = parseInt( localStorage.getItem('MMDejaResolu'), 10); if (isNaN(aujourdHui)) { aujourdHui = 0; } //AAAAAAAA //localStorage.setItem("MMDejaResolu", aujourdHui); // Stocke la phrase et son numéro monTexte = texte; monNumero = numero; let monTexteGras = texte; // Affiche la phrase originale dans l’élément "phrase" monTexteGras = motsMajEnGrasMin(texte); // Permet de mettre en gras et minuscule les mots à trouver monTexteGras=grasEnMaj(monTexteGras); // phraseDiv.innerHTML = monTexteGras; phraseDiv.innerHTML = preventOrphanPunctuation(monTexteGras); // après l'injection, on force les gras en minuscules phraseDiv.querySelectorAll("b, strong").forEach(el => { el.textContent = el.textContent.toLowerCase(); }); // Réinitialise le tableau des équations et les infos grid.innerHTML = ""; infoDiv.textContent = ""; //--------------- // Affiche la phase avec des underscores : let index = 1; let numJour = aujourdHui+1; const pattern = /([^<]+)<\/strong>/g; let result = ""; let result2 =""; let lastIndex = 0; let match; while ((match = pattern.exec(monTexteGras)) !== null) { const before = monTexteGras.slice(lastIndex, match.index); const contenu = match[1]; let bloc = contenu; if (index > numJour - 1) { const underscores = "_".repeat(contenu.length); const color = (index === numJour) ? "var(--couleur-principale)" : "#000"; const graisse = (index === numJour) ? "900" : "400"; bloc = '' + '' + '' + underscores + "" + ""; } result += before + bloc; index++; lastIndex = pattern.lastIndex; } result += monTexteGras.slice(lastIndex); displayText = motsMajEnGrasMin(result); //------------------ if (varSolutions === false ) { //Se lance correctement après essai alert // Affiche la phase avec des underscores : let index = 1; displayText = monTexteGras.replace(/([^<]+)<\/strong>/g, (_, contenu) => { let underscores = '_'.repeat(contenu.length); let bloc = ` ${underscores} `; //color:var(--couleur-principale); permettrait de mettre les petits numéros dans la phrase en couleur dynamique // ${chiffresEntoures[index++]} ça on peut le mettre en valeur dynamique au dessus des _ _ _ _ //sinon : ${index++} return `${bloc}`; }); result2=motsMajEnGrasMin(displayText); } if (modeEnfant==true){ displayText=motsMajEnGrasMin(result); } if (modeEnfant==true && varOneDay==false){ displayText=motsMajEnGrasMin(result2); } if (modeEnfant==true && (varOneDay==false && aujourdHui>0)){ displayText=motsMajEnGrasMin(result); } //------------------ //color:var(--couleur-principale); permettrait de mettre les petits numéros dans la phrase en couleur dynamique // ${chiffresEntoures[index++]} ça on peut le mettre en valeur dynamique au dessus des _ _ _ _ //sinon : ${index++} //phraseMyst.innerHTML = displayText + ''; function preventOrphanPunctuation(text) { //return text.replace(/\s([:!?])/g, ' $1'); return text.replace(/\s([:;!?»])/g, '\u00A0$1'); } phraseMyst.innerHTML = preventOrphanPunctuation(displayText); // Pour chaque mot en majuscules, on génère une série de valeurs chiffrées et leurs équations let mots = extractMotsMaj(texte); nombreMotsGras=mots.length; updateDropdown(nombreMotsGras); mots.forEach((mot, index) => { // Conversion des lettres du mot en chiffres (a=1, b=2...) //let lettres = mot.toLowerCase().split(''); //let nombres = lettres.map(l => l.charCodeAt(0) - 96); let lettres = mot.split(''); let nombres = lettres.map(l => (alphabetFR.indexOf(l)+1)); // Création d’un mélange partiel des chiffres, pour ajouter une petite difficulté let nombresMeles = [...nombres]; // On copie le tableau d'origine for (let i = nombresMeles.length - 1; i > 0; i--) { // Échange des éléments let j = randFakeInt(0, i, index, i, index); [nombresMeles[i], nombresMeles[j]] = [nombresMeles[j], nombresMeles[i]]; } nombres = [...nombres, ...nombresMeles]; // Création d’un bloc HTML pour chaque mot mystère let box = document.createElement("div"); box.className = "box"; // Affiche le numéro du mot let motNumero = document.createElement("span"); let varSemaine = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"]; varJour = varSemaine[aujourdHui%7]; /*if (typeof varJour === "undefined") { varJour = "lendemain"; }*/ motNumero.innerHTML = `
Mot N°
${index + 1}
Le mot du jour
`; //Le mot du
${varJour}
`; box.appendChild(motNumero); let spaceHaut = document.createElement("div"); spaceHaut.innerHTML = `
`; box.appendChild(spaceHaut); // Affiche le mot en minuscule à côté du numéro let motElem = document.createElement("span"); motElem.className = "mot"; motElem.textContent = mot.toLowerCase(); box.appendChild(motElem); // Détermine si on affiche la première ou seconde moitié des équations let debut, fin; if (parcourirPremiereMoitié) { debut = 0; fin = Math.floor(nombres.length / 2); } else { debut = Math.floor(nombres.length / 2); fin = nombres.length; } // Génération des équations pour la partie sélectionnée for (let i = debut; i < fin; i++) { let val = nombres[i]; let eqElem = document.createElement("div"); eqElem.className = "equation"; eqElem.innerHTML = creerEquation(val,index,i); box.appendChild(eqElem); } // Ajout du bloc au DOM grid.appendChild(box); }); // Création de la première box spéciale const premiereBox = document.createElement("div"); premiereBox.className = "boxFirst"; premiereBox.innerHTML = '
' + 'À toi de jouer 🙂
' + '
' + 'Chaque résultat donne une lettre de l\'alphabet. Prends un crayon et une feuille et retrouve le mot complet !
' + '
' + 'Exemple : CHAT 🐾
' + '3 → C
8 → H
1 → A
20 → T
'; const closeBtn = document.createElement("span"); closeBtn.innerHTML = "✕"; closeBtn.className = "closeBox"; closeBtn.onclick = () => { premiereBox.classList.add("closing"); setTimeout(() => { premiereBox.style.display = "none"; }, 350); // durée = transition CSS }; premiereBox.appendChild(closeBtn); // On l'insère au début de la grille (avant tout le reste) //grid.insertBefore(premiereBox, grid.lastChild); grid.appendChild(premiereBox); const lettres3 = document.createElement("div"); lettres3.className = "letter-map"; lettres3.innerHTML = lettres.innerHTML; grid.appendChild(lettres3); document.getElementById("lettres").style.display = "none"; if (varSolutions == true) { document.getElementById("phraseMyst").style.display = "none"; document.getElementById("phrase").style.display = "block"; document.querySelectorAll('.reponse').forEach(span => span.style.display = "inline"); document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "inline"); document.querySelectorAll('.placeholderIntero').forEach(span => span.style.display = "none"); document.querySelectorAll('.mot').forEach(span => span.style.display = "inline"); } if (varSolutions == false) { document.querySelectorAll('.mot').forEach(span => span.style.display = "none"); document.querySelectorAll('.motN').forEach(el => el.style.display = 'inLine'); document.getElementById("phraseMyst").style.display = "block"; document.getElementById("phrase").style.display = "none"; document.querySelectorAll('.reponse').forEach(span => span.style.display = "none"); document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "none"); document.querySelectorAll('.placeholderIntero').forEach(span => span.style.display = "inLine"); document.querySelectorAll('.reponse').forEach(span => span.style.display = "none"); document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "none"); } if (modeEnfant == true) { document.querySelectorAll('.mot').forEach(span => span.style.display = "none"); document.querySelectorAll('.reponse').forEach(span => span.style.display = "none"); document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "none"); document.querySelectorAll('.placeholderIntero').forEach(span => span.style.display = "inLine"); document.querySelectorAll('.reponse').forEach(span => span.style.display = "none"); document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "none"); phraseMyst.style.display = "block"; phraseDiv.style.display = "none"; } if (modeEnfant==false){ document.querySelectorAll('.motJour').forEach(el => el.style.display = 'none'); document.querySelectorAll('.motDuJour').forEach(el => el.style.display = 'none'); document.querySelectorAll('.numero').forEach(el => el.style.display = 'inLine'); let toutesLesBoxes = grid.querySelectorAll('.box'); toutesLesBoxes.forEach((box, index) => { box.style.display = 'block'; }); } choixCompteur=1; // nécessaire sinon à chaque clique sur le switch "semaine complete" ça continue de faire rouler ce compteur et le type d'equation evolue pour chaque ligne let mots3 = extractMotsMaj(monTexte); let nombreMotsGras3=mots3.length; document.querySelectorAll('.motJour').forEach(el => el.style.display = 'none'); document.querySelectorAll('.motN').forEach(el => el.style.display = 'none'); document.querySelectorAll('.motDuJour').forEach(el => el.style.display = 'inLine'); document.querySelectorAll('.numero').forEach(el => el.style.display = 'none'); if (nombreMotsGras3>1){ document.querySelectorAll('.motJour').forEach(el => el.style.display = 'inLine'); document.querySelectorAll('.motN').forEach(el => el.style.display = 'inLine'); document.querySelectorAll('.motDuJour').forEach(el => el.style.display = 'none'); document.querySelectorAll('.numero').forEach(el => el.style.display = 'inLine'); let toutesLesBoxes = grid.querySelectorAll('.box'); resolvedWords.selectedIndex= localStorage.getItem("MMDejaResolu"); let value2= parseInt(resolvedWords.value, 10); toutesLesBoxes.forEach((box, index) => { if (index == value2) { box.style.display = 'block'; } else { box.style.display = 'none'; } }); } if (modeEnfant==false){ let toutesLesBoxes = grid.querySelectorAll('.box'); toutesLesBoxes.forEach((box, index) => { box.style.display = 'block'; }); } if (modeEnfant==true){ document.querySelectorAll('.motJour').forEach(el => el.style.display = 'none'); document.querySelectorAll('.motN').forEach(el => el.style.display = 'none'); document.querySelectorAll('.motDuJour').forEach(el => el.style.display = 'inLine'); document.querySelectorAll('.numero').forEach(el => el.style.display = 'none'); } } // Fonction qui est appelé depuis le petit bouton "Voir la suite" dans la premiere box "A toi de jouer !" function btnGoMap(){ // toggleDock(); // window.scrollTo({ top: document.getElementById("containerLettre").offsetTop, behavior: "smooth" }); } // Comportement du switch : affiche une moitié différente des équations selon l’état du bouton : celle qui a été randomisée ou non randomSwitch.addEventListener("change", function () { if (randomSwitch.checked) { parcourirPremiereMoitié = false; afficherPhrase(monTexte, monNumero); localStorage.setItem("MMRandomSwitch", "true"); } else { parcourirPremiereMoitié = true; afficherPhrase(monTexte, monNumero); localStorage.setItem("MMRandomSwitch", "false"); } }); /* showJourSwitch.addEventListener("change", function () { cacherJours(); }); */ // Fonction qui génère une équation (addition, soustraction, multiplication, division...) selon les réglages actifs let choixCompteur=1; function creerEquation(val,posMot,posLettre) { posMot+=1; posLettre+=1; // Appel : eqElem.innerHTML = creerEquation(val,index,i); let typesDisponibles = reglages.filter(obj => obj.valeur).map(obj => obj.id); if (typesDisponibles.length === 0) { document.getElementById("equation").textContent = "Aucune opération activée."; return; } let choix=typesDisponibles[choixCompteur%(typesDisponibles.length)]; choixCompteur++; let a, b, c, d,e,f, res, eq, prem; switch (choix) { case "LectureDirecte": eq = `${val} →`; prem=val; res = alphabetFR[prem-1]; break; case "Add-TresSimple": if (val <= 10) { a = randFakeInt(1, val,posMot,posLettre,val); b = val - a; } else { a = (val <= 20) ? 10 : 10 * Math.floor(val / 10); b = val - a; } eq = `${a} + ${b} =`; res = val; prem=res; break; case "XXXplusYYYmoinsZZZ": a = randFakeInt(25, 499,posMot,posLettre,val); b = randFakeInt(25, 399,posMot,posLettre,val); c = a + b - val; eq = `${a} + ${b} - ${c} =`; res = a + b - c; prem=res; break; case "ZfoisXXmoinsYY": a = randFakeInt(11, 29,posMot,posLettre,val); b = randFakeInt(2, 9,posMot,posLettre,val); c = a * b - val; eq = `${a} × ${b} - ${c} =`; res = a * b - c; prem=res; break; case "ZZmoinsYY": c=70 - val; b = randFakeInt(1, c,posMot,posLettre,val); a = val + b; eq = `${a} - ${b} =`; res = val; prem=res; break; case "Sous-TresSimple": a = val < 10 ? 10 : val < 20 ? 20 : val < 30 ? 30 : val < 40 ? 40 : 50; b = a - val; eq = `${a} - ${b} =`; res = val; prem=res; break; case "DivisionPar2": a = val * 2; eq = `${a} ÷ 2 =`; res = val; prem=res; break; case "DivisionPar4": a = val * 4; eq = `${a} ÷ 4 =`; res = val; prem=res; break; case "DivisionPar10": a = val * 10; eq = `${a} ÷ 10 =`; res = val; prem=res; break; case "DivisionPar5": a = val * 5; eq = `${a} ÷ 5 =`; res = val; prem=res; break; case "DivisionPar3": a = val * 3; eq = `${a} ÷ 3 =`; res = val; prem=res; break; case "ZZfoisXXXmoinsYY": a = randFakeInt(11, 99,posMot,posLettre,val); b = randFakeInt(111, 999,posMot,posLettre,val); c = a * b - val; eq = `${a} × ${b} - ${c} =`; res = a * b - c; prem=res; break; } let letos = alphabetFR[prem-1]; // Lettre correspondant au résultat return `${letos} ${eq} ${res}`; } // Fonction utilitaire : renvoie un entier faussement aléatoire entre min et max let lastEquationKey = ""; let retryCount = 0; function randFakeInt(min, max, posMotRand, posLettreRand, val) { const primeA = 73856093; const primeB = 19349663; const primeC = 83492791; const range = max - min + 1; let a, b, seed, chaotic, key; do { // Création d'une clé unique pour la position et le retry key = `${posMotRand}_${posLettreRand}_${val}_${retryCount}`; // Graine basée sur position, val et tentative seed = ((posMotRand + 1 + retryCount) * primeA) ^ ((posLettreRand + 1 + retryCount) * primeB) ^ ((val + retryCount) * primeC); // Chaotique mais stable chaotic = Math.abs(Math.sin(seed) * 10000 + Math.cos(seed / 2) * 5000); a = Math.floor(chaotic % range) + min; b = val - a; // Vérifie si l'équation a changé const currentEquationKey = `${a}+${b}`; if (currentEquationKey !== lastEquationKey) { lastEquationKey = currentEquationKey; retryCount = 0; // Reset pour la prochaine fois break; } retryCount++; } while (retryCount < 10); // Limite de boucles return a; } // Fonction utilitaire : renvoie un entier aléatoire entre min et max function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function afficherLettresSpeciales() { lettresDiv.innerHTML=""; let texte2 = document.getElementById("customPhrase").value; let mots = extractMotsMaj(texte2); let mots2 = mots.join(""); for (let i = 0; i < 26; i++) { let lettre = String.fromCharCode(97 + i); lettresDiv.innerHTML += `${i + 1} ${lettre}
`; //lettresDiv.style.height="500px"; } let alphabetSpecial = "ÉÈÊÀÇÎÛÂÔËŒÆÏÖÙÄÜŸ'-"; // Tableau des lettres spéciales + numéros let tableauLettres = []; for (let i = 0; i < alphabetSpecial.length; i++) { let lettre = alphabetSpecial[i]; let numero = i + 27; // suite après ton alphabet standard tableauLettres.push({ numero, lettre }); } // Affichage uniquement des lettres présentes dans texte2 tableauLettres.forEach(item => { if (mots2.includes(item.lettre)) { lettresDiv.innerHTML += `${item.numero} ${item.lettre}
`; } }); } // Affichage initial let maPhraseInit=phrasesDico[monNumero - 1]; if (localStorage.getItem("MMPhrasePerso") === null) { maPhraseInit=phrasesDico[monNumero - 1]; }else{ maPhraseInit=localStorage.getItem("MMPhrasePerso"); } /////////// if (localStorage.getItem("MMRandomSwitch") === null) { parcourirPremiereMoitié = true; randomSwitch.checked=false; }else{ if (localStorage.getItem("MMRandomSwitch") =="true") { parcourirPremiereMoitié = false; randomSwitch.checked=true; } else{ parcourirPremiereMoitié = true; randomSwitch.checked=false; } } ////////// ////////// afficherPhrase( maPhraseInit, monNumero); document.getElementById("customPhrase").value=maPhraseInit; afficherLettresSpeciales(); desactiverOptions(); //// /// //// // --- MASQUER / AFFICHER OPTIONS ET PHRASE --- // Quand on clique sur le bouton "Niveau CP CM2..." btnVersParent.addEventListener("click", () => { setDockLogHeight("h2"); sameHeight.style.height = "200px"; // On masque la bannière du mode parent let storedCode = localStorage.getItem("MMCodeParent"); if (storedCode == null) { // la clé existe // Si c’est la première fois, on active les options directement window.scrollTo({ top: 0, behavior: 'smooth' }); activerOptions(); btnVersParent.style.display = "none"; btnVersEnfant.style.display = "block"; modeEnfant=false; afficherPhrase(monTexte,monNumero); } else { // Si cachecache est supérieur à 1, on affiche la confirmation du mode parent parentModeConfirmation.style.display = "block"; btnVersParent.style.display = "none"; } }); // Quand on clique sur le bouton "Parent" btnVersEnfant.addEventListener("click", () => { let storedCode = localStorage.getItem("MMCodeParent"); if (storedCode != null) { codeInput.value=storedCode; }// la clé existe // On affiche la confirmation pour passer en mode enfant setDockLogHeight("h3"); sameHeight.style.height = "250px"; setTimeout(() => { childModeConfirmation.style.display = "block"; }, 300); // délai en millisecondes btnVersEnfant.style.display = "none"; }); // Fonction pour activer toutes les options visibles en mode parent function detectMonoMot(){ let texte2 = document.getElementById("customPhrase").value; let mots2 = extractMotsMaj(texte2); let nombreMotsGras2=mots2.length; if (nombreMotsGras2<2){ document.getElementById("switchBlock").style.display = "none"; } else{ document.getElementById("switchBlock").style.display = "block"; } } function activerOptions() { localStorage.setItem("modeParentDejaVisited","true"); document.getElementById("sameHeight").style.display = "none"; document.getElementById("logoMM").style.display = "none"; document.getElementById("baseLineTitre").style.display = "none"; document.getElementById("changerCouleur").style.display = "none"; document.getElementById("printEnfant").style.display = "none"; zonePrint.style.display="block"; setDockLogHeight("h1"); sameHeight.style.height = "70px"; // Affichage des éléments de la phrase complète document.querySelectorAll('.mot').forEach(span => span.style.display = "inline"); document.getElementById("optionsBlock").style.display = "block"; document.getElementById("switchBlock").style.display = "block"; document.getElementById("switchBlock2").style.display = "block"; document.getElementById("infoPhrase").style.display = "block"; accordion1.style.display="block"; accordion2.style.display="block"; accordion3.style.display="block"; accordion4.style.display="block"; // On remplace la version mystère par la version complète document.getElementById("phraseMyst").style.display = "none"; document.getElementById("phrase").style.display = "block"; // On affiche le bouton de switch des options document.getElementById("switch-containerDiv").style.display = "block"; // Affichage des réponses et des lettres document.querySelectorAll('.reponse').forEach(span => span.style.display = "inline"); document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "inline"); document.querySelectorAll('.placeholderIntero').forEach(span => span.style.display = "none"); afficherPhrase(monTexte,monNumero); detectMonoMot(); } // Fonction pour désactiver les options visibles en mode enfant function desactiverOptions() { document.getElementById("logoMM").style.display = "block"; document.getElementById("baseLineTitre").style.display = "block"; setDockLogHeight("h0"); sameHeight.style.height = "0px"; zonePrint.style.display="none"; // Masquage des mots et options supplémentaires document.querySelectorAll('.mot').forEach(span => span.style.display = "none"); //document.querySelectorAll('.numero').forEach(span => span.style.display = "none"); document.getElementById("optionsBlock").style.display = "none"; document.getElementById("switchBlock").style.display = "none"; document.getElementById("switchBlock2").style.display = "none"; document.getElementById("infoPhrase").style.display = "none"; accordion1.style.display="none"; accordion2.style.display="none"; accordion3.style.display="none"; accordion4.style.display="none"; // On remet la version mystère de la phrase document.getElementById("phraseMyst").style.display = "block"; document.getElementById("phrase").style.display = "none"; // Masquage du conteneur de switch document.getElementById("switch-containerDiv").style.display = "none"; // Masquage des réponses et affichage des points d'interrogation document.querySelectorAll('.reponse').forEach(span => span.style.display = "none"); document.querySelectorAll('.lettreRep').forEach(span => span.style.display = "none"); document.querySelectorAll('.placeholderIntero').forEach(span => span.style.display = "inline"); } //////////////////////////// // Génération d’un code aléatoire à 3 chiffres // Confirmation du mode enfant (le parent entre le code) btnVersEnfantConfirm.addEventListener("click", () => { if (parseInt(codeInput.value) >= 0 && parseInt(codeInput.value) <= 9999) { // Si le code est bon, retour au mode enfant btnVersParent.style.display = "inLine-flex"; btnVersEnfant.style.display = "none"; childModeConfirmation.style.display = "none"; modeEnfant=true; btnVersParent.innerHTML = "settings"; btnVersParent.style.padding = "20px 20px 20px 20px"; document.getElementById("printEnfant").style.display = "inLine-flex"; document.getElementById("changerCouleur").style.display = "inLine-flex"; desactiverOptions(); afficherPhrase(monTexte,monNumero); localStorage.setItem("MMCodeParent", codeInput.value); } }); // Annulation du passage au mode enfant btnVersEnfantCancel.addEventListener("click", () => { btnVersEnfant.style.display = "block"; childModeConfirmation.style.display = "none"; setDockLogHeight("h1"); }); // Annulation du passage au mode enfant effaceTexte.addEventListener("click", () => { customPhrase.value=''; }); // Confirmation du mode parent (l’adulte entre le code) btnVersParentCodeConfirm.addEventListener("click", () => { let storedCode = localStorage.getItem("MMCodeParent"); if (storedCode !== null) { // la clé existe const codeFromStorage = parseInt(storedCode); const codeFromInput = parseInt(codeAskedInput.value); if (!isNaN(codeFromInput) && codeFromInput === codeFromStorage) { // ✅ Les deux codes sont identiques console.log("Code correct !"); // Si le code est bon, on active les options parent modeEnfant=false; parentModeConfirmation.style.display = "none"; activerOptions(); btnVersEnfant.style.display = "block"; codeAskedInput.value = ""; // Remonte en haut de la page window.scrollTo({ top: 0, behavior: 'smooth' }); } else { alert("Code incorrect !"); } } else{ modeEnfant=false; parentModeConfirmation.style.display = "none"; activerOptions(); btnVersEnfant.style.display = "block"; codeAskedInput.value = ""; // Remonte en haut de la page window.scrollTo({ top: 0, behavior: 'smooth' }); } }); const codeAskedInput = document.getElementById('codeAskedInput'); const eye = document.getElementById('toggleEye'); eye.addEventListener('mousedown', () => { codeAskedInput.type = 'text'; // affiche le code }); eye.addEventListener('mouseup', () => { codeAskedInput.type = 'password'; // masque le code à nouveau }); eye.addEventListener('mouseleave', () => { codeAskedInput.type = 'password'; // masque si la souris sort du bouton }); // Annulation du passage au mode parent btnVersParentCodeCancel.addEventListener("click", () => { setDockLogHeight("h0"); sameHeight.style.height="0px"; parentModeConfirmation.style.display = "none"; btnVersParent.style.display = "inLine-flex"; codeAskedInput.value = ""; }); ///// function printA4Grid() { const gridSize = 11; // mm const lineColor = '#bbbbbb'; const footerText = 'WWW.MATHSMYSTERE.FR • CHAQUE JOUR UN MOT MYSTÈRE, ÇA REND LES MATHS PLUS CLAIRS !'; const mmToPx = mm => (mm * 96) / 25.4; const widthPx = mmToPx(210); const heightPx = mmToPx(297); const step = mmToPx(gridSize); // Génération d’un SVG pur let svg = ` `; for (let x = 0.5; x < widthPx; x += step) { svg += ``; } for (let y = 0.5; y < heightPx; y += step) { svg += ``; } svg += `${footerText}`; svg += ``; // Encodage en Data URI (une seule image) const dataUri = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))); // HTML minimal à imprimer const html = ` Feuille à gros carreaux Grille A4