:root {
–teal: #3BBFBF;
–teal-light: #E8F8F8;
–pink: #E87EB0;
–pink-hover: #d66a9c;
–pink-light: #FCE8F3;
–blue: #4169C8;
–blue-dark: #2D4899;
–yellow: #F5C230;
–peach: #FDECD0;
–cream: #FFFCF8;
–text: #1C1C2E;
–muted: #6B6B7B;
–border: #EAE4DC;
–white: #FFFFFF;
–shadow: 0 4px 24px rgba(65,105,200,0.08);
–shadow-lg: 0 8px 40px rgba(65,105,200,0.13);
–radius: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
font-family: ‘Inter’, Arial, sans-serif;
background: var(–cream);
color: var(–text);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}

/* ── Progress Bar ── */
.progress-bar-wrap {
position: fixed;
top: 0; left: 0; right: 0;
height: 4px;
background: var(–border);
z-index: 100;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(–teal), var(–pink));
border-radius: 0 4px 4px 0;
transition: width 0.4s ease;
}

/* ── Header ── */
.site-header {
width: 100%;
background: linear-gradient(90deg, var(–blue-dark) 0%, var(–teal) 100%);
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: center;
}
.site-header img {
height: 40px;
}

/* ── Main Container ── */
.quiz-wrap {
width: 100%;
max-width: 640px;
margin: 0 auto;
padding: 40px 24px 80px;
flex: 1;
}

/* ── Screen (each slide) ── */
.screen {
display: none;
animation: fadeUp 0.35s ease;
}
.screen.active { display: block; }

@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}

/* ── Step Label ── */
.step-label {
font-family: ‘Capriola’, Arial, sans-serif;
font-size: 12px;
color: var(–teal);
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 12px;
}

/* ── Question Heading ── */
.q-heading {
font-family: ‘Capriola’, Arial, sans-serif;
font-size: 26px;
color: var(–blue-dark);
line-height: 1.3;
margin-bottom: 10px;
}
.q-heading span {
color: var(–pink);
}
.q-intro {
font-size: 15px;
color: var(–muted);
line-height: 1.6;
margin-bottom: 28px;
}

/* ── Answer Cards ── */
.answers {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 32px;
}
.answer-card {
background: var(–white);
border: 2px solid var(–border);
border-radius: var(–radius);
padding: 16px 20px;
cursor: pointer;
display: flex;
align-items: center;
gap: 14px;
transition: all 0.2s ease;
box-shadow: var(–shadow);
}
.answer-card:hover {
border-color: var(–pink);
transform: translateY(-1px);
box-shadow: var(–shadow-lg);
}
.answer-card.selected {
border-color: var(–pink);
background: var(–pink-light);
}
.card-dot {
width: 20px; height: 20px;
border: 2px solid var(–border);
border-radius: 50%;
flex-shrink: 0;
transition: all 0.2s ease;
}
.answer-card.selected .card-dot {
background: var(–pink);
border-color: var(–pink);
}
.card-text {
font-size: 15px;
font-weight: 500;
color: var(–text);
line-height: 1.4;
}

/* ── Checkbox cards (multi-select) ── */
.checkbox-card .card-dot {
border-radius: 6px;
}

/* ── Navigation ── */
.nav-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.btn-back {
background: none;
border: none;
color: var(–muted);
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 0;
transition: color 0.2s;
}
.btn-back:hover { color: var(–text); }
.btn-back svg { width: 16px; height: 16px; }
.btn-next {
background: var(–blue-dark);
color: white;
border: none;
border-radius: 50px;
padding: 13px 32px;
font-family: ‘Inter’, Arial, sans-serif;
font-size: 15px;
font-weight: 700;
cursor: pointer;
opacity: 0.35;
pointer-events: none;
transition: all 0.2s ease;
}
.btn-next.visible {
opacity: 1;
pointer-events: auto;
}
.btn-next.visible:hover {
background: var(–blue);
transform: translateY(-1px);
}

