Hugging Face's logo

Spaces:
DjayChucko
/
EnablingSales
Running

App Files
DjayChucko commited on
Commit
f3d4644
·
verified ·
1 Parent(s): 8118a07

Manual changes saved

Browse files
Files changed (1) hide show
  1. scorecard.html +134 -301
scorecard.html CHANGED
@@ -11,46 +11,32 @@
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
  body { font-family: 'Poppins', sans-serif; }
16
- .question-screen {
17
- min-height: 100vh;
18
- transition: all 0.3s ease;
19
- }
20
- .fade-in {
21
- animation: fadeIn 0.5s;
22
- }
23
- @keyframes fadeIn {
24
- from { opacity: 0; }
25
- to { opacity: 1; }
26
- }
27
- .progress-bar {
28
- height: 6px;
29
- transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
30
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
31
- }
32
  select {
33
- -webkit-appearance: none;
34
- -moz-appearance: none;
35
- appearance: none;
36
  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='currentColor' 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");
37
- background-repeat: no-repeat;
38
- background-position: right 0.75rem center;
39
- background-size: 1.25rem;
40
  }
41
  .dark select {
42
  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");
43
  }
44
- .hamburger-line {
45
- width: 20px; height: 2px; background-color: white; display: block; transition: all 0.3s;
46
- }
47
  .open .hamburger-line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
48
  .open .hamburger-line:nth-child(2) { opacity: 0; }
49
  .open .hamburger-line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
50
- .nav-link.active {
51
- font-weight: 600;
52
- border-bottom: 2px solid #9B5CEB;
53
- }
54
  </style>
55
  </head>
56
  <body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen flex flex-col relative">
@@ -65,321 +51,168 @@
65
  <nav class="hidden md:flex space-x-8">
66
  <a href="index.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">Home</a>
67
  <a href="value-mapper.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">Mapper</a>
68
- <a href="scorecard.html" class="nav-link active py-2 px-1 text-gray-600 dark:text-gray-300">Scorecard</a>
69
- <a href="strategy.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">Method</a>
70
  </nav>
71
  <div class="flex items-center space-x-4">
72
  <button id="themeToggle" class="p-2 rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700">
73
  <i data-feather="moon" class="hidden dark:block"></i>
74
  <i data-feather="sun" class="block dark:hidden"></i>
75
  </button>
76
- <button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2 bg-purple-600 rounded-lg">
77
- <span class="hamburger-line"></span>
78
- <span class="hamburger-line"></span>
79
- <span class="hamburger-line"></span>
80
  </button>
81
  </div>
82
  </div>
83
-
84
  <div id="mobileMenu" class="hidden md:hidden py-4 border-t border-gray-200 dark:border-gray-700 mt-3">
85
  <div class="flex flex-col space-y-3">
86
  <a href="index.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Home</a>
87
  <a href="value-mapper.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Mapper</a>
88
- <a href="scorecard.html" class="nav-link active py-2 px-1 text-gray-600 dark:text-gray-300">Scorecard</a>
89
- <a href="strategy.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Method</a>
90
  </div>
91
  </div>
92
  </div>
93
  </header>
94
 
95
  <div id="app" class="relative overflow-hidden flex-1">
96
- <div id="industry-screen" class="question-screen flex justify-center pt-16 p-6 bg-gradient-to-br from-purple-600 to-indigo-700 text-white">
97
  <div class="max-w-2xl mx-auto w-full text-center" data-aos="fade-up">
98
- <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
99
- <img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/MEDDICC%20Scorecard%20Logo.png" alt="MEDDICC Logo" class="w-18 h-12">
100
- </div>
101
  <h1 class="text-4xl font-bold mb-2 text-white">MEDDICC Scorecard</h1>
102
  <p class="text-purple-200 font-light text-lg">Select the customer's industry and current deal stage</p>
103
-
104
  <div class="mt-8 mb-6 grid sm:grid-cols-2 gap-4">
105
- <div class="relative">
106
- <select id="industry" class="w-full p-4 bg-white/20 border-2 border-purple-300 rounded-xl text-white placeholder-purple-200 focus:ring-2 focus:ring-white focus:outline-none transition-all appearance-none">
107
- <option value="" disabled selected>Select an Industry</option>
108
- <option value="FSI">FSI (Financial Services)</option>
109
- <option value="Healthcare">Healthcare</option>
110
- <option value="Public Sector & Education">Public Sector & Education</option>
111
- <option value="Retail and Ecommerce">Retail and Ecommerce</option>
112
- <option value="Tech (SaaS)">Tech (SaaS)</option>
113
- <option value="Cyber">Cyber</option>
114
- <option value="Media and Entertainment">Media and Entertainment</option>
115
- <option value="Manufacturing">Manufacturing</option>
116
- <option value="Energy">Energy</option>
117
- <option value="Logistics">Logistics</option>
118
- <option value="Transport">Transport</option>
119
- <option value="Startups">Startups</option>
120
- </select>
121
- </div>
122
- <div class="relative">
123
- <select id="sales-stage" class="w-full p-4 bg-white/20 border-2 border-purple-300 rounded-xl text-white placeholder-purple-200 focus:ring-2 focus:ring-white focus:outline-none transition-all appearance-none">
124
- <option value="" disabled selected>Select Sales Stage</option>
125
- <option value="Early Stage">Early Stage</option>
126
- <option value="Evaluation / PoC">Evaluation / PoC</option>
127
- <option value="Closing">Closing</option>
128
- </select>
129
- </div>
130
  </div>
131
-
132
- <button id="start-btn" disabled class="w-full py-4 bg-white text-purple-700 font-semibold rounded-xl shadow-lg hover:bg-gray-100 transform hover:scale-102 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none mb-4 flex items-center justify-center space-x-2">
133
- <span>Start Qualification</span>
134
- <i data-feather="arrow-right" class="w-5 h-5"></i>
135
- </button>
136
  </div>
137
  </div>
138
-
139
- <div id="question-screens" class="hidden">
140
- <div class="fixed top-0 left-0 right-0 z-10 bg-gray-100 dark:bg-gray-900 pt-16">
141
- <div class="h-1.5 bg-gray-200 dark:bg-gray-700">
142
- <div id="progress-bar" class="progress-bar bg-purple-600 h-full rounded-r-full"></div>
143
- </div>
144
- </div>
145
- </div>
146
-
147
  <div id="results-screen" class="question-screen p-6 bg-gray-100 dark:bg-gray-900 hidden overflow-y-auto">
