Hugging Face's logo

Spaces:
LukasBe
/
class-feedback-quest
Running

App Files Community
LukasBe commited on
Commit
024ec85
·
verified ·
1 Parent(s): fdaafd8

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +414 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Class Feedback Quest
3
- emoji: ⚡
4
- colorFrom: purple
5
- colorTo: indigo
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: class-feedback-quest
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: gray
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,414 @@
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>Class Feedback Quest</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 progressBar {
11
+ 0% { width: 0%; }
12
+ 100% { width: var(--progress); }
13
+ }
14
+
15
+ .progress-animate {
16
+ animation: progressBar 1s ease-in-out;
17
+ }
18
+
19
+ .badge-pop {
20
+ animation: badgePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
21
+ }
22
+
23
+ @keyframes badgePop {
24
+ 0% { transform: scale(0); opacity: 0; }
25
+ 80% { transform: scale(1.1); opacity: 1; }
26
+ 100% { transform: scale(1); opacity: 1; }
27
+ }
28
+
29
+ .floating {
30
+ animation: floating 3s ease-in-out infinite;
31
+ }
32
+
33
+ @keyframes floating {
34
+ 0% { transform: translateY(0px); }
35
+ 50% { transform: translateY(-10px); }
36
+ 100% { transform: translateY(0px); }
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gradient-to-br from-indigo-100 to-purple-100 min-h-screen">
41
+ <div class="container mx-auto px-4 py-8 max-w-md">
42
+ <!-- Header with XP Bar -->
43
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
44
+ <div class="flex justify-between items-center mb-4">
45
+ <h1 class="text-2xl font-bold text-indigo-800">Class Feedback Quest</h1>
46
+ <div class="text-right">
47
+ <div class="text-sm text-gray-600">Level <span id="level">1</span></div>
48
+ <div class="text-xs text-gray-500">XP: <span id="currentXP">0</span>/<span id="maxXP">100</span></div>
49
+ </div>
50
+ </div>
51
+
52
+ <div class="w-full bg-gray-200 rounded-full h-4 mb-2">
53
+ <div id="xpBar" class="bg-gradient-to-r from-blue-500 to-purple-600 h-4 rounded-full progress-animate" style="--progress: 0%"></div>
54
+ </div>
55
+
56
+ <p class="text-sm text-gray-600">Complete surveys to level up and earn badges!</p>
57
+ </div>
58
+
59
+ <!-- Survey Container -->
60
+ <div id="surveyContainer" class="bg-white rounded-xl shadow-lg p-6 mb-6">
61
+ <div class="flex justify-between items-center mb-4">
62
+ <h2 class="text-xl font-semibold text-indigo-700">Today's Class Feedback</h2>
63
+ <div class="text-sm text-gray-500">Question <span id="currentQuestion">1</span>/<span id="totalQuestions">5</span></div>
64
+ </div>
65
+
66
+ <!-- Question 1 -->
67
+ <div id="q1" class="question">
68
+ <p class="text-lg font-medium mb-4">How engaging was today's class?</p>
69
+ <div class="space-y-3">
70
+ <div class="flex items-center">
71
+ <input type="radio" id="q1-1" name="q1" value="5" class="h-5 w-5 text-indigo-600">
72
+ <label for="q1-1" class="ml-3 block text-gray-700">🌟 Extremely engaging</label>
73
+ </div>
74
+ <div class="flex items-center">
75
+ <input type="radio" id="q1-2" name="q1" value="4" class="h-5 w-5 text-indigo-600">
76
+ <label for="q1-2" class="ml-3 block text-gray-700">👍 Very engaging</label>
77
+ </div>
78
+ <div class="flex items-center">
79
+ <input type="radio" id="q1-3" name="q1" value="3" class="h-5 w-5 text-indigo-600">
80
+ <label for="q1-3" class="ml-3 block text-gray-700">😐 Moderately engaging</label>
81
+ </div>
82
+ <div class="flex items-center">
83
+ <input type="radio" id="q1-4" name="q1" value="2" class="h-5 w-5 text-indigo-600">
84
+ <label for="q1-4" class="ml-3 block text-gray-700">👎 Slightly engaging</label>
85
+ </div>
86
+ <div class="flex items-center">
87
+ <input type="radio" id="q1-5" name="q1" value="1" class="h-5 w-5 text-indigo-600">
88
+ <label for="q1-5" class="ml-3 block text-gray-700">💤 Not engaging at all</label>
89
+ </div>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Question 2 -->
94
+ <div id="q2" class="question hidden">
95
+ <p class="text-lg font-medium mb-4">How well did you understand the material?</p>
96
+ <div class="space-y-3">
97
+ <div class="flex items-center">
98
+ <input type="radio" id="q2-1" name="q2" value="5" class="h-5 w-5 text-indigo-600">
99
+ <label for="q2-1" class="ml-3 block text-gray-700">🧠 Completely understood</label>
100
+ </div>
101
+ <div class="flex items-center">
102
+ <input type="radio" id="q2-2" name="q2" value="4" class="h-5 w-5 text-indigo-600">
103
+ <label for="q2-2" class="ml-3 block text-gray-700">💡 Mostly understood</label>
104
+ </div>
105
+ <div class="flex items-center">
106
+ <input type="radio" id="q2-3" name="q2" value="3" class="h-5 w-5 text-indigo-600">
107
+ <label for="q2-3" class="ml-3 block text-gray-700">🤔 Somewhat understood</label>
108
+ </div>
109
+ <div class="flex items-center">
110
+ <input type="radio" id="q2-4" name="q2" value="2" class="h-5 w-5 text-indigo-600">
111
+ <label for="q2-4" class="ml-3 block text-gray-700">❓ Barely understood</label>
112
+ </div>
113
+ <div class="flex items-center">
114
+ <input type="radio" id="q2-5" name="q2" value="1" class="h-5 w-5 text-indigo-600">
115
+ <label for="q2-5" class="ml-3 block text-gray-700">😵 Didn't understand at all</label>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- Question 3 -->
121
+ <div id="q3" class="question hidden">
122
+ <p class="text-lg font-medium mb-4">What could make this class better?</p>
123
+ <textarea id="q3-text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" rows="3" placeholder="Your suggestions..."></textarea>
124
+ </div>
125
+
126
+ <!-- Question 4 -->
127
+ <div id="q4" class="question hidden">
128
+ <p class="text-lg font-medium mb-4">How would you rate the pace of the class?</p>
129
+ <div class="flex justify-between mb-2">
130
+ <span class="text-sm text-gray-600">Too slow</span>
131
+ <span class="text-sm text-gray-600">Perfect</span>
132
+ <span class="text-sm text-gray-600">Too fast</span>
133
+ </div>
134
+ <input type="range" id="q4-range" min="1" max="5" value="3" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
135
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
136
+ <span>1</span>
137
+ <span>2</span>
138
+ <span>3</span>
139
+ <span>4</span>
140
+ <span>5</span>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Question 5 -->
145
+ <div id="q5" class="question hidden">
146
+ <p class="text-lg font-medium mb-4">Would you recommend this class to others?</p>
147
+ <div class="flex space-x-4">
148
+ <button onclick="selectRecommendation('yes')" class="flex-1 py-2 px-4 bg-green-100 hover:bg-green-200 text-green-800 rounded-lg transition">
149
+ <i class="fas fa-thumbs-up mr-2"></i> Yes
150
+ </button>
151
+ <button onclick="selectRecommendation('neutral')" class="flex-1 py-2 px-4 bg-yellow-100 hover:bg-yellow-200 text-yellow-800 rounded-lg transition">
152
+ <i class="fas fa-meh mr-2"></i> Neutral
153
+ </button>
154
+ <button onclick="selectRecommendation('no')" class="flex-1 py-2 px-4 bg-red-100 hover:bg-red-200 text-red-800 rounded-lg transition">
155
+ <i class="fas fa-thumbs-down mr-2"></i> No
156
+ </button>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Navigation Buttons -->
161
+ <div class="flex justify-between mt-6">
162
+ <button id="prevBtn" class="py-2 px-4 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition hidden">
163
+ <i class="fas fa-arrow-left mr-2"></i> Previous
164
+ </button>
165
+ <button id="nextBtn" class="py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition ml-auto">
166
+ Next <i class="fas fa-arrow-right ml-2"></i>
167
+ </button>
168
+ <button id="submitBtn" class="py-2 px-4 bg-green-600 hover:bg-green-700 text-white rounded-lg transition hidden">
169
+ Submit <i class="fas fa-paper-plane ml-2"></i>
170
+ </button>
171
+ </div>
172
+ </div>
173
+
174
+ <!-- Badges Section -->
175
+ <div class="bg-white rounded-xl shadow-lg p-6">
176
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4">Your Badges</h2>
177
+ <div class="grid grid-cols-3 gap-4">
178
+ <div id="feedbackExplorer" class="badge text-center opacity-30">
179
+ <div class="mx-auto bg-gray-200 rounded-full w-16 h-16 flex items-center justify-center mb-2">
180
+ <i class="fas fa-map text-2xl text-gray-500"></i>
181
+ </div>
182
+ <p class="text-xs font-medium">Feedback Explorer</p>
183
+ </div>
184
+ <div id="classArbiter" class="badge text-center opacity-30">
185
+ <div class="mx-auto bg-gray-200 rounded-full w-16 h-16 flex items-center justify-center mb-2">
186
+ <i class="fas fa-gavel text-2xl text-gray-500"></i>
187
+ </div>
188
+ <p class="text-xs font-medium">Class Arbiter</p>
189
+ </div>
190
+ <div id="feedbackMaster" class="badge text-center opacity-30">
191
+ <div class="mx-auto bg-gray-200 rounded-full w-16 h-16 flex items-center justify-center mb-2">
192
+ <i class="fas fa-trophy text-2xl text-gray-500"></i>
193
+ </div>
194
+ <p class="text-xs font-medium">Feedback Master</p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Completion Modal -->
201
+ <div id="completionModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
202
+ <div class="bg-white rounded-xl p-8 max-w-sm mx-4 text-center relative">
203
+ <div class="absolute -top-8 left-1/2 transform -translate-x-1/2">
204
+ <div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center shadow-lg floating">
205
+ <i class="fas fa-trophy text-3xl text-white"></i>
206
+ </div>
207
+ </div>
208
+ <h2 class="text-2xl font-bold text-indigo-800 mt-6 mb-4">Survey Complete!</h2>
209
+ <p class="text-gray-600 mb-4">You earned <span class="font-bold text-indigo-600">25 XP</span> and unlocked a new badge!</p>
210
+
211
+ <div id="earnedBadge" class="mx-auto bg-gradient-to-r from-purple-400 to-indigo-500 rounded-full w-20 h-20 flex items-center justify-center mb-4 badge-pop">
212
+ <i class="fas fa-gavel text-3xl text-white"></i>
213
+ </div>
214
+
215
+ <p class="font-medium text-indigo-700 mb-2">Class Arbiter</p>
216
+ <p class="text-sm text-gray-500 mb-6">Awarded for completing your first survey!</p>
217
+
218
+ <button onclick="closeModal()" class="w-full py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition">
219
+ Awesome! <i class="fas fa-check ml-2"></i>
220
+ </button>
221
+ </div>
222
+ </div>
223
+
224
+ <script>
225
+ // Survey state
226
+ let currentQuestion = 1;
227
+ const totalQuestions = 5;
228
+ let xp = 0;
229
+ let level = 1;
230
+ let maxXP = 100;
231
+
232
+ // DOM elements
233
+ const questions = document.querySelectorAll('.question');
234
+ const prevBtn = document.getElementById('prevBtn');
235
+ const nextBtn = document.getElementById('nextBtn');
236
+ const submitBtn = document.getElementById('submitBtn');
237
+ const currentQuestionDisplay = document.getElementById('currentQuestion');
238
+ const totalQuestionsDisplay = document.getElementById('totalQuestions');
239
+ const xpBar = document.getElementById('xpBar');
240
+ const currentXPDisplay = document.getElementById('currentXP');
241
+ const maxXPDisplay = document.getElementById('maxXP');
242
+ const levelDisplay = document.getElementById('level');
243
+ const completionModal = document.getElementById('completionModal');
244
+
245
+ // Initialize
246
+ document.addEventListener('DOMContentLoaded', function() {
247
+ totalQuestionsDisplay.textContent = totalQuestions;
248
+ updateXPBar();
249
+
250
+ // Set up event listeners
251
+ nextBtn.addEventListener('click', nextQuestion);
252
+ prevBtn.addEventListener('click', prevQuestion);
253
+ submitBtn.addEventListener('click', completeSurvey);
254
+ });
255
+
256
+ // Navigation functions
257
+ function nextQuestion() {
258
+ // Validate current question
259
+ if (!validateQuestion(currentQuestion)) {
260
+ return;
261
+ }
262
+
263
+ // Hide current question
264
+ document.getElementById(`q${currentQuestion}`).classList.add('hidden');
265
+
266
+ // Move to next question
267
+ currentQuestion++;
268
+ currentQuestionDisplay.textContent = currentQuestion;
269
+
270
+ // Show next question
271
+ document.getElementById(`q${currentQuestion}`).classList.remove('hidden');
272
+
273
+ // Update button visibility
274
+ updateButtonVisibility();
275
+
276
+ // Award XP for answering
277
+ if (currentQuestion > 1) {
278
+ addXP(5);
279
+ }
280
+ }
281
+
282
+ function prevQuestion() {
283
+ // Hide current question
284
+ document.getElementById(`q${currentQuestion}`).classList.add('hidden');
285
+
286
+ // Move to previous question
287
+ currentQuestion--;
288
+ currentQuestionDisplay.textContent = currentQuestion;
289
+
290
+ // Show previous question
291
+ document.getElementById(`q${currentQuestion}`).classList.remove('hidden');
292
+
293
+ // Update button visibility
294
+ updateButtonVisibility();
295
+ }
296
+
297
+ function updateButtonVisibility() {
298
+ // Show/hide previous button
299
+ if (currentQuestion > 1) {
300
+ prevBtn.classList.remove('hidden');
301
+ } else {
302
+ prevBtn.classList.add('hidden');
303
+ }
304
+
305
+ // Show/hide next/submit button
306
+ if (currentQuestion < totalQuestions) {
307
+ nextBtn.classList.remove('hidden');
308
+ submitBtn.classList.add('hidden');
309
+ } else {
310
+ nextBtn.classList.add('hidden');
311
+ submitBtn.classList.remove('hidden');
312
+ }
313
+ }
314
+
315
+ // Validation
316
+ function validateQuestion(qNum) {
317
+ switch(qNum) {
318
+ case 1:
319
+ case 2:
320
+ return document.querySelector(`input[name="q${qNum}"]:checked`) !== null;
321
+ case 3:
322
+ return document.getElementById('q3-text').value.trim() !== '';
323
+ case 4:
324
+ return true; // Range always has a value
325
+ case 5:
326
+ return document.querySelector('.bg-green-200, .bg-yellow-200, .bg-red-200') !== null;
327
+ default:
328
+ return false;
329
+ }
330
+ }
331
+
332
+ // Recommendation selection
333
+ function selectRecommendation(choice) {
334
+ // Reset all buttons
335
+ document.querySelectorAll('#q5 button').forEach(btn => {
336
+ btn.classList.remove('bg-green-200', 'bg-yellow-200', 'bg-red-200');
337
+ btn.classList.add(
338
+ choice === 'yes' ? 'bg-green-100' :
339
+ choice === 'neutral' ? 'bg-yellow-100' : 'bg-red-100'
340
+ );
341
+ });
342
+
343
+ // Highlight selected button
344
+ const selectedBtn = document.querySelector(
345
+ choice === 'yes' ? '#q5 button.bg-green-100' :
346
+ choice === 'neutral' ? '#q5 button.bg-yellow-100' : '#q5 button.bg-red-100'
347
+ );
348
+
349
+ selectedBtn.classList.remove('bg-green-100', 'bg-yellow-100', 'bg-red-100');
350
+ selectedBtn.classList.add(
351
+ choice === 'yes' ? 'bg-green-200' :
352
+ choice === 'neutral' ? 'bg-yellow-200' : 'bg-red-200'
353
+ );
354
+ }
355
+
356
+ // XP and leveling
357
+ function addXP(amount) {
358
+ xp += amount;
359
+
360
+ // Check for level up
361
+ if (xp >= maxXP) {
362
+ level++;
363
+ xp = xp - maxXP;
364
+ maxXP = Math.floor(maxXP * 1.5);
365
+ levelDisplay.textContent = level;
366
+ maxXPDisplay.textContent = maxXP;
367
+ }
368
+
369
+ currentXPDisplay.textContent = xp;
370
+ updateXPBar();
371
+ }
372
+
373
+ function updateXPBar() {
374
+ const percentage = (xp / maxXP) * 100;
375
+ xpBar.style.setProperty('--progress', `${percentage}%`);
376
+ xpBar.classList.remove('progress-animate');
377
+ // Trigger reflow to restart animation
378
+ void xpBar.offsetWidth;
379
+ xpBar.classList.add('progress-animate');
380
+ }
381
+
382
+ // Survey completion
383
+ function completeSurvey() {
384
+ if (!validateQuestion(currentQuestion)) {
385
+ return;
386
+ }
387
+
388
+ // Award final XP
389
+ addXP(20);
390
+
391
+ // Unlock first badge
392
+ document.getElementById('feedbackExplorer').classList.remove('opacity-30');
393
+ document.getElementById('feedbackExplorer').querySelector('div').classList.remove('bg-gray-200');
394
+ document.getElementById('feedbackExplorer').querySelector('div').classList.add('bg-gradient-to-r', 'from-blue-400', 'to-cyan-400');
395
+ document.getElementById('feedbackExplorer').querySelector('i').classList.remove('text-gray-500');
396
+ document.getElementById('feedbackExplorer').querySelector('i').classList.add('text-white');
397
+
398
+ // Unlock Class Arbiter badge
399
+ document.getElementById('classArbiter').classList.remove('opacity-30');
400
+ document.getElementById('classArbiter').querySelector('div').classList.remove('bg-gray-200');
401
+ document.getElementById('classArbiter').querySelector('div').classList.add('bg-gradient-to-r', 'from-purple-400', 'to-indigo-500');
402
+ document.getElementById('classArbiter').querySelector('i').classList.remove('text-gray-500');
403
+ document.getElementById('classArbiter').querySelector('i').classList.add('text-white');
404
+
405
+ // Show completion modal
406
+ completionModal.classList.remove('hidden');
407
+ }
408
+
409
+ function closeModal() {
410
+ completionModal.classList.add('hidden');
411
+ }
412
+ </script>
413
+ <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=LukasBe/class-feedback-quest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
414
+ </html>