How To Make Quiz App Using JavaScript | Build Quiz App With HTML CSS & JavaScript

hi guys this is Avinash and you are welcome to my another video in this video we will create a very useful JavaScript project which is simple quiz app you can create this quiz app or website with the help of HTML CSS and JavaScript let's see how this quiz app works you can see this question here then we have four options if I select the wrong answer you can see it will become red and the correct answer will become green and now we cannot change our selection now we will click on the next button and if I select the another option let's select this one and if it is correct then it will be highlighted with the green color and now we cannot click another option we have to click next and here if we will click on this one if it is correct it will become green and let's click on the next one and now we will select any wrong answer so you can see it is displaying the red color and the correct answer is highlighted with the green color I have added only four questions here if I click on the next button you can see it will display our score us code two out of four because we have given only two correct answers let's click on this button play again and if I select the correct answer and again this one this and this one and click on the next you can see it is giving the correct score which is 4 out of four we will create this quiz app using HTML CSS and JavaScript and I will explain you step by step if this project is helpful for you please hit the like button and also share this video with your friends and don't forget to subscribe my channel easy tutorials now let's start this tutorial to create the JavaScript quiz app here in this folder I have one HTML file one CSS file and let me open these files with my code editor which is Visual Studio code you can use any code editor if you don't know how to create the HTML and CSS file I will add the video link in the description this is the HTML file where I have added the basic HTML structure and this one is the CSS file where I have added the margin padding font family and box sizing these CSS properties are applicable for all the HTML element in this HTML file I have added this link tag with the file name style.css so it will connect the HTML and CSS file and here we have the title quiz app easy tutorials next in this body tag we will add one div with the class name app next we will add the CSS so come to the CSS file and here first we will add the dark color on the complete web page so we will add body tag and for this body let's add one background here we will add one color code and next we will add the CSS for the app so just copy this one add it here in this CSS file with the dot because it is a class name here we will add background so the background will be white after that we will add the width 90 percent and maximum width will be 600 pixel then we will add the margin 100 pixel from top left right Auto and 0 from the bottom then border radius so the Border radius will be 10 pixel so the corners will be round by 10 pixel after that we will add the padding of 30 pixel that will be space inside the box after writing this let's come back to the folder and open this HTML file with any web browser so you can see this color on the complete web page and here we have the box in the white color I will close this browser and I will open this browser with the visual studio code extension called live server so that it will refresh the web page automatically whenever we will add any changes in the code file so you can see the same web page again but the URL has been changed after that let's come back and within this app we have to add one title so here we'll add one title in H1 simple quiz and after that we will add one another div with the class name quiz and within this we will add one question in S2 so let's add the S2 and here we will add one ID so the ID is question and let's add any text here so we will add question goes here like this and now you can see this text simple question and question goes here after that we will add some options for the particular question so here we will add one div with the ID answer buttons and within this answer buttons we will add four buttons so let's create the first one and in this one we will add the class name BTN and here we will add the answers so let's add the text answer 1. now we will duplicate this button and we will change the text to 3 and 4. and the class name is same after adding this you can see four buttons here after this question answer one two three four next we have to design this using CSS so let's come back and here we have the class name quiz so just copy this one and come to the CSS file before this quiz we have the text in H1 so we will add the CSS for that text so let's add dot app and H1 where we have added the text so for this one we will increase the font size then we will change the color font weight and border bottom then we will add the padding at the bottom now you can see this line here after this text after that we will add that class name quiz and for this quiz we will add the padding it will be 20 pixel and zero after that in this quiz also we have text which is the question in H2 so here we will add dot quiz and H2 so for this question we will add font size so the font size will be 18 pixel then we will change the color and font weight and here we have added font weight it will be font size font size 25 pixel now it is good next we will Design these buttons which is answer button so for this button we have added the class name vtn so come to the CSS file here we will add the CSS for BTN so for this button we will add the background so the background will be white after that we will add the color that will be the text color and font weight font weight will be 500 then width will be 100 so it will be full width and border of 1 pixel solid and this color then we'll add the padding that will be a space inside the button and margin 10 pixel from top and bottom and 0 from left and right after this padding and margin we will add text align left and border radius will be 4 pixel and cursor pointer you can see these buttons looks good next we have to add the hover effect on these buttons so let's come back here we will add this one and hover we will add the background this will be the background color code and after that we will add the color that will be the text color white and in this one we will add the transition all 0.3 seconds now if I take cursor you can see the background becomes black and the text becomes White next we have to add one more thing which is the next button at the bottom of these answers so let's come back and here after this button and this div here we will add another button and with this button we will add the ID next BTN and the button text is next after adding this you can see next button at the bottom so we will add the CSS for this next button so let me come back and copy this ID add it here in the CSS file with the hash tag because it is an ID here we will add the background then color font weight and width width will be small 150 pixel then we will add the Border border will be 0 and padding of 10 pixel then margin 20 pixel Auto and zero border radius will be same which is 4 pixel and cursor pointer after writing this you can see this next button here but we have to move it in this Center so here we will add display block and now you can see it is horizontally centered right now this button is displaying so we have to hide this button and this button will be displayed once we will select any option from these answers so let's come back and here we will add none so the button will be hidden you can see that button is hidden next we have to add the JavaScript to display the correct questions and we can select the answers so let's come back and here we will create a new file click on this icon and write the file name script dot Js this is the script file here we will add our JavaScript next we have to connect this script file with the HTML so let's come back and above this closing body tag here we will add a script tag script SRC equal to script.js now our HTML file and JavaScript file are connected here we can add our JavaScript so in this Javascript file first we have to set the questions so here we will add const in this const we will add the name of the variable so it is questions equal to here we have to add the questions so let's add the first one like this question and write the question text then we have to add the options for this question so here we will add answers here I have added the first answer and correct is equal to false because it is a incorrect answer let's duplicate it and we will add the other answers here and the second answer is correct so here we will add true so this is the first question and the list of answers now we'll add the other questions in the same format so here let's add one comma and we can add this second question here so you can just copy this one and paste here and update the text so I have updated all these questions and answers you can see in front of the correct answers I have added true and other are false here also I have added true and these three answers are false after that we will add another variables in this HTML file I have added this ID question and answer button and next button so we will add the variables for all these three elements so come to the script file here we will add question element equal to document dot get element by ID question which is this one next we will add the variable for this one duplicate this line add this ID here and here we'll add the answer button Not Duplicate this and it will be next button and the ID which is next vtn now whenever we will start the quiz and give the answers the question number and their score will be changing so we will create variables to store the question index and score so here we will add let current question index so the index will start from the 0 then we will add let score equal to 0. next we will add one function and let me write the code then I will explain you here I have added one function start quiz so when we will start the quiz it should reset the current question index 0 and score 0 when we'll start the quiz here we are adding inner HTML next because at the end we will change the text to the restart or replay so when we will start the quiz again the button should be next and after that we are calling this function so questions so it will set the index 0 score 0 and set the text next for the next button then only it will call the another function so question that will display the questions now we'll create this function here in this so function I have added let current question is equal to questions dot current index so if you will see this list list of questions here we have the first set of question and answer then second then third and fourth so we'll get the first question if we'll add the index 0 we will get the second question when we will add the index 1 so that is written here questions and index number so that will be the current question and we need the question number also so if the index is zero question number will be 1 if the index is 1 question number will be two so here I have added plus 1 that will be the question number then in the question element which is this one this is the question element so here we will update the text with the inner HTML so we are adding question element in our HTML equal to question number then one dot and after that the current question and current question dot question so the current question will be this one and here we have the question this one so we will get this text so after adding this we have to display the answer from the current question set so here we will add the code to display the answers so let's add current question Dot answers dot for each here I have added current question dot answers so it will come here suppose the current question is this one and it will go here answers and in this answers we have the text and correct so we have to display these text in the buttons so we will add document dot create element and the tag name button so it will create one button tag and we will save it as a variable called button and in this button we have to add one text so to add the text we will add inner HTML and in this inner HTML We'll add the answer dot text so answer is this one answer dot text so it will add the first one then we'll add the second one like that so it will add the text in the button then in the button we have to add one class name so we are adding button dot classlist dot add and the class name BTN so it will add this vtn class name in this button after that we have to display this button inside the div which is here answer buttons this div is here so we have to display that button inside this div so we are adding answer button dot happen child button so after adding this it will display the question with the question number and it will display the answer now we have to call this a start quiz function to display the output so let's copy this one and add it here at the bottom start quiz so it will call this a start quiz function and it will set the current index 0 or score 0 and button text next then it will call the so questions and this so questions will display the question with the question number and it will display the answers in the button so after adding this let's come back to the website and here you can see it is displaying the question with the question number one then we have the previous text that we have added in the HTML file which is answer one two three four then we have our answers that we have added with the variable here you can see the answers for the first question Sark blue whale elephant and giraffe so you can see these answers here but we have not added click function here right now so now let's come back and we have to hide these things to hide these things we have to reset the previous questions and answers so let's come back and here we'll add one function before displaying the question here we will add one function it is set a state that will reset the previous question and answer now we have to Define this function so let's add it here function reset state in this reset State let's add the next button Dot style dot display it will be none then we'll add while answer button it will be buttons s and here also we'll add buttons in this one so answer buttons Dot first child so suppose it has a child element then we have to remove that here we'll add answer buttons Dot remove child answer buttons Dot first child so it will remove all the previous answers and here also we have added answer button it will answer buttons yes answer buttons dot app in child so after adding this let's come back and here you can see the first question with the question number and list of options and if I click here nothing is happening next we have to add the click function on these answers so let's come back here we will add button Dot add event listener click and here we have to add one function name so when we will click on the answer button it will call this function select answer and before this click event we will add if answer dot connect so if it has some value then it will add button Dot data set Dot correct equal to answer Dot connect so it will add the true or false in this data set correct from here this Falls true it will add in this button data set now we will add the function which is Select answer so let's define this function Above This start quiz so here we'll add function so when we will click on that button it will add the selected button element in this variable selected vtn and then it will check the selected vtn data set true so if the data set is true then it will add the class name correct and if it is not true then it will add the class name incorrect now for these class name we have to add the background color so we will change the background color for the correct and incorrect class name so let's come back to the CSS file here we will add correct and background in this background we will add one color code now we will add the background for the incorrect class name Incorrect and this background color after adding this let me come back to the website and if I click on the first one you can see the background becomes red because it is incorrect if I click on the second one you can see it becomes red because it is correct and if I click on the third one you can see it is red and the fourth one is red now we can click on any number of times so we have to disable the click after selecting one answer and when we'll select the wrong answer it should automatically highlight the correct answer with the green color so to add that one let's come back here in the subscript after that we will add so here we have added array from answer buttons children for each so for each button it will check the data set if it is true then it will add the class name correct suppose we have selected the wrong answer then it will go and check the other answers and if it is true then it will add the green color with this class name correct and after that it will disable the button so we cannot click on the any button and after that it will display the next button so here we are adding next button style.display block so it will again display the next button so that we can go to the next question so after adding this let's come back to the website and if I click on the first one which is the wrong answer you can see the second one becomes green because the second answer is correct and it is displaying the next button and now we cannot click on the any other button let's refresh the website and if I click on the correct answer it is displaying the green color here and now we cannot select any other next we have to hide the hover effect when we select the button so let's come back and in this CSS file here we have added BTN hover so in this one we will add one more thing over and not disabled so the hover effect will work when the button is not disabled and when the button is disabled the hover effect will not work and we will add one more thing here we'll add BTN disabled and cursor no drop after adding this let's come back and refresh the website if I click here you can see we will not get the hover effect now and the cursor becomes red we cannot click on any button we can just click on the next button we have to add one more thing when we will select the correct answer the score should be increased so let's come back and here we have added the class name correct in this one so here only we will add one more thing code plus plus so it will increase the score by 1. next we will add the function for the next button so here we will add next button dot add event listener and the event is Click here we'll add a function and in this one we will add if it will check the current index if the current index is less than the length of the question it means the number of question is 4 then the question length is 4. so if the index is less than that then here we will add one function handle next button or else it will add a start quiz suppose if there is no question and will click on that button so it will restart the quiz and here we have to Define this function handle next button so above this one here we will add function handle next button and in this one we will add current question index plus plus it will increase the equation index y1 when we will click on the next button and again we will add if current question index less than question length then so question function with the updated question index else it will display this code so scored so if there is another question it will display the another question and if it is not there then it will display the score when we will click on the next button next we have to Define this function so a score so here let's add function source code and in this one let's add reset a state that we have already created to display the score we have to call this reset function and instead of question we have to display the S code so we are displaying the question in the question element so in this one we will add inner HTML and let's add the text in backtick here we'll add U.S code so it will display the score out of the length of question and after that we will add next button dot inner HTML equal to play again and next button will be block so let's add next button dot Style dot display blog after adding this let's come back to the website again and let's select the correct answer next again correct answer next again we'll click here next and here next you can see us Code 4 out of 4 and we are getting the button play again it will restart the quiz let's click the wrong answer it will display the correct one let's click next and ground answer so we have selected two wrong answers let's click again click here it is also wrong and if we click here on the correct one so you can see the score one out of four because we have selected only one correct answer out of four and we are getting play again so finally this quiz app is working you can update your questions in this JavaScript and you can create your own quiz app or quiz website using HTML CSS and JavaScript so I hope this video will be helpful for you if you have any question you can ask me in the comment section please hit the like button and also share this video with your friends and don't forget to subscribe my channel easy tutorials thank you so much for watching this video

Channel: GreatStack

Views: 70,997

Keywords: javascript quiz app, javascript quiz project, javascript quiz tutorial, quiz app javascript, quiz website using javascript, quiz web app, quiz web app using javascript, javascript projects for beginners, javascript projects for students, javascript projects for job, javascript tutorial, javascript project for college students, college project in javascript

Id: PBcqGxrr9g8

Length: 34min 22sec (2062 seconds)

Published: Wed Mar 15 2023