Angular 12 Quiz Application | Angular step-by-step Project | Quiz Application from Scratch

hello everyone welcome back to my channel so this is quick demo of angular quiz application which i have created here so here you can see we are going to create this application from scratch like i'll tell you how to what are those steps what is required to build this application all right so let me just walk through you with this application so what what things we are going to implement so on the top you can see we will design this header with this angular logo then we will have this main section here which will say this welcome page basically welcome to this quiz application where you will have some rules declared for this particular quiz application and below here you can see we have to enter our name to start the quiz so let me just add the name so that we can enter the quiz section so we have to click here to start the quiz so here you can see we have this thing also designed here so this is disabled because this is first question so we can't go back this is the navigation thing which will help us to navigate through the questions so currently we have this nine question here so on the header you can see the angular logo then who has logged in yet like who has started the quiz the user name here and we have the point system as well that which we have declared in the rules also we have these questions like which question i am answering right now and we will get a 60 second timer here all right so let me go back to the first question so here you can see we can answer the question like the question is which of the following does type script used to specify types so we use this semicolon here so you can see it is correct and we get a 10 points and if i go here and let me do the correct question here so i can see we are getting 20 points if i say something wrong here so it will be in red color now and 10 points will get detected from here so let me give one more wrong answer you can see the point is getting deducted all right and if i give correct answer so 10 points plus if let me just come to the last question so that i can show you what things is here so i can see you can i don't have points till now so my point is minus 10 so i'll try to answer both of the question correct so this is what the last trans question is this so as you can see we have this last page where we can see that we have completed the quiz and this is the summary of the quiz that we have attempted nine questions four questions were wrong five are correct and our score is ten points all right so this is what we are going to create in this video from start to end so i will highly recommend to follow each and every single step so that you should not encounter every error if you do get any errors so i'm there for that so you have the comment section you can write up there error so that i can check and i can help you accordingly all right so without any further ado let's jump into the video all right guys so so what i'll do now is i'll create a folder here with the name so i'll just go inside the folder and just type cmd to open the command prompt and we have to create a new angular application so what is the command for that it is ng new and the project name so this is how we start so let me give a name of my project i'll give name as angular quiz quiz app okay so this is my application name and hit enter and it will ask for some questions about routings and stuff so we will answer that accordingly so that's wait for that question so it will ask for would you like to add routing so i'll say yes and it will ask for what kind of css we need so i'll choose a css now although we will use more of bootstrap to achieve what we need okay in term of styling all right so let's wait till the application gets getting created so angular is actually creating for us the scaffolding and stuff is doing it is going on right now so it will create the application for us so that we can proceed further so let us just wait for that as you can see it took some time but it has been created now so what we will do we will try to navigate inside the project by saying cd and then the name of your application okay hit enter and let me open this thing in vs code so for that i'll just press code dot so open this project into vs code all right so once the vs code is open let me just maximize this and let me just increase let me zoom it a bit because i got a lot of request on youtube yeah so i think this is much better now so as you can see we have our application created and let us check what things we are getting so in the source we have this app and everything is intact so let us try to create all the required components in the start only okay so here open up this terminal the first thing we need is we need a welcome page so for that let me create a component called as welcome so i'll say ng g for generate c for component and the component name is welcome okay [Music] all right so second component i'll need is question component so i'll say ng generate c for component and component name question [Music] right so this has been created now let us just configure the routing for these two files for these two components i'm sorry for these two components so i have this question component and i have this welcome component let's go inside this routing module and try to configure this routing for these two components all right so i'll go here and just add a path and the paths for my welcome component so the first page which it will open is my welcome component so the component it has to open my welcome welcome component and i'll give a path name as welcome okay let me add routing for the second component which is question all right and for this we have to open question component all right and also whenever the path is blank i want to redirect it to welcome page because the first page i want to see as the welcome so for that i will do path whenever my path is blank i want to redirect redirect to which path to welcome okay so i'll have that name same name here okay and path match full all right so our routing is also configured okay so to make this routing work what we have to do is we have to make use of router outlet okay so let me remove all this unnecessary thing and let me have my router outlet here let me save this save all and let me try to run the application the command for that is ng serve open all right so let's just wait for this application to serve on localhost 4200 all right so here you can see my application is compiled successfully and it is running on localhost 4200 so let's just open this thing on browser here you can see our application is serving on this localhost 4200 and the first page which we can see is our welcome page all right and if i just navigate from welcome to question i can see question works which means our routing is working fine okay so all i have to do is i'll first start with the header part okay so let me create a component for a header as well so i'll go here and open up terminal and i'll create a header component so i'll say ng g for generate c for component and the component name is header right so header components created so let's just try to add all the html needed for the header so we'll do so you guys can just follow my steps whatever i'm doing so that you can create the same header the the one which i have showed in the demo all right so for that header demo all you have to do is is we have to configure first bootstrap because i was using bootstrap so let me first tell you what what things i need to configure i need to configure two things the first thing is bootstrap and second thing is font awesome for the icons so let us just try to do that first so let's go on google.com and just search for bootstrap open up this first link click on get started and you have to just copy the css and the js bundle okay so copy the css and open up your code quiz app and inside the index.html just paste it here below this all right okay let's go ahead and copy the second item we need to copy this js bundle as well so copy this all right and paste it below the body so this is the script this is a javascript bundle script all right so in this way we have added the bootstrap feature all we have to do we have to add font awesome for icons okay again i'll go to font awesome dot w3 schools so you can go to this website so i'll share this website link in the description you can just follow that link and just navigate on this particular website so you just have to copy this link till here and you have to paste it inside this below the bootstrap css okay so just go below here and paste it down so now we have successfully configured point awesome and bootstrap and now we can use them in our application okay let me just save all and let me go inside our header now okay so we will design the header part first and then we proceed further with the welcome and then we design the question part all right so for the header all you have to do we have to take everything in container all right so first we will have a nav okay so for that nav you can copy the bootstrap header if you want so let us just try to copy the bootstrap i think better is that we can just minimize our time so i'll say nav bar so here you can see this nav bar present so let us just copy any one of them [Music] which is for our liking maybe one with the icon will look good so i'm just searching for that i think the top one was better so we will go with this so let me copy this and paste it inside this header component.html okay so you can pause the video if you want to just type it down by your own then you can do that as well okay i'll just change this some a bit so that because i need a blue color and this is a light color so for blue you need to have this change it to bg primary okay and i'll make this container as fluid so that it should take all the width of the screen continue the fluid and this will be our brand text that's all and i want this thing in bold so i'll just change it to text bold all right and let me just save these things and i need to add the image as well so for adding the image i will have the reference of that angular so i'll make use of that angular project all right so let me just go and check what our application looks like now all right so if you can see this is not showing because we are not using the selector so here we can see we have created this component header we have to copy this selector and paste it inside our app component.html so above the router outlet just add this app header okay if i save this and if i go on the browser let's check if it is compiled success yeah compile is success now go in the browser you can see we are getting this beautiful header now zoom a bit so you can see so all we have we just have to change the image okay so for the image icon i will share some link with you guys which you guys can just copy paste and use that okay so i will already have a link for that image so i'll just go here in the header you can add any whatever you feel like you can add the company logo according to your need so i am using this image of angular icon so this is what i will share this with you guys if you want in the description below you can copy it from there okay i don't need this for now i can use this for giving the name this is the logo i don't need width and height for now if i save it if i check how it looks i can see we are i'm getting this logo now this cool looking angular logo let me give it a width of 50 maybe that will make it look better now this looks better so this is the angular logo and i need something more right we have a span tag so that it was written like angular quiz okay so a is already there the icon a is already there here so we just need n n-g-u-l-a-r and quiz okay so for that i'll use span tag okay and inside that i'll just add n-g-u-l-a-r and quiz okay and let me use some bootstrap class here as well let me take it below and let me add a bootstrap class okay and this has to be uppercase okay if we save it and check now it looks good so this is angular quiz which is written here all right so header part is complete so now we will switch to the welcome page i'm just saying if it is everything is better yeah everything looks good so now let's try to change this welcome page all right okay so let's just open this welcome dot html so we are just first uh whatever the templates are there we are designing that and later on we will see the logical part how we can logically make the way we want okay the logical things so first let me just design all those things all right so now for the welcome page first take a div and inside the div i will have my class container i'm using this bootstrap classes alright guys so this will have a light color okay and i'll give some padding to it okay some vertical padding and i'll have a h1 tag for the header okay so i'll have this h1 tag it says welcome to quiz app something like this and let me add some classes here so that it should look better so it will take display five okay and i want this thing as bold so i'll say f blue bold okay so this looks good and let me add some tag here about what is this quiz all about and what all those so i'll have a class for this paragraph and let me add a cool md eight all right it is incorrect sorry so it is call md eight okay and let me use this some bootstrap classes all right so this is my quiz so this i can add any random words i'm just adding all those so that it looks good better better maybe better better term so i'll have some the quiz bill contains total nine questions i'm just adding some random stuff guys okay you can add anything you want i can say each question holds 10 points that's it well it looks good that is the reason let's check how it looks so you can see uh this looks better somewhat better so this is the header welcome to quiz and this quiz contains nine question each question holds 10 points so this looks better let me just add up my rules so everything is static here by the way guys so we are just writing some static terms so i am using h4 tag for this rules and i'll use ordered list and some ally which will consist of my rules whatever rules we are going to develop so we'll say correct question gives you 10 points all right let me copy this and add up some more rules here okay incorrect questions gives you minus 10 points i'm just adding stuff so let me just you can skip this part if you want okay so we have our rule all right so we have our rules ready so let's check how it looks so you can see our rolls is ready here with all the four rules and let me just add some something like the like all the best in kind of stuff so i'm just adding all some more static terms so i'll use h1 tag all right and this will be best let me use the class text center this is a bootstrap class to make things center or i can use some styling maybe styling would be better so i'll use some inline style i'll use font family not this one save and what what else i can say text align center okay if i save it have this thing all right so this is this looks good okay and we need a text box as well like whoever the user like whoever wish to give this quiz so he can write down his name and he can start the quiz so let me just do that now so below this let me have a div div with the class as name and let me have cool md for dot some [Music] margin on the top of the vertical margin so i have created a div with class name and all this cool md4 and margin y as three okay and let me add a label and this will be written like enter your name and below this i will use our input type text and i'll use bootstrap class form control let me save it and check how it looks um this looks good we are getting this enter your name all we need is a button here down here so that we can start the quiz okay so for that it is very simple just use button of bootstrap so i'll use bootstrap class btn and i'll use a primary button okay from random class that for the checking purpose and it will say start the quiz okay if i save it and check how it looks now so this looks better so this will helps us to start the quiz and whenever the user clicks here it will go to the question like it will go to the question component so for that let me add the routing here as well so for that we will use router link outer link as slash questions and this question is already configured if you can see here so i'm getting this so it will go to this question path and it will load this component okay so whenever people click on this so it will go to this question and this will load our question component if i save it and if i go in the browser and check if i click here i am coming to this question works which is the our question component okay and now we will design this part okay we will design the question part all right so for that what what things is needed so as you can see we were having a card a big card looking thing where we have the options and then we have the questions all right so for that let me start this the html part first and then we can proceed as i have already told you so i'll go in the question.html and start writing some html scripts for this so i'll say div dot container all right and i will use a card bootstrap card okay now first thing i was having some some letters on the left side some logo so i'll design that first so i'll use some flex system of bootstrap so i'll use d flex with justify content between okay i'm using all the bootstrap classes i'm not using any css here i'll also give some padding to it all right so it will hold two things okay first on the left side i want the logo of angular and on the right side i want the header part where it was written angular and typescript quiz and the welcome message for the user so i'll use two divs the first device will be for the image so i'll give as a standard name as image and i will have the another div for that who which user has like starting the quiz so that i have to display the name as well so i'll give it a class name as quiz header maybe okay so i have these two div so in this first div i will have the image okay so i'll have the image you can add any image again i'm saying this so i am preferring the angular one so i will definitely want to share that with you guys but yeah you are free to use any image you want okay so i'll copy this again the logo so for that i need to go in the header and let me copy this image and paste it inside our questions html so let me paste it here and let me increase the size to 90 so this should look bigger as compared to the logo okay so this is done now on this side we will add some again some static stuff so it will be a h4 tag which tells that it is angular and typescript quiz okay and below this uh we can just add a span tag which says that welcome user and username we can and let me add some styling to this h4 maybe i want this thing to look cursive as i have showed you in the demo so i'll just say font family as cursive and for the welcome user i want this thing in italic so i'll say style again font style okay phone where is that phone style here it is italic okay if i save it and check how it looks all right so you can see we are getting this card ready so on the left side we have this logo and on the right side we have this thing okay which tells that angular and it welcomes the user whoever the user is okay let me zoom out a bit and okay let me add some uh margin top because it is sticky with that particular header so i don't need that so i'll add some margin top mt5 maybe better so now i have a good gap you know between the header and this card okay so now we have to design the below part so let me again come to come here so this part is done so this let me close this div okay so below this i will have one more div same d flex okay and this time justify content around and i will add some padding also some vertical padding so i'll say py3 all right and below this below this i will i was having three things basically i was having a point i was having how many question you have completed and we are having the timer okay so i will have three div again so div for score div for question remaining and the div for timer okay so let me add some content here in the score so it will it was just a let me add some h4 tag or will be h5 tag h4 will be big so add h5 tag which says our point so maybe i'll just add some static right now 20 points okay some questions as well that which question i am attempting like question one of uh whatever the total number of question is so it again it may be some static stuff so again i'll use span tag and this will be italic so i'll say style it and font style as italic okay and this will be written like something like this question 1 of 9 maybe we will have nine questions so that's a question one of nine and in the timer it will be having our like the one which i have showed you in the demo it will look something like some 60 seconds timer so it looks something like this 60 seconds and i need to have that icon also so i will you can add it it is all dependent on you you can add it or you don't add it you can just copy it from google you will get this kind of icons so if i save it and if i check how it looks so as you can see this looks better now that we are having our score like which question i am attempting and the timer as well on the right hand side okay all right so let's go here maybe let me add this thing in in h5 so that it should look better how bigger yes now this looks better okay this is my timer as well so above part is done so let me close this div also and now i will work on the another div that i was having a progress bar which it was showing so for the progress bar what you can do is you can better go with the bootstrap okay so for that go on the bootstrap website and search for progress bar you can see this we are getting this so you can use any but i am having the preference of using this one this second so i'll just copy this the green color the second one and just paste it below this this is very simple just space below this and add some margin to it so that it should not stick so i'm just adding some margin bottom here because we have already vertical padding so this will not cause anything so i am adding some margin bottom here okay so this is our progress bar save and check again always shake here whatever things you have did all right so this is our progress bar this looks good okay and now let's try to code the below part now we were having two things the first thing is we were having a question and the second thing we were having the options okay so let me design the 2d first with the class as question and one more div with options as a class so first we will design this question so for that i can just simply say take a card bootstrap card and i can add any question in this like what is what is your name some random name okay what is your name some random question i'm so sorry some random questions and for options what we will do is we will use the again the order list or you can use an order anything which works anyhow we will try to remove that styling and stuff okay so this will have a list of your answers so maybe i can add some answer this is all random okay guys so i'm not actually doing this exact stuff so inside the list so let me uh it was also a card inside the list it was also a card so let me just try to have that so i said tip dot card and inside it i will have the random options maybe shashi and let me copy this list and paste it three more times fishy john alex and then we will have mary i save it and let's check on the browser how it looks okay so we need some styling and so that we can handle very easily so but yeah so this is how it will look like okay and all we need is the the last thing the two navigation buttons left and right and the center for the refresh okay so i will add that now let me close this question is done options is done and the last div maybe we will add it here so div dot d flex again i'll use the flex system and this time justify content between okay and below that we were having our three buttons okay so this is my first button let me paste it three times or two more times i'm so sorry two times and let's have our class i'll use class ptn only here because i don't want to use any colors so yeah just this color and we will be using some icons okay so we are going to use icons so if you want to check how we can get the font awesome icons just go here and search for font awesome 4.7 open to this first link and search for those icons so let me just click on your icons and here you can search the icons so for me it is uh chevron just called a chevron i guess yes so we we need these two chevron right and chevron left okay so if you click here you can just copy this from here and just paste it that's all so i can just copy this thing and paste it inside our button all right so inside this button i can paste it and that's all we just need to give some styling or some more classes here so that it should look better so i'll add some more class because i want to make it big so i'll add it this far three okay and if you want to change the color also then you can do it by just saying text primary because i need a blue color okay so this is done let me copy this so this is for right so let me paste it in the third one okay so left one should be uh the first one should be left so chevron left this one should be right okay so for the center one i need a reach like a refresh kind of button like which so firstly let me save it and check how it looks so that you guys are with me if open on the browser i can see these two buttons so this is my left and this is my right all right so i just need a center button so i'll again use the same class here plus btn and let me go on font awesome website and just try to have that refresh button so maybe we can use this one just copy this and paste inside this button and i'll use the class the same class which i have on the top okay for this thing so this is the refresh so i'll say text primary okay and the size should be 3x so f83x if i save it if i go on the browser and check so this looks better now so i have these three buttons the refresh the navigation left and right okay so now let me add some styling to it so that it should look like a little better so for that let's go inside our styling so first i'll go inside question component.css this one and i will add some styling for cards okay so let me give the max width because i don't want that card to be that big so i'll have my own width set here so i'll go with 800 pixel okay and give some margin so that it should be center so i'll say margin zero auto and i'll give some padding of 10 pixel okay so for the list property i don't want that thing so i don't want one two three four for the options so i'll just go say list style type as none okay and cursor pointer and i give margin also to it so i'll say margin as 10 pixel vertically and zero horizontally [Music] okay i need some borders so whenever user are hovering on the options so i need this border to be changed okay this card border should be changed so let me just try to do it if i'll say list dot whatever i have in the card if it is hovered so i'll say hover i want to change the border as one pixel solid i'll use this blue color okay and for ol i have to some add some i don't need any padding i'll say padding as zero okay and that's all i guess that's pretty much it where we have added all the stuff okay if i save it and check on the browser how it looks this looks better now because i have decreased the size and also make it things center okay and this looks good and whenever we are hovering we can see that black border sorry the blue border around this cards option card okay now all i have to do is that we have to also design the result page okay and that result page will do in the last because once we are done with the logic part of this maybe we can just look around how we can manage that stuff okay so we'll work on that so i will try to do things logical here all right so first thing i'll start with the welcome page okay so whenever the user is logging in i want to display the name here all right so for that let's go to our welcome dot ts file okay so here i will make use of template reference so i hope you guys heard about view child so we are going to use that now okay so in the input so i will make use of template reference variable as name okay and here in the so this is what you have to do first in the input tag the name so this is our template reference variable so whatever i will write here in the input i can so that i can access that value okay we'll go in the component.ps and we will add that view child okay so first for using the view child we have to import it first from angular and that will template reference variable will help us to just take the template and make use of it negative element so that we can grab the value from it okay so i'll use this view child okay so this is my view child and the second thing i want to import is element ref so these two i have to import it first to use it basically all right so here i'll use add red view child and inside this i have to give the name the selector name so i have that name as name so if i just so this name should match this huh so remember so whatever i have this as hash name so this is my template reference variable and this should match with this what i'm writing inside this view child and i can give a name a property just like a property name so this will be name key and this will be of type element ref all right and now i have to use it so whenever um someone click on the start button like start the quiz i want to store that value whatever i have in the name so i'll make use of local storage to store which user has starting the quiz so i'll have here so start quiz method so whenever who is clicking on that start quiz let me just show you on the browser what i'm saying so whenever someone is clicking on the start quiz so he can store the name in the local storage and display it throughout our application okay so here i'll just say at local storage dot set item what i want to set i want to set the name okay and which the name is coming from this name key so this name key dot native element dot value okay so whatever value of that particular input will be it will get stored inside our local storage all right and this is how we have did that we have used view child to take that native element and store that value and just use the start quiz method on this click event of this button okay so let me have a click event here and paste this particular method which we have created so click on save all and check on the browser your output so let me open up my local storage first and let me clear whatever i have there so that there should not be any confusion so it is already having something so let me delete everything from here and yeah so now i can just click here on this name i can say and i can click on start this quiz so i can see we are storing a name here shashi and we have to use this name to display it here okay welcome user all right so for that let's go here in our questions component okay so whenever anyone is coming to this particular question component i want to display that name so i'll use a property called as name a public property say public name of type string okay it will be blank initially an empty string and now i have to initialize that name so i'll say this dot name and this name will be coming from my local storage dot get item what was the item what was the name we have set we have set it as a name i added the system so that it should not be undefined so so to tell that it will have some value in future in because of this local it will get some value so i added this if i don't add this you can see it throws an error that string is null or it is not as unable to type string the type nail is not so it tells that if we add this thing so it tells okay this value will not be null this will get some value just so this is all because of typescript okay this is not any angular bug or error all right so yeah in this way we can store that name and i can display this name over here by using string interpolation okay so wherever the user is i just remove that and i use the string interpolation just use the name property if i save all i can say compile successful let's go here and i can see the name is displayed here on the top let me try to change the name to [Music] some other maybe john so if i click on start quiz i can see the name has changed to john okay so in this way we this thing is working now so now we have to do some part in the question component.ts because here is where the actual logic will be so currently you can see my question is static so i don't need all the static questions so i must have some question list okay so i'm using uh json for that so i'll share that json in the description so that you can just copy that json and use it for your application all right so let me just create a json file for you guys so i'll go here and in the asset folder let me remove all this thing this is not required now so click here in the source in the app uh sorry not in the app you can see we have this assets folder so i'll go here and click on this new file button so i'll say questions dot json okay and let me just copy that source from one of my code so so that i'll share that with you guys no worries so i'll use this json file so that i can have all those question because i am not using an actual back end here so i am just explaining you the angular part what has to be done from the angular side okay so i'll i'm having this set of questions nine questions already you can see this is an array of objects so this is my questions array inside this we have nine questions okay and you can see the question text and the options for that and out of this four option one will be correct okay so whatever it is correct it has some extra property called as correct with the value as true okay so this is what we will be using as our question set okay so don't you you can create your own questions that if you want just follow this particular like the templating the way i have designed my json just just copy the same design and you can change this question the way you want all right so this is what the question sets are so let me just try to check how many question it is it is nine so we have total nine questions here save it and now we have to create a service to call this json okay so to creating a service i will create one folder first with the name as service okay and inside this folder i have to create one angular service so creating a service is very easy just let me open up a new terminal and yeah and just say ng g for generate s for service i have to create a service inside the service folder okay so i'll say service slash and the name of the service so i'll give the name as question service so i just given the name as question and let's see does it it is creating or not so yeah it is created and we can check that inside this folder so question service is created all right so now all we have to do is we have to call that service inside our uh that sorry i have to call that jason okay so for that i need to have an http so i'll say private http http client okay i have to import it from angular common slash http so let me just import it very quickly import from angular add rectangular slash common slash http second one and what is the name we have to import we have to import http client if you are importing http client in the service then in the module we have to import http client module okay because we are doing http calls now so we'll say http client so sorry http client module the third one you can see if i save it and go inside the tsf let me check things are compiling it's still compiling let's check yeah it is compiling successful so no errors so let's go in the question service and try to create a method to call our the question.json let's say get jason get question json all right and this will return this dot http dot get i'm getting that json now so where is the json present is present inside the assets slash questions dot json the name should match right the name which we have given to this so it is assets asset slash questions dot json okay and now i can get all those questions wherever it is required so i required that questions inside my question component here so i'll go inside this question component and i'll just call that okay so first call i'll do is get all questions okay to to call this service i have to inject correct so for that i have this constructor because construction helped us to inject our services so i'll say private i'll say the question service so give it some name question service and let me import the question service i can see if i click on this and it will auto import on the top you can see it is imported from service question service and now i can call that method this method which i have created okay i have to call this inside my question component so i'll just say this dot question service dot i can see this method is accessible now get question jason and this is returns this is an observable so i'll say dot subscribe and i can say the response and let me just console.log the response if i'm getting the output or not if i'm getting the json files or not okay so whatever the question it was let me save it and i have to call this inside our ng on in it so i'll call this method inside our ng on init get all questions all right if i go here let me console inspect and let's go in the console and check so i can see i am getting the object if i refresh the page again i am getting this object okay inside this questions i am getting this array now so i have to use this questions so i'll say response dot questions if i save it and now if i check now i will only get the array see i just say response.questions and now i'm getting this nine arrays which is my questions okay my question text and my array of answers which is my options okay all right so this is this was the main part which we have to do with to get all these questions and now main thing is we'll be revolving around using the ng for loop and stuff like that okay so let me just focus on there so i'll go inside the question component.ts file okay so this part is done so i'll close it okay so let me open this if anything is required here so this is points questions and the timer and stuff so i'll not focus it here so i'll go to the questions and so this part is important because this will display like which questions i am attempting okay so for that let me just put up here so i'll just have to interpolate all right so what i want to interpolate but because i'm not storing that any anywhere else so first of all let me create a property as public question list of type any and it will be and array okay and i'll store that inside this so i'll say this dot question list is equals to response dot my question so whatever i was having in the json here i will store all the questions inside this question list okay and i will have one more property called as current question like what is the current question is current question uh it will be of type number and initially it will be zero okay this is my current question so what current question the user is attempting from the array from the nine questions all right now if i go here in the html now i just have to use that question list question list if i say question list of zeroth element like when i say zero zero means my first question okay i'll use this and what was that i want to display the question text so i'll say question text if i save it let me save all because it will throw error yeah now errors now if i go here i can see the question has changed which of the following does typescript use specific like use to specify types if i change here to 1 if i save it now the question is changing if i change it to maybe 7 see the question is changing so this is the reason i have this thing the current question so it will hold the values which the user will change whenever he will navigate or he will click the next button so so currently it should be zero so it starts from zero so i'll say current question may be better i'll just copy paste because i don't want to mess up with the spellings copy here and paste it here okay so this will hold my current question values you can see this will display this is displaying my first questions if you want to confirm that you can check the json as well and check the first question just to specify you can see this is the question which of the following just type script used to specify types so both are same all right and now so let's just check what all properties i need so i'll first create all the properties and then we will write the logic for all those so we will have counter we have times okay so we have this points and then we have this counter so let me create the property for these two let me go here in the question that component again a public property as points of type number zero and i will also have the counter which starts from first it should start from 60 because we are having 60 seconds for each questions so let me interpolate these two inside here for the points i am using the simple string interpolation and for the seconds i'll have the counter if i save it and let me save all and check how it looks on the browser yeah things are working fine all right now so let me just try to have create some methods because i want to navigate right whenever i click on this button i want to go to the next question whenever i click here i want to come to the previous question okay so for that i will have to create two methods next question and previous question so let's go on the typescript file here and below this i'll create two methods first will be next question and second will be previous question okay so whenever user is clicking on the next question okay so i have to increase the counter of this current question so i want to increase this by one so the current question which is currently zero i want to increase this because i want to go to the next question so from zero it should become one so for that i'll just increment this to this dot current question okay let me remove this yeah current question and i will increment so plus plus okay and same logic goes with this previous so for this it will be decrement so i'll say this dot current question minus minus okay if i save it and let's check is it if things are working or not if i click next oh it will not because i am not using this method on the click on the button click so let me copy this method and let's go here so this is my next question so in this button i will have this click event paste the method next question let's copy this previous question go here and for the first button i'll have this click and paste this previous question if i save it i go in the browser and check if things are working or not i can see the questions are getting changed don't bother about these options we will work on that so but see here the questions are getting changed okay all right so now let's try to focus on the options how we can display the options so this is quite a trick like a tricky part so i want you to just focus here how we can do it because i'll use some more loops inside that so that's the reason so let's go here in the html part and we have this div for options okay i don't need all this because we will loop it now so i don't need all this static answers like static options i'm so sorry so i need i'll remove this also all right so for this i will use ng4 okay so i'll say let options hit option off question list and inside the question list i will first check for which which question number do you want so so whatever the user have as the current question the property which i have created this current question i will use it here so i will say current better copy and paste current questions and inside that i am having the option so i'll say dot options options as an array so let me first explain you this so this is my current question array inside that i am getting that index of the question which question and inside the question i am having this array of options let me show you what i am saying so here if you see we are getting these options these four options so this is my array so i want to loop with this option list okay so this is what i am trying to loop now because we have to display the what all options i am getting all right so if i go here in the component and in the list here we will display the option dot text option from this option we are getting option dot text okay and so whenever people will click that it will answer you so first let me check if things are working there or not so if i see now we can see the options for this question if i click on next see the option also changed click on next option is changing changing if i go to previous option is changing see this is the problem i don't want to go back if if this is my first question i don't want to go back okay so for that i have to oh just first we can change this because this is still static so let us try to make this dynamic and then we can work on this previous part we have to disable this okay so i'll go here and yeah so this is my question so i'll replace this with my current question current question plus 1 y plus 1 because our area of index starts from 0 okay so i'll have this s plus 1 and this will be my length of the question so i'll say question list question list dot length if i save it and let's go in the browser and check here if i go to the next question i can see question 2 of 9 3 4 5 six seven eight nine if i go next here there is no question so it is displaying nothing but it should not display this previous button whenever it is on the question number one so we will try to disable that okay and how we can disable it it is very simple all we have to do is we just have to test the on which button on which question we are okay so i will disable it when i want to disable whenever my current so i'm using the same property by the way this current current question if my current question is equals to zero if if it is equal to 0 then disable that button let's check if it works see now it is disabled if i go to next question this gets enabled again if i press back i am coming on the first question this is disabled all right now so this is also done now let's just focus on the logical part for the option selection that whenever we select a right answer it should give me 10 points so this is also going to be little bit difficult so just be with me all right so for that i will be using a method called as answer so let's create a method for it let's go in the question component below this let's create a method called as answer and that answer should receive the options which user have selected okay so for that i'll go here i'll go here and the question component and whenever user is clicking if user clicks on this method on this particular option which is our list it should return it should call a method it should call a method name called as we will create this answer method very soon so i'll pass two things okay for whenever the user clicks there i have to pass two things like which question he has like he want to so like he's answering for so i'll say current question this is the one current question plus one okay y plus one you know because array starts from zero so i'm adding plus one and also i want to pass the option which user has selected okay now this is through zero because we have to create it on component as well so let's create on our component so for that let's navigate to our component.ts file yeah here i have to create the same method answer and i have the two parameter passed so first one was question number of type number and second thing was my option of type any and this is a method so i open this now you can see the error just gone all right now let's use this so first thing we will use for the current option if the option is correct so i will have if condition if my option dot correct if the option is correct because we are getting true value in the correct if this is correct then give user a 10 point so i'm using give this i hope you understand what i'm doing so this is equivalent so let me just try to do the same thing here this dot points is equals to this dot points plus 10 so line number 36 and line number 37 does the same thing so this is just the short form for this okay so i'm removing this just this is just for your explanation okay now below this if the answer is correct so it will go further let me add two more things let me have two more properties as correct answer we will store this also like how how much answer was correct and how much answer was incorrect so this is of type number and current value will be zero and we can say wrong answer or you can say incorrect answer incorrect answer again of type number and it starts from zero okay so whenever user selects a right right option then it will also increment this correct answer with the plus plus okay i am getting it and what else he can do is he he just have to test if the answer is k he will get 10 points if it is not so it comes under the else condition okay it will come under the else condition and all right so if the option is correct i want to send him to the next question also so i'll just say this dot this dot current question plus plus so that it should go to the next question if the answer is incorrect then also he must go to the next question but first of all i have to decrease his point so for decreasing it it is again very simple all we have to do is we just have to say minus 10 point so i'll say this dot this dot point minus 10 and this minus decreasing 10 points from the score okay and this will go to the next question again current question plus plus and this dot incorrect answer plus plus okay if i save all and check on the browser how things are working yeah if this i select this this is correct i'm getting 10 points which of this is not the use of type c okay so enum is not a type so i'm getting 20 points and if i use some wrong answer so see the 10 points get detected so how we can say number array so this is the correct answer 20 points let me choose the wrong answer minus 10 and again i choose correct answer wrong answer so i can say point is getting detected which means it is working so these things are working great now we have to work on the timer part now this timer part is very important so we have to work here so i will be using rxjs to work on this okay some rsjs concept we have the interval which we use for the rxjs it comes from the rxjs part which is a reactive programming which which i'll definitely gonna cover it very soon so yeah so let's try to use that now so for that i will have a first property called as interval i'm using this dollar sign because this is will be an observable of type any currently and now i'll use i'll have to create three things first start counter stop counter and reset our counter so let me first create the three methods start counter and stop counter and the last one is reset the counter okay this is very simple let's see how it goes so what we have to do is we just have to make use of interval so first what i'll say i'll say this dot this dot interval which we have created the property will be equals to the interval and this interval is coming from where c rx js so if i click here so this has to be imported on the top see this is imported from rxjs okay so please if your imports is not working so try to do it manually okay import it from rxjs and this interval we can add like for see it is asking for period so i can say 1000 millisecond which is one second so it should run every one second it should throw a value okay it should return a value so all i have to do is i just have to subscribe to this value so i'll say dot subscribe and yeah and this way we can just make use of it and now what we can do is we can just say whenever we are starting the counter okay so the counter should be minus minus so it should decrease from 60 to zero so this dot counter minus minus okay and and if my counter is equal to equal to zero so i have to do that condition also like if the time is up for example let me explain it if the time is up if the time is zero it should uh take it as a wrong answer and it should go to the next answer next option so for that let me write up the logic here that if my counter is equal to equal to zero so what i'll do i'll just say go to the next question so i'll say current question plus plus go to the next question and i will reset the counter by saying this dot counter is equals to 60 again it will start from 60 and it will detect the point by 10 so i'll say this dot point minus it by 10 all right so in this way we have started the counter and also if you just say that i don't want to subscribe to this interval for the whole time so i have to unsubscribe also so for unsubscribing it we just call it we just use a set timeout method that after 10 minutes please stop the counter okay so this is time so you need 10 hundred thousand okay so we need to have this as so after 10 minutes stop the interval so this interval will run until unless we will unsubscribe it so this is the beauty of rxjs we have to stop this subscription we have to unsubscribe that so i'll say this dot interval dot unsubscribe all right so we will unsubscribe that and in this way the counter will stop after 10 minutes i don't want because we have only nine questions okay so it is not necessary that it should run all the time so we will unsubscribe that interval okay so in this way our start counter is ready all right so if you have any doubt please let me know in the comment section till here all right so we'll start with the stop counter now so for stop counter what we have to do is you just have to unsubscribe it the interval so i'll say interval dot unsubscribe that's it and i'll just say this thing to zero so come this counter as zero so you just stop stop now okay and for resetting the counter it is simple how it is simple first i want to stop the counter so i'll say this dot stop the counter [Music] and say this dot counter oh god i'll stop the counter and then i'll initialize this counter property to 60 okay and again i will start the counter stopping and starting it is like restarting only so we are resetting the counter by this so first we are stopping it and then we are resetting it like we are starting it again so stop and then start which is equivalent to reset okay so in this way we have written the logic for that also and if you see here we are also having this button reset the quiz so whenever user press this so it will reset everything and come to the first question again so so for that i was having all this start stop and reset counter so let me create a method for that reset quiz okay so what i need to do is i have to just call this dot stop counter first or better we can say directly call this dot reset so this dot reset counter because it calls the these two already okay and then i'll say this dot get all questions again i'll say the points again to zero i'll say this dot counter value again start from 60 that's it let me save here and let me see if things work so i have to call this reset quiz on my method on my particular button so down here i can see my third button for reset i'll have a click event which will call this method okay and now let me just try to see if things works if i say in start start and if i click on reset oh it is throwing an error let's check what is the error okay unsubscribe um so that's the error so let me check the spelling was correct or not so unsubscribing having that error so let's fix that okay mhm all right save it let's check what is the problem so it says that this value is undefined oh yes because we haven't started our counter okay so for that first we need to start our counter else the value will be undefined so let's call this in our ng on unit so i'll say this dot start counter if i go back i can see our timer is working now okay and i can go and can answer the questions also i'm getting points if i click on this now things are getting reset okay i can see this is not getting changed okay so this is because whenever we click on reset i have to come to the first question so i'll say this thought current question is equals to 0 and now let's check if it works so i am on third question if i refresh it now i am again on the first question and timer also restarts all right so yeah so this was a very quickly we have actually completed this thing now all is remaining is this line how we can add we can use this progress bar whenever we are progressing the question like whenever we are achieving to our success so this is also should increase so currently this is static all right so let me just add few things here and there so that we can make use of these things so for that all we have to do is we have to change the styling so for that i'll use ng style inside our html so just grab this thing progress bar and if you can see this style so we'll remove this style and i use ng style all right and this ng style will be this is very simple actually we have we are just passing this value from our property so this will have a width so let me just add a width here in the single quote i'll say width all right and width i want to pass it from a property which i will create now so let me create a property first let me have a property somewhere here as progress and this is of type string and starts from zero okay and i'll use this property inside this okay so this will be holding that particular value so this so let me just do it again this has to be in single quotes by saying width and then we will use the progress p-r-o-g-r-e-s-s this progress is coming from our ts file okay from here and i will concatenate this with the percentage because i want to provide the width so i'll say concatenate it with my percentage my singles good as percentage all right if i save it if i save on the ts as well save all and let's go here and now you can see so currently it is 0 if i give any answer i can see 10 points okay so this is not working actually so for i'm not sure what is the problem let me just inspect element and check if at all i'm not getting any errors i'll check that oh oh yes i remember sorry i haven't written the logic for progress because currently whatever i write here it is not taking that value so it is still the zero so we have to look around like we have to write some logic so that it should hold some value okay so whenever i'm answering it i want to uh like get the progress value so let me create a method for it in our ts file so let's go in the ts file and let's create a method called as get progress percent okay and now this will say that this dot progress and this will be is equals to this is very simple just use this and we have to use we are getting the current question so this is just a division this dot current question if i divided by the how many question i have so this is like question list question list dot length all right and multiply it by 100 to give me in term of what this is my percentage value and i have to just send this in term of string because this holds a string value see it is returning the type number is not assignable to a type string so let me make this a string by saying dot to string all right and i will return this return dot progress oh sorry not a method to start progress okay let me save it and now so wherever i am using this so i'll just have to whenever i'm giving some answer okay if my answer is correct so i have to return that like this is my progress so please show that okay so all i have to do is i just have to go inside they start com no not start counter inside this whenever the option is correct so what i'll say i'll just say this dot get the progress percentage if my answer is incorrect again get me those percentage if i save it and check on the browser now if i press on the options oh yes i can see the points this is also getting increased so let me come up all the way to the last question okay so there is some issue i guess i have to check that and whenever i am resetting the quiz i want to say this start progress is again equals to 0 because i am resetting the quiz so i will reset that as well save it and let's go here let's check what is wrong whenever i select first question it is not progressing which is incorrect so let's check what is going wrong here oh yes i got the problem what is the problem here uh this is because of this because we are calling this after this progress this progress has to be called in the last and let me uh make this thing on the top after the points which is added if i save it now if i go on the browser and check if i select the first question correct so now we can see the progress is correct now before starting the next part i want you guys to just arrange this in such a way that i have did it here okay so this is really important because i know because of that that we get progress was not working so i really want you guys to just set it in this way the way i did here this if and else condition here you can see so just have just like this so in the if condition this should be the pattern like starting from the point and ending up to this and the else conditions seem like this all right so yeah so be now what we will work on is we will work on this what was this part yeah so we'll work on this uh changing the background so if we click on this question then it should the background should change to green color if it is correct and if it is incorrect then the color should be the red color so how we will try to make this so we will make use of directives so directives in angular helps us to manipulate with the dom element so we will try to manipulate with the storm and try to change the behavior like sorry not behavior the style of this particular card the option card okay so let me just tell you how we can create a detective in angular it is very simple so we are now we are supposed to create a custom directory so for that just open this vs code click this new terminal and just write the command n g g d for directive and the directive name so i'll give the name as change bg okay change bg even change background color and hit enter so now it will create a directive for us inside this app folder here you can see down below we have we are having this change directive so i will not use this spec file i'll delete it because we are not doing testing spec file is basically for testings so i will delete this okay now this directive will be this is actually very simple because it takes one input and according to the condition if condition is true then it will be green color if the condition is false then it will be red color so first of all let me have a input property called as at the rate input and the property name should be is correct this is type boolean and initial value will be the false will be false okay and now we are playing with the element reference so let me inject the element reference first so i will say e l or e f element reference element ref this down one element ref and the second thing we will read a renderer render is basically helps we'll we'll be using that renderer here to style okay so for styling you will be using it because it will help us to style our native elements so whatever the element will grab it so it will help us to style that so i'll say private renderer and i'll just have this so we use renderer too so always try to import also see i'm just pressing tab button so it auto imports here you can see everything is imported on the top whatever i am using element ref printer 2 then this add the red input and this directive already we are getting it all right now i will be using host listener okay why we am using host listener that it will check for the click event okay whenever the click event happens so it will check that and it will call our method here so let me just call the host listener see this is the third one press on tab and it is auto imported on the top c this is imported and this host listener asks for a parameter called as event name which event i want to check i want to check click event whenever this click event is called i will trigger this method called as answer and this answer inside this method i will have this option if condition if is correct if is correct is true then display green if it is false then display this so i will have the green logic here and red logic in the else block all right so just say this dot renderer dot set style so it will help us to set my style if i open this it will ask for the element reference will say e l so i'll say so i have this e f let me change it to e l to be more precise so i'll say this dot so i'll say el dot native element okay and now what i have to change the native element i have to change the style so i'll say style which style i want to change i want to change the background so i'll say background and the value what value i want to apply i want to apply a green value so i'll say green all right let me copy this and paste it five times let me show you where i want to paste so two times in the if block and three times in the else block okay so because i want to apply three styles first of all if you see here i want to change the background to green color and the border to gray color and also if you talk about this text i want to make this text as white color all right so first background is there second thing i want to change is the color of the text i want to change it to white so i'll say star f and i'll say border change the border to 2 pixel solid and gray color all right let me copy these two because maybe i can copy hall and i can just paste it here because everything is same only one thing will change this green will be changed to right now and everything will be the same let me save it so our directive is ready okay but i want to use it somewhere i want to change the background color of the options so this is my options i'm going to change the bg color in term of condition what condition it is so if you see i want to change the bg of this so i'll have to use this directive now so just copy the selector change directive and go inside our options scroll up here you can see in the options we have this div in the list so i'll use it here and also this is expecting an input called as is correct and that value will pass it from options okay option dot correct because this option has this property inside it if i just show you in the question.json so this has this property correct and this value is true so if it is true then it will display green color and things will work as i've already explained okay let me save it and let's check on the browser how it looks let me check if things yeah compile successful let's go here if i click oops i i'm not able to see the change because angular is very fast here okay it is going to the next question so let me add some delay to see the change in the background color okay so let me add some delay because there is no reason this is the reason that i'm not able to see any changes red or green color so i'll add some delay very quickly here so i'll just use set timeout to add some delay all right so adding delay is very simple all you have to do is use the set timeout correctly so maybe below here i'll use the set timeout all right so it is why it is lagging i'm not sure yeah so go inside this because i want to do it below because whenever the set timer it should run only for the desired things i want this current answer to be initialized anyhow so i'll not take that inside this i'll say a delay of 1000 millisecond which is equivalent to one second okay and i copy this part below part and paste it inside this shift alt f and for the else block i'll do the exact same but this time the points will be down below and everything will be in the set timeout part this is set timeout not this one for 1000 delay and i'll paste the things here inside this let me save it and let me check on the browser the behavior now if i select this correct option i can see i'm getting this green color for one second if i select the wrong answer i can see the wrong background color and also we are getting a border and color is also getting change of the text into white color all right so this was all about changing the behavior of this particular dom all right now only one thing is pending which i have already promised that i'll do it in the last like whenever i am coming to my last question and i can see when so this is my last question so whenever i click this option so i get nothing new and this is getting incremented again which is incorrect so i want to display a result page okay so let me first design the result page and then maybe i can just write some logical part here and there okay so for that page i will use again a d flex so let's go here and inside this question.html so this part is what belong to this this part belong to options this is for questions this is for progress bar this is for i'm not sure what yeah the top part so what i'll do is i'll continue all this thing into ng container so starting from this div to this div i'll just say control x and i'll have a ng container i'll paste inside that and let me close this ng container i will add one more ng container for the result part okay and inside this let me add the code or static code for that so i'll save dot row dot d flex and this time justify i have to disconnect content between all right and inside this i'll have two things first on the left side i want to have an image again for the source part i will be having some reference of mine so i'll just copy that and paste it inside this so again i'll share it in the description below if you want to use mine then you can use it or you can use your own okay i have pasted it here and i'll give this thing some styling so i'll style it and give the width of maybe 50 and let me add some class as well so that it should look better in small screen as well so i'll say class and let me give first image fluid and and then cool sm 12 and for the small screen and mx auto so that should be in center so image is done and now let's do for the right hand side the div which consists of all the static elements like score total score total wrong answer correct answer and all that okay so let me just have that div so div dot result okay and this will be center so i'll say text center and second thing i need this cool md6 so that it should divide into two parts and no it's md not mg so cool md6 and for the smaller screen it should take all the 12 screen size so i'll say coal sm 2l okay and inside this i will have all those static elements you guys can skip if you don't want to see all this i'll just fast forward it for you guys so in this way we this is all the static element you can just pause my video and you can just write it down the way i have written it okay all right so now i will use the interpolation because i know the total questions how many questions are there so i'll make use of the question list dot length so that i can just have that so i'll say question list list dot length like how many questions uh it's there so it is total question attempted and second thing is total correct answer and total wrong answer and we have our score okay so for score i have already a property called as points okay so this is how we will interpolate it points and we have correct answer and we have incorrect answer so for wrong answer i'll say in correct answer and for correct answer i have same property and this property name this name is coming from i have already created this property in here if you see correct answer and incorrect answer okay let me save it and let me check on the browser how it looks now you can see below this i can see this uh this icon congratulation icon and this total question attempted your score and everything if i just change it from here if i give any question so i get 10 points you can see this is getting updated and total correct answer is also one now but i don't want to display it every time i want to display it when i am finished with my quiz okay so for that i will create one property the property name will be is quiz completed this is of type boolean and now it will hold initial value as false okay so is quiz completed so i'll use this inside our ng container so i'll use the if condition for this to display when i want to display this so let's start n g if if my quiz is completed if it is true then display this result okay and at that time i don't want to see these things the options these points and everything so this is already inside ng container now i have containerized everything so i'll say this container as star ng if this will be opposite of that okay opposite of this so i'll just add a exclamation so if quiz is not completed which means it is not completed then i will display this let me save all and let's check now you can see this that get hidden so if i if i so let's try to finish this quiz with all the correct answer let's let's see if we can do so this is correct this is xenom this is my okay so give some wrong answer as well so that we can test everything so i'm giving some random wrong answers so you can see this quiz is completed but still i'm not able to see and the reason for that is because i haven't applied that because we it is false every time i haven't initialized it okay so for that let me tell you where i can so this is the time i will use this current question number you're getting me so now this will helps us to get the value if the quiz is completed or not so i'll say if my question number if my current question number is equal to equal to my last question so if how i can get the last question my question is dot if we are on the last question then what it should do it should complete my quiz so it says this dot quiz this dot is who is completed equals to true and i will stop the counter i don't want to start the counter now so i'll say stop counter all right because stop counter will unsubscribe the interval okay so this is the reason i have this so if i save it now and let me try to do the same thing let me try to give the quiz again wrong answers correct wrong [Music] wrong this time i'll give you between the points and okay correct answer filter is correct here and this is also correct so i can see my quiz is completed now i can see total question attempted is nine correct question was six wrong answer is three and my score is 30 okay so this was all about how we can create a quiz application in angular from scratch so this was all step by step so i will highly recommend you guys to follow my steps and complete this application all right and i really want you guys to just comment down in the in the comment section that you have completed this application and if you are facing any issue or any error while creating this application you can let me know that i already have my telegram channel so i'll put that in the description list you can connect with me and we can discuss whatever you are facing so that i can solve it in a very better way all right guys so if you really want to support me then please give it a thumbs up button and you can share your feedback in the comment section if you really want so that's it from this video and till that next time uh okay so for the next time i'm planning for uh creating a chat application in angular plus dot net core signalr so please stay tuned for that also that video will be dropping maybe in next week made of the next week so please stay tuned with me alright guys so goodbye and keep learning

Channel: Let's Program

Views: 3,430

Keywords: angular quiz, angular quiz app, angular quiz application, angular 12 quiz app, angular project, angular begineer, angular demo project, angular project for beginner, angular complete project, angular quiz application from scratch, angular 12, angular 10 quiz, quiz application, angular latest project

Id: ITPjL7L4sqU

Length: 106min 21sec (6381 seconds)

Published: Sat Nov 06 2021