The scoring engine is a lightweight, pure JavaScript function. As the user selects answers, the engine mutates an in-memory vector representing the scoring dimensions.
For the MBTI test, it calculates the raw coordinate offsets across the four dichotomies (E/I, S/N, T/F, J/P). For the IQ test, it matches the cumulative correct answers against a statically loaded age-based standard deviation matrix to output a normalized percentile score instantly.
The Challenge of Shareable Results Without a Database
If there is no database storing the results, how can a user share their unique score page with a friend?
I solved this by using high-entropy URL state encoding. When a user completes a test, the scoring engine compiles their performance vector, compresses it using a lightweight LZW compression algorithm, and serializes it into a Base64-like URL token:
https://quizvex.com/results/mbti?data=e30xNDIsLTEyLDM0fQ==
When the /results route loads, the client-side router decompresses the token, hydrates the state vector, and renders the custom SVG charts on the fly. No read queries, no database latency, and absolute privacy for the user.
Keeping CLS at Absolute Zero
Because quizzes involve constant DOM updates as users transition from question to question, Cumulative Layout Shift (CLS) was a major concern. To prevent layout jumps, the question container uses a fixed-aspect-ratio CSS Grid container with hardware-accelerated CSS transitions for slide-in animations. This guarantees a smooth 60fps experience even on low-end mobile devices.
Iād love to hear your thoughts on this stateless approach. How do you handle complex scoring algorithms without bloating your backend? Let's discuss in the comments!
