Quiz web app - help me!

I’ve got a problem with my quiz. I create a global object for whole content to dynamically load in DOM using JavaScript (questions and answers). I need to get every user’s tag from an answer and store it somewhere (I used just array because later I’ll use it to create a unique URL with filters (user’s tags). I also need to add step ids for every question and answer because the quiz will not be linear, so I need to move from one question to another and have the possibility to back to the last one.

Sadly when I dynamically load the content I don’t know how to leave radios and checkboxes checked, so when a user clicks the back button it is necessary to pick an answer again.

Here we have the problems. First of all:

  • I used Array.pop() method to get the last question from the array storing all selected questions. But (I don’t know why) you have to click twice on the button to get a step back.
  • I used an array to store tags so I need to remove all tags from the last question every time a user clicks the back button (I tried to use the filter method on an array). If there is the possibility to leave radios and checkbox states it would be great, but then I need to replace tags in an array anyway to update tags when a user clicks the back button and change the answer.

It’s working when picking an answer and clicking the next button, but there is only a problem with the previous button. I know that code isn’t perfect but I’m a beginner when it comes to coding that stuff, so I ask you to help me. Please modify my code or explain to me in detail what to do.

Here is the codepen link: https://codepen.io/Lynthius/pen/poLdvGe?editors=0011

Forgive me for my poor english, but it is very important to resolve it.

you can change the checked state with the checked property, if your html node is in a variable called checkboxElement you can change its checked state with checkboxElement = true and checkboxElement = false (also for radios)

you should also link your labels and inputs together so I can click on the text instead on just the button

it’s a bit difficult to follow your logic, can you explain more in detail what the code you need help with does?

Thanks, I will improve it with checkbox states :slight_smile: By the way i update my code a little bit.

But still I need to somehow add the back to previous question logic. If you click on the prev button then you noticed you have to do it twice. I use here array.pop() method to get the last stored question from the array (step id). I have two problems here:

  • manage tags from array depends on user choices (and when a user click the prev btn and edit his previous pick)
  • create a working prev btn logic, where a user click once and get the previous question (you can see that every question object have step id, because when you pick some answer then you can go to different questions. So question and answers have that step id)

Could you fork my code and try to add some working logic to that “back to prev question btn”?

Thanks for helping me anyway!

no, the point of this forum is to help you arrive at your solution, not serve you the solution

can you describe what would be the ideal behavior here? what should be saved when an user click next, what should stay and what should not stay when a user click next?

Yes, sure. Users have to pick one or few answers (depend on it - it’s radio or checkbox), and I want to grab the tag or tags from picked answers and store it somewhere. On the last view, a user gets a few products (only products from a shop with tags equal to stored tags from a user’s choices).

But, every answer affects what will be the next question (so I need to also store somehow what was the last question id on which user answered).

So I need picked tags, but like I said when you prev to the last question and change your picked answer then I need to edit that stored tags to the new one.

I think I fixed it:

Thanks for the help.