Med Spa & Wellness Retreat Marketing Mastery Quiz<\/title>\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <style>\n \/* CSS Variables - HUDAFILM Brand Colors *\/\n :root {\n --accent: #d6e63f; \/* Lime green accent *\/\n --bg: #e8e8e1; \/* Light neutral background *\/\n --text: #1b1b19; \/* Dark text *\/\n --highlight: #2e2d2b; \/* Dark highlight *\/\n --button: #5a7e9a; \/* Blue button color *\/\n --white: #ffffff;\n --success: #22c55e;\n --warning: #f59e0b;\n --error: #ef4444;\n --gray-light: #f5f5f4;\n --gray-medium: #a8a29e;\n --shadow: rgba(0, 0, 0, 0.1);\n --shadow-strong: rgba(0, 0, 0, 0.15);\n }\n\n \/* Reset and Base Styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n min-height: 100vh;\n background: linear-gradient(135deg, var(--bg) 0%, #f0f0e8 100%);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n color: var(--text);\n overflow-x: hidden;\n }\n\n .quiz-container {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 24px;\n }\n\n \/* Quiz Content *\/\n .quiz-content {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 0;\n min-height: 100vh;\n }\n\n \/* Quiz Screens *\/\n .quiz-screen {\n display: none;\n width: 100%;\n max-width: 800px;\n text-align: center;\n opacity: 0;\n transform: translateY(30px);\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .quiz-screen.active {\n display: block;\n opacity: 1;\n transform: translateY(0);\n }\n\n .quiz-screen.animated {\n animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n\n @keyframes slideInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Welcome Screen *\/\n .welcome-content {\n padding: 0 40px;\n }\n\n .quiz-title {\n font-size: clamp(32px, 5vw, 56px);\n font-weight: 700;\n line-height: 1.1;\n margin-bottom: 24px;\n color: var(--text);\n background: linear-gradient(135deg, var(--text) 0%, var(--highlight) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .quiz-subtitle {\n font-size: 20px;\n font-weight: 400;\n line-height: 1.5;\n color: var(--highlight);\n margin-bottom: 48px;\n opacity: 0.9;\n }\n\n .welcome-features {\n display: flex;\n justify-content: center;\n gap: 32px;\n margin-bottom: 48px;\n flex-wrap: wrap;\n }\n\n .feature-item {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 16px;\n font-weight: 500;\n color: var(--highlight);\n }\n\n .feature-icon {\n font-size: 20px;\n }\n\n \/* Question Content *\/\n .question-content {\n padding: 0 40px;\n }\n\n .question-title {\n font-size: clamp(28px, 4vw, 42px);\n font-weight: 600;\n line-height: 1.2;\n margin-bottom: 48px;\n color: var(--text);\n }\n\n .question-subtitle {\n font-size: 18px;\n font-weight: 400;\n line-height: 1.5;\n color: var(--highlight);\n margin-bottom: 32px;\n opacity: 0.8;\n }\n\n \/* Question Options *\/\n .question-options {\n display: grid;\n gap: 16px;\n max-width: 600px;\n margin: 0 auto;\n }\n\n .option-button {\n background: var(--white);\n border: 2px solid rgba(27, 27, 25, 0.1);\n border-radius: 18px;\n padding: 24px 32px;\n display: flex;\n align-items: center;\n gap: 20px;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n text-align: left;\n font-family: inherit;\n box-shadow: 0 2px 12px var(--shadow);\n }\n\n .option-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 30px var(--shadow-strong);\n border-color: var(--accent);\n }\n\n .option-button.selected {\n border-color: var(--accent);\n background: linear-gradient(135deg, var(--accent) 0%, rgba(214, 230, 63, 0.1) 100%);\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(214, 230, 63, 0.3);\n }\n\n .option-icon {\n font-size: 32px;\n flex-shrink: 0;\n }\n\n .option-text {\n font-size: 20px;\n font-weight: 600;\n color: var(--text);\n flex: 1;\n }\n\n .option-subtitle {\n font-size: 14px;\n color: var(--highlight);\n opacity: 0.7;\n margin-top: 4px;\n }\n\n \/* Email Form *\/\n .email-form-container {\n max-width: 500px;\n margin: 0 auto 48px;\n }\n\n .quiz-email-form {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n\n .form-group {\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n .email-input {\n width: 100%;\n padding: 20px 24px;\n border: 2px solid rgba(27, 27, 25, 0.1);\n border-radius: 16px;\n background: var(--white);\n font-size: 18px;\n font-family: inherit;\n color: var(--text);\n transition: all 0.3s ease;\n box-shadow: 0 2px 12px var(--shadow);\n }\n\n .email-input:focus {\n outline: none;\n border-color: var(--accent);\n box-shadow: 0 4px 20px rgba(214, 230, 63, 0.2);\n }\n\n .email-input::placeholder {\n color: var(--gray-medium);\n }\n\n .privacy-note {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-size: 14px;\n color: var(--highlight);\n opacity: 0.7;\n }\n\n .privacy-icon {\n font-size: 16px;\n }\n\n \/* Results Preview *\/\n .results-preview {\n background: var(--white);\n border-radius: 18px;\n padding: 32px;\n box-shadow: 0 4px 24px var(--shadow);\n margin-top: 32px;\n }\n\n .results-preview h3 {\n font-size: 22px;\n font-weight: 600;\n color: var(--text);\n margin-bottom: 24px;\n }\n\n .preview-items {\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n .preview-item {\n display: flex;\n align-items: center;\n gap: 16px;\n font-size: 16px;\n color: var(--highlight);\n }\n\n .preview-icon {\n font-size: 20px;\n background: var(--accent);\n padding: 8px;\n border-radius: 8px;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* Loading Screen *\/\n .loading-content {\n padding: 0 40px;\n }\n\n .loading-animation {\n margin-bottom: 32px;\n }\n\n .loading-spinner {\n width: 64px;\n height: 64px;\n border: 4px solid rgba(214, 230, 63, 0.2);\n border-top: 4px solid var(--accent);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin: 0 auto;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .loading-title {\n font-size: 32px;\n font-weight: 600;\n color: var(--text);\n margin-bottom: 16px;\n }\n\n .loading-subtitle {\n font-size: 18px;\n color: var(--highlight);\n opacity: 0.8;\n margin-bottom: 48px;\n }\n\n .loading-steps {\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-width: 400px;\n margin: 0 auto;\n }\n\n .loading-step {\n padding: 16px 24px;\n background: var(--white);\n border-radius: 12px;\n font-size: 16px;\n color: var(--gray-medium);\n transition: all 0.3s ease;\n box-shadow: 0 2px 8px var(--shadow);\n }\n\n .loading-step.active {\n color: var(--text);\n background: linear-gradient(135deg, var(--accent) 0%, rgba(214, 230, 63, 0.1) 100%);\n font-weight: 500;\n }\n\n \/* Buttons *\/\n .quiz-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 18px 36px;\n border: none;\n border-radius: 16px;\n font-size: 18px;\n font-weight: 600;\n font-family: inherit;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n text-decoration: none;\n position: relative;\n overflow: hidden;\n box-shadow: 0 4px 16px var(--shadow);\n min-width: 200px;\n }\n\n .quiz-button.primary {\n background: var(--button);\n color: var(--white);\n }\n\n .quiz-button.primary:hover {\n background: #4a6d88;\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(90, 126, 154, 0.3);\n }\n\n .quiz-button.secondary {\n background: var(--white);\n color: var(--button);\n border: 2px solid var(--button);\n }\n\n .quiz-button.secondary:hover {\n background: var(--button);\n color: var(--white);\n transform: translateY(-2px);\n }\n\n .quiz-button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n }\n\n .button-arrow {\n transition: transform 0.3s ease;\n font-weight: 700;\n }\n\n .quiz-button:hover .button-arrow {\n transform: translateX(4px);\n }\n\n \/* Navigation *\/\n .quiz-navigation {\n display: none;\n justify-content: space-between;\n align-items: center;\n padding: 32px 0;\n gap: 24px;\n }\n\n .nav-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 14px 28px;\n border: none;\n border-radius: 12px;\n font-size: 16px;\n font-weight: 500;\n font-family: inherit;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n min-width: 120px;\n }\n\n .nav-button.primary {\n background: var(--button);\n color: var(--white);\n box-shadow: 0 2px 12px var(--shadow);\n }\n\n .nav-button.secondary {\n background: var(--white);\n color: var(--button);\n border: 2px solid rgba(27, 27, 25, 0.1);\n box-shadow: 0 2px 8px var(--shadow);\n }\n\n .nav-button:hover {\n transform: translateY(-1px);\n }\n\n \/* Responsive Design *\/\n @media (max-width: 768px) {\n .quiz-container {\n padding: 0 16px;\n }\n \n .welcome-content,\n .question-content,\n .loading-content {\n padding: 0 16px;\n }\n \n .welcome-features {\n flex-direction: column;\n gap: 16px;\n }\n \n .question-options {\n gap: 12px;\n }\n \n .option-button {\n padding: 20px 24px;\n gap: 16px;\n }\n \n .option-icon {\n font-size: 28px;\n }\n \n .option-text {\n font-size: 18px;\n }\n \n .quiz-button {\n padding: 16px 32px;\n font-size: 16px;\n min-width: 180px;\n }\n \n .quiz-navigation {\n flex-direction: column;\n gap: 16px;\n }\n \n .nav-button {\n width: 100%;\n max-width: 300px;\n }\n \n .results-preview {\n padding: 24px;\n }\n \n .email-input {\n padding: 18px 20px;\n font-size: 16px;\n }\n }\n\n @media (max-width: 480px) {\n .quiz-content {\n padding: 20px 0;\n }\n \n .welcome-content,\n .question-content,\n .loading-content {\n padding: 0 12px;\n }\n \n .option-button {\n padding: 16px 20px;\n flex-direction: column;\n text-align: center;\n gap: 12px;\n }\n \n .option-text {\n font-size: 16px;\n }\n \n .quiz-button {\n padding: 14px 24px;\n font-size: 16px;\n min-width: 160px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"quiz-container\">\n\n \n <div class=\"quiz-content\">\n \n \n <div class=\"quiz-screen active\" id=\"welcome-screen\">\n <div class=\"welcome-content\">\n <h1 class=\"quiz-title\">Med Spa & Wellness Retreat<br>Marketing Mastery<\/h1>\n <p class=\"quiz-subtitle\">Find out the best way to grow your business with proven video marketing strategies<\/p>\n <div class=\"welcome-features\">\n <div class=\"feature-item\">\n <span class=\"feature-icon\">\ud83c\udfaf<\/span>\n <span>Personalized recommendations<\/span>\n <\/div>\n <div class=\"feature-item\">\n <span class=\"feature-icon\">\u26a1<\/span>\n <span>Takes less than 2 minutes<\/span>\n <\/div>\n <div class=\"feature-item\">\n <span class=\"feature-icon\">\ud83d\udd12<\/span>\n <span>100% private & secure<\/span>\n <\/div>\n <\/div>\n <button class=\"quiz-button primary\" onclick=\"startQuiz()\">\n Start Your Assessment\n <span class=\"button-arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"quiz-screen\" id=\"question-1\">\n <div class=\"question-content\">\n <h2 class=\"question-title\">Are you an owner\/operator\/partner of a:<\/h2>\n <div class=\"question-options\">\n <button class=\"option-button\" data-value=\"med-spa\" onclick=\"selectOption(this, 'businessType')\">\n <div class=\"option-icon\">\ud83d\udc86<\/div>\n <div class=\"option-text\">Med Spa<\/div>\n <\/button>\n <button class=\"option-button\" data-value=\"wellness-retreat\" onclick=\"selectOption(this, 'businessType')\">\n <div class=\"option-icon\">\ud83e\uddd8<\/div>\n <div class=\"option-text\">Wellness Retreat<\/div>\n <\/button>\n <button class=\"option-button\" data-value=\"holistic-center\" onclick=\"selectOption(this, 'businessType')\">\n <div class=\"option-icon\">\ud83c\udf3f<\/div>\n <div class=\"option-text\">Holistic Center<\/div>\n <\/button>\n <button class=\"option-button\" data-value=\"mental-wellness\" onclick=\"selectOption(this, 'businessType')\">\n <div class=\"option-icon\">\ud83e\udde0<\/div>\n <div class=\"option-text\">Mental Wellness<\/div>\n <\/button>\n <button class=\"option-button\" data-value=\"other\" onclick=\"selectOption(this, 'businessType')\">\n <div class=\"option-icon\">\ud83c\udfe2<\/div>\n <div class=\"option-text\">Other<\/div>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"quiz-screen\" id=\"question-2\">\n <div class=\"question-content\">\n <h2 class=\"question-title\">What is your annual revenue?<\/h2>\n <div class=\"question-options\">\n <button class=\"option-button\" data-value=\"under-100k\" onclick=\"selectOption(this, 'revenue')\">\n <div class=\"option-icon\">\ud83d\udcb0<\/div>\n <div class=\"option-text\">Under $100K<\/div>\n <div class=\"option-subtitle\">Starting or early stage<\/div>\n <\/button>\n <button class=\"option-button\" data-value=\"100k-1m\" onclick=\"selectOption(this, 'revenue')\">\n <div class=\"option-icon\">\ud83d\udcc8<\/div>\n <div class=\"option-text\">$100K – $1M<\/div>\n <div class=\"option-subtitle\">Growing business<\/div>\n <\/button>\n <button class=\"option-button\" data-value=\"1m-2m\" onclick=\"selectOption(this, 'revenue')\">\n <div class=\"option-icon\">\ud83d\ude80<\/div>\n <div class=\"option-text\">$1M – $2M+<\/div>\n <div class=\"option-subtitle\">Established business<\/div>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"quiz-screen\" id=\"question-3\">\n <div class=\"question-content\">\n <h2 class=\"question-title\">Get Your Personalized Marketing Blueprint<\/h2>\n <p class=\"question-subtitle\">Enter your email to receive your customized recommendations and exclusive resources<\/p>\n \n <div class=\"email-form-container\">\n <form class=\"quiz-email-form\" id=\"quiz-results-form\">\n <div class=\"form-group\">\n <input type=\"email\" \n id=\"user-email\" \n name=\"email\" \n class=\"email-input\" \n placeholder=\"Enter your email address\" \n required>\n <button type=\"submit\" class=\"quiz-button primary\" id=\"get-results-btn\">\n Get My Results\n <span class=\"button-arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n \n <div class=\"privacy-note\">\n <span class=\"privacy-icon\">\ud83d\udd12<\/span>\n <span>Your information is 100% secure and will never be shared<\/span>\n <\/div>\n <\/form>\n <\/div>\n \n <div class=\"results-preview\">\n <h3>You’ll receive:<\/h3>\n <div class=\"preview-items\">\n <div class=\"preview-item\">\n <span class=\"preview-icon\">\ud83d\udcca<\/span>\n <span>Personalized growth strategy<\/span>\n <\/div>\n <div class=\"preview-item\">\n <span class=\"preview-icon\">\ud83c\udfa5<\/span>\n <span>Video marketing templates<\/span>\n <\/div>\n <div class=\"preview-item\">\n <span class=\"preview-icon\">\ud83d\udca1<\/span>\n <span>Industry-specific tips<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"quiz-screen\" id=\"loading-screen\">\n <div class=\"loading-content\">\n <div class=\"loading-animation\">\n <div class=\"loading-spinner\"><\/div>\n <\/div>\n <h2 class=\"loading-title\">Analyzing Your Responses…<\/h2>\n <p class=\"loading-subtitle\">Creating your personalized marketing blueprint<\/p>\n <div class=\"loading-steps\">\n <div class=\"loading-step active\">\u2713 Analyzing business type<\/div>\n <div class=\"loading-step\">\u23f3 Calculating growth potential<\/div>\n <div class=\"loading-step\">\u23f3 Customizing recommendations<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"quiz-navigation\">\n <button class=\"nav-button secondary\" id=\"back-button\" onclick=\"previousQuestion()\" style=\"display: none;\">\n <span class=\"button-arrow\">\u2190<\/span>\n Back\n <\/button>\n <button class=\"nav-button primary\" id=\"next-button\" onclick=\"nextQuestion()\" style=\"display: none;\">\n Continue\n <span class=\"button-arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n\n <\/div>\n\n <script>\n \/\/ Quiz state management\n let quizData = {\n businessType: '',\n revenue: '',\n email: '',\n currentScreen: 0,\n totalScreens: 4, \/\/ welcome, q1, q2, email\n answers: {}\n };\n\n \/\/ IMPORTANT: Update these URLs on a frequent basis\n const destinationUrls = {\n 'med-spa': 'https:\/\/panel.hudafilm.com\/med-spa-mastery', \/\/ REPLACE WITH YOUR URL\n 'wellness-retreat': 'https:\/\/panel.hudafilm.com\/wellness-mastery', \/\/ REPLACE WITH YOUR URL\n 'holistic-center': 'https:\/\/panel.hudafilm.com\/wellness-mastery',\n 'mental-wellness': 'https:\/\/panel.hudafilm.com\/wellness-mastery',\n 'other': 'https:\/\/clarity.hudafilm.com\/workshop'\n };\n\n function startQuiz() {\n showScreen('question-1');\n updateProgress();\n showNavigation();\n }\n\n function selectOption(button, answerType) {\n \/\/ Remove active state from all options in this question\n const allOptions = button.parentNode.querySelectorAll('.option-button');\n allOptions.forEach(opt => opt.classList.remove('selected'));\n \n \/\/ Add active state to selected option\n button.classList.add('selected');\n \n \/\/ Store the answer\n quizData.answers[answerType] = button.getAttribute('data-value');\n quizData[answerType] = button.getAttribute('data-value');\n \n \/\/ Auto-advance after selection (with slight delay for visual feedback)\n setTimeout(() => {\n nextQuestion();\n }, 500);\n }\n\n function nextQuestion() {\n const currentScreenElement = document.querySelector('.quiz-screen.active');\n const currentId = currentScreenElement.id;\n \n let nextScreenId;\n \n switch(currentId) {\n case 'welcome-screen':\n nextScreenId = 'question-1';\n quizData.currentScreen = 1;\n break;\n case 'question-1':\n nextScreenId = 'question-2';\n quizData.currentScreen = 2;\n break;\n case 'question-2':\n nextScreenId = 'question-3';\n quizData.currentScreen = 3;\n break;\n default:\n return;\n }\n \n showScreen(nextScreenId);\n updateProgress();\n updateNavigation();\n }\n\n function previousQuestion() {\n const currentScreenElement = document.querySelector('.quiz-screen.active');\n const currentId = currentScreenElement.id;\n \n let prevScreenId;\n \n switch(currentId) {\n case 'question-1':\n prevScreenId = 'welcome-screen';\n quizData.currentScreen = 0;\n break;\n case 'question-2':\n prevScreenId = 'question-1';\n quizData.currentScreen = 1;\n break;\n case 'question-3':\n prevScreenId = 'question-2';\n quizData.currentScreen = 2;\n break;\n default:\n return;\n }\n \n showScreen(prevScreenId);\n updateProgress();\n updateNavigation();\n }\n\n function showScreen(screenId) {\n \/\/ Hide all screens\n document.querySelectorAll('.quiz-screen').forEach(screen => {\n screen.classList.remove('active');\n });\n \n \/\/ Show target screen\n document.getElementById(screenId).classList.add('active');\n \n \/\/ Trigger animation\n setTimeout(() => {\n document.getElementById(screenId).classList.add('animated');\n }, 50);\n }\n\n function updateProgress() {\n \/\/ Progress bar removed, but keeping function for navigation logic\n }\n\n function updateNavigation() {\n const backButton = document.getElementById('back-button');\n const nextButton = document.getElementById('next-button');\n \n \/\/ Show\/hide back button\n if (quizData.currentScreen > 0 && quizData.currentScreen < 3) {\n backButton.style.display = 'flex';\n } else {\n backButton.style.display = 'none';\n }\n \n \/\/ Show\/hide next button based on current screen and selections\n const currentScreenElement = document.querySelector('.quiz-screen.active');\n const currentId = currentScreenElement.id;\n \n if (currentId === 'question-3' || currentId === 'welcome-screen') {\n nextButton.style.display = 'none';\n } else {\n const hasSelection = currentScreenElement.querySelector('.option-button.selected');\n if (hasSelection || currentId === 'welcome-screen') {\n nextButton.style.display = 'flex';\n nextButton.disabled = false;\n } else {\n nextButton.style.display = 'flex';\n nextButton.disabled = true;\n }\n }\n }\n\n function showNavigation() {\n document.querySelector('.quiz-navigation').style.display = 'flex';\n }\n\n \/\/ Handle email form submission\n document.getElementById('quiz-results-form').addEventListener('submit', function(e) {\n e.preventDefault();\n \n const email = document.getElementById('user-email').value;\n if (!email) return;\n \n quizData.email = email;\n \n \/\/ Show loading screen\n showScreen('loading-screen');\n document.querySelector('.quiz-navigation').style.display = 'none';\n \n \/\/ Simulate processing steps\n setTimeout(() => {\n document.querySelectorAll('.loading-step')[1].classList.add('active');\n }, 1000);\n \n setTimeout(() => {\n document.querySelectorAll('.loading-step')[2].classList.add('active');\n }, 2000);\n \n \/\/ Submit to Mautic (if needed) and redirect\n setTimeout(() => {\n submitQuizResults();\n }, 3000);\n });\n\n function submitQuizResults() {\n \/\/ Determine destination URL based on business type\n const destinationUrl = destinationUrls[quizData.businessType] || destinationUrls['other'];\n \n \/\/ Optional: Submit data to Mautic or your backend here\n const formData = {\n email: quizData.email,\n businessType: quizData.businessType,\n revenue: quizData.revenue,\n source: 'quiz-funnel'\n };\n \n \/\/ Log the results (remove in production)\n console.log('Quiz results:', formData);\n \n \/\/ Redirect to appropriate URL\n window.location.href = destinationUrl;\n }\n\n \/\/ Initialize quiz\n document.addEventListener('DOMContentLoaded', function() {\n updateProgress();\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Med Spa & Wellness Retreat Marketing Mastery Quiz Med Spa & Wellness RetreatMarketing Mastery Find out the best way to grow your business with proven video marketing strategies \ud83c\udfaf Personalized recommendations \u26a1 Takes less than 2 minutes \ud83d\udd12 100% private & secure Start Your Assessment \u2192 Are you an owner\/operator\/partner of a: \ud83d\udc86 Med Spa […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-with-title","meta":{"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/growmind.space\/index.php?rest_route=\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/growmind.space\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/growmind.space\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/growmind.space\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/growmind.space\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":7,"href":"https:\/\/growmind.space\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":27,"href":"https:\/\/growmind.space\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions\/27"}],"wp:attachment":[{"href":"https:\/\/growmind.space\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":20,"date":"2025-09-03T19:59:44","date_gmt":"2025-09-03T19:59:44","guid":{"rendered":"https:\/\/www.growmind.space\/?page_id=20"},"modified":"2025-09-03T20:17:52","modified_gmt":"2025-09-03T20:17:52","slug":"marketing-quiz-funnel","status":"publish","type":"page","link":"https:\/\/growmind.space\/?page_id=20","title":{"rendered":"Marketing Quiz Funnel"},"content":{"rendered":"\n\n\n\n \n \n Med Spa & Wellness Retreat Marketing Mastery Quiz<\/title>\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <style>\n \/* CSS Variables - HUDAFILM Brand Colors *\/\n :root {\n --accent: #d6e63f; \/* Lime green accent *\/\n --bg: #e8e8e1; \/* Light neutral background *\/\n --text: #1b1b19; \/* Dark text *\/\n --highlight: #2e2d2b; \/* Dark highlight *\/\n --button: #5a7e9a; \/* Blue button color *\/\n --white: #ffffff;\n --success: #22c55e;\n --warning: #f59e0b;\n --error: #ef4444;\n --gray-light: #f5f5f4;\n --gray-medium: #a8a29e;\n --shadow: rgba(0, 0, 0, 0.1);\n --shadow-strong: rgba(0, 0, 0, 0.15);\n }\n\n \/* Reset and Base Styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n min-height: 100vh;\n background: linear-gradient(135deg, var(--bg) 0%, #f0f0e8 100%);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n color: var(--text);\n overflow-x: hidden;\n }\n\n .quiz-container {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 24px;\n }\n\n \/* Quiz Content *\/\n .quiz-content {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 0;\n min-height: 100vh;\n }\n\n \/* Quiz Screens *\/\n .quiz-screen {\n display: none;\n width: 100%;\n max-width: 800px;\n text-align: center;\n opacity: 0;\n transform: translateY(30px);\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .quiz-screen.active {\n display: block;\n opacity: 1;\n transform: translateY(0);\n }\n\n .quiz-screen.animated {\n animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n\n @keyframes slideInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Welcome Screen *\/\n .welcome-content {\n padding: 0 40px;\n }\n\n .quiz-title {\n font-size: clamp(32px, 5vw, 56px);\n font-weight: 700;\n line-height: 1.1;\n margin-bottom: 24px;\n color: var(--text);\n background: linear-gradient(135deg, var(--text) 0%, var(--highlight) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .quiz-subtitle {\n font-size: 20px;\n font-weight: 400;\n line-height: 1.5;\n color: var(--highlight);\n margin-bottom: 48px;\n opacity: 0.9;\n }\n\n .welcome-features {\n display: flex;\n justify-content: center;\n gap: 32px;\n margin-bottom: 48px;\n flex-wrap: wrap;\n }\n\n .feature-item {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 16px;\n font-weight: 500;\n color: var(--highlight);\n }\n\n .feature-icon {\n font-size: 20px;\n }\n\n \/* Question Content *\/\n .question-content {\n padding: 0 40px;\n }\n\n .question-title {\n font-size: clamp(28px, 4vw, 42px);\n font-weight: 600;\n line-height: 1.2;\n margin-bottom: 48px;\n color: var(--text);\n }\n\n .question-subtitle {\n font-size: 18px;\n font-weight: 400;\n line-height: 1.5;\n color: var(--highlight);\n margin-bottom: 32px;\n opacity: 0.8;\n }\n\n \/* Question Options *\/\n .question-options {\n display: grid;\n gap: 16px;\n max-width: 600px;\n margin: 0 auto;\n }\n\n .option-button {\n background: var(--white);\n border: 2px solid rgba(27, 27, 25, 0.1);\n border-radius: 18px;\n padding: 24px 32px;\n display: flex;\n align-items: center;\n gap: 20px;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n text-align: left;\n font-family: inherit;\n box-shadow: 0 2px 12px var(--shadow);\n }\n\n .option-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 30px var(--shadow-strong);\n border-color: var(--accent);\n }\n\n .option-button.selected {\n border-color: var(--accent);\n background: linear-gradient(135deg, var(--accent) 0%, rgba(214, 230, 63, 0.1) 100%);\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(214, 230, 63, 0.3);\n }\n\n .option-icon {\n font-size: 32px;\n flex-shrink: 0;\n }\n\n .option-text {\n font-size: 20px;\n font-weight: 600;\n color: var(--text);\n flex: 1;\n }\n\n .option-subtitle {\n font-size: 14px;\n color: var(--highlight);\n opacity: 0.7;\n margin-top: 4px;\n }\n\n \/* Email Form *\/\n .email-form-container {\n max-width: 500px;\n margin: 0 auto 48px;\n }\n\n .quiz-email-form {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n\n .form-group {\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n .email-input {\n width: 100%;\n padding: 20px 24px;\n border: 2px solid rgba(27, 27, 25, 0.1);\n border-radius: 16px;\n background: var(--white);\n font-size: 18px;\n font-family: inherit;\n color: var(--text);\n transition: all 0.3s ease;\n box-shadow: 0 2px 12px var(--shadow);\n }\n\n .email-input:focus {\n outline: none;\n border-color: var(--accent);\n box-shadow: 0 4px 20px rgba(214, 230, 63, 0.2);\n }\n\n .email-input::placeholder {\n color: var(--gray-medium);\n }\n\n .privacy-note {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-size: 14px;\n color: var(--highlight);\n opacity: 0.7;\n }\n\n .privacy-icon {\n font-size: 16px;\n }\n\n \/* Results Preview *\/\n .results-preview {\n background: var(--white);\n border-radius: 18px;\n padding: 32px;\n box-shadow: 0 4px 24px var(--shadow);\n margin-top: 32px;\n }\n\n .results-preview h3 {\n font-size: 22px;\n font-weight: 600;\n color: var(--text);\n margin-bottom: 24px;\n }\n\n .preview-items {\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n .preview-item {\n display: flex;\n align-items: center;\n gap: 16px;\n font-size: 16px;\n color: var(--highlight);\n }\n\n .preview-icon {\n font-size: 20px;\n background: var(--accent);\n padding: 8px;\n border-radius: 8px;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* Loading Screen *\/\n .loading-content {\n padding: 0 40px;\n }\n\n .loading-animation {\n margin-bottom: 32px;\n }\n\n .loading-spinner {\n width: 64px;\n height: 64px;\n border: 4px solid rgba(214, 230, 63, 0.2);\n border-top: 4px solid var(--accent);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin: 0 auto;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .loading-title {\n font-size: 32px;\n font-weight: 600;\n color: var(--text);\n margin-bottom: 16px;\n }\n\n .loading-subtitle {\n font-size: 18px;\n color: var(--highlight);\n opacity: 0.8;\n margin-bottom: 48px;\n }\n\n .loading-steps {\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-width: 400px;\n margin: 0 auto;\n }\n\n .loading-step {\n padding: 16px 24px;\n background: var(--white);\n border-radius: 12px;\n font-size: 16px;\n color: var(--gray-medium);\n transition: all 0.3s ease;\n box-shadow: 0 2px 8px var(--shadow);\n }\n\n .loading-step.active {\n color: var(--text);\n background: linear-gradient(135deg, var(--accent) 0%, rgba(214, 230, 63, 0.1) 100%);\n font-weight: 500;\n }\n\n \/* Buttons *\/\n .quiz-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 18px 36px;\n border: none;\n border-radius: 16px;\n font-size: 18px;\n font-weight: 600;\n font-family: inherit;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n text-decoration: none;\n position: relative;\n overflow: hidden;\n box-shadow: 0 4px 16px var(--shadow);\n min-width: 200px;\n }\n\n .quiz-button.primary {\n background: var(--button);\n color: var(--white);\n }\n\n .quiz-button.primary:hover {\n background: #4a6d88;\n transform: translateY(-2px);\n box-shadow: 0 8px 30px rgba(90, 126, 154, 0.3);\n }\n\n .quiz-button.secondary {\n background: var(--white);\n color: var(--button);\n border: 2px solid var(--button);\n }\n\n .quiz-button.secondary:hover {\n background: var(--button);\n color: var(--white);\n transform: translateY(-2px);\n }\n\n .quiz-button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n }\n\n .button-arrow {\n transition: transform 0.3s ease;\n font-weight: 700;\n }\n\n .quiz-button:hover .button-arrow {\n transform: translateX(4px);\n }\n\n \/* Navigation *\/\n .quiz-navigation {\n display: none;\n justify-content: space-between;\n align-items: center;\n padding: 32px 0;\n gap: 24px;\n }\n\n .nav-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 14px 28px;\n border: none;\n border-radius: 12px;\n font-size: 16px;\n font-weight: 500;\n font-family: inherit;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n min-width: 120px;\n }\n\n .nav-button.primary {\n background: var(--button);\n color: var(--white);\n box-shadow: 0 2px 12px var(--shadow);\n }\n\n .nav-button.secondary {\n background: var(--white);\n color: var(--button);\n border: 2px solid rgba(27, 27, 25, 0.1);\n box-shadow: 0 2px 8px var(--shadow);\n }\n\n .nav-button:hover {\n transform: translateY(-1px);\n }\n\n \/* Responsive Design *\/\n @media (max-width: 768px) {\n .quiz-container {\n padding: 0 16px;\n }\n \n .welcome-content,\n .question-content,\n .loading-content {\n padding: 0 16px;\n }\n \n .welcome-features {\n flex-direction: column;\n gap: 16px;\n }\n \n .question-options {\n gap: 12px;\n }\n \n .option-button {\n padding: 20px 24px;\n gap: 16px;\n }\n \n .option-icon {\n font-size: 28px;\n }\n \n .option-text {\n font-size: 18px;\n }\n \n .quiz-button {\n padding: 16px 32px;\n font-size: 16px;\n min-width: 180px;\n }\n \n .quiz-navigation {\n flex-direction: column;\n gap: 16px;\n }\n \n .nav-button {\n width: 100%;\n max-width: 300px;\n }\n \n .results-preview {\n padding: 24px;\n }\n \n .email-input {\n padding: 18px 20px;\n font-size: 16px;\n }\n }\n\n @media (max-width: 480px) {\n .quiz-content {\n padding: 20px 0;\n }\n \n .welcome-content,\n .question-content,\n .loading-content {\n padding: 0 12px;\n }\n \n .option-button {\n padding: 16px 20px;\n flex-direction: column;\n text-align: center;\n gap: 12px;\n }\n \n .option-text {\n font-size: 16px;\n }\n \n .quiz-button {\n padding: 14px 24px;\n font-size: 16px;\n min-width: 160px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"quiz-container\">\n\n \n <div class=\"quiz-content\">\n \n \n <div class=\"quiz-screen active\" id=\"welcome-screen\">\n <div class=\"welcome-content\">\n <h1 class=\"quiz-title\">Med Spa & Wellness Retreat<br>Marketing Mastery<\/h1>\n <p class=\"quiz-subtitle\">Find out the best way to grow your business with proven video marketing strategies<\/p>\n <div class=\"welcome-features\">\n <div class=\"feature-item\">\n <span class=\"feature-icon\">\ud83c\udfaf<\/span>\n <span>Personalized recommendations<\/span>\n <\/div>\n <div class=\"feature-item\">\n <span class=\"feature-icon\">\u26a1<\/span>\n <span>Takes less than 2 minutes<\/span>\n <\/div>\n <div class=\"feature-item\">\n <span class=\"feature-icon\">\ud83d\udd12<\/span>\n <span>100% private & secure<\/span>\n <\/div>\n <\/div>\n <button class=\"quiz-button primary\" onclick=\"startQuiz()\">\n Start Your Assessment\n <span class=\"button-arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"quiz-screen\" id=\"question-1\">\n <div class=\"question-content\">\n <h2 class=\"question-title\">Are you an owner\/operator\/partner of a:<\/h2>\n <div class=\"question-options\">\n <button class=\"option-button\" data-value=\"med-spa\" onclick=\"selectOption(this, 'businessType')\">\n <div class=\"option-icon\">\ud83d\udc86<\/div>\n <div class=\"option-text\">Med Spa<\/div>\n <\/button>\n <button class=\"option-button\" data-value=\"wellness-retreat\" onclick=\"selectOption(this, 'businessType')\">\n <div class=\"option-icon\">\ud83e\uddd8<\/div>\n <div class=\"option-text\">Wellness Retreat<\/div>\n <\/button>\n <button class=\"option-button\" data-value=\"holistic-center\" onclick=\"selectOption(this, 'businessType')\">\n <div class=\"option-icon\">\ud83c\udf3f<\/div>\n <div class=\"option-text\">Holistic Center<\/div>\n <\/button>\n <button class=\"option-button\" data-value=\"mental-wellness\" onclick=\"selectOption(this, 'businessType')\">\n <div class=\"option-icon\">\ud83e\udde0<\/div>\n <div class=\"option-text\">Mental Wellness<\/div>\n <\/button>\n <button class=\"option-button\" data-value=\"other\" onclick=\"selectOption(this, 'businessType')\">\n <div class=\"option-icon\">\ud83c\udfe2<\/div>\n <div class=\"option-text\">Other<\/div>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"quiz-screen\" id=\"question-2\">\n <div class=\"question-content\">\n <h2 class=\"question-title\">What is your annual revenue?<\/h2>\n <div class=\"question-options\">\n <button class=\"option-button\" data-value=\"under-100k\" onclick=\"selectOption(this, 'revenue')\">\n <div class=\"option-icon\">\ud83d\udcb0<\/div>\n <div class=\"option-text\">Under $100K<\/div>\n <div class=\"option-subtitle\">Starting or early stage<\/div>\n <\/button>\n <button class=\"option-button\" data-value=\"100k-1m\" onclick=\"selectOption(this, 'revenue')\">\n <div class=\"option-icon\">\ud83d\udcc8<\/div>\n <div class=\"option-text\">$100K – $1M<\/div>\n <div class=\"option-subtitle\">Growing business<\/div>\n <\/button>\n <button class=\"option-button\" data-value=\"1m-2m\" onclick=\"selectOption(this, 'revenue')\">\n <div class=\"option-icon\">\ud83d\ude80<\/div>\n <div class=\"option-text\">$1M – $2M+<\/div>\n <div class=\"option-subtitle\">Established business<\/div>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"quiz-screen\" id=\"question-3\">\n <div class=\"question-content\">\n <h2 class=\"question-title\">Get Your Personalized Marketing Blueprint<\/h2>\n <p class=\"question-subtitle\">Enter your email to receive your customized recommendations and exclusive resources<\/p>\n \n <div class=\"email-form-container\">\n <form class=\"quiz-email-form\" id=\"quiz-results-form\">\n <div class=\"form-group\">\n <input type=\"email\" \n id=\"user-email\" \n name=\"email\" \n class=\"email-input\" \n placeholder=\"Enter your email address\" \n required>\n <button type=\"submit\" class=\"quiz-button primary\" id=\"get-results-btn\">\n Get My Results\n <span class=\"button-arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n \n <div class=\"privacy-note\">\n <span class=\"privacy-icon\">\ud83d\udd12<\/span>\n <span>Your information is 100% secure and will never be shared<\/span>\n <\/div>\n <\/form>\n <\/div>\n \n <div class=\"results-preview\">\n <h3>You’ll receive:<\/h3>\n <div class=\"preview-items\">\n <div class=\"preview-item\">\n <span class=\"preview-icon\">\ud83d\udcca<\/span>\n <span>Personalized growth strategy<\/span>\n <\/div>\n <div class=\"preview-item\">\n <span class=\"preview-icon\">\ud83c\udfa5<\/span>\n <span>Video marketing templates<\/span>\n <\/div>\n <div class=\"preview-item\">\n <span class=\"preview-icon\">\ud83d\udca1<\/span>\n <span>Industry-specific tips<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"quiz-screen\" id=\"loading-screen\">\n <div class=\"loading-content\">\n <div class=\"loading-animation\">\n <div class=\"loading-spinner\"><\/div>\n <\/div>\n <h2 class=\"loading-title\">Analyzing Your Responses…<\/h2>\n <p class=\"loading-subtitle\">Creating your personalized marketing blueprint<\/p>\n <div class=\"loading-steps\">\n <div class=\"loading-step active\">\u2713 Analyzing business type<\/div>\n <div class=\"loading-step\">\u23f3 Calculating growth potential<\/div>\n <div class=\"loading-step\">\u23f3 Customizing recommendations<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"quiz-navigation\">\n <button class=\"nav-button secondary\" id=\"back-button\" onclick=\"previousQuestion()\" style=\"display: none;\">\n <span class=\"button-arrow\">\u2190<\/span>\n Back\n <\/button>\n <button class=\"nav-button primary\" id=\"next-button\" onclick=\"nextQuestion()\" style=\"display: none;\">\n Continue\n <span class=\"button-arrow\">\u2192<\/span>\n <\/button>\n <\/div>\n\n <\/div>\n\n <script>\n \/\/ Quiz state management\n let quizData = {\n businessType: '',\n revenue: '',\n email: '',\n currentScreen: 0,\n totalScreens: 4, \/\/ welcome, q1, q2, email\n answers: {}\n };\n\n \/\/ IMPORTANT: Update these URLs on a frequent basis\n const destinationUrls = {\n 'med-spa': 'https:\/\/panel.hudafilm.com\/med-spa-mastery', \/\/ REPLACE WITH YOUR URL\n 'wellness-retreat': 'https:\/\/panel.hudafilm.com\/wellness-mastery', \/\/ REPLACE WITH YOUR URL\n 'holistic-center': 'https:\/\/panel.hudafilm.com\/wellness-mastery',\n 'mental-wellness': 'https:\/\/panel.hudafilm.com\/wellness-mastery',\n 'other': 'https:\/\/clarity.hudafilm.com\/workshop'\n };\n\n function startQuiz() {\n showScreen('question-1');\n updateProgress();\n showNavigation();\n }\n\n function selectOption(button, answerType) {\n \/\/ Remove active state from all options in this question\n const allOptions = button.parentNode.querySelectorAll('.option-button');\n allOptions.forEach(opt => opt.classList.remove('selected'));\n \n \/\/ Add active state to selected option\n button.classList.add('selected');\n \n \/\/ Store the answer\n quizData.answers[answerType] = button.getAttribute('data-value');\n quizData[answerType] = button.getAttribute('data-value');\n \n \/\/ Auto-advance after selection (with slight delay for visual feedback)\n setTimeout(() => {\n nextQuestion();\n }, 500);\n }\n\n function nextQuestion() {\n const currentScreenElement = document.querySelector('.quiz-screen.active');\n const currentId = currentScreenElement.id;\n \n let nextScreenId;\n \n switch(currentId) {\n case 'welcome-screen':\n nextScreenId = 'question-1';\n quizData.currentScreen = 1;\n break;\n case 'question-1':\n nextScreenId = 'question-2';\n quizData.currentScreen = 2;\n break;\n case 'question-2':\n nextScreenId = 'question-3';\n quizData.currentScreen = 3;\n break;\n default:\n return;\n }\n \n showScreen(nextScreenId);\n updateProgress();\n updateNavigation();\n }\n\n function previousQuestion() {\n const currentScreenElement = document.querySelector('.quiz-screen.active');\n const currentId = currentScreenElement.id;\n \n let prevScreenId;\n \n switch(currentId) {\n case 'question-1':\n prevScreenId = 'welcome-screen';\n quizData.currentScreen = 0;\n break;\n case 'question-2':\n prevScreenId = 'question-1';\n quizData.currentScreen = 1;\n break;\n case 'question-3':\n prevScreenId = 'question-2';\n quizData.currentScreen = 2;\n break;\n default:\n return;\n }\n \n showScreen(prevScreenId);\n updateProgress();\n updateNavigation();\n }\n\n function showScreen(screenId) {\n \/\/ Hide all screens\n document.querySelectorAll('.quiz-screen').forEach(screen => {\n screen.classList.remove('active');\n });\n \n \/\/ Show target screen\n document.getElementById(screenId).classList.add('active');\n \n \/\/ Trigger animation\n setTimeout(() => {\n document.getElementById(screenId).classList.add('animated');\n }, 50);\n }\n\n function updateProgress() {\n \/\/ Progress bar removed, but keeping function for navigation logic\n }\n\n function updateNavigation() {\n const backButton = document.getElementById('back-button');\n const nextButton = document.getElementById('next-button');\n \n \/\/ Show\/hide back button\n if (quizData.currentScreen > 0 && quizData.currentScreen < 3) {\n backButton.style.display = 'flex';\n } else {\n backButton.style.display = 'none';\n }\n \n \/\/ Show\/hide next button based on current screen and selections\n const currentScreenElement = document.querySelector('.quiz-screen.active');\n const currentId = currentScreenElement.id;\n \n if (currentId === 'question-3' || currentId === 'welcome-screen') {\n nextButton.style.display = 'none';\n } else {\n const hasSelection = currentScreenElement.querySelector('.option-button.selected');\n if (hasSelection || currentId === 'welcome-screen') {\n nextButton.style.display = 'flex';\n nextButton.disabled = false;\n } else {\n nextButton.style.display = 'flex';\n nextButton.disabled = true;\n }\n }\n }\n\n function showNavigation() {\n document.querySelector('.quiz-navigation').style.display = 'flex';\n }\n\n \/\/ Handle email form submission\n document.getElementById('quiz-results-form').addEventListener('submit', function(e) {\n e.preventDefault();\n \n const email = document.getElementById('user-email').value;\n if (!email) return;\n \n quizData.email = email;\n \n \/\/ Show loading screen\n showScreen('loading-screen');\n document.querySelector('.quiz-navigation').style.display = 'none';\n \n \/\/ Simulate processing steps\n setTimeout(() => {\n document.querySelectorAll('.loading-step')[1].classList.add('active');\n }, 1000);\n \n setTimeout(() => {\n document.querySelectorAll('.loading-step')[2].classList.add('active');\n }, 2000);\n \n \/\/ Submit to Mautic (if needed) and redirect\n setTimeout(() => {\n submitQuizResults();\n }, 3000);\n });\n\n function submitQuizResults() {\n \/\/ Determine destination URL based on business type\n const destinationUrl = destinationUrls[quizData.businessType] || destinationUrls['other'];\n \n \/\/ Optional: Submit data to Mautic or your backend here\n const formData = {\n email: quizData.email,\n businessType: quizData.businessType,\n revenue: quizData.revenue,\n source: 'quiz-funnel'\n };\n \n \/\/ Log the results (remove in production)\n console.log('Quiz results:', formData);\n \n \/\/ Redirect to appropriate URL\n window.location.href = destinationUrl;\n }\n\n \/\/ Initialize quiz\n document.addEventListener('DOMContentLoaded', function() {\n updateProgress();\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Med Spa & Wellness Retreat Marketing Mastery Quiz Med Spa & Wellness RetreatMarketing Mastery Find out the best way to grow your business with proven video marketing strategies \ud83c\udfaf Personalized recommendations \u26a1 Takes less than 2 minutes \ud83d\udd12 100% private & secure Start Your Assessment \u2192 Are you an owner\/operator\/partner of a: \ud83d\udc86 Med Spa […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-with-title","meta":{"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/growmind.space\/index.php?rest_route=\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/growmind.space\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/growmind.space\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/growmind.space\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/growmind.space\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":7,"href":"https:\/\/growmind.space\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":27,"href":"https:\/\/growmind.space\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions\/27"}],"wp:attachment":[{"href":"https:\/\/growmind.space\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}