Okay. So this is project 8 and by far the most challenging I’ve done on my own. But I did it. In less then a day. A very simple, very little usable, javascript quiz app. It has questions.. and answers.. and points. I’m so happy and proud, it’s a little bit embarrassing.

Anyways. I haven’t done something like this without some sort of guidance. I know, it’s not really that complicated. In fact most of the javascript is very straight forward. But I don’t care. I rock!

Prepare

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.

Time for a javascript quiz app!

Plan

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.

Perform

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

SS of the javacript quiz

Perfect

  • 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.

 

To the project!