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

Learn How To Make A Quiz App In React JS | Build Quiz App React JS Project Step by Step.
❤️ SUBSCRIBE: ‪@GreatStackDev‬
In this tutorial we will learn to make a quiz website or app using React JS. In this quiz app you can update your own questions and multiple options. This React JS Project Quiz app will display the score after submitting the answers for all questions.
Download the assets: drive.google.c...
👉 React Introduction Tutorial: • What Is React (React J...
👉 React Complete tutorial for Beginners: • React JS Tutorial For ...
#ReactJS #ReactJsTutorial #WebDevelopment #GreatStack
-------------------------------------
Build more React JS projects:
Complete Portfolio Website In React:
👉 • How To Make Portfolio ...
Build ChatGPT Clone In React:
👉 • Build ChatGPT In React...
Build AI Image Generator with OpenAI In React
👉 • Build An AI Image Gene...
Create Weather App In React
👉 • How To Create Weather ...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Connect with me:
👉 linktr.ee/iama...
Connect with GreatStack:
Instagram: / greatstackdev
Twitter: / greatstackdev
Facebook: / greatstack

[@asriomar11]

Easy to understand and follow even for beginner. Thanks.

[@durgeshsingh6380]

Excellent 👍

[@AnnabelleSwan]

Thank you so much! You are so great at explanation!!! Thanks a lot !

[@User-lm4qq]

You can use the result ternary operator only one time. Instead of returning empty div while result is true ,you can return the score and reset button

[@theabundantartist2704]

What an amazing explanation sir! Waiting for more videos on full stack dev projects. Thank you :)

[@GreatStackDev]

Thank you so much.

[@szymonfelski775]

Great tutorial, thanks!

[@lincholechisa6154]

really excellent project for beginner like me. Thank u bro!

[@Mukhlisa-o2e]

Thanks, really helped me understand different hooks in React

[@yt_paperHANk]

finally, this is what I'm looking for, to cure my laziness

[@ormondo1711]

Great tutorial: 10 out of 10! Many thanks.

[@Trim_Gaming_YT]

Am the first to like on this helpful video. Please give me likes. ❤❤❤

[@pankajbeniwal988]

For opening development server in browser, you can also just press 'o' and it will open in browser

[@GreatStackDev]

I will try this shortcut, thanks for comment.

[@narendrakumar709]

Excellent tutorial. but one good practice but not that much important , we can add setLock(true) after lock===false line, no need to repeat it.

[@lucianodeniro6475]

thanks a lot bro, greetings from Argentina

[@hiteshchotaliya2865]

Nice to explain, Thanks

[@muhammadusama7284]

completed .waiting for next video of react JS

[@GreatStackDev]

Great! Please check this React Project playlist: kzbin.info/aero/PLjwm_8O3suyMMs7kfDD-p-yIhlmEgJkDj

[@adityayadav-bh6wm]

useRef(0) while initialisation of Option(s) at 30:45

[@wordsfromheaven]

It didn't work o

[@er.soumyavlogs]

Luv u brother❤

[@GreatStackDev]

Thanks bro, Glad you liked this react project

[@hamzazennou3178]

Perfect

[@biologyfacts2760]

very easy to understand thank u so much

[@oqant0424]

Thank a ton:)

[@rohinipatil8509]

Thank you so much sir

[@deshanbandara4985]

Thank you brother ♥

[@divyasingh6981]

Thanks ❤️

[@peterkyle01]

Awesome tutorial.

[@prateeksharma3775]

good vedio but inorder to change state in question we have to use useeffect

[@rublyn111]

Happy I saw this early. Thanks man

[@GreatStackDev]

Glad you liked this React Quiz app tutorial

[@sandalbugen]

i am curious. how you can determined the ans just by the number?

[@tech-xTinkerer]

Nice video

[@GreatStackDev]

Glad you liked it. 😊

[@mohamedabdi32006]

Salam bro you're the best thanks for your help. Please can you make us one video About Contact js and search js for our website...

[@abdullah-khan10]

Your tutorial are very helpful❤🇵🇰. Also make more content on react and next js

[@rahulkumar12086]

Can anyone explain how he chosen correct and wrong option ?

[@KillingsworthHaley]

Why do you need two separate ternary operators that only have one half filled in? Why does it not work if you combine the two separate ternary operators into a single one?

[@helloworld2054]

You don't need 2 ternary operators, it works completely fine with one ternary operator.

[@vinuchakravarthineelakanda790]

why you use js instead of js + swc? can you explain this

[@User-083-3]

How to replace manual data to api URL

[@sundareeshwarand]

why we using let instead of const

[@ssikarim]

Thanks

[@shreyarani213]

The code is not working for correct answer color and wrong answer color

[@wordsfromheaven]

Import UseRef and UseState

[@MinhazFardin]