/* ── Welcome Screen ── */
.welcome-card {
background: var(–white);
border-radius: 24px;
padding: 52px 40px;
box-shadow: var(–shadow-lg);
text-align: center;
margin-top: 16px;
}
.welcome-badge {
display: inline-block;
background: var(–pink-light);
color: var(–pink);
font-family: ‘Capriola’, Arial, sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.2px;
padding: 7px 18px;
border-radius: 20px;
margin-bottom: 24px;
}
.welcome-card h1 {
font-family: ‘Capriola’, Arial, sans-serif;
font-size: 28px;
color: var(–blue-dark);
line-height: 1.3;
margin-bottom: 16px;
}
.welcome-card h1 span { color: var(–pink); }
.welcome-card p {
font-size: 16px;
color: var(–muted);
line-height: 1.65;
margin-bottom: 28px;
}
.welcome-features {
display: flex;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 36px;
}
.welcome-feat {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(–muted);
font-weight: 500;
}
.dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(–teal);
flex-shrink: 0;
}
.btn-start {
background: linear-gradient(135deg, var(–pink) 0%, var(–blue) 100%);
color: white;
border: none;
border-radius: 50px;
padding: 16px 44px;
font-family: ‘Inter’, Arial, sans-serif;
font-size: 16px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 20px rgba(232,126,176,0.38);
transition: all 0.2s ease;
}
.btn-start:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(232,126,176,0.45);
}

/* ── Details / Email Screen ── */
.details-card {
background: var(–white);
border-radius: 24px;
padding: 44px 40px;
box-shadow: var(–shadow-lg);
}
.form-row {
display: flex;
gap: 20px;
}
.form-group {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-size: 13px;
font-weight: 600;
color: var(–text);
}
.form-input {
border: 2px solid var(–border);
border-radius: 12px;
padding: 13px 16px;
font-size: 15px;
font-family: ‘Inter’, Arial, sans-serif;
color: var(–text);
outline: none;
transition: border-color 0.2s;
background: var(–cream);
}
.form-input:focus { border-color: var(–teal); }
.result-preview {
background: var(–peach);
border-left: 4px solid var(–yellow);
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 28px;
}
.result-preview p {
font-size: 14px;
color: var(–text);
line-height: 1.6;
margin: 0;
}

