D4mations.com

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

d4mer

, , , , , , , , , ,

35 responses to “Build A Quiz App With JavaScript”

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

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

  12. 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?

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

  15. 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..)

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

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