(function () { console.log('[FeatureSearch] script loaded'); var featureRows = []; var currentMatches = []; var currentIndex = -1; function shouldActivate() { var href = window.location.href; return ( href.indexOf('comparing-totara-versions-20') !== -1 || href.indexOf('57b5fed8-66cb-471f-aa93-5f0166d0b14d') !== -1 ); } function ensureFeatureSearch() { if (!shouldActivate()) return; if (document.getElementById('feature-search')) return; var firstTable = document.querySelector('.editor360-table'); if (!firstTable) return; var rows = Array.prototype.slice.call( document.querySelectorAll('.editor360-table tbody tr') ); if (!rows.length) return; featureRows = rows; // --- Build UI wrapper --- var wrapper = document.createElement('div'); wrapper.id = 'feature-search'; wrapper.style.marginBottom = '1rem'; wrapper.style.padding = '12px 16px'; wrapper.style.border = '1px solid #d0d7de'; wrapper.style.background = '#f8f9fb'; wrapper.style.borderRadius = '6px'; // --- Label (your custom wording) --- var label = document.createElement('label'); label.htmlFor = 'featureSearchInput'; label.innerHTML = 'Quickly search for Totata features from the comparison table'; var br = document.createElement('br'); // --- Input field (rounded corners) --- var input = document.createElement('input'); input.type = 'search'; input.id = 'featureSearchInput'; input.placeholder = 'e.g. goal, H5P, AI'; input.style.marginRight = '0.5rem'; input.style.minWidth = '220px'; input.style.padding = '4px 6px'; input.style.border = '1px solid #bbc2cc'; input.style.borderRadius = '6px'; // --- Shared button styling --- function styleButton(btn) { btn.style.padding = '4px 10px'; btn.style.border = '1px solid #bbc2cc'; btn.style.background = '#ffffff'; btn.style.borderRadius = '6px'; btn.style.cursor = 'pointer'; btn.style.fontSize = '0.9rem'; } // Buttons var searchButton = document.createElement('button'); searchButton.textContent = 'Search'; styleButton(searchButton); var prevButton = document.createElement('button'); prevButton.textContent = 'Prev'; prevButton.style.marginLeft = '0.5rem'; styleButton(prevButton); var nextButton = document.createElement('button'); nextButton.textContent = 'Next'; nextButton.style.marginLeft = '0.25rem'; styleButton(nextButton); var status = document.createElement('span'); status.id = 'featureSearchStatus'; status.setAttribute('aria-live', 'polite'); status.style.marginLeft = '0.75rem'; status.style.fontSize = '0.9em'; status.style.opacity = '0.9'; // Add elements to wrapper wrapper.appendChild(label); wrapper.appendChild(br); wrapper.appendChild(input); wrapper.appendChild(searchButton); wrapper.appendChild(prevButton); wrapper.appendChild(nextButton); wrapper.appendChild(status); // Insert wrapper before accordions var detailsWrapper = firstTable.closest('.details-wrapper'); if (detailsWrapper && detailsWrapper.parentNode) { detailsWrapper.parentNode.insertBefore(wrapper, detailsWrapper); } else { firstTable.parentNode.insertBefore(wrapper, firstTable); } // Highlight style (only once) if (!document.getElementById('feature-search-style')) { var style = document.createElement('style'); style.id = 'feature-search-style'; style.textContent = '.feature-hit{outline:2px solid #0073aa;background-color:#fffbe6;}'; document.head.appendChild(style); } // --- Logic helpers --- function clearHighlights() { featureRows.forEach(function (row) { row.classList.remove('feature-hit'); }); } function updateStatus(term) { if (!term) { status.textContent = ''; return; } if (currentMatches.length === 0) { status.textContent = 'No matches'; } else if (currentMatches.length === 1) { status.textContent = '1 match'; } else { status.textContent = (currentIndex + 1) + ' of ' + currentMatches.length + ' matches'; } } function showCurrentMatch(term) { clearHighlights(); if (currentMatches.length === 0 || currentIndex < 0) { updateStatus(term); return; } var match = currentMatches[currentIndex]; var details = match.closest ? match.closest('details') : null; if (details && !details.open) details.open = true; match.classList.add('feature-hit'); match.scrollIntoView({ behavior: 'smooth', block: 'center' }); updateStatus(term); } function performSearch() { var term = (input.value || '').trim().toLowerCase(); currentMatches = []; currentIndex = -1; clearHighlights(); if (!term) { updateStatus(''); return; } featureRows.forEach(function (row) { var firstCell = row.querySelector('td'); if (!firstCell) return; var text = (firstCell.textContent || '').toLowerCase(); if (text.indexOf(term) !== -1) { currentMatches.push(row); } }); if (currentMatches.length > 0) currentIndex = 0; showCurrentMatch(term); } function gotoNext() { if (!currentMatches.length) return; currentIndex = (currentIndex + 1) % currentMatches.length; showCurrentMatch((input.value || '').trim().toLowerCase()); } function gotoPrev() { if (!currentMatches.length) return; currentIndex = (currentIndex - 1 + currentMatches.length) % currentMatches.length; showCurrentMatch((input.value || '').trim().toLowerCase()); } // Bind events searchButton.addEventListener('click', performSearch); prevButton.addEventListener('click', gotoPrev); nextButton.addEventListener('click', gotoNext); input.addEventListener('keydown', function (event) { if (event.key === 'Enter') performSearch(); }); console.log('[FeatureSearch] UI created'); } function startObserver() { if (!shouldActivate()) return; ensureFeatureSearch(); var observer = new MutationObserver(function () { ensureFeatureSearch(); }); observer.observe(document.body, { childList: true, subtree: true }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', startObserver); } else { startObserver(); } })(); // ============================================================ // Totara Help Site Survey Widget // Paste this into Document360 > Settings > Custom JavaScript // ============================================================ (function () { // ── Config ── var EDGE_FUNCTION_URL = "https://udmvpofihcpbsnkxyync.supabase.co/functions/v1/site-survey"; var SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InVkbXZwb2ZpaGNwYnNua3h5eW5jIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2MzQ2MjMsImV4cCI6MjA5MDIxMDYyM30.AHaTykYRrOIVNDbt1mSKibMEL9szrd8IbGld_UwUTgA"; var STORAGE_KEY = "totara_help_survey_complete"; // Don't show if already completed if (localStorage.getItem(STORAGE_KEY)) return; // ── Data ── const USER_TYPES = [ { value: "customer", label: "Totara Customer" }, { value: "partner", label: "Totara Partner" }, { value: "prospect", label: "Prospect / Evaluating Totara" }, { value: "other", label: "Other" }, ]; const ROLES = [ "Site Administrator / LMS Admin", "Learning Designer / Course Creator", "Developer / Technical Specialist", "HR / L&D Manager", "Manager / Team Lead", "Learner / End User", "Totara Partner (Consultant / Support / Implementation)", "Other", ]; const SECTORS = [ "Corporate / Enterprise", "Government / Public Sector", "Healthcare", "Education (Higher Education / Universities)", "Financial Services (Banking / Insurance)", "Retail / Hospitality", "Manufacturing / Engineering", "Technology / Software", "Telecommunications", "Energy / Utilities", "Transport / Logistics", "Non-profit / NGO / Charity", "Professional Services (Consulting / Legal / Accounting)", "Other", ]; const EXPERIENCE = [ { value: "beginner", label: "Beginner", desc: "New to Totara and still learning the basics" }, { value: "basic", label: "Basic user", desc: "Can complete common tasks but still rely on help documentation regularly" }, { value: "intermediate", label: "Intermediate", desc: "Comfortable using Totara for day-to-day tasks and basic configuration" }, { value: "advanced", label: "Advanced", desc: "Confident managing configurations, troubleshooting, and more complex setups" }, { value: "expert", label: "Expert", desc: "Deep knowledge of Totara (e.g. implementations, integrations, customisation, or partner-level expertise)" }, ]; const LANGUAGES = [ "English", "Spanish", "French", "German", "Dutch", "Portuguese", "Arabic", "Chinese (Simplified)", "Chinese (Traditional)", "Japanese", "Korean", "Italian", "Russian", "Polish", "Turkish", "Swedish", "Norwegian", "Danish", "Finnish", "Czech", "Hungarian", "Romanian", "Thai", "Vietnamese", "Indonesian", "Malay", "Hindi", "Bengali", "Urdu", "Hebrew", "Greek", "Ukrainian", "Croatian", "Serbian", "Slovak", "Slovenian", "Bulgarian", "Lithuanian", "Latvian", "Estonian", "Other", ]; const STEPS = [ { label: "About you" }, { label: "Context" }, { label: "Preferences" }, { label: "Feedback" }, ]; // ── State ── let currentStep = 0; var honeypot = ""; const form = { userType: "", role: "", sector: "", experience: "", language: "", npsScore: null, feedback: "", likes: "", }; // ── Helpers ── function el(tag, attrs, children) { const e = document.createElement(tag); if (attrs) { Object.keys(attrs).forEach(function (k) { if (k === "style" && typeof attrs[k] === "object") { Object.assign(e.style, attrs[k]); } else if (k.startsWith("on")) { e.addEventListener(k.slice(2).toLowerCase(), attrs[k]); } else { e.setAttribute(k, attrs[k]); } }); } if (children) { (Array.isArray(children) ? children : [children]).forEach(function (c) { if (typeof c === "string") e.appendChild(document.createTextNode(c)); else if (c) e.appendChild(c); }); } return e; } function generateSessionId() { return "s_" + Date.now() + "_" + Math.random().toString(36).substr(2, 9); } // ── Styles (injected once) ── var style = document.createElement("style"); style.textContent = [ "@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');", "@keyframes thSurveyFadeIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }", ".th-survey-overlay { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:16px; font-family:'DM Sans','Segoe UI',system-ui,sans-serif; }", ".th-survey-backdrop { position:absolute; inset:0; background:rgba(13,75,85,0.55); backdrop-filter:blur(4px); }", ".th-survey-modal { position:relative; background:#fff; border-radius:20px; width:100%; max-width:520px; max-height:calc(100vh - 32px); display:flex; flex-direction:column; box-shadow:0 24px 64px rgba(0,0,0,0.18),0 0 0 1px rgba(13,75,85,0.1); animation:thSurveyFadeIn 0.4s ease-out; }", ".th-survey-header { background:#0D4B55; padding:24px 28px 20px; position:relative; border-radius:20px 20px 0 0; flex-shrink:0; }", ".th-survey-header-stripe { position:absolute; bottom:0; left:0; right:0; height:4px; background:#FFB84D; }", ".th-survey-body { padding:20px 28px 28px; min-height:200px; transition:opacity 0.2s; overflow-y:auto; flex:1; }", ".th-survey-pill { padding:10px 18px; border-radius:40px; border:2px solid #e5e7eb; background:#fff; color:#07262A; font-size:14px; cursor:pointer; transition:all 0.15s; font-family:inherit; font-weight:400; }", ".th-survey-pill.active { border-color:#DB8F3F; background:#FFF1DB; color:#07262A; font-weight:600; }", ".th-survey-exp-btn { display:flex; flex-direction:column; align-items:flex-start; padding:12px 16px; border-radius:14px; border:2px solid #e5e7eb; background:#fff; cursor:pointer; transition:all 0.15s; font-family:inherit; text-align:left; width:100%; }", ".th-survey-exp-btn.active { border-color:#DB8F3F; background:#FFF1DB; }", ".th-survey-select-trigger { width:100%; padding:12px 16px; background:#fff; border:2px solid #d1d5db; border-radius:14px; font-size:15px; text-align:left; cursor:pointer; color:#9ca3af; display:flex; justify-content:space-between; align-items:center; font-family:inherit; transition:border-color 0.2s; box-sizing:border-box; }", ".th-survey-select-trigger.has-value { color:#07262A; }", ".th-survey-select-trigger.open { border-color:#0074AD; }", ".th-survey-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:2px solid #0074AD; border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,0.12); z-index:50; max-height:240px; display:flex; flex-direction:column; }", ".th-survey-dropdown input { width:100%; padding:8px 12px; border:1px solid #e5e7eb; border-radius:8px; font-size:14px; outline:none; font-family:inherit; box-sizing:border-box; margin:8px 8px 4px; width:calc(100% - 16px); }", ".th-survey-dropdown-list { overflow-y:auto; padding:4px 4px 8px; }", ".th-survey-dropdown-item { display:block; width:100%; text-align:left; padding:9px 12px; border:none; background:transparent; cursor:pointer; font-size:14px; border-radius:6px; color:#07262A; font-family:inherit; }", ".th-survey-dropdown-item:hover { background:#f3f4f6; }", ".th-survey-dropdown-item.active { background:#FFF1DB; font-weight:600; }", ".th-survey-nps-btn { flex:1; height:44px; border:none; border-radius:8px; background:#e5e7eb; color:#07262A; font-weight:500; font-size:15px; cursor:pointer; transition:all 0.15s; font-family:inherit; }", ".th-survey-textarea { width:100%; padding:14px 16px; border:2px solid #d1d5db; border-radius:14px; font-size:15px; font-family:inherit; resize:vertical; outline:none; box-sizing:border-box; transition:border-color 0.2s; }", ".th-survey-textarea:focus { border-color:#0074AD; }", ".th-survey-btn-primary { padding:12px 32px; background:#0074AD; color:#fff; border:none; border-radius:40px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; transition:background 0.2s; }", ".th-survey-btn-primary:hover { background:#005f8c; }", ".th-survey-btn-primary:disabled { background:#d1d5db; color:#9ca3af; cursor:not-allowed; }", ".th-survey-btn-back { padding:12px 24px; background:#fff; border:2px solid #0D4B55; border-radius:40px; font-size:15px; font-weight:500; cursor:pointer; color:#07262A; font-family:inherit; transition:border-color 0.2s; }", ".th-survey-btn-back:hover { border-color:#0074AD; }", ".th-survey-close { position:absolute; top:16px; right:16px; background:rgba(255,255,255,0.1); border:none; border-radius:8px; width:32px; height:32px; color:#fff; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; }", ".th-survey-close:hover { background:rgba(255,255,255,0.2); }", ".th-survey-label { display:block; font-size:15px; font-weight:600; color:#07262A; margin-bottom:10px; }", ".th-survey-req { color:#ef4444; font-weight:400; }", ".th-survey-opt { color:#9ca3af; font-weight:400; font-size:13px; }", ].join("\n"); document.head.appendChild(style); // ── Dropdown component ── function createDropdown(options, currentValue, onSelect, placeholder) { var wrapper = el("div", { style: { position: "relative" } }); var isOpen = false; var searchVal = ""; function render() { wrapper.innerHTML = ""; var trigger = el("button", { class: "th-survey-select-trigger" + (currentValue ? " has-value" : "") + (isOpen ? " open" : ""), onClick: function () { isOpen = !isOpen; render(); }, }, [ document.createTextNode(currentValue || placeholder), el("span", { style: { fontSize: "12px", opacity: "0.5", transform: isOpen ? "rotate(180deg)" : "none", transition: "transform 0.2s", display: "inline-block" } }, "▼"), ]); wrapper.appendChild(trigger); if (isOpen) { var filtered = options.filter(function (o) { return o.toLowerCase().indexOf(searchVal.toLowerCase()) > -1; }); var dropdown = el("div", { class: "th-survey-dropdown" }); var searchInput = el("input", { type: "text", placeholder: "Search...", value: searchVal, onInput: function (e) { searchVal = e.target.value; render(); }, }); dropdown.appendChild(searchInput); var list = el("div", { class: "th-survey-dropdown-list" }); if (filtered.length === 0) { list.appendChild(el("div", { style: { padding: "10px 12px", color: "#9ca3af", fontSize: "14px" } }, "No results")); } filtered.forEach(function (opt) { var item = el("button", { class: "th-survey-dropdown-item" + (currentValue === opt ? " active" : ""), onClick: function () { currentValue = opt; isOpen = false; searchVal = ""; onSelect(opt); render(); }, }, opt); list.appendChild(item); }); dropdown.appendChild(list); wrapper.appendChild(dropdown); // Click outside to close setTimeout(function () { function closeHandler(e) { if (!wrapper.contains(e.target)) { isOpen = false; searchVal = ""; render(); document.removeEventListener("click", closeHandler); } } document.addEventListener("click", closeHandler); }, 0); // Focus search setTimeout(function () { searchInput.focus(); }, 10); } } wrapper._setValue = function (v) { currentValue = v; render(); }; render(); return wrapper; } // ── Render functions per step ── function renderStep0(container) { // Q1 — Who are you? container.appendChild(el("label", { class: "th-survey-label" }, [ "Who are you? ", el("span", { class: "th-survey-req" }, "*"), ])); var pillBox = el("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px", marginBottom: "24px" } }); USER_TYPES.forEach(function (t) { var btn = el("button", { class: "th-survey-pill" + (form.userType === t.value ? " active" : ""), onClick: function () { form.userType = t.value; renderCurrentStep(); }, }, t.label); pillBox.appendChild(btn); }); container.appendChild(pillBox); // Q2 — Role container.appendChild(el("label", { class: "th-survey-label" }, [ "What best describes your role? ", el("span", { class: "th-survey-req" }, "*"), ])); container.appendChild(createDropdown(ROLES, form.role, function (v) { form.role = v; updateNav(); }, "Select your role...")); } function renderStep1(container) { // Q3 — Sector container.appendChild(el("label", { class: "th-survey-label" }, [ "What sector are you in? ", el("span", { class: "th-survey-opt" }, "(optional)"), ])); container.appendChild(createDropdown(SECTORS, form.sector, function (v) { form.sector = v; }, "Select your sector...")); container.appendChild(el("div", { style: { height: "24px" } })); // Q4 — Experience container.appendChild(el("label", { class: "th-survey-label" }, [ "How experienced are you with Totara? ", el("span", { class: "th-survey-req" }, "*"), ])); var expBox = el("div", { style: { display: "flex", flexDirection: "column", gap: "6px" } }); EXPERIENCE.forEach(function (lvl) { var btn = el("button", { class: "th-survey-exp-btn" + (form.experience === lvl.value ? " active" : ""), onClick: function () { form.experience = lvl.value; renderCurrentStep(); }, }, [ el("span", { style: { fontWeight: "600", fontSize: "14px", color: "#07262A" } }, lvl.label), el("span", { style: { fontSize: "12px", color: "#6b7280", marginTop: "2px" } }, lvl.desc), ]); expBox.appendChild(btn); }); container.appendChild(expBox); } function renderStep2(container) { // Q5 — Language container.appendChild(el("label", { class: "th-survey-label" }, [ "What is your primary language? ", el("span", { class: "th-survey-req" }, "*"), ])); container.appendChild(createDropdown(LANGUAGES, form.language, function (v) { form.language = v; updateNav(); }, "Search for a language...")); container.appendChild(el("div", { style: { height: "24px" } })); // Q6 — NPS container.appendChild(el("label", { class: "th-survey-label" }, [ "How likely are you to recommend Totara Help to a colleague? ", el("span", { class: "th-survey-req" }, "*"), ])); var npsLabels = el("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "8px", fontSize: "12px", color: "#6b7280", fontWeight: "500" } }, [ el("span", null, "Not likely"), el("span", null, "Extremely likely"), ]); container.appendChild(npsLabels); var npsRow = el("div", { style: { display: "flex", gap: "6px" } }); for (var i = 0; i <= 10; i++) { (function (score) { var selected = form.npsScore === score; var bg = "#e5e7eb"; if (selected) bg = "#FFB84D"; var btn = el("button", { class: "th-survey-nps-btn", style: { background: bg, color: selected ? "#07262A" : "#07262A", fontWeight: selected ? "700" : "500" }, onClick: function () { form.npsScore = score; renderCurrentStep(); }, }, String(score)); npsRow.appendChild(btn); })(i); } container.appendChild(npsRow); } function renderStep3(container) { // Q7 — Improve container.appendChild(el("label", { class: "th-survey-label" }, [ "What could we improve? ", el("span", { class: "th-survey-opt" }, "(optional)"), ])); var ta1 = el("textarea", { class: "th-survey-textarea", placeholder: "Tell us what you think...", rows: "3", onInput: function (e) { form.feedback = e.target.value; }, }); ta1.value = form.feedback; container.appendChild(ta1); container.appendChild(el("div", { style: { height: "24px" } })); // Q8 — Likes container.appendChild(el("label", { class: "th-survey-label" }, [ "What do you like about Totara Help? ", el("span", { class: "th-survey-opt" }, "(optional)"), ])); var ta2 = el("textarea", { class: "th-survey-textarea", placeholder: "Tell us what's working well...", rows: "3", onInput: function (e) { form.likes = e.target.value; }, }); ta2.value = form.likes; container.appendChild(ta2); container.appendChild(el("p", { style: { fontSize: "13px", color: "#9ca3af", marginTop: "12px" } }, "Your responses are anonymous and help us improve the documentation." )); } // ── Validation ── function canProceed() { if (currentStep === 0) return form.userType && form.role; if (currentStep === 1) return form.experience; if (currentStep === 2) return form.language && form.npsScore !== null; return true; } // ── Submit ── function submitSurvey() { var payload = { session_id: generateSessionId(), user_type: form.userType, role: form.role, sector: form.sector || null, experience: form.experience, language: form.language, nps_score: form.npsScore, feedback: form.feedback || null, likes: form.likes || null, _hp: honeypot, }; fetch(EDGE_FUNCTION_URL, { method: "POST", headers: { "Content-Type": "application/json", "Authorization": "Bearer " + SUPABASE_ANON_KEY, }, body: JSON.stringify(payload), }).then(function (res) { if (!res.ok) console.error("Survey response status:", res.status); localStorage.setItem(STORAGE_KEY, "true"); showThankYou(); }).catch(function (err) { console.error("Survey submit error:", err); // Still mark as complete so user isn't stuck localStorage.setItem(STORAGE_KEY, "true"); showThankYou(); }); } // ── DOM refs ── var overlay, bodyEl, navEl, progressBar; function closeSurvey() { if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay); } function showThankYou() { bodyEl.innerHTML = ""; bodyEl.style.textAlign = "center"; bodyEl.style.padding = "40px 20px"; var svgContainer = el("div", { style: { marginBottom: "16px", display: "flex", justifyContent: "center" } }); svgContainer.innerHTML = ''; bodyEl.appendChild(svgContainer); bodyEl.appendChild(el("h2", { style: { fontSize: "22px", fontWeight: "700", color: "#07262A", margin: "0 0 8px" } }, "Thank you!")); bodyEl.appendChild(el("p", { style: { color: "#6b7280", fontSize: "15px", margin: "0 0 24px", lineHeight: "1.6" } }, "Your feedback helps us improve Totara Help for everyone.")); bodyEl.appendChild(el("button", { class: "th-survey-btn-primary", onClick: closeSurvey }, "Close")); if (navEl) navEl.style.display = "none"; if (progressBar) progressBar.style.display = "none"; } function updateNav() { if (!navEl) return; navEl.innerHTML = ""; if (currentStep > 0) { navEl.appendChild(el("button", { class: "th-survey-btn-back", onClick: function () { currentStep--; renderCurrentStep(); }, }, "Back")); } else { navEl.appendChild(el("div")); } if (currentStep < STEPS.length - 1) { var nextBtn = el("button", { class: "th-survey-btn-primary", onClick: function () { if (canProceed()) { currentStep++; renderCurrentStep(); } }, }, "Continue"); if (!canProceed()) nextBtn.disabled = true; navEl.appendChild(nextBtn); } else { navEl.appendChild(el("button", { class: "th-survey-btn-primary", onClick: submitSurvey, }, "Submit")); } } function updateProgress() { if (!progressBar) return; progressBar.innerHTML = ""; var bars = el("div", { style: { display: "flex", gap: "6px", marginBottom: "4px" } }); for (var i = 0; i < STEPS.length; i++) { bars.appendChild(el("div", { style: { flex: "1", height: "4px", borderRadius: "4px", background: i <= currentStep ? "#FFB84D" : "#e5e7eb", transition: "background 0.3s" }, })); } progressBar.appendChild(bars); var info = el("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "12px", color: "#9ca3af", fontWeight: "500" } }, [ el("span", null, "Step " + (currentStep + 1) + " of " + STEPS.length), el("span", { style: { color: "#0074AD", fontWeight: "600" } }, STEPS[currentStep].label), ]); progressBar.appendChild(info); } function renderCurrentStep() { bodyEl.innerHTML = ""; bodyEl.style.textAlign = "left"; bodyEl.style.padding = "20px 28px 28px"; var stepRenderers = [renderStep0, renderStep1, renderStep2, renderStep3]; stepRenderers[currentStep](bodyEl); updateProgress(); updateNav(); } // ── Build the widget ── function init() { overlay = el("div", { class: "th-survey-overlay" }); overlay.appendChild(el("div", { class: "th-survey-backdrop" })); var modal = el("div", { class: "th-survey-modal" }); // Header var header = el("div", { class: "th-survey-header" }); header.appendChild(el("div", { class: "th-survey-header-stripe" })); var logoRow = el("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "6px" } }); var leafIcon = el("img", { src: "data:image/png;base64,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", style: { width: "36px", height: "36px", borderRadius: "10px" }, }); logoRow.appendChild(leafIcon); logoRow.appendChild(el("span", { style: { color: "#fff", fontSize: "18px", fontWeight: "700", letterSpacing: "-0.01em" } }, "Totara Help")); header.appendChild(logoRow); header.appendChild(el("p", { style: { color: "rgba(255,255,255,0.75)", fontSize: "14px", margin: "0", lineHeight: "1.5" } }, "Help us improve Totara Help. This quick survey takes less than 1 minute.")); var privacyNote = el("p", { style: { color: "rgba(255,255,255,0.5)", fontSize: "12px", margin: "6px 0 0", lineHeight: "1.4" } }); privacyNote.innerHTML = 'Your responses are anonymous. No personal information is collected. Privacy Policy'; header.appendChild(privacyNote); header.appendChild(el("button", { class: "th-survey-close", onClick: closeSurvey }, "\u2715")); modal.appendChild(header); // Progress progressBar = el("div", { style: { padding: "16px 28px 0", flexShrink: "0" } }); modal.appendChild(progressBar); // Body bodyEl = el("div", { class: "th-survey-body" }); modal.appendChild(bodyEl); // Honeypot — hidden from humans, visible to bots var hpField = el("input", { type: "text", name: "website_url", tabindex: "-1", autocomplete: "off", style: { position: "absolute", left: "-9999px", top: "-9999px", width: "1px", height: "1px", opacity: "0" }, onInput: function (e) { honeypot = e.target.value; }, }); modal.appendChild(hpField); // Nav navEl = el("div", { style: { display: "flex", justifyContent: "space-between", padding: "16px 28px 28px", gap: "12px", flexShrink: "0", borderTop: "1px solid #e5e7eb" } }); modal.appendChild(navEl); overlay.appendChild(modal); document.body.appendChild(overlay); renderCurrentStep(); } // ── Wait for DOM then launch ── if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init); } else { init(); } })();

Theme	Notes
Inspire	This theme moves the main menu to the left-hand side of the page. This is the recommended theme for Totara 19 onwards.
Ventura	This is the recommended theme for Totara 13-18.

Documentation Index

Available themes

Next steps