Spaces:
Running
Running
Promote version c609e2b to main
Browse filesPromoted commit c609e2b61ee65dd4bae6d94fa562c359e0a08228 to main branch
- academy.html +309 -18
- scorecard.html +2 -1
academy.html
CHANGED
|
@@ -3,30 +3,321 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>
|
| 7 |
-
<link rel="
|
| 8 |
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 9 |
</head>
|
| 10 |
-
<body class="bg-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
<
|
| 17 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 18 |
</div>
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 23 |
</div>
|
| 24 |
-
<
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 28 |
</div>
|
|
|
|
| 29 |
</div>
|
| 30 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 31 |
</body>
|
| 32 |
</html>
|
|
|
|
| 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://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
| 10 |
+
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 12 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 13 |
+
<script>
|
| 14 |
+
tailwind.config = {
|
| 15 |
+
darkMode: 'class',
|
| 16 |
+
theme: {
|
| 17 |
+
extend: {
|
| 18 |
+
colors: {
|
| 19 |
+
primary: '#6366f1',
|
| 20 |
+
secondary: '#8b5cf6',
|
| 21 |
+
dark: '#1e293b'
|
| 22 |
+
}
|
| 23 |
+
}
|
| 24 |
+
}
|
| 25 |
+
}
|
| 26 |
+
</script>
|
| 27 |
+
<style>
|
| 28 |
+
/* --- UNIFIED HEADER STYLES --- */
|
| 29 |
+
.nav-link.active {
|
| 30 |
+
@apply text-primary font-medium border-b-2 border-primary;
|
| 31 |
+
}
|
| 32 |
+
.hamburger-line {
|
| 33 |
+
@apply w-6 h-0.5 bg-white transition-all duration-300;
|
| 34 |
+
}
|
| 35 |
+
#mobileMenuButton.open .hamburger-line:nth-child(1) {
|
| 36 |
+
transform: rotate(45deg) translate(5px, 6px);
|
| 37 |
+
}
|
| 38 |
+
#mobileMenuButton.open .hamburger-line:nth-child(2) {
|
| 39 |
+
opacity: 0;
|
| 40 |
+
}
|
| 41 |
+
#mobileMenuButton.open .hamburger-line:nth-child(3) {
|
| 42 |
+
transform: rotate(-45deg) translate(5px, -6px);
|
| 43 |
+
}
|
| 44 |
+
|
| 45 |
+
/* --- PAGE-SPECIFIC STYLES --- */
|
| 46 |
+
.question-screen { transition: all 0.3s ease; }
|
| 47 |
+
.fade-in { animation: fadeIn 0.5s; }
|
| 48 |
+
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
| 49 |
+
.progress-bar { height: 6px; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
|
| 50 |
+
select {
|
| 51 |
+
-webkit-appearance: none; -moz-appearance: none; appearance: none;
|
| 52 |
+
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");
|
| 53 |
+
background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25rem;
|
| 54 |
+
}
|
| 55 |
+
.dark select {
|
| 56 |
+
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");
|
| 57 |
+
}
|
| 58 |
+
</style>
|
| 59 |
</head>
|
| 60 |
+
<body class="min-h-screen flex flex-col relative bg-gradient-to-br from-purple-600 to-indigo-700">
|
| 61 |
+
|
| 62 |
+
<header class="sticky top-0 z-50 bg-purple-800/80 backdrop-blur-md shadow-sm">
|
| 63 |
+
<div class="container mx-auto px-4 py-3">
|
| 64 |
+
<div class="flex justify-between items-center">
|
| 65 |
+
<a href="index.html" class="flex items-center space-x-2">
|
| 66 |
+
<img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/Scaleway-Logomark-White.png" alt="Logo" class="h-8 mr-2">
|
| 67 |
+
<span class="text-xl font-bold text-white font-heading">McGPT</span>
|
| 68 |
+
</a>
|
| 69 |
+
<nav class="hidden md:flex space-x-8">
|
| 70 |
+
<a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
|
| 71 |
+
<a href="scorecard.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Scorecard</a>
|
| 72 |
+
<a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Method</a>
|
| 73 |
+
<a href="academy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Academy</a>
|
| 74 |
+
<a href="intel.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Products</a>
|
| 75 |
+
</nav>
|
| 76 |
+
<div class="flex items-center space-x-4">
|
| 77 |
+
<button id="themeToggle" class="p-2 rounded-full text-white hover:bg-white/20">
|
| 78 |
+
<i data-feather="moon" class="hidden dark:block"></i>
|
| 79 |
+
<i data-feather="sun" class="block dark:hidden"></i>
|
| 80 |
+
</button>
|
| 81 |
+
<button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2 z-50 bg-[#9B5CEB] rounded-lg">
|
| 82 |
+
<span class="hamburger-line"></span>
|
| 83 |
+
<span class="hamburger-line"></span>
|
| 84 |
+
<span class="hamburger-line"></span>
|
| 85 |
+
</button>
|
| 86 |
</div>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
</header>
|
| 90 |
+
|
| 91 |
+
<div id="mobileMenu" class="hidden fixed inset-0 z-40 bg-purple-900 bg-opacity-95 backdrop-blur-sm">
|
| 92 |
+
<div class="flex flex-col items-center justify-center h-full space-y-8">
|
| 93 |
+
<a href="index.html" class="nav-link text-3xl text-white">Home</a>
|
| 94 |
+
<a href="value-mapper.html" class="nav-link text-3xl text-white">Mapper</a>
|
| 95 |
+
<a href="scorecard.html" class="nav-link text-3xl text-white">Scorecard</a>
|
| 96 |
+
<a href="strategy.html" class="nav-link text-3xl text-white">Method</a>
|
| 97 |
+
<a href="academy.html" class="nav-link text-3xl text-white">Academy</a>
|
| 98 |
+
<a href="intel.html" class="nav-link text-3xl text-white">Products</a>
|
| 99 |
+
</div>
|
| 100 |
+
</div>
|
| 101 |
+
<div id="app" class="relative overflow-hidden flex-1">
|
| 102 |
+
<div id="industry-screen" class="question-screen flex justify-center items-center p-4 text-white">
|
| 103 |
+
<div class="max-w-2xl mx-auto w-full text-center" data-aos="fade-up">
|
| 104 |
+
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-2 shadow-lg"><img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/MEDDICC%20Scorecard%20Logo.png" alt="MEDDICC Logo" class="w-14 h-10"></div>
|
| 105 |
+
<h1 class="text-3xl font-bold mb-2 text-white">MEDDICC Scorecard</h1>
|
| 106 |
+
<p class="text-purple-200 font-light text-lg">Select the customer's industry and current deal stage</p>
|
| 107 |
+
<div class="mt-6 mb-6 grid sm:grid-cols-2 gap-4">
|
| 108 |
+
<div class="relative"><select id="industry" class="w-full p-3 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>
|
| 109 |
+
<div class="relative"><select id="sales-stage" class="w-full p-3 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>
|
| 110 |
</div>
|
| 111 |
+
<button id="start-btn" disabled class="w-full py-3 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>
|
| 112 |
+
</div>
|
| 113 |
+
</div>
|
| 114 |
+
<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>
|
| 115 |
+
<div id="results-screen" class="question-screen py-8 px-4 sm:px-6 bg-gray-100 dark:bg-gray-900 hidden overflow-y-auto">
|
| 116 |
+
<div class="max-w-4xl mx-auto w-full" data-aos="fade-in">
|
| 117 |
+
<div class="text-center mb-6"><div class="w-20 h-20 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>
|
| 118 |
+
<div class="mb-6"><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>
|
| 119 |
+
<div class="grid md:grid-cols-2 gap-6">
|
| 120 |
+
<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>
|
| 121 |
+
<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>
|
| 122 |
</div>
|
| 123 |
+
<div class="mt-6"><button id="restart-quiz" class="w-full py-3 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>
|
| 124 |
</div>
|
| 125 |
</div>
|
| 126 |
+
</div>
|
| 127 |
+
|
| 128 |
+
<script>
|
| 129 |
+
// --- Mobile Menu Toggle ---
|
| 130 |
+
const mobileMenuButton = document.getElementById('mobileMenuButton');
|
| 131 |
+
const mobileMenu = document.getElementById('mobileMenu');
|
| 132 |
+
mobileMenuButton.addEventListener('click', () => {
|
| 133 |
+
mobileMenu.classList.toggle('hidden');
|
| 134 |
+
mobileMenuButton.classList.toggle('open');
|
| 135 |
+
document.body.classList.toggle('overflow-hidden');
|
| 136 |
+
});
|
| 137 |
+
|
| 138 |
+
// --- Theme Toggle ---
|
| 139 |
+
const themeToggle = document.getElementById('themeToggle');
|
| 140 |
+
const html = document.documentElement;
|
| 141 |
+
themeToggle.addEventListener('click', () => {
|
| 142 |
+
html.classList.toggle('dark');
|
| 143 |
+
localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
|
| 144 |
+
});
|
| 145 |
+
// Set initial theme
|
| 146 |
+
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
| 147 |
+
html.classList.add('dark');
|
| 148 |
+
} else {
|
| 149 |
+
html.classList.remove('dark');
|
| 150 |
+
}
|
| 151 |
+
|
| 152 |
+
// --- Set Active Nav Link ---
|
| 153 |
+
const currentPage = window.location.pathname.split('/').pop() || 'index.html';
|
| 154 |
+
document.querySelectorAll('.nav-link').forEach(link => {
|
| 155 |
+
const linkHref = link.getAttribute('href');
|
| 156 |
+
if (linkHref === currentPage) {
|
| 157 |
+
link.classList.add('active');
|
| 158 |
+
} else {
|
| 159 |
+
link.classList.remove('active');
|
| 160 |
+
}
|
| 161 |
+
});
|
| 162 |
+
|
| 163 |
+
// --- Feather Icons ---
|
| 164 |
+
feather.replace();
|
| 165 |
+
</script>
|
| 166 |
+
<script>
|
| 167 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 168 |
+
AOS.init({ once: true, duration: 600 });
|
| 169 |
+
|
| 170 |
+
const app = {
|
| 171 |
+
state: { currentQuestion: 0, industry: '', salesStage: '', answers: [], maxScore: 54 },
|
| 172 |
+
screens: { industry: document.getElementById('industry-screen'), questions: document.getElementById('question-screens'), results: document.getElementById('results-screen') },
|
| 173 |
+
inputs: { industry: document.getElementById('industry'), salesStage: document.getElementById('sales-stage'), startBtn: document.getElementById('start-btn') },
|
| 174 |
+
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') },
|
| 175 |
+
buttons: { restart: document.getElementById('restart-quiz') }
|
| 176 |
+
};
|
| 177 |
+
|
| 178 |
+
const questions = [
|
| 179 |
+
{ 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 } ] },
|
| 180 |
+
{ 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 } ] },
|
| 181 |
+
{ 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 } ] },
|
| 182 |
+
{ 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 } ] },
|
| 183 |
+
{ 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 } ] },
|
| 184 |
+
{ 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 } ] }
|
| 185 |
+
];
|
| 186 |
+
|
| 187 |
+
const skillMapping = {
|
| 188 |
+
'PAIN & METRICS': '#qualify-meddicc',
|
| 189 |
+
'CHAMPION & EB': '#stakeholder-mapping',
|
| 190 |
+
'DECISION PROCESS & CRITERIA': '#qualify-meddicc',
|
| 191 |
+
'COMPETITION & BLOCKERS': '#evaluation-justification',
|
| 192 |
+
'PAPER PROCESS': '#negotiation',
|
| 193 |
+
'IMPLEMENTATION PLAN': '#evaluation-justification'
|
| 194 |
+
};
|
| 195 |
+
const scoreMessages = { 'Closing': { 14: "Low Probability. More qualification of Why Now? and Why Us? required.", 39: "Medium Probability. More qualification 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." }, '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 an evaluation.", 101: "Very High Potential. Excellent qualification. Prepare to move to a formal evaluation or PoC." }, '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." } };
|
| 196 |
+
|
| 197 |
+
const industryInsights = {
|
| 198 |
+
'FSI': "For <strong>Financial Services</strong>, compliance and data sovereignty are non-negotiable. This aligns perfectly with Scaleway's core value as a European cloud provider. Position our <strong>SecNumCloud-ready</strong> options and <strong>Private Cloud</strong> to address their stringent needs for data isolation and regulatory adherence (PCI DSS, DORA).",
|
| 199 |
+
'Healthcare': "<strong>Healthcare & Biotech</strong> deals with massive, sensitive datasets. Highlight Scaleway's value in providing cost-effective <strong>GPU Instances</strong> for AI-driven research and HDS-compliant <strong>Object Storage</strong> for medical imaging and genomic data, all within a sovereign European cloud.",
|
| 200 |
+
'Public Sector & Education': "The <strong>Public Sector & Education</strong> market is often budget-conscious while requiring high security. Emphasize Scaleway's value in data sovereignty and our cost-effective, powerful <strong>GPU Instances</strong> for research, positioning us as the ideal European alternative to US hyperscalers.",
|
| 201 |
+
'Retail and Ecommerce': "<strong>Retail & E-commerce</strong> thrives on scalability and performance. Position Scaleway's value around managed services like <strong>Kubernetes Kapsule</strong> and <strong>Load Balancers</strong> that handle traffic spikes effortlessly, combined with transparent pricing that avoids surprise costs during peak seasons.",
|
| 202 |
+
'Tech (SaaS)': "For <strong>Tech & SaaS</strong> companies, developer productivity and cost-efficiency are paramount. Lead with Scaleway's developer-centric tools and our full open-source stack. Highlight <strong>Managed Kubernetes (Kapsule)</strong> and our transparent billing as key differentiators that help them scale without vendor lock-in.",
|
| 203 |
+
'Cyber': "<strong>Cybersecurity</strong> firms need raw power and isolated environments for research. This is a perfect fit for Scaleway's <strong>Bare Metal</strong> servers combined with <strong>VPC</strong>. Emphasize how our sovereign infrastructure provides a secure foundation for them to build and test their security tools.",
|
| 204 |
+
'Media and Entertainment': "The <strong>Media & Entertainment</strong> industry struggles with massive files and high rendering costs. Showcase Scaleway's value with our highly cost-effective <strong>Object Storage</strong> and powerful <strong>GPU Instances</strong>, which create an efficient pipeline for rendering, transcoding, and content delivery.",
|
| 205 |
+
'Manufacturing': "For <strong>Manufacturing</strong>, the focus is on Industrial IoT and predictive maintenance. Position Scaleway's value with our <strong>Edge Computing</strong> solutions to process data on the factory floor and our <strong>AI Suite</strong> to build predictive models, all while connecting securely via our <strong>Private Network</strong>.",
|
| 206 |
+
'Energy': "The <strong>Energy</strong> sector is leveraging AI for grid optimization and sustainability. Highlight Scaleway's value as a 100% sustainable cloud provider with powerful <strong>AI Inference Servers</strong> and <strong>Managed Databases</strong> to help them analyze data and meet ESG goals.",
|
| 207 |
+
'Logistics': "In <strong>Logistics</strong>, real-time tracking and route optimization are key. Emphasize Scaleway's value in <strong>Edge Computing</strong> for processing data from moving assets and our <strong>AI Suite</strong>, which helps turn that data into measurable cost savings through efficient routing.",
|
| 208 |
+
'Transport': "The <strong>Transport</strong> industry relies on HPC for complex simulations (e.g., vehicle design, traffic modeling). Position Scaleway's value around on-demand, cost-effective <strong>GPU Instances</strong> that accelerate their R&D cycles without the need for large on-premise hardware investments.",
|
| 209 |
+
'Startups': "<strong>Startups</strong> need to move fast and manage cash flow carefully. Lead with Scaleway's value of being developer-centric and cost-effective. Our managed services (<strong>Kapsule</strong>, <strong>Managed Databases</strong>) and transparent pricing help them build for scale without the fear of vendor lock-in or surprise bills."
|
| 210 |
+
};
|
| 211 |
+
|
| 212 |
+
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.' };
|
| 213 |
+
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...' } };
|
| 214 |
+
|
| 215 |
+
function checkSelections() { app.inputs.startBtn.disabled = !(app.state.industry && app.state.salesStage); }
|
| 216 |
+
app.inputs.industry.addEventListener('change', (e) => { app.state.industry = e.target.value; checkSelections(); });
|
| 217 |
+
app.inputs.salesStage.addEventListener('change', (e) => { app.state.salesStage = e.target.value; checkSelections(); });
|
| 218 |
+
app.inputs.startBtn.addEventListener('click', () => { app.screens.industry.classList.add('hidden'); app.screens.questions.classList.remove('hidden'); renderQuestion(app.state.currentQuestion); });
|
| 219 |
+
app.buttons.restart.addEventListener('click', resetQuiz);
|
| 220 |
+
|
| 221 |
+
function resetQuiz() {
|
| 222 |
+
app.state = { currentQuestion: 0, industry: '', salesStage: '', answers: [], maxScore: 54 };
|
| 223 |
+
app.screens.results.classList.add('hidden');
|
| 224 |
+
app.screens.questions.classList.add('hidden');
|
| 225 |
+
app.screens.industry.classList.remove('hidden');
|
| 226 |
+
app.inputs.industry.value = "";
|
| 227 |
+
app.inputs.salesStage.value = "";
|
| 228 |
+
app.inputs.startBtn.disabled = true;
|
| 229 |
+
feather.replace();
|
| 230 |
+
}
|
| 231 |
+
|
| 232 |
+
function renderQuestion(index) {
|
| 233 |
+
if (index >= questions.length) { return showResults(); }
|
| 234 |
+
const question = questions[index];
|
| 235 |
+
app.ui.progressBar.style.width = `${(index / questions.length) * 100}%`;
|
| 236 |
+
const screen = document.createElement('div');
|
| 237 |
+
screen.className = `question-screen flex flex-col justify-center p-6 bg-gradient-to-br from-purple-600 to-indigo-700 text-white fade-in`;
|
| 238 |
+
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-200 mb-2">${question.subheading}</p><span class="text-sm font-medium text-purple-300 dark:text-purple-400">${question.section}</span><h2 class="text-2xl font-bold mt-1 mb-2 text-white">${question.question}</h2></div><div class="mb-6"><div class="relative"><select id="answer-select" class="w-full p-3 bg-white/20 border-2 border-purple-300 rounded-lg focus:ring-2 focus:ring-white text-white focus:outline-none"><option value="" disabled selected>Select an answer</option>${question.answers.map(a => `<option value="${a.score}" class="bg-gray-800 text-white">${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-white/20 text-white rounded-lg font-semibold shadow-md hover:bg-white/30">Back</button><button id="next-btn" disabled class="w-2/3 py-3 bg-white text-purple-700 rounded-lg font-semibold shadow-md disabled:opacity-50">${index === questions.length - 1 ? 'Finish' : 'Next'}</button></div></div>`;
|
| 239 |
+
app.screens.questions.innerHTML = ''; app.screens.questions.appendChild(screen); feather.replace();
|
| 240 |
+
const select = document.getElementById('answer-select'), next = document.getElementById('next-btn'), back = document.getElementById('back-btn');
|
| 241 |
+
select.addEventListener('change', () => next.disabled = !select.value);
|
| 242 |
+
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); });
|
| 243 |
+
back.addEventListener('click', () => { if (index > 0) { app.state.currentQuestion--; app.state.answers.pop(); renderQuestion(app.state.currentQuestion); } else { resetQuiz(); } });
|
| 244 |
+
}
|
| 245 |
+
|
| 246 |
+
function showResults() {
|
| 247 |
+
app.screens.questions.classList.add('hidden');
|
| 248 |
+
app.screens.results.classList.remove('hidden');
|
| 249 |
+
app.screens.results.classList.add('bg-gradient-to-br', 'from-purple-600', 'to-indigo-700', 'text-white');
|
| 250 |
+
app.screens.results.classList.remove('bg-gray-100', 'dark:bg-gray-900', 'text-gray-800', 'dark:text-gray-200');
|
| 251 |
+
|
| 252 |
+
AOS.refresh();
|
| 253 |
+
const totalScore = app.state.answers.reduce((sum, ans) => sum + ans.score, 0);
|
| 254 |
+
const percentage = Math.max(0, Math.round((totalScore / app.state.maxScore) * 100));
|
| 255 |
+
app.ui.scorePercentage.textContent = `${percentage}%`;
|
| 256 |
+
const stageMessages = scoreMessages[app.state.salesStage] || scoreMessages['Early Stage'];
|
| 257 |
+
let msg = '';
|
| 258 |
+
if (percentage <= 14) msg = stageMessages[14]; else if (percentage <= 39) msg = stageMessages[39]; else if (percentage <= 60) msg = stageMessages[60]; else msg = stageMessages[101];
|
| 259 |
+
app.ui.scoreMessage.innerHTML = `<span class="block">${msg}</span>`;
|
| 260 |
+
|
| 261 |
+
app.ui.scoreMessage.classList.remove('text-gray-800', 'dark:text-gray-200');
|
| 262 |
+
app.ui.scoreMessage.classList.add('text-white');
|
| 263 |
+
|
| 264 |
+
app.ui.industryInsights.innerHTML = `<p>${industryInsights[app.state.industry]}</p>`;
|
| 265 |
+
app.ui.industryInsights.classList.remove('bg-white', 'dark:bg-gray-800');
|
| 266 |
+
app.ui.industryInsights.classList.add('bg-white/10', 'text-white', 'backdrop-blur-sm');
|
| 267 |
+
|
| 268 |
+
app.ui.executiveSummary.innerHTML = '';
|
| 269 |
+
app.ui.executiveSummary.classList.remove('bg-white', 'dark:bg-gray-800');
|
| 270 |
+
app.ui.executiveSummary.classList.add('bg-white/10', 'text-white', 'backdrop-blur-sm');
|
| 271 |
+
|
| 272 |
+
app.ui.scoreBreakdown.innerHTML = '';
|
| 273 |
+
|
| 274 |
+
app.state.answers.forEach(answer => {
|
| 275 |
+
let recommendationHTML = '';
|
| 276 |
+
if (answer.score < 5) {
|
| 277 |
+
let advice = industrySpecificAdvice[app.state.industry]?.[answer.section] || summarySnippets[answer.section] || 'Focus on improving this area.';
|
| 278 |
+
const destination = `academy.html`;
|
| 279 |
+
recommendationHTML = `<div class="mt-3 pt-3 border-t border-purple-400 bg-red-800/20 p-3 rounded-b-lg -m-4 mt-4"><p class="text-sm font-medium text-red-200"><strong>Recommendation:</strong> ${advice} <a href="#" data-link="${destination}" class="font-bold underline hover:text-red-100 academy-link">learn more</a></p></div>`;
|
| 280 |
+
}
|
| 281 |
+
const scoreRatio = answer.score / 9;
|
| 282 |
+
let scoreColor = 'text-red-300';
|
| 283 |
+
if (scoreRatio >= 0.7) scoreColor = 'text-green-300'; else if (scoreRatio >= 0.4) scoreColor = 'text-yellow-300';
|
| 284 |
+
|
| 285 |
+
app.ui.scoreBreakdown.insertAdjacentHTML('beforeend', `<div class="bg-white/10 p-4 rounded-lg shadow-sm backdrop-blur-sm"><div class="flex justify-between items-start mb-2"><h4 class="font-medium text-white">${answer.section}</h4><span class="font-bold ${scoreColor}">${answer.score}/9</span></div><p class="text-sm text-purple-200">${answer.answer}</p>${recommendationHTML}</div>`);
|
| 286 |
+
});
|
| 287 |
+
generateExecutiveSummary(app.state.answers, percentage, app.state.salesStage);
|
| 288 |
+
feather.replace();
|
| 289 |
+
}
|
| 290 |
+
|
| 291 |
+
function generateExecutiveSummary(answers, overallScore, salesStage) {
|
| 292 |
+
let weaknesses = [], summaryHTML = '<ul class="space-y-3 text-purple-100">';
|
| 293 |
+
const metricsMotive = answers.find(a => a.section === 'PAIN & METRICS');
|
| 294 |
+
const sorted = [...answers].sort((a, b) => a.score - b.score);
|
| 295 |
+
if (metricsMotive && metricsMotive.score < 5) { weaknesses.push(metricsMotive); const next = sorted.find(a => a.section !== 'PAIN & METRICS'); if (next && weaknesses.length < 2) weaknesses.push(next); } else { weaknesses = sorted.slice(0, 2); }
|
| 296 |
+
const strength = sorted[sorted.length - 1];
|
| 297 |
+
if (overallScore >= 60 && strength.score >= 7) { summaryHTML += `<li class="flex items-start"><span class="mr-2 text-green-300">✅</span><span><strong>Strength:</strong> The deal is well-positioned in <strong>${strength.section}</strong>.</span></li>`; }
|
| 298 |
+
weaknesses.forEach(weak => { const snippet = summarySnippets[weak.section] || 'This area needs to be addressed.'; summaryHTML += `<li class="flex items-start"><span class="mr-2 text-red-300">🔴</span><span><strong>Urgent Focus: ${weak.section}</strong>. ${snippet}</span></li>`; });
|
| 299 |
+
summaryHTML += '</ul>';
|
| 300 |
+
let strategicMessage = '';
|
| 301 |
+
if (overallScore <= 19) { strategicMessage = "Okay if early, but more qualification is required."; }
|
| 302 |
+
else { strategicMessage = "The finish line is in sight... expect negotiations."; }
|
| 303 |
+
summaryHTML += `<div class="mt-4 pt-4 border-t border-purple-400"><p class="text-base font-medium text-purple-200">${strategicMessage}</p></div>`;
|
| 304 |
+
app.ui.executiveSummary.innerHTML = summaryHTML;
|
| 305 |
+
}
|
| 306 |
+
|
| 307 |
+
// Event listener for dynamic links
|
| 308 |
+
document.body.addEventListener('click', function(e) {
|
| 309 |
+
const link = e.target.closest('.academy-link');
|
| 310 |
+
if (link) {
|
| 311 |
+
e.preventDefault();
|
| 312 |
+
const destination = link.getAttribute('data-link');
|
| 313 |
+
if (destination) {
|
| 314 |
+
window.location.href = destination;
|
| 315 |
+
}
|
| 316 |
+
}
|
| 317 |
+
});
|
| 318 |
+
|
| 319 |
+
});
|
| 320 |
+
</script>
|
| 321 |
+
|
| 322 |
</body>
|
| 323 |
</html>
|
scorecard.html
CHANGED
|
@@ -184,6 +184,7 @@
|
|
| 184 |
{ 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 } ] }
|
| 185 |
];
|
| 186 |
|
|
|
|
| 187 |
const skillMapping = {
|
| 188 |
'PAIN & METRICS': '#qualify-meddicc',
|
| 189 |
'CHAMPION & EB': '#stakeholder-mapping',
|
|
@@ -275,7 +276,7 @@
|
|
| 275 |
let recommendationHTML = '';
|
| 276 |
if (answer.score < 5) {
|
| 277 |
let advice = industrySpecificAdvice[app.state.industry]?.[answer.section] || summarySnippets[answer.section] || 'Focus on improving this area.';
|
| 278 |
-
const destination = `academy.html`;
|
| 279 |
recommendationHTML = `<div class="mt-3 pt-3 border-t border-purple-400 bg-red-800/20 p-3 rounded-b-lg -m-4 mt-4"><p class="text-sm font-medium text-red-200"><strong>Recommendation:</strong> ${advice} <a href="#" data-link="${destination}" class="font-bold underline hover:text-red-100 academy-link">learn more</a></p></div>`;
|
| 280 |
}
|
| 281 |
const scoreRatio = answer.score / 9;
|
|
|
|
| 184 |
{ 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 } ] }
|
| 185 |
];
|
| 186 |
|
| 187 |
+
// This mapping creates the links to the correct sections in academy.html
|
| 188 |
const skillMapping = {
|
| 189 |
'PAIN & METRICS': '#qualify-meddicc',
|
| 190 |
'CHAMPION & EB': '#stakeholder-mapping',
|
|
|
|
| 276 |
let recommendationHTML = '';
|
| 277 |
if (answer.score < 5) {
|
| 278 |
let advice = industrySpecificAdvice[app.state.industry]?.[answer.section] || summarySnippets[answer.section] || 'Focus on improving this area.';
|
| 279 |
+
const destination = `academy.html${skillMapping[answer.section]}`;
|
| 280 |
recommendationHTML = `<div class="mt-3 pt-3 border-t border-purple-400 bg-red-800/20 p-3 rounded-b-lg -m-4 mt-4"><p class="text-sm font-medium text-red-200"><strong>Recommendation:</strong> ${advice} <a href="#" data-link="${destination}" class="font-bold underline hover:text-red-100 academy-link">learn more</a></p></div>`;
|
| 281 |
}
|
| 282 |
const scoreRatio = answer.score / 9;
|