which theme are you using in vs code

[@ultimategamer5136]

Do you have a report and source code for this I have to make this for my college mini project?

[@sandalbugen]

how the correct answer just user number like 1, 5 4, and 2

[@Code_Verse01]

33:03

[@hotshot6674]

How do I add a menu at the beginning where I could choose from different quiz categories? I tried to add it with Chat GPT but it was not able to fix it. Help? ;-;

[@LeanAlcala-fu7vq]

why doesn't it work if I put npm ? What should I do?

[@bbieye]

Awesome App! Do you share app code ? I looked google drive. I can see only questions.

[@volkan9799]

there is my code bro: import { useState } from "react"; import "./Quiz.css"; import { data } from "../../assets/data"; const Quiz = () => { let [index, setIndex] = useState(0); let [questions, setQuestions] = useState(data[index]); let [lock, setLock] = useState(false); let [score, setScore] = useState(0); let [result, setResult] = useState(false); const openCorrect = (index) => { document.querySelectorAll("li")[index - 1].classList.add("correct"); }; const checkAns = (e, ans) => { if (lock === false) { if (questions.ans === ans) { e.target.classList.add("correct"); setScore((prev) => prev + 1); } else { e.target.classList.add("wrong"); openCorrect(questions.ans); } setLock(true); } }; const clearAns = () => { document.querySelectorAll("li").forEach((li) => { li.classList = ""; }); }; const next = () => { if (index === data.length - 1) { setResult(true); return; } if (lock === true) { clearAns(); setIndex(++index); setQuestions(data[index]); setLock(false); } }; const reset = () => { setIndex(0); setQuestions(data[0]); setScore(0); setLock(false); setResult(false); }; return ( Quiz App {result ? ( You scored {score} out of {data.length} Reset ) : ( {index + 1}. {questions.question} { checkAns(e, 1); }} > {questions.option1} { checkAns(e, 2); }} > {questions.option2} { checkAns(e, 3); }} > {questions.option3} { checkAns(e, 4); }} > {questions.option4} Next {index + 1} of {data.length} questions )} ); }; export default Quiz;

[@SSJwalker]

@@volkan9799 Thanks this helped me

[@omarbarbeir9887]

There is error appears after make option array it says expected an assignment or function call and instead saw an expression

[@Jon-tp6gr]

Hey, did you ever figure out how to fix it I'm having the same problem.

[@Codenow10222]

thanks for this video. please provide at least css source code it will help us to save time

[@quotespower9911]

Bhai me jab yeh simple sa bana rha tha muje 3 hours lag gye aur kuch bhi nahi bana . Bro logic hi nhi bann par rha tha . Bhai bahut demotivate ho jaata hu ek basic sa project nahi bann pata lekin jab koi videos dekhta hu toh pata lagta ha kitna basic logic tha me kyu nahi kr paaya

[@chetankumar9463]

Bare problem ko chote chote problem me break karo fir un chote problem ko solve karne ki kosish karo.

[@helloworld2054]

Sabse pehle dekh dekhkar hi banao, phir code ko samjho, pura logic, code flow, kaise kya ho raha hai. Uske baad khud se try karo bina dekhe, try karte raho jab tak bann nahi jata

[@oqant0424]

23:00

[@Asadullah-b1e4p]

how intresting if we you create in tsx

[@ponmugikumaresan5083]

Error . useRef is not defined 😢

[@sparsh-0384]

For multiple li u can li*number of li u want

[@GreatStackDev]

thanks for comment, it will help all viewers

[@farispepic]

Where have source code for this project ?

[@GreatStackDev]

Please send me an email, will send you the source code.

[@farispepic]

@@GreatStackDev i send but email is not send in comment

[@JeanDamasceneBenimana]

we need your github page plse

[@Code_Verse01]

36:27

[@rishavkumar6698]

can we get the source code

[@technologytechnepal2391]

How to make silent exploit using javascript

[@nardoneleonard100]

what if .. I don't want to add the next button. it atomically switch to the next question when any answer I selected … please help

[@Kleolit]

I need all your code

[@marghoobalam9874]

can anyone provide me the Quiz.jsx code

[@brest_brest]

Give me the Code Please🥺🥺

[@Azibek_]

Pchool nachooy

[@zaynindiafans8503]

Why you don't give source code with project?😅

[@idevkr]

All source code is provided to those who join this channel 🧑‍💻

[@zaynindiafans8503]

@@idevkr which channel???

[@idevkr]

@@zaynindiafans8503 youtube channel join button

[@JustCoNa]

@@zaynindiafans8503 definitely not the channel which posted this video

[@HimanshuYelane-rc6gm]

bhai source code dete to accha hota

[@SamuelMaiva]

How can I contact you

[@mohmmedkaifsakali4673]

I want to talk to you regarding business purpose, how should I contact you...