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

Подписаться 1 млн

Просмотров 40 тыс.

50% 1

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.com/file/d/1UNqd...
👉 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/iamavinashkr
Connect with GreatStack:
Instagram: / greatstackdev
Twitter: / greatstackdev
Facebook: / greatstack

Опубликовано:

28 ноя 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 53

@asriomar11 4 месяца назад

Easy to understand and follow even for beginner. Thanks.

@AnnabelleSwan 2 месяца назад

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

@narendrakumar709 6 месяцев назад

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.

@pankajbeniwal988 6 месяцев назад

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

@GreatStackDev 6 месяцев назад

I will try this shortcut, thanks for comment.

@szymonfelski775 2 месяца назад

Great tutorial, thanks!

@lucianodeniro6475 18 дней назад

thanks a lot bro, greetings from Argentina

@deshanbandara4985 2 месяца назад

Thank you brother ♥

@durgeshsingh6380 Месяц назад

Excellent 👍

@divyasingh6981 5 месяцев назад

Thanks ❤️

@prateeksharma3775 15 дней назад

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

@mohamedabdi6752 Месяц назад

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...

@muhammadusama7284 6 месяцев назад

completed .waiting for next video of react JS

@GreatStackDev 6 месяцев назад

Great! Please check this React Project playlist: ru-vid.com/group/PLjwm_8O3suyMMs7kfDD-p-yIhlmEgJkDj

@user-jp2mf7sd7u 5 месяцев назад

which theme are you using in vs code

@nardoneleonard100 5 месяцев назад

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

@er.soumyavlogs 6 месяцев назад

Luv u brother❤

@GreatStackDev 6 месяцев назад

Thanks bro, Glad you liked this react project

@rublyn111 6 месяцев назад

Happy I saw this early. Thanks man

@GreatStackDev 6 месяцев назад

Glad you liked this React Quiz app tutorial

@abdullah-khan10 6 месяцев назад

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

@ssikarim 8 дней назад

Thanks

@ShiraziPUBG 6 месяцев назад

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

@hamzazennou3178 2 месяца назад

Perfect

@hotshot6674 2 месяца назад

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 5 месяцев назад

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

@volkan9799 5 месяцев назад

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

@Codenow10222 Месяц назад

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

@rahulkumar12086 2 месяца назад

Can anyone explain how he chosen correct and wrong option ?

@user-je9xt9gs9c Месяц назад

how intresting if we you create in tsx

@technologytechnepal2391 6 месяцев назад

How to make silent exploit using javascript

@guptaswork1695 4 месяца назад

Bro... I tried to do it but the Last question for is not allowing to choose option and move to next score page ? Please help

@JagmeetSingh-ym6jj 3 месяца назад

I tried it and it’s working. You should recheck your code

@omarbarbeir9887 5 месяцев назад

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

@Jon-tp6gr 11 дней назад

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

@rishavkumar6698 3 месяца назад

can we get the source code

@marghoobalam9874 4 месяца назад

can anyone provide me the Quiz.jsx code

@sparsh-0384 6 месяцев назад

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

@GreatStackDev 6 месяцев назад

thanks for comment, it will help all viewers

@Kleolit Месяц назад

I need all your code

@quotespower9911 4 месяца назад

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