{"id":1508,"date":"2025-12-01T21:59:18","date_gmt":"2025-12-01T21:59:18","guid":{"rendered":"https:\/\/clubvivremieux.com\/?page_id=1508"},"modified":"2025-12-01T22:10:20","modified_gmt":"2025-12-01T22:10:20","slug":"1508-2","status":"publish","type":"page","link":"https:\/\/clubvivremieux.com\/index.php\/1508-2\/","title":{"rendered":"Autotest Saint-Nicolas \u2014 Es-tu plut\u00f4t sage ou coquin ?"},"content":{"rendered":"\n<div id=\"st-nicolas-quiz\"><\/div>\n\n<style>\n\/* Styles (WordPress-friendly) *\/\n#st-nicolas-quiz * { box-sizing: border-box; }\n#st-nicolas-quiz { font-family: Inter, sans-serif; background: linear-gradient(180deg,#071021 0%, #071a2a 80%); color: #e6eef8; padding: 20px; border-radius: 14px; max-width: 860px; margin: 0 auto; box-shadow: 0 6px 22px rgba(0,0,0,0.4); }\n#st-nicolas-quiz h2, #st-nicolas-quiz h3 { margin: 0; }\n.quiz-card { background: rgba(255,255,255,0.04); padding: 18px; border-radius: 12px; margin-top: 14px; border: 1px solid rgba(255,255,255,0.05); }\n.quiz-progress { height: 10px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }\n.quiz-progress i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg,#f97316,#ef4444); }\n.quiz-choices { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 8px; margin-top:10px; }\n.quiz-choice { background: rgba(255,255,255,0.05); padding: 10px; border-radius: 10px; cursor: pointer; border: 1px solid rgba(255,255,255,0.04); transition: all .15s; user-select: none; }\n.quiz-choice:hover { transform: translateY(-3px); background: rgba(255,255,255,0.1); }\n.quiz-choice.selected { background: rgba(239,68,68,0.14); outline: 2px solid rgba(239,68,68,0.25); }\n.quiz-footer { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; }\n.quiz-btn { background: #ef4444; color: white; padding: 10px 14px; cursor: pointer; border-radius: 10px; border: none; font-weight: 600; }\n.quiz-btn[disabled] { opacity: .5; cursor: not-allowed; }\n.quiz-result { display: none; padding: 16px; text-align: center; }\n.quiz-gifts { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 12px; margin-top: 18px; }\n.quiz-gift { border: 1px solid rgba(255,255,255,0.08); padding: 10px; border-radius: 10px; text-decoration: none; color: inherit; }\n.quiz-gift img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; }\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n\n  const container = document.getElementById(\"st-nicolas-quiz\");\n\n  container.innerHTML = `\n    <h2>Autotest Saint-Nicolas \u2014 Es-tu plut\u00f4t sage ou coquin ?<\/h2>\n    <p style=\"color:#94a3b8;margin-bottom:12px\">8 questions \u2014 r\u00e9sultat + id\u00e9es cadeaux personnalis\u00e9es \ud83c\udf81<\/p>\n\n    <div class=\"quiz-card\" id=\"quiz-card\">\n      <div class=\"quiz-progress\"><i id=\"quiz-bar\"><\/i><\/div>\n      <div id=\"quiz-questions\"><\/div>\n\n      <div class=\"quiz-footer\">\n        <button class=\"quiz-btn\" id=\"quiz-prev\" disabled>\u25c0 Pr\u00e9c\u00e9dent<\/button>\n        <button class=\"quiz-btn\" id=\"quiz-next\">Suivant \u25b6<\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"quiz-card quiz-result\" id=\"quiz-result\"><\/div>\n  `;\n\n  \/* QUESTIONS *\/\n  const questions = [\n    {q:\"Quand tu re\u00e7ois un cadeau, tu\u2026\", c:[\"Remercies chaleureusement\",\"L\u2019ouvres un peu trop vite\",\"Demandes d\u00e9j\u00e0 le prochain\"]},\n    {q:\"Si on te dit d\u2019\u00eatre sage, tu\u2026\", c:[\"Ob\u00e9is\",\"Essaies\u2026\",\"Ricanais d\u00e9j\u00e0\"]},\n    {q:\"Les friandises Saint-Nicolas ?\", c:[\"Une petite\",\"Une poign\u00e9e\",\"Tout le paquet\"]},\n    {q:\"Face au P\u00e8re Fouettard ?\", c:[\"Tr\u00e8s poli\",\"Tu fais semblant\",\"Tu fuis ou tu rigoles\"]},\n    {q:\"Chez toi Saint-Nicolas c\u2019est\u2026\", c:[\"Une belle tradition\",\"Un joyeux bazar\",\"Une journ\u00e9e survolt\u00e9e\"]},\n    {q:\"Ton ann\u00e9e a \u00e9t\u00e9\u2026\", c:[\"Sage\",\"Mi-mi\",\"Tr\u00e8s coquine\"]},\n    {q:\"Avec les d\u00e9corations ?\", c:[\"Tu aides\",\"Tu joues (parfois tu casses)\",\"Tu fais des pi\u00e8ges lumineux\"]},\n    {q:\"Quand on te dit 'sois raisonnable'\", c:[\"Tu ob\u00e9is\",\"Tu r\u00e9fl\u00e9chis\",\"Tu fais le contraire\"]},\n  ];\n\n  const results = {\n    angel: {\n      title: \"PARFAIT PETIT ANGE\",\n      text: \"Adorable et sage \u2014 Saint-Nicolas t\u2019adore !\",\n      gifts: [\n        {title:\"Calendrier de l'Avent\", price:\"18\u20ac\", img:\"https:\/\/picsum.photos\/seed\/adv\/400\/300\", url:\"#\"},\n        {title:\"Chocolats fins\", price:\"24\u20ac\", img:\"https:\/\/picsum.photos\/seed\/choco\/400\/300\", url:\"#\"}\n      ]\n    },\n    medium: {\n      title: \"SAGE\u2026 MAIS PAS TROP\",\n      text: \"Gentil, mais avec une touche d\u2019espi\u00e8glerie \ud83d\ude07\",\n      gifts: [\n        {title:\"Pack snack + surprise\", price:\"22\u20ac\", img:\"https:\/\/picsum.photos\/seed\/pack\/400\/300\", url:\"#\"},\n        {title:\"Jeu amusant\", price:\"29\u20ac\", img:\"https:\/\/picsum.photos\/seed\/game\/400\/300\", url:\"#\"}\n      ]\n    },\n    naughty: {\n      title: \"ATTENTION AU P\u00c8RE FOUETTARD !\",\n      text: \"Tu es officiellement coquin \ud83d\ude08\",\n      gifts: [\n        {title:\"Bonbons XXL\", price:\"15\u20ac\", img:\"https:\/\/picsum.photos\/seed\/candy\/400\/300\", url:\"#\"},\n        {title:\"Gadget farceur\", price:\"7\u20ac\", img:\"https:\/\/picsum.photos\/seed\/gag\/400\/300\", url:\"#\"}\n      ]\n    }\n  };\n\n  let index = 0;\n  \/\/ Use numbers or null for unanswered\n  let answers = Array(questions.length).fill(null);\n\n  const wrap = document.getElementById(\"quiz-questions\");\n  const bar = document.getElementById(\"quiz-bar\");\n  const prevBtn = document.getElementById(\"quiz-prev\");\n  const nextBtn = document.getElementById(\"quiz-next\");\n  const resultBox = document.getElementById(\"quiz-result\");\n\n  function renderQuestion() {\n    const q = questions[index];\n    \/\/ Progress: show (index) of total as percentage (include current question)\n    const pct = Math.round(((index) \/ questions.length) * 100);\n    bar.style.width = pct + \"%\";\n\n    wrap.innerHTML = `\n      <h3>${escapeHtml(q.q)}<\/h3>\n      <div class=\"quiz-choices\">\n        ${q.c.map((txt,i)=>`\n          <div class=\"quiz-choice ${answers[index]===i?'selected':''}\" data-id=\"${i}\">\n            ${escapeHtml(txt)}\n          <\/div>\n        `).join(\"\")}\n      <\/div>\n    `;\n\n    \/\/ attach handlers and ensure only this question's choices are toggled\n    document.querySelectorAll(\"#quiz-questions .quiz-choice\").forEach(el=>{\n      el.addEventListener(\"click\", ()=>{\n        const id = parseInt(el.getAttribute('data-id'),10);\n        answers[index] = id;\n        \/\/ re-render current question to update selected class\n        renderQuestion();\n      });\n    });\n\n    prevBtn.disabled = index===0;\n    nextBtn.textContent = (index===questions.length-1) ? \"Voir le r\u00e9sultat\" : \"Suivant \u25b6\";\n  }\n\n  nextBtn.addEventListener(\"click\", ()=>{\n    if(index === questions.length-1){\n      \/\/ Ensure all answered\n      const firstUnanswered = answers.findIndex(v => v === null);\n      if(firstUnanswered !== -1){\n        index = firstUnanswered;\n        renderQuestion();\n        \/\/ small visual cue\n        flash(\"Il reste des questions sans r\u00e9ponse \u2014 merci de r\u00e9pondre \u00e0 toutes.\");\n        return;\n      }\n      showResult();\n    } else {\n      index++;\n      renderQuestion();\n    }\n  });\n\n  prevBtn.addEventListener(\"click\", ()=>{\n    if(index>0){ index--; renderQuestion(); }\n  });\n\n  function showResult(){\n    \/\/ robust sum: treat null as 0 (shouldn't happen because we check) and ensure numeric\n    const total = answers.reduce((sum,val)=> {\n      const n = (typeof val === 'number' && !isNaN(val)) ? val : 0;\n      return sum + n;\n    }, 0);\n\n    let cat = total<=5? \"angel\" : total<=11 ? \"medium\" : \"naughty\";\n    let r = results[cat];\n\n    let gifts = r.gifts.map(g=>`\n      <a class=\"quiz-gift\" href=\"${g.url}\">\n        <img decoding=\"async\" src=\"${g.img}\" alt=\"\">\n        <div><strong>${escapeHtml(g.title)}<\/strong><\/div>\n        <div style=\"color:#94a3b8;font-size:13px\">${escapeHtml(g.price)}<\/div>\n      <\/a>\n    `).join(\"\");\n\n    resultBox.innerHTML = `\n      <h3>${escapeHtml(r.title)}<\/h3>\n      <p style=\"color:#94a3b8\">${escapeHtml(r.text)}<\/p>\n      <div style=\"color:#94a3b8;margin-top:8px\">Score : ${total} \/ ${questions.length*2}<\/div>\n      <div class=\"quiz-gifts\">${gifts}<\/div>\n      <div style=\"margin-top:12px\"><button class=\"quiz-btn\" id=\"quiz-retake\">Refaire le test<\/button><\/div>\n    `;\n\n    document.getElementById(\"quiz-card\").style.display = \"none\";\n    resultBox.style.display = \"block\";\n    bar.style.width = \"100%\";\n\n    document.getElementById(\"quiz-retake\").addEventListener(\"click\", ()=> {\n      \/\/ reset\n      index = 0;\n      answers = Array(questions.length).fill(null);\n      document.getElementById(\"quiz-card\").style.display = \"block\";\n      resultBox.style.display = \"none\";\n      renderQuestion();\n    });\n  }\n\n  \/\/ small helper to show a transient message\n  function flash(msg){\n    const n = document.createElement('div');\n    n.textContent = msg;\n    n.style.cssText = 'position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:#111827;padding:10px 14px;border-radius:10px;color:#fff;border:1px solid rgba(255,255,255,0.04);z-index:9999';\n    document.body.appendChild(n);\n    setTimeout(()=>n.remove(),2600);\n  }\n\n  function escapeHtml(str){ return String(str).replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;').replace(\/\"\/g,'&quot;').replace(\/'\/g,'&#039;'); }\n\n  renderQuestion();\n\n});\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1508","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1508","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=1508"}],"version-history":[{"count":5,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1508\/revisions"}],"predecessor-version":[{"id":1515,"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/pages\/1508\/revisions\/1515"}],"wp:attachment":[{"href":"https:\/\/clubvivremieux.com\/index.php\/wp-json\/wp\/v2\/media?parent=1508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}