https://door3.ai/js/quiz.js

1(function () {
2    function ready(fn) {
3        if (document.readyState !== 'loading') {
4            fn();
5        } else {
6            document.addEventListener('DOMContentLoaded', fn);
7        }
8    }
9
10    ready(function () {
11        const resultsText = [
12            {
13                title: "Not Ready — Big Gaps to Address",
14                description: "Your organization still relies heavily on manual workflows and legacy systems. The opportunity is to define a clear AI strategy and prioritize foundational upgrades.<br>Start with a <a href='https://open.door3.com/aiinsurancequiz1'>20-minute AI Readiness Session</a> to map quick wins and set a modernization roadmap."
15            },
16            {
17                title: "Emerging — Strong Potential with Right Strategy",
18                description: "You’ve begun standardizing workflows and piloting automation, but adoption is uneven. The next step is scaling AI initiatives where they’ll deliver the most impact.<br><a href='https://open.door3.com/aiinsurancequiz1'>Book an AI Opportunity Workshop</a> to identify 2–3 high-ROI use cases for your business."
19            },
20            {
21                title: "AI Ready — Time to Build for Impact",
22                description: "Your infrastructure and processes are mature, and you’re already using AI in pockets. Now is the time to expand enterprise-wide and gain competitive advantage.<br><a href='https://open.door3.com/aiinsurancequiz1'>Schedule an AI Strategy Sync</a> with our experts to benchmark, share insights, and accelerate deployment."
23            }
24        ]
25        
26        var quiz = document.querySelector('.quiz');
27        if (!quiz) return;
28
29        var inner = quiz.querySelector('.quiz-inner');
30        var results = quiz.querySelector('.quiz-results');
31        var steps = Array.prototype.slice.call(quiz.querySelectorAll('.quiz-form-step'));
32
33        if (!steps.length) return;
34
35        // Ensure initial visibility
36        if (inner) {
37            inner.style.display = 'flex';
38        }
39        if (results) {
40            results.style.display = 'none';
41        }
42
43        var current = 0; // index
44
45        // Hide all steps except first
46        steps.forEach(function (step, idx) {
47            step.style.display = idx === current ? 'flex' : 'none';
48        });
49
50
51        // Utility: determine if a step has a selection
52        function hasSelection(step) {
53            return !!step.querySelector('input[type="checkbox"]:checked');
54        }
55
56        // Attach handlers for multi-select steps
57        steps.forEach(function (step, idx) {
58
59            var btn = step.querySelector('button');
60            if (!btn) return;
61
62            // Optional: start with disabled Next until choice is made
63            function updateBtnState() {
64                if (hasSelection(step)) {
65                    btn.disabled = false;
66                    btn.classList.remove('is-disabled');
67                    btn.setAttribute('aria-disabled', 'false');
68                } else {
69                    btn.disabled = true;
70                    btn.classList.add('is-disabled');
71                    btn.setAttribute('aria-disabled', 'true');
72                }
73            }
74
75            // initialize
76            updateBtnState();
77
78            step.addEventListener('change', updateBtnState, true);
79
80            btn.addEventListener('click', function (e) {
81                e.preventDefault();
82                if (!hasSelection(step)) {
83                    // simple nudge animation via class
84                    step.classList.add('shake');
85                    setTimeout(function () {
86                        step.classList.remove('shake');
87                    }, 400);
88                    return;
89                }
90                if (idx < steps.length - 1) {
91                    // go to next
92                    steps[current].style.display = 'none';
93                    current = idx + 1;
94                    steps[current].style.display = 'flex';
95                    // focus next step heading for accessibility
96                    var h = steps[current].querySelector('h3');
97                    if (h) h.setAttribute('tabindex', '-1'), h.focus();
98                } else {
99                    // final step -> compute score and show tiered results (no total score display)
100                    var totalSelected = quiz.querySelectorAll('.quiz-form-step input[type="checkbox"]:checked').length;
101
102                    if (results) {
103                        var resultsInner = results.querySelector('.quiz-results-inner');
104                        if (resultsInner) {
105                            // Decide which result to show based on totalSelected
106                            var idxResult = 0;
107                            if (totalSelected >= 15) {
108                                idxResult = 2; // 15-21
109                            } else if (totalSelected >= 8) {
110                                idxResult = 1; // 8-14
111                            } else {
112                                idxResult = 0; // 0-7
113                            }
114
115                            // Cleanup any previous score element if present
116                            var oldScore = resultsInner.querySelector('#quiz-score');
117                            if (oldScore) {
118                                oldScore.parentNode.removeChild(oldScore);
119                            }
120
121                            // Update title and description
122                            var titleEl = resultsInner.querySelector('h4');
123                            var descEl = resultsInner.querySelector('p');
124                            if (titleEl) {
125                                titleEl.textContent = resultsText[idxResult].title;
126                            }
127                            if (descEl) {
128                                // description may contain links/HTML
129                                descEl.innerHTML = resultsText[idxResult].description;
130                            }
131                        }
132
133                        // reveal results
134                        if (inner) inner.style.display = 'none';
135                        results.style.display = 'block';
136                    }
137
138                    // Scroll into view
139                    results && results.scrollIntoView({behavior: 'smooth', block: 'start'});
140                }
141            });
142        });
143    });
144})();