Build A Quiz App With JavaScript



In this video I will be breaking down the entire process of building a quiz application using JavaScript. We will also be styling the entire application using modern styling practices. This video will not only teach you how to build a quiz application, but it will breakdown the steps you need to take when building any project.

We will be using modern JavaScript best practices to create this application. We will also be using CSS variables to make changing our site on demand incredibly easy. By the end of this video you will have an entire quiz application built which can be easily extended and customized.

📚 Materials/References:

CSS Box Model Explained: https://youtu.be/rIO5326FgPE
GitHub Code: https://github.com/WebDevSimplified/JavaScript-Quiz-App
CodePen Code: https://codepen.io/WebDevSimplified/pen/xNvaaz

🧠 Concepts Covered:

– How to dynamically show/hide elements
– How to remove child elements
– Array randomization
– Who the best YouTuber is 😜
– CSS variables

🌎 Find Me Here:

Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified

#QuizApp #WDS #JavaScript

Original source

35 thoughts on “Build A Quiz App With JavaScript

  • April 10, 2020 at 07:32
    Permalink

    I won't allow commit of your javascript, no design pattern and architecture used, hard to maintain and extend your code here.

    Though you doing great in other videos

  • April 10, 2020 at 07:32
    Permalink

    Hey man thanks alot for the tutorial. I am a beginner and I don't really what to do since I don't have a strong computer however i have been going while watching you and my thing couldn't work since my PC is only 2 GB Ram and 32GB storage as well I don't have internet otherwise I do appreciate you what you do.

  • April 10, 2020 at 07:32
    Permalink

    Hey, great channel. You’ve helped so much! Could you possibly help with advice/video for adding a score and a database for this quiz?

    Thank you!

  • April 10, 2020 at 07:32
    Permalink

    Hey man, I really appreciate your efforts, thank you! Im having a little trouble ans as a beginner I am following without full understanding so I often encounter problems; normally due to simple typos but this time I dont know what Ive done wrong. I'm follow till around 20:13 and I go to test and I get an error in the console of the browser saying: "Uncaught TypeError: Cannot read property 'appendChild' of null". from what I gather it means the button is undefined but I cant see any difference in the code. If anyone has any suggestions please help.

  • April 10, 2020 at 07:32
    Permalink

    I keep looking at your face until I forget the lesson. Just kidding but you handsome is real , Thank you for this video

  • April 10, 2020 at 07:32
    Permalink

    Thanks a lot this was an astonishing tutorial. But, am wondering how can I let it to collect all the correct answers and project a result in the end. Like, if all answers are correct, it will show a text. But, if the all the chosen answers were wrong, it will show an other text. Can you please tell me?

  • April 10, 2020 at 07:32
    Permalink

    How did you get vs code to do the boilerplate with just the exclamation point and enter? Mine wont do that. I may have messed with the settings. Can anyone help?

  • April 10, 2020 at 07:32
    Permalink

    Thanks for the tutorial.
    For those who want to add the score counter try this…
    1. Declare a global variable (let countRightAnswers = 0;)
    2. At the bottom of the function called selectAnswer(e) add this:
    if (selectedButton.dataset = correct) {

    countRightAnswers++;
    // +1, change it if you need +10, +25 etc
    }

    3. At function startGame() add:
    countRightAnswers = 0; // to reset the counter after the test started
    4. Add something in .html like:
    <span id="right-answers"></span>
    5. in function function selectAnswer(e) at the bottom add this:
    document.getElementById('right-answers').innerHTML = countRightAnswers; // span will show the score

  • April 10, 2020 at 07:32
    Permalink

    Just curious about one thing in the JS, when you use the dataset property to create a boolean instead of a string, how would you display that as a score tracker?…i.e (1/5, 20/25, etc..)

  • April 10, 2020 at 07:32
    Permalink

    hey i am getting error in this line [–hue: var(–hue-neutral);] can you please guide me how to fix it. ERROR: EXPECTED REBRACEat line14, col 2. i am not getting proper output just because of this error.

  • April 10, 2020 at 07:32
    Permalink

    hay que tener mucho cuidado con ortografia… me salia error en element linea 14 y el error era bajo en la pregunta 2+2 escribi mal question me falto la s = questions

  • April 10, 2020 at 07:32
    Permalink

    I need help with disabling the group of buttons once the user makes a selection. Currently, the user can make as many selections as they want without any limitation. I've tried to disable the class assigned to the buttons after the selection was made but it either disabled the buttons altogether preventing any selection to be made or it simply didn't do anything at all and the user can still choose multiple answers per question.

Leave a Reply