Jeu de Mots Fl\u00e9ch\u00e9s<\/title>\n<style>\n body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; background-color: #eaf2f8; }\n h1 { margin-bottom: 15px; color: #2c3e50; }\n .grid { display: grid; gap: 3px; margin-bottom: 20px; }\n .cell { width: 40px; height: 40px; text-align: center; font-size: 20px; text-transform: uppercase; border: 1px solid #ccc; background-color: #ffffff; display: flex; align-items: center; justify-content: center; border-radius: 5px; transition: background-color 0.3s, border-color 0.3s; }\n .cell.correct { background-color: #d0f0c0; border-color: #27ae60; }\n .cell.wrong { background-color: #f8d7da; border-color: #c0392b; }\n .cell input { width: 100%; height: 100%; text-align: center; border: none; font-size: 20px; text-transform: uppercase; outline: none; background: transparent; }\n .definition { margin: 5px 0; font-size: 15px; color: #34495e; }\n button { padding: 12px 25px; font-size: 16px; margin: 5px; cursor: pointer; border: none; background-color: #2980b9; color: #fff; border-radius: 8px; transition: background-color 0.3s; }\n button:hover { background-color: #1f618d; }\n .footer { margin-top: 25px; font-size: 14px; color: #7f8c8d; }\n<\/style>\n<\/head>\n<body>\n<h1>Jeu de Mots Fl\u00e9ch\u00e9s<\/h1>\n<div id=\"game\"><\/div>\n<button onclick=\"checkAnswers()\">V\u00e9rifier les r\u00e9ponses<\/button>\n<button onclick=\"nextLevel()\">Niveau Suivant<\/button>\n<div class=\"footer\">cr\u00e9\u00e9 par Guido SAVERIO<\/div>\n\n<script>\nconst levels = [\n { size: 8, words: [ {word: 'BANANA', x: 0, y: 1, direction: 'horizontal', clue: 'Fruit jaune'}, {word: 'DOG', x: 0, y: 1, direction: 'vertical', clue: 'Animal qui aboie'} ] },\n { size: 10, words: [ {word: 'PARIS', x: 1, y: 0, direction: 'horizontal', clue: 'Capitale de la France'}, {word: 'BLUE', x: 2, y: 3, direction: 'vertical', clue: 'Couleur du ciel'} ] },\n { size: 12, words: [ {word: 'VIOLON', x: 3, y: 2, direction: 'horizontal', clue: 'Instrument \u00e0 cordes'}, {word: 'MARS', x: 1, y: 0, direction: 'vertical', clue: 'Plan\u00e8te rouge'} ] }\n];\n\nlet currentLevel = 0;\n\nfunction createGrid(level) {\n const gameDiv = document.getElementById('game');\n gameDiv.innerHTML = '';\n\n const size = level.size;\n const grid = document.createElement('div');\n grid.className = 'grid';\n grid.style.gridTemplateColumns = `repeat(${size}, 40px)`;\n grid.style.gridTemplateRows = `repeat(${size}, 40px)`;\n\n let cells = [];\n for (let y = 0; y < size; y++) {\n for (let x = 0; x < size; x++) {\n const cell = document.createElement('div');\n cell.className = 'cell';\n const input = document.createElement('input');\n input.maxLength = 1;\n cell.appendChild(input);\n grid.appendChild(cell);\n cells.push({element: input, x, y, parent: cell});\n }\n }\n\n level.words.forEach(w => {\n for (let i = 0; i < w.word.length; i++) {\n let cell;\n if (w.direction === 'horizontal') {\n cell = cells.find(c => c.x === w.x + i && c.y === w.y);\n } else {\n cell = cells.find(c => c.x === w.x && c.y === w.y + i);\n }\n if (cell) cell.parent.correct = w.word[i].toUpperCase();\n }\n });\n\n gameDiv.appendChild(grid);\n\n level.words.forEach((w, idx) => {\n const clueDiv = document.createElement('div');\n clueDiv.className = 'definition';\n clueDiv.textContent = `${w.direction.toUpperCase()} ${idx+1}: ${w.clue}`;\n gameDiv.appendChild(clueDiv);\n });\n}\n\nfunction checkAnswers() {\n const inputs = document.querySelectorAll('.cell');\n let allCorrect = true;\n\n inputs.forEach(cell => {\n const input = cell.querySelector('input');\n if (cell.correct) {\n if (input.value.toUpperCase() === cell.correct) {\n cell.classList.add('correct');\n cell.classList.remove('wrong');\n } else {\n cell.classList.add('wrong');\n cell.classList.remove('correct');\n allCorrect = false;\n }\n }\n });\n\n if (allCorrect) alert('Bravo ! Vous avez compl\u00e9t\u00e9 le niveau.');\n else alert('Certaines r\u00e9ponses sont incorrectes. Continuez !');\n}\n\nfunction nextLevel() {\n if (currentLevel < levels.length - 1) {\n currentLevel++;\n createGrid(levels[currentLevel]);\n } else {\n alert('F\u00e9licitations ! Vous avez termin\u00e9 tous les niveaux.');\n }\n}\n\ncreateGrid(levels[currentLevel]);\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Jeu de Mots Fl\u00e9ch\u00e9s Jeu de Mots Fl\u00e9ch\u00e9s V\u00e9rifier les r\u00e9ponses Niveau Suivant cr\u00e9\u00e9 par Guido SAVERIO<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1880","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/comments?post=1880"}],"version-history":[{"count":7,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1880\/revisions"}],"predecessor-version":[{"id":1890,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1880\/revisions\/1890"}],"wp:attachment":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/media?parent=1880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1880,"date":"2025-12-06T13:51:36","date_gmt":"2025-12-06T13:51:36","guid":{"rendered":"https:\/\/clubvivremieux.com\/?page_id=1880"},"modified":"2025-12-06T14:17:16","modified_gmt":"2025-12-06T14:17:16","slug":"jeu-de-mots-fleches","status":"publish","type":"page","link":"https:\/\/clubvivremieux.com\/index.php\/jeu-de-mots-fleches\/","title":{"rendered":"Jeu de Mots Fl\u00e9ch\u00e9s"},"content":{"rendered":"\n\n\n\n\n\nJeu de Mots Fl\u00e9ch\u00e9s<\/title>\n<style>\n body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; background-color: #eaf2f8; }\n h1 { margin-bottom: 15px; color: #2c3e50; }\n .grid { display: grid; gap: 3px; margin-bottom: 20px; }\n .cell { width: 40px; height: 40px; text-align: center; font-size: 20px; text-transform: uppercase; border: 1px solid #ccc; background-color: #ffffff; display: flex; align-items: center; justify-content: center; border-radius: 5px; transition: background-color 0.3s, border-color 0.3s; }\n .cell.correct { background-color: #d0f0c0; border-color: #27ae60; }\n .cell.wrong { background-color: #f8d7da; border-color: #c0392b; }\n .cell input { width: 100%; height: 100%; text-align: center; border: none; font-size: 20px; text-transform: uppercase; outline: none; background: transparent; }\n .definition { margin: 5px 0; font-size: 15px; color: #34495e; }\n button { padding: 12px 25px; font-size: 16px; margin: 5px; cursor: pointer; border: none; background-color: #2980b9; color: #fff; border-radius: 8px; transition: background-color 0.3s; }\n button:hover { background-color: #1f618d; }\n .footer { margin-top: 25px; font-size: 14px; color: #7f8c8d; }\n<\/style>\n<\/head>\n<body>\n<h1>Jeu de Mots Fl\u00e9ch\u00e9s<\/h1>\n<div id=\"game\"><\/div>\n<button onclick=\"checkAnswers()\">V\u00e9rifier les r\u00e9ponses<\/button>\n<button onclick=\"nextLevel()\">Niveau Suivant<\/button>\n<div class=\"footer\">cr\u00e9\u00e9 par Guido SAVERIO<\/div>\n\n<script>\nconst levels = [\n { size: 8, words: [ {word: 'BANANA', x: 0, y: 1, direction: 'horizontal', clue: 'Fruit jaune'}, {word: 'DOG', x: 0, y: 1, direction: 'vertical', clue: 'Animal qui aboie'} ] },\n { size: 10, words: [ {word: 'PARIS', x: 1, y: 0, direction: 'horizontal', clue: 'Capitale de la France'}, {word: 'BLUE', x: 2, y: 3, direction: 'vertical', clue: 'Couleur du ciel'} ] },\n { size: 12, words: [ {word: 'VIOLON', x: 3, y: 2, direction: 'horizontal', clue: 'Instrument \u00e0 cordes'}, {word: 'MARS', x: 1, y: 0, direction: 'vertical', clue: 'Plan\u00e8te rouge'} ] }\n];\n\nlet currentLevel = 0;\n\nfunction createGrid(level) {\n const gameDiv = document.getElementById('game');\n gameDiv.innerHTML = '';\n\n const size = level.size;\n const grid = document.createElement('div');\n grid.className = 'grid';\n grid.style.gridTemplateColumns = `repeat(${size}, 40px)`;\n grid.style.gridTemplateRows = `repeat(${size}, 40px)`;\n\n let cells = [];\n for (let y = 0; y < size; y++) {\n for (let x = 0; x < size; x++) {\n const cell = document.createElement('div');\n cell.className = 'cell';\n const input = document.createElement('input');\n input.maxLength = 1;\n cell.appendChild(input);\n grid.appendChild(cell);\n cells.push({element: input, x, y, parent: cell});\n }\n }\n\n level.words.forEach(w => {\n for (let i = 0; i < w.word.length; i++) {\n let cell;\n if (w.direction === 'horizontal') {\n cell = cells.find(c => c.x === w.x + i && c.y === w.y);\n } else {\n cell = cells.find(c => c.x === w.x && c.y === w.y + i);\n }\n if (cell) cell.parent.correct = w.word[i].toUpperCase();\n }\n });\n\n gameDiv.appendChild(grid);\n\n level.words.forEach((w, idx) => {\n const clueDiv = document.createElement('div');\n clueDiv.className = 'definition';\n clueDiv.textContent = `${w.direction.toUpperCase()} ${idx+1}: ${w.clue}`;\n gameDiv.appendChild(clueDiv);\n });\n}\n\nfunction checkAnswers() {\n const inputs = document.querySelectorAll('.cell');\n let allCorrect = true;\n\n inputs.forEach(cell => {\n const input = cell.querySelector('input');\n if (cell.correct) {\n if (input.value.toUpperCase() === cell.correct) {\n cell.classList.add('correct');\n cell.classList.remove('wrong');\n } else {\n cell.classList.add('wrong');\n cell.classList.remove('correct');\n allCorrect = false;\n }\n }\n });\n\n if (allCorrect) alert('Bravo ! Vous avez compl\u00e9t\u00e9 le niveau.');\n else alert('Certaines r\u00e9ponses sont incorrectes. Continuez !');\n}\n\nfunction nextLevel() {\n if (currentLevel < levels.length - 1) {\n currentLevel++;\n createGrid(levels[currentLevel]);\n } else {\n alert('F\u00e9licitations ! Vous avez termin\u00e9 tous les niveaux.');\n }\n}\n\ncreateGrid(levels[currentLevel]);\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Jeu de Mots Fl\u00e9ch\u00e9s Jeu de Mots Fl\u00e9ch\u00e9s V\u00e9rifier les r\u00e9ponses Niveau Suivant cr\u00e9\u00e9 par Guido SAVERIO<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1880","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/comments?post=1880"}],"version-history":[{"count":7,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1880\/revisions"}],"predecessor-version":[{"id":1890,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1880\/revisions\/1890"}],"wp:attachment":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/media?parent=1880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}