Quiz App in React JS with 22 Categories | Material UI | React Beginners Project | Trivia API
HTML-код
- Опубликовано: 3 апр 2021
- Lets Create a Quiz App in React JS and Material UI with support of over 22 Categories.
If any questions, ask me here-
/ roadsidecoder
Source Code -
github.com/piyush-eon/Reactjs...
Live Site -
intuitive-quiz-hub.netlify.app/
React Router DOM Tutorial -
• React Router Dom [ Ful...
How to Shuffle array-
flaviocopes.com/how-to-shuffl...
Dictionary API -
Website - opentdb.com/api_config.php
API - `opentdb.com/api.php?amount=10${category &&`&category=${category}`}${difficulty && `&difficulty=${difficulty}`}&type=multiple`
Material UI -
material-ui.com/
Learn React From Scratch -
• React JS Workshop Day ...
Hey Everyone, Make sure you're using Material UI version 4 - v4.mui.com
Join our new Telegram Group 🔥🔥
t.me/joinchat/4kdh0elulIwwY2M1
It's an amazing app. Also, the way you covered all the things is wonderful. Keep bringing such types of projects on react.
Glad u liked it ❤️🔥
This is amazing, so much new and useful information, well done brother!
Dude these tutorials are fantastic! thank you please keep going.
Your fantastic comments motivate me to make these fantastic tutorials
Thanks a lot sir, Appreciate your efforts for making such a great project videos. I have done the entire project and I did not get stuck any point, each and everything has taught properly. ✔✔✔✔
Wow that's great Sagar! Glad that I could help.
greate buddy keep it up thanks for projects
Thank you so much for this video. I learned a lot from it.
My friend, you are awesome. I thank you so much because this is what I'm looking for using react-native but you use it inside react ...but it's good also since both are using the same logic
Glad u liked it! 🙏
good tutorial, concepts are explained well & in a simple manner, thanks :)
Glad you liked it! Checkout my mern stack series that's currently going on!
Ekdum real product lag rha hai Aisha bnaya hai apne pahel mai khud se try kerta hu nhi hoga to mai apka dekhunga jaruri
Thanks man, and definitely try on your own first.. Will help u a lot!
it was wonderful and thank you so much
Amazing content buddy! Thanks
Thanks man
Very great tutorial and humorous!
🤘🤘
thank u so much sir ur explaination is very good i have done with this project .....please continue more projects like this
Thanks man.
hi sir, plz bring more projects , you are amazing
Yesterday i search for Reactjs Quiz app and Today god listen me.
Thanks Man😊
Haha, Glad to hear that man! Hope you enjoy the tutorial.
It was Awesome . Thank You sir
🙏✌️
Sir useHistory v5 ka h toh abhi m useNavigate use kiya bt phir bhi code proper execute nahi ho raha h?????
II added the functionality to add the record in Local Storage and in UseEffect it takes the record and shows it on the screen and at the end of the game there is an if that if the record is greater than the score it adds the record in Local Storage
it's really super. thanks bro...
🙏
Be blessed brother, you are awesome
🙏🙏
loved it thanks a lot!!! but i do not understand the 'useEffect(()=>if(!name)...etc' in the Result.js page, like why do you need it?
Awesome brother 👏
Thanks ✌️
@material-ui/core@4.12.4 requires a peer of react-dom@^16.8.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself. So I cannot do this with React v18.1.0, right? Looks like I should use an older version of react.
Thanks for the tutorial
🙏🙏
hey piyush i noticed that you used href in "Quit" and "Go to homepage" button instead we can use history.push on onclick as href will reload the page as react is single page app so we should avoid reloading it and btw it is an awesome video with an awesome explanation 😍😍
Yeah definitely man! Great observation and thanks for the appreciation! ❤️
If I am using history.push (now navigate) on onClick then app is not getting refreshed score is also not getting reset
@@harshitagupta4730 on onclick again set the state it will refresh without reloading
Thank you so much. I was thinking about that.
Great tutorials!! I used the npm package "html-entities" to fix the "/'/quotes/&/;/# bug.
please explain.
bhai maza aa gya bhai
Glad to hear bhai 🎉
hello, my handle shuffle(questions[currQues]?.correct_answer,
...questions[currQues]?.incorrect_answer) function is showing an error...please help
Hello, sir. Your tutorial is amazing but I have something to ask you. I answered questions in quiz page and the result page will show my results. But when we click to "GO BACK HOMEPAGE", why the score sets to initial state which is 0? Score was in the higher level of all the components and pages. So, why it is possible to set to 0 even there is no set to initial state in home page? Is it because of material ui button which is used with href?
How can i solve the problem of rendering again the currentQuestion in class component?
I don't know why there is issue with pushState in this app as well as in your crypto app??? what's wrong with pushState
ok I got it use only push("/quiz")
but crpypto app problem is still unsolved😑
How can i show all the questions and options on final score page with selected options ??
hey i am selecting Category but when i start quiz category show random not that what i selected why ??
I am not been able to show options in my console....
And facing this error:
You may need an appropriate loader to handle this file type ....
Plzzzz help
Thank You
🙏
in my data object question array length is zero can you help me with this
Thank bro
😄🙏
Brother, please make a video about how redirect to home page , when refresh is clicked in react js.
If we want to add user customize questions what would be the approach to do that ?? Backend chaiye hoga kya ??
Yed
help : when i press "next question", the question pops up for a second and imeediately goes to the home page again
I have doubts in Question.js line no.59. can anybody explain that??
How to do write a edit an assessment using UI
First of all, I really appreciated your effort to do this video. After following this video and i make a copy from your code I got the same mistake in your code it says Cannot read property 'category' of undefined whenever i choose Mathematics and the level is easy. However, on other category is working fine.. Any thought about this bug. Thank You so Much
Yeah maybe that must be the API Bug, which is out of our control, you can remove the mathematics category in that case.
@@RoadsideCoder Thank you sir for your replay I really apreciated that.
{options && options.map((i) => {i} } not fatching not working
Excellent video!! Thanks!!
Could you please build it with user authentications i.e.sign in, sign up, forgot password, etc?
Hey, I already have. Please checkout my mern stack series with redux.
Thanks!! you have it with a note App, should it work the same with the quiz app?
So what if I like the format but I wanna use my own questions ? because from what I saw that just grabs gobal questions from a server from another page, but what if I wanna use my own question?
Then you will have to build your own server and api to serve from backend. Or can also prepare set of dummy data in frontend.
@@RoadsideCoder ah I see, thanks for the fast reply
Bro, you promised to create inshorts react native clone. Did you have any progress on it? It would be great! Plus, any more quiz survey video using survey.js? Thanks!!
Yeah, I will mate.. Currently planning on starting MERN Stack series.. After that React Native..
@@RoadsideCoder Really appreciate! Best greetings from New York!
Hello, congratulations for this app, but how resolve the problem with the questions that appear with #quot and #39? did you see that? maybe using slice or filter ?
They are symbols, You need to use some library to decode them. Try to google
there is a simple way to handle it .
in the qustions h2 tag add this :
and for the optons button also add this :
handleCheck(i)}
className={`singleOption ${selected && handleSelect(i)}`}
disabled={selected}
key={i}
dangerouslySetInnerHTML={{
__html: i,
}}
>
this will solve the problem , atleast solved mine
Sir,
How to set timer for the quiz?
With setTimeout. Try to search countdown timer with react on RUclips.
hey bro why my handleCheck function is not working please explain
Did you compare with my code?
After calling an API, I am not getting any data resulted array is empty like result[0]
Show the axios code
Do u host online training sessions
You can book a call with me here -
Topmate.io/roadsidecoder
Sir how can I use firebase for storing data of this quiz app
I will bring the firebase tutorial soon!
After calling Api in console log i am not getting any data in console , i tried using the api from GIT repository too.
Contact me on insta - @RoadsideCoder
Bro same problem plz plz can you plz tel me the solution 🙏🏼
Bro my Switch is getting imported from material ui core and not react-router-dom, why so?
U need to manually import it
In latest version of react-router-dom switch is no more available use Routes instead and exact property is not needed anymore
whats your vs theme piyush
peacock extension
Hii I'm getting error in ./header.css files
What is it? Contact me on instagram @RoadsideCoder
Hello sir , i get the switch error , imported as switch was not found ??? What will i do???
Can you elaborate the issue? Reach out to me on instagram @RoadsideCoder.
@@RoadsideCoder yes I am also getting it pls answer
@@preetikabra5737 Instead of switch use "Routes", and pass the component as "element = {}"
Why i cannot see my questions in result:Array(10) ???? at 57:23
Maybe because API is not getting called properly. Can u send ur git repo
@@RoadsideCoder hey, i get the same problem in my console only show undefined. is there any solution?
Why do I get Invalid Hook error everytime... Unable to fix it.
Try to compare with my code. Link in description
I checked every line... It's same... Can it be due to some system or browser problem?
@@Someone2233 contact me on instagram @RoadsideCoder
why are some questions and options having some 'T in between?
How do I remove those?
@@Subramanian403 it's symbols, u need to parse them
@@RoadsideCoder Oh but how? Is there any function to parse them?? And thanks for the video.. Loved it !!
there is a simple way to handle it .
in the qustions h2 tag add this :
and for the optons button also add this :
handleCheck(i)}
className={`singleOption ${selected && handleSelect(i)}`}
disabled={selected}
key={i}
dangerouslySetInnerHTML={{
__html: i,
}}
>
this will solve the problem , atleast solved mine
Nice video sir,
Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value) is not iterable
I get this when I spread the correct_ansswer
I have fixed it. I just need to use conditional statement and spread the incorrect answers instead of the correct answer
@@chimaobiezeobidi6065 How exactly have you fixed it?
@@merunus8556 first spread the incorrect_ans, then add correct_ans to it.
E.g
setOptions(questions && listOptions([... questions [currentquestions]?.incorrect_ans, questions[currentquestions]?.correct_ans])
Do you understand it now?
CAN I GET A ZIP file
For what?
Where is the html file
In public folder
spongebob squarepants
"oops!" sounds too much.
Bhai tu please thoda aur explain kiya kr bhut kam explain kr rha