<!-- =================================================================== KhooCommerce quiz: Take the Amazon Vendor integration challenge Paste this whole block where the quiz should appear. To change wording, colours or HubSpot settings, edit the CONFIGURATION section below. Do not add HubSpot's embed script separately: the quiz loads it once, on the final screen. =================================================================== --> <style> /* ========================================================================== KhooCommerce quiz styles Every rule is scoped to .khoo-quiz so host page headings, buttons and forms are untouched. Colours come from the config file (set as CSS variables on the root element at start-up); the values below are fallbacks only. ========================================================================== */ .khoo-quiz { --kq-primary: #1c647d; --kq-accent: #ff5131; --kq-yellow: #ffcf59; --kq-dark: #10313e; --kq-off: #fbf8f7; --kq-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --kq-border: #d5dfe3; --kq-muted: #4a6470; /* 6.3:1 on white */ --kq-tint: #eef4f6; /* light primary tint for feedback panel */ box-sizing: border-box; display: block; width: 100%; max-width: 720px; margin: 0 auto; padding: 28px 28px 32px; background: #ffffff; border: 1px solid var(--kq-border); border-radius: 12px; color: var(--kq-dark); font-family: var(--kq-font); font-size: 17px; line-height: 1.6; text-align: left; -webkit-font-smoothing: antialiased; } .khoo-quiz *, .khoo-quiz *::before, .khoo-quiz *::after { box-sizing: border-box; } /* Neutralise common host-page element styles inside the quiz */ .khoo-quiz h2, .khoo-quiz h3, .khoo-quiz p, .khoo-quiz fieldset, .khoo-quiz legend, .khoo-quiz ul, .khoo-quiz li { margin: 0; padding: 0; border: 0; font-family: inherit; letter-spacing: normal; text-transform: none; background: none; } .khoo-quiz ul { list-style: none; } .khoo-quiz p { font-size: 17px; line-height: 1.6; color: var(--kq-dark); } .khoo-quiz p + p { margin-top: 12px; } .khoo-quiz [hidden] { display: none !important; } /* Logo ------------------------------------------------------------------ */ .khoo-quiz .kq-logo { display: block; width: 190px; max-width: 55%; height: auto; /* keeps the supplied proportions */ margin: 0 0 24px; border: 0; } /* Headings -------------------------------------------------------------- */ .khoo-quiz .kq-title { color: var(--kq-primary); font-size: 28px; font-weight: 700; line-height: 1.25; margin: 0 0 10px; } .khoo-quiz .kq-subheading { font-size: 19px; font-weight: 600; line-height: 1.45; margin: 0 0 16px; } .khoo-quiz .kq-q-title { color: var(--kq-primary); font-size: 23px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; } .khoo-quiz .kq-title:focus, .khoo-quiz .kq-q-title:focus { outline: none; } .khoo-quiz .kq-title:focus-visible, .khoo-quiz .kq-q-title:focus-visible { outline: 3px solid var(--kq-primary); outline-offset: 4px; border-radius: 4px; } /* Progress -------------------------------------------------------------- */ .khoo-quiz .kq-progress { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; } .khoo-quiz .kq-progress-text { font-size: 15px; font-weight: 600; color: var(--kq-dark); white-space: nowrap; margin: 0; } .khoo-quiz .kq-progress-bar { display: flex; gap: 6px; flex: 1 1 auto; max-width: 260px; } .khoo-quiz .kq-progress-seg { flex: 1 1 0; height: 8px; border-radius: 4px; background: #ffffff; border: 1px solid var(--kq-muted); } .khoo-quiz .kq-progress-seg.is-filled { background: var(--kq-yellow); border-color: var(--kq-dark); } /* Scenario -------------------------------------------------------------- */ .khoo-quiz .kq-scenario { margin: 0 0 18px; } .khoo-quiz .kq-fieldset { min-width: 0; } .khoo-quiz .kq-prompt { display: block; width: 100%; font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--kq-dark); margin: 0 0 12px; float: none; } /* Answer cards ---------------------------------------------------------- */ .khoo-quiz .kq-answers { display: grid; gap: 10px; } .khoo-quiz .kq-answer { position: relative; display: flex; align-items: flex-start; gap: 14px; min-height: 56px; padding: 14px 16px; margin: 0; background: #ffffff; border: 2px solid var(--kq-border); border-radius: 10px; cursor: pointer; font-size: 17px; line-height: 1.5; font-weight: 400; color: var(--kq-dark); transition: border-color 120ms ease, background-color 120ms ease; } .khoo-quiz .kq-answer:hover { border-color: var(--kq-primary); background: var(--kq-off); } /* Native radio kept for accessibility, visually hidden */ .khoo-quiz .kq-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } /* Letter badge doubles as the radio indicator */ .khoo-quiz .kq-letter { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: -2px; border-radius: 50%; border: 2px solid var(--kq-primary); background: #ffffff; color: var(--kq-primary); font-size: 15px; font-weight: 700; line-height: 1; } .khoo-quiz .kq-answer-text { flex: 1 1 auto; padding-top: 1px; } .khoo-quiz .kq-tag { display: table; /* sits on its own line under the answer text */ margin: 8px 0 0; font-size: 13px; font-weight: 600; line-height: 1.2; padding: 4px 10px; border-radius: 999px; background: var(--kq-yellow); color: var(--kq-dark); white-space: nowrap; } /* Selected: thicker primary border, filled badge with tick, "Your answer" tag */ .khoo-quiz .kq-answer.is-selected { border-color: var(--kq-primary); background: var(--kq-off); box-shadow: inset 0 0 0 1px var(--kq-primary); } .khoo-quiz .kq-answer.is-selected .kq-letter { background: var(--kq-primary); color: #ffffff; } /* Keyboard focus on the hidden radio shows on the card */ .khoo-quiz .kq-radio:focus-visible + .kq-letter { outline: none; } .khoo-quiz .kq-answer:has(.kq-radio:focus-visible) { outline: 3px solid var(--kq-primary); outline-offset: 3px; } .khoo-quiz .kq-answer.has-focus { outline: 3px solid var(--kq-primary); outline-offset: 3px; } /* After checking: unselected options stay readable but step back */ .khoo-quiz .kq-answers.is-checked .kq-answer:not(.is-selected) { background: #ffffff; border-color: var(--kq-border); } .khoo-quiz .kq-answers.is-checked .kq-answer:not(.is-selected) .kq-answer-text { color: var(--kq-muted); } /* Feedback -------------------------------------------------------------- */ .khoo-quiz .kq-feedback { margin: 18px 0 0; padding: 16px 18px; background: var(--kq-tint); border-left: 4px solid var(--kq-primary); border-radius: 0 10px 10px 0; } .khoo-quiz .kq-feedback:focus { outline: none; } .khoo-quiz .kq-feedback:focus-visible { outline: 2px solid var(--kq-primary); outline-offset: 3px; } .khoo-quiz .kq-feedback-heading { font-size: 15px; font-weight: 700; color: var(--kq-primary); margin: 0 0 6px; } .khoo-quiz .kq-feedback-text { font-size: 17px; } .khoo-quiz .kq-hint { margin: 12px 0 0; font-size: 15px; font-weight: 600; color: var(--kq-dark); } .khoo-quiz .kq-hint::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--kq-yellow); border: 1px solid var(--kq-dark); vertical-align: 1px; } /* Buttons --------------------------------------------------------------- */ .khoo-quiz .kq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0 0; } .khoo-quiz .kq-actions .kq-btn-primary { margin-left: auto; } .khoo-quiz .kq-actions--start .kq-btn-primary { margin-left: 0; } .khoo-quiz .kq-btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 10px 22px; border-radius: 8px; font-family: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; text-transform: none; letter-spacing: normal; cursor: pointer; box-shadow: none; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } .khoo-quiz .kq-btn:focus { outline: none; } .khoo-quiz .kq-btn:focus-visible { outline: 3px solid var(--kq-primary); outline-offset: 3px; } /* Orange button: white label. Kept at 19px bold so it counts as large text under WCAG, where white on this orange (3.2:1) meets the 3:1 minimum. */ .khoo-quiz .kq-btn-primary { background: var(--kq-accent); color: #ffffff; border: 2px solid var(--kq-accent); font-size: 19px; } .khoo-quiz .kq-btn-primary:hover { background: var(--kq-dark); border-color: var(--kq-dark); color: #ffffff; } .khoo-quiz .kq-btn-primary[aria-disabled="true"] { background: #ffffff; border-color: var(--kq-muted); color: var(--kq-muted); cursor: not-allowed; } .khoo-quiz .kq-btn-secondary { background: #ffffff; color: var(--kq-primary); border: 2px solid var(--kq-primary); font-size: 17px; } .khoo-quiz .kq-btn-secondary:hover { background: var(--kq-off); color: var(--kq-dark); border-color: var(--kq-dark); } /* Back arrow drawn with CSS so no icon font is needed */ .khoo-quiz .kq-btn-back::before { content: ""; width: 8px; height: 8px; margin-right: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } /* Enquiry screen -------------------------------------------------------- */ .khoo-quiz .kq-form-wrap { margin: 22px 0 0; padding: 18px; background: var(--kq-off); border-radius: 10px; min-height: 120px; } .khoo-quiz .kq-form-status { font-size: 15px; color: var(--kq-muted); } .khoo-quiz .kq-skip { margin: 18px 0 0; } /* Closing screen -------------------------------------------------------- */ .khoo-quiz .kq-closing { padding: 4px 0 0; } .khoo-quiz .kq-closing .kq-title { margin-bottom: 12px; } /* Screen-reader only ---------------------------------------------------- */ .khoo-quiz .kq-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Small screens --------------------------------------------------------- */ @media (max-width: 560px) { .khoo-quiz { padding: 20px 16px 24px; border-radius: 10px; } .khoo-quiz .kq-logo { width: 160px; margin-bottom: 18px; } .khoo-quiz .kq-title { font-size: 24px; } .khoo-quiz .kq-q-title { font-size: 21px; } .khoo-quiz .kq-progress { flex-wrap: wrap; gap: 8px; } .khoo-quiz .kq-progress-bar { max-width: none; flex-basis: 100%; } .khoo-quiz .kq-answer { padding: 12px 12px; gap: 12px; } .khoo-quiz .kq-actions .kq-btn { flex: 1 1 100%; } .khoo-quiz .kq-actions .kq-btn-primary { margin-left: 0; order: -1; } .khoo-quiz .kq-form-wrap { padding: 12px; } } /* Reduced motion -------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .khoo-quiz *, .khoo-quiz *::before, .khoo-quiz *::after { transition: none !important; animation: none !important; } } </style> <div class="khoo-quiz" data-khoo-quiz></div> <script> /* ========================================================================== KhooCommerce quiz: "Take the Amazon Vendor integration challenge" CONFIGURATION -------------------------------------------------------------------------- Everything you are likely to edit lives in this file: 1. Quiz version 2. Branding (colours, font, logo) 3. Welcome screen copy 4. Questions, answer options, answer-specific feedback, best answers 5. Interface labels (buttons, progress text) 6. Enquiry screen and closing screen copy 7. HubSpot form identifiers 8. HubSpot answer-property mapping (switched OFF until configured) Question order = the order of the items in `questions` below. Answer ids (A–D) are used internally. They are never shown as a score. ========================================================================== */ window.KHOO_QUIZ_CONFIG = { /* 1. QUIZ VERSION ------------------------------------------------------ */ version: "1.0.0", /* 2. BRANDING ---------------------------------------------------------- */ brand: { colours: { primary: "#1c647d", // headings, selected answer borders, focus accents accent: "#ff5131", // primary action buttons (white label, 19px bold) yellow: "#ffcf59", // progress indicator and small highlights only textDark: "#10313e", // body text and strong contrast offWhite: "#fbf8f7" // subtle background sections and feedback panels }, // Poppins is used if the host page already loads it. No font files are loaded here. fontFamily: "'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif", // Logo: hidden. To show one, paste the logo's full URL between the quotes. logoSrc: "", logoAlt: "KhooCommerce", // Space (px) left above the quiz when it scrolls a new question into view. // Increase this if the host page has a sticky header. scrollOffset: 24 }, /* 3. WELCOME SCREEN ---------------------------------------------------- */ welcome: { title: "Take the Amazon Vendor integration challenge", subheading: "Your systems are connected. What happens when things don’t go to plan?", intro: [ "The warehouse finds damaged stock. A shipment update doesn’t go through. Finance is chasing a payment difference. Does your integration handle it, or does someone have to step in?", "Five scenarios covering orders, stock, shipments and payments. Pick your next move and find out what you might have missed." ], startButton: "Test my know-how" }, /* 4. QUESTIONS --------------------------------------------------------- */ questions: [ { id: "q1", topic: "Stock availability", title: "Two systems. Two stock figures.", scenario: "An Amazon Vendor PO lands. Your ERP says there’s enough stock. The warehouse system shows less, and some units are already promised to another customer.", prompt: "Which figure do you use to decide what you can supply?", bestAnswer: "C", answers: [ { id: "A", text: "The warehouse count. If it’s on the shelf, we can ship it.", feedback: "Some of those units already belong to another order. Using the shelf count could leave two customers expecting the same stock. You need a figure that accounts for existing commitments and anything that can’t be supplied." }, { id: "B", text: "The ERP figure. That’s what the integration uses.", feedback: "It might be the right figure, but what does it include? Before relying on it, check whether allocations, damaged goods and recent warehouse movements are reflected. An integration can pass a number between systems without checking whether it’s the number you need." }, { id: "C", text: "Available stock, after accounting for allocations and anything we can’t supply.", feedback: "That’s the best choice. You’re checking what the business can actually commit to this order. The team also needs an agreed way to resolve the difference between the two systems, so the same question doesn’t come up with every PO." }, { id: "D", text: "Yesterday’s report. We’ll adjust it for anything the team flags.", feedback: "That leaves today’s decision dependent on yesterday’s information and everyone’s memory. An allocation or stock movement could easily be missed. Check what’s changed before committing stock to the Amazon Vendor order." } ] }, { id: "q2", topic: "Changes during packing", title: "The order’s packed. Almost.", scenario: "The warehouse is packing an Amazon Vendor order and discovers damaged stock. There aren’t enough good units to send the quantity planned.", prompt: "What happens next?", bestAnswer: "B", answers: [ { id: "A", text: "Change the invoice. The rest of the paperwork is already done.", feedback: "Finance might have the right quantity, but the shipment information could still describe goods that aren’t leaving. Check which changes are allowed at this stage and which records or documents need updating before the order moves on." }, { id: "B", text: "Check what changes are allowed, flag the shortage and bring the affected records into line.", feedback: "That’s the best choice. The shortage needs handling while the team can still act on it. Depending on the order’s stage, that may involve shipment records, labels, invoicing and someone approving the next step." }, { id: "C", text: "Update the warehouse system. The integration should pick it up.", feedback: "“Should” is doing a lot of work here. Does that update reach the other systems, and how would you know if it didn’t? Check which records change automatically and what someone still needs to do." }, { id: "D", text: "Send what we’ve got. Finance can explain the difference later.", feedback: "That gives finance a mystery to solve after the goods have left. Flagging the shortage now gives the team a chance to deal with it before dispatch, following the applicable Amazon Vendor requirements." } ] }, { id: "q3", topic: "Transaction monitoring", title: "It says “submitted”. Job done?", scenario: "Your integration says an Amazon Vendor transaction has been submitted. Everyone moves on to the next order.", prompt: "Are you happy to leave it there?", bestAnswer: "D", answers: [ { id: "A", text: "Yes. It’s left our system, so that’s finished.", feedback: "You know it was sent. You may not yet know whether it was processed successfully. The checks depend on the transaction and connection method, but someone needs visibility if it fails." }, { id: "B", text: "No confirmation yet? Send it again.", feedback: "A delay doesn’t necessarily mean a failure. Sending it again without checking could create duplicate submissions or make the problem harder to trace. Check the relevant status before deciding whether to retry." }, { id: "C", text: "Someone can check Amazon Vendor Central when they get a minute.", feedback: "Who’s “someone”, and when’s that minute? A manual check can work, but it needs an owner, a timeframe and a clear next step if something has failed. Otherwise, everyone can assume somebody else checked." }, { id: "D", text: "Check the relevant processing outcome and send any errors to the person responsible.", feedback: "That’s the best choice. The workflow needs to account for what happens after submission, using the checks available for that transaction. An error also needs to reach someone who knows what to do with it." } ] }, { id: "q4", topic: "Payment reconciliation", title: "Finance has a question. Again.", scenario: "An Amazon Vendor payment comes in lower than expected. Finance asks what happened.", prompt: "What would help them get to the bottom of it?", bestAnswer: "A", answers: [ { id: "A", text: "The remittance details, alongside the linked invoice, order and shipment records.", feedback: "That’s the best starting point. Finance can follow what was ordered, dispatched, invoiced and paid, then investigate the difference using the available evidence. It saves starting with a round of “does anyone remember this order?”" }, { id: "B", text: "The invoice and the bank payment. That shows what’s missing.", feedback: "It shows the difference, but not necessarily the reason. The remittance details and related order and shipment records help finance establish what happened before deciding how to respond." }, { id: "C", text: "The original PO. The warehouse says it all went out.", feedback: "That’s useful context, but finance needs more than a verbal confirmation. The shipment records, invoice and remittance information help them trace the payment and investigate any discrepancy." }, { id: "D", text: "Last month’s deduction. It’s about the same amount.", feedback: "It might offer a clue, but a similar amount doesn’t mean the same cause. Check the records for this payment before sending the team down the wrong investigation." } ] }, { id: "q5", topic: "Ownership of requirement changes", title: "A requirement changes. Who’s on it?", scenario: "An Amazon Vendor requirement changes. It affects a workflow your team uses every day.", prompt: "What have you already agreed?", bestAnswer: "C", answers: [ { id: "A", text: "We know who to call if a shipment gets rejected.", feedback: "That’s useful once something goes wrong. Who checks whether the process needs changing beforehand? Give someone responsibility for assessing the requirement and preparing the affected workflow." }, { id: "B", text: "The team will update its instructions. The integration can stay as it is.", feedback: "It might be able to, but that needs checking. A change can affect system rules, data and documents as well as people’s tasks. Review the affected steps so the instructions and integration still work together." }, { id: "C", text: "There’s a named owner for reviewing the change, arranging updates and testing the affected steps.", feedback: "That’s the best choice. Everyone knows who’s coordinating the work, including what the supplier handles and what falls to your team. Testing the affected steps helps catch problems before people rely on the updated process." }, { id: "D", text: "We’ll forward the email to our software supplier. They’ll handle it.", feedback: "They may handle part or all of it, but make sure that’s agreed. Ask what they’ll assess, update and test, and what your team needs to do. Forwarding the email alone doesn’t confirm that anyone has taken ownership." } ] } ], /* 5. INTERFACE LABELS -------------------------------------------------- */ labels: { progress: "Question of ", // and are filled in automatically checkAnswer: "Check my answer", nextQuestion: "Next question", finish: "Finish the challenge", back: "Back", chooseFirst: "Choose an answer first, then check it.", yourAnswer: "Your answer", feedbackHeading: "About your answer ()", formLoading: "Loading the form…", formSlow: "The form is taking longer than usual to load. Refreshing the page usually sorts it." }, /* 6. ENQUIRY AND CLOSING SCREENS -------------------------------------- */ enquiry: { heading: "Did any of the feedback surprise you?", body: [ "Perhaps you knew the best answer, but also knew that’s not quite how it happens at work. Or a question made you wonder what your integration actually handles.", "Leave your details and tell us what caught your attention. The KhooCommerce team will be in touch to discuss how it works in your business and where you might need a hand." ], skipButton: "All done for now" }, closing: { heading: "Thanks for taking the challenge.", body: "If a question sounded familiar, try it on the team. Do you all agree on what happens next, and who handles it?" }, /* 7. HUBSPOT FORM ------------------------------------------------------ */ hubspot: { region: "eu1", portalId: "144571216", formId: "0cc07fb4-5da7-4361-a52d-67fa8301dd28", scriptSrc: "https://js-eu1.hsforms.net/forms/embed/144571216.js", /* 8. OPTIONAL: PASS QUIZ ANSWERS TO HUBSPOT --------------------------- NOT CONFIGURED. Leave `enabled: false` until real property names exist. To set up: a) In HubSpot, create contact properties for the answers (single-line text is simplest). b) Add each one to this form as a HIDDEN field. c) Enter the field names below. For the new forms editor, names take the form "0-1/<property_internal_name>" (0-1 = contact object). d) Set `enabled: true`, submit a test entry and check the contact record in HubSpot before relying on it. Values are written into the form's hidden fields with HubSpot's documented HubSpotFormsV4 setFieldValue() method once the form is ready. They only leave the browser if the visitor submits the form. Leave any field name blank to skip it. */ answerMapping: { enabled: false, fields: { q1: "", // e.g. "0-1/amazon_quiz_q1" (do not use until it exists in HubSpot) q2: "", q3: "", q4: "", q5: "", version: "" // optional: stores the quiz version above }, // "letter" → "C" // "letter_and_text" → "C: Available stock, after accounting for…" valueFormat: "letter_and_text" } } }; </script> <script> /* ========================================================================== KhooCommerce quiz: behaviour You should not need to edit this file. Wording, order, branding and HubSpot settings live in khoo-quiz-config.js. - Answers are kept in memory for this page visit only. - Nothing is sent anywhere by this script. The only network request it makes is loading HubSpot's own form embed script, once, when the enquiry screen first appears. ========================================================================== */ (function () { 'use strict'; var CFG = window.KHOO_QUIZ_CONFIG; var root = document.querySelector('[data-khoo-quiz]'); if (!CFG || !root || root.getAttribute('data-kq-ready') === 'true') { return; } root.setAttribute('data-kq-ready', 'true'); var QS = CFG.questions; var L = CFG.labels; var HS = CFG.hubspot; var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; /* ---------- State (memory only) ---------- */ var state = { index: 0, answers: {} // { q1: { selected: "C", checked: true }, ... } }; QS.forEach(function (q) { state.answers[q.id] = { selected: null, checked: false }; }); var hsState = { requested: false, ready: false, mapped: false }; /* ---------- Helpers ---------- */ function el(tag, attrs, children) { var node = document.createElement(tag); if (attrs) { Object.keys(attrs).forEach(function (k) { var v = attrs[k]; if (v === null || v === undefined || v === false) { return; } if (k === 'class') { node.className = v; } else if (k === 'text') { node.textContent = v; } else if (k === 'hidden') { node.hidden = true; } else { node.setAttribute(k, v === true ? '' : v); } }); } (children || []).forEach(function (c) { if (c) { node.appendChild(typeof c === 'string' ? document.createTextNode(c) : c); } }); return node; } function fill(str, map) { return str.replace(/\{(\w+)\}/g, function (m, k) { return map[k] !== undefined ? map[k] : m; }); } function findAnswer(q, id) { for (var i = 0; i < q.answers.length; i++) { if (q.answers[i].id === id) { return q.answers[i]; } } return null; } /* Bring the top of the quiz into view only if needed, then focus the heading */ function focusHeading(heading, anchor) { var offset = (CFG.brand && CFG.brand.scrollOffset) || 0; var rect = (anchor || heading).getBoundingClientRect(); var vh = window.innerHeight || document.documentElement.clientHeight; if (rect.top < offset || rect.top > vh * 0.6) { var top = window.pageYOffset + rect.top - offset; try { window.scrollTo({ top: top, behavior: reduceMotion ? 'auto' : 'smooth' }); } catch (e) { window.scrollTo(0, top); } } heading.focus({ preventScroll: true }); } /* ---------- Branding ---------- */ var c = (CFG.brand && CFG.brand.colours) || {}; if (c.primary) { root.style.setProperty('--kq-primary', c.primary); } if (c.accent) { root.style.setProperty('--kq-accent', c.accent); } if (c.yellow) { root.style.setProperty('--kq-yellow', c.yellow); } if (c.textDark) { root.style.setProperty('--kq-dark', c.textDark); } if (c.offWhite) { root.style.setProperty('--kq-off', c.offWhite); } if (CFG.brand && CFG.brand.fontFamily) { root.style.setProperty('--kq-font', CFG.brand.fontFamily); } /* ---------- Static frame ---------- */ root.textContent = ''; root.setAttribute('data-quiz-version', CFG.version || ''); if (!root.getAttribute('aria-label')) { root.setAttribute('aria-label', CFG.welcome.title); } if (!root.getAttribute('role')) { root.setAttribute('role', 'region'); } if (CFG.brand && CFG.brand.logoSrc) { root.appendChild(el('img', { class: 'kq-logo', src: CFG.brand.logoSrc, alt: CFG.brand.logoAlt || 'KhooCommerce', width: '1770', height: '227', decoding: 'async' })); } var stage = el('div', { class: 'kq-stage' }); root.appendChild(stage); var screens = { welcome: el('section', { class: 'kq-screen kq-welcome' }), question: el('section', { class: 'kq-screen kq-question', hidden: true }), enquiry: el('section', { class: 'kq-screen kq-enquiry', hidden: true }), closing: el('section', { class: 'kq-screen kq-closing', hidden: true }) }; Object.keys(screens).forEach(function (k) { stage.appendChild(screens[k]); }); function show(name) { Object.keys(screens).forEach(function (k) { screens[k].hidden = (k !== name); }); } /* ---------- Welcome ---------- */ (function buildWelcome() { var w = CFG.welcome; var s = screens.welcome; s.appendChild(el('h2', { class: 'kq-title', id: 'kq-welcome-title', tabindex: '-1', text: w.title })); s.appendChild(el('p', { class: 'kq-subheading', text: w.subheading })); w.intro.forEach(function (p) { s.appendChild(el('p', { text: p })); }); var start = el('button', { type: 'button', class: 'kq-btn kq-btn-primary', text: w.startButton }); start.addEventListener('click', function () { state.index = 0; renderQuestion(); }); s.appendChild(el('div', { class: 'kq-actions kq-actions--start' }, [start])); s.setAttribute('aria-labelledby', 'kq-welcome-title'); })(); /* ---------- Question ---------- */ function renderQuestion() { var i = state.index; var q = QS[i]; var a = state.answers[q.id]; var total = QS.length; var progressText = fill(L.progress, { current: i + 1, total: total }); var s = screens.question; s.textContent = ''; s.setAttribute('aria-labelledby', 'kq-q-title'); s.setAttribute('data-question', q.id); // Progress var bar = el('div', { class: 'kq-progress-bar', 'aria-hidden': 'true' }); for (var n = 0; n < total; n++) { bar.appendChild(el('span', { class: 'kq-progress-seg' + (n <= i ? ' is-filled' : '') })); } s.appendChild(el('div', { class: 'kq-progress' }, [ el('p', { class: 'kq-progress-text', 'aria-hidden': 'true', text: progressText }), bar ])); // Heading (progress repeated for screen readers so it is read on focus) var heading = el('h2', { class: 'kq-q-title', id: 'kq-q-title', tabindex: '-1' }, [ el('span', { class: 'kq-sr', text: progressText + ': ' }), q.title ]); s.appendChild(heading); s.appendChild(el('p', { class: 'kq-scenario', text: q.scenario })); // Answers var list = el('div', { class: 'kq-answers' }); var cards = []; q.answers.forEach(function (ans) { var input = el('input', { type: 'radio', class: 'kq-radio', name: 'kq-' + q.id, value: ans.id, id: 'kq-' + q.id + '-' + ans.id }); if (a.selected === ans.id) { input.checked = true; } var card = el('label', { class: 'kq-answer', for: input.id, 'data-answer': ans.id }, [ input, el('span', { class: 'kq-letter', 'aria-hidden': 'true', text: ans.id }), el('span', { class: 'kq-answer-text' }, [ el('span', { class: 'kq-sr', text: ans.id + '. ' }), ans.text, el('span', { class: 'kq-tag', 'aria-hidden': 'true', hidden: true, text: L.yourAnswer }) ]) ]); input.addEventListener('change', function () { onSelect(q, ans.id); }); input.addEventListener('focus', function () { var kb = true; try { kb = input.matches(':focus-visible'); } catch (e) {} if (kb) { card.classList.add('has-focus'); } }); input.addEventListener('blur', function () { card.classList.remove('has-focus'); }); cards.push(card); list.appendChild(card); }); s.appendChild(el('fieldset', { class: 'kq-fieldset' }, [ el('legend', { class: 'kq-prompt', text: q.prompt }), list ])); var feedbackSlot = el('div', { class: 'kq-feedback-slot' }); s.appendChild(feedbackSlot); var hint = el('p', { class: 'kq-hint', role: 'alert', hidden: true }); s.appendChild(hint); // Actions var actions = el('div', { class: 'kq-actions' }); if (i > 0) { var back = el('button', { type: 'button', class: 'kq-btn kq-btn-secondary kq-btn-back', text: L.back }); back.addEventListener('click', function () { state.index -= 1; renderQuestion(); }); actions.appendChild(back); } var check = el('button', { type: 'button', class: 'kq-btn kq-btn-primary kq-check', text: L.checkAnswer }); var next = el('button', { type: 'button', class: 'kq-btn kq-btn-primary kq-next', text: i === total - 1 ? L.finish : L.nextQuestion }); check.addEventListener('click', function () { onCheck(q); }); next.addEventListener('click', function () { if (!state.answers[q.id].checked) { return; } if (state.index < total - 1) { state.index += 1; renderQuestion(); } else { showEnquiry(); } }); actions.appendChild(check); actions.appendChild(next); s.appendChild(actions); // Keep references for updates s._kq = { q: q, list: list, cards: cards, feedbackSlot: feedbackSlot, hint: hint, check: check, next: next }; syncQuestion(false); show('question'); focusHeading(heading, s); } function syncQuestion(focusFeedback) { var r = screens.question._kq; var a = state.answers[r.q.id]; r.cards.forEach(function (card) { var on = card.getAttribute('data-answer') === a.selected; card.classList.toggle('is-selected', on); card.querySelector('.kq-tag').hidden = !on; }); r.list.classList.toggle('is-checked', a.checked); r.check.hidden = a.checked; r.check.setAttribute('aria-disabled', a.selected ? 'false' : 'true'); r.next.hidden = !a.checked; if (a.selected) { r.hint.hidden = true; r.hint.textContent = ''; } r.feedbackSlot.textContent = ''; if (a.checked && a.selected) { var ans = findAnswer(r.q, a.selected); var fbHeadingId = 'kq-fb-' + r.q.id; var panel = el('div', { class: 'kq-feedback', tabindex: '-1', role: 'group', 'aria-labelledby': fbHeadingId, 'data-feedback-for': a.selected }, [ el('p', { class: 'kq-feedback-heading', id: fbHeadingId, text: fill(L.feedbackHeading, { id: a.selected }) }), el('p', { class: 'kq-feedback-text', text: ans.feedback }) ]); r.feedbackSlot.appendChild(panel); if (focusFeedback) { panel.focus({ preventScroll: true }); try { panel.scrollIntoView({ block: 'nearest', behavior: reduceMotion ? 'auto' : 'smooth' }); } catch (e) { panel.scrollIntoView(false); } } } } function onSelect(q, id) { var a = state.answers[q.id]; if (a.selected !== id) { a.selected = id; a.checked = false; // changing an answer resets the checked state } syncQuestion(false); } function onCheck(q) { var a = state.answers[q.id]; var r = screens.question._kq; if (!a.selected) { r.hint.textContent = L.chooseFirst; r.hint.hidden = false; return; } a.checked = true; syncQuestion(true); } /* ---------- Enquiry (built once, never rebuilt, so the HubSpot form persists) ---------- */ var formStatus, formFrame; (function buildEnquiry() { var e = CFG.enquiry; var s = screens.enquiry; s.setAttribute('aria-labelledby', 'kq-enquiry-title'); s.appendChild(el('h2', { class: 'kq-title', id: 'kq-enquiry-title', tabindex: '-1', text: e.heading })); e.body.forEach(function (p) { s.appendChild(el('p', { text: p })); }); formStatus = el('p', { class: 'kq-form-status', text: L.formLoading }); formFrame = el('div', { class: 'hs-form-frame', 'data-region': HS.region, 'data-form-id': HS.formId, 'data-portal-id': HS.portalId }); s.appendChild(el('div', { class: 'kq-form-wrap' }, [formStatus, formFrame])); // Skip: a plain type="button" outside the HubSpot form. It never touches the form. var skip = el('button', { type: 'button', class: 'kq-btn kq-btn-secondary kq-skip-btn', text: e.skipButton }); skip.addEventListener('click', showClosing); s.appendChild(el('div', { class: 'kq-skip' }, [skip])); })(); function showEnquiry() { show('enquiry'); loadHubSpotOnce(); focusHeading(document.getElementById('kq-enquiry-title'), screens.enquiry); } /* ---------- Closing (skip route) ---------- */ (function buildClosing() { var cl = CFG.closing; var s = screens.closing; s.setAttribute('aria-labelledby', 'kq-closing-title'); s.appendChild(el('h2', { class: 'kq-title', id: 'kq-closing-title', tabindex: '-1', text: cl.heading })); s.appendChild(el('p', { text: cl.body })); })(); function showClosing() { show('closing'); focusHeading(document.getElementById('kq-closing-title'), screens.closing); } /* ---------- HubSpot ---------- */ // HubSpot asks for on-ready listeners to exist before the embed script runs. window.addEventListener('hs-form-event:on-ready', function (event) { if (!event || !event.detail || event.detail.formId !== HS.formId) { return; } hsState.ready = true; formStatus.hidden = true; applyAnswerMapping(event); }); function loadHubSpotOnce() { if (hsState.requested) { return; } hsState.requested = true; var existing = document.querySelector('script[src="' + HS.scriptSrc + '"]'); if (!existing) { var s = document.createElement('script'); s.src = HS.scriptSrc; s.defer = true; document.head.appendChild(s); } else if (window.console) { console.warn('[KhooCommerce quiz] HubSpot embed script was already on the page; not loading it again.'); } // If nothing has rendered after 10 seconds, say so (without replacing the form) window.setTimeout(function () { if (!hsState.ready && !formFrame.querySelector('iframe')) { formStatus.textContent = L.formSlow; formStatus.hidden = false; } else { formStatus.hidden = true; } }, 10000); } // Writes answers into HIDDEN form fields. Nothing is sent unless the visitor submits the form. function applyAnswerMapping(event) { var m = HS.answerMapping; if (!m || !m.enabled || hsState.mapped) { return; } var api = window.HubSpotFormsV4; if (!api || typeof api.getFormFromEvent !== 'function') { return; } var form = api.getFormFromEvent(event); if (!form || typeof form.setFieldValue !== 'function') { return; } QS.forEach(function (q) { var name = m.fields && m.fields[q.id]; var a = state.answers[q.id]; if (!name || !a.selected) { return; } var ans = findAnswer(q, a.selected); var value = m.valueFormat === 'letter' ? a.selected : a.selected + ': ' + ans.text; form.setFieldValue(name, value); }); if (m.fields && m.fields.version) { form.setFieldValue(m.fields.version, CFG.version || ''); } hsState.mapped = true; } })(); </script> <!-- ===== end KhooCommerce quiz ===== -->