Le D\u00e9fi des Aventuriers<\/title>\n<style>\n body { font-family: 'Arial', sans-serif; margin: 0; background: #f4f4f4; color: #000; }\n header { background: linear-gradient(135deg, #4a90e2, #9013fe); padding: 20px; color: white; text-align: center; }\n #gameContainer { max-width: 900px; margin: 20px auto; background: white; padding: 20px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }\n #board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 20px; }\n .cell { background: #e0e0e0; border-radius: 10px; padding: 20px; text-align: center; font-weight: bold; }\n #player { background: #4a90e2; color: white; border-radius: 50%; width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; margin: auto; animation: pulse 1s infinite; }\n @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }\n #eventBox { margin-top: 20px; padding: 20px; background: #fafafa; border-radius: 10px; }\n button { background: #9013fe; border: none; padding: 12px 20px; color: white; border-radius: 10px; cursor: pointer; margin-top: 10px; }\n button:hover { background: #4a90e2; }\n #progressBar { width: 100%; background: #ddd; border-radius: 10px; margin-top: 20px; }\n #progress { height: 15px; width: 0%; background: linear-gradient(135deg, #4a90e2, #9013fe); border-radius: 10px; }\n<\/style>\n<\/head>\n<body>\n<header>\n <h1>Le D\u00e9fi des Aventuriers<\/h1>\n <p>Mini-jeu narratif avec quiz, bonus\/malus et certificat final<\/p>\n<\/header>\n<div id=\"gameContainer\">\n <div id=\"progressBar\"><div id=\"progress\"><\/div><\/div>\n <button id=\"rollBtn\">Lancer le d\u00e9<\/button>\n <div id=\"board\"><\/div>\n <div id=\"eventBox\"><\/div>\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n<script>\nconst board = document.getElementById('board');\nconst eventBox = document.getElementById('eventBox');\nconst progress = document.getElementById('progress');\nlet position = 0;\nlet score = 0;\nconst totalCells = 18;\n\nfunction drawBoard() {\n board.innerHTML = '';\n for (let i = 0; i < totalCells; i++) {\n const cell = document.createElement('div');\n cell.className = 'cell';\n cell.innerHTML = i === position ? '<div id=\"player\">P<\/div>' : i+1;\n board.appendChild(cell);\n }\n}\n\ndrawBoard();\n\nconst events = [\n { type: 'quiz', q: 'Combien font 2+2 ?', a: '4' },\n { type: 'quiz', q: 'Capitale de la France ?', a: 'Paris' },\n { type: 'bonus', text: '+1 point bonus !', val: 1 },\n { type: 'malus', text: 'Oops -1 point...', val: -1 },\n { type: 'story', text: 'Vous trouvez un coffre myst\u00e9rieux...' }\n];\n\nfunction handleEvent() {\n const ev = events[Math.floor(Math.random() * events.length)];\n if (ev.type === 'quiz') {\n eventBox.innerHTML = `<p><strong>Quiz :<\/strong> ${ev.q}<\/p>\n <input id='answer' \/> <button onclick='checkQuiz(\"${ev.a}\")'>Valider<\/button>`;\n } else if (ev.type === 'bonus' || ev.type === 'malus') {\n score += ev.val;\n eventBox.innerHTML = `<p>${ev.text}<\/p><p>Score : ${score}<\/p>`;\n } else {\n eventBox.innerHTML = `<p>${ev.text}<\/p>`;\n }\n}\n\nfunction checkQuiz(rep) {\n const val = document.getElementById('answer').value;\n if (val.toLowerCase() === rep.toLowerCase()) score++;\n eventBox.innerHTML = `<p>Score : ${score}<\/p>`;\n}\n\ndocument.getElementById('rollBtn').onclick = () => {\n const step = Math.ceil(Math.random() * 3);\n position += step;\n if (position >= totalCells) {\n position = totalCells;\n showCertificate();\n return;\n }\n drawBoard();\n progress.style.width = (position \/ totalCells * 100) + '%';\n handleEvent();\n};\n\nfunction showCertificate() {\n eventBox.innerHTML = `<h2>\ud83c\udf89 Fin du jeu !<\/h2>\n <p>Votre score : ${score}<\/p>\n <button onclick='generatePDF()'>T\u00e9l\u00e9charger le certificat PDF<\/button>`;\n}\n\nfunction generatePDF() {\n const { jsPDF } = window.jspdf;\n const doc = new jsPDF();\n doc.setFontSize(22);\n doc.text(\"Certificat - Le D\u00e9fi des Aventuriers\", 20, 30);\n doc.setFontSize(16);\n doc.text(`Site : ${location.hostname}`, 20, 50);\n doc.text(`Date : ${new Date().toLocaleDateString()}`, 20, 60);\n doc.text(`Score final : ${score}`, 20, 70);\n doc.text(`Cr\u00e9\u00e9 par Guido SAVERIO`, 20, 90);\n doc.save(\"certificat-aventuriers.pdf\");\n}\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Mini-jeu narratif avec quiz, bonus\/malus et certificat final Le D\u00e9fi des Aventuriers Le D\u00e9fi des Aventuriers Mini-jeu narratif avec quiz, bonus\/malus et certificat final Lancer le d\u00e9<\/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-1784","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1784","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=1784"}],"version-history":[{"count":3,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1784\/revisions"}],"predecessor-version":[{"id":1787,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1784\/revisions\/1787"}],"wp:attachment":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/media?parent=1784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1784,"date":"2025-12-04T22:47:12","date_gmt":"2025-12-04T22:47:12","guid":{"rendered":"https:\/\/clubvivremieux.com\/?page_id=1784"},"modified":"2025-12-04T22:55:08","modified_gmt":"2025-12-04T22:55:08","slug":"1784-2","status":"publish","type":"page","link":"https:\/\/clubvivremieux.com\/index.php\/1784-2\/","title":{"rendered":"Le D\u00e9fi des Aventuriers"},"content":{"rendered":"\n

Mini-jeu narratif avec quiz, bonus\/malus et certificat final<\/p>\n\n\n\n\n\n\n\n\nLe D\u00e9fi des Aventuriers<\/title>\n<style>\n body { font-family: 'Arial', sans-serif; margin: 0; background: #f4f4f4; color: #000; }\n header { background: linear-gradient(135deg, #4a90e2, #9013fe); padding: 20px; color: white; text-align: center; }\n #gameContainer { max-width: 900px; margin: 20px auto; background: white; padding: 20px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }\n #board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 20px; }\n .cell { background: #e0e0e0; border-radius: 10px; padding: 20px; text-align: center; font-weight: bold; }\n #player { background: #4a90e2; color: white; border-radius: 50%; width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; margin: auto; animation: pulse 1s infinite; }\n @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }\n #eventBox { margin-top: 20px; padding: 20px; background: #fafafa; border-radius: 10px; }\n button { background: #9013fe; border: none; padding: 12px 20px; color: white; border-radius: 10px; cursor: pointer; margin-top: 10px; }\n button:hover { background: #4a90e2; }\n #progressBar { width: 100%; background: #ddd; border-radius: 10px; margin-top: 20px; }\n #progress { height: 15px; width: 0%; background: linear-gradient(135deg, #4a90e2, #9013fe); border-radius: 10px; }\n<\/style>\n<\/head>\n<body>\n<header>\n <h1>Le D\u00e9fi des Aventuriers<\/h1>\n <p>Mini-jeu narratif avec quiz, bonus\/malus et certificat final<\/p>\n<\/header>\n<div id=\"gameContainer\">\n <div id=\"progressBar\"><div id=\"progress\"><\/div><\/div>\n <button id=\"rollBtn\">Lancer le d\u00e9<\/button>\n <div id=\"board\"><\/div>\n <div id=\"eventBox\"><\/div>\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n<script>\nconst board = document.getElementById('board');\nconst eventBox = document.getElementById('eventBox');\nconst progress = document.getElementById('progress');\nlet position = 0;\nlet score = 0;\nconst totalCells = 18;\n\nfunction drawBoard() {\n board.innerHTML = '';\n for (let i = 0; i < totalCells; i++) {\n const cell = document.createElement('div');\n cell.className = 'cell';\n cell.innerHTML = i === position ? '<div id=\"player\">P<\/div>' : i+1;\n board.appendChild(cell);\n }\n}\n\ndrawBoard();\n\nconst events = [\n { type: 'quiz', q: 'Combien font 2+2 ?', a: '4' },\n { type: 'quiz', q: 'Capitale de la France ?', a: 'Paris' },\n { type: 'bonus', text: '+1 point bonus !', val: 1 },\n { type: 'malus', text: 'Oops -1 point...', val: -1 },\n { type: 'story', text: 'Vous trouvez un coffre myst\u00e9rieux...' }\n];\n\nfunction handleEvent() {\n const ev = events[Math.floor(Math.random() * events.length)];\n if (ev.type === 'quiz') {\n eventBox.innerHTML = `<p><strong>Quiz :<\/strong> ${ev.q}<\/p>\n <input id='answer' \/> <button onclick='checkQuiz(\"${ev.a}\")'>Valider<\/button>`;\n } else if (ev.type === 'bonus' || ev.type === 'malus') {\n score += ev.val;\n eventBox.innerHTML = `<p>${ev.text}<\/p><p>Score : ${score}<\/p>`;\n } else {\n eventBox.innerHTML = `<p>${ev.text}<\/p>`;\n }\n}\n\nfunction checkQuiz(rep) {\n const val = document.getElementById('answer').value;\n if (val.toLowerCase() === rep.toLowerCase()) score++;\n eventBox.innerHTML = `<p>Score : ${score}<\/p>`;\n}\n\ndocument.getElementById('rollBtn').onclick = () => {\n const step = Math.ceil(Math.random() * 3);\n position += step;\n if (position >= totalCells) {\n position = totalCells;\n showCertificate();\n return;\n }\n drawBoard();\n progress.style.width = (position \/ totalCells * 100) + '%';\n handleEvent();\n};\n\nfunction showCertificate() {\n eventBox.innerHTML = `<h2>\ud83c\udf89 Fin du jeu !<\/h2>\n <p>Votre score : ${score}<\/p>\n <button onclick='generatePDF()'>T\u00e9l\u00e9charger le certificat PDF<\/button>`;\n}\n\nfunction generatePDF() {\n const { jsPDF } = window.jspdf;\n const doc = new jsPDF();\n doc.setFontSize(22);\n doc.text(\"Certificat - Le D\u00e9fi des Aventuriers\", 20, 30);\n doc.setFontSize(16);\n doc.text(`Site : ${location.hostname}`, 20, 50);\n doc.text(`Date : ${new Date().toLocaleDateString()}`, 20, 60);\n doc.text(`Score final : ${score}`, 20, 70);\n doc.text(`Cr\u00e9\u00e9 par Guido SAVERIO`, 20, 90);\n doc.save(\"certificat-aventuriers.pdf\");\n}\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Mini-jeu narratif avec quiz, bonus\/malus et certificat final Le D\u00e9fi des Aventuriers Le D\u00e9fi des Aventuriers Mini-jeu narratif avec quiz, bonus\/malus et certificat final Lancer le d\u00e9<\/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-1784","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1784","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=1784"}],"version-history":[{"count":3,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1784\/revisions"}],"predecessor-version":[{"id":1787,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1784\/revisions\/1787"}],"wp:attachment":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/media?parent=1784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}