Hugging Face's logo

Spaces:
DjayChucko
/
EnablingSales
Running

App Files
DjayChucko commited on
Commit
34ef362
·
verified ·
1 Parent(s): 3c8eaff

Manual changes saved

Browse files
Files changed (1) hide show
  1. scorecard.html +496 -184
scorecard.html CHANGED
@@ -1,233 +1,545 @@
1
  <!DOCTYPE html>
2
- <html lang="en" class="scroll-smooth">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta name="description" content="ValueVortex Navigator - Scorecard">
7
- <title>Pod Value Mapper | Scorecard</title>
8
  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
  <script src="https://cdn.tailwindcss.com"></script>
 
 
 
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
  <script src="https://unpkg.com/feather-icons"></script>
12
- <script>
13
- tailwind.config = {
14
- darkMode: 'class',
15
- theme: {
16
- extend: {
17
- colors: {
18
- primary: '#6366f1',
19
- secondary: '#8b5cf6',
20
- dark: '#1e293b'
21
- }
22
- }
23
- }
24
- }
25
- </script>
26
  <style>
27
- .nav-link.active {
28
- @apply text-primary font-medium border-b-2 border-primary;
 
29
  }
30
- .card-hover {
31
- @apply transition-all duration-300 hover:scale-105 hover:shadow-xl;
32
  }
33
- .hamburger-line {
34
- @apply w-6 h-0.5 bg-current transition-all duration-300;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  }
36
  </style>
37
  </head>
38
- <body class="bg-gray-50 dark:bg-dark text-gray-800 dark:text-gray-200 min-h-screen flex flex-col relative">
39
- <!-- Header -->
40
- <header class="sticky top-0 z-50 bg-black/80 dark:bg-dark/80 backdrop-blur-md shadow-sm">
41
- <div class="container mx-auto px-4 py-3">
42
- <div class="flex justify-between items-center">
43
- <!-- Logo -->
44
- <a href="index.html" class="flex items-center space-x-2">
45
- <span class="text-xl font-bold text-white font-heading">McGPT</span>
46
- </a>
47
- <!-- Desktop Navigation -->
48
- <nav class="hidden md:flex space-x-8">
49
- <a href="index.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Home</a>
50
- <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
51
- <a href="scorecard.html" class="nav-link active py-2 px-1 text-white">Scorecard</a>
52
- <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">About</a>
53
- </nav>
54
- <!-- Theme Toggle -->
55
- <div class="flex items-center space-x-4">
56
- <button id="themeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
57
- <i data-feather="moon" class="hidden dark:block"></i>
58
- <i data-feather="sun" class="block dark:hidden"></i>
59
- </button>
60
- <!-- Mobile Menu Button -->
61
- <button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2">
62
- <span class="hamburger-line"></span>
63
- <span class="hamburger-line"></span>
64
- <span class="hamburger-line"></span>
65
- </button>
66
  </div>
 
67
  </div>
68
- <!-- Mobile Navigation -->
69
- <div id="mobileMenu" class="hidden md:hidden py-4 border-t mt-3">
70
- <div class="flex flex-col space-y-3">
71
- <a href="index.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Home</a>
72
- <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
73
- <a href="scorecard.html" class="nav-link active py-2 px-1 text-white">Scorecard</a>
74
- <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">About</a>
75
- </div>
76
  </div>
77
- </div>
78
  </header>
79
-
80
- <!-- Main Content -->
81
- <main class="flex-grow">
82
- <div class="container mx-auto px-4 py-16">
83
- <div class="text-center mb-12">
84
- <h1 class="text-4xl md:text-5xl font-bold mb-4 text-white">Sales Performance Scorecard</h1>
85
- <p class="text-xl text-gray-300 max-w-2xl mx-auto">
86
- Track and optimize your sales performance with our comprehensive scoring system
87
- </p>
88
- </div>
89
-
90
- <!-- Scorecard Image -->
91
- <div class="flex justify-center mb-16">
92
- </div>
93
-
94
- <!-- Metrics Section -->
95
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
96
- <!-- Metric 1 -->
97
- <div class="bg-gray-800/90 p-6 rounded-xl shadow-lg backdrop-blur-sm">
98
- <div class="flex items-center mb-4">
99
- <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mr-4">
100
- <i data-feather="trending-up" class="text-primary"></i>
101
- </div>
102
- <h3 class="text-xl font-bold">Conversion Rate</h3>
103
  </div>
104
- <p class="text-gray-300">Measure how effectively you're converting leads into customers with our real-time tracking.</p>
 
105
  </div>
106
 
