Hugging Face's logo

Spaces:
humphuk
/
sg-challenge
Running

App Files Community
humphuk commited on
Commit
d9046e3
·
verified ·
1 Parent(s): 30c8565

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +765 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sg Challenge
3
- emoji: 📊
4
- colorFrom: green
5
  colorTo: blue
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: sg-challenge
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: blue
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,765 @@
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>Saint-Gobain Sustainability Challenge</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
+ <style>
10
+ @keyframes pulse {
11
+ 0% { transform: scale(1); }
12
+ 50% { transform: scale(1.05); }
13
+ 100% { transform: scale(1); }
14
+ }
15
+ .pulse-animation {
16
+ animation: pulse 2s infinite;
17
+ }
18
+ .drag-item {
19
+ transition: transform 0.2s, box-shadow 0.2s;
20
+ }
21
+ .drag-item:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
24
+ }
25
+ .drag-item.dragging {
26
+ opacity: 0.5;
27
+ }
28
+ .drop-zone {
29
+ transition: all 0.3s;
30
+ }
31
+ .drop-zone.highlight {
32
+ background-color: #f0fdf4;
33
+ border-color: #4ade80;
34
+ }
35
+ .drop-zone.correct {
36
+ background-color: #dcfce7;
37
+ border-color: #22c55e;
38
+ }
39
+ .drop-zone.incorrect {
40
+ background-color: #fee2e2;
41
+ border-color: #ef4444;
42
+ }
43
+ .progress-bar {
44
+ transition: width 0.5s ease-in-out;
45
+ }
46
+ .confetti {
47
+ position: absolute;
48
+ width: 10px;
49
+ height: 10px;
50
+ background-color: #f00;
51
+ border-radius: 50%;
52
+ animation: fall 5s linear forwards;
53
+ }
54
+ @keyframes fall {
55
+ to {
56
+ transform: translateY(100vh);
57
+ }
58
+ }
59
+ .sort-item.being-dragged {
60
+ opacity: 0.5;
61
+ transform: scale(1.05);
62
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
63
+ }
64
+ .sort-zone {
65
+ min-height: 200px;
66
+ background-color: #f8fafc;
67
+ border-radius: 0.5rem;
68
+ padding: 1rem;
69
+ }
70
+ .sort-instructions {
71
+ background-color: #eff6ff;
72
+ padding: 1rem;
73
+ border-radius: 0.5rem;
74
+ margin-bottom: 1rem;
75
+ }
76
+ .position-indicator {
77
+ width: 24px;
78
+ height: 24px;
79
+ border-radius: 50%;
80
+ display: inline-flex;
81
+ align-items: center;
82
+ justify-content: center;
83
+ margin-right: 12px;
84
+ font-weight: bold;
85
+ flex-shrink: 0;
86
+ }
87
+ </style>
88
+ </head>
89
+ <body class="bg-gray-50 min-h-screen">
90
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
91
+ <!-- Header -->
92
+ <header class="text-center mb-8">
93
+ <div class="flex justify-center mb-4">
94
+ <img src="https://www.saint-gobain.com/sites/saint-gobain.com/files/2021-10/saint-gobain-logo.png" alt="Saint-Gobain Logo" class="h-16">
95
+ </div>
96
+ <h1 class="text-3xl font-bold text-green-700 mb-2">Sustainability Challenge</h1>
97
+ <p class="text-gray-600">Test your knowledge and help Saint-Gobain achieve its 2050 carbon neutrality goals!</p>
98
+ </header>
99
+
100
+ <!-- Progress Bar -->
101
+ <div class="bg-gray-200 rounded-full h-4 mb-8">
102
+ <div id="progressBar" class="progress-bar bg-green-600 h-4 rounded-full" style="width: 0%"></div>
103
+ </div>
104
+
105
+ <!-- Game Container -->
106
+ <div id="gameContainer" class="bg-white rounded-xl shadow-lg p-6 mb-8">
107
+ <!-- Intro Screen -->
108
+ <div id="introScreen" class="text-center">
109
+ <div class="bg-green-100 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6">
110
+ <i class="fas fa-leaf text-green-600 text-4xl"></i>
111
+ </div>
112
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Welcome to the Sustainability Challenge!</h2>
113
+ <p class="text-gray-600 mb-6">Saint-Gobain is committed to achieving carbon neutrality by 2050. In this 5-minute game, you'll learn about our sustainability initiatives across different business areas and how you can contribute.</p>
114
+ <button id="startBtn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
115
+ Start Challenge <i class="fas fa-arrow-right ml-2"></i>
116
+ </button>
117
+ </div>
118
+
119
+ <!-- Question 1: Business Areas -->
120
+ <div id="question1" class="hidden">
121
+ <h2 class="text-xl font-bold text-gray-800 mb-4">1. Saint-Gobain operates in several business areas. Which of these is NOT one of our main business areas?</h2>
122
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
123
+ <button data-correct="false" class="option-btn bg-white border-2 border-gray-200 hover:border-green-500 rounded-lg p-4 text-left transition duration-200">
124
+ <i class="fas fa-home text-blue-500 mr-2"></i> Construction Products
125
+ </button>
126
+ <button data-correct="false" class="option-btn bg-white border-2 border-gray-200 hover:border-green-500 rounded-lg p-4 text-left transition duration-200">
127
+ <i class="fas fa-industry text-orange-500 mr-2"></i> Industrial Solutions
128
+ </button>
129
+ <button data-correct="false" class="option-btn bg-white border-2 border-gray-200 hover:border-green-500 rounded-lg p-4 text-left transition duration-200">
130
+ <i class="fas fa-car text-purple-500 mr-2"></i> Automotive Glass
131
+ </button>
132
+ <button data-correct="true" class="option-btn bg-white border-2 border-gray-200 hover:border-green-500 rounded-lg p-4 text-left transition duration-200">
133
+ <i class="fas fa-oil-can text-red-500 mr-2"></i> Fossil Fuel Extraction
134
+ </button>
135
+ </div>
136
+ <div id="feedback1" class="hidden mt-4 p-4 rounded-lg bg-green-50 border border-green-200">
137
+ <p class="text-green-700"><i class="fas fa-check-circle mr-2"></i> Correct! Saint-Gobain doesn't operate in fossil fuel extraction. Our main areas are construction products, industrial solutions, and automotive glass, all focused on sustainable solutions.</p>
138
+ </div>
139
+ <div class="flex justify-end mt-6">
140
+ <button id="next1" class="next-btn bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-full transition duration-300 hidden">
141
+ Next <i class="fas fa-arrow-right ml-2"></i>
142
+ </button>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Question 2: Drag and Drop (Updated with Submit Button) -->
147
+ <div id="question2" class="hidden">
148
+ <h2 class="text-xl font-bold text-gray-800 mb-4">2. Match these Saint-Gobain sustainability initiatives with their correct descriptions:</h2>
149
+
150
+ <div class="bg-blue-50 p-4 rounded-lg mb-4">
151
+ <p class="text-blue-700"><i class="fas fa-info-circle mr-2"></i>Drag each initiative to its matching description, then click "Check Answers" to verify your matches.</p>
152
+ </div>
153
+
154
+ <div class="flex flex-col md:flex-row gap-6 mb-6">
155
+ <!-- Drag Items -->
156
+ <div class="w-full md:w-1/2">
157
+ <h3 class="font-semibold text-gray-700 mb-3">Initiatives</h3>
158
+ <div id="dragItems" class="space-y-3">
159
+ <div draggable="true" data-target="target1" class="drag-item bg-white border-2 border-gray-200 rounded-lg p-3 cursor-move">
160
+ <i class="fas fa-arrows-alt text-gray-400 mr-2"></i> Glass Forever
161
+ </div>
162
+ <div draggable="true" data-target="target2" class="drag-item bg-white border-2 border-gray-200 rounded-lg p-3 cursor-move">
163
+ <i class="fas fa-arrows-alt text-gray-400 mr-2"></i> Habitat 2050
164
+ </div>
165
+ <div draggable="true" data-target="target3" class="drag-item bg-white border-2 border-gray-200 rounded-lg p-3 cursor-move">
166
+ <i class="fas fa-arrows-alt text-gray-400 mr-2"></i> Carbon Roadmap
167
+ </div>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Drop Zones -->
172
+ <div class="w-full md:w-1/2">
173
+ <h3 class="font-semibold text-gray-700 mb-3">Descriptions</h3>
174
+ <div id="dropZones" class="space-y-3">
175
+ <div data-target="target1" class="drop-zone bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg p-3 min-h-16">
176
+ <span class="text-gray-500">Our glass recycling program aiming for 100% recycled content</span>
177
+ </div>
178
+ <div data-target="target2" class="drop-zone bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg p-3 min-h-16">
179
+ <span class="text-gray-500">Our vision for sustainable living spaces of the future</span>
180
+ </div>
181
+ <div data-target="target3" class="drop-zone bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg p-3 min-h-16">
182
+ <span class="text-gray-500">Our plan to achieve carbon neutrality by 2050</span>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <div class="flex justify-center my-6">
189
+ <button id="checkAnswersBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">
190
+ <i class="fas fa-check-circle mr-2"></i> Check Answers
191
+ </button>
192
+ </div>
193
+
194
+ <div id="feedback2" class="hidden mt-4 p-4 rounded-lg bg-green-50 border border-green-200">
195
+ <p class="text-green-700"><i class="fas fa-check-circle mr-2"></i> Well done! Glass Forever is our recycling program, Habitat 2050 envisions sustainable living, and our Carbon Roadmap guides us to carbon neutrality.</p>
196
+ </div>
197
+
198
+ <div class="flex justify-end mt-6">
199
+ <button id="next2" class="next-btn bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-full transition duration-300 hidden">
200
+ Next <i class="fas fa-arrow-right ml-2"></i>
201
+ </button>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Question 3: Multiple Choice -->
206
+ <div id="question3" class="hidden">
207
+ <h2 class="text-xl font-bold text-gray-800 mb-4">3. By what year does Saint-Gobain aim to achieve carbon neutrality in its operations?</h2>
208
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
209
+ <button data-correct="false" class="q3-option bg-white border-2 border-gray-200 hover:border-green-500 rounded-lg p-4 text-left transition duration-200">
210
+ <span class="font-bold">2030</span> - Our first major milestone for emissions reduction
211
+ </button>
212
+ <button data-correct="false" class="q3-option bg-white border-2 border-gray-200 hover:border-green-500 rounded-lg p-4 text-left transition duration-200">
213
+ <span class="font-bold">2040</span> - When we plan to have most solutions in place
214
+ </button>
215
+ <button data-correct="true" class="q3-option bg-white border-2 border-gray-200 hover:border-green-500 rounded-lg p-4 text-left transition duration-200">
216
+ <span class="font-bold">2050</span> - Our ultimate carbon neutrality goal
217
+ </button>
218
+ <button data-correct="false" class="q3-option bg-white border-2 border-gray-200 hover:border-green-500 rounded-lg p-4 text-left transition duration-200">
219
+ <span class="font-bold">2025</span> - Our next short-term target
220
+ </button>
221
+ </div>
222
+ <div id="feedback3" class="hidden mt-4 p-4 rounded-lg bg-green-50 border border-green-200">
223
+ <p class="text-green-700"><i class="fas fa-check-circle mr-2"></i> Correct! 2050 is our carbon neutrality target year, with 2030 as an important milestone (33% reduction in CO₂ emissions vs 2017).</p>
224
+ </div>
225
+ <div class="flex justify-between mt-6">
226
+ <button id="submitQ3" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">
227
+ Submit Answer
228
+ </button>
229
+ <button id="next3" class="next-btn bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-full transition duration-300 hidden">
230
+ Next <i class="fas fa-arrow-right ml-2"></i>
231
+ </button>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Question 4: Sorting - Improved Version -->
236
+ <div id="question4" class="hidden">
237
+ <h2 class="text-xl font-bold text-gray-800 mb-4">4. Sort these Saint-Gobain sustainability priorities from most to least immediate:</h2>
238
+
239
+ <div class="sort-instructions mb-4">
240
+ <p class="text-blue-700 flex items-center">
241
+ <i class="fas fa-info-circle mr-2"></i>
242
+ <span>Drag and drop the items below to arrange them in order of priority.</span>
243
+ </p>
244
+ </div>
245
+
246
+ <div id="sortContainer" class="sort-zone">
247
+ <!-- Items will have position indicators and more visual cues -->
248
+ <div data-value="3" class="sort-item bg-white border-2 border-gray-200 rounded-lg p-3 cursor-move flex items-start mb-3 hover:shadow-md transition-all">
249
+ <div class="position-indicator bg-gray-100 text-gray-500">4</div>
250
+ <span>Develop circular economy solutions for all products</span>
251
+ </div>
252
+ <div data-value="1" class="sort-item bg-white border-2 border-gray-200 rounded-lg p-3 cursor-move flex items-start mb-3 hover:shadow-md transition-all">
253
+ <div class="position-indicator bg-gray-100 text-gray-500">3</div>
254
+ <span>Reduce energy consumption in manufacturing</span>
255
+ </div>
256
+ <div data-value="2" class="sort-item bg-white border-2 border-gray-200 rounded-lg p-3 cursor-move flex items-start mb-3 hover:shadow-md transition-all">
257
+ <div class="position-indicator bg-gray-100 text-gray-500">2</div>
258
+ <span>Increase use of renewable energy sources</span>
259
+ </div>
260
+ <div data-value="4" class="sort-item bg-white border-2 border-gray-200 rounded-lg p-3 cursor-move flex items-start hover:shadow-md transition-all">
261
+ <div class="position-indicator bg-gray-100 text-gray-500">1</div>
262
+ <span>Achieve carbon neutrality across all operations</span>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="mt-4 text-sm text-gray-500">
267
+ <p><i class="fas fa-arrow-up mr-1"></i> Most immediate priority (drag to top)</p>
268
+ </div>
269
+
270
+ <div id="feedback4" class="hidden mt-4 p-4 rounded-lg bg-green-50 border border-green-200">
271
+ <p class="text-green-700"><i class="fas fa-check-circle mr-2"></i> Correct! Our immediate focus is energy reduction, followed by renewable energy, circular solutions, and ultimately carbon neutrality.</p>
272
+ </div>
273
+
274
+ <div class="flex justify-between mt-6">
275
+ <button id="checkSortBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">
276
+ <i class="fas fa-check mr-2"></i> Check Order
277
+ </button>
278
+ <button id="next4" class="next-btn bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-full transition duration-300 hidden">
279
+ Next <i class="fas fa-arrow-right ml-2"></i>
280
+ </button>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Question 5: Employee Actions -->
285
+ <div id="question5" class="hidden">
286
+ <h2 class="text-xl font-bold text-gray-800 mb-4">5. Which of these actions can YOU take to support Saint-Gobain's sustainability goals?</h2>
287
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
288
+ <button data-correct="true" class="option-btn bg-white border-2 border-gray-200 hover:border-green-500 rounded-lg p-4 text-left transition duration-200">
289
+ <i class="fas fa-recycle text-green-500 mr-2"></i> Participate in office recycling programs
290
+ </button>
291
+ <button data-correct="true" class="option-btn bg-white border-2 border-gray-200 hover:border-green-500 rounded-lg p-4 text-left transition duration-200">
292
+ <i class="fas fa-lightbulb text-yellow-500 mr-2"></i> Turn off lights and equipment when not in use
293
+ </button>
294
+ <button data-correct="true" class="option-btn bg-white border-2 border-gray-200 hover:border-green-500 rounded-lg p-4 text-left transition duration-200">
295
+ <i class="fas fa-bicycle text-blue-500 mr-2"></i> Use sustainable transportation options
296
+ </button>
297
+ <button data-correct="false" class="option-btn bg-white border-2 border-gray-200 hover:border-green-500 rounded-lg p-4 text-left transition duration-200">
298
+ <i class="fas fa-times-circle text-red-500 mr-2"></i> None of these - sustainability is only management's responsibility
299
+ </button>
300
+ </div>
301
+ <div id="feedback5" class="hidden mt-4 p-4 rounded-lg bg-green-50 border border-green-200">
302
+ <p class="text-green-700"><i class="fas fa-check-circle mr-2"></i> Exactly! Every employee plays a role in sustainability. Small actions add up to make a big difference in achieving our goals.</p>
303
+ </div>
304
+ <div class="flex justify-end mt-6">
305
+ <button id="next5" class="next-btn bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-full transition duration-300 hidden">
306
+ See Results <i class="fas fa-trophy ml-2"></i>
307
+ </button>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Results Screen -->
312
+ <div id="resultsScreen" class="hidden text-center">
313
+ <div class="bg-green-100 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6">
314
+ <i class="fas fa-trophy text-green-600 text-4xl"></i>
315
+ </div>
316
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Congratulations!</h2>
317
+ <p class="text-gray-600 mb-6">You've completed the Saint-Gobain Sustainability Challenge!</p>
318
+
319
+ <div class="bg-green-50 rounded-lg p-6 mb-6">
320
+ <h3 class="text-lg font-semibold text-green-700 mb-3">Your Score: <span id="scoreDisplay" class="text-2xl">0</span>/5</h3>
321
+ <div class="flex justify-center">
322
+ <div id="starsContainer" class="flex mb-4">
323
+ <i class="fas fa-star text-gray-300 text-2xl mx-1"></i>
324
+ <i class="fas fa-star text-gray-300 text-2xl mx-1"></i>
325
+ <i class="fas fa-star text-gray-300 text-2xl mx-1"></i>
326
+ <i class="fas fa-star text-gray-300 text-2xl mx-1"></i>
327
+ <i class="fas fa-star text-gray-300 text-2xl mx-1"></i>
328
+ </div>
329
+ </div>
330
+ <p id="scoreMessage" class="text-gray-700">Thanks for learning about our sustainability efforts!</p>
331
+ </div>
332
+ <button id="restartBtn" class="bg-green-600 hover:bg-green-7 00 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
333
+ Play Again <i class="fas fa-redo ml-2"></i>
334
+ </button>
335
+ </div>
336
+ </div>
337
+ </div>
338
+
339
+ <script>
340
+ document.addEventListener('DOMContentLoaded', function() {
341
+ // Quiz state variables
342
+ let currentQuestion = 0;
343
+ let score = 0;
344
+ const totalQuestions = 5;
345
+ const questions = ['question1', 'question2', 'question3', 'question4', 'question5'];
346
+
347
+ // DOM elements
348
+ const introScreen = document.getElementById('introScreen');
349
+ const startBtn = document.getElementById('startBtn');
350
+ const progressBar = document.getElementById('progressBar');
351
+ const nextButtons = document.querySelectorAll('.next-btn');
352
+ const submitQ3 = document.getElementById('submitQ3');
353
+ const checkSortBtn = document.getElementById('checkSortBtn');
354
+
355
+ // Initialize the quiz
356
+ function initQuiz() {
357
+ currentQuestion = 0;
358
+ score = 0;
359
+ updateProgressBar();
360
+ showQuestion(0);
361
+ }
362
+
363
+ // Show a specific question
364
+ function showQuestion(index) {
365
+ // Hide all questions and intro
366
+ document.querySelectorAll('[id^="question"]').forEach(q => q.classList.add('hidden'));
367
+ introScreen.classList.add('hidden');
368
+ resultsScreen.classList.add('hidden');
369
+
370
+ // Show the current question
371
+ document.getElementById(questions[index]).classList.remove('hidden');
372
+
373
+ // Reset sorting indicators if it's question 4
374
+ if (index === 3) {
375
+ resetSortIndicators();
376
+ }
377
+ }
378
+
379
+ // Update progress bar
380
+ function updateProgressBar() {
381
+ const progressPercentage = (currentQuestion / totalQuestions) * 100;
382
+ progressBar.style.width = `${progressPercentage}%`;
383
+ }
384
+
385
+ // Handle start button click
386
+ startBtn.addEventListener('click', function() {
387
+ initQuiz();
388
+ });
389
+
390
+ // Next button handlers
391
+ nextButtons.forEach(button => {
392
+ button.addEventListener('click', function() {
393
+ currentQuestion++;
394
+ if (currentQuestion < totalQuestions) {
395
+ showQuestion(currentQuestion);
396
+ updateProgressBar();
397
+ } else {
398
+ showResults();
399
+ }
400
+ });
401
+ });
402
+
403
+ // Question 1 - Multiple Choice
404
+ const q1Options = document.querySelectorAll('#question1 .option-btn');
405
+ q1Options.forEach(option => {
406
+ option.addEventListener('click', function() {
407
+ // Disable all options
408
+ q1Options.forEach(opt => {
409
+ opt.disabled = true;
410
+ if (opt.getAttribute('data-correct') === 'true') {
411
+ opt.classList.add('border-green-500', 'bg-green-50');
412
+ } else {
413
+ opt.classList.remove('hover:border-green-500');
414
+ }
415
+ });
416
+
417
+ // Check if correct
418
+ if (this.getAttribute('data-correct') === 'true') {
419
+ score++;
420
+ }
421
+
422
+ // Show feedback
423
+ document.getElementById('feedback1').classList.remove('hidden');
424
+ document.getElementById('next1').classList.remove('hidden');
425
+ });
426
+ });
427
+
428
+ // Question 2 - Drag and Drop
429
+ let draggedItem = null;
430
+
431
+ // Drag items
432
+ const dragItems = document.querySelectorAll('#question2 .drag-item');
433
+ dragItems.forEach(item => {
434
+ item.addEventListener('dragstart', function(e) {
435
+ draggedItem = this;
436
+ this.classList.add('dragging');
437
+ e.dataTransfer.setData('text/plain', this.dataset.target);
438
+ });
439
+
440
+ item.addEventListener('dragend', function() {
441
+ this.classList.remove('dragging');
442
+ });
443
+ });
444
+
445
+ // Drop zones
446
+ const dropZones = document.querySelectorAll('#question2 .drop-zone');
447
+ dropZones.forEach(zone => {
448
+ zone.addEventListener('dragover', function(e) {
449
+ e.preventDefault();
450
+ this.classList.add('highlight');
451
+ });
452
+
453
+ zone.addEventListener('dragleave', function() {
454
+ this.classList.remove('highlight');
455
+ });
456
+
457
+ zone.addEventListener('drop', function(e) {
458
+ e.preventDefault();
459
+ this.classList.remove('highlight');
460
+
461
+ if (draggedItem) {
462
+ // Clear any existing content
463
+ while (this.firstChild) {
464
+ this.removeChild(this.firstChild);
465
+ }
466
+
467
+ // Add the dragged item
468
+ const clone = draggedItem.cloneNode(true);
469
+ clone.classList.remove('dragging');
470
+ clone.draggable = false;
471
+ this.appendChild(clone);
472
+
473
+ // Keep track of the match
474
+ this.dataset.matched = draggedItem.dataset.target;
475
+ }
476
+ });
477
+ });
478
+
479
+ // Check answers button
480
+ document.getElementById('checkAnswersBtn').addEventListener('click', function() {
481
+ let correctMatches = 0;
482
+
483
+ dropZones.forEach(zone => {
484
+ const expected = zone.dataset.target;
485
+ const actual = zone.dataset.matched;
486
+
487
+ if (expected === actual) {
488
+ zone.classList.add('correct');
489
+ correctMatches++;
490
+ } else {
491
+ zone.classList.add('incorrect');
492
+ }
493
+ });
494
+
495
+ if (correctMatches === 3) {
496
+ score++;
497
+ }
498
+
499
+ // Show feedback
500
+ document.getElementById('feedback2').classList.remove('hidden');
501
+ document.getElementById('next2').classList.remove('hidden');
502
+ this.disabled = true;
503
+ });
504
+
505
+ // Question 3 - Multiple Choice
506
+ const q3Options = document.querySelectorAll('#question3 .q3-option');
507
+ q3Options.forEach(option => {
508
+ option.addEventListener('click', function() {
509
+ // Remove selection from all options
510
+ q3Options.forEach(opt => {
511
+ opt.classList.remove('bg-green-50', 'border-green-500');
512
+ });
513
+
514
+ // Select this one
515
+ this.classList.add('bg-green-50', 'border-green-500');
516
+
517
+ // Enable submit button if not already
518
+ submitQ3.disabled = false;
519
+ });
520
+ });
521
+
522
+ // Submit button for Q3
523
+ submitQ3.addEventListener('click', function() {
524
+ // Find selected option
525
+ const selectedOption = document.querySelector('#question3 .q3-option.bg-green-50');
526
+
527
+ if (selectedOption && selectedOption.getAttribute('data-correct') === 'true') {
528
+ score++;
529
+ }
530
+
531
+ // Show feedback
532
+ document.getElementById('feedback3').classList.remove('hidden');
533
+ document.getElementById('next3').classList.remove('hidden');
534
+
535
+ // Disable all options and submit button
536
+ q3Options.forEach(opt => {
537
+ opt.disabled = true;
538
+ if (opt.getAttribute('data-correct') === 'true') {
539
+ opt.classList.add('border-green-500', 'bg-green-50');
540
+ }
541
+ });
542
+ this.disabled = true;
543
+ });
544
+
545
+ // Question 4 - Improved Sorting Mechanism
546
+ const sortContainer = document.getElementById('sortContainer');
547
+ const sortItems = document.querySelectorAll('#question4 .sort-item');
548
+ let draggedSortItem = null;
549
+
550
+ function resetSortIndicators() {
551
+ document.querySelectorAll('#question4 .sort-item').forEach((item, index) => {
552
+ const indicator = item.querySelector('.position-indicator');
553
+ if (indicator) {
554
+ indicator.textContent = index + 1;
555
+ indicator.className = 'position-indicator bg-gray-100 text-gray-500';
556
+ }
557
+ });
558
+ }
559
+
560
+ sortItems.forEach(item => {
561
+ item.addEventListener('dragstart', function() {
562
+ this.classList.add('being-dragged');
563
+ draggedSortItem = this;
564
+ });
565
+
566
+ item.addEventListener('dragend', function() {
567
+ this.classList.remove('being-dragged');
568
+ updatePositionIndicators();
569
+ });
570
+ });
571
+
572
+ sortContainer.addEventListener('dragover', function(e) {
573
+ e.preventDefault();
574
+ const afterElement = getDragAfterElement(this, e.clientY);
575
+
576
+ if (draggedSortItem) {
577
+ if (afterElement == null) {
578
+ this.appendChild(draggedSortItem);
579
+ } else {
580
+ this.insertBefore(draggedSortItem, afterElement);
581
+ }
582
+ }
583
+ });
584
+
585
+ function getDragAfterElement(container, y) {
586
+ const draggableElements = [...container.querySelectorAll('.sort-item:not(.being-dragged)')];
587
+
588
+ return draggableElements.reduce((closest, child) => {
589
+ const box = child.getBoundingClientRect();
590
+ const offset = y - box.top - box.height / 2;
591
+ if (offset < 0 && offset > closest.offset) {
592
+ return { offset: offset, element: child };
593
+ } else {
594
+ return closest;
595
+ }
596
+ }, { offset: Number.NEGATIVE_INFINITY }).element;
597
+ }
598
+
599
+ function updatePositionIndicators() {
600
+ const items = sortContainer.querySelectorAll('.sort-item');
601
+ items.forEach((item, index) => {
602
+ const indicator = item.querySelector('.position-indicator');
603
+ if (indicator) {
604
+ indicator.textContent = index + 1;
605
+
606
+ // Visual feedback for correct/incorrect order (only after checking)
607
+ if (item.dataset.showCorrectness) {
608
+ if (parseInt(item.dataset.value) === index + 1) {
609
+ indicator.className = 'position-indicator bg-green-100 text-green-700';
610
+ } else {
611
+ indicator.className = 'position-indicator bg-red-100 text-red-700';
612
+ }
613
+ }
614
+ }
615
+ });
616
+ }
617
+
618
+ // Check sort order button
619
+ checkSortBtn.addEventListener('click', function() {
620
+ const items = sortContainer.querySelectorAll('.sort-item');
621
+ let allCorrect = true;
622
+
623
+ items.forEach((item, index) => {
624
+ item.dataset.showCorrectness = 'true'; // Flag for visual feedback
625
+ const indicator = item.querySelector('.position-indicator');
626
+
627
+ if (parseInt(item.dataset.value) === index + 1) {
628
+ indicator.className = 'position-indicator bg-green-100 text-green-700';
629
+ } else {
630
+ indicator.className = 'position-indicator bg-red-100 text-red-700';
631
+ allCorrect = false;
632
+ }
633
+ });
634
+
635
+ if (allCorrect) {
636
+ score++;
637
+ document.getElementById('feedback4').classList.remove('hidden');
638
+ document.getElementById('feedback4').querySelector('p').textContent =
639
+ "Correct! Our immediate focus is energy reduction, followed by renewable energy, circular solutions, and ultimately carbon neutrality.";
640
+ } else {
641
+ document.getElementById('feedback4').classList.remove('hidden');
642
+ document.getElementById('feedback4').querySelector('p').textContent =
643
+ "Almost! The correct order is: 1. Reduce energy consumption, 2. Increase renewable energy, 3. Develop circular economy solutions, 4. Achieve carbon neutrality.";
644
+ }
645
+
646
+ document.getElementById('next4').classList.remove('hidden');
647
+ this.disabled = true;
648
+ });
649
+
650
+ // Question 5 - Multiple Choice (multiple correct answers)
651
+ const q5Options = document.querySelectorAll('#question5 .option-btn');
652
+ q5Options.forEach(option => {
653
+ option.addEventListener('click', function(e) {
654
+ if (this.disabled) return;
655
+
656
+ // Toggle selection
657
+ if (this.getAttribute('data-correct') === 'true') {
658
+ this.classList.toggle('bg-green-50');
659
+ this.classList.toggle('border-green-500');
660
+ } else {
661
+ // For incorrect option, just select it
662
+ this.classList.add('bg-red-50', 'border-red-500');
663
+ }
664
+
665
+ // Check if any option is selected (for enabling next button)
666
+ const anySelected = [...q5Options].some(opt =>
667
+ opt.classList.contains('bg-green-50') || opt.classList.contains('bg-red-50')
668
+ );
669
+
670
+ if (anySelected) {
671
+ // Disable all options and show feedback
672
+ q5Options.forEach(opt => {
673
+ opt.disabled = true;
674
+ if (opt.getAttribute('data-correct') === 'true') {
675
+ opt.classList.add('border-green-500', 'bg-green-50');
676
+ }
677
+ });
678
+
679
+ // Check score - add points only if they didn't select the incorrect option
680
+ const selectedIncorrect = [...q5Options].some(opt =>
681
+ opt.classList.contains('bg-red-50')
682
+ );
683
+
684
+ if (!selectedIncorrect) {
685
+ score++;
686
+ }
687
+
688
+ document.getElementById('feedback5').classList.remove('hidden');
689
+ document.getElementById('next5').classList.remove('hidden');
690
+ }
691
+ });
692
+ });
693
+
694
+ // Results screen
695
+ const resultsScreen = document.getElementById('resultsScreen');
696
+ const scoreDisplay = document.getElementById('scoreDisplay');
697
+ const starsContainer = document.getElementById('starsContainer');
698
+ const scoreMessage = document.getElementById('scoreMessage');
699
+ const restartBtn = document.getElementById('restartBtn');
700
+
701
+ function showResults() {
702
+ // Hide all questions
703
+ document.querySelectorAll('[id^="question"]').forEach(q => q.classList.add('hidden'));
704
+
705
+ // Show results screen
706
+ resultsScreen.classList.remove('hidden');
707
+
708
+ // Update score display
709
+ scoreDisplay.textContent = score;
710
+
711
+ // Update stars
712
+ starsContainer.innerHTML = '';
713
+ for (let i = 1; i <= 5; i++) {
714
+ const star = document.createElement('i');
715
+ star.className = `fas fa-star text-2xl mx-1 ${i <= score ? 'text-yellow-400' : 'text-gray-300'}`;
716
+ starsContainer.appendChild(star);
717
+ }
718
+
719
+ // Set message based on score
720
+ if (score === 5) {
721
+ scoreMessage.textContent = "Perfect! You're a sustainability expert!";
722
+ createConfetti();
723
+ } else if (score >= 3) {
724
+ scoreMessage.textContent = "Great job! You know a lot about our sustainability efforts!";
725
+ } else {
726
+ scoreMessage.textContent = "Thanks for learning about our sustainability efforts!";
727
+ }
728
+
729
+ // Scroll to top
730
+ window.scrollTo({ top: 0, behavior: 'smooth' });
731
+ }
732
+
733
+ // Restart button
734
+ restartBtn.addEventListener('click', function() {
735
+ initQuiz();
736
+ });
737
+
738
+ // Confetti effect for perfect score
739
+ function createConfetti() {
740
+ const colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722'];
741
+
742
+ for (let i = 0; i < 100; i++) {
743
+ const confetti = document.createElement('div');
744
+ confetti.className = 'confetti';
745
+ confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
746
+ confetti.style.left = `${Math.random() * 100}vw`;
747
+ confetti.style.animationDelay = `${Math.random() * 5}s`;
748
+ confetti.style.height = `${Math.random() * 10 + 5}px`;
749
+ confetti.style.width = `${Math.random() * 10 + 5}px`;
750
+
751
+ document.body.appendChild(confetti);
752
+
753
+ // Remove after animation completes
754
+ setTimeout(() => {
755
+ confetti.remove();
756
+ }, 5000);
757
+ }
758
+ }
759
+
760
+ // Initialize quiz (shows intro screen by default)
761
+ initQuiz();
762
+ });
763
+ </script>
764
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
765
+ </html>