Hugging Face's logo

Spaces:
Hawkwind
/
quick-mbti-test
Running

App Files Community
Hawkwind commited on
Commit
80a3ad7
·
verified ·
1 Parent(s): ff70fc0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +292 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Quick Mbti Test
3
- emoji: 🏆
4
- colorFrom: gray
5
  colorTo: purple
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: quick-mbti-test
3
+ emoji: 🐳
4
+ colorFrom: green
5
  colorTo: purple
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,292 @@
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>Quick MBTI Personality Test</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
+ .question-card {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .question-card:hover {
14
+ transform: translateY(-3px);
15
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
16
+ }
17
+ .option-btn {
18
+ transition: all 0.2s ease;
19
+ }
20
+ .option-btn:hover:not(.selected) {
21
+ background-color: #f3f4f6;
22
+ }
23
+ .selected {
24
+ background-color: #3b82f6;
25
+ color: white;
26
+ }
27
+ .progress-bar {
28
+ transition: width 0.5s ease;
29
+ }
30
+ .fade-in {
31
+ animation: fadeIn 0.5s;
32
+ }
33
+ @keyframes fadeIn {
34
+ from { opacity: 0; }
35
+ to { opacity: 1; }
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="bg-gray-50 min-h-screen font-sans">
40
+ <div class="container mx-auto px-4 py-8 max-w-3xl">
41
+ <!-- Header -->
42
+ <header class="text-center mb-8">
43
+ <h1 class="text-4xl font-bold text-indigo-700 mb-2">Quick MBTI Test</h1>
44
+ <p class="text-gray-600">Discover your personality type in just 20 questions</p>
45
+ <div class="mt-4 p-4 bg-yellow-50 border-l-4 border-yellow-400 text-yellow-700 rounded">
46
+ <p><i class="fas fa-exclamation-circle mr-2"></i> <strong>Note:</strong> This is a simplified version with only 20 questions. Results might not be as accurate as a full assessment.</p>
47
+ </div>
48
+ </header>
49
+
50
+ <!-- Test Container -->
51
+ <div id="test-container" class="bg-white rounded-xl shadow-md overflow-hidden">
52
+ <!-- Progress Bar -->
53
+ <div class="bg-gray-200 h-2">
54
+ <div id="progress-bar" class="progress-bar bg-indigo-600 h-2" style="width: 0%"></div>
55
+ </div>
56
+
57
+ <!-- Welcome Screen -->
58
+ <div id="welcome-screen" class="p-8 text-center fade-in">
59
+ <div class="mb-6">
60
+ <i class="fas fa-brain text-6xl text-indigo-500 mb-4"></i>
61
+ <h2 class="text-2xl font-semibold text-gray-800 mb-2">Welcome to the MBTI Quick Test</h2>
62
+ <p class="text-gray-600 mb-4">This test will help you identify your Myers-Briggs personality type based on 20 carefully selected questions.</p>
63
+ <p class="text-gray-600 mb-6">Answer honestly based on your natural preferences, not how you think you should respond.</p>
64
+ </div>
65
+ <button id="start-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
66
+ Start Test <i class="fas fa-arrow-right ml-2"></i>
67
+ </button>
68
+ </div>
69
+
70
+ <!-- Question Screen (initially hidden) -->
71
+ <div id="question-screen" class="hidden p-6">
72
+ <div id="question-container" class="question-card bg-white rounded-lg p-6 mb-6 border border-gray-200">
73
+ <div class="flex justify-between items-center mb-4">
74
+ <span id="question-number" class="text-sm font-medium text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full">Question 1 of 20</span>
75
+ <span id="dimension" class="text-sm font-medium text-gray-500">E/I</span>
76
+ </div>
77
+ <h3 id="question-text" class="text-xl font-medium text-gray-800 mb-6">How would you describe yourself in social situations?</h3>
78
+
79
+ <div class="space-y-3">
80
+ <button class="option-btn w-full text-left p-4 rounded-lg border border-gray-200">
81
+ <span class="font-medium">I enjoy being around people and find social interactions energizing</span>
82
+ </button>
83
+ <button class="option-btn w-full text-left p-4 rounded-lg border border-gray-200">
84
+ <span class="font-medium">I prefer one-on-one interactions or small groups, and need alone time to recharge</span>
85
+ </button>
86
+ </div>
87
+ </div>
88
+
89
+ <div class="flex justify-between">
90
+ <button id="prev-btn" class="text-indigo-600 font-medium py-2 px-4 rounded hover:bg-indigo-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
91
+ <i class="fas fa-arrow-left mr-2"></i> Previous
92
+ </button>
93
+ <button id="next-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded disabled:opacity-50 disabled:cursor-not-allowed" disabled>
94
+ Next <i class="fas fa-arrow-right ml-2"></i>
95
+ </button>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Results Screen (initially hidden) -->
100
+ <div id="results-screen" class="hidden p-8 text-center">
101
+ <div class="mb-8">
102
+ <i class="fas fa-chart-pie text-6xl text-indigo-500 mb-4"></i>
103
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Your MBTI Type</h2>
104
+ <div id="mbti-type" class="text-5xl font-bold text-indigo-600 my-6 tracking-wider">XXXX</div>
105
+
106
+ <div id="type-description" class="bg-gray-50 p-6 rounded-lg text-left text-gray-700 mb-6">
107
+ <p class="mb-4">Your description will appear here. Based on your answers, this section will explain the key characteristics of your personality type.</p>
108
+ <p>Remember that this is a simplified test with only 20 questions, so the results might not be completely accurate. For a more precise assessment, consider taking a full-length MBTI test.</p>
109
+ </div>
110
+
111
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
112
+ <div class="dimension-score p-4 rounded-lg border">
113
+ <div class="text-sm font-medium text-gray-500 mb-2">Extraversion (E) / Introversion (I)</div>
114
+ <div class="flex justify-between items-center">
115
+ <span class="font-bold">E</span>
116
+ <div class="w-full mx-2 bg-gray-200 rounded-full h-2.5">
117
+ <div id="ei-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 50%"></div>
118
+ </div>
119
+ <span class="font-bold">I</span>
120
+ </div>
121
+ <div id="ei-score" class="text-xs text-gray-500 mt-1">50% / 50%</div>
122
+ </div>
123
+
124
+ <div class="dimension-score p-4 rounded-lg border">
125
+ <div class="text-sm font-medium text-gray-500 mb-2">Sensing (S) / Intuition (N)</div>
126
+ <div class="flex justify-between items-center">
127
+ <span class="font-bold">S</span>
128
+ <div class="w-full mx-2 bg-gray-200 rounded-full h-2.5">
129
+ <div id="sn-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 50%"></div>
130
+ </div>
131
+ <span class="font-bold">N</span>
132
+ </div>
133
+ <div id="sn-score" class="text-xs text-gray-500 mt-1">50% / 50%</div>
134
+ </div>
135
+
136
+ <div class="dimension-score p-4 rounded-lg border">
137
+ <div class="text-sm font-medium text-gray-500 mb-2">Thinking (T) / Feeling (F)</div>
138
+ <div class="flex justify-between items-center">
139
+ <span class="font-bold">T</span>
140
+ <div class="w-full mx-2 bg-gray-200 rounded-full h-2.5">
141
+ <div id="tf-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 50%"></div>
142
+ </div>
143
+ <span class="font-bold">F</span>
144
+ </div>
145
+ <div id="tf-score" class="text-xs text-gray-500 mt-1">50% / 50%</div>
146
+ </div>
147
+
148
+ <div class="dimension-score p-4 rounded-lg border">
149
+ <div class="text-sm font-medium text-gray-500 mb-2">Judging (J) / Perceiving (P)</div>
150
+ <div class="flex justify-between items-center">
151
+ <span class="font-bold">J</span>
152
+ <div class="w-full mx-2 bg-gray-200 rounded-full h-2.5">
153
+ <div id="jp-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 50%"></div>
154
+ </div>
155
+ <span class="font-bold">P</span>
156
+ </div>
157
+ <div id="jp-score" class="text-xs text-gray-500 mt-1">50% / 50%</div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <button id="retake-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-6 rounded-full mr-4 transition duration-300">
163
+ <i class="fas fa-redo mr-2"></i> Retake Test
164
+ </button>
165
+ <button id="learn-more-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
166
+ Learn More <i class="fas fa-external-link-alt ml-2"></i>
167
+ </button>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Footer -->
172
+ <footer class="mt-12 text-center text-gray-500 text-sm">
173
+ <p>This test is based on the Myers-Briggs Type Indicator (MBTI) framework.</p>
174
+ <p class="mt-1">For educational purposes only. Not a diagnostic tool.</p>
175
+ </footer>
176
+ </div>
177
+
178
+ <script>
179
+ // Questions data
180
+ const questions = [
181
+ {
182
+ dimension: "E/I",
183
+ question: "How would you describe yourself in social situations?",
184
+ options: [
185
+ "I enjoy being around people and find social interactions energizing",
186
+ "I prefer one-on-one interactions or small groups, and need alone time to recharge"
187
+ ],
188
+ weights: [1, -1] // E vs I
189
+ },
190
+ {
191
+ dimension: "S/N",
192
+ question: "When learning something new, you tend to:",
193
+ options: [
194
+ "Focus on concrete facts and practical applications",
195
+ "Look for patterns, possibilities, and underlying meanings"
196
+ ],
197
+ weights: [1, -1] // S vs N
198
+ },
199
+ {
200
+ dimension: "T/F",
201
+ question: "When making decisions, you're more likely to:",
202
+ options: [
203
+ "Consider logical consequences and objective analysis",
204
+ "Consider personal values and how it affects others"
205
+ ],
206
+ weights: [1, -1] // T vs F
207
+ },
208
+ {
209
+ dimension: "J/P",
210
+ question: "In your daily life, you prefer to:",
211
+ options: [
212
+ "Have things planned and settled",
213
+ "Keep your options open and be flexible"
214
+ ],
215
+ weights: [1, -1] // J vs P
216
+ },
217
+ {
218
+ dimension: "E/I",
219
+ question: "After a long week, you'd rather:",
220
+ options: [
221
+ "Go out with friends or attend a social event",
222
+ "Stay in with a good book, movie, or hobby"
223
+ ],
224
+ weights: [1, -1] // E vs I
225
+ },
226
+ {
227
+ dimension: "S/N",
228
+ question: "You're more interested in:",
229
+ options: [
230
+ "What is actual, present, current, and real",
231
+ "What is possible, future, potential, and imagined"
232
+ ],
233
+ weights: [1, -1] // S vs N
234
+ },
235
+ {
236
+ dimension: "T/F",
237
+ question: "When someone is upset, you're more likely to:",
238
+ options: [
239
+ "Try to solve their problem or analyze the situation",
240
+ "Focus on understanding their feelings and offering comfort"
241
+ ],
242
+ weights: [1, -1] // T vs F
243
+ },
244
+ {
245
+ dimension: "J/P",
246
+ question: "When working on a project, you:",
247
+ options: [
248
+ "Like to have a clear plan and follow it",
249
+ "Prefer to keep things flexible and adapt as you go"
250
+ ],
251
+ weights: [1, -1] // J vs P
252
+ },
253
+ {
254
+ dimension: "E/I",
255
+ question: "In conversations, you usually:",
256
+ options: [
257
+ "Think out loud and process ideas by talking",
258
+ "Think things through before speaking"
259
+ ],
260
+ weights: [1, -1] // E vs I
261
+ },
262
+ {
263
+ dimension: "S/N",
264
+ question: "You tend to trust information that is:",
265
+ options: [
266
+ "Concrete, specific, and based on experience",
267
+ "Theoretical, abstract, and based on insights"
268
+ ],
269
+ weights: [1, -1] // S vs N
270
+ },
271
+ {
272
+ dimension: "T/F",
273
+ question: "When evaluating an idea, what's more important?",
274
+ options: [
275
+ "Whether it makes logical sense",
276
+ "Whether it aligns with important values"
277
+ ],
278
+ weights: [1, -1] // T vs F
279
+ },
280
+ {
281
+ dimension: "J/P",
282
+ question: "You feel more comfortable when:",
283
+ options: [
284
+ "Decisions are made and things are settled",
285
+ "Options are open for last-minute changes"
286
+ ],
287
+ weights: [1, -1] // J vs P
288
+ },
289
+ {
290
+ dimension: "E/I",
291
+ question: "At a party, you're
292
+ </html>