{"id":1309,"date":"2025-11-29T21:39:20","date_gmt":"2025-11-29T21:39:20","guid":{"rendered":"https:\/\/clubvivremieux.com\/?page_id=1309"},"modified":"2025-11-29T21:49:48","modified_gmt":"2025-11-29T21:49:48","slug":"quel-type-de-personnalite-moderne-es-tu","status":"publish","type":"page","link":"https:\/\/clubvivremieux.com\/index.php\/quel-type-de-personnalite-moderne-es-tu\/","title":{"rendered":"Quel type de personnalit\u00e9 moderne es-tu ?"},"content":{"rendered":"\n<!-- Chart.js CDN -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n<style>\n\/* ================== THEME AM\u00c9LIOR\u00c9 ================== *\/\n:root {\n  --primary-color: #0077cc; \/* Bouton bleu fonc\u00e9 *\/\n  --primary-hover: #005fa3; \/* Bouton hover *\/\n  --secondary-color: #36a2eb;\n  --accent-color: #ffcd56;\n  --bg-gradient-start: #f5f7fa;\n  --bg-gradient-end: #e0eafc;\n  --text-color: #111; \/* Texte tr\u00e8s lisible *\/\n  --font-heading: 'Playfair Display', serif;\n  --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\nbody {\n  font-family: var(--font-body);\n  background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));\n  display: flex;\n  justify-content: center;\n  padding: 30px;\n}\n\n#quiz {\n  background: #fff;\n  border-radius: 25px;\n  padding: 40px 50px;\n  max-width: 680px;\n  width: 100%;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n  transition: all 0.5s ease;\n}\n\n#quiz h2 {\n  text-align: center;\n  font-family: var(--font-heading);\n  color: var(--text-color);\n  margin-bottom: 25px;\n  font-size: 28px;\n}\n\n#quiz h3 {\n  color: var(--text-color);\n  margin-bottom: 20px;\n  opacity: 0;\n  transition: opacity 0.5s ease;\n  font-size: 20px;\n}\n\n.answer-btn {\n  display: block;\n  width: 100%;\n  background: var(--primary-color);\n  color: #fff;\n  border: none;\n  padding: 15px;\n  margin-bottom: 15px;\n  border-radius: 15px;\n  cursor: pointer;\n  font-size: 16px;\n  font-weight: bold;\n  transition: all 0.3s;\n  box-shadow: 0 8px 15px rgba(0,0,0,0.15);\n}\n.answer-btn:hover {\n  transform: translateY(-2px) scale(1.03);\n  background: var(--primary-hover);\n}\n\n#result {\n  text-align: center;\n  font-size: 18px;\n  padding: 30px;\n  border-radius: 18px;\n  background: #f0f4f8;\n  color: var(--text-color);\n  margin-top: 25px;\n  opacity: 0;\n  transition: opacity 0.5s ease;\n  font-family: var(--font-body);\n}\n\n#chart-container {\n  width: 100%;\n  margin-top: 25px;\n  opacity: 0;\n  transition: opacity 0.5s ease;\n}\n\n.share-buttons {\n  margin-top: 25px;\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.share-btn {\n  padding: 12px 18px;\n  border-radius: 12px;\n  text-decoration: none;\n  color: #fff;\n  font-weight: bold;\n  transition: transform 0.2s;\n  font-size: 14px;\n}\n.share-btn:hover { transform: scale(1.08); }\n.fb { background: #3b5998; }\n.tw { background: #1da1f2; }\n.wa { background: #25d366; }\n\n@media (max-width: 680px) {\n  #quiz { padding: 25px 30px; }\n  .answer-btn { font-size: 14px; padding: 12px; }\n  #quiz h2 { font-size: 24px; }\n  #quiz h3 { font-size: 18px; }\n  .share-buttons { flex-direction: column; gap: 8px; }\n}\n<\/style>\n\n<div id=\"quiz\">\n  <h2>Quel type de personnalit\u00e9 moderne es-tu ?<\/h2>\n  <div id=\"question-container\"><\/div>\n  <div id=\"result\" style=\"display:none;\"><\/div>\n  <div id=\"chart-container\" style=\"display:none;\">\n    <canvas id=\"scoreChart\"><\/canvas>\n  <\/div>\n<\/div>\n\n<script>\nconst questions = [\n  { question: \"Quand tu passes du temps en ligne, tu pr\u00e9f\u00e8res :\", answers:[\n    { text: \"Poster et interagir avec ton r\u00e9seau\", type: \"Influenceur\" },\n    { text: \"Cr\u00e9er du contenu original\", type: \"Cr\u00e9atif\" },\n    { text: \"Planifier et organiser tes t\u00e2ches\", type: \"Strat\u00e8ge\" },\n    { text: \"Consommer s\u00e9lectivement, \u00e9viter le superflu\", type: \"Minimaliste\" }\n  ]},\n  { question: \"Ton outil digital pr\u00e9f\u00e9r\u00e9 :\", answers:[\n    { text: \"Instagram\/TikTok\", type: \"Influenceur\" },\n    { text: \"Canva\/Adobe\", type: \"Cr\u00e9atif\" },\n    { text: \"Trello\/Notion\", type: \"Strat\u00e8ge\" },\n    { text: \"Kindle\/Pocket\", type: \"Minimaliste\" }\n  ]},\n  { question: \"Lors d\u2019une r\u00e9union virtuelle :\", answers:[\n    { text: \"Tu interagis et motives les autres\", type: \"Influenceur\" },\n    { text: \"Tu proposes des id\u00e9es nouvelles\", type: \"Cr\u00e9atif\" },\n    { text: \"Tu g\u00e8res le planning et la productivit\u00e9\", type: \"Strat\u00e8ge\" },\n    { text: \"Tu \u00e9coutes, participes quand n\u00e9cessaire\", type: \"Minimaliste\" }\n  ]},\n  { question: \"Comment g\u00e8res-tu ton temps sur les r\u00e9seaux sociaux ?\", answers:[\n    { text: \"Je suis tr\u00e8s actif et poste r\u00e9guli\u00e8rement\", type: \"Influenceur\" },\n    { text: \"Je l\u2019utilise pour m\u2019inspirer et cr\u00e9er\", type: \"Cr\u00e9atif\" },\n    { text: \"Je planifie mes sessions et je reste productif\", type: \"Strat\u00e8ge\" },\n    { text: \"Je limite mon usage au strict n\u00e9cessaire\", type: \"Minimaliste\" }\n  ]},\n  { question: \"Quelle est ta priorit\u00e9 dans le travail collaboratif ?\", answers:[\n    { text: \"Motiver et engager les membres de l\u2019\u00e9quipe\", type: \"Influenceur\" },\n    { text: \"Apporter des id\u00e9es cr\u00e9atives et innovantes\", type: \"Cr\u00e9atif\" },\n    { text: \"Organiser et optimiser le processus\", type: \"Strat\u00e8ge\" },\n    { text: \"Pr\u00e9server un environnement simple et efficace\", type: \"Minimaliste\" }\n  ]}\n];\n\nlet currentQuestion = 0;\nconst scores = { \"Influenceur\":0, \"Cr\u00e9atif\":0, \"Strat\u00e8ge\":0, \"Minimaliste\":0 };\n\nfunction showQuestion() {\n  const container = document.getElementById(\"question-container\");\n  container.style.opacity = 0;\n  setTimeout(() => {\n    container.innerHTML = \"\";\n    const q = questions[currentQuestion];\n    const qElem = document.createElement(\"h3\");\n    qElem.textContent = q.question;\n    container.appendChild(qElem);\n    setTimeout(() => { qElem.style.opacity = 1; }, 50);\n\n    q.answers.forEach(ans => {\n      const btn = document.createElement(\"button\");\n      btn.textContent = ans.text;\n      btn.className = \"answer-btn\";\n      btn.onclick = () => {\n        scores[ans.type]++;\n        currentQuestion++;\n        if(currentQuestion < questions.length) showQuestion();\n        else showResult();\n      };\n      container.appendChild(btn);\n    });\n    container.style.opacity = 1;\n  }, 300);\n}\n\nfunction showResult(){\n  const container = document.getElementById(\"question-container\");\n  container.style.opacity = 0;\n\n  setTimeout(() => {\n    container.style.display = \"none\";\n    const resultDiv = document.getElementById(\"result\");\n    resultDiv.style.display = \"block\";\n    const chartContainer = document.getElementById(\"chart-container\");\n    chartContainer.style.display = \"block\";\n\n    const maxScore = Math.max(...Object.values(scores));\n    const topTypes = Object.keys(scores).filter(k => scores[k] === maxScore);\n    const topType = topTypes[0];\n\n    let description = \"\";\n    switch(topType){\n      case \"Influenceur\": description = \"Influenceur Connect\u00e9 : Toujours \u00e0 l\u2019aff\u00fbt des tendances et tu inspires ton r\u00e9seau par ton activit\u00e9 digitale.\"; break;\n      case \"Cr\u00e9atif\": description = \"Cr\u00e9atif Digital : Passionn\u00e9 par l\u2019innovation, tu explores et cr\u00e9es constamment de nouvelles id\u00e9es.\"; break;\n      case \"Strat\u00e8ge\": description = \"Strat\u00e8ge Productif : Organis\u00e9 et efficace, tu excelles dans le travail collaboratif en ligne.\"; break;\n      case \"Minimaliste\": description = \"Minimaliste Num\u00e9rique : Tu privil\u00e9gies la qualit\u00e9 sur la quantit\u00e9 et recherches un \u00e9quilibre sain avec la technologie.\"; break;\n    }\n\n    resultDiv.innerHTML = `<strong>${topType}<\/strong><br>${description}`;\n    setTimeout(() => { resultDiv.style.opacity = 1; }, 50);\n\n    \/\/ Graphique anim\u00e9\n    const ctx = document.getElementById('scoreChart').getContext('2d');\n    new Chart(ctx, {\n      type: 'bar',\n      data: {\n        labels: Object.keys(scores),\n        datasets: [{\n          label: 'Score par cat\u00e9gorie',\n          data: Object.values(scores),\n          backgroundColor: ['#0077cc','#36a2eb','#ffcd56','#4bc0c0'],\n          borderRadius: 8\n        }]\n      },\n      options: {\n        responsive: true,\n        animation: { duration: 1200 },\n        plugins: { legend: { display: false } },\n        scales: { y: { beginAtZero: true, precision:0 } }\n      }\n    });\n    setTimeout(() => { chartContainer.style.opacity = 1; }, 300);\n\n    \/\/ Partage social\n    const shareText = encodeURIComponent(`Je suis un ${topType} ! D\u00e9couvrez votre type de personnalit\u00e9 moderne ici :`);\n    const pageUrl = encodeURIComponent(window.location.href);\n    const shareButtons = document.createElement(\"div\");\n    shareButtons.className = \"share-buttons\";\n    shareButtons.innerHTML = `\n      <a class=\"share-btn fb\" href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=${pageUrl}\" target=\"_blank\">Partager sur Facebook<\/a>\n      <a class=\"share-btn tw\" href=\"https:\/\/twitter.com\/intent\/tweet?text=${shareText}&#038;url=${pageUrl}\" target=\"_blank\">Partager sur Twitter<\/a>\n      <a class=\"share-btn wa\" href=\"https:\/\/api.whatsapp.com\/send?text=${shareText} ${pageUrl}\" target=\"_blank\">Partager sur WhatsApp<\/a>\n    `;\n    resultDiv.appendChild(shareButtons);\n\n  }, 500);\n}\n\n\/\/ D\u00e9marrage\nshowQuestion();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Quel type de personnalit\u00e9 moderne es-tu ?<\/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-1309","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1309","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=1309"}],"version-history":[{"count":2,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1309\/revisions"}],"predecessor-version":[{"id":1312,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1309\/revisions\/1312"}],"wp:attachment":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/media?parent=1309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}