How To Make A Quiz App In React JS | Build Quiz App Using HTML, CSS and React JS

hi guys welcome back to another video of creat a tag today in this video we are going to create a quiz app using reactjs here on my computer screen you can see here we have one quiz app where we have one question and we have four options for this question out of these four options one option is correct and other three are incorrect so if I click on any option let's click on the modem which is the correct one so it will will become green and now we cannot click on any other option we can only click on this next button so it will display the next question and another four options for this question the correct answer is Africa but if I select the another one let me click on Asia so it will become red it will also highlight the correct answer with green color again we cannot change our selection we have to click on next button and let's give the answer for all other questions and click on next button so it will display our score which is you scored three out of five and if you want to restart this quiz again we can click on reset button so you can start the quiz again we will create this quiz app with the help of reactjs so let's start this tutorial first we will come to our desktop screen and and here we will open the terminal now we have to create a react project using the we package so here we will type npm create we latest then press enter here we have to provide the name for our project so it will be quiz app after that we have to select the framework so that will be react and here we will select Java JavaScript now our project folder has been created now we will open this folder with vs code Editor to open this folder in vs code editor here in this terminal we will type CD and the folder name that is quiz app after that here we will type code dot then press enter so it will open this project n vs code editor after that we will open the integrated terminal so here we will right click and select open in integrated terminal using this terminal we will install the dependencies required for this project using this package.json file so in this terminal we will type npm install then press enter now all the dependencies has been installed in this project and here you can see one folder with the name nodecore modules after that we have to run our react project to run this project here we will type the command npm run Dev and press enter now our react project has been started on this address so let's copy this one and open this in web browser or we can click on this link by holding the control key so it will open this link in the web browser so you can see our react project is successfully running in the web browser now we have to clear this default react project to clean this we will come back to the vs code editor and here we will come to SRC folder and open the app.jsx file here we will clean this file here we will type RFC after that we will delete this app. CSS file then we will delete this react logo and in this public folder we will delete this logo which is in SVG format after that we will open the index. HL file and here we will rename the title so our title will be quiz app then we will remove this link tag save this file now we will come to index. CSS file and here we will clean this file now the react project has been cleaned so you can see it is clear on on the web browser and the title is quiz app now let me hide this terminal and here we will create the folder structure for our project so in this SRC folder we will create a folder with the name components so create a new folder and write the name components in this components folder we will create one component and their name will be quiz component so here we will create a new folder and let's type the name quiz in this folder we will create a new file and the file name will be quiz. jsx now we have to convert this jsx file in component for the that we will use the rafc now we will create the CSS file for this component so in this quiz folder we will create another file and the file name will be quiz. CSS now we will import this CSS file in quiz component so here we will type import and here we will provide the file path of the CSS file so just add/ quiz. CSS after that save this file and now we will come to index. CSS file and here we will set the margin zero for all the elements so here we will type start and in this one we will type margin Z and then save this file now the quiz component has been created in this component folder now we have to mount this component in app.jsx file so come to app.jsx file and here we will type opening arrow and here we will add the name of our component that is quiz then select this from the snippit so after selecting it this component has been imported in this second line and then we will close it using slash and closing Arrow now this component has been mounted in app.jsx file next we can remove this div so we will remove this div we will keep the opening and closing Arrow only now save the file now we will Design the HTML structure of our quiz component so here in this quiz. jsx file in this div we will add a class name so I will add the class name container now in this div we will create one H1 tag and in this H1 tag we will add the title that will be quiz app save this you can see this title on the web page after this title we will insert one HR tag to add one line and after this HR we will add the H2 and in this S2 tag we will provide the question so in this S2 tag let me paste one question and now for the option we will use the unordered list and here we will use ul and Li so we will create four options so we will create Four lii Tags let me copy and paste it again to create four options and in these Li tags we will add different options for this question so we will type modem router landan cable and pen drive now we have question and we have four options after this UL tag we will create one button tag so here we will type button and in this one we will type next the button text will be next using this button we can move to the next question after this button we will create one div tag and in this one we will display the question index so here let's create one di with the class name index in this div we will type one of five questions after that see save this file and now we will come back to the browser so here we have this title then we have one question and then for options then next button and here we have the index now we have to design this quiz app using the CSS properties so we will come back to the code editor and here we will open this quiz. CSS file so first we will add the CSS properties for this container class name so just copy this class name add it here before adding the CSS properties for this container class name we will add the CSS properties for body so let's come to index. CSS file and here we will type body and for this body tag we will add height so the height will be 100 VH that will be viewport height and after that we will provide the background image and in this one we will add the linear gradient color so here we have to add two color codes so here we will type this first color code and second one now save this file and you can see the gradient color on the complete web page now let's come to the quiz do CSS file and here we will add the CSS properties for this container here we will provide width 640 pixels then margin Auto margin top of 150 pixels background will be white and color this color code display will be Flex Flex Direction column gap of 20 pixels and Border radius 10 pixels padding 40 pixel and 50 pixels after that we will save this file so you can see the changes on the web page here we have the container in white color now we will add the CSS properties for this HR tag so write this tag here before that we will add the class name container then HR and here we will add the CSS properties so the height will be 2 pixels and water none and background this color code save this now let's come back to the web page so you can see this horizontal line after this main title after that we will come back to the code and here we will add the CSS properties for this h2 tag that is the question so here we will add do container and H2 for this h to tag we will increase the font size 27 pixels and font weight 500 then save it so you can see the increased font size for this question after that we will add the properties for this options so here we have the options in ul and Li so we will add the CSS for these UL lii tags so here we will add do container UL Li for this list we will add display Flex align items Center Height will be 70 pixels padding of 15 pixel from the left side border of 1 pixel solid and this color code border radius of 8 pixels and margin from the bottom 20 pixels font size of 20 pixel and cursor pointer after applying it now come back back to the web page you can see these options are looking good now we'll add the CSS properties for this next button now come to this CSS file and here we will add do container and button tag so for this button we will add the CSS properties that is margin Auto width of 250 pixel and height of 65 pixels background this color code then color white then font size 2 5 pixels and font weight 500 then we will add the B radius of 8 pixels and cursor pointer after that save this file and come back to the web page so you can see the next button is also looking good now we have to remove these extra padding from here so let's come back and in this index. CSS file and here after this margin zero we will add padding zero now save this file now the alignment for these options are good now we will add the CSS for this question index so here we have this div with the class name index so just copy this index class name and come to this quiz. CSS file here we will add container. index for this index we will provide the margin Auto font size of 18 save this file and now come back to the web page now you can see this index is in the center now in our project we will add the custom fonts so that our project will look better so for that we will open new tab and here we will search for popins font open this link that is Google font on this web page a scroll and select this regular 400 after that just copy these link tags and come back to the vs code editor and open index.html file and paste that link after this title just click on format document now you can see our link has has been inserted here now we have to add the CSS for this popins font to apply this one let's come back to the index. CSS file and within this body tag we will add font family and here we will type popins now save this and save this HTML file also after that open the web page now you can see the Poppins font has been applied on complete web page now come back to the quiz. jsx file and before this question we will add one dot now the design for our quiz app is ready next we will add the functionality on this quiz app to create that functionality first let's come back to the desktop and here you can see we have one file data.js let's copy this file in assets folder so just copy it come to the project folder then SRC then assets paste it here now we will open the vs code editor and in this assets folder we have data.js file in this file you can see we have added one array that we have exported using this export and in this array we have different objects so we have five objects for five question in this object we have question and four options which is Option 1 2 3 4 and then we have answer that is the correct answer for this question now we will use these questions in our quiz app so let's come back to the quiz. jsx file here before this return we will create the state variable so here let's create let and write the variable name index and we will add this Setter function name set index equal to use State and we will initialize it with zero zero index means we are on the first question so after that we will create the question State variable where we will add the questions according to index number so here we will type let and write the name of the state variable that is question and we will add the setter function set question equal to user State and in this one we will provide the question object for that we will UT import the data aray in this quiz app so here we will add import data select this from snippet now it has been imported now in this user State we will use this data array so we will type data and here we will provide the index number that is index suppose our index number number is zero so this question object will be loaded in this question state so in this question variable we have the question using this data areay using this question variable we will display the question so first we will remove this number and here we will use cardly Braes and in this one we will provide the index + one so if the index is zero so it will display question number one after that we will remove this hardcoded question and here we will provide the question using this question State variable so here we will use curly Braes and we will type question do question similarly we will add the options in these four options using this question question variable so remove these options and here we will type curly press then we will provide question dot option one let's copy it and add it in other options here we will replace the option number that is option two 3 and for after that save this file now we will come back to the web browser so you can see still we can see that question but these questions and options are coming using this question state if our index becomes two and save it so you can see it is displaying the question number three if I change it set it as one so you can see it is display playing the question number two and we have the different options now we will add the functionality to click on these options so for that we will create one Aro function and the name will be check answer so we will type const check answer Arrow function in this Arrow function we will take two parameters that will be element and answer after that we will check if the answer we have selected and the answer of the question is same then we will add the class name on this element that will be correct if the answer is incorrect then we will add another class name that is wrong so here we will type if and here we will add a condition question. answer equal to answer then here we will add that element. Target dot class list do add and here we will add correct class name then we will add else if the answer is incorrect let's copy and paste it here and here we will add another class name that is wrong after that we will add this function on these options so just copy this one and in these allite tags we will add on click and here we will pass one Arrow function here we will pass this element and call that function that is check answer and here we will provide the element parameter then we have to provide the option number so the option number is one here we have option number two this is three this is four after that we will add the properties for these CSS class name so here we will add the CSS properties in this CSS file we will add connect and for this correct class name we will add the background this color code then border color this color code after that we will add the CSS properties for this wrong class name here we will type wrong class name and here we will add the background and Border color after that save this CSS file and now if I click on option one this check function will be executed then this allite tag will be passed as an element and here we have passed the option one so these parameters will be received here if the answer is same as the correct answer then we will add the correct class name if it is not not matching then we will provide the wrong class name after that save it and come back to the quiz app so the correct answer is Africa and if I click here you can see it becomes green reload this web page if I click on Asia that is the incorrect answer so it becomes red if I click on the correct answer the background becomes green but the border is not becoming green to solve this one let's come back and before this correct class name we will add dot container and here also we will add dot container then save this file now again open the quiz app and let's click on the wrong answer you can see it becomes the red and the border is also red if I click on the correct one you can see it becomes green and the border is green now we have one problem that is when I clicked on any option again we can click on the another option so this is the problem we can only click on one option to solve this problem we will come back and come to this quiz. jsx file and here we will create one lock State using that we can lock our answers so here we will type let and we will add the name for this state variable lock and we will add the function set loog equal to user State and here we will initialize it with false after that we'll wrap this condition in a if statement so here we will add if and here we will add the condition so let's type if loog equal to false if the lock is false then only these options will be executed so just cut and paste it in this if condition if the lock is false then only these options will be selected and after selecting the option we will make the lock true so here let's add set lock true similarly in this else condition also we will add the set log true so whenever we will select any option the lock will become true and we cannot select another option so let's check this Logic on the web page so let's reload the web page and if I click on the correct answer so it becomes green and now if I try to click on another one you can see nothing is happening because we have already selected the afria and the lock has become true so we cannot select any other option here we have selected the correct answer it becomes green now we will add the functionality so if we will click on the wrong answer the correct answer will be highlighted for that let's come back we will create four reference variables let option one equal to us ref and we will initialize it with null now let's create another three copies and here we will add the name option two 3 and four we have four options here and now we will add one aray for these options so we will type let option array equal to and we will create one array so in this option are we will add option one option two option three and option four after that using this option aray we will highlight the correct answer whenever we will click on the wrong answer so if the answer becomes wrong that is in this else condition so here we will use the option array and in this array we will use question do answer ANS here we will get the answers of the question but the index starts from zero and the questions answer starts from one so here we will add minus1 so we will get the reference of the correct answer and now on this reference we will add do current do class list and here we will add the class name and the class name will be correct so we have added the logic that will add the correct class name on the correct option now we will link the references in this Li tags so here we will use ref equal to and here we will provide option one option two option three and option four now our references has been linked with lii tags now save this file and now open the web browser and reload the squee app and the correct answer is Africa if I click on Asia you can see the wrong answer becomes red and it is also highlighting the correct answer with green color next we have to add the functionality on the next button so let's come back to the code file and here we will create one AR of function that will be next so let's add const next is equal to addo function we will use this next function to change the question before that we will create one score state where we will store the number of correct answers so here we will add let score and the seter function name will be set a score equal to use State and we will initialize it with zero so whenever the answer will be correct we will increase the score y one so in this check answer within this if condition we will add set a score and here we will pass previous a score and here we will return previous score + 1 now save it and here in this index we will add curly addes index + 1 and here we have to display the total number of question so here we will type data dot length in our data we have five questions so we will get five and and if the index is zero it means we are on the question number one so here we will get one now we'll create the logic for the next button so first we have to create the functionality that if we have not clicked on any option this next button will be disabled and as we will click on any option this next button will become clickable for that in this next button we will check if lock is true if the lock is true it means we have selected any option now we can click on the next button so here we will add one logic using that we will change the index and display the next question so first we will use set index and here we will increase the index index by one so here we will add Plus+ index after adding this index will be increased by one and it will be stored in the state after that we will add set question as the index will get updated using that index we will set the question so here we'll add data and in this one we will provide the new index now the question will be updated after that we have to change the set lock so that it will become clickable so we will add set lock false so we can select on any option now we have to link this next function in this next button so here we will type on click and here we will provide next function now now save it now we will set the index zero so that the first question will be visible when we will open the web page so here we will set index zero so the question will start from one so right now it is displaying the first question if I select the correct answer it becomes green now we'll click on next and the previous selection is already displayed here so to remove this one let's come back and in this next function here after setting this set log false we will add option aray and for this option aray we will add map and we will pass the individual options and from here we have to remove the class name that is correct class name and wrong class name so we will add option dot current dot class list do remove so first we will remove the wrong class name and after that we'll remove the correct class name also so copy and paste it again and here we will add correct and after that we will add return now save this file now come back to the quiz app and reload the squiz app and here if I click on any option and click on next button now the option selection has been reset now check this quiz till the last question now we are on the fifth question and we have total five questions questions in our data now if I click on next button the quiz app will disappear to fix this one we have to create one stage variable and the name will be result so here we will add let result and the seter function name will be set result equal to user State and we will initialize it with false after that in this next button we will add a condition so let's add if we will provide the condition that will be if the index is data length minus one in this case the set result will be true and after making it true we will return zero so that it will not execute the remaining statement now save it and let's submit this squee now we are on the fifth question and if I click on next nothing is happening here but in the background this set result has become true that was false so using this state we will hide these question options next button and index and we will display the result for that here in this code file in this container class name after this HR tag we will add one turn operator so let's add curly Braes and here we will check result if the result is true we will provide the empty tag and if the result is false then we will provide this remaining tags so here we will use this empty tag and within this tag we will move all these elements move it in this tag after that save this file now come back to the quiz app reload this and here we have the first question let's select on any option then next another option next select one option and next then again click on next we are on the last question if I click on the next you can see the result state has become true and the question and options has been removed now we have to display the result for that here we will create one S2 tag and in this S2 tag we will type use code and here we will provide the score State curly presses in this one we will type score then we will add out of then here we will add curly Braes and we will add the data do length after this S2 tag we will create one reset button so here we will add one button tag and here we will add the button text that is reset now save it and now come back to the web page now we have us code 5 out of five and reset button reload this now we have the quiz app and here we have the score that is zero so we have to hide it so here we will use the tary operator so first we will check if the result is true it means we have to display this result so we will create one empty tag and move this two tags in this empty tag if the result is true then only it will display the S2 tag and this button and if the result is false we will simply provide the empty tag now save it now the result screen has been removed and if I select the options and click on next button and if I click on next when we are on the last question so it will display the score and reset button now we have to add the logic for this reset button when we will click on the reset button the quiz will start from the first question so let's come back and here we will create one add function the name will be reset so here we will add con reset equal to one Arrow function in this reset function first we will reset the index so just add set index zero then we have to add the set question and here we will set question number one that is data and the element number zero after that we have to reset the score so we will add set a code and this code will be zero after that we have to reset the lock so we will add set lock it will be false now we have to reset the result also so we will add set result and here we will provide false now we have reset all the state next we have to link this reset function with the reset button so in this button tag we will add on click property and here we will provide reset function save this and now we will come back to the web page if I click on any option and click on the next button so right now we are on the score us code three out of five and we have the reset button if I click on this reset button you can see it is starting the quiz from the first question now we have successfully created the quiz app using the reactjs I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe this channel greatest tack thank you so much for watching this video

Channel: GreatStack

Views: 9,898

Keywords: quiz app react js, quiz app using react js, quiz app in react js, react js quiz app, react js project, react js project from scratch, react js website project, basic react js project, react js project tutorial, react js tutorial with project, react js tutorial project, react js project tutorial for beginners, react.js project tutorial, web application development tutorial, web development tutorial for beginners, web development tutorial, react programming, greatstack

Id: VMZ7lcSdVnY

Length: 45min 37sec (2737 seconds)

Published: Wed Nov 29 2023