I spent some time wondering how I could solve this. I knew I could make each question different objects and then make functions to do everything else.
I didn’t have to do much resource gathering other than that. I figured it was going to be pretty basic stuff so I could use MDN and Stackoverflow as I got stuck.
So. Objects for the questions.
A function to display the questions in the document.
A function for the answers.
A function to sum it all up when the quiz is finished.
To begin with I just made the headline and a div to display it all in.
Then I made the first question object and the function to display it with. It wasn’t that much of a hazzle to get it out one the document.
The problems came though. When I tried to verify the question. I had made each answer a key on the object and the value an array with the answer and a boolean.
I didn’t have much use for the boolean. I had to treat it like a string in the end. But I got it to work.
Then I had to work really hard to figure out how I could switch between the question objects. I ended up adding a select menu to manually choose the questions. Thereafter I spent hours debugging the code. Looking at it. Not knwing what was going on. Why it wouldn’t work.
Just moments before I started bothering the good people on Stackoverflow I saw it. = instead of === inside the if statement. #newbiecoderslife
- Used this from stackoverflow to remove the question option when the question was selected.
- Remove the button and the entire select menu when finished is fired.