Skip to content

Commit 9a73814

Browse files
ariel-frischerariel-frischer
committed
feat: enhance MBTI and language question handling with new answer checks and auto-advance logic
The changes introduce checks to ensure that answers are only recorded if they are new, preventing overwriting previous answers. Additionally, the auto-advance feature is now conditional, allowing for smoother transitions between questions while ensuring that rapid clicks do not disrupt the flow of the quiz. This improves user experience by making the quiz more intuitive and responsive. style: adjust main layout alignment and padding for better visual consistency The main layout's alignment and padding are modified to center the content vertically, enhancing the overall appearance and usability of the interface. This change aims to create a more balanced and visually appealing layout for users. feat(tests): add comprehensive language paths mapping and tests for adaptive questions docs(tests): create summary documentation for language paths and quiz insights build(tests): include language paths map in the project and exclude test files from compilation The commit introduces a new JSON file that maps programming languages to their corresponding MBTI types and optimal paths based on adaptive questions. It also adds a comprehensive test suite to validate the mapping and ensure all languages are reachable through the quiz. Additionally, a summary document is created to provide insights into the quiz's functionality and results. The TypeScript configuration is updated to exclude test files from compilation, improving build efficiency.
1 parent 6442297 commit 9a73814

File tree

12 files changed

+2793
-1040
lines changed

12 files changed

+2793
-1040
lines changed

‎src/app.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ body {
5757
min-height: 100vh;
5858
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
5959
background: var(--gradient-background);
60+
background-attachment: fixed;
6061
color: var(--color-text-primary);
6162
line-height: 1.6;
6263
}

‎src/lib/components/LanguageQuestion.svelte‎