148
  <div class="max-w-4xl mx-auto w-full pb-8" data-aos="fade-in">
149
- <div class="text-center mb-8">
150
- <div class="w-24 h-24 bg-white dark:bg-gray-800 border-4 border-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
151
- <span id="score-percentage" class="text-3xl font-bold text-purple-600 dark:text-purple-400">0%</span>
152
- </div>
153
- <h2 id="score-message" class="text-xl font-semibold mt-2"></h2>
154
- </div>
155
-
156
- <div class="mb-8">
157
- <div class="flex items-center mb-4">
158
- <div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"><i data-feather="zap" class="text-white w-4 h-4"></i></div>
159
- <h3 class="text-xl font-bold">Executive Summary</h3>
160
- </div>
161
- <div id="executive-summary" class="bg-white dark:bg-gray-800 p-5 rounded-xl shadow-md">
162
- </div>
163
- </div>
164
-
165
  <div class="grid md:grid-cols-2 gap-8">
166
- <div>
167
- <div class="flex items-center mb-4">
168
- <div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"><i data-feather="info" class="text-white w-4 h-4"></i></div>
169
- <h3 class="text-xl font-bold">Industry Insights</h3>
170
- </div>
171
- <div id="industry-insights" class="bg-white dark:bg-gray-800 p-5 rounded-xl shadow-md text-gray-800 dark:text-gray-200"></div>
172
- </div>
173
-
174
- <div>
175
- <div class="flex items-center mb-4">
176
- <div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"><i data-feather="bar-chart-2" class="text-white w-4 h-4"></i></div>
177
- <h3 class="text-xl font-bold">Detailed Analysis</h3>
178
- </div>
179
- <div id="score-breakdown" class="space-y-4"></div>
180
- </div>
181
- </div>
182
-
183
- <div class="mt-8">
184
- <button id="restart-quiz" class="w-full py-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-semibold rounded-xl shadow-lg hover:from-purple-700 hover:to-indigo-700 transition-all duration-300 transform hover:scale-105 flex items-center justify-center space-x-2">
185
- <i data-feather="refresh-cw" class="w-5 h-5"></i>
186
- <span>Start New Scorecard</span>
187
- </button>
188
  </div>
 
189
  </div>
190
  </div>
191
  </div>
192
 
193
  <script>