107
- <!-- Metric 2 -->
108
- <div class="bg-gray-800/90 p-6 rounded-xl shadow-lg backdrop-blur-sm">
109
- <div class="flex items-center mb-4">
110
- <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center mr-4">
111
- <i data-feather="clock" class="text-secondary"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  </div>
113
- <h3 class="text-xl font-bold">Cycle Time</h3>
114
  </div>
115
- <p class="text-gray-300">Track the average time it takes to move a lead through your sales pipeline.</p>
116
  </div>
117
 
118
- <!-- Metric 3 -->
119
- <div class="bg-gray-800/90 p-6 rounded-xl shadow-lg backdrop-blur-sm">
120
- <div class="flex items-center mb-4">
121
- <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mr-4">
122
- <i data-feather="dollar-sign" class="text-primary"></i>
123
- </div>
124
- <h3 class="text-xl font-bold">Deal Size</h3>
125
- </div>
126
- <p class="text-gray-300">Monitor the average value of your closed deals and identify trends.</p>
127
  </div>
 
 
 
 
 
128
  </div>
 
129
 
130
- <!-- CTA Section -->
131
- <div class="text-center">
132
- <h2 class="text-3xl font-bold mb-6 text-white">Ready to Elevate Your Sales Performance?</h2>
133
- <p class="text-gray-300 mb-8 max-w-2xl mx-auto">
134
- Start tracking your key metrics today and gain actionable insights to improve your sales strategy.
135
- </p>
136
- <a href="value-mapper.html" class="inline-block bg-gradient-to-r from-primary to-secondary text-white px-8 py-4 rounded-lg font-bold shadow-lg hover:from-primary/90 hover:to-secondary/90 transition-all duration-300">
137
- Get Started Now
138
- </a>
139
  </div>
 
 
140
  </div>
141
- </main>
142
 
143
- <!-- Footer -->
144
- <footer class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border-t border-gray-200 dark:border-gray-700">
145
- <div class="container mx-auto px-4 py-8">
146
- <div class="flex flex-col md:flex-row justify-between items-center">
147
- <div class="mb-6 md:mb-0">
148
- <a href="index.html" class="flex items-center space-x-2">
149
- <span class="text-lg font-bold text-white font-heading">McGPT</span>
150
- </a>
151
- <p class="text-gray-600 dark:text-gray-300 mt-2 text-sm">
152
- Navigating your sales success with AI since 2023
153
- </p>
154
  </div>
155
- <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
156
- <div>
157
- <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Resources</h3>
158
- <ul class="space-y-2">
159
- <li><a href="about.html" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Onboarding</a></li>
160
- <li><a href="strategy.html" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Strategy</a></li>
161
- <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Blog</a></li>
162
- </ul>
163
  </div>
164
- <div>
165
- <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Company</h3>
166
- <ul class="space-y-2">
167
- <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">About</a></li>
168
- <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Careers</a></li>
169
- <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Contact</a></li>
170
- </ul>
 
 
171
  </div>
172
- <div class="col-span-2 md:col-span-1">
173
- <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Connect</h3>
174
- <div class="flex space-x-4">
175
- <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">
176
- <i data-feather="twitter"></i>
177
- </a>
178
- <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">
179
- <i data-feather="linkedin"></i>
180
- </a>
181
- <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">
182
- <i data-feather="github"></i>
183
- </a>
184
  </div>
 
185
  </div>
 
186
  </div>
 
187
  </div>
188
- <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center text-sm text-gray-500 dark:text-gray-400">
189
- <p>&copy; 2023 McGPT Navigator. All rights reserved.</p>
 
 
 
 
190
  </div>
191
  </div>
192
- </footer>
193
 
194
  <script>
195
- // Mobile Menu Toggle
196
- const mobileMenuButton = document.getElementById('mobileMenuButton');
197
- const mobileMenu = document.getElementById('mobileMenu');
198
-
199
- mobileMenuButton.addEventListener('click', () => {
200
- mobileMenu.classList.toggle('hidden');
201
- mobileMenuButton.classList.toggle('open');
202
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
203
 
204
- // Theme Toggle
205
- const themeToggle = document.getElementById('themeToggle');
206
- const html = document.documentElement;
207
-
208
- themeToggle.addEventListener('click', () => {
209
- html.classList.toggle('dark');
210
- localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
211
- });
212
-
213
- // Set initial theme - always dark by default
214
- html.classList.add('dark');
215
- localStorage.theme = 'dark';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
 
217
- // Set active nav link
218
- const currentPage = window.location.pathname.split('/').pop() || 'index.html';
219
- document.querySelectorAll('.nav-link').forEach(link => {
220
- const linkHref = link.getAttribute('href');
221
- if ((currentPage === 'index.html' && linkHref === 'index.html') ||
222
- (currentPage !== 'index.html' && linkHref === currentPage)) {
223
- link.classList.add('active');
224
- } else {
225
- link.classList.remove('active');
 
 
 
 
 
 
 
 
 
 
 
 
226
  }
227
- });
228
 
229
- // Feather Icons
230
- feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
231
  </script>
232
  </body>
233
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sales Qualification Tool</title>
 
7
  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
12
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
13
  <script src="https://unpkg.com/feather-icons"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  <style>
15
+ .question-screen {
16
+ min-height: 100vh;
17
+ transition: all 0.3s ease;
18
  }
19
+ .fade-in {
20
+ animation: fadeIn 0.5s;
21
  }
22
+ @keyframes fadeIn {
23
+ from { opacity: 0; }
24
+ to { opacity: 1; }
25
+ }
26
+ .progress-bar {
27
+ height: 6px;
28
+ transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
29
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
30
+ }
31
+ select {
32
+ -webkit-appearance: none;
33
+ -moz-appearance: none;
34
+ appearance: none;
35
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
36
+ background-repeat: no-repeat;
37
+ background-position: right 0.75rem center;
38
+ background-size: 1.25rem;
39
  }
40
  </style>
41
  </head>
42
+ <body class="bg-gradient-to-br from-[#792DD4] to-[#9B5CEB] font-inter min-h-screen">
43
+ <header class="bg-gradient-to-r from-[#6A27C0] to-[#8B3EE8] py-4 px-6 shadow-lg">
44
+ <nav class="flex justify-between items-center max-w-6xl mx-auto">
45
+ <div class="flex items-center space-x-2">
46
+ <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
47
+ <i data-feather="bar-chart-2" class="text-[#6A27C0]"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  </div>
49
+ <h1 class="text-white font-bold text-xl">MEDDICC Scorecard</h1>
50
  </div>
51
+ <div class="flex items-center space-x-4">
52
+ <a href="index.html" id="home-btn" class="text-white hover:text-gray-200 transition-transform hover:scale-110" onclick="resetQuiz()">
53
+ <i data-feather="home" class="w-6 h-6"></i>
54
+ </a>
55
+ <img src="https://huggingface.co/spaces/DjayChucko/mcgpt/resolve/main/images/Color=White.png" alt="Logo" class="h-8">
 
 
 
56
  </div>
57
+ </nav>
58
  </header>
59
+ <div id="app" class="relative overflow-hidden">
60
+ <!-- Industry Selection Screen -->
61
+ <div id="industry-screen" class="question-screen flex flex-col p-6 bg-gradient-to-b from-[#792DD4] to-[#9B5CEB] text-white">
62
+ <div class="flex-1 max-w-2xl mx-auto w-full">
63
+ <div class="text-center mb-8">
64
+ <div class="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
65
+ <i data-feather="target" class="w-10 h-10"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  </div>
67
+ <h1 class="text-3xl font-bold mb-2">Sales Opportunity Qualifier</h1>
68
+ <p class="text-blue-100">Select the customer's industry to begin qualification</p>
69
  </div>
70
 
71
+ <div class="mb-6">
72
+ <label for="industry" class="block text-sm font-medium text-blue-100 mb-3">Industry</label>
73
+ <div class="relative">
74
+ <select id="industry" class="w-full p-4 bg-white/10 backdrop-blur-sm border-2 border-white/20 rounded-xl text-white focus:ring-2 focus:ring-white focus:border-white transition-all">
75
+ <option value="" disabled selected>Select an industry</option>
76
+ <option value="FSI">FSI (Financial Services)</option>
77
+ <option value="Healthcare">Healthcare</option>
78
+ <option value="Public Sector & Education">Public Sector & Education</option>
79
+ <option value="Retail and Ecommerce">Retail and Ecommerce</option>
80
+ <option value="Tech (SaaS)">Tech (SaaS)</option>
81
+ <option value="Cyber">Cyber</option>
82
+ <option value="Media and Entertainment">Media and Entertainment</option>
83
+ <option value="Manufacturing">Manufacturing</option>
84
+ <option value="Energy">Energy</option>
85
+ <option value="Logistics">Logistics</option>
86
+ <option value="Transport">Transport</option>
87
+ <option value="Startups">Startups</option>
88
+ </select>
89
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
90
+ <i data-feather="chevron-down" class="text-blue-300"></i>
91
  </div>
 
92
  </div>
 
93
  </div>
94
 
95
+ <div id="industry-description" class="bg-[#6A27C0] p-4 rounded-lg mb-4 hidden">
96
+ <p class="text-blue-100 text-sm"></p>
 
 
 
 
 
 
 
97
  </div>
98
+
99
+ <button id="start-btn" disabled class="w-full py-4 bg-white text-[#792DD4] font-semibold rounded-xl shadow-lg hover:bg-gray-100 hover:scale-[1.02] transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none mb-4 flex items-center justify-center space-x-2">
100
+ <span>Start Qualification</span>
101
+ <i data-feather="arrow-right" class="w-5 h-5"></i>
102
+ </button>
103
  </div>
104
+ </div>
105
 
106
+ <!-- Question Screens (initially hidden) -->
107
+ <div id="question-screens" class="hidden">
108
+ <!-- Progress Bar -->
109
+ <div class="fixed top-0 left-0 right-0 z-10">
110
+ <div class="h-1.5 bg-white/20">
111
+ <div id="progress-bar" class="progress-bar bg-white h-full rounded-r-full" style="width: 0%"></div>
112
+ </div>
 
 
113
  </div>
114
+
115
+ <!-- Questions will be dynamically inserted here -->
116
  </div>
 
117
 
118
+ <!-- Results Screen (initially hidden) -->
119
+ <div id="results-screen" class="question-screen p-6 bg-gray-50 hidden">
120
+ <div class="flex-1">
121
+ <div class="text-center mb-8">
122
+ <div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
123
+ <span id="score-percentage" class="text-3xl font-bold text-blue-600">0%</span>
124
+ </div>
125
+ <h2 class="text-2xl font-bold mb-2">Qualification Complete</h2>
126
+ <p id="score-message" class="text-gray-600"></p>
 
 
127
  </div>
128
+
129
+ <div class="mb-8">
130
+ <div class="flex items-center mb-4">
131
+ <div class="w-8 h-8 bg-[#792DD4] rounded-lg flex items-center justify-center mr-3">
132
+ <i data-feather="info" class="text-white w-4 h-4"></i>
133
+ </div>
134
+ <h3 class="text-xl font-bold">Industry Insights</h3>
 
135
  </div>
136
+ <div id="industry-insights" class="bg-white/90 p-5 rounded-xl shadow-md border border-white backdrop-blur-sm text-gray-800"></div>
137
+ </div>
138
+
139
+ <div class="mb-8">
140
+ <div class="flex items-center mb-4">
141
+ <div class="w-8 h-8 bg-[#792DD4] rounded-lg flex items-center justify-center mr-3">
142
+ <i data-feather="bar-chart-2" class="text-white w-4 h-4"></i>
143
+ </div>
144
+ <h3 class="text-xl font-bold">Score Breakdown</h3>
145
  </div>
146
+ <div id="score-breakdown" class="space-y-4"></div>
147
+ </div>
148
+
149
+ <div class="mb-8">
150
+ <div class="flex items-center mb-4">
151
+ <div class="w-8 h-8 bg-[#792DD4] rounded-lg flex items-center justify-center mr-3">
152
+ <i data-feather="alert-triangle" class="text-white w-4 h-4"></i>
 
 
 
 
 
153
  </div>
154
+ <h3 class="text-xl font-bold">Warnings & Recommendations</h3>
155
  </div>
156
+ <div id="warnings" class="space-y-4"></div>
157
  </div>
158
+
159
  </div>
160
+
161
+ <div class="space-y-3">
162
+ <button id="restart-quiz" onclick="location.href='index.html'" class="w-full py-4 bg-transparent text-white font-semibold rounded-xl shadow-md hover:bg-[#6A27C0] hover:scale-[1.02] transition-all border-2 border-white flex items-center justify-center space-x-2">
163
+ <i data-feather="home" class="w-5 h-5"></i>
164
+ <span>Return to Home</span>
165
+ </button>
166
  </div>
167
  </div>
168
+ </div>
169
 
170
  <script>
171
+ document.addEventListener('DOMContentLoaded', function() {
172
+ feather.replace();
173
+ AOS.init();
174
+
175
+ // Question data
176
+ const questions = [
177
+ {
178
+ section: "IDENTIFIED PAIN",
179
+ question: "Is our deal attached to addressing customers top business pain?",
180
+ answers: [
181
+ { text: "Economic Buyer Agrees Pain/Project A Top Business Priority", score: 9 },
182
+ { text: "Identified Pain: Specific Business Project/Need Agreed", score: 7 },
183
+ { text: "Needs/Pain Partially Defined (Scope / Personas Missing)", score: 4 },
184
+ { text: "Needs/Pain Unqualified (Project / Personas Unknown)", score: 1 },
185
+ { text: "No Project Identified Yet; Evaluating Technologies Only", score: -3 }
186
+ ]
187
+ },
188
+ {
189
+ section: "CHAMPIONS",
190
+ question: "Are we engaged directly with the right personas or stakeholders?",
191
+ answers: [
192
+ { text: "Champions & Economic Buyer Are Fully Engaged", score: 9 },
193
+ { text: "Champion Incentivised & Accessing Economic Buyer", score: 6 },
194
+ { text: "Established Relationship With A Qualified Champion", score: 4 },
195
+ { text: "Project-Level Contacts Only, Searching For Champions", score: 0 },
196
+ { text: "No Champions / Key Stakeholders Identified Yet", score: -3 }
197
+ ]
198
+ },
199
+ {
200
+ section: "GO LIVE PLAN",
201
+ question: "Has a Go Live Proposal been accepted by all key decision makers?",
202
+ answers: [
203
+ { text: "Key Stakeholders Agree; Awaiting Signature", score: 9 },
204
+ { text: "Economic Buyer Agrees & Has Validated Plan", score: 8 },
205
+ { text: "Champion/Partner Collaborating To Complete Plan", score: 4 },
206
+ { text: "Discussing Project & Timescales; Plan Incomplete", score: 0 },
207
+ { text: "Too Early For Go Live Proposal", score: -3 }
208
+ ]
209
+ },
210
+ {
211
+ section: "METRICS & MOTIVES",
212
+ question: "Have METRICS or a QBC been agreed by the ECONOMIC BUYER?",
213
+ answers: [
214
+ { text: "All Key Stakeholders & Buyers Agree Metrics / QBC", score: 9 },
215
+ { text: "Champion Says Economic Buyer Agrees Metrics / QBC", score: 7 },
216
+ { text: "We/Our Partner & Champion All Agree Metrics / QBC", score: 4 },
217
+ { text: "Only We/Our Partner Understand Metrics / QBC", score: 0 },
218
+ { text: "Metrics / Motives Not Yet Identified", score: -3 }
219
+ ]
220
+ },
221
+ {
222
+ section: "DECISION CRITERIA",
223
+ question: "Do we have clearly defined and agreed DECISION CRITERIA?",
224
+ answers: [
225
+ { text: "Our Decision Criteria Preferred By Economic Buyer", score: 9 },
226
+ { text: "Economic Buyer Agrees We Meet Requirements", score: 8 },
227
+ { text: "Criteria Co-Authored & Agreed with Champion", score: 6 },
228
+ { text: "Customer Sharing Specific Criteria For Demo/POC", score: 4 },
229
+ { text: "Customer Using Own Criteria; Unclear If We Meet It", score: 0 },
230
+ { text: "Buying Criteria Unknown/Incomplete", score: -3 }
231
+ ]
232
+ },
233
+ {
234
+ section: "DECISION PROCESS",
235
+ question: "Why now?",
236
+ answers: [
237
+ { text: "Critical reason for this month or specific date", score: 9 },
238
+ { text: "Financial or Strategic Impact to Champion / Business if delayed", score: 7 },
239
+ { text: "No Compelling Reason, But Timeline Agreed", score: 4 },
240
+ { text: "Engaged But No Compelling Reason Provided", score: 2 },
241
+ { text: "Salesperson's timeline", score: -3 }
242
+ ]
243
+ },
244
+ {
245
+ section: "COMPETITION",
246
+ question: "Does customer prefer us to COMPETITION?",
247
+ answers: [
248
+ { text: "Economic Buyer / Partner Agrees We Are Preferred Supplier", score: 9 },
249
+ { text: "Economic Buyer Agrees Our Differentiators Address Pain", score: 7 },
250
+ { text: "Champion/Partner Prefers Our Differentiators; Traps Set", score: 5 },
251
+ { text: "Competition Identified, Differentiation Agreed As Of Interest", score: 3 },
252
+ { text: "Competition Identified, But Not Confirmed As Preferred", score: 0 },
253
+ { text: "Not Asked About Competition Yet", score: -3 }
254
+ ]
255
+ },
256
+ {
257
+ section: "BLOCKERS?",
258
+ question: "Have we identified ALL potential blockers?",
259
+ answers: [
260
+ { text: "All stakeholders agree on plan to address all blockers", score: 9 },
261
+ { text: "Economic Buyer agrees to help address identified blockers", score: 7 },
262
+ { text: "Blockers Identified & Discussing With Champion / Partner", score: 4 },
263
+ { text: "We suspect blockers; haven't asked customer directly", score: 0 },
264
+ { text: "No blockers identified yet", score: -3 }
265
+ ]
266
+ },
267
+ {
268
+ section: "ECONOMIC BUYER",
269
+ question: "Has budget availability been confirmed?",
270
+ answers: [
271
+ { text: "Economic Buyer Says Budget Signed Off & Secured", score: 9 },
272
+ { text: "Economic Buyer Says Significant Budget assigned", score: 7 },
273
+ { text: "Champion/Partner Says Budget Exists; Amount Unknown", score: 4 },
274
+ { text: "Champion/Partner Confirms Budget Assigned Soon", score: 2 },
275
+ { text: "Champion/Partner Still Trying To Secure Budget", score: 0 },
276
+ { text: "Budget Source Not Yet Known", score: -3 }
277
+ ]
278
+ },
279
+ {
280
+ section: "PAPER PROCESS",
281
+ question: "Where are with with pricing & contractual terms?",
282
+ answers: [
283
+ { text: "Pricing/Contract & Terms Agreed and Approved", score: 9 },
284
+ { text: "Contract/Terms Agreed; Legal Departments Engaged", score: 7 },
285
+ { text: "Quantified Business Case Agreed, Security/Privacy Teams Engaged", score: 5 },
286
+ { text: "Negotiating; Building Business Case But Gaps Remain", score: 4 },
287
+ { text: "Customer/Partner has requested proposal", score: 2 },
288
+ { text: "Pricing / contract not discussed yet", score: -5 }
289
+ ]
290
+ }
291
+ ];
292
 
293
+ // Industry insights
294
+ const industryInsights = {
295
+ "FSI": "Financial Services buyers prioritize regulatory compliance, data security, and ultra-low latency for real-time transactions and fraud detection.",
296
+ "Healthcare": "Healthcare organizations focus on HIPAA/GDPR compliance, interoperability with EHR/EMR systems, and AI-driven patient data privacy.",
297
+ "Public Sector & Education": "Public Sector & Education buyers value cost efficiency, scalability for public demand, and strict adherence to government/educational data policies.",
298
+ "Retail and Ecommerce": "Retail and Ecommerce companies need seamless omnichannel integration, AI-powered personalization, and real-time inventory/analytics.",
299
+ "Tech (SaaS)": "Tech (SaaS) companies look for developer-friendly APIs, scalability for user growth, and AI/ML tools for product innovation.",
300
+ "Cyber": "Cyber security teams require advanced threat detection, zero-trust architecture, and AI-driven automation for rapid incident response.",
301
+ "Media and Entertainment": "Media and Entertainment firms need high-performance content delivery, AI for recommendation engines, and scalable storage for large media files.",
302
+ "Manufacturing": "Manufacturing companies value predictive maintenance, IoT integration, and AI for supply chain optimization and defect detection.",
303
+ "Energy": "Energy sector focuses on AI for predictive analytics in asset management, compliance with energy regulations, and operational resilience.",
304
+ "Logistics": "Logistics companies prioritize real-time tracking, AI for route optimization, and integration with global supply chain platforms.",
305
+ "Transport": "Transportation firms need AI for fleet management, real-time analytics for safety/compliance, and scalable IoT integration.",
306
+ "Startups": "Startups typically look for pay-as-you-go pricing, rapid deployment, and AI tools that accelerate MVP development and scaling."
307
+ };
308
+
309
+ // DOM elements
310
+ const industryScreen = document.getElementById('industry-screen');
311
+ const industrySelect = document.getElementById('industry');
312
+ const industryDescription = document.getElementById('industry-description');
313
+ const startBtn = document.getElementById('start-btn');
314
+ const questionScreens = document.getElementById('question-screens');
315
+ const progressBar = document.getElementById('progress-bar');
316
+ const resultsScreen = document.getElementById('results-screen');
317
+ const scorePercentage = document.getElementById('score-percentage');
318
+ const scoreMessage = document.getElementById('score-message');
319
+ const industryInsightsDiv = document.getElementById('industry-insights');
320
+ const scoreBreakdown = document.getElementById('score-breakdown');
321
+ const warningsDiv = document.getElementById('warnings');
322
+ const emailReportBtn = document.getElementById('email-report');
323
+ const restartQuizBtn = document.getElementById('restart-quiz');
324
+
325
+ // App state
326
+ let currentQuestion = 0;
327
+ let selectedIndustry = '';
328
+ let answers = [];
329
+ let totalScore = 0;
330
+ const maxPossibleScore = questions.length * 9;
331
+
332
+ // Event listeners
333
+ industrySelect.addEventListener('change', function() {
334
+ selectedIndustry = this.value;
335
+ const description = industryInsights[selectedIndustry];
336
+
337
+ if (description) {
338
+ industryDescription.querySelector('p').textContent = description;
339
+ industryDescription.classList.remove('hidden');
340
+ startBtn.disabled = false;
341
+ } else {
342
+ industryDescription.classList.add('hidden');
343
+ startBtn.disabled = true;
344
+ }
345
+ });
346
+
347
+ startBtn.addEventListener('click', function() {
348
+ industryScreen.classList.add('hidden');
349
+ questionScreens.classList.remove('hidden');
350
+ renderQuestion(currentQuestion);
351
+ });
352
 
353
+ emailReportBtn.addEventListener('click', function() {
354
+ this.innerHTML = '<i data-feather="check" class="mr-2"></i> Report Sent!';
355
+ feather.replace();
356
+ setTimeout(() => {
357
+ this.innerHTML = '<i data-feather="mail" class="mr-2"></i> Email Report';
358
+ feather.replace();
359
+ }, 2000);
360
+ });
361
+ function resetQuiz() {
362
+ currentQuestion = 0;
363
+ selectedIndustry = '';
364
+ answers = [];
365
+ totalScore = 0;
366
+
367
+ industryScreen.classList.remove('hidden');
368
+ questionScreens.classList.add('hidden');
369
+ resultsScreen.classList.add('hidden');
370
+
371
+ industrySelect.value = '';
372
+ industryDescription.classList.add('hidden');
373
+ startBtn.disabled = true;
374
  }
 
375
 
376
+ restartQuizBtn.addEventListener('click', resetQuiz);
377
+ // Render question
378
+ function renderQuestion(index) {
379
+ if (index >= questions.length) {
380
+ showResults();
381
+ return;
382
+ }
383
+
384
+ const question = questions[index];
385
+ const progress = ((index) / questions.length) * 100;
386
+ progressBar.style.width = `${progress}%`;
387
+
388
+ // Create question screen
389
+ const questionScreen = document.createElement('div');
390
+ questionScreen.className = `question-screen flex flex-col p-6 bg-white/90 backdrop-blur-sm fade-in`;
391
+ questionScreen.id = `question-${index}`;
392
+
393
+ questionScreen.innerHTML = `
394
+ <div class="flex-1">
395
+ <div class="mb-4">
396
+ <span class="text-sm font-medium text-blue-600">${question.section}</span>
397
+ <h2 class="text-xl font-bold mt-1 mb-2">${question.question}</h2>
398
+ </div>
399
+
400
+ <div class="mb-4">
401
+ <label for="answer-${index}" class="block text-sm font-medium text-gray-700 mb-2">Select answer</label>
402
+ <div class="relative">
403
+ <select id="answer-${index}" class="w-full p-3 bg-white/90 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#9B5CEB] focus:border-[#9B5CEB]">
404
+ <option value="" disabled selected>Select an answer</option>
405
+ ${question.answers.map(a => `<option value="${a.score}">${a.text}</option>`).join('')}
406
+ </select>
407
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
408
+ <i data-feather="chevron-down"></i>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ <button id="next-btn-${index}" disabled class="w-full py-3 bg-[#792DD4] text-white font-semibold rounded-lg shadow-md hover:bg-[#6A27C0] transition disabled:opacity-50 disabled:cursor-not-allowed mb-4">
413
+ ${index === questions.length - 1 ? 'Finish' : 'Next'}
414
+ </button>
415
+ </div>
416
+ `;
417
+
418
+ // Clear previous question and add new one
419
+ questionScreens.innerHTML = '';
420
+ questionScreens.appendChild(questionScreen);
421
+ feather.replace();
422
+
423
+ // Set up event listeners for new question
424
+ const answerSelect = document.getElementById(`answer-${index}`);
425
+ const nextBtn = document.getElementById(`next-btn-${index}`);
426
+
427
+ answerSelect.addEventListener('change', function() {
428
+ nextBtn.disabled = !this.value;
429
+ });
430
+
431
+ nextBtn.addEventListener('click', function() {
432
+ const score = parseInt(answerSelect.value);
433
+ answers.push({
434
+ question: question.question,
435
+ answer: answerSelect.options[answerSelect.selectedIndex].text,
436
+ score: score,
437
+ section: question.section
438
+ });
439
+ totalScore += score;
440
+ currentQuestion++;
441
+ renderQuestion(currentQuestion);
442
+ });
443
+ }
444
+
445
+ // Show results
446
+ function showResults() {
447
+ questionScreens.classList.add('hidden');
448
+ resultsScreen.classList.remove('hidden');
449
+
450
+ // Calculate percentage (normalize to 0-100 scale)
451
+ const normalizedScore = Math.max(0, totalScore + (questions.length * 3)); // Adjust for negative scores
452
+ const percentage = Math.round((normalizedScore / (maxPossibleScore + (questions.length * 3))) * 100);
453
+
454
+ scorePercentage.textContent = `${percentage}%`;
455
+
456
+ // Set score message
457
+ if (percentage >= 80) {
458
+ scoreMessage.textContent = "High probability of winning! This opportunity is well-qualified.";
459
+ } else if (percentage >= 60) {
460
+ scoreMessage.textContent = "Good chance of winning. Focus on improving weaker areas.";
461
+ } else if (percentage >= 40) {
462
+ scoreMessage.textContent = "Moderate chance. Significant improvements needed in several areas.";
463
+ } else {
464
+ scoreMessage.textContent = "Low probability. Consider whether to continue pursuing this opportunity.";
465
+ }
466
+
467
+ // Set industry insights
468
+ industryInsightsDiv.textContent = industryInsights[selectedIndustry];
469
+
470
+ // Create score breakdown
471
+ scoreBreakdown.innerHTML = '';
472
+ answers.forEach((answer, index) => {
473
+ const sectionScore = document.createElement('div');
474
+ sectionScore.className = 'bg-white p-4 rounded-lg shadow-sm border border-gray-200';
475
+
476
+ const scoreRatio = answer.score / 9;
477
+ let scoreColor;
478
+ if (scoreRatio >= 0.8) scoreColor = 'text-green-600';
479
+ else if (scoreRatio >= 0.5) scoreColor = 'text-yellow-600';
480
+ else scoreColor = 'text-red-600';
481
+
482
+ sectionScore.innerHTML = `
483
+ <div class="flex justify-between items-start mb-2">
484
+ <h4 class="font-medium">${answer.section}</h4>
485
+ <span class="font-bold ${scoreColor}">${answer.score}/9</span>
486
+ </div>
487
+ <p class="text-sm text-gray-600 mb-2">${answer.answer}</p>
488
+ `;
489
+
490
+ scoreBreakdown.appendChild(sectionScore);
491
+ });
492
+
493
+ // Create warnings
494
+ warningsDiv.innerHTML = '';
495
+ const lowScores = answers.filter(a => a.score < 5);
496
+ // Add more industry-specific recommendations as needed
497
+
498
+ if (lowScores.length === 0) {
499
+ warningsDiv.innerHTML = `
500
+ <div class="bg-green-50 p-4 rounded-lg border border-green-200 text-green-800">
501
+ <p>No critical weaknesses identified. All areas scored well.</p>
502
+ </div>
503
+ `;
504
+ } else {
505
+ lowScores.forEach(score => {
506
+ const warning = document.createElement('div');
507
+ warning.className = 'bg-red-50 p-4 rounded-lg border border-red-200 text-red-800';
508
+
509
+ let advice = '';
510
+ if (score.section === "IDENTIFIED PAIN") {
511
+ advice = "Work with the customer to better define their business pain and how your solution addresses it.";
512
+ } else if (score.section === "CHAMPIONS") {
513
+ advice = "Identify and engage with champions who can influence the economic buyer.";
514
+ } else if (score.section === "GO LIVE PLAN") {
515
+ advice = "Develop a clear implementation plan with agreed timelines and milestones.";
516
+ } else if (score.section === "METRICS & MOTIVES") {
517
+ advice = "Establish clear metrics for success that are agreed by all stakeholders.";
518
+ } else if (score.section === "DECISION CRITERIA") {
519
+ advice = "Ensure your solution meets the customer's decision criteria or work to influence those criteria.";
520
+ } else if (score.section === "DECISION PROCESS") {
521
+ advice = "Identify and document the compelling reason for the customer to act now.";
522
+ } else if (score.section === "COMPETITION") {
523
+ advice = "Differentiate your solution and establish why you're the preferred choice.";
524
+ } else if (score.section === "BLOCKERS?") {
525
+ advice = "Identify and address any potential blockers to the deal progressing.";
526
+ } else if (score.section === "ECONOMIC BUYER") {
527
+ advice = "Confirm budget availability and secure commitment from the economic buyer.";
528
+ } else if (score.section === "PAPER PROCESS") {
529
+ advice = "Advance discussions on pricing and contractual terms to avoid last-minute hurdles.";
530
+ }
531
+
532
+ warning.innerHTML = `
533
+ <h4 class="font-semibold mb-1">${score.section}</h4>
534
+ <p class="text-sm mb-2">${score.question}</p>
535
+ <p class="text-sm font-medium">Recommendation: ${advice}</p>
536
+ `;
537
+
538
+ warningsDiv.appendChild(warning);
539
+ });
540
+ }
541
+ }
542
+ });
543
  </script>
544
  </body>
545
  </html>