Angular 5 Quiz App With Web API

quick demo of this video tutorial in this tutorial we will develop a quiz application from scratch using angular 5 and web api using SQL Server database so here we have the final output from this tutorial first of all we have to register the participant here name of the participant will be Fiona green then email Fiona one two three at gmail.com click on start and here we have the ten random questions from the database one question at a time here we have shown a timer and here we have a progress bar to indicate the number of questions attended by this participant here we have the serial number here we have the question along with that some of the question may have some image and here we have the options after completing ten questions here we have the result of this quiz program here we have the participant name then score nine out of ten and time taken by the participant if you want to submit this score to the Web API project you can click on the submit button and if you want to restart this quiz program you can click on this button and here we have the ten questions with correct answers correct answer is marked with a green tick mark if there is an incorrect answer we will mark with incorrect text here if you want to sign out from this application you can click on this Sign Out button here so from this tutorial you have to learn a lot of things so I hope you will find this tutorial helpful for your upcoming angularfire projects so please watch till the end of this video tutorial what's up YouTube welcome to dotnet mob in this video I will show you how to develop a quiz application in angular 5 with web API before sad in this video tutorial I would like to ask you a favor if you found this video helpful please thumbs up this video if you are new here please please subscribe to this channel dotnet mob first of all we have to create an angular 5 application inside this project folder so let me copy this for the path from here and then back to via score later here and go to file then open folder and paste the path reference here hit enter then click on select folder here now here we need to create an angle on 5 application for that you can use angular CLI command in your command prompt or you can use integrator terminal from this IDE for that you can go to view then integrator terminal in order to create an angular 5 application you can use this command ng new the name of the application I will name this application as angular 5 hit enter currently it is creating an angular 5 application along with that it will install some default packages from NPM so I will be back after this installation process finally we have successfully created the angular 5 application as part of that we have a new folder with project name and we'll have fun inside this application we need to create few components and service class so here we have a brief structure of our angular 5 application inside this application we need to create four additional components register component now bar component quiz component and result component using this register component we will register a new use of with name and email address after a successful registration we need to show a top now bar for that we have a now bar component here inside this component will show the application name and a logout button and here we have the quiz component inside this component we will show random 10 questions from our database one question at a time with its options and finally we have the result component inside this component may be sure the output or result of this quiz along with that we will show questions and correct answers apart from these four components we have a service class inside shared folder quiz service inside this class we will have common functions and functions for consuming Web API methods and here we have the routes dot T as file inside that we have to configure routing for this small application finally we have all folder inside that we have odd guard or TS file with this file we will deal with authorization and authentication inside this application so first of all let me create these four components for that back to visual studio code editor before creating these components we have to navigate inside the project folder which is angular 5 CD angular 5 hit enter in order to create an angular 5 component you can use this angular CLI command ng G for generate C for component first therefore we have register component register after that we have navbar component then quiz component finally we have result component so here we have created required components in order to see these components you can expand this SRC folder here so here we have created now bar quiz register and result component now we have to create this service class quiz service dot es file for that let me create a folder with named shade inside that we can create this service class so right click on this folder then open in command prompt in order to create a service class you can use this command ng g for genre s for service and name your service here i will name it as quiz now let me run this application for that we need to open one more terminal so click on this path button here first of all navigate into project folder angular 5 then use this command ng serve double - open it will come bail and open this application in our default web browser so here we have loaded our angular application from 4 thousand and 200 so this is how the default angularfire application looks like now let's customize this application for that bag to be a score editor here then open index dot HTML for this application I will be using materialized CSS for front-end framework so here we have materialized CSS it is almost similar to bootstrap framework in order to use this framework we have to add few stat sheet and JavaScript file inside index dot HTML first of all we have the style sheet for this friend and framework after that we have a JavaScript reference for the framework so I will paste the reference before this body end tag in order to work this javascript file materialized we have to add reference for jQuery library so here we have added jQuery script reference along with this front-end framework I will use materialized icon from Google in previous tutorial we have used for our some icons so here we have the statute reference for material icons then back to the default component which is app component or TS and corresponding HTML file will be this one app component dot HTML I am going to replace this default HTML with router outlet router - outlet in order to work this router outlet we have to configure routing inside this application for that I will add a new file inside this app folder right click on it then new file I will name this file as routes dot TS in order to configure routing inside this application we need a constant so here it is export constant I will name this constant as app routes it's of the type routes basically it is an array of objects in order to use this routes class here we have to add an import statement here import routes from angular router now let's add routers inside this application for each route we will have an object like this path is equal to register then component is equal to register component so here it is you can click on this and it will automatically add the required import statement at the top of this file here we need to add one route for quiz path is equal to quiz then component is equal to quiz component after that we need a route for result path is equal to result then component is equal to result component finally we need to add one route for default routing so path is equal to empty string then redirect to register component or register URL and we have to set this path match as full now inside this file we have configured routing for this application now we need to tell the application to follow these routes for that open app module dot ES file first of all we have to import router module so import router module from angular router now inside this imports are here we can do this router module dot for root function can be called inside that we have to pass this constant approach so let me copy this and paste in here in order to add an import statement for this constant you can use this shortcut hold control then press period and click on this import statement here now let me save all of these modifications and back to the application here so by default we are inside the register component now let's try quiz route let me copy this and paste in here he ender so here we have the text from quiz component finally we have result route so here we have the test from result component so our application design will be almost like this first of all we have an app component inside that we need to show this register component with register route after a successful registration we will open this quiz path inside that first of all we will show a now bar component below that will be sure quiz component for loading random ten questions one question at a time after completing these ten questions we will navigate to result route there also we have now per component for showing application name and sign out button below that we have a salt component so this is the overall design for our application now in order to show now bar component inside quiz component route and result component route we can do this back to use code editor then open quiz component dot HTML here we need to add selector for now bar component okay for that go to now bar component type script file so here is the selector app - ow bar let me copy that and pasting here now we need to add a tag with this app now bar so this tag will be replaced with the HTML inside this now bar component HTML now we need to do the same inside result component also result component got HTML file it will add the number here let me save all of these modifications then back to the application here so with this result route we have first of all we have the text from now bar component below that we have text from result component same in the case of quiz route also now bar works quiz works in order to participate inside this quiz user must be registered inside this application for that I'm going to create a registration form inside this register component dot HTML file for that we will be using card component from front-end framework inside this material I CSS here okay you will be using one of these cards template inside this HTML file here so here it is here we have a div with class card inside that we have another deal with class card content inside this div we want to design the registration form you can see some form template inside this material I CSS documentation just search for forms here so here we have some sample forms here like this we need to create one form inside this div here so I will start with form tag then hit tab we don't need action attribute here instead of that we need a local reference register form is equal to ng 4 okay inside that we need two text boxes one for name and one for email so first of all we need a deal with class row inside that we need another deal with class input field call and actually hit tab inside that before name textbox we need to show a material icon it will be account circle this one so we can do this we need an eye tag with plus material - icons then prefix class inside that we have to give this I can name instead of space we need to use underscore so here we have account underscore circle after that we need an input control name attribute it will be name itself then we need a local reference name then ng-model so here we are designing this form using template driven approach in angular 5 so that is why we have given this attribute ng model after this input text box we need a label inside that we want to show name so here it is name so here we have added a div for name textbox like this we need to add one more div for email also so let me copy pasted you here instead of accounts circle icon we have mail underscore outline name of this text box will be email then local reference will be email then same for label also finally we have to add one more deal for submit button so here it is we have a button with type submit and here we have the required CSS class and here we have the button text as start in order to work this template driven approach we have to import forms module inside I have module dot ES file here first of all let's add the import statement import forms module from angular forms now we need to add these forms module inside this import array here now let me save all of these modifications and back to the application here so here we have a registration form for quiz participant now I want to add global CSS rules inside this application so open-skies dot CSS then i will copy paste required CSS rules here let me save this and back to the application here now before this form i want to add a form title or form header for that we will add Judis here do with class Paul than s6 like this we need one more do so let me copy this and paste him below that inside this first deal I will add an edge to hand off inside this head now we want to show quiz registration and inside this second do we want to show an image so we need an IMG control here then we don't need this alt attribute now we have to add style attribute here width is equal to 250 pixel then height is equal to 250 pixel and here we need to add 1 class class is equal to offset s3 now we have to give image source inside this SRC attribute I want to give this image logo dot PNG for that I'm going to create a new folder inside this assets folder right click on it then new folder I will name this folder as IMG inside that we can copy this logo dot PNG let me drag and drop inside this IMG folder here so here we have logo dot PNG now inside this as the attribute we have to provide the respective image path for that we can do this assets inside that we have IMG folder inside that we have the image logo dot PNG let me save this and back to the application here now inside this form we need to add some validations so back to the views code editor I want to make these name textbox as required so we can add required attribute here email text box is also mandatory so I will add the same required attribute here also now in order to validate the email format first of all I will add a pattern email pattern property inside this typescript file here now back to the component HTML then as this attribute pattern is equal to email pattern property I mean copies and piecing here let me save all of these modifications and back to the application here so if i try to endure' something inside the stash box then clear the text you can see a bottom red border indicating form validation error so this is what we have done inside this style or CSS rules okay here we have given this style if there is an input control with these two classes ng invalid and ng dirty we will show a bottom red border so this ng invalid class will be applied when the form control is not valid and this ng dirty class will be applied whenever there is a change from its initial value now I want to disable this submit button whenever this form as a whole is not valid for that we can do this we will add the disabled attribute for this button here disabled attribute will be applied whenever this register form is not valid okay let me save this and back to the application here so initially you can see that this submit button is already disabled if i try to endure' something inside this test box you can see that this submit button is enabled here we have a problem with email text box even though this email is not in correct format we don't have any form validation error so let me back to the vs code editor here we have given this pattern attribute here with email pattern property and here we have given the pattern inside result component dot TS file sorry here we need to add this email pattern property inside register component or TS file instead of result component or TS file let me save all of this mode vacations and back to the application here initially submit button is disabled let me try to endure something inside these text boxes here we have an invalid email format let me complete the email address with a valid form at gmail.com that's it so here we have completed with quiz registration form before continue with this angularfire project we have to create a Web API project with required Web API methods before web api project we have to create SQL Server database so here is my SQL Server management studio so let's create a database for that right click on databases then new database I will name this database as quiz DB click on OK so here inside this quiz DB we have to create two tablets one for participant and one for questions so first of all let me create one table for participant so starting with participant ID column participant ID as integer then we have name column as work 50 then email mark half of T then score as individual finally we have timespan column as individual we will save the participant name and address inside these two columns after completing this quiz program we have to update the score and total time taken for this quiz program I want to set this participant ID column as the primary key I want to set this same column as identity specification so go to column properties then expand identity specification set each identity as yes in order to say this table can use the shortcut control s and I will save this table as participant click on OK now let me create one more table for questions first of all we have ID column Q and i D it's of the type in d'azyr and we have question column its of the type work 250 and we have imaged name column as walk a 50 and we have options option 1 as walk hour 50 then option 2 as walk 50 then we have option 3 as walk 50 finally option for as walk a 50 finally we need one more column for correct answer so column name will be answer it's of the type in desert so complete question description will be saved inside this queue and column then inside this image name column we will save the name of image associated with this question it will save those images in our web api project later and we have 4 option columns option one option two option 3 and option 4 finally we have the answer column inside this column we will save the correct option index if the correct answer is option one maybe save 0 inside this answer call if it is option 2 we will save one inside this column answer so it is basically like index in an array it will start from 0 then 1 2 & 3 I want to set this column as primary key I want to set the same column as the identity specification so select the column then go to column properties then expand identity specification then set is identity as yes in order to save this table you can use this shortcut control s I will name this table as question click on OK now inside this question table I want to insert some questions for that I have prepared an SQL script so let me open one more tab here then make sure that we have selected the quiz DB here then I will paste the script here click on execute so here we have inserted few questions inside our question now right-click on this question double select top thousand rows so in total we have inserted 17 questions inside this question tablet now let's look how we can work with this database inside the babyís project so let me create a Web API project for that here is my visual studio ide in order to create a new project you can click on this new project here or you can use the shortcut ctrl shift and then select web under wishes C sharp then select asp.net web application and name your application here I will name it as Web API then select the location where you want to save this application here now click on ok now select Web API template keep other options as it is click on OK so here we have created a brand new web API project in order to run this application without debug mode hold control then press f5 in this Web API project we have to create some Web API methods but we have a problem to consume those Web API method from this angular 5 application that is this Web API project will block request from another website which is hosted in a different domain or in a different port number so we have to enable cause inside this Web API project C o RS cross-origin resource sharing if we can enable course inside this Web API project then we can consume this Web API methods from this angular 5 application so let's look how we can enable course inside this Web API project in previous video tutorials we have already discussed select the project from solution Explorer then go to tools library package manager package manager console in order to install web api cause you can use this nu gate command I have given these commands in video description you can copy/paste from the now hit enter once installation is successful let me build this solution for that you can use the shortcut ctrl shift b or you can go to build then build solution now back to the application here you rewrote this page some of you may get this problem it is due to the version difference between system dot web dot h t TP and installed web api cost package here you can see that here we have installed web api cause with version 5.2 point 4.0 and here we have system dot web dot h t TP five point zero point zero point zero now we have to update this for that first of all you have to run this command update command in package manager console let me paste the command here I have given all of these command in video description you can copy paste from the now hit enter now we have to reinstall core packages Web API core packages so here we are going to install Web API core packages naught Web API course so this will install core assemblies with latest version so it will update this system dot web dot H DDP now hit enter now let me build this solution again reload this page so here we have successfully installed web api cost package and along with that we have updated web api Co assemblies now we have to configure this Web API project in order to allow request from this port number four thousand and two hundred so back to visual studio then inside the solution Explorer now you can see a folder app - start inside that we have Web API config file inside that we have to add this extra line here in order to use this in a Brokaw's class we have to use this namespace system dot web dot h t TP course now i want to format data response from this Web API project for that you can expand this global dot s X file here inside that we have this C sharp file here we need to add these two lines here so here we have said this JSON format and here we have removed XML format now it's time to create Web API controls inside this project before that I want to add ad or.net entity model for the database that we have just created so right click on this models folder here then add new item select data from the Left panel then select ad or dotnet entity data model I will name this data model as DB models click on add select generate from database click on next now click on new connection here here we need to provide the SQL Server instance details for me it is local backward slash SQL e 2012 then select database from this drop down here we have to select this quiz dB click on OK after creating this entity model there will be a class with this name in order to interact with database we have to create an object of this class so I am going to edit this class name here as DB model click on next if you have more than one version of an ad framework you have to select one version then click on next then select the database objects that we need to add inside the entity model I will select these two tablets participant and question click on finish so here we have successfully created the entity model so this is how the diagrammatic representation of entity model looks like now back to the solution Explorer we have to create two controllers here first of all I will add a controller for participant right click on this controllers folder then add controller select Web API to controller empty click on add I will name this controller as participant participant click on add so first therefore we have to create a Web API method to insert a new participant so it will be of the type HTTP POST HTTP POST and here is the route attribute for the method a i /in third participant so method will be something like this public and this method will return an object of participant class participant we have to add the corresponding namespace sorry something went wrong here we have the participant class inside the DB model okay here we have misspelled participant in order to modify this we have to start from our database itself we have to rename this table here press f2 in order to rename this tablet name participant hit enter now back to visual studio now double-click on this DB models dot EDF X now remove this participant from here right-click on it then delete from model click on yes now we have to insert the tablet again for that rightly here then update model from database expand this tablets node then select participant click on finish so here we have added updated participant entity model now let me save all of these modifications so here we have updated participant class name with correct spelling now let me copy this class name from here then paste inside this participant control in order to use this class we have to use this namespace where baby i dot models i will name this method as insert for this method we have a single parameter it's of the type participant class model first of all I will start with using statement inside that we will create an object of DB model as DB is equal to new DB model in order to insert a new record inside the participant table with these details we can do this DB door participants dot ad for this function we will pass this model finally we need to call the function DB dot save changes after all we will return the model return model after inserting a new participant entity framework will update newly added record participant ID inside this property here like this we need to add one more Web API method to update score and time taken by the participant so it will be of the type HTTP POST HTTP forced and here we have the route for that Web API method API forward slash update output so it will be something like this public void update output for this function we have a single parameter participant like we have in insert a baby I method let me copy that and paste in here I will start with using statement so let me copy this using statement from this insert web api method and pasting here then we can do this DB dot entry inside that we will pass this model dot state is equal to entity state dot modified finally we need to call this DB dot save changes function this method does not return any data so let me remove this line from here now we have to create one more controller right click on controllers folder then add controller select web ABI - controller empty and click on add I will name this controller as quiz controller click on add first of all inside this controller we need a web api method which return 10 questions so it will be of the type HTTP GET HTTP GET and here we have the route attribute for this Web API method API forward slash questions so it will be something like this public HTTP response message HTTP response message and this function name will be get questions for this function we don't have any parameter I will start with using statement inside that we will create a DB model object in order to use this class we have to use this name space model namespace so let me copy this from participant controller then paste in here inside quiz controller DB model as DB is equal to new DB model now from this Web API method we have to return 10 questions from questions table here we have the questions tab inside our database out of this we have to select ten random questions for that we can do this we have a variable Q and us inside that we have selected random ten questions from our questions table so here we have selected all columns from question rabble except this answer column during development of angular 5 application we will discuss why we skip this answer column so here we have selected ten random questions out of 17 questions now I want to format these questions array said that these four options will be saved under a new options array because it will help during the design of our angular 5 application in order to format this question sorry we have done this so here we have selected all these columns but these four options are saved in another options are here finally we have to return this random 10 questions for that we can do this this rod request dot create response and heavy have returned this updated property with this anonymous object format so with this function we will return ten random questions out of 17 questions finally we have to create one more way babyís method to return answers for these ten questions okay so it will be of the type HTTP POST because of some security reasons it would be better if you can use HTTP POST and here is the route attribute for this Web API method but there will be something like this public HTTP response message but their name will be get answers for this method we have integer array as parameter int array Q IDs so inside this parameter we will have ten question IDs which we have returned from this method get questions in order to return answers for given IDs I will start with using statement we have DB model as DB is equal to new DB model inside that we can do this here we have selected answers for given question IDs and finally we have returned the result back to the caller from this Web API method we have written an integer array of fences and inside the returned answer array we have maintained the order of question IDs that we have received through this in desire a parameter Q IDs that means inside the returned integer array first element will be the answer of the first question inside this queue IDs array in order to maintain this order we have added order by statement here we have to do one more thing inside this question table we have a column image name inside the column we will save the name of image related to the question if there is no image related to question then we have null value inside the column otherwise we will have name of image now we have to save these images inside Web API project for that right-click on this project then add new folder I will name this folder as images inside the folder we have to add these two images so let me cut these two images from here and we have to paste those images here so here we have completed with Web API project rest of the development will be in angular 5 application so let me save all of these modifications then build this solution now back to vs court editor so far inside this angular 5 application we have designed a crystal registration form now we have to insert a new participant with this given participant name and email address by calling this Web API mattered insert so let's look how we can consume this Web API method from this angular 5 application here we have the quiz service class from this service class we will consume Web API method before that I would like to divide this quiz service class into three parts first of all we will have class properties after that we have helper methods below this part we will have common functions for this application along with that we have class constructor after all we have HTTP methods under this part we will have functions to consume web api methods from this project first of all inside this quiz service class I will add a new property root URL inside this property we will save the web api base URL so let me copy this and pasting here in order to consume the babyís method from this project we have to inject HTTP client so we can do this private HTTP it softly type HTTP client now let's add an import statement for this HTTP client class here import HTTP client from angular common HTTP in order to consume this Web API method insert we can add a new function here insert participant it has two parameters name and email first of all we have a body variable inside that we have passed participant name and email address finally we have made the post request by calling this HTTP POST method first parameter will be the uri for this web api method inside this route we have the base URL for this Web API project and after that we have appended this route attribute /ap I insert participant finally we have passed this body variable with participant name and email address now we can call this insert participant method from this form submit event so let's wire up a form submit even for that here we have the component HTML register component HTML and here we have the submit event ng submit in order to pass values from these test boxes we have used local reference name and email name dot value then email dot value now we have to define this on submit function in corresponding typescript file so here we have register component or TS file here we need to define the function on submit for this function we have two parameters name it's of the type string then we have email it's of the type string here we need to call this service class function insert participant for that we have to inject this quiz service inside this component so we can do this private quiz service it's of the type quiz service class now click on this it will automatically add the import statement also so here we have the quiz surface corresponding import statement is added here now we can call the function for that we can do this this dot twist service dot insert participant into this function we can pass name and email address name comma email this in third participant function will return an absorber so we can subscribe to that absorber here call subscribe function inside that I will declare an arrow function with a single parameter data it's of the type any after successful registration we have to navigate quiz component for that first of all let me inject router here private route it's off the type rocker class for that we have to add the import statement so hold ctrl then press P read and click on this import statement now we can do this this dot router dot navigate inside that we can pass an array like this forward slash here inside this route dot TS file we have configured corresponding path as quiz so let me copy this and pasting here along with this registration I want to implement some sort of participant authentication for that here inside this Web API project from this insert Web API method we have written updated participant object after insertion inside this subscription I will save those details for that I will use local storage for sure for we will clear local storage after that we will save those that us or participant object with updated data from this Web API method inside local storage with key participant I will tell you how we can use this local storage participant for participant authentication in a bit I will tell you how we can use this local storage participant for participant authentication before that since we have used HTTP client here we have to add corresponding module inside app module dot es file that means we have to use HTTP client module so first of all we have to add the corresponding import statement here import HTTP client module from angular common HTTP now we need to add this class inside this imports array here along with that we have to add quiz service inside this providers array now let me add the corresponding import statement for that whole control then press period click on this import statement now let me save all of these modifications and back to the application here now I am going to insert a new participant participant name will be Angelica then email address will be Angelica 1 2 3 at gmail.com now click on start so here we have inserted a new participant and we have navigated into quiz component now let me check the database here we have my management studio right click on participant table then click on this select top thousand rows and here we have the record for Angelica after successful registration we have saved a similar JSON string object inside the local storage with this key participant now let's look how we can use this participant in order to implement some sort of authentication inside this application in this video we are going to implement client-side authentication using this local storage participant if you are serious about user authentication we have discussed how to implement user registration and how to implement login and logout in angular 5 with Pepe I using token-based authentication if there is no authentication participant can participate Chris program without registration let me show you what I meant by that here we have already registered now let me open the same application incognito mode by default we are inside the register component if I want to access the quiz program we can directly enter the quiz component URL here hit enter here we are inside the quiz component in order to avoid these problems we are going to implement user authentication so let's look how we can do that as we have discussed in project structure we need one more auth folder inside that we have to create or guard or TS file so inside this project I'm going to create one more folder right click on here then new folder I will name this folder as auth inside that we have to create one or so right-click on it then open in command prompt in order to create a guard file we can do this ng G forgery then G for God I will name this God as odd God so we just need to type auth here hit enter so here we have successfully created the old guard here we have the class all God it implements can activate interface from angular library so we need to define this can activate function this function can return these types of data but in case of this application we will return a boolean data indicating whether the current component is allowed to access or not so first of all we can do this so first of all we will check local storage participant if it is not null we can say that this participant is already registered so in that case we will return true if participant is not registered we have to open register component here for that first of all let me define the constructor here now we need to inject router here private router it's of the type router now we need to add the corresponding import statement here we need to import router from angular router if user is not registered we will navigate register component along with that we will return false so inside this odd guard class we have defined how do we want to implement user authentication inside this application now we need to tell the application about this odd car class for that open app module dot TS file then we need to add all God class inside this providers array let me add the corresponding import statement hold ctrl then press period click on this import statement now open routes dot T as file here we need to authenticate these two components quiz component and result component for that we can do this can activate is equal to we have to pass an array inside that we have to pass or God need to pass the same property for this result component also we copy this and paste in here now let me save all of these modifications and back to the application here I'm going to open this same application in incognito mode by default we are inside the register component if I try to access quiz component here we will be redirect or histor component same with result URL also result hit enter since we are not authenticated will be redirect to register component after successful registration here we are inside the quiz component inside this quiz component we will show ten random questions one question at a time for that we have to consume this baby bi method from quiz controller this one get questions so first of all let me define a function for consuming this Web API method inside this quiz service class here so here's the function get questions here we have called get function from HTTP object inside that we have passed the URI for this Web API method here we have the base URL after that we have appended route attribute API forward slash questions now we can call this function from quiz component type script file I will call the function inside this ng on in lifecycle hook before that we have to inject required classes here first of all we have injected router and then we have injected with service now let me add required import statement hold ctrl then press period click on this import statement same focused service class also in order to call this function get questions we can do this this dot quiz service dot get questions it will return an observable so we can subscribe to that absorber here subscribe inside that we will define an arrow function data it's of the type any and here we have the function body this Web API method will return 10 random questions so we need to save those 10 random questions inside this and we'll have 5 application for that I'm going to add few properties inside this quiz service class here under this properties section we need to add few properties first of all we have an array Q and s in order to store 10 random questions after that we have seconds property it's of the type number inside that we will save the total time taken by the participant after that we have timer property using that property we will count the time taken by the participant and finally we have the queue and progress it's of the type number inside that will save the number of questions attended by the participant so inside this quiz component we have to save those 10 questions inside this property q NS array so we can do this this dot kiss service q NS is equal to data inside this data property we have ten random questions now I will define one more function for time counter start time' inside that we have initialized this timer property by this function set interval inside this function we have incremented seconds property by 1 upon each one second interval okay here we have the function this function will be called after each one second here we have given thousand has millisecond it is equal to one second now let's start the timer after retrieving those ten questions so we can do this this dot start timer function can be called here before all of this operation we have to initialize these properties so we can do this we have initialized seconds to zero and we have initialized q and progress is equal to zero now we can design this quiz component for that you can open quiz component HTML file first of all we have app now bar so first of all we have to design now bar component so here is the corresponding HTML file here we are going to use navigation component from materialized CSS now bar it will be almost similar to this now boss here now let me copy paste the HTML code that I have prepared for now bar inside this application here we have enough component here we have an application name along with that we have a sign out button now let me save all of these modifications and back to the application here so here we have the nav bar along with that we have a sign out button now I am going to add a click event for this sign out button so here we have the corresponding HTML so here we have the click event and we click on this button we will call this sign out function now we need to define this sign out function inside the corresponding type script file here now bar component or TS file so here we have the function sign out along with that we have to inject router and quiz service class here now let me add the required import statement here inside this I not function first of all we have played local storage and then we have cleared the timer finally we have navigated to register component so here we have completed with now bar component now back to the quiz component dot HTML file here below this application now box we want to shorten random questions out of 17 questions one question at a time for that I will start with raw do so we want a do with class raw we will show this day only when we fetch these ten random questions inside this property so we want to show and hide this div for that I am going to use ng-if directive so this the visible only when we fetched random questions inside this property q NS array inside that we have one more deal with classes called s H then offset - s - in order to show a question we are going to use card component from materialized CSS so card components will be almost looks like this so let me copy paste the HTML for card component here so here it is here we have a div with class card these two classes will give a background color for this div inside that we have another day for card content inside this pan may be show the serial number of questions for there we will use the Q and progress property from quiz service it will start from 0 so in order to get the corresponding serial number we will add one to that below that we will show the exact question description with a paragraph so here we have the array q & us from quiz service class and here we have provided the indices using this q NS progress and inside that we have a property q and for question description properties inside this Q and as array can be understood from this Web API method get' questions so here we have Q and ID QN amaz'd name and finally we have the options array below this question description we want to show image related to question for that we will have another div here will be sure this day only when if there is an image related to question so here we have the ng-if directive based on this image named coral if it is not null we will show this Dave otherwise we won't show this do inside the do we have an IMG control with class center and here we have the source of image here we have the base URL for this Web API and this property is defined inside this quiz service here root URL and these images are saved inside this images folder so that's why we have concatenated forward slash images forward slash and inside this array we have the image name okay finally we have said this style attribute for width and height after all we have to display options related to this question for that we can use this card action do so let me copy paste the code for list options so here we have the UL component and here we have the ng container inside that we have ng for directive for iterating through these options on each iteration each option will be stored inside this option variable and index will be stored inside this I variable inside that we have this list item Li for some questions there may not be 4 options as you can see here here we have two options true or false for option 3 and option for value will be none so in those cases we have to hide this Li element for that we have added this ng-if directive here finally we have to wire up this click event it will call this answer function now we need to define this answer function inside the corresponding typescript file here quiz component dot ts file into this answer function we have passed current question IV and selected option index so function will be something like this and so for this function we need two parameters Q ID and choice let me save all of these modifications and back to the application here boom that's it here we have shown the first question here we have the question serial number one then we have the question description and if there is an image related to question may be sure that image below this question description and here we have the available options along with this question we want to show two more things for so for we need to show the timer that we have just started dysfunction and then we need to show one progress bar indicating number of questions attended by this participant so let's look how we can do that so here we have the quiz service class inside that I will add a function display time elapsed seconds taken by this participant will be saved inside the seconds property because of timer that we have just started with this start time of function and we need to show this time in our mint second format so that is what we have done inside this display time elapse function now using this function we can show the time elapsed by the participant inside this quiz component or HTML or then I will add an extra span here time elapsed is equal to we will call the function that we have just defined now we need to show a progress bar indicating number of questions attended by this participant for that we can use preloader component from material I CSS so we need a progress bar like this corresponding HTML will be like this so percentage of completion is defined with this width property in case of our application we can add this div here it will have a class progress inside that we have another day with determinate and here we have defined the width property using Q and progress property so this will give the serial number of question and in order to get a percentage we have multiplied with now let me save all of these modifications and back to the application here so here we have the time elapsed by the participant and here we have the progress bar indicating number of questions attended by this participant now we need to define the click even for this list item we have already wired up a click even for this li element here we will call this answer function and here we have defined the function inside the function we have to update or increment Q and progress property for that we can do this inside this Web API method you can see that we have returned and arrived these properties queue and ID QN image name and options array okay and here we have added one more property and so inside this property we will save the selected option index if first option is selected then we receive zero here for second option may be say one and so on after that we have incremented this queue and progress property here finally we need to check this condition if queue and progress is equal to ten that means this this program is completed in that case we will pair this timer and then we will navigate to result component now let me save all of these modifications and back to the application here for now I will attend these ten questions in a random way so here you can see the time elapsed and here we have the progress bar to indicate the number of questions attended after attending the ten questions here we are inside a result component here we need to display output or result of this quiz program by evaluating choices selected by the participant along with that we have to show the ten questions with correct answers so let's look how we can do that in order to evaluate choices selected by the participant I am going to consume this Web API method get answers for this Web API method we have an array of queue IDs for this Web API method we have to pass an array with question IDs and this Web API method will return an array of cancers with the same exact order as we have given question IDs inside this array so back to be escort editor open quiz service class inside that we have to create one function to consume the web api method so here we have the function get answers here we have declared a local variable body we have to initialize this variable with an array of question IDs so that is what we have done here here we have the array of objects Q and s inside that we have ten random questions given to the participant in order to retrieve the question IDs we have done this Q and s dot map function can be called inside that we have selected Q and I D that means question ID finally we have made this post request first parameter will be the URI for this Web API method here we have used this route forward slash API for slash answers as a second parameter we have passed an array of question IDs this request will return an array of answers using that we will evaluate the choices selected by the participant for that I am going to add one more property here correct answer count its off the type number we have initialized with zero here now back to result component type script file first of all let me inject required classes inside this component class we need to inject quiz service and router now let's add required import statement hold ctrl then press period click on this import statement same for router also inside this component ng on a life cycle hook we need to call this get answers function for that we can do this this dot quiz service dot get answers this function will return an absorber so we can subscribe to that observable here inside the SUBSCRIBE function we need to define an arrow function with a single parameter that it softly type any then we have this function body here inside this function first of all I will reset the current answer count property to 0 for that we can do this this dot quiz service dot correct answer count is equal to 0 this dot quiz service door Q&S so here we have the ten random questions array we are going to I trade through each items inside this array for that we will use for each inside that we have an error function with two parameters element and index first of all we will compare the choice selected by the participant and correct answer from this array for that we can do this if e dot answer property is equal to the correct answer from data array so inside this answer property we have saved the choice selected by the participant inside this quiz component here so here we have saved the choice selected by the participant inside this answer component and here we are comparing the choice selected by the participant with correct answer if they are equal we can increment this correct answer count property so let me copy this and pasting here then unary increment operator in order to show the ten random questions with carrot answers I'm going to add one more property inside this qns array for that we can do this e dot correct is equal to that of this index now we can design this result component HTML for there let me open corresponding HTML file here result component dot HTML first of all we need a div with class row inside that we need another day with class called then s8 then offset - s2 then first of all I will add an h2 header with class header inside that I will show this text completed below this header we need to show the result or output of this quiz program for time being I have prepared the HTML for displaying the result of this quiz program so let me copy paste the required HTML here first of all we need an image it will be a trophy image so let me drag the email into this project folder here here we are inside the assets folder inside that we have IMG photos so I will drop the image here and here we have shown the participant name in order to show the participant name we have to create a new function get participant inside the quiz service class here so here it is get participant name during registration we have saved Jaison string for participant details inside this local storage participant here we have converted this and string back to Jason finally we have returned the participant name below this participant name we have shown correct number of answers out of 10 after all we have shown time taken by this quiz participant here we have a button with text submit this button can be used to submit this score to the web api project we need to IR up a click event for the submit button that we can do in Abbott in the same where here we have another button to restart this quiz program now we have to wire up a click even for this submit button inside that we will submit the score and time lapse by the participant using this Web API method update output so first of all let me create a function inside quiz service class here in order to consume the Web API method update output so first of all we have converted this a string of participant details into this body variable and here we have updated score and time elapsed by this participant and finally we have made this post request here this may be bi method has this route API forward slash output so here we have concatenated the corresponding route finally we have passed this post data body now we can call this function inside the submit button click event so let's add one click even for this button on this button click event we will call this function on submit now we need to define this on submit function inside the corresponding typescript file here so here it is here we have on submit function inside that we called the submit function this function will return an absorbance so here we have subscribed to that absorber after successfully updating participants CO and time elapsed by the participant we need to restart this quiz program so here it is we have created a function restart inside the function we have navigated quiz component again now inside this subscription we can call this function this dot restart now we need to add up this restart function inside this restart button here for that we can do this on click event we will call this restart function after displaying output or result of this program we need to shorten random questions with correct answers to save the time I have prepared the HTML and I will paste the code here first of all we have the header here after that we have ng container inside that we have I traitor through this array qns inside this q and variable we will have question of current iteration along with that we will have the current index inside this I variable it is almost similar to this quiz component HTML here here we have shown the question below that we have shown the available options in the same way here we have shown course in serial number then question if there is an image related to the question here we have shown the image and below that we have shown the option along with that we have two additional span here here you can see a span inside that we have shown a green check circle so this icon will be shown to the option with correct answer this pan will be shown on incorrect answer now let me save all of these modifications and back to the application here I am going to start the quiz program again now let me attend the 10 questions in a random way so here we have come baited with this quiz program here we have the participant name then score 2 out of ten then time elapsed by this participant if you want to submit this data on to the server you can click on the submit button here if you want to restart this quiz program you can click here and here we have the ten questions with correct answer now we have image a problem data inside this application is not persistent that means if you refresh this page some of the data from our quiz service class will be gone same in the case of quiz component also let me navigate into quiz URL here now let me attend few questions here now if I reload this page it will start from first question you have to make this application persistent for that I will use local storage so let's look how we can do that first of all we have reduced the component that we don't have any modification during registration we have saved participant details inside this local storage participants now go to quiz component during each timer interval we have to update the seconds elapsed by the participant inside the local storage like this we will save the time taken or seconds inside this local storage seconds and then here we have the answer function this function will be called whenever participants select and answer from the given options so after updating this answer inside this answer property we have to save this q NS array inside the local storage for that we can do this we will save the Q NS array inside local storage Q and us in the same way we have to catch this Q and progress property for that we can't do this we have saved this Q and progress inside this local storage queue and progressed now in order to avoid the restarting of this quiz program due to reload of page we can add this if statement inside this NGO net life cycle hook first of all we will check whether we have already started this quiz program or not if second is greater than 0 we will update quiz service properties seconds Q and progress and q NS local storage after completing 10 questions user will be navigated to result component to display the output of this quiz program suppose participant now we get back to Chris component using browser backward arrow in that case we will navigate result component otherwise we will start the timer to continue the quiz program now we have to Anglos these cords inside and else block here else we have to cross this else block here now inside this quiz component HTML we need to add one more condition before showing this live here so here it is so we have to check whether we have already completed 10 questions now finally we have result component now let's check what are the things that we have to update here for local storage or cache first of all inside this ng on a lifecycle hooks check whether we have completed ten questions so here we have the corresponding condition inside this if block we have populated with service properties service queue and progress and qns from local storage after that we have made this baby I request to retrieve the answers so here we will close this if block inside this else block we will navigate the participant into quiz component that means if participant is not completed with ten questions we will navigate the user back to Chris component finally inside this restart function we have to reset local storage for that we can do this we have reset queue and progress Q&S and seconds inside local storage now let me save all of these modifications and back to the application here now let me attend few questions okay now if I reload this page it should start from fourth question so let's check that so here we have the fourth question now let me convey this chris program now if I reload this page same result should be shown so that's it I can suggest some additional features and extension to this application you can implement admin side for this application in order to add questions along with options and correct answers for that you can depend on our previous tutorial angular 5 Web API code operations I have given the video link in video description if you are serious about user authentication you can check our previous two tutorials where we have discussed user registration and authentication in great detail I have given those video links in video description you can check from the if you found this video helpful please thumbs up this video and for more hours and videos like this please be subscribe to this channel dotnet mob you can download the project source code of angular 5 and web api project with the required SQL script from the link given below in video description please like and share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 77,869

Rating: 4.9514732 out of 5

Keywords: Angular 5 Quiz App, Quiz Application in Angular 5 With Web API, Develop Quiz App, Quiz App in Angular 5, Build Quiz App from Scratch, Web API Quiz App, Angular 5 Tutorial, Web API Tutorial, How to Create Quiz App With Database, CodAffection

Id: geEWd7mDlTI

Length: 83min 59sec (5039 seconds)

Published: Thu Mar 01 2018