/* ── Session Recommendation Card ── */
.rec-card {
border-radius: 16px;
padding: 24px;
margin-bottom: 28px;
border: 2px solid transparent;
}
.rec-card.gentle {
background: linear-gradient(135deg, #e8f8f4, #f0f9f0);
border-color: #3BBFBF;
}
.rec-card.double {
background: linear-gradient(135deg, #fce8f3, #fdecd0);
border-color: #E87EB0;
}
.rec-card.quad {
background: linear-gradient(135deg, #eef0fc, #e8f0fe);
border-color: #4169C8;
}
.rec-badge-wrap {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.rec-icon {
font-size: 28px;
line-height: 1;
}
.rec-badge {
display: inline-block;
font-family: ‘Capriola’, Arial, sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.2px;
padding: 5px 14px;
border-radius: 20px;
background: rgba(0,0,0,0.07);
color: var(–blue-dark);
}
.rec-title {
font-family: ‘Capriola’, Arial, sans-serif;
font-size: 18px;
color: var(–blue-dark);
margin-bottom: 8px;
line-height: 1.3;
}
.rec-desc {
font-size: 14px;
color: var(–muted);
line-height: 1.65;
}

.btn-submit {
width: 100%;
background: var(–pink);
color: white;
border: none;
border-radius: 50px;
padding: 16px;
font-family: ‘Inter’, Arial, sans-serif;
font-size: 16px;
font-weight: 700;
cursor: pointer;
margin-top: 24px;
box-shadow: 0 4px 20px rgba(232,126,176,0.38);
transition: all 0.2s ease;
}
.btn-submit:hover {
background: var(–pink-hover);
transform: translateY(-1px);
box-shadow: 0 6px 28px rgba(232,126,176,0.45);
}
.privacy-note {
text-align: center;
font-size: 12px;
color: var(–muted);
margin-top: 12px;
line-height: 1.5;
}

/* ── Thank You Screen ── */
.thankyou-card {
background: var(–white);
border-radius: 24px;
padding: 52px 40px;
box-shadow: var(–shadow-lg);
text-align: center;
}
.thankyou-icon {
width: 72px; height: 72px;
background: var(–teal-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
font-size: 32px;
}
.thankyou-card h2 {
font-family: ‘Capriola’, Arial, sans-serif;
font-size: 26px;
color: var(–blue-dark);
margin-bottom: 14px;
}
.thankyou-card p {
font-size: 16px;
color: var(–muted);
line-height: 1.7;
margin-bottom: 28px;
}
.btn-trial {
display: inline-block;
background: var(–pink);
color: white;
text-decoration: none;
border-radius: 50px;
padding: 15px 40px;
font-family: ‘Inter’, Arial, sans-serif;
font-size: 15px;
font-weight: 700;
box-shadow: 0 4px 20px rgba(232,126,176,0.38);
transition: all 0.2s ease;
}
.btn-trial:hover {
background: var(–pink-hover);
transform: translateY(-1px);
}

/* ── After School Banner ── */
.afterschool-banner {
background: linear-gradient(135deg, var(–blue-dark) 0%, var(–teal) 100%);
border-radius: var(–radius);
padding: 16px 20px;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.afterschool-banner p {
font-size: 13px;
color: rgba(255,255,255,0.85);
line-height: 1.4;
margin: 0;
}
.as-badge {
display: inline-block;
background: rgba(255,255,255,0.2);
color: #fff;
font-family: ‘Capriola’, Arial, sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.2px;
padding: 5px 14px;
border-radius: 20px;
white-space: nowrap;
}
.afterschool-card {
border-color: var(–teal) !important;
background: var(–teal-light) !important;
}
.afterschool-card:hover {
border-color: var(–blue-dark) !important;
background: #d4f0f0 !important;
}
.afterschool-card.selected {
border-color: var(–blue-dark) !important;
background: #d4f0f0 !important;
}

/* ── Responsive ── */
@media (max-width: 480px) {
.quiz-wrap { padding: 28px 16px 60px; }
.welcome-card { padding: 36px 24px; }
.welcome-card h1 { font-size: 24px; }
.details-card { padding: 28px 20px; }
.form-row { flex-direction: column; gap: 16px; }
.q-heading { font-size: 22px; }
.btn-next { padding: 13px 28px; }
}

/* — Button reset for answer-card elements (native iOS-compatible) — */
button.answer-card {
-webkit-appearance: none;
appearance: none;
font-family: ‘Inter’, Arial, sans-serif;
width: 100%;
text-align: left;
}

/* — Kill Zoho chat widget (blocks taps on mobile) — */
#zsiq_chat_wrap, #zsiq_float, .zsiq-float, [id^=”zsiq”] {
display: none !important;
pointer-events: none !important;
visibility: hidden !important;
}

/* — Kill WordPress plugin admin notices (SBI, MonsterInsights, etc) — */
.sbi-critical-notice, .sbi-critical-notice-wrap, [class*=”sbi-notice”],
.mi-panel, .mi-panel-wrap, [class*=”mi-panel”],
#monsterinsights-vue-app, .monsterinsights-widget,
.wpadminbar {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
height: 0 !important;
overflow: hidden !important;
}

/* — Back to home link — */
.back-home-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(–muted);
font-size: 14px;
font-weight: 500;
text-decoration: none;
margin-bottom: 20px;
transition: color 0.2s;
}
.back-home-link:hover { color: var(–text); }

// ── EmailJS Configuration ──
// Fill these in after creating your EmailJS account at https://www.emailjs.com
const EMAILJS_PUBLIC_KEY = ‘XswrkDZoHo8xk2BSc’;
const EMAILJS_SERVICE_ID = ‘service_38lmgps’;
const EMAILJS_TEMPLATE_PRESCHOOL = ‘template_preschool’; // Create this template
const EMAILJS_TEMPLATE_ART_ACADEMY = ‘template_art_academy’; // Create this template

// Initialise EmailJS
emailjs.init(EMAILJS_PUBLIC_KEY);

// ── State ──
let currentScreen = 0;
let isAfterSchool = false;
const totalQuestions = 10;
const afterSchoolSteps = [‘as1’, ‘as2’, ‘as3’, ‘as4’, ‘as5’];

// Answer store — field names preserved for EmailJS compatibility
const answers = {
Radio: ”, // Q1: age
RadioE: ”, // Q2: emotional (what do you want for your child)
Radio1: ”, // Q3: goals / what matters most
Radio2: ”, // Q4: new environments
Radio3: ”, // Q5: skills focus
Radio4: ”, // Q6: social / friendships
Checkbox: [], // Q7: activities (multi-select)
Radio5: ”, // Q8: learning approach
Radio6: ”, // Q9: starting school milestone
Radio7: ” // Q10: coping with mistakes
};

// After school answer store
const asAnswers = { as1: ”, as2: ”, as3: ”, as4: ” };
const asStepField = { as1: ‘Radio1’, as2: ‘Radio5’, as3: ‘Radio3’, as4: ‘Radio7’ };

// Maps question number → answers key (index = questionNum – 1)
// null = checkbox question (Q7), handled separately
const radioFields = [‘Radio’, ‘RadioE’, ‘Radio1’, ‘Radio2’, ‘Radio3’, ‘Radio4’, null, ‘Radio5’, ‘Radio6’, ‘Radio7’];

// ── Session Recommendation ──
const recData = {
gentle: {
icon: ‘����’,
badge: ’90-Minute Gentle Session’,
title: ‘Your child is ready for a gentle start.’,
desc: ‘Based on your answers, we\’d love to welcome them into a 90-minute guided creative session — a calm, nurturing introduction where they settle in at their own pace, explore guided art experiences, and connect with a small group in a structured, predictable environment.’,
label: ’90-Minute Gentle Session’
},
double: {
icon: ‘🎨’,
badge: ‘3-Hour Creative Block’,
title: ‘Your child is ready to go deeper.’,
desc: ‘Based on your answers, we\’d love to invite them into a 3-hour Extended Creative Block — two flowing sessions of guided art, intentional skill-building, and small group connection. More time to explore. More room to thrive.’,
label: ‘3-Hour Extended Creative Block’
},
quad: {
icon: ‘✨’,
badge: ‘Signature Creative Intensive’,
title: ‘Your child is ready to go deep.’,
desc: ‘Based on your answers, your child is ready for our Signature Creative Intensive — an extended, structured creative experience with multiple guided projects, intentional skill-building across mediums, and the deep satisfaction that comes from mastering something meaningful.’,
label: ‘Signature Creative Intensive’
}
};

function calcRecommendation() {
let score = 0;

// Q1 — Age (Radio)
if (answers.Radio === ‘3–4 years old’) score += 1;
if (answers.Radio === ‘4–5 years old’) score += 2;

// Q4 — New environments (Radio2)
if (answers.Radio2 === ‘A little shy or anxious at first’) score += 0;
else if (answers.Radio2 === ‘Needs some time to warm up’) score += 1;
else if (answers.Radio2 === ‘Excited and curious’ || answers.Radio2 === ‘Very comfortable and confident’) score += 3;

// Q8 — Learning approach (Radio5)
if (answers.Radio5 === ‘They need a little time to warm up’ || answers.Radio5 === ‘They prefer to watch first, then try’) score += 1;
else if (answers.Radio5 === ‘They love having lots of time to master a skill’) score += 2;
else if (answers.Radio5 === ‘They dive right in with excitement’) score += 3;

// Q10 — Coping (Radio7)
if (answers.Radio7 === ‘They feel frustrated but will try again’) score += 1;
else if (answers.Radio7 === ‘They usually stay calm and keep going’) score += 3;

if (score <= 3) return 'gentle';
if (score = 0) pct = Math.round(((asIndex + 2) / 7) * 100);
else if (currentScreen === 11) pct = 90;
else pct = 0;
} else {
pct = currentScreen === 0 ? 0 : Math.round((currentScreen / (totalQuestions + 1)) * 100);
}
document.getElementById(‘progressFill’).style.width = pct + ‘%’;
}

// ── Screen navigation ──
function showScreen(n) {
document.querySelectorAll(‘.screen’).forEach(s => s.classList.remove(‘active’));
document.getElementById(‘screen-‘ + n).classList.add(‘active’);
currentScreen = n;
updateProgress();
window.scrollTo({ top: 0, behavior: ‘smooth’ });

// When reaching the results screen, populate recommendation or Art Academy preview
if (n === 11) {
if (isAfterSchool) {
document.getElementById(‘recCard’).style.display = ‘none’;
document.getElementById(‘resultPreview’).style.display = ‘block’;
document.getElementById(‘resultPreviewText’).textContent =
‘🎨 Based on your answers, we\’ll send you full details on the Mini Ivy Art Academy — plus how to book a Discovery Session session.’;
} else {
document.getElementById(‘resultPreview’).style.display = ‘none’;
const tier = calcRecommendation();
const rec = recData[tier];
const card = document.getElementById(‘recCard’);
card.className = ‘rec-card ‘ + tier;
card.style.display = ‘block’;
document.getElementById(‘recIcon’).textContent = rec.icon;
document.getElementById(‘recBadge’).textContent = rec.badge;
document.getElementById(‘recTitle’).textContent = rec.title;
document.getElementById(‘recDesc’).textContent = rec.desc;
}
}
}

function startQuiz() {
showScreen(1);
}

function goBack() {
if (currentScreen === 11 && isAfterSchool) {
showScreen(‘as5’);
} else if (currentScreen > 1) {
showScreen(currentScreen – 1);
} else {
showScreen(0);
}
}

// ── After School pathway ──
function selectAfterSchool(card) {
isAfterSchool = true;
document.querySelectorAll(‘#answers-1 .answer-card’).forEach(c => c.classList.remove(‘selected’));
card.classList.add(‘selected’);
answers.Radio = ‘5–10 years old (Art Academy)’;
setTimeout(() => { showScreen(‘as1’); }, 420);
}

// “6+ years old” now also routes to Art Academy
function selectSixPlus(card) {
isAfterSchool = true;
document.querySelectorAll(‘#answers-1 .answer-card’).forEach(c => c.classList.remove(‘selected’));
card.classList.add(‘selected’);
answers.Radio = ‘6+ years old (Art Academy)’;
setTimeout(() => { showScreen(‘as1’); }, 420);
}

// ── Answer selection ──
function selectAnswer(questionNum, card, value) {
const allCards = document.querySelectorAll(‘#answers-‘ + questionNum + ‘ .answer-card’);
allCards.forEach(c => c.classList.remove(‘selected’));
card.classList.add(‘selected’);

if (typeof questionNum === ‘string’ && questionNum.startsWith(‘as’)) {
// After school path
asAnswers[questionNum] = value;
const field = asStepField[questionNum];
if (field) answers[field] = value;
const nextBtn = document.getElementById(‘next-‘ + questionNum);
if (nextBtn) nextBtn.classList.add(‘visible’);
setTimeout(() => {
const idx = afterSchoolSteps.indexOf(questionNum);
if (idx { goNext(questionNum); }, 420);
}
}

function goNextAfterSchool(current, next) {
if (!asAnswers[current] && current !== ‘as5’) return;
showScreen(next);
}

function goBackAfterSchool(current) {
const idx = afterSchoolSteps.indexOf(current);
if (idx > 0) showScreen(afterSchoolSteps[idx – 1]);
else showScreen(1);
}

function toggleCheckbox(card, value) {
card.classList.toggle(‘selected’);
if (card.classList.contains(‘selected’)) {
if (!answers.Checkbox.includes(value)) answers.Checkbox.push(value);
} else {
answers.Checkbox = answers.Checkbox.filter(v => v !== value);
}
}

function goNext(questionNum) {
const field = radioFields[questionNum – 1];
if (field && !answers[field]) return; // require answer for radio Qs
if (questionNum < totalQuestions) {
showScreen(questionNum + 1);
} else {
showScreen(11);
}
}

// ── Validation ──
function validateEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

// ── Submission ──
function submitQuiz() {
const firstName = document.getElementById('firstName').value.trim();
const lastName = document.getElementById('lastName').value.trim();
const email = document.getElementById('emailInput').value.trim();

if (!firstName) { alert('Please enter your first name.'); return; }
if (!email || !validateEmail(email)) { alert('Please enter a valid email address.'); return; }

const btn = document.querySelector('.btn-submit');
btn.disabled = true;
btn.textContent = 'Sending…';

const templateId = isAfterSchool
? EMAILJS_TEMPLATE_ART_ACADEMY
: EMAILJS_TEMPLATE_PRESCHOOL;

const sessionRec = isAfterSchool
? 'Art Academy Program'
: recData[calcRecommendation()].label;

const templateParams = {
to_email: email,
first_name: firstName,
last_name: lastName,
pathway: isAfterSchool ? 'Art Academy' : 'Preschool',
session_recommendation: sessionRec,
parent_dream: answers.RadioE || '', // New emotional Q answer
};

emailjs.send(SERVICE_ID, templateId, templateParams)
.then(function(response) {
// ── Klaviyo: capture quiz lead ──────────────────────────────────────
if (typeof klaviyo !== 'undefined') {
klaviyo.push(['identify', {
'$email': templateParams.to_email,
'$first_name': templateParams.first_name,
'$last_name': templateParams.last_name,
'Quiz Pathway': templateParams.pathway,
'Session Recommendation': templateParams.session_recommendation,
'Parent Dream': templateParams.parent_dream,
'Quiz Completed Date': new Date().toISOString()
}]);
klaviyo.push(['track', 'Quiz Completed', {
'Pathway': templateParams.pathway,
'Session Recommendation': templateParams.session_recommendation,
'Parent Dream': templateParams.parent_dream
}]);
}
// ── End Klaviyo ───────────────────────────────────────────────────
// ── Klaviyo: subscribe to email marketing ───────────────────────────
fetch('https://a.klaviyo.com/client/subscriptions/?company_id=TcWbJF', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'revision': '2024-10-15' },
body: JSON.stringify({ data: {
type: 'subscription',
attributes: {
custom_source: 'Mini Ivy Quiz',
profile: { data: { type: 'profile', attributes: {
email: templateParams.to_email,
first_name: templateParams.first_name,
last_name: templateParams.last_name,
properties: {
'Quiz Pathway': templateParams.pathway,
'Session Recommendation': templateParams.session_recommendation,
'Parent Dream': templateParams.parent_dream
}
}}}
},
relationships: {
list: { data: { type: 'list', id: 'RJdzqq' } }
}
}})
});
// ── End Klaviyo subscribe ─────────────────────────────────────────
window.location.href = 'https://miniivy.com.au/thank-you-quiz/';
})
.catch(function(err) {
console.error('EmailJS error:', err);
});;;
}