Lines changed: 78 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -117,16 +117,24 @@
117117
118118
.question-text {
119119
font-size: 1.5rem;
120-
margin-bottom: 2rem;
120+
margin-bottom: 0;
121121
text-align: center;
122122
color: var(--color-text-primary);
123+
min-height: 6.75rem; /* 108px - Accommodate up to 3 lines */
124+
display: flex;
125+
align-items: center;
126+
justify-content: center;
127+
line-height: 1.5;
128+
padding: 0 0.5rem;
123129
}
124130
125131
.quiz-content {
126132
display: flex;
127-
align-items: center;
133+
align-items: flex-start;
128134
gap: 2rem;
129-
min-height: 300px;
135+
min-height: 400px;
136+
height: 400px;
137+
padding-top: 2.5rem;
130138
}
131139
132140
.nav-button {
@@ -142,6 +150,8 @@
142150
align-items: center;
143151
justify-content: center;
144152
flex-shrink: 0;
153+
margin-top: 4rem;
154+
align-self: flex-start;
145155
}
146156
147157
.nav-button:hover:not(:disabled) {
@@ -156,11 +166,13 @@
156166
}
157167
158168
.answers {
159-
display: flex;
160-
flex-direction: column;
161-
gap: 1rem;
169+
display: grid;
170+
grid-template-columns: 1fr;
171+
grid-template-rows: repeat(10, minmax(104px, auto));
172+
gap: 0.75rem;
162173
flex: 1;
163174
min-width: 0;
175+
align-content: start;
164176
}
165177
166178
.answer-button {
@@ -176,6 +188,48 @@
176188
display: flex;
177189
justify-content: space-between;
178190
align-items: center;
191+
min-height: 104px;
192+
height: 100%;
193+
white-space: normal;
194+
word-wrap: break-word;
195+
line-height: 1.4;
196+
}
197+
198+
/* Dynamically adjust grid rows based on number of answers */
199+
.answers:has(.answer-button:nth-child(2):last-child) {
200+
grid-template-rows: repeat(2, minmax(104px, 1fr));
201+
}
202+
203+
.answers:has(.answer-button:nth-child(3):last-child) {
204+
grid-template-rows: repeat(3, minmax(104px, 1fr));
205+
}
206+
207+
.answers:has(.answer-button:nth-child(4):last-child) {
208+
grid-template-rows: repeat(4, minmax(104px, 1fr));
209+
}
210+
211+
.answers:has(.answer-button:nth-child(5):last-child) {
212+
grid-template-rows: repeat(5, minmax(104px, 1fr));
213+
}
214+
215+
.answers:has(.answer-button:nth-child(6):last-child) {
216+
grid-template-rows: repeat(6, minmax(104px, 1fr));
217+
}
218+
219+
.answers:has(.answer-button:nth-child(7):last-child) {
220+
grid-template-rows: repeat(7, minmax(104px, 1fr));
221+
}
222+
223+
.answers:has(.answer-button:nth-child(8):last-child) {
224+
grid-template-rows: repeat(8, minmax(104px, 1fr));
225+
}
226+
227+
.answers:has(.answer-button:nth-child(9):last-child) {
228+
grid-template-rows: repeat(9, minmax(104px, 1fr));
229+
}
230+
231+
.answers:has(.answer-button:nth-child(10):last-child) {
232+
grid-template-rows: repeat(10, minmax(104px, 1fr));
179233
}
180234
181235
.answer-button:hover {
@@ -222,13 +276,30 @@
222276
@media (max-width: 768px) {
223277
.quiz-content {
224278
gap: 1rem;
225-
min-height: 250px;
279+
min-height: 350px;
280+
height: 350px;
281+
padding-top: 1.5rem;
226282
}
227283
228284
.nav-button {
229285
width: 40px;
230286
height: 40px;
231287
font-size: 1.2rem;
288+
margin-top: 3rem;
289+
}
290+
291+
.question-text {
292+
font-size: 1.25rem;
293+
min-height: 5.5rem;
294+
}
295+
296+
.answers {
297+
gap: 0.5rem;
298+
}
299+
300+
.answer-button {
301+
padding: 0.75rem 1rem;
302+
font-size: 0.95rem;
232303
}
233304
}
234305
</style>

‎src/lib/components/MBTIQuestion.svelte‎

Lines changed: 78 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -117,16 +117,24 @@
117117
118118
.question-text {
119119
font-size: 1.5rem;
120-
margin-bottom: 2rem;
120+
margin-bottom: 0;
121121
text-align: center;
122122
color: var(--color-text-primary);
123+
min-height: 6.75rem; /* 108px - Accommodate up to 3 lines */
124+
display: flex;
125+
align-items: center;
126+
justify-content: center;
127+
line-height: 1.5;
128+
padding: 0 0.5rem;
123129
}
124130
125131
.quiz-content {
126132
display: flex;
127-
align-items: center;
133+
align-items: flex-start;
128134
gap: 2rem;
129-
min-height: 300px;
135+
min-height: 400px;
136+
height: 400px;
137+
padding-top: 2.5rem;
130138
}
131139
132140
.nav-button {
@@ -142,6 +150,8 @@
142150
align-items: center;
143151
justify-content: center;
144152
flex-shrink: 0;
153+
margin-top: 4rem;
154+
align-self: flex-start;
145155
}
146156
147157
.nav-button:hover:not(:disabled) {
@@ -156,11 +166,13 @@
156166
}
157167
158168
.answers {
159-
display: flex;
160-
flex-direction: column;
161-
gap: 1rem;
169+
display: grid;
170+
grid-template-columns: 1fr;
171+
grid-template-rows: repeat(10, minmax(104px, auto));
172+
gap: 0.75rem;
162173
flex: 1;
163174
min-width: 0;
175+
align-content: start;
164176
}
165177
166178
.answer-button {
@@ -176,6 +188,48 @@
176188
display: flex;
177189
justify-content: space-between;
178190
align-items: center;
191+
min-height: 104px;
192+
height: 100%;
193+
white-space: normal;
194+
word-wrap: break-word;
195+
line-height: 1.4;
196+
}
197+
198+
/* Dynamically adjust grid rows based on number of answers */
199+
.answers:has(.answer-button:nth-child(2):last-child) {
200+
grid-template-rows: repeat(2, minmax(104px, 1fr));
201+
}
202+
203+
.answers:has(.answer-button:nth-child(3):last-child) {
204+
grid-template-rows: repeat(3, minmax(104px, 1fr));
205+
}
206+
207+
.answers:has(.answer-button:nth-child(4):last-child) {
208+
grid-template-rows: repeat(4, minmax(104px, 1fr));
209+
}
210+
211+
.answers:has(.answer-button:nth-child(5):last-child) {
212+
grid-template-rows: repeat(5, minmax(104px, 1fr));
213+
}
214+
215+
.answers:has(.answer-button:nth-child(6):last-child) {
216+
grid-template-rows: repeat(6, minmax(104px, 1fr));
217+
}
218+
219+
.answers:has(.answer-button:nth-child(7):last-child) {
220+
grid-template-rows: repeat(7, minmax(104px, 1fr));
221+
}
222+
223+
.answers:has(.answer-button:nth-child(8):last-child) {
224+
grid-template-rows: repeat(8, minmax(104px, 1fr));
225+
}
226+
227+
.answers:has(.answer-button:nth-child(9):last-child) {
228+
grid-template-rows: repeat(9, minmax(104px, 1fr));
229+
}
230+
231+
.answers:has(.answer-button:nth-child(10):last-child) {
232+
grid-template-rows: repeat(10, minmax(104px, 1fr));
179233
}
180234
181235
.answer-button:hover {
@@ -222,13 +276,30 @@
222276
@media (max-width: 768px) {
223277
.quiz-content {
224278
gap: 1rem;
225-
min-height: 250px;
279+
min-height: 350px;
280+
height: 350px;
281+
padding-top: 1.5rem;
226282
}
227283
228284
.nav-button {
229285
width: 40px;
230286
height: 40px;
231287
font-size: 1.2rem;
288+
margin-top: 3rem;
289+
}
290+
291+
.question-text {
292+
font-size: 1.25rem;
293+
min-height: 5.5rem;
294+
}
295+
296+
.answers {
297+
gap: 0.5rem;
298+
}
299+
300+
.answer-button {
301+
padding: 0.75rem 1rem;
302+
font-size: 0.95rem;
232303
}
233304
}
234305
</style>

‎src/lib/components/Results.svelte‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import type { Language } from '$lib/types/quiz';
33
import { generateShareUrl, getShareText, shareLinks, copyToClipboard } from '$lib/utils/sharing';
44
import { quizStore } from '$lib/stores/quiz';
5+
import { mbtiDescriptions, type MBTIType } from '$lib/data/mbti-descriptions';
56
67
export let language: Language;
78
export let onRestart: () => void;
@@ -46,6 +47,10 @@
4647
</div>
4748
</div>
4849

50+
{#if $quizStore.mbtiType && mbtiDescriptions[$quizStore.mbtiType as MBTIType]}
51+
<p class="mbti-description">{mbtiDescriptions[$quizStore.mbtiType as MBTIType]}</p>
52+
{/if}
53+
4954
<p class="personality">{language.personality}</p>
5055

5156
<div class="description">
@@ -220,6 +225,16 @@
220225
font-weight: 600;
221226
}
222227
228+
.mbti-description {
229+
font-size: 1rem;
230+
color: var(--color-text-secondary);
231+
margin-bottom: 1rem;
232+
line-height: 1.5;
233+
padding: 1rem;
234+
background: var(--color-bg-secondary, rgba(0, 0, 0, 0.03));
235+
border-radius: 8px;
236+
}
237+
223238
.personality {
224239
font-size: 1.1rem;
225240
color: var(--color-text-secondary);

0 commit comments

Comments
 (0)