Hugging Face's logo

Spaces:
JayStormX8
/
brandpulse
Running

App Files Community
JayStormX8 commited on
Commit
77b2b80
·
verified ·
1 Parent(s): dbc8d02

Create a comprehensive brand audit quiz people can take and get a generate a report, should be gamified using #ff330c as the color scheme. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +901 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Brandpulse
3
- emoji: 🐠
4
- colorFrom: indigo
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: brandpulse
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,901 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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>Brand Audit Quiz</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#ff330c',
15
+ 'primary-light': '#ff5c3a',
16
+ 'primary-dark': '#cc2900',
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ <style>
23
+ /* Custom animations */
24
+ @keyframes pulse {
25
+ 0%, 100% { transform: scale(1); }
26
+ 50% { transform: scale(1.05); }
27
+ }
28
+ .animate-pulse-slow {
29
+ animation: pulse 3s infinite;
30
+ }
31
+
32
+ /* Custom scrollbar */
33
+ ::-webkit-scrollbar {
34
+ width: 8px;
35
+ }
36
+ ::-webkit-scrollbar-track {
37
+ background: #f1f1f1;
38
+ }
39
+ ::-webkit-scrollbar-thumb {
40
+ background: #ff330c;
41
+ border-radius: 4px;
42
+ }
43
+
44
+ /* Progress bar animation */
45
+ @keyframes progress {
46
+ 0% { width: 0%; }
47
+ 100% { width: var(--progress); }
48
+ }
49
+ .progress-animate {
50
+ animation: progress 1s ease-out forwards;
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="bg-gray-50 font-sans">
55
+ <div class="min-h-screen flex flex-col">
56
+ <!-- Header -->
57
+ <header class="bg-white shadow-sm">
58
+ <div class="container mx-auto px-4 py-6 flex justify-between items-center">
59
+ <h1 class="text-3xl font-bold text-primary">
60
+ <i class="fas fa-chart-line mr-2"></i>BrandPulse
61
+ </h1>
62
+ <div class="flex items-center space-x-4">
63
+ <span class="hidden md:inline text-gray-600">Take your brand to the next level</span>
64
+ <button class="bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-full transition-all">
65
+ Sign Up
66
+ </button>
67
+ </div>
68
+ </div>
69
+ </header>
70
+
71
+ <!-- Main Content -->
72
+ <main class="flex-grow container mx-auto px-4 py-8">
73
+ <div id="quiz-container" class="max-w-4xl mx-auto">
74
+ <!-- Welcome Screen -->
75
+ <div id="welcome-screen" class="bg-white rounded-xl shadow-lg p-8 text-center">
76
+ <div class="w-24 h-24 bg-primary rounded-full flex items-center justify-center mx-auto mb-6 animate-pulse-slow">
77
+ <i class="fas fa-award text-white text-4xl"></i>
78
+ </div>
79
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Brand Health Check</h2>
80
+ <p class="text-gray-600 mb-8 max-w-lg mx-auto">
81
+ Take our 10-minute brand audit to discover your brand's strengths, weaknesses, and opportunities for growth. Get a personalized report with actionable insights.
82
+ </p>
83
+ <div class="mb-8">
84
+ <div class="flex justify-center space-x-2 mb-2">
85
+ <div class="w-3 h-3 rounded-full bg-primary"></div>
86
+ <div class="w-3 h-3 rounded-full bg-gray-300"></div>
87
+ <div class="w-3 h-3 rounded-full bg-gray-300"></div>
88
+ <div class="w-3 h-3 rounded-full bg-gray-300"></div>
89
+ <div class="w-3 h-3 rounded-full bg-gray-300"></div>
90
+ </div>
91
+ <span class="text-sm text-gray-500">Question 1 of 20</span>
92
+ </div>
93
+ <button onclick="startQuiz()" class="bg-primary hover:bg-primary-dark text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105 shadow-lg">
94
+ Start Audit <i class="fas fa-arrow-right ml-2"></i>
95
+ </button>
96
+ </div>
97
+
98
+ <!-- Quiz Questions (hidden initially) -->
99
+ <div id="quiz-questions" class="hidden bg-white rounded-xl shadow-lg overflow-hidden">
100
+ <!-- Progress Bar -->
101
+ <div class="h-2 bg-gray-200">
102
+ <div id="progress-bar" class="h-full bg-primary" style="width: 0%;"></div>
103
+ </div>
104
+
105
+ <!-- Question Container -->
106
+ <div class="p-8">
107
+ <div id="question-container" class="mb-8">
108
+ <!-- Questions will be inserted here by JavaScript -->
109
+ </div>
110
+
111
+ <!-- Navigation -->
112
+ <div class="flex justify-between items-center">
113
+ <button id="prev-btn" onclick="prevQuestion()" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-6 rounded-full transition-all disabled:opacity-50 disabled:cursor-not-allowed" disabled>
114
+ <i class="fas fa-arrow-left mr-2"></i> Back
115
+ </button>
116
+ <span id="question-counter" class="text-gray-500 text-sm">Question 1 of 20</span>
117
+ <button id="next-btn" onclick="nextQuestion()" class="bg-primary hover:bg-primary-dark text-white font-medium py-2 px-6 rounded-full transition-all">
118
+ Next <i class="fas fa-arrow-right ml-2"></i>
119
+ </button>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Results Screen (hidden initially) -->
125
+ <div id="results-screen" class="hidden bg-white rounded-xl shadow-lg overflow-hidden">
126
+ <div class="p-8 text-center">
127
+ <div class="w-32 h-32 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
128
+ <i class="fas fa-trophy text-white text-5xl"></i>
129
+ </div>
130
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Audit Complete!</h2>
131
+ <p class="text-gray-600 mb-8 max-w-lg mx-auto">
132
+ Your brand audit results are ready. Get your personalized report with actionable insights to strengthen your brand.
133
+ </p>
134
+
135
+ <!-- Score Display -->
136
+ <div class="bg-gray-100 rounded-lg p-6 mb-8 max-w-md mx-auto">
137
+ <div class="flex justify-between items-center mb-2">
138
+ <span class="font-medium text-gray-700">Your Brand Score</span>
139
+ <span id="total-score" class="text-2xl font-bold text-primary">0</span>
140
+ </div>
141
+ <div class="w-full bg-gray-300 rounded-full h-4">
142
+ <div id="score-bar" class="bg-primary h-4 rounded-full" style="width: 0%"></div>
143
+ </div>
144
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
145
+ <span>Needs Work</span>
146
+ <span>Strong</span>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Category Scores -->
151
+ <div id="category-scores" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8 max-w-2xl mx-auto">
152
+ <!-- Category scores will be inserted here by JavaScript -->
153
+ </div>
154
+
155
+ <!-- CTA Buttons -->
156
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
157
+ <button onclick="showDetailedReport()" class="bg-primary hover:bg-primary-dark text-white font-bold py-3 px-6 rounded-full transition-all flex-1 sm:flex-none">
158
+ <i class="fas fa-file-alt mr-2"></i> View Full Report
159
+ </button>
160
+ <button class="bg-white border border-primary text-primary hover:bg-gray-50 font-bold py-3 px-6 rounded-full transition-all flex-1 sm:flex-none">
161
+ <i class="fas fa-download mr-2"></i> Download PDF
162
+ </button>
163
+ <button class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 font-bold py-3 px-6 rounded-full transition-all flex-1 sm:flex-none">
164
+ <i class="fas fa-share-alt mr-2"></i> Share Results
165
+ </button>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Detailed Report (hidden initially) -->
171
+ <div id="detailed-report" class="hidden bg-white rounded-xl shadow-lg overflow-hidden">
172
+ <div class="p-8">
173
+ <button onclick="hideDetailedReport()" class="mb-6 text-primary hover:text-primary-dark font-medium flex items-center">
174
+ <i class="fas fa-arrow-left mr-2"></i> Back to Summary
175
+ </button>
176
+
177
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Your Brand Audit Report</h2>
178
+
179
+ <!-- Report Sections -->
180
+ <div id="report-sections" class="space-y-8">
181
+ <!-- Report sections will be inserted here by JavaScript -->
182
+ </div>
183
+
184
+ <!-- Final CTA -->
185
+ <div class="mt-12 text-center">
186
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Ready to strengthen your brand?</h3>
187
+ <p class="text-gray-600 mb-6 max-w-2xl mx-auto">
188
+ Our brand experts can help you implement these recommendations and take your brand to the next level.
189
+ </p>
190
+ <button class="bg-primary hover:bg-primary-dark text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105 shadow-lg">
191
+ Schedule Free Consultation
192
+ </button>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </main>
198
+
199
+ <!-- Footer -->
200
+ <footer class="bg-gray-800 text-white py-8">
201
+ <div class="container mx-auto px-4">
202
+ <div class="flex flex-col md:flex-row justify-between items-center">
203
+ <div class="mb-4 md:mb-0">
204
+ <h3 class="text-xl font-bold text-primary mb-2">BrandPulse</h3>
205
+ <p class="text-gray-400">Helping brands thrive in a competitive world</p>
206
+ </div>
207
+ <div class="flex space-x-6">
208
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
209
+ <i class="fab fa-twitter text-xl"></i>
210
+ </a>
211
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
212
+ <i class="fab fa-linkedin text-xl"></i>
213
+ </a>
214
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
215
+ <i class="fab fa-instagram text-xl"></i>
216
+ </a>
217
+ </div>
218
+ </div>
219
+ <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
220
+ <p>© 2023 BrandPulse. All rights reserved.</p>
221
+ </div>
222
+ </div>
223
+ </footer>
224
+ </div>
225
+
226
+ <script>
227
+ // Quiz Data
228
+ const quizData = {
229
+ categories: [
230
+ { id: 'brand-identity', name: 'Brand Identity', weight: 20 },
231
+ { id: 'target-audience', name: 'Target Audience', weight: 15 },
232
+ { id: 'messaging', name: 'Messaging', weight: 20 },
233
+ { id: 'visual-identity', name: 'Visual Identity', weight: 15 },
234
+ { id: 'online-presence', name: 'Online Presence', weight: 15 },
235
+ { id: 'customer-experience', name: 'Customer Experience', weight: 15 }
236
+ ],
237
+ questions: [
238
+ // Brand Identity (4 questions)
239
+ {
240
+ id: 1,
241
+ category: 'brand-identity',
242
+ text: 'How clearly defined is your brand purpose (why your brand exists beyond making money)?',
243
+ options: [
244
+ { text: 'Not defined at all', value: 1 },
245
+ { text: 'Somewhat defined but not documented', value: 3 },
246
+ { text: 'Clearly defined but not consistently communicated', value: 5 },
247
+ { text: 'Clearly defined and communicated to all stakeholders', value: 7 },
248
+ { text: 'Deeply embedded in all brand activities and decision-making', value: 10 }
249
+ ]
250
+ },
251
+ {
252
+ id: 2,
253
+ category: 'brand-identity',
254
+ text: 'How differentiated is your brand from competitors?',
255
+ options: [
256
+ { text: 'Not differentiated - we compete mainly on price', value: 1 },
257
+ { text: 'Somewhat differentiated but not clearly communicated', value: 3 },
258
+ { text: 'Differentiated in some aspects but not consistently', value: 5 },
259
+ { text: 'Clearly differentiated with unique value proposition', value: 7 },
260
+ { text: 'Strongly differentiated with compelling competitive advantage', value: 10 }
261
+ ]
262
+ },
263
+ {
264
+ id: 3,
265
+ category: 'brand-identity',
266
+ text: 'How consistent is your brand across all touchpoints?',
267
+ options: [
268
+ { text: 'Inconsistent - customers get different experiences', value: 1 },
269
+ { text: 'Somewhat consistent but with noticeable variations', value: 3 },
270
+ { text: 'Generally consistent but could be improved', value: 5 },
271
+ { text: 'Consistent across most touchpoints', value: 7 },
272
+ { text: 'Highly consistent across all touchpoints', value: 10 }
273
+ ]
274
+ },
275
+ {
276
+ id: 4,
277
+ category: 'brand-identity',
278
+ text: 'How strong is your brand recall among customers?',
279
+ options: [
280
+ { text: 'Very weak - most customers wouldn\'t remember us', value: 1 },
281
+ { text: 'Weak - only some customers remember us', value: 3 },
282
+ { text: 'Moderate - about half of customers remember us', value: 5 },
283
+ { text: 'Strong - most customers remember us', value: 7 },
284
+ { text: 'Very strong - customers immediately recognize our brand', value: 10 }
285
+ ]
286
+ },
287
+
288
+ // Target Audience (3 questions)
289
+ {
290
+ id: 5,
291
+ category: 'target-audience',
292
+ text: 'How well do you understand your target audience?',
293
+ options: [
294
+ { text: 'Not well - we make assumptions', value: 1 },
295
+ { text: 'Somewhat - we have basic demographics', value: 3 },
296
+ { text: 'Moderately - we have some psychographics', value: 5 },
297
+ { text: 'Well - we have detailed personas', value: 7 },
298
+ { text: 'Extremely well - we continuously research and update', value: 10 }
299
+ ]
300
+ },
301
+ {
302
+ id: 6,
303
+ category: 'target-audience',
304
+ text: 'How effectively does your brand resonate with your target audience?',
305
+ options: [
306
+ { text: 'Not at all - we struggle to connect', value: 1 },
307
+ { text: 'Somewhat - we connect on some levels', value: 3 },
308
+ { text: 'Moderately - we have decent engagement', value: 5 },
309
+ { text: 'Well - we have strong engagement metrics', value: 7 },
310
+ { text: 'Extremely well - we have passionate brand advocates', value: 10 }
311
+ ]
312
+ },
313
+ {
314
+ id: 7,
315
+ category: 'target-audience',
316
+ text: 'How well does your brand messaging address your audience\'s pain points?',
317
+ options: [
318
+ { text: 'Not at all - we talk about features, not benefits', value: 1 },
319
+ { text: 'Somewhat - we mention some benefits', value: 3 },
320
+ { text: 'Moderately - we address some pain points', value: 5 },
321
+ { text: 'Well - we clearly solve specific problems', value: 7 },
322
+ { text: 'Extremely well - we deeply understand and solve core needs', value: 10 }
323
+ ]
324
+ },
325
+
326
+ // Messaging (4 questions)
327
+ {
328
+ id: 8,
329
+ category: 'messaging',
330
+ text: 'How clear and compelling is your brand story?',
331
+ options: [
332
+ { text: 'Not clear - we don\'t have a defined story', value: 1 },
333
+ { text: 'Somewhat clear but not compelling', value: 3 },
334
+ { text: 'Clear but could be more engaging', value: 5 },
335
+ { text: 'Clear and moderately compelling', value: 7 },
336
+ { text: 'Extremely clear and emotionally compelling', value: 10 }
337
+ ]
338
+ },
339
+ {
340
+ id: 9,
341
+ category: 'messaging',
342
+ text: 'How consistent is your brand voice across all communications?',
343
+ options: [
344
+ { text: 'Inconsistent - no guidelines exist', value: 1 },
345
+ { text: 'Somewhat consistent but varies by channel', value: 3 },
346
+ { text: 'Moderately consistent with some guidelines', value: 5 },
347
+ { text: 'Consistent with clear guidelines', value: 7 },
348
+ { text: 'Highly consistent with strict adherence to guidelines', value: 10 }
349
+ ]
350
+ },
351
+ {
352
+ id: 10,
353
+ category: 'messaging',
354
+ text: 'How effective is your tagline or brand promise?',
355
+ options: [
356
+ { text: 'We don\'t have one', value: 1 },
357
+ { text: 'Exists but doesn\'t differentiate us', value: 3 },
358
+ { text: 'Somewhat effective but could be stronger', value: 5 },
359
+ { text: 'Effective and memorable', value: 7 },
360
+ { text: 'Extremely effective and instantly recognizable', value: 10 }
361
+ ]
362
+ },
363
+ {
364
+ id: 11,
365
+ category: 'messaging',
366
+ text: 'How well does your messaging differentiate you from competitors?',
367
+ options: [
368
+ { text: 'Not at all - we sound similar to competitors', value: 1 },
369
+ { text: 'Somewhat - we have some unique points', value: 3 },
370
+ { text: 'Moderately - we highlight some differences', value: 5 },
371
+ { text: 'Well - we clearly communicate our uniqueness', value: 7 },
372
+ { text: 'Extremely well - we own a distinct position in the market', value: 10 }
373
+ ]
374
+ },
375
+
376
+ // Visual Identity (3 questions)
377
+ {
378
+ id: 12,
379
+ category: 'visual-identity',
380
+ text: 'How strong and distinctive is your logo?',
381
+ options: [
382
+ { text: 'Weak - needs redesign', value: 1 },
383
+ { text: 'Somewhat distinctive but dated', value: 3 },
384
+ { text: 'Moderate - works but could be stronger', value: 5 },
385
+ { text: 'Strong - represents our brand well', value: 7 },
386
+ { text: 'Exceptional - instantly recognizable and memorable', value: 10 }
387
+ ]
388
+ },
389
+ {
390
+ id: 13,
391
+ category: 'visual-identity',
392
+ text: 'How cohesive is your visual identity system (colors, typography, imagery)?',
393
+ options: [
394
+ { text: 'No system exists', value: 1 },
395
+ { text: 'Some elements defined but not consistently used', value: 3 },
396
+ { text: 'Basic system exists with some inconsistencies', value: 5 },
397
+ { text: 'Cohesive system with minor variations', value: 7 },
398
+ { text: 'Highly cohesive system strictly followed', value: 10 }
399
+ ]
400
+ },
401
+ {
402
+ id: 14,
403
+ category: 'visual-identity',
404
+ text: 'How well does your visual identity reflect your brand personality?',
405
+ options: [
406
+ { text: 'Poorly - visuals don\'t match our personality', value: 1 },
407
+ { text: 'Somewhat - some elements match', value: 3 },
408
+ { text: 'Moderately - generally aligned but could improve', value: 5 },
409
+ { text: 'Well - visuals effectively communicate personality', value: 7 },
410
+ { text: 'Perfectly - visuals instantly convey our personality', value: 10 }
411
+ ]
412
+ },
413
+
414
+ // Online Presence (3 questions)
415
+ {
416
+ id: 15,
417
+ category: 'online-presence',
418
+ text: 'How effective is your website in representing your brand?',
419
+ options: [
420
+ { text: 'Poor - outdated and doesn\'t represent us well', value: 1 },
421
+ { text: 'Somewhat effective but needs improvement', value: 3 },
422
+ { text: 'Moderately effective with some strong elements', value: 5 },
423
+ { text: 'Effective with clear brand representation', value: 7 },
424
+ { text: 'Exceptional - perfectly embodies our brand', value: 10 }
425
+ ]
426
+ },
427
+ {
428
+ id: 16,
429
+ category: 'online-presence',
430
+ text: 'How strong is your brand\'s social media presence?',
431
+ options: [
432
+ { text: 'Weak - minimal or no presence', value: 1 },
433
+ { text: 'Somewhat weak - inconsistent posting', value: 3 },
434
+ { text: 'Moderate - regular posting but limited engagement', value: 5 },
435
+ { text: 'Strong - consistent with good engagement', value: 7 },
436
+ { text: 'Exceptional - high engagement and thought leadership', value: 10 }
437
+ ]
438
+ },
439
+ {
440
+ id: 17,
441
+ category: 'online-presence',
442
+ text: 'How consistent is your brand across digital channels?',
443
+ options: [
444
+ { text: 'Inconsistent - different look/feel across platforms', value: 1 },
445
+ { text: 'Somewhat consistent but with variations', value: 3 },
446
+ { text: 'Moderately consistent with minor differences', value: 5 },
447
+ { text: 'Consistent across most digital channels', value: 7 },
448
+ { text: 'Highly consistent across all digital channels', value: 10 }
449
+ ]
450
+ },
451
+
452
+ // Customer Experience (3 questions)
453
+ {
454
+ id: 18,
455
+ category: 'customer-experience',
456
+ text: 'How consistent is the customer experience with your brand promise?',
457
+ options: [
458
+ { text: 'Inconsistent - experience doesn\'t match promise', value: 1 },
459
+ { text: 'Somewhat consistent but with gaps', value: 3 },
460
+ { text: 'Moderately consistent with some exceptions', value: 5 },
461
+ { text: 'Consistent - experience generally matches promise', value: 7 },
462
+ { text: 'Highly consistent - experience exceeds promise', value: 10 }
463
+ ]
464
+ },
465
+ {
466
+ id: 19,
467
+ category: 'customer-experience',
468
+ text: 'How strong is your brand\'s emotional connection with customers?',
469
+ options: [
470
+ { text: 'Weak - purely transactional relationship', value: 1 },
471
+ { text: 'Somewhat weak - limited emotional connection', value: 3 },
472
+ { text: 'Moderate - some customers feel connected', value: 5 },
473
+ { text: 'Strong - many customers feel connected', value: 7 },
474
+ { text: 'Exceptional - deep emotional loyalty and advocacy', value: 10 }
475
+ ]
476
+ },
477
+ {
478
+ id: 20,
479
+ category: 'customer-experience',
480
+ text: 'How likely are your customers to recommend your brand?',
481
+ options: [
482
+ { text: 'Very unlikely - we have many detractors', value: 1 },
483
+ { text: 'Somewhat unlikely - neutral or mixed feedback', value: 3 },
484
+ { text: 'Moderately likely - some would recommend', value: 5 },
485
+ { text: 'Likely - many would recommend', value: 7 },
486
+ { text: 'Extremely likely - strong word-of-mouth advocacy', value: 10 }
487
+ ]
488
+ }
489
+ ]
490
+ };
491
+
492
+ // Quiz State
493
+ let currentQuestion = 0;
494
+ let answers = {};
495
+ let categoryScores = {};
496
+
497
+ // Initialize category scores
498
+ quizData.categories.forEach(category => {
499
+ categoryScores[category.id] = {
500
+ total: 0,
501
+ max: 0,
502
+ questions: 0
503
+ };
504
+ });
505
+
506
+ // Start the quiz
507
+ function startQuiz() {
508
+ document.getElementById('welcome-screen').classList.add('hidden');
509
+ document.getElementById('quiz-questions').classList.remove('hidden');
510
+ showQuestion();
511
+ }
512
+
513
+ // Display current question
514
+ function showQuestion() {
515
+ const question = quizData.questions[currentQuestion];
516
+ const questionContainer = document.getElementById('question-container');
517
+
518
+ // Update question counter
519
+ document.getElementById('question-counter').textContent = `Question ${currentQuestion + 1} of ${quizData.questions.length}`;
520
+
521
+ // Update progress bar
522
+ const progress = ((currentQuestion + 1) / quizData.questions.length) * 100;
523
+ const progressBar = document.getElementById('progress-bar');
524
+ progressBar.style.width = `${progress}%`;
525
+ progressBar.classList.add('progress-animate');
526
+
527
+ // Remove animation class after it completes
528
+ setTimeout(() => {
529
+ progressBar.classList.remove('progress-animate');
530
+ }, 1000);
531
+
532
+ // Build question HTML
533
+ let html = `
534
+ <div class="mb-6">
535
+ <span class="inline-block bg-primary text-white text-xs font-semibold px-3 py-1 rounded-full mb-2">
536
+ ${quizData.categories.find(c => c.id === question.category).name}
537
+ </span>
538
+ <h3 class="text-xl font-bold text-gray-800 mb-4">${question.text}</h3>
539
+ </div>
540
+ <div class="space-y-3">
541
+ `;
542
+
543
+ // Add options
544
+ question.options.forEach((option, index) => {
545
+ const isChecked = answers[question.id] === option.value ? 'checked' : '';
546
+ html += `
547
+ <label class="flex items-center p-4 border rounded-lg cursor-pointer hover:border-primary transition-colors ${isChecked ? 'border-primary bg-primary bg-opacity-5' : 'border-gray-200'}">
548
+ <input type="radio" name="question-${question.id}" value="${option.value}"
549
+ class="form-radio text-primary border-gray-300 focus:ring-primary"
550
+ ${isChecked}
551
+ onchange="saveAnswer(${question.id}, ${option.value})">
552
+ <span class="ml-3 text-gray-700">${option.text}</span>
553
+ </label>
554
+ `;
555
+ });
556
+
557
+ html += `</div>`;
558
+ questionContainer.innerHTML = html;
559
+
560
+ // Update navigation buttons
561
+ document.getElementById('prev-btn').disabled = currentQuestion === 0;
562
+
563
+ if (currentQuestion === quizData.questions.length - 1) {
564
+ document.getElementById('next-btn').innerHTML = 'Submit <i class="fas fa-check ml-2"></i>';
565
+ } else {
566
+ document.getElementById('next-btn').innerHTML = 'Next <i class="fas fa-arrow-right ml-2"></i>';
567
+ }
568
+ }
569
+
570
+ // Save answer
571
+ function saveAnswer(questionId, value) {
572
+ answers[questionId] = value;
573
+
574
+ // Update category score
575
+ const question = quizData.questions.find(q => q.id === questionId);
576
+ const category = categoryScores[question.category];
577
+ category.total += value;
578
+ category.max += 10; // Max score per question is 10
579
+ category.questions += 1;
580
+ }
581
+
582
+ // Navigate to next question
583
+ function nextQuestion() {
584
+ if (currentQuestion < quizData.questions.length - 1) {
585
+ currentQuestion++;
586
+ showQuestion();
587
+ } else {
588
+ showResults();
589
+ }
590
+ }
591
+
592
+ // Navigate to previous question
593
+ function prevQuestion() {
594
+ if (currentQuestion > 0) {
595
+ currentQuestion--;
596
+ showQuestion();
597
+ }
598
+ }
599
+
600
+ // Calculate and show results
601
+ function showResults() {
602
+ document.getElementById('quiz-questions').classList.add('hidden');
603
+ document.getElementById('results-screen').classList.remove('hidden');
604
+
605
+ // Calculate total score
606
+ let totalScore = 0;
607
+ let maxScore = 0;
608
+
609
+ quizData.categories.forEach(category => {
610
+ const catScore = categoryScores[category.id];
611
+ totalScore += (catScore.total / catScore.max) * category.weight;
612
+ maxScore += category.weight;
613
+ });
614
+
615
+ const percentageScore = Math.round((totalScore / maxScore) * 100);
616
+
617
+ // Animate score display
618
+ let currentDisplay = 0;
619
+ const scoreInterval = setInterval(() => {
620
+ document.getElementById('total-score').textContent = currentDisplay;
621
+ document.getElementById('score-bar').style.width = `${currentDisplay}%`;
622
+
623
+ if (currentDisplay >= percentageScore) {
624
+ clearInterval(scoreInterval);
625
+ } else {
626
+ currentDisplay++;
627
+ }
628
+ }, 20);
629
+
630
+ // Display category scores
631
+ const categoryScoresContainer = document.getElementById('category-scores');
632
+ let categoryHtml = '';
633
+
634
+ quizData.categories.forEach(category => {
635
+ const catScore = categoryScores[category.id];
636
+ const catPercentage = Math.round((catScore.total / catScore.max) * 100);
637
+
638
+ categoryHtml += `
639
+ <div class="bg-gray-50 p-4 rounded-lg">
640
+ <div class="flex justify-between items-center mb-2">
641
+ <span class="font-medium text-gray-700">${category.name}</span>
642
+ <span class="font-bold ${catPercentage >= 70 ? 'text-green-600' : catPercentage >= 40 ? 'text-yellow-600' : 'text-red-600'}">${catPercentage}%</span>
643
+ </div>
644
+ <div class="w-full bg-gray-200 rounded-full h-2">
645
+ <div class="h-2 rounded-full ${catPercentage >= 70 ? 'bg-green-500' : catPercentage >= 40 ? 'bg-yellow-500' : 'bg-red-500'}" style="width: ${catPercentage}%"></div>
646
+ </div>
647
+ </div>
648
+ `;
649
+ });
650
+
651
+ categoryScoresContainer.innerHTML = categoryHtml;
652
+ }
653
+
654
+ // Show detailed report
655
+ function showDetailedReport() {
656
+ document.getElementById('results-screen').classList.add('hidden');
657
+ document.getElementById('detailed-report').classList.remove('hidden');
658
+
659
+ const reportSections = document.getElementById('report-sections');
660
+ let reportHtml = '';
661
+
662
+ // Add summary section
663
+ reportHtml += `
664
+ <div class="bg-gray-50 p-6 rounded-lg">
665
+ <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
666
+ <i class="fas fa-chart-pie text-primary mr-2"></i> Summary
667
+ </h3>
668
+ <p class="text-gray-600 mb-4">
669
+ Based on your responses, here's an overview of your brand's strengths and areas for improvement.
670
+ </p>
671
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
672
+ `;
673
+
674
+ quizData.categories.forEach(category => {
675
+ const catScore = categoryScores[category.id];
676
+ const catPercentage = Math.round((catScore.total / catScore.max) * 100);
677
+
678
+ reportHtml += `
679
+ <div class="bg-white p-4 rounded-lg shadow-sm">
680
+ <div class="flex justify-between items-center mb-2">
681
+ <span class="font-medium">${category.name}</span>
682
+ <span class="font-bold ${catPercentage >= 70 ? 'text-green-600' : catPercentage >= 40 ? 'text-yellow-600' : 'text-red-600'}">${catPercentage}%</span>
683
+ </div>
684
+ <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
685
+ <div class="h-2 rounded-full ${catPercentage >= 70 ? 'bg-green-500' : catPercentage >= 40 ? 'bg-yellow-500' : 'bg-red-500'}" style="width: ${catPercentage}%"></div>
686
+ </div>
687
+ </div>
688
+ `;
689
+ });
690
+
691
+ reportHtml += `
692
+ </div>
693
+ </div>
694
+ `;
695
+
696
+ // Add category sections with recommendations
697
+ quizData.categories.forEach(category => {
698
+ const catScore = categoryScores[category.id];
699
+ const catPercentage = Math.round((catScore.total / catScore.max) * 100);
700
+
701
+ let strengthText = '';
702
+ let improvementText = '';
703
+
704
+ if (catPercentage >= 70) {
705
+ strengthText = `Your ${category.name} is a strong asset for your brand. Keep up the good work and look for opportunities to further differentiate yourself in this area.`;
706
+ improvementText = `While this area is strong, consider conducting customer research to identify any subtle opportunities for enhancement that might not be immediately apparent.`;
707
+ } else if (catPercentage >= 40) {
708
+ strengthText = `Your ${category.name} shows some solid foundations but has room for improvement. You're on the right track but need more consistency and focus.`;
709
+ improvementText = `Focus on aligning all aspects of your ${category.name.toLowerCase()} with your core brand values. Conduct a thorough audit to identify specific areas needing attention.`;
710
+ } else {
711
+ strengthText = `Your ${category.name} needs significant attention. This is likely holding your brand back from reaching its full potential.`;
712
+ improvementText = `Prioritize this area for immediate improvement. Consider seeking professional assistance to help establish a strong foundation for your ${category.name.toLowerCase()}.`;
713
+ }
714
+
715
+ reportHtml += `
716
+ <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
717
+ <div class="bg-gray-800 text-white px-6 py-4">
718
+ <h3 class="text-xl font-bold flex items-center">
719
+ <i class="fas ${getCategoryIcon(category.id)} text-primary mr-2"></i> ${category.name}
720
+ </h3>
721
+ </div>
722
+ <div class="p-6">
723
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
724
+ <div>
725
+ <h4 class="font-bold text-gray-800 mb-3 flex items-center">
726
+ <i class="fas fa-thumbs-up text-green-500 mr-2"></i> Strengths
727
+ </h4>
728
+ <p class="text-gray-600">${strengthText}</p>
729
+ </div>
730
+ <div>
731
+ <h4 class="font-bold text-gray-800 mb-3 flex items-center">
732
+ <i class="fas fa-lightbulb text-yellow-500 mr-2"></i> Recommendations
733
+ </h4>
734
+ <p class="text-gray-600">${improvementText}</p>
735
+ </div>
736
+ </div>
737
+
738
+ <div class="mt-6">
739
+ <h4 class="font-bold text-gray-800 mb-3">Action Items</h4>
740
+ <ul class="space-y-2">
741
+ ${getActionItems(category.id, catPercentage)}
742
+ </ul>
743
+ </div>
744
+ </div>
745
+ </div>
746
+ `;
747
+ });
748
+
749
+ reportSections.innerHTML = reportHtml;
750
+ }
751
+
752
+ // Hide detailed report and return to summary
753
+ function hideDetailedReport() {
754
+ document.getElementById('detailed-report').classList.add('hidden');
755
+ document.getElementById('results-screen').classList.remove('hidden');
756
+ }
757
+
758
+ // Helper function to get category icon
759
+ function getCategoryIcon(categoryId) {
760
+ const icons = {
761
+ 'brand-identity': 'fa-fingerprint',
762
+ 'target-audience': 'fa-users',
763
+ 'messaging': 'fa-comments',
764
+ 'visual-identity': 'fa-palette',
765
+ 'online-presence': 'fa-globe',
766
+ 'customer-experience': 'fa-heart'
767
+ };
768
+ return icons[categoryId] || 'fa-chart-bar';
769
+ }
770
+
771
+ // Helper function to generate action items
772
+ function getActionItems(categoryId, percentage) {
773
+ let items = [];
774
+
775
+ if (categoryId === 'brand-identity') {
776
+ if (percentage < 40) {
777
+ items = [
778
+ 'Conduct a brand strategy workshop to define your core purpose, values, and positioning',
779
+ 'Develop a brand positioning statement that clearly differentiates you from competitors',
780
+ 'Create brand guidelines to ensure consistency across all touchpoints'
781
+ ];
782
+ } else if (percentage < 70) {
783
+ items = [
784
+ 'Refine your brand positioning based on customer feedback and market research',
785
+ 'Audit all customer touchpoints for brand consistency',
786
+ 'Train employees on brand values and how to embody them'
787
+ ];
788
+ } else {
789
+ items = [
790
+ 'Explore opportunities to extend your brand into new markets or product categories',
791
+ 'Conduct brand perception research to identify subtle areas for refinement',
792
+ 'Develop thought leadership content to strengthen your brand authority'
793
+ ];
794
+ }
795
+ } else if (categoryId === 'target-audience') {
796
+ if (percentage < 40) {
797
+ items = [
798
+ 'Conduct market research to clearly define your target audience segments',
799
+ 'Create detailed buyer personas including demographics, psychographics, and pain points',
800
+ 'Map your customer journey to identify key touchpoints and opportunities'
801
+ ];
802
+ } else if (percentage < 70) {
803
+ items = [
804
+ 'Validate your personas with actual customer interviews',
805
+ 'Segment your audience further for more targeted messaging',
806
+ 'Analyze competitor positioning to identify gaps in the market'
807
+ ];
808
+ } else {
809
+ items = [
810
+ 'Explore micro-segmentation opportunities for hyper-personalization',
811
+ 'Develop advocacy programs to deepen relationships with your best customers',
812
+ 'Conduct regular sentiment analysis to stay attuned to audience needs'
813
+ ];
814
+ }
815
+ } else if (categoryId === 'messaging') {
816
+ if (percentage < 40) {
817
+ items = [
818
+ 'Develop a messaging framework with core value propositions and proof points',
819
+ 'Create a brand story that emotionally connects with your audience',
820
+ 'Define your brand voice and tone guidelines'
821
+ ];
822
+ } else if (percentage < 70) {
823
+ items = [
824
+ 'Audit all messaging across channels for consistency',
825
+ 'Test different messaging variations to optimize effectiveness',
826
+ 'Train customer-facing teams on key messaging'
827
+ ];
828
+ } else {
829
+ items = [
830
+ 'Develop thought leadership content to reinforce your messaging',
831
+ 'Explore multimedia storytelling opportunities',
832
+ 'Create a messaging playbook for different scenarios and audiences'
833
+ ];
834
+ }
835
+ } else if (categoryId === 'visual-identity') {
836
+ if (percentage < 40) {
837
+ items = [
838
+ 'Conduct a visual audit of all brand assets',
839
+ 'Develop or refresh your logo and visual identity system',
840
+ 'Create comprehensive brand guidelines for visual elements'
841
+ ];
842
+ } else if (percentage < 70) {
843
+ items = [
844
+ 'Ensure all digital and print materials follow brand guidelines',
845
+ 'Train designers and content creators on proper brand asset usage',
846
+ 'Audit visual consistency across all customer touchpoints'
847
+ ];
848
+ } else {
849
+ items = [
850
+ 'Explore visual storytelling opportunities to enhance brand recognition',
851
+ 'Consider subtle refreshes to keep visuals modern and relevant',
852
+ 'Develop templates to make it easy for others to create on-brand materials'
853
+ ];
854
+ }
855
+ } else if (categoryId === 'online-presence') {
856
+ if (percentage < 40) {
857
+ items = [
858
+ 'Audit and update your website to better reflect your brand',
859
+ 'Develop a content strategy for social media and other digital channels',
860
+ 'Ensure consistent branding across all digital properties'
861
+ ];
862
+ } else if (percentage < 70) {
863
+ items = [
864
+ 'Optimize website content for better brand messaging',
865
+ 'Develop a consistent posting schedule for social media',
866
+ 'Improve visual consistency across digital channels'
867
+ ];
868
+ } else {
869
+ items = [
870
+ 'Explore advanced digital branding opportunities (video, interactive content)',
871
+ 'Develop a digital experience strategy to create seamless customer journeys',
872
+ 'Implement tools to measure and optimize digital brand impact'
873
+ ];
874
+ }
875
+ } else if (categoryId === 'customer-experience') {
876
+ if (percentage < 40) {
877
+ items = [
878
+ 'Map the entire customer journey to identify pain points',
879
+ 'Align all customer touchpoints with your brand promise',
880
+ 'Implement customer feedback systems to identify improvement areas'
881
+ ];
882
+ } else if (percentage < 70) {
883
+ items = [
884
+ 'Train all customer-facing employees on brand-aligned service',
885
+ 'Develop customer delight initiatives that reinforce brand values',
886
+ 'Create consistency across all service channels'
887
+ ];
888
+ } else {
889
+ items = [
890
+ 'Develop customer advocacy and referral programs',
891
+ 'Create premium experiences for your best customers',
892
+ 'Implement predictive service to anticipate customer needs'
893
+ ];
894
+ }
895
+ }
896
+
897
+ return items.map(item => `<li class="flex items-start"><i class="fas fa-check-circle text-primary mt-1 mr-2 flex-shrink-0"></i><span>${item}</span></li>`).join('');
898
+ }
899
+ </script>
900
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=JayStormX8/brandpulse" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
901
+ </html>