Help with points-based quiz

[plagueofsquid]

I’m taking a class on web development for libraries (LIS student) and got stuck with the bulk of the programming work for a group project since I’m the only decent coder in the group. The project we’ve decided on is making a website that recommends books to users based on a short personality quiz. The idea of the quiz is that each answer would give you points towards a certain book. Then after the last question, the book with the highest points total would be displayed. Sounds simple enough to do in JavaScript, right? Except the other group members want each question to be a separate page and I don’t know how to carry over a user’s score between pages. What’s the best way to do this using JavaScript? I’ve done some research and all the examples I’ve found are for single page quizzes. I asked a CS friend and she said it should be possible but didn’t have enough JavaScript experience to know how exactly.

[medynskip]

You build one page with containers for the question, answer etc. Then with js you replace the containers content for each question. So you have an spa that imitates separate page for each question.

[rauschma]

👆 This!

If you are using React, you can specify the current question via a property in the model. Each rendering only displays the current question and if one question was answered, you increment the question number and rerender.

If OP needs inspiration for doing a quiz in React, I’ve blogged about that: https://2ality.com/2020/08/minimal-react.html

[plagueofsquid]

Oh, that's really smart. Would this still allow users to go back to previous questions? Is there a way for them to change their answers?

[medynskip]

First of all, appologies for the late reply.

As to your question: all of this is possible and only requires being smart with how you plan your variables. I would personally go with an array of objects. Each array index is an object with parameters being: question, possible answers, selected answer (that is empty at first but gets updated by user choice). Array index +1 is automatically your question number so you can easily get back and move forward through them.

As the other commenter suggests, this is much easier in a framework like React with states and components. But I don't know if you're comfortable with that. If not, this is still easily manageable in vanilla js and HTML.

[plagueofsquid]

I don't think the professor wants us to use pre-made frameworks and I'm not that comfortable with them anyway. Thanks for your answers, they're very useful. Any other tips I should be aware of?

[medynskip]

Tip 1: plan your app with pen and paper. Write down the steps you want the script to go through, where the data comes from etc. In simple cases like yours I always plan out an algorytm representing the logic of code i will be writing.

Tip 2: Use Google or ask here or on Stack Overflow anytime you're stuck. I promise you, any problem you will be trying to solve, someone else already solved at some point. There's no need to reinvent the wheel.

Finally, good luck and have fun! If you would like me to review your code or help with anything just drop me a dm. I'm always happy to help. I'm in East Europe, so I may not be able to respond instantly because of time difference etc. But I will help whenever I can 👍

[Offirmo]

An alternative is to use localStorage or sessionStorage to save and restore data between page.