Build Quiz App with ReactJS and Redux

so finally i'm back with another video and today we are going to be building quiz app with reac and also we are going to use the open trivia database and this is the api that we can use to showing all the question here as you can see if i just copy here and put it here as you can see we have all the results category type difficulty equation correct answer incorrect answer all right and we are going to use mui for the styling and also we're going to use html entities because as you can see here the response in response we have special character as you can see here and we can fix this issue with html entities we're going we're going to use this and also for the state management system we're going to use redux all right yeah i think let's see the final project that we are going to create and this is the final projects you can see we have the title category difficulty type and amount of questions if i click category we have a lot of category here let's click for example sport and difficulty i'm going to say medium type let's say multiple choice amount of question i'm going to say 10 for example and if i click get start we have the loading here and then we get the question as you can see the question is the option you can click that and i don't know but i'm going to say a random answer here there's no true and finally we have the final score 0 and we can back to settings if i click we get the loading here and then we get the settings alright so this is what we are going to be building so simple guys but of course you will learn a lot of things so let's get started all right so the first thing that what we need to do is we need to create a react app with yarn or npx you can do that and after you're doing this you can just say yarn start to start the app development server and i'm going to stop the final project first i think [Music] so and here it is this is what we have all right so in sources i'm going to remove couple things i'm going to remove the app.css index.css logo tasks report web files setup tests let's get rid of this and let's go to index.js file here i'm going to remove the report web files and also the css let's save let's go to app.js file i'm going to remove all the header here let's put a h1 for now let's say hello not hello but hello okay and we're going to remove the style the class here now save and let's minimize this and as you can see for refresh we have hello okay so pretty cool so the first thing that we need to do i'm going to create the folder called pages and in this case we have three pages the first page is going to be the settings settings.js file and then we have the questions.js and finally in the end we have the final screen so final screen dot js file so let's go to the setting first i'm going to say rfce and let's put settings here save and we don't need to use react here and let's go to question i'm going to say rfce and here i'm going to put questions let's get rid of this react up there and final screen i'm gonna say rfce and let's say final screen okay and let's save and we are going to bring all three component in to the app component here all right so before that i'm going to import import i'm going to install a package called react router dome because you're going to use the router so we can say yarn add react test router that's dom and hit enter and wait all right so it's time to use the react router dome we can simply go to react router.com here the link and to use that we can just simply import browser router switch and route as you can see here we need to wrap entire our app with a router and we can use switch and also we can use road and then we render the component inside this road okay let's do into the gas code here let's close the terminal here first and i'm going to make it smaller and in up here i'm going to import something from react dom so you can see from react router dom and what we need to import is basically browser router and also we can change the name to router if you want [Music] router and also we need to import switch and also we can import root okay so we can just copy this router and put it here so just make sure your app entire your app is wrapping with this router and also we can just remove h1 here and i'm going to put switch and everything you put outside the switch will be available entire your page for example you can put enough here and this knob will be available entire your app okay so inside the switch i'm going to put the road here and inside this road i'm going to specify the path first it's going to be forceless and the component we want to render here will be the settings so i'm going to put settings here [Music] the auto imports not working but it's fine we can just import settings from those last pages less settings and also we can just copy this and put that down here we can paste that two more time and this is going to be slash questions and the component will be questions and this is going to be the score and the component will be final score okay you can see final score score i don't know i cannot typing score all right so let's just import the questions from those last pages last questions and we can just import the final screen those last pages last final screen let's get to the final final screen not final scroll alright so i think we're done so now we can just save and let's go to the react app here as you can see we have settings as for the first less and if i go to last questions we get the settings that's because uh in here you can put exact to true and then as you can see you have the question if i go to score we under there's nothing here something wrong final screen final screen should be slight score all right so now we have final screen okay so pretty cool everything is work so now we need to install the mui here because we are going to use this all this component here so let's just copy this and i'm going to put that in here and hit enter and also we need to use this roboto phone you can just copy this and go to public index and we can just paste that here okay let's just remove this comment and put it here so we can just save close and now this is done and let's make it smaller or i just want to close this is basically i'm going to wrap entire switch here with container from muy so you can just put a container here you can see this is the import from mui material we can just do this with and we need to wrap entire the switch inside this container here like so and also in this container i'm going to send the maximal width into let's say small and also in here i'm going to wrap everything again with a box because i'm going to give a text line to center so let's say box like so and i'm going to again copy everything here i think cut and paste are in here and inside this box i'm going to say text align to center let's say center and also i'm going to say margin top let's say five we don't yet import the box we can just uh control space and hit enter here as you can see boxes import from mua system so we can just save and now let's see this is what we have all right we have setting everything in center all right so pretty cool so the next thing is i'm going to put the title here you can put the title in settings component or just put it in here i'm going to put it in here i'm going to say typography for from the mui material and in here i'm going to say let's say quiz app quiz app and i'm going to let's say ariane into h2 and also i'm going to put the phone wake to bolt let's say bolt let's save and let's take a look now we have quiz app right here and the settings component down here all right so pretty cool so next let's go to the settings right here before we working with settings component i'm going to create another folder here i'm going to say components and inside these components i'm going to create file called let's say cell like field dot js file so in here let's generate our rfce and inside this return i'm going to put a box like so and then inside this box i'm going to give a property called margin type margin top to 3 and let's say weight into 100 say 100 percents and also inside this box let's see form control and inside this form control we have to input label i think input level yes and inside this input level we are going to put the label this come from the props let's do up here you can see props and we are going to destructuring the label so we grab the label from the props okay under the input label we have the select and inside the select here basically we have two menu items that we can click so menu items like so and inside this menu item we have all the options that we need for example option one let's say option one we have option two and option three okay so in select here we have the value that goes to value and also the level we grab from the props so we can say label and also we have the on change function so let's say handle change okay so we can just create the handle change function here let's say cons handle change so that equals to arrow function all right and the value here is going to be the state so we can just create state so you can say cons state not state to value and set value set it equals to use date all right it's going to become from the react by default let's say empty string and if i save and let's import the selected file into the settings in settings here basically this is a form so we can just say form this is the html tag for from and inside in here i'm going to render the cell like field let's say select build come from the component select field so in here this is the self close stack and in here i'm gonna say the label let's say wait let's say uh category okay so now when when i save and let's take a look as you can see we have the option one option two option three i don't know the width is not 100 percent there's something wrong so let's go back to uh sound like field here so in here i'm going to say background a color to make sure this is a 100 percent as you can see it's 100 it's nothing wrong with this box i think the problem is inside this form control here let's say full width to true and this is what we have okay pretty cool so i think i'm going to set the size into let's say small and this is what we have all right so if i go back to settings and i'm going to copy paste this and change to label into the difficulty so if i save and now we have to form to input okay and let's just copy this again and this is going to be the type all right okay pretty cool so next we need to create the button here called get start so let's create the button inside the box i'm going to put box here let's say margin top to 3 and i'm going to give a width into 100 percent in here and also person and also inside this box i'm going to render button button come from the mui material and inside this button let's give a text called get start all right so and i'm going to send the couple prop here the full width is going to be true and vary on i'm going to set it equals to contain it and also the type is going to be submit all right like so so if i save and let's take a look now we have this button and we can click that okay as you can see if i click the browser is refresh we don't need that so in here in form we need to add on submit that equals to i'm going to create function called handle submit so let's create the handles update function we can say cons handle submit set that equals to e i'm going to say a dot briefing default it's going to be uh make the browser is not a refresh if i click the button all right so pretty cool something we forget down here is uh amount of question we don't have yet so let's create the component in here i'm going to create file called let's say textfield.com say text field component dojs file and in here rrfce and inside this return and i'm going to return box again and in this box i'm going to give a margin top to 3 and also the width into 100 let's say 100 and inside this box i'm going to put form control inside this form control you're going to render the text field from the mui and also text field have couple props here so we can create on change this is going to be handle change function so let's create the handle change function and create up here let's say cons handle chain set that equals to url function and just empty function and then down here we have the pharyon let's set that equals to i'm going to put outline and let's say the level is going to be let's say amount of question amount to the amount like that and down the level we have the type it's going to be number and also we have the size i'm going to put a small okay i think we're done let's import this textfield.com into the settings so we can just put in here like so and we can just control space here and hit enter now we have auto import if i click save now we should have the amount of question but this is not full width again i think we have problem with the form control here we can put the full width into true and then we can change the size into small all right so now we save and bam pretty cool we can type number but we cannot type in uh text critical so what we need to do next is basically i'm going to get all the data from this api so we are going to get all this category we get all this uh difficulty type and let's go to the yes code here i'm going to create folder inside source i'm going to create folder called hoax because we are going to create a custom hooks call use x use here so let's say use axios.js file so i think we can just close this uh file here and inside this use x use because we're working with use axios we need to install a package called axios you can see not import we can say yarn at axios all right so hit enter so in here let's say rfce and hit enter and inside this return we are going to return object inside in here and up here what we need to do is i'm going to create state so let's say we let's say cons i'm going to create a response and set response is going to be uppercase r and let's set that equals to use state just make sure you import from react i think we don't need to import this react here and you state by default i'm going to set that to null and also we are going to create the error so cons error and set error that equals to use date by default i'm going to set it to empty string and also we are going to create cons called loading and we are going to say set loading into use state by default let's set that to true alright so down here we need to return all this state so we need to return response we need to return the error and we need to return the loading okay so here we are going to use effect okay so this uc pack will be running every time the url change the url is going to come from the property so in here i'm going to destructor in here like so is going to be props.url so you can put it here say url okay so inside this use effect i'm going to create a function called let's say fetch data okay say that equals to error function so in here i'm going to say axios just make sure you import from the axios up here down here we are going to say axios dot get and we are going to get the url come from the props and after we get the url we need to say dot then because this return a promise and we are going to grab the response and then in here i'm going to change the response from the states into the response.data okay this is how we get the data from the database and down here if we get some error we're going to say dot catch so we are going to grab the error and then in here i'm going to set the error into the error okay so down here we can set finally and then we are going to run function that will be change the set loading into uh false wait false all right and i think we can run this fetch data down here we can just put fetch data and invoke this function all right so we need to set the default bass url so we can just put in here i'm going to say axios dot default dot bass url set that equals two i'm going to copy this all right and put it here like so so next let's use this custom hook which is to use axios here into the component that we need so we need to use the use axios into the settings here so in here i'm going to say let's say cons i'm going to destructuring the use x used here just make sure you import from the hoax use x use and in here i'm going to send the url i want to say url set that equals to last api underscore category and in here i'm going to grab the response the error and the loading okay so let's just console the response so you can see the data that we have so if i save and let's take a look here we have some error here that's because we need to put dot php here now if i save as you can see we have null and then we have the trifia category here we have 24 data all right pretty cool so next let's go back to the yes code here i'm going to remove the lock and in here what i'm going to do is i'm going to say if the loading is true i'm going to return let's say box and i'm going to say margin top to 20 and inside this box i'm going to say circular progress okay and i if i save as you can see if i refresh we get the loading and then we get the data all right pretty cool and i'm going to checks if something error i want to say if error is true meaning if we have some error i'm going to return something here so i'm going to re return typography typography and i'm going to put the farian here into head 6. also i'm going to put the margin top to 20 and then i'm gonna say color to red let's say color set that equals to red all right so i'm going to put some when wrong [Music] let's do this save and typography is not defined because we don't have import from the mui up here just make sure to import and save all right so the next thing that what we need to do is we need to send the response this response here into this selected field so we can just give another props here call option i'm going to send respawn dot trivia underscore category all right if i save and also i'm going to send the option for the difficulty and the type okay so in here i'm going to create another option for difficulty so i'm going to say cons i said if we call t options so that equals to this is going to be array with some object inside in here so i'm going to put id call let's say easy and i'm going to put the name let's say the name is going to be the label we are going to showing when we click this as you can see here and in here i'm going to say easy let's copy and paste that it's going to be medium and the name is going to be medium with capital m first and also we have heart and the name is going to be heart all right so down here i cannot saying something and in here i'm going to say type option as well set that equals to array and again we have some object inside in here let's say id i'm going to put a multiple and also we have the name let's say i'm gonna say multiple choice and also i'm gonna give uh some object again down here so i'm gonna say id and it's going to be uh boolean boolean and the name is going to be true or false all right so if i save and send the difficult option into right here we are going to say options that equals to difficult options and for the type you're going to send option as well set that equals to type options all right so now we need to grab the option that we send to this component here which is selected file so in here we can grab the option so we can say options like that so in menu item here i'm going to remove that okay so in here i'm going to say option dot map i'm gonna map through all the option and i'm going to grab the id and the name and i'm going to return the menu item okay so we can see menu item like so and inside this menu item we have the name okay so in here we need to give a value so that equals to id and then we have also the key okay i'm going to put the id as well like so so now if i save and that's in terminal okay and let's take a look we are going to refresh and category we have all the category that's pretty cool difficulty with easy medium hard i have the multiple choice and true or false that's pretty cool that's mean everything is work another problem that we have is as you can see if i click category if i click sports sports is not showing in here we call difficulty okay medium is not showing multiple choice not showing that's because if in handle change here you not set the value into whatever the user choice from the option here so that's why in here we need to say e and inside this function we need to set the value okay the value of the state we need to set that into e.target.value okay so after we do this and let's go back here category if i click mythology with mythology here difficulty heart we have heart type true false we have two faults all right so everything look perfectly fine now and the problem now is a question page is not cover so if i go questions as you can see we don't yet working in the questions component here so we need to work into this file for now all right so the first thing that what we need to do is we need to wrap everything inside a box so we can use box here like so and inside this box we have typography typography and then let's say i'm going to put farian into heading 4 and then in here i'm going to put question 1 for example and down here we have the typography again and then in here this is the question okay so this is the question quest chin all right and then the foreign i'm going to put a default and then in here i'm going to put martin top into let's say five and then under the typography here i'm going to put a box okay we have box again and then in here i'm going to put margin top to 2 and then inside this box basically we have the button so we have button here so we have all the option here let's say answer one and also you have answer two and so on let's just copy this like so and it's going to be uh and sort two and under this box here we have another box we have a lot of box because box is like a div all right so in here i'm gonna put margin tops that equals to five and then in here let's say score let's say score and i'm going to put for example two slash five i say five but i type in six but anyway i'm gonna save and let's take a look at what we have here in button here i think we are going to add the varian that goes to uh continent safe and let's take a look this is what we have we need to just copy and paste that right here all right so pretty cool so now let's go to the trivia [Music] uh database here as you can see i set the number of question 10 and anything here is default and i generate api url we are going to get just the amount okay amount 10 and if i set the select type into multiple choice and the category is default difficulty default and if i generate api url and as you can see we have a mountain and type multiple the category field is not sending if i put that into the default okay let's make sure about that and i'm going to say any in type i'm going to send the number of question and category if i send as you can see type is not send okay so in here i'm going to use the use x use hooks so i'm going to grab the x use not axios i think use axios and in here i'm going to set the url into api url api url is a variable that we are going to create up here i'm going to use left because we are going to change that so api url set that equals two [Music] so in here i'm going to say slash api dot bhp all right so right here and we are going to put amount set that equals to whatever the amount that we uh set into the settings all right but for now i just want to set that into 10 for example all right so in here i have the response the error and the loading but for now i just want to grab the response and the loading so if i lock the respawn of course we get the data all right let's just try if i save and let's take a look i'm going to inspect and let's see the console as you can see we have the object result we have this data all right we have the 10 questions so now we need to grab the data from the settings and if we have the data from the category we need to add the where is that we need to add this url we need to add for example uh type if we send the type in settings or we are going to add difficulty if we set the difficulty in settings all right so we need to send this data into settings into the question so you can use context api but in this case i'm gonna use redox all right let's open another terminal here and i'm going to import always i always say import but in this case we are going to install we need to install a redux and also react readouts okay so let's hit enter and forget to add so yarn add redux and also reappearance all right so it's done i'm going to close the terminal make it small and i'm going to close everything here make it simple so in source here i'm going to create one folder again called let's say redux okay inside this redox i'm gonna create one folder called let's say reducer and inside this reducer i'm gonna create a function that's called reducer set it equals to reducer have uh two property the first thing is gonna be the state and then the actions all right so the state we are going to set that into the initial state so we need to create the initial state up here so we can say cons initial state set that equals to object here and i'm gonna say question question underscore category set that equals to i'm gonna set that to empty string and we're going to have to question wait question uh difficulty difficulty we have uh do f like that and it's gonna be empty string and also we have question underscore type and also we have the [Music] amount underscore of underscore question okay and by default i'm gonna set it to 5t and then we have the score okay so the initial value is gonna be zero all right so now we have the state is initial state and in here for now i just want to return the state okay so let's go to redux here i'm going to create another file called let's say store js file so in here i'm going to import the create store create store from redux and also down here i'm going to import the reducer from dots last reducer just make sure i export that down here don't have yet so we can say export default reducer reducer and we import up here and of course we need to export default let's say create store and i'm going to put the reducer reducer like that so now in index.js here we need to wrap our app with this store that we have so the first thing is we need to import the provider provider it's gonna be from the react redux like that and also we need to import the store okay start from the dot slash redux last store all right so in here what we need to do is we need to wrap our app component here with provider like that [Music] and also we need to send a store with store variable here and now everything is fine and we are going to grab the value from the reducer into the let's go to the question right here so let's try i'm going to say cons and i'm going to set that equals to use selector it's going to be come from react redux and in here i'm going to grab the state state and then inside this cons here i'm going to grab the question question underscore uh category basically we can grab all value from the initial state here so question category and also we can grab the equation difficulty and also question type and we can also grab the amount of question like so now let's console.log this amount of question because we have the value 10 oh 5t let's try i'm going to say log equation of amount of question and as you can see i refresh as you can see you have 10 all right so pretty cool pretty cool that's mean uh everything is work fine all right the question now is how that we can change this value from the settings so the first thing is we need to create the action but before we create action we need to create the action type so action let's say action types dot js and in here i'm going to export variable the first thing is gonna be change underscore category so that equals to uh change category i'm going to copy and paste that couple time and this is going to be let's say [Music] it's going to be uppercase change underscore difficulty with something wrong difficulty and also this is going to be change underscore [Music] type and this is going to be change underscore amount and also we have the change underscore score and let's create another file called action it's gonna be lowercase actions.js file so in here we need to import everything from the action type i think it's going to be just last action type we need to import all just change category change difficulty change amount change type and also gain score okay so down here we need to create function that we can use into the settings here to update the reducer value right here so in here we are going to say export function call [Music] i'm gonna give a name handle category uh change okay that's equals to we're gonna grab the payload that we send into this function and then i'm going to return an object here so i'm going to say type into the [Music] change category and also i'm going to put the payload set that equal to payload let's just space for more time one two three four okay and i'm going to change the name of the function it's going to be a handle let's say difficulty change okay and the type is going to be change difficulty and this is going to be handle type change and the type is going to be change type okay and this is going to be mount so you can say handle mount change and this is going to be change underscore on mount and also the score so we can say handle uh score change and this is going to be change score like that i think this is going to be change like that now we need to back into the reducer and in here we return the state okay the state from the initial state so we don't we don't want that okay we need to return in here with a switch condition so in here i'm gonna say action.type okay this action.type is basically come from this action here okay if we run this function the type is going to be this if we run this function the type is going to be this okay and so on so in reducer here we are going to check if the case is a change difficulty all right we need to return gonna be lower case we need to return all the state and we need to change the question category into the action not ack action dot payload okay which is the payload that we send here okay of course we need to handle all the type that we send from the action here as you can see we send all the type here and see change category difficulty type amount and score so we need to handle all the type so in here i think this is going to be change category so in here i'm going to copy this and i think we need to paste that couple time here and save so in here we need to change that into difficulty and we need to change this into question difficulty and also we need to change this to change type and also this question category into question type and also this thing here i'm going to change that into change amount and also this is going to be question uh amount i think using amount of it's going to say amount of questions and also this here we need to say change score and to say score [Music] change that into action.payload and also we need to say uh default case here and i'm going to just return the state all right so i think we're done here so next we need to uh call this function here the first thing is i'm going to close the settings reducer and action type here uh i'm gonna go to the components and select field so in here i'm going to put a switch and i'm gonna check the label the label come from the props here and right here i'm going to let's just create a dispatch variable i'm going to use dispatch here just make sure you import from the react redux like so and in here if the case is category i'm going to dispatch i'm going to dispatch the handle category change it's kind of it's going to become from the action here and in here what i'm going to do i'm going to send the payload and the payload in this case is going to be e.target.value all right so let's put a break down here like so and we need to just copy and paste that two more time and this is going to be the difficulty and the function is going to be handle difficulty change and this here is going to be the type and the function is going to be handle type change and down here we need to put the default and in here i'm going to just return so next let's go to the text field component here and in here we need to also dispatch the handle amount change function so we need to create the dispatch function here that equals to use dispatch just make sure you import from the react redux as well so inside in here what we can do is i'm going to say dispatch it's going to be dispatch this patch so in here i'm going to call the handle amount change function and i'm going to send the event.target.value as well so let's say target dot value all right so now save and remember in question.js file we can select the amount of question all right now let's go to settings here and when user click the handle submit here i want to we go to the question page all right so in here what we can do is i'm going to create a variable call history first up here so we can say cons history let's say history that goes to use history we're going to import that from the react router dom i think yeah right here it's going to be a react router that's dom and we can use that right here we can say uh history dot puss and we are going to go to the questions questions page right so if i save and let's try if i go to the force less all right so now if i select for example mythology and if i click get start we have 5t here let's go back to question i think we can select the amount question you know one question have a default value 5d alright so i'm going to console log the question category and also the question difficulty maybe all right so now save and let's go back here and i think i'm going to remove the console of the response so now let's go into the first last which is the settings component here all right so now if i click the category into history and the difficult to medium and if i click get start we have undefined and undefined all right i think we have something wrong here alright so let's try console.log all this value we have question category difficulty type and also the amount of questions i'm gonna console log everything here and let's go back to the settings and i'm gonna select mythology medium true and false let's say four get start with all the undefined value let's go back to the reducer i think we have something wrong here as you can see here there's to be payload not payload payload i think we are going to grab this and let's say payload all right so now save and let's take a look that again i'm going back to the settings first in category here i'm going to select uh signs and nature difficulty let's say easy type multiple choice amount of question i'm going to set that to 10 and if i click get start as you can see in the console here we have 70 easy multiple and 10. all right so that's mean this console everything the value here will be updated all right come from the selected field come from the text field column here all right so now what we can do is i'm going to remove the console here and we know that amount of question is always have value okay because by default this is have a value 5 t and we need to put that in here okay we don't need to have a check if the amount of questions have a value or not but in question category we should check all right we should give a if here if the question category have a value what we need to do is let's say api url we're going to set that equals to api url dot concat i'm going to concat with let's say n category set that equals to the value of the question category so you can do like so and let's say equation category all right so now we can just copy this and paste that couple time here and another thing that what we need to check is question difficulty let's base down here and this is going to be difficulty say difficulty and this is going to be question difficulty and also question type if the question type have a value we need to add the string here with type and equals to question type all right so let's save let's trying to console.log the response here i like to see the respond so let's see response and save and let's go back into the settings and in here what i'm gonna do let's say sport medium multiple choice i'm gonna set it to 20 and if i click get start we get the response here as you can see we have 20 result here pretty cool the category will be sport type multiple and the difficulty will be medium all right so i think the response spi is work here another thing that we need to check is the loading okay if the loading is true we need to render the circle so let's say in here i'm gonna say if the loading is true i want to return the box all right i need to return the box and in here i'm going to set the margin top to 20 to make it in the center and then right here i'm going to return the circle circular progress okay if i save now we should see the loading let's try that again here i'm going to just pick a random let's say 10 get start as you can see we have the loading and then we get the data all right so pretty cool another thing that i'm going to show you is how that we can showing the question here first let's create the state up here i'm going to give a name called let's say question question index and let's say set question index set that equals to use state by default i'm gonna set it to zero all right so in here i'm going to render the response dot results and i'm going to grab the question index which is 0 in this case and i'm going to do dot question okay so now if i save and let's take a look in the browser here we get the question if i refresh we always get the new question all right let's go back to vs code here this is going to be uh question index plus one all right next i'm going to showing the option of the answer so i'm going to create another state up here let's say cons let's say options and set options set that equals to use state by default let's set that to empty array and in here i'm going to put use effect let's make sure import from react and this use effects basically will be update the option here okay so in here what we can do so in here we need to checks first if the response have a value or not so we can say if if the respond red dot lang have a value what we need to do here we need to create a variable called let's say question set that equals to response dot result and we are going to grab the equation index in this case will be zero and i'm going to lock the equation first so you can see what we have here okay so now let's save and let's take a look here i'm going to refresh as you can see we get the error here because we have to check that here okay we need to add question mark here if i reload the browser as you can see we don't get anything in the console that's because in uc effect here we need to put a dependency here so i'm going to put the response and if i save the browser reload and as you can see in the console we have all the value we have the incorrect answer which is the tree value here and correct answer which is the one value here so in here i'm going to create variable call answer that's the answer so that equals two i'm going to grab all the question dot incorrect i think let's just copy this key here incorrect answer and we are going to put in here so we know the answer have a value this which is the tree value and right here what i'm going to do i'm going to say answer dot splice [Music] before we splash the answer i'm going to create another function outside the question here basically this function will be generate random number from 0 to maximal number that we put so i'm going to say get random integer set that equals to we're going to put maximal as a property here and let's say return i'm going to say matt dot floor it'll be dot floor and i'm going to say math dot random and let's multiply that by math dot floor i'm i'm going to put the maximal value here all right so let's try this function it's going to be random with capital r and if i try to use this function maybe here i'm going to say i'm going to lock the get random integer with for example three if i save and as you can see here we have two if i refresh that again we have zero this get random int function here will never get the maximal number that we put in here so if we put 3 we will get 0 until 2 all right so let's get rid of this console log here and i'm going to uncomment the answer dot splice and in here what i'm going to do is let's say get random integer and i'm going to say question dot incorrect answer dot length and what we need to do is give a comma here let's say 0 and then i'm going to put the question dot correct underscore answer so basically what happened in here is you're going to put the question dot correct answer here into the random position okay so let's do down here i'm going to say set option into the answer okay so i'm going to give another dependency here which is the question index because the question index will be uh change every time we click the button okay but we don't yet implement that yet so i'm going to console lock the option here so we can see the answer option so let's say lock option and i'm going to see in the console here let's refresh so as you can see here we get uh an offend value this endophine will be the correct answer uh we're wrong typing the value i think it's going to be correct all right but as you can see here the undefined will change the position every time we refresh the browser this is the position two if i refresh we always get the new position okay that's the answer splice this do for us okay so i think it's gonna be correct with c and if i save that and as you can see here okay pretty cool so now what we need to do is we need to render the option answer here into this button so let's go to down here i'm going to copy the box here and remove everything and what we are going to do is we need to say option dot map i'm going to map all the option and let's grab the data and id so we can say data and id and i'm going to render the box like this and in here we need to put key set that equals to let's say id all right so let's change the answer one here into the data like so and now save and let's take a look in the browser here we go and another thing that we need to do is i'm going to add a on click event in this button let's go back here and in here i'm going to say on click and set that equals to i'm going to say handle let's say click answer and i'm going to it's going to be handle and let's just copy this name and we are going to create a function called uh handle click answer and it's going to be arrow function so inside this handle click answer function here i'm going to check if the question index equation index plus 1 is less than into the response response.result.link i'm going to set the question index into the question index one okay so let's just copy this this is the line of the question all right so we can put it in here so you can see here and the score is gonna be come from the you selector so up here we can uh import the score let's try put the amount of question for example five here and if i click get start we get the five question okay if i click this just a random here and after we get the question five you can see if i click nothing happen so what i want to do is basically here i'm going to say else and if we for example here have a question 5 and we have already answered all the question i want to we go to the score page so in here what we are going to do is i want to create the history variable first so let's just get rid of that and up here we are going to create cons history that goes to use history and we are going to use this history in this house here so we can say history dot pus and it's gonna be good to force last score okay so if i save and let's take a click i click random answer here and we get the final screen okay so everything's work fine here so i think let's go back to the settings and let's just click get start everything is default here so we get the 5t here and we never get the true answer that's because we don't have handle that up here so we need to handle in here if the user get the correct answer so in here what we can do is i'm going to just copy the question here the question object i'm going to copy and paste it here so in here i'm going to check if the user answer here is equal to the rest question dot correct answer let's do that here i'm going to say e and let's say e dot target dot text content is equal to the question [Music] dot correct answer what we need to do here is i'm going to dispatch i think we don't have yet dispatch so let's create the dispatch here i'm gonna do here let's say cons dispatch so that equals to use uh dispatch and let's use the dispatch down here let's say let's say dispatch we are going to run the handle score change function okay and we are going to put the score plus one okay remember score have a value zero in initial state right so if i save and let's take a look in the browser here i don't know can i get as you can see here i get the correct answer one and it's updated all right pretty cool so the next thing what i'm going to do is i'm going to handle this special character here so that's why we need to use html entity so we can just copy this and open a new terminal and paste that here you can use npm or yarn in this case i'm using yarn so i can just remove everything here let's say yarn add html entity and hit enter all right so it's done to use the html entity so very simple we just need to import the code and use the code like this so in here we need to say the code and i hope the auto import is right here pretty cool and in here we need to wrap everything inside the date code function and then if i save as you can see here we have the quote here that's me and everything is work and as you can see here we have the quote as well pretty cool i think everything is work now perfectly fine and i think in the data here i'm going to wrap that in the code as well okay so let's say the code and i'm going to wrap the data like so so another thing i'm going to do is let's working with the final screen okay let's go to first last car here and let's go to the final screen component here so in here what i'm going to do is remove all the div and we need to render box here and in this box i'm going to give a margin top to 3d and inside this box let's put a typography let's say typography and let's say vary on into the hatch tree and let's set the phone wake to bolt and i'm gonna say margin bottom to three and also let's say final score and we are going to put the score variable here this is going to be come from the use selector so we can say cons and we grab the score it's going to become from use selector and we grab the state and state like so okay so now what we need to do next is i'm going to add the button and the button here this will be back to settings so let's do here i'm going to say button okay so let's say button and let's text is going to be back to settings and let's add some props in this button here i'm going to add faryan into set that equals to outline and in here i'm going to add on click event so let's say on click set that equals to i'm gonna say handle back to setting okay so let's create the it's gonna be back like so and we need to copy this and create the function up here so you can see cons and all back to settings set that equals to our function basically in here what i'm going to do is i'm going to reset the score and the amount so we can create dispatch here so we can say cons but this patch that equals to use dispatch and also we need to create as well the history that it was to use history like so all right so inside this function what i'm going to do i'm going to dispatch with this patch handle score change and i'll score change into uh back to zero and then i'm going to dispatch or dispatch event dispatch the handle amount change and i'm going to put a 5d because the default is going to be 5d all right so down here what we are going to do is i'm going to history dot pus i'm going to back to force less alright so i think we're done with the final screen let's take a click here as you can see final scroll zero if i click back to settings we on the settings right now cool so let's try the quiz app here the category i'm gonna say sport difficulty medium type multiple choice amount of question i'm going to set it 20 and if i get start get loading pretty cool and we get the question with which team did because i don't know let's just put a random answer here and let's do [Music] oh really i get the score three final score we have three and we can back to settings all right i think this project is we will be done guys and i hope you follow along this tutorial and i hope you learned a lot of things in this tutorial and i'm going to put the code in description so yeah i think that's it for this video guys thank you so much for watching and see you

Channel: Cand Dev

Views: 1,371

Keywords: reactjs, redux, create quiz app, create custom hooks, how to use axios, useAxios, trivia

Id: 6LROvk5d8H8

Length: 79min 33sec (4773 seconds)

Published: Wed Oct 27 2021