194
- document.addEventListener('DOMContentLoaded', function() {
195
- AOS.init({ once: true, duration: 600 });
196
- feather.replace();
197
-
198
- // --- DATA & STATE MANAGEMENT ---
199
- const questions = [
200
- { section: 'PAIN & METRICS', subheading: 'Section 1: The Opportunity', question: 'What is the quantifiable business pain?', answers: [ { text: 'EB agrees on a top-priority pain with a quantified business case (QBC)', score: 9 }, { text: 'Champion agrees on the pain and we are building the business case', score: 6 }, { text: 'Pain is defined but lacks clear metrics and EB involvement', score: 3 }, { text: 'Pain is vague and no metrics have been discussed', score: 0 } ] },
201
- { section: 'CHAMPION & EB', subheading: 'Section 1: The Opportunity', question: 'How strong is our relationship with the key personas?', answers: [ { text: 'Our Champion is selling on our behalf and we have EB engagement', score: 9 }, { text: 'We have a tested Champion who is providing access to power', score: 6 }, { text: 'We have a potential Champion but they are not yet tested', score: 3 }, { text: 'No Champion or Economic Buyer identified', score: 0 } ] },
202
- { section: 'DECISION PROCESS & CRITERIA', subheading: 'Section 2: The Decision', question: 'How will the decision be made and what are the requirements?', answers: [ { text: 'We influenced the criteria and the process is confirmed with the EB', score: 9 }, { text: 'We know the process and criteria and believe we are aligned', score: 6 }, { text: 'The decision process or criteria are partially understood', score: 3 }, { text: 'The process and criteria are a black box', score: 0 } ] },
203
- { section: 'COMPETITION & BLOCKERS', subheading: 'Section 2: The Decision', question: 'What internal and external forces can stop this deal?', answers: [ { text: 'We are seen as the preferred vendor and all blockers have a mitigation plan', score: 9 }, { text: 'Competition is known, traps are set, and some blockers are identified', score: 6 }, { text: 'We know of competitors but have not identified potential blockers', score: 3 }, { text: 'Competitive landscape and internal blockers are unknown', score: 0 } ] },
204
- { section: 'PAPER PROCESS', subheading: 'Section 3: The Logistics', question: 'How aligned are we on the procurement and legal process?', answers: [ { text: 'Pricing, contract, and security review process are fully confirmed', score: 9 }, { text: 'We have had initial discussions on budget and the paper process', score: 6 }, { text: 'A budget is confirmed but the paper process has not been discussed', score: 3 }, { text: 'Budget and procurement process are unknown', score: 0 } ] },
205
- { section: 'IMPLEMENTATION PLAN', subheading: 'Section 3: The Logistics', question: 'Is there a clear, agreed-upon plan for success after signing?', answers: [ { text: 'All stakeholders have agreed to a formal, joint implementation plan', score: 9 }, { text: 'We have shared a draft implementation plan with our Champion', score: 6 }, { text: 'Implementation has been discussed but no formal plan exists', score: 3 }, { text: 'The post-sale process has not been discussed', score: 0 } ] }
206
- ];
207
-
208
- const scoreMessages = {
209
- 'Closing': { 14: "Low Probability. More qualification of Why Now? and Why Us? required.", 39: "Medium Probability. More qualification of Why Now? to quantify the business case.", 60: "High Probability. Focus on Why Us? loop in Product teams, set traps, kill blockers.", 101: "Commit. Be cautious. Expect last minute blockers, seek Scaleway Executive Sponsors." },
210
- 'Early Stage': { 14: "Low Potential. More discovery needed to find a compelling business pain.", 39: "Medium Potential. Good start. Focus on building the business case and identifying a Champion.", 60: "High Potential. Strong signal. Engage more stakeholders and define success criteria for an evaluation.", 101: "Very High Potential. Excellent qualification. Prepare to move to a formal evaluation or PoC." },
211
- 'Evaluation / PoC': { 14: "Low Confidence. This deal is not ready for an evaluation. Re-qualify the business case.", 39: "Medium Confidence. The business case is weak. Ensure the PoC has clear, agreed-upon success metrics.", 60: "High Confidence. The PoC is well-positioned. Focus on technical validation and neutralizing blockers.", 101: "Very High Confidence. A successful evaluation should lead to a close. Start planning the paper process." }
212
- };
213
-
214
- const industryInsights = { 'FSI': 'FSI buyers prioritize regulatory compliance, data security, and low latency for transactions and fraud detection.', 'Healthcare': 'Healthcare focuses on HIPAA/GDPR compliance, interoperability with EHR systems, and patient data privacy.', 'Public Sector & Education': 'Public Sector buyers value cost efficiency, scalability, and adherence to government/educational data policies.', 'Retail and Ecommerce': 'Retail needs omnichannel integration, AI-powered personalization, and real-time inventory/analytics.', 'Tech (SaaS)': 'SaaS companies look for developer-friendly APIs, scalability, and AI/ML tools for product innovation.', 'Cyber': 'Cyber security teams require advanced threat detection, zero-trust architecture, and AI-driven automation for incident response.', 'Media and Entertainment': 'Media firms need high-performance content delivery, AI for recommendation engines, and scalable storage.', 'Manufacturing': 'Manufacturing values predictive maintenance, IoT integration, and AI for supply chain optimization.', 'Energy': 'The Energy sector focuses on AI for predictive analytics, regulatory compliance, and operational resilience.', 'Logistics': 'Logistics companies prioritize real-time tracking, AI for route optimization, and supply chain integration.', 'Transport': 'Transportation firms need AI for fleet management, real-time analytics for safety/compliance, and IoT integration.', 'Startups': 'Startups look for pay-as-you-go pricing, rapid deployment, and AI tools to accelerate MVP development.' };
215
- const summarySnippets = { 'PAIN & METRICS': 'Solidify the business case by quantifying the pain with the Economic Buyer.', 'CHAMPION & EB': 'Test your Champion and leverage them for greater access to the Economic Buyer.', 'DECISION PROCESS & CRITERIA': 'Influence the decision criteria and get the formal process in writing.', 'COMPETITION & BLOCKERS': 'Set competitive traps and proactively identify all potential deal blockers.', 'PAPER PROCESS': 'De-risk the closing stage by confirming the budget source and procurement process early.', 'IMPLEMENTATION PLAN': 'Co-create a success plan with the customer to show value beyond the signature.' };
216
- const industrySpecificAdvice = { 'FSI': { 'PAIN & METRICS': 'Frame the pain in terms of regulatory compliance (e.g., GDPR), risk mitigation, or fraud detection. FSI buyers are heavily motivated by these.', 'PAPER PROCESS': 'The legal and compliance review in FSI is rigorous. Proactively provide security documentation to accelerate this stage.' }, 'Healthcare': { 'PAIN & METRICS': 'Pain in Healthcare is often tied to patient data privacy (HIPAA) or interoperability with EHR/EMR systems. Align with these.', 'DECISION PROCESS & CRITERIA': 'Criteria will heavily weigh on data security and HIPAA compliance. Position yourself as the most secure option.' }, 'Tech (SaaS)': { 'COMPETITION & BLOCKERS': 'The SaaS market is crowded. Your competitive advantage must be crystal clear—is it APIs, integrations, or UX?', 'IMPLEMENTATION PLAN': 'Offer a "quick start" or phased implementation plan. SaaS buyers value rapid time-to-value.' } };
217
-
218
- // --- DOM & STATE ---
219
- const app = {
220
- screens: { industry: document.getElementById('industry-screen'), questions: document.getElementById('question-screens'), results: document.getElementById('results-screen') },
221
- inputs: { industry: document.getElementById('industry'), salesStage: document.getElementById('sales-stage'), startBtn: document.getElementById('start-btn') },
222
- ui: { progressBar: document.getElementById('progress-bar'), scorePercentage: document.getElementById('score-percentage'), scoreMessage: document.getElementById('score-message'), industryInsights: document.getElementById('industry-insights'), scoreBreakdown: document.getElementById('score-breakdown'), executiveSummary: document.getElementById('executive-summary') },
223
- buttons: { restart: document.getElementById('restart-quiz'), themeToggle: document.getElementById('themeToggle'), mobileMenu: document.getElementById('mobileMenuButton') },
224
- state: { currentQuestion: 0, industry: '', salesStage: '', answers: [], maxScore: questions.length * 9 }
225
- };
226
-
227
- // --- EVENT LISTENERS ---
228
- app.inputs.industry.addEventListener('change', (e) => { app.state.industry = e.target.value; checkSelections(); });
229
- app.inputs.salesStage.addEventListener('change', (e) => { app.state.salesStage = e.target.value; checkSelections(); });
230
- app.inputs.startBtn.addEventListener('click', () => { app.screens.industry.classList.add('hidden'); app.screens.questions.classList.remove('hidden'); renderQuestion(app.state.currentQuestion); });
231
- app.buttons.restart.addEventListener('click', resetQuiz);
232
-
233
- function checkSelections() { app.inputs.startBtn.disabled = !(app.state.industry && app.state.salesStage); }
234
-
235
- // --- CORE FUNCTIONS ---
236
- function resetQuiz() {
237
- app.state.currentQuestion = 0;
238
- app.state.industry = '';
239
- app.state.salesStage = '';
240
- app.state.answers = [];
241
- app.inputs.industry.value = "";
242
- app.inputs.salesStage.value = "";
243
- app.inputs.startBtn.disabled = true;
244
- app.screens.results.classList.add('hidden');
245
- app.screens.industry.classList.remove('hidden');
246
- AOS.refresh();
247
- }
248
-
249
- function renderQuestion(index) {
250
- if (index >= questions.length) { return showResults(); }
251
-
252
- const question = questions[index];
253
- app.ui.progressBar.style.width = `${(index / questions.length) * 100}%`;
254
-
255
- const questionScreen = document.createElement('div');
256
- questionScreen.className = `question-screen flex flex-col pt-16 p-6 bg-gray-100 dark:bg-gray-900 fade-in`;
257
-
258
- const backButtonHTML = `<button id="back-btn" class="w-1/3 py-3 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-lg shadow-md hover:bg-gray-400 dark:hover:bg-gray-600 transition">Back</button>`;
259
- const subheadingHTML = `<p class="text-xs font-bold tracking-wider uppercase text-purple-400 mb-2">${question.subheading}</p>`;
260
-
261
- questionScreen.innerHTML = `
262
- <div class="max-w-2xl mx-auto w-full">
263
- <div class="mb-4 text-center">
264
- ${subheadingHTML}
265
- <span class="text-sm font-medium text-gray-500 dark:text-gray-400">${question.section}</span>
266
- <h2 class="text-2xl font-bold mt-1 mb-2">${question.question}</h2>
267
- </div>
268
- <div class="mb-6">
269
- <div class="relative"><select id="answer-select" class="w-full p-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:outline-none"><option value="" disabled selected>Select an answer</option>${question.answers.map(a => `<option value="${a.score}">${a.text}</option>`).join('')}</select></div>
270
- </div>
271
- <div class="flex items-center gap-4">${backButtonHTML}<button id="next-btn" disabled class="w-2/3 py-3 bg-purple-600 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 transition disabled:opacity-50 disabled:cursor-not-allowed">${index === questions.length - 1 ? 'Finish Qualification' : 'Next Question'}</button></div>
272
- </div>
273
- `;
274
-
275
- app.screens.questions.innerHTML = '';
276
- app.screens.questions.appendChild(questionScreen);
277
  feather.replace();
278
-
279
- const answerSelect = document.getElementById('answer-select');
280
- const nextBtn = document.getElementById('next-btn');
281
- const backBtn = document.getElementById('back-btn');
282
-
283
- answerSelect.addEventListener('change', () => { nextBtn.disabled = !answerSelect.value; });
284
-
285
- nextBtn.addEventListener('click', () => {
286
- app.state.answers.push({ section: question.section, answer: answerSelect.options[answerSelect.selectedIndex].text, score: parseInt(answerSelect.value) });
287
- app.state.currentQuestion++;
288
- renderQuestion(app.state.currentQuestion);
289
- });
290
 
291
- backBtn.addEventListener('click', () => {
292
- if (index > 0) { app.state.currentQuestion--; app.state.answers.pop(); renderQuestion(app.state.currentQuestion); } else { resetQuiz(); }
293
- });
294
- }
295
-
296
- function showResults() {
297
- app.screens.questions.classList.add('hidden');
298
- app.screens.results.classList.remove('hidden');
299
- AOS.refresh();
300
-
301
- const totalScore = app.state.answers.reduce((sum, ans) => sum + ans.score, 0);
302
- const percentage = Math.round((totalScore / app.state.maxScore) * 100);
303
-
304
- app.ui.scorePercentage.textContent = `${percentage}%`;
305
-
306
- const messages = scoreMessages[app.state.salesStage];
307
- let messageText = '';
308
- if (percentage <= 14) messageText = messages[14];
309
- else if (percentage <= 39) messageText = messages[39];
310
- else if (percentage <= 60) messageText = messages[60];
311
- else messageText = messages[101];
312
- app.ui.scoreMessage.innerHTML = `<span class="block">${messageText}</span>`;
313
-
314
- app.ui.industryInsights.innerHTML = `<p>${industryInsights[app.state.industry]}</p>`;
315
- app.ui.scoreBreakdown.innerHTML = '';
316
-
317
- app.state.answers.forEach(answer => {
318
- const scoreRatio = answer.score / 9;
319
- let scoreColor = 'text-red-600 dark:text-red-400', recommendationHTML = '';
320
-
321
- if (scoreRatio >= 0.7) scoreColor = 'text-green-600 dark:text-green-400';
322
- else if (scoreRatio >= 0.4) scoreColor = 'text-yellow-600 dark:text-yellow-400';
323
-
324
- if (answer.score < 5) {
325
- let advice = industrySpecificAdvice[app.state.industry]?.[answer.section] || summarySnippets[answer.section] || 'Focus on improving this area.';
326
- recommendationHTML = `<div class="mt-3 pt-3 border-t border-red-200 dark:border-gray-700 bg-red-50 dark:bg-red-900/20 p-3 rounded-b-lg -m-4 mt-4"><p class="text-sm font-medium text-red-800 dark:text-red-200"><strong>Recommendation:</strong> ${advice}</p></div>`;
327
- }
328
- const sectionScore = `<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm"><div class="flex justify-between items-start mb-2"><h4 class="font-medium">${answer.section}</h4><span class="font-bold ${scoreColor}">${answer.score}/9</span></div><p class="text-sm text-gray-600 dark:text-gray-400">${answer.answer}</p>${recommendationHTML}</div>`;
329
- app.ui.scoreBreakdown.insertAdjacentHTML('beforeend', sectionScore);
330
- });
331
-
332
- generateExecutiveSummary(app.state.answers, percentage, app.state.salesStage);
333
- feather.replace();
334
- }
335
-
336
- function generateExecutiveSummary(answers, overallScore, salesStage) {
337
- let weaknesses = [];
338
- const metricsMotiveAnswer = answers.find(a => a.section === 'PAIN & METRICS');
339
- const sortedAnswers = [...answers].sort((a, b) => a.score - b.score);
340
-
341
- if (metricsMotiveAnswer && metricsMotiveAnswer.score < 5) {
342
- weaknesses.push(metricsMotiveAnswer);
343
- const nextWeakest = sortedAnswers.find(a => a.section !== 'PAIN & METRICS');
344
- if (nextWeakest && weaknesses.length < 2) weaknesses.push(nextWeakest);
345
- } else { weaknesses = sortedAnswers.slice(0, 2); }
346
-
347
- const strength = sortedAnswers[sortedAnswers.length - 1];
348
- let summaryHTML = '<ul class="space-y-3 text-gray-700 dark:text-gray-300">';
349
 
350
- if (overallScore >= 60 && strength.score >= 7) {
351
- summaryHTML += `<li class="flex items-start"><span class="mr-2 text-green-500">✅</span><span><strong>Strength:</strong> The deal is well-positioned in <strong>${strength.section}</strong>. Continue to leverage this.</span></li>`;
 
 
 
 
 
 
 
 
 
 
352
  }
353
 
354
- weaknesses.forEach(weakness => {
355
- const snippet = summarySnippets[weakness.section] || 'This area needs to be addressed.';
356
- summaryHTML += `<li class="flex items-start"><span class="mr-2 text-red-500">🔴</span><span><strong>Urgent Focus: ${weakness.section}</strong>. ${snippet}</span></li>`;
357
- });
358
- summaryHTML += '</ul>';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
359
 
360
- let strategicMessage = '';
361
- if (overallScore <= 19) strategicMessage = salesStage === 'Evaluation / PoC' ? "Dangerous if considering an Eval/PoC with this low score." : "Okay if early, but more qualification is required.";
362
- else if (overallScore <= 39) {
363
- if (salesStage === 'Early Stage') strategicMessage = "Good news for an early stage deal. Now attach the offer to a mutually agreed business outcome.";
364
- else if (salesStage === 'Evaluation / PoC') strategicMessage = "Be cautious. The business case for this PoC is not strong enough. Why now? Why us?";
365
- else strategicMessage = "Be worried. A deal this weak should not be in the closing stage.";
366
- } else if (overallScore <= 59) {
367
- if (salesStage === 'Early Stage') strategicMessage = "Very good news for an early stage deal. A solid foundation to build upon.";
368
- else if (salesStage === 'Evaluation / PoC') strategicMessage = "This looks good. Now, what are the blockers? Confirm timeline and budget.";
369
- else strategicMessage = "Look for blockers. Can the champion access the Economic Buyer? Is this a champion or a coach?";
370
- } else if (overallScore <= 79) {
371
- strategicMessage = salesStage === 'Evaluation / PoC' ? "Very strong for a PoC. Start preparing success metrics and crafting the proposal." : "Focus on differentiation and beware of the buyer ghosting as you move to close.";
372
- } else {
373
- strategicMessage = "The finish line is in sight, but it's not over until it's signed. Verbally discuss pricing/contracts with champions/buyers and expect negotiations.";
 
 
 
374
  }
375
-
376
- summaryHTML += `<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700"><p class="text-base font-medium text-purple-700 dark:text-purple-400">${strategicMessage}</p></div>`;
377
- app.ui.executiveSummary.innerHTML = summaryHTML;
378
- }
379
 
380
- // --- Mobile & Theme Handlers ---
381
- app.buttons.mobileMenu.addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden'); app.buttons.mobileMenu.classList.toggle('open'); });
382
- });
 
 
 
383
  </script>
384
 
385
  </body>
 
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
+ <script>
15
+ tailwind.config = {
16
+ darkMode: 'class',
17
+ }
18
+ </script>
19
  <style>
20
  body { font-family: 'Poppins', sans-serif; }
21
+ .question-screen { min-height: 100vh; transition: all 0.3s ease; }
22
+ .fade-in { animation: fadeIn 0.5s; }
23
+ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
24
+ .progress-bar { height: 6px; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
 
 
 
 
 
 
 
 
 
 
 
 
25
  select {
26
+ -webkit-appearance: none; -moz-appearance: none; appearance: none;
 
 
27
  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='currentColor' 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");
28
+ background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25rem;
 
 
29
  }
30
  .dark select {
31
  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");
32
  }
33
+ .hamburger-line { width: 20px; height: 2px; transition: all 0.3s; }
34
+ html:not(.dark) .hamburger-line { background-color: #4a5568; }
35
+ html.dark .hamburger-line { background-color: white; }
36
  .open .hamburger-line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
37
  .open .hamburger-line:nth-child(2) { opacity: 0; }
38
  .open .hamburger-line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
39
+ .nav-link.active { font-weight: 600; border-bottom: 2px solid #8b5cf6; }
 
 
 
40
  </style>
41
  </head>
42
  <body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen flex flex-col relative">
 
51
  <nav class="hidden md:flex space-x-8">
52
  <a href="index.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">Home</a>
53
  <a href="value-mapper.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">Mapper</a>
54
+ <a href="scorecard.html" class="nav-link active py-2 px-1 text-gray-800 dark:text-gray-100">Scorecard</a>
55
+ <a href="academy.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">Academy</a>
56
  </nav>
57
  <div class="flex items-center space-x-4">
58
  <button id="themeToggle" class="p-2 rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700">
59
  <i data-feather="moon" class="hidden dark:block"></i>
60
  <i data-feather="sun" class="block dark:hidden"></i>
61
  </button>
62
+ <button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2 bg-gray-200 dark:bg-gray-700 rounded-lg">
63
+ <span class="hamburger-line"></span><span class="hamburger-line"></span><span class="hamburger-line"></span>
 
 
64
  </button>
65
  </div>
66
  </div>
 
67
  <div id="mobileMenu" class="hidden md:hidden py-4 border-t border-gray-200 dark:border-gray-700 mt-3">
68
  <div class="flex flex-col space-y-3">
69
  <a href="index.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Home</a>
70
  <a href="value-mapper.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Mapper</a>
71
+ <a href="scorecard.html" class="nav-link active py-2 px-1 text-gray-800 dark:text-gray-100">Scorecard</a>
72
+ <a href="academy.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Academy</a>
73
  </div>
74
  </div>
75
  </div>
76
  </header>
77
 
78
  <div id="app" class="relative overflow-hidden flex-1">
79
+ <div id="industry-screen" class="question-screen flex justify-center items-center p-6 bg-gradient-to-br from-purple-600 to-indigo-700 text-white">
80
  <div class="max-w-2xl mx-auto w-full text-center" data-aos="fade-up">
81
+ <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg"><img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/MEDDICC%20Scorecard%20Logo.png" alt="MEDDICC Logo" class="w-18 h-12"></div>
 
 
82
  <h1 class="text-4xl font-bold mb-2 text-white">MEDDICC Scorecard</h1>
83
  <p class="text-purple-200 font-light text-lg">Select the customer's industry and current deal stage</p>
 
84
  <div class="mt-8 mb-6 grid sm:grid-cols-2 gap-4">
85
+ <div class="relative"><select id="industry" class="w-full p-4 bg-white/20 border-2 border-purple-300 rounded-xl text-white focus:ring-2 focus:ring-white focus:outline-none appearance-none"><option value="" disabled selected>Select an Industry</option><option value="FSI">FSI (Financial Services)</option><option value="Healthcare">Healthcare</option><option value="Public Sector & Education">Public Sector & Education</option><option value="Retail and Ecommerce">Retail and Ecommerce</option><option value="Tech (SaaS)">Tech (SaaS)</option><option value="Cyber">Cyber</option><option value="Media and Entertainment">Media and Entertainment</option><option value="Manufacturing">Manufacturing</option><option value="Energy">Energy</option><option value="Logistics">Logistics</option><option value="Transport">Transport</option><option value="Startups">Startups</option></select></div>
86
+ <div class="relative"><select id="sales-stage" class="w-full p-4 bg-white/20 border-2 border-purple-300 rounded-xl text-white focus:ring-2 focus:ring-white focus:outline-none appearance-none"><option value="" disabled selected>Select Sales Stage</option><option value="Early Stage">Early Stage</option><option value="Evaluation / PoC">Evaluation / PoC</option><option value="Closing">Closing</option></select></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
87
  </div>
88
+ <button id="start-btn" disabled class="w-full py-4 bg-white text-purple-700 font-semibold rounded-xl shadow-lg hover:bg-gray-100 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"><span>Start Qualification</span><i data-feather="arrow-right" class="w-5 h-5"></i></button>
 
 
 
 
89
  </div>
90
  </div>
91
+ <div id="question-screens" class="hidden"><div class="fixed top-16 left-0 right-0 z-10 bg-gray-100 dark:bg-gray-900"><div class="h-1.5 bg-gray-200 dark:bg-gray-700"><div id="progress-bar" class="progress-bar bg-purple-600 h-full rounded-r-full"></div></div></div></div>
 
 
 
 
 
 
 
 
92
  <div id="results-screen" class="question-screen p-6 bg-gray-100 dark:bg-gray-900 hidden overflow-y-auto">
93
  <div class="max-w-4xl mx-auto w-full pb-8" data-aos="fade-in">
94
+ <div class="text-center mb-8"><div class="w-24 h-24 bg-white dark:bg-gray-800 border-4 border-purple-500 rounded-full flex items-center justify-center mx-auto mb-4"><span id="score-percentage" class="text-3xl font-bold text-purple-600 dark:text-purple-400">0%</span></div><h2 id="score-message" class="text-xl font-semibold mt-2 text-gray-800 dark:text-gray-200"></h2></div>
95
+ <div class="mb-8"><div class="flex items-center mb-4"><div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"><i data-feather="zap" class="text-white w-4 h-4"></i></div><h3 class="text-xl font-bold text-gray-800 dark:text-white">Executive Summary</h3></div><div id="executive-summary" class="bg-white dark:bg-gray-800 p-5 rounded-xl shadow-md"></div></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
96
  <div class="grid md:grid-cols-2 gap-8">
97
+ <div><div class="flex items-center mb-4"><div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"><i data-feather="info" class="text-white w-4 h-4"></i></div><h3 class="text-xl font-bold text-gray-800 dark:text-white">Industry Insights</h3></div><div id="industry-insights" class="bg-white dark:bg-gray-800 p-5 rounded-xl shadow-md"></div></div>
98
+ <div><div class="flex items-center mb-4"><div class="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center mr-3"><i data-feather="bar-chart-2" class="text-white w-4 h-4"></i></div><h3 class="text-xl font-bold text-gray-800 dark:text-white">Detailed Analysis</h3></div><div id="score-breakdown" class="space-y-4"></div></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  </div>
100
+ <div class="mt-8"><button id="restart-quiz" class="w-full py-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-semibold rounded-xl shadow-lg hover:from-purple-700 hover:to-indigo-700 transition-all transform hover:scale-105 flex items-center justify-center space-x-2"><i data-feather="refresh-cw" class="w-5 h-5"></i><span>Start New Scorecard</span></button></div>
101
  </div>
102
  </div>
103
  </div>
104
 
105
  <script>
106
+ document.addEventListener('DOMContentLoaded', function() {
107
+ AOS.init({ once: true, duration: 600 });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
108
  feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
109
 
110
+ const app = {
111
+ state: { currentQuestion: 0, industry: '', salesStage: '', answers: [], maxScore: 54 },
112
+ screens: { industry: document.getElementById('industry-screen'), questions: document.getElementById('question-screens'), results: document.getElementById('results-screen') },
113
+ inputs: { industry: document.getElementById('industry'), salesStage: document.getElementById('sales-stage'), startBtn: document.getElementById('start-btn') },
114
+ ui: { progressBar: document.getElementById('progress-bar'), scorePercentage: document.getElementById('score-percentage'), scoreMessage: document.getElementById('score-message'), industryInsights: document.getElementById('industry-insights'), scoreBreakdown: document.getElementById('score-breakdown'), executiveSummary: document.getElementById('executive-summary') },
115
+ buttons: { restart: document.getElementById('restart-quiz') }
116
+ };
117
+
118
+ const questions = [
119
+ { section: 'PAIN & METRICS', subheading: 'Section 1: The Opportunity', question: 'What is the quantifiable business pain?', answers: [ { text: 'EB agrees on a top-priority pain with a quantified business case (QBC)', score: 9 }, { text: 'Champion agrees on the pain and we are building the business case', score: 6 }, { text: 'Pain is defined but lacks clear metrics and EB involvement', score: 3 }, { text: 'Pain is vague and no metrics have been discussed', score: 0 } ] },
120
+ { section: 'CHAMPION & EB', subheading: 'Section 1: The Opportunity', question: 'How strong is our relationship with the key personas?', answers: [ { text: 'Our Champion is selling on our behalf and we have EB engagement', score: 9 }, { text: 'We have a tested Champion who is providing access to power', score: 6 }, { text: 'We have a potential Champion but they are not yet tested', score: 3 }, { text: 'No Champion or Economic Buyer identified', score: 0 } ] },
121
+ { section: 'DECISION PROCESS & CRITERIA', subheading: 'Section 2: The Decision', question: 'How will the decision be made and what are the requirements?', answers: [ { text: 'We influenced the criteria and the process is confirmed with the EB', score: 9 }, { text: 'We know the process and criteria and believe we are aligned', score: 6 }, { text: 'The decision process or criteria are partially understood', score: 3 }, { text: 'The process and criteria are a black box', score: 0 } ] },
122
+ { section: 'COMPETITION & BLOCKERS', subheading: 'Section 2: The Decision', question: 'What internal and external forces can stop this deal?', answers: [ { text: 'We are seen as the preferred vendor and all blockers have a mitigation plan', score: 9 }, { text: 'Competition is known, traps are set, and some blockers are identified', score: 6 }, { text: 'We know of competitors but have not identified potential blockers', score: 3 }, { text: 'Competitive landscape and internal blockers are unknown', score: 0 } ] },
123
+ { section: 'PAPER PROCESS', subheading: 'Section 3: The Logistics', question: 'How aligned are we on the procurement and legal process?', answers: [ { text: 'Pricing, contract, and security review process are fully confirmed', score: 9 }, { text: 'We have had initial discussions on budget and the paper process', score: 6 }, { text: 'A budget is confirmed but the paper process has not been discussed', score: 3 }, { text: 'Budget and procurement process are unknown', score: 0 } ] },
124
+ { section: 'IMPLEMENTATION PLAN', subheading: 'Section 3: The Logistics', question: 'Is there a clear, agreed-upon plan for success after signing?', answers: [ { text: 'All stakeholders have agreed to a formal, joint implementation plan', score: 9 }, { text: 'We have shared a draft implementation plan with our Champion', score: 6 }, { text: 'Implementation has been discussed but no formal plan exists', score: 3 }, { text: 'The post-sale process has not been discussed', score: 0 } ] }
125
+ ];
126
+
127
+ const skillMapping = {
128
+ 'PAIN & METRICS': '#phase-1', 'CHAMPION & EB': '#phase-1',
129
+ 'DECISION PROCESS & CRITERIA': '#phase-2',
130
+ 'COMPETITION & BLOCKERS': '#phase-3', 'PAPER PROCESS': '#phase-3', 'IMPLEMENTATION PLAN': '#phase-3'
131
+ };
132
+ const scoreMessages = { 'Closing': { 14: "Low Probability...", 39: "Medium Probability...", 60: "High Probability...", 101: "Commit. Be cautious..." }, 'Early Stage': { 14: "Low Potential...", 39: "Medium Potential...", 60: "High Potential...", 101: "Very High Potential..." }, 'Evaluation / PoC': { 14: "Low Confidence...", 39: "Medium Confidence...", 60: "High Confidence...", 101: "Very High Confidence..." } };
133
+ const industryInsights = { 'FSI': 'FSI buyers prioritize compliance...', 'Healthcare': 'Healthcare focuses on HIPAA...', /* etc. */ };
134
+ const summarySnippets = { 'PAIN & METRICS': 'Solidify the business case...', 'CHAMPION & EB': 'Test your Champion...', /* etc. */ };
135
+ const industrySpecificAdvice = { 'FSI': { 'PAIN & METRICS': 'Frame pain around compliance...', 'PAPER PROCESS': 'The legal review is rigorous...' }, 'Healthcare': { 'PAIN & METRICS': 'Pain is tied to HIPAA...', 'DECISION PROCESS & CRITERIA': 'Criteria weighs heavily on security...' }, 'Tech (SaaS)': { 'COMPETITION & BLOCKERS': 'The SaaS market is crowded...', 'IMPLEMENTATION PLAN': 'Offer a "quick start" plan...' } };
136
+
137
+ function checkSelections() { app.inputs.startBtn.disabled = !(app.state.industry && app.state.salesStage); }
138
+ app.inputs.industry.addEventListener('change', (e) => { app.state.industry = e.target.value; checkSelections(); });
139
+ app.inputs.salesStage.addEventListener('change', (e) => { app.state.salesStage = e.target.value; checkSelections(); });
140
+ app.inputs.startBtn.addEventListener('click', () => { app.screens.industry.classList.add('hidden'); app.screens.questions.classList.remove('hidden'); renderQuestion(app.state.currentQuestion); });
141
+ app.buttons.restart.addEventListener('click', resetQuiz);
142
+
143
+ function resetQuiz() {
144
+ Object.assign(app.state, { currentQuestion: 0, industry: '', salesStage: '', answers: [] });
145
+ app.inputs.industry.value = ""; app.inputs.salesStage.value = ""; app.inputs.startBtn.disabled = true;
146
+ app.screens.results.classList.add('hidden');
147
+ app.screens.industry.classList.remove('hidden'); AOS.refresh();
148
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
149
 
150
+ function renderQuestion(index) {
151
+ if (index >= questions.length) { return showResults(); }
152
+ const question = questions[index];
153
+ app.ui.progressBar.style.width = `${(index / questions.length) * 100}%`;
154
+ const screen = document.createElement('div');
155
+ screen.className = `question-screen flex flex-col justify-center p-6 bg-gray-100 dark:bg-gray-900 fade-in`;
156
+ screen.innerHTML = `<div class="max-w-2xl mx-auto w-full"><div class="mb-4 text-center"><p class="text-xs font-bold tracking-wider uppercase text-purple-400 mb-2">${question.subheading}</p><span class="text-sm font-medium text-gray-500 dark:text-gray-400">${question.section}</span><h2 class="text-2xl font-bold mt-1 mb-2">${question.question}</h2></div><div class="mb-6"><div class="relative"><select id="answer-select" class="w-full p-3 bg-white dark:bg-gray-800 border dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500"><option value="" disabled selected>Select an answer</option>${question.answers.map(a => `<option value="${a.score}">${a.text}</option>`).join('')}</select></div></div><div class="flex items-center gap-4"><button id="back-btn" class="w-1/3 py-3 bg-gray-300 dark:bg-gray-700 rounded-lg font-semibold shadow-md">Back</button><button id="next-btn" disabled class="w-2/3 py-3 bg-purple-600 text-white rounded-lg font-semibold shadow-md disabled:opacity-50">${index === questions.length - 1 ? 'Finish' : 'Next'}</button></div></div>`;
157
+ app.screens.questions.innerHTML = ''; app.screens.questions.appendChild(screen); feather.replace();
158
+ const select = document.getElementById('answer-select'), next = document.getElementById('next-btn'), back = document.getElementById('back-btn');
159
+ select.addEventListener('change', () => next.disabled = !select.value);
160
+ next.addEventListener('click', () => { app.state.answers.push({ section: question.section, answer: select.options[select.selectedIndex].text, score: parseInt(select.value) }); app.state.currentQuestion++; renderQuestion(app.state.currentQuestion); });
161
+ back.addEventListener('click', () => { if (index > 0) { app.state.currentQuestion--; app.state.answers.pop(); renderQuestion(app.state.currentQuestion); } else { resetQuiz(); } });
162
  }
163
 
164
+ function showResults() {
165
+ app.screens.questions.classList.add('hidden'); app.screens.results.classList.remove('hidden'); AOS.refresh();
166
+ const totalScore = app.state.answers.reduce((sum, ans) => sum + ans.score, 0);
167
+ const percentage = Math.max(0, Math.round((totalScore / app.state.maxScore) * 100));
168
+ app.ui.scorePercentage.textContent = `${percentage}%`;
169
+ const stageMessages = scoreMessages[app.state.salesStage] || scoreMessages['Early Stage'];
170
+ let msg = '';
171
+ if (percentage <= 14) msg = stageMessages[14]; else if (percentage <= 39) msg = stageMessages[39]; else if (percentage <= 60) msg = stageMessages[60]; else msg = stageMessages[101];
172
+ app.ui.scoreMessage.innerHTML = `<span class="block">${msg}</span>`;
173
+ app.ui.industryInsights.innerHTML = `<p>${industryInsights[app.state.industry]}</p>`;
174
+ app.ui.scoreBreakdown.innerHTML = '';
175
+
176
+ app.state.answers.forEach(answer => {
177
+ const scoreRatio = answer.score / 9;
178
+ let scoreColor = 'text-red-500', recommendationHTML = '';
179
+ if (scoreRatio >= 0.7) scoreColor = 'text-green-500'; else if (scoreRatio >= 0.4) scoreColor = 'text-yellow-500';
180
+ if (answer.score < 5) {
181
+ let advice = industrySpecificAdvice[app.state.industry]?.[answer.section] || summarySnippets[answer.section] || 'Focus on improving this area.';
182
+ const link = `academy.html${skillMapping[answer.section]}`;
183
+ recommendationHTML = `<div class="mt-3 pt-3 border-t dark:border-gray-700 bg-red-50 dark:bg-red-900/20 p-3 rounded-b-lg -m-4 mt-4"><p class="text-sm font-medium text-red-800 dark:text-red-200"><strong>Recommendation:</strong> ${advice} <a href="${link}" target="_blank" class="font-bold underline hover:text-red-600">Learn More...</a></p></div>`;
184
+ }
185
+ app.ui.scoreBreakdown.insertAdjacentHTML('beforeend', `<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm"><div class="flex justify-between items-start mb-2"><h4 class="font-medium">${answer.section}</h4><span class="font-bold ${scoreColor}">${answer.score}/9</span></div><p class="text-sm text-gray-600 dark:text-gray-400">${answer.answer}</p>${recommendationHTML}</div>`);
186
+ });
187
+ generateExecutiveSummary(app.state.answers, percentage, app.state.salesStage);
188
+ feather.replace();
189
+ }
190
 
191
+ function generateExecutiveSummary(answers, overallScore, salesStage) {
192
+ let weaknesses = [], summaryHTML = '<ul class="space-y-3 text-gray-700 dark:text-gray-300">';
193
+ const metricsMotive = answers.find(a => a.section === 'PAIN & METRICS');
194
+ const sorted = [...answers].sort((a, b) => a.score - b.score);
195
+ if (metricsMotive && metricsMotive.score < 5) { weaknesses.push(metricsMotive); const next = sorted.find(a => a.section !== 'PAIN & METRICS'); if (next) weaknesses.push(next); } else { weaknesses = sorted.slice(0, 2); }
196
+ const strength = sorted[sorted.length - 1];
197
+ if (overallScore >= 60 && strength.score >= 7) { summaryHTML += `<li class="flex items-start"><span class="mr-2 text-green-500">✅</span><span><strong>Strength:</strong> The deal is well-positioned in <strong>${strength.section}</strong>. Continue to leverage this.</span></li>`; }
198
+ weaknesses.forEach(weak => { const link = `academy.html${skillMapping[weak.section]}`; const snippet = summarySnippets[weak.section] || 'This area needs to be addressed.'; summaryHTML += `<li class="flex items-start"><span class="mr-2 text-red-500">🔴</span><span><strong>Urgent Focus: ${weak.section}</strong>. <a href="${link}" target="_blank" class="font-bold underline hover:text-purple-400">${snippet}</a></span></li>`; });
199
+ summaryHTML += '</ul>';
200
+ let strategicMessage = '';
201
+ if (overallScore <= 19) strategicMessage = salesStage === 'Evaluation / PoC' ? "Dangerous if considering an Eval/PoC with this low score." : "Okay if early, but more qualification is required.";
202
+ else if (overallScore <= 39) { if (salesStage === 'Early Stage') strategicMessage = "Good news for an early stage deal. Now attach the offer to a mutually agreed business outcome."; else if (salesStage === 'Evaluation / PoC') strategicMessage = "Be cautious. The business case for this PoC is not strong enough. Why now? Why us?"; else strategicMessage = "Be worried. A deal this weak should not be in the closing stage."; }
203
+ else if (overallScore <= 59) { if (salesStage === 'Early Stage') strategicMessage = "Very good news for an early stage deal. A solid foundation to build upon."; else if (salesStage === 'Evaluation / PoC') strategicMessage = "This looks good. Now, what are the blockers? Confirm timeline and budget."; else strategicMessage = "Look for blockers. Can the champion access the Economic Buyer? Is this a champion or a coach?"; }
204
+ else if (overallScore <= 79) { strategicMessage = salesStage === 'Evaluation / PoC' ? "Very strong for a PoC. Start preparing success metrics and crafting the proposal." : "Focus on differentiation and beware of the buyer ghosting as you move to close."; }
205
+ else { strategicMessage = "The finish line is in sight, but it's not over until it's signed. Verbally discuss pricing/contracts with champions/buyers and expect negotiations."; }
206
+ summaryHTML += `<div class="mt-4 pt-4 border-t dark:border-gray-700"><p class="text-base font-medium text-purple-700 dark:text-purple-400">${strategicMessage}</p></div>`;
207
+ app.ui.executiveSummary.innerHTML = summaryHTML;
208
  }
 
 
 
 
209
 
210
+ const themeToggle = document.getElementById('themeToggle');
211
+ const html = document.documentElement;
212
+ themeToggle.addEventListener('click', () => { html.classList.toggle('dark'); localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light'; feather.replace(); });
213
+ if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { html.classList.add('dark'); }
214
+ document.getElementById('mobileMenuButton').addEventListener('click', () => { document.getElementById('mobileMenu').classList.toggle('hidden'); document.getElementById('mobileMenuButton').classList.toggle('open'); });
215
+ });
216
  </script>
217
 
218
  </body>