JavaScript Quiz Project

Hosted Project

JavaScript Quiz Project (Hosted on Github Pages)

Source Files

https://github.com/JS-Beginnershttps://github.com/JS-Beginners/interactive-quiz-project/interactive-quiz-project (Hosted on Github)

Project Objective

This JavaScript quiz project challenges you to code the functionality of a quiz. At the end of the quiz, your users should get a total score.

JavaScript Used

• eventListeners
• arrays
• functions
• DOM manipulation
• forEach loop
• for loops

My Personalize Summary

Ok.

So the instructor coded his JavaScript solution using jQuery.

I could have swore I purchased a core JavaScript, no-library or framework course.

But, I didn't let this stop me.

I actually used the minimize jQuery skills that I had to actually “reverse-engineer” a core JavaScript only solution.

I was pretty excited when I finally got my JavaScript quiz working.

I worked on the JavaScript file for about two hours last night, researching the functionality of jQuery's functions so I can turn them into vanilla JavaScript.

After an exhaustive night of research and coding, I went to bed and finished the project the next day after I returned from work.

Again. I was pretty excited at what I accomplished and I know you can do the same.

New Things Learned or Refreshed

Like I said in the summary above, the first thing that I learned was how to reverse-engineer jQuery to create the same thing in core JavaScript.

I did this by reading the jQuery documentation that explained a function, and then linked it to my knowledge of JavaScript.

Sometimes the jQuery docs made it easy by simply explaining the core JavaScript equivalent, but other times they did not.

The second thing I learned was debugger; is your best friend when it come to getting your code to work.

It is much more efficient than putting a bunch of console.logs() all over your code.

If you put your debugger in the right location of your file, once it is triggered in your browser, you can quickly see which variables have which values.

In one case, I was wondering why an if statement wasn't running.

It turned out that the debugger showed me that I was trying to compare “1” with 1.

No.

A string is not equal to a number when using (===) triple equal.

The third thing I learned, or rather was refreshed on, was that patience is key when it comes to programming.

I took me about an hour in total to methodically debug three different functions.

But, I got it done.

And now my quiz functions like a charm. 👌

Time to Code

This project took me about four hours to complete on my own.

I spent two hours one night and finished using another two hours the next day.

Your Turn!

What To Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript Quiz Project in action.

Need to see the video solution for this project?

Need to see the video solution for this project? Get Bluelime's JavaScript for Beginners: Create 27 Projects from Scratch Course Now!