/* Holistic Vision Quiz | v5 (detailed Q/A JSON) */ (() => { /*─────────────────────────────────────────────────────────────────────────*/ if (window.__holisticVisionQuizLoaded) return; window.__holisticVisionQuizLoaded = true; /*──────────────────────── CONFIG ────────────────────────────────────────*/ const CONFIG = { startBtnSelector: '#cta_quiz_click', mauticAction: 'https://mautic.holistic-visioncare.com/form/submit?formId=3', mauticFormId: 'holisticvisionmasterclassfreewebinarinterestform', }; /*────────────────── QUESTIONS (edit text/options as needed) ─────────────*/ const QUESTIONS = [ { id: 1, text: 'Which of the following best describes your current vision issues?', options: [ 'Darker and blurrier vision', 'Frequent prescription changes', 'Rely on eye drops', 'None of the above', ], }, { id: 2, text: 'How often do you practice deep belly breathing?', options: ['Twice daily', 'Once daily', 'A few times a week', 'Never'], }, { id: 3, text: 'Have you incorporated buckwheat for Rutin intake?', options: [ 'Yes, every day', 'Yes, occasionally', 'Not yet, but planning to', 'No', ], }, { id: 4, text: 'Do you perform the See-the-Distance exercise hourly?', options: [ 'Yes, every hour', 'A few times daily', 'Rarely', 'Never', ], }, { id: 5, text: 'Do you feel stress is affecting your vision?', options: ['Yes, often', 'Sometimes', 'Rarely', 'Not at all'], }, { id: 6, text: 'Are you ready for a 12-step vision program?', options: ['Yes, absolutely', 'Yes, need support', 'Maybe', 'No'], }, ]; /*────────────────── Outcome logic (unchanged) ───────────────────────────*/ function determineOutcome(ansArr) { const last = ansArr.find(a => a.questionId === 6)?.answer || ''; if (last.startsWith('Yes, absolutely')) return 'ready'; if (last.startsWith('Yes, need support')) return 'support'; if (last === 'Maybe') return 'maybe'; return 'not_ready'; } const THANK_YOU = { ready: `

You’re all set! 👏

Fantastic—your answers show you’re fully ready to start the 12-step vision programme. Check your inbox for next steps.

`, support: `

We’ve got your back!

You’re keen to begin but want some help. Look out for an email with a support-pack and onboarding call slots.

`, maybe: `

Thanks for your honesty 🙏

We’ll send you our free masterclass replay so you can explore the method at your own pace.

`, not_ready: `

Thank you!

No worries—feel free to browse our blog or follow us on social for helpful eye-care tips until you’re ready.

`, }; /*────────────────── CSS injection (once) ────────────────────────────────*/ const STYLE_ID = 'hvq-styles'; if (!document.getElementById(STYLE_ID)) { const style = document.createElement('style'); style.id = STYLE_ID; style.textContent = ` :root{ --quiz-overlay-bg:rgba(0,0,0,.6); --quiz-popup-bg:#fff; --quiz-popup-width:600px; --quiz-popup-padding:30px; --quiz-border-radius:10px; --quiz-question-color:#222; --quiz-btn-bg:#0e8c7f; --quiz-btn-text:#fff; --quiz-btn-close-bg:#aaa; } #quizOverlay{display:none;position:fixed;inset:0;background:var(--quiz-overlay-bg);z-index:9998} #quizPopup{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%); background:var(--quiz-popup-bg);padding:var(--quiz-popup-padding);max-width:var(--quiz-popup-width); width:95%;border-radius:var(--quiz-border-radius);box-shadow:0 10px 40px rgba(0,0,0,.3); font-family:Arial,sans-serif;z-index:9999} #quizContainer .quiz-step{margin-bottom:20px} #quizContainer .quiz-step h3{margin-bottom:12px;color:var(--quiz-question-color)} #quizContainer .quiz-step label{display:block;margin:8px 0;cursor:pointer} #quizContainer .quiz-step input[type=radio]{margin-right:8px} .quiz-nav{text-align:right;margin-top:12px} .quiz-nav button{background:var(--quiz-btn-bg);color:var(--quiz-btn-text); border:none;padding:10px 16px;margin-left:8px;border-radius:4px;cursor:pointer;font-size:1rem} .quiz-nav button#quizClose{background:var(--quiz-btn-close-bg)} .quiz-nav button:disabled{opacity:.5;cursor:not-allowed} #thankYouPanel{text-align:center} `; document.head.append(style); } /*────────────────── DOM scaffold ───────────────────────────────────────*/ const overlay = document.body.appendChild( Object.assign(document.createElement('div'), { id: 'quizOverlay' }), ); const popup = document.body.appendChild( Object.assign(document.createElement('div'), { id: 'quizPopup' }), ); const container = popup.appendChild( Object.assign(document.createElement('div'), { id: 'quizContainer' }), ); const nav = popup.appendChild( Object.assign(document.createElement('div'), { className: 'quiz-nav' }), ); const btn = (id, txt) => Object.assign(document.createElement('button'), { id, textContent: txt }); const backBtn = nav.appendChild(btn('quizBack', 'Back')); const nextBtn = nav.appendChild(btn('quizNext', 'Next')); const closeBtn = nav.appendChild(btn('quizClose', 'Close')); backBtn.disabled = nextBtn.disabled = true; /*────────────────── State ───────────────────────────────────────────────*/ let step = 0; let answers = []; let outcomeId = null; /*────────────────── Helpers ─────────────────────────────────────────────*/ function detailedJSON() { return JSON.stringify( answers.map(a => ({ id: a.questionId, question: QUESTIONS.find(q => q.id === a.questionId)?.text || '', answer: a.answer, })), ); } function mauticFormHTML() { return `
`; } /*────────────────── Render step ────────────────────────────────────────*/ function render() { if (step >= QUESTIONS.length) { outcomeId = determineOutcome(answers); container.innerHTML = `

Last step — just tell us where to send your results!

${mauticFormHTML()} `; nav.style.display = 'none'; /* Inject hidden field values */ container.querySelector('#quizResults').value = JSON.stringify(answers); container.querySelector('#quizJson').value = detailedJSON(); container.querySelector('#quizOutcome').value = outcomeId; return; } const q = QUESTIONS[step]; container.innerHTML = `

${q.text}

${q.options .map( opt => ``, ) .join('')}
`; nextBtn.disabled = true; container .querySelectorAll('input[name="quizOpt"]') .forEach(r => r.addEventListener('change', () => (nextBtn.disabled = false))); backBtn.disabled = step === 0; backBtn.style.visibility = step ? 'visible' : 'hidden'; nextBtn.textContent = step < QUESTIONS.length - 1 ? 'Next' : 'Finish'; } /*────────────────── Thank-you panel ────────────────────────────────────*/ function showThankYou() { container.innerHTML = `
${ THANK_YOU[outcomeId] || THANK_YOU.not_ready }
`; setTimeout(() => closeBtn.focus(), 200); } /*────────────────── AJAX submit to Mautic ──────────────────────────────*/ container.addEventListener('submit', async e => { if (e.target.id !== CONFIG.mauticFormId) return; e.preventDefault(); const fd = new FormData(e.target); try { await fetch(CONFIG.mauticAction, { method: 'POST', body: fd, mode: 'no-cors' }); } finally { showThankYou(); } }); /*────────────────── Nav buttons ────────────────────────────────────────*/ backBtn.onclick = () => { if (step) { step--; render(); } }; nextBtn.onclick = () => { const selected = container.querySelector('input[name="quizOpt"]:checked'); if (!selected) return; answers[step] = { questionId: QUESTIONS[step].id, answer: selected.value }; step++; render(); }; closeBtn.onclick = () => { overlay.style.display = popup.style.display = 'none'; }; /*────────────────── Open quiz on CTA click (delegated) ────────────────*/ document.body.addEventListener('click', ev => { if (!ev.target.closest(CONFIG.startBtnSelector)) return; step = 0; answers = []; outcomeId = null; nav.style.display = 'block'; overlay.style.display = popup.style.display = 'block'; render(); }); })();
Holistic Eye Care Logo for Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognizing you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Holistic Eye Care Center of the Rockies Privacy Policy