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

Поделиться
HTML-код
  • Опубликовано: 20 янв 2025

Комментарии • 87

  • @asriomar11
    @asriomar11 Год назад +12

    Easy to understand and follow even for beginner. Thanks.

  • @theabundantartist2704
    @theabundantartist2704 2 месяца назад +2

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

  • @AnnabelleSwan
    @AnnabelleSwan 9 месяцев назад +2

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

  • @lincholechisa6154
    @lincholechisa6154 2 месяца назад +1

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

  • @User-lm4qq
    @User-lm4qq 6 месяцев назад +2

    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

  • @pankajbeniwal988
    @pankajbeniwal988 Год назад +13

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

    • @GreatStackDev
      @GreatStackDev  Год назад +2

      I will try this shortcut, thanks for comment.

  • @Mukhlisa-o2e
    @Mukhlisa-o2e 18 дней назад

    Thanks, really helped me understand different hooks in React

  • @narendrakumar709
    @narendrakumar709 Год назад +2

    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.

  • @ormondo1711
    @ormondo1711 20 дней назад

    Great tutorial: 10 out of 10! Many thanks.

  • @adityayadav-bh6wm
    @adityayadav-bh6wm 4 месяца назад +2

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

  • @Trim_Gaming_YT
    @Trim_Gaming_YT Год назад +5

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

  • @szymonfelski775
    @szymonfelski775 9 месяцев назад +1

    Great tutorial, thanks!

  • @lucianodeniro6475
    @lucianodeniro6475 8 месяцев назад +2

    thanks a lot bro, greetings from Argentina

  • @durgeshsingh6380
    @durgeshsingh6380 9 месяцев назад +2

    Excellent 👍

  • @yt_paperHANk
    @yt_paperHANk 3 месяца назад +1

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

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

    very easy to understand thank u so much

  • @KillingsworthHaley
    @KillingsworthHaley 7 месяцев назад +1

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

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

  • @sandalbugen
    @sandalbugen 20 дней назад

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

  • @hiteshchotaliya2865
    @hiteshchotaliya2865 20 дней назад

    Nice to explain, Thanks

  • @muhammadusama7284
    @muhammadusama7284 Год назад +7

    completed .waiting for next video of react JS

    • @GreatStackDev
      @GreatStackDev  Год назад +2

      Great! Please check this React Project playlist: ruclips.net/p/PLjwm_8O3suyMMs7kfDD-p-yIhlmEgJkDj

  • @Code_Verse01
    @Code_Verse01 7 месяцев назад +1

    33:03

  • @er.soumyavlogs
    @er.soumyavlogs Год назад +1

    Luv u brother❤

    • @GreatStackDev
      @GreatStackDev  Год назад

      Thanks bro, Glad you liked this react project

  • @shreyarani213
    @shreyarani213 3 месяца назад +1

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

  • @rublyn111
    @rublyn111 Год назад

    Happy I saw this early. Thanks man

    • @GreatStackDev
      @GreatStackDev  Год назад

      Glad you liked this React Quiz app tutorial

  • @prateeksharma3775
    @prateeksharma3775 8 месяцев назад +1

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

  • @omarbarbeir9887
    @omarbarbeir9887 Год назад +1

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

    • @Jon-tp6gr
      @Jon-tp6gr 8 месяцев назад +1

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

  • @mohamedabdi32006
    @mohamedabdi32006 9 месяцев назад +1

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

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

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

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

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

  • @hotshot6674
    @hotshot6674 10 месяцев назад

    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? ;-;

  • @MinhazFardin
    @MinhazFardin Год назад

    which theme are you using in vs code

  • @divyasingh6981
    @divyasingh6981 Год назад +1

    Thanks ❤️

  • @abdullah-khan10
    @abdullah-khan10 Год назад +2

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

  • @rohinipatil8509
    @rohinipatil8509 6 месяцев назад +1

    Thank you so much sir

  • @deshanbandara4985
    @deshanbandara4985 10 месяцев назад

    Thank you brother ♥

  • @LeanAlcala-fu7vq
    @LeanAlcala-fu7vq 8 месяцев назад

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

  • @rahulkumar12086
    @rahulkumar12086 10 месяцев назад +1

    Can anyone explain how he chosen correct and wrong option ?

  • @oqant0424
    @oqant0424 2 месяца назад

    23:00

  • @peterkyle01
    @peterkyle01 7 месяцев назад

    Awesome tutorial.

  • @bbieye
    @bbieye Год назад

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

    • @volkan9799
      @volkan9799 Год назад +1

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

      @@volkan9799 Thanks this helped me

  • @oqant0424
    @oqant0424 2 месяца назад

    Thank a ton:)

  • @sandalbugen
    @sandalbugen 21 день назад

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

  • @nardoneleonard100
    @nardoneleonard100 Год назад +1

    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

  • @farispepic
    @farispepic 6 месяцев назад +1

    Where have source code for this project ?

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

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

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

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

  • @sundareeshwarand
    @sundareeshwarand 25 дней назад

    why we using let instead of const

  • @Code_Verse01
    @Code_Verse01 7 месяцев назад

    36:27

  • @quotespower9911
    @quotespower9911 Год назад +2

    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
      @chetankumar9463 11 месяцев назад +1

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

    • @helloworld2054
      @helloworld2054 7 месяцев назад

      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

  • @hamzazennou3178
    @hamzazennou3178 10 месяцев назад +1

    Perfect

  • @Asadullah-b1e4p
    @Asadullah-b1e4p 9 месяцев назад

    how intresting if we you create in tsx

  • @ponmugikumaresan5083
    @ponmugikumaresan5083 4 месяца назад

    Error . useRef is not defined 😢

  • @rishavkumar6698
    @rishavkumar6698 11 месяцев назад

    can we get the source code

  • @sparsh-0384
    @sparsh-0384 Год назад +2

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

    • @GreatStackDev
      @GreatStackDev  Год назад

      thanks for comment, it will help all viewers

  • @Codenow10222
    @Codenow10222 8 месяцев назад

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

  • @tech-xTinkerer
    @tech-xTinkerer 7 месяцев назад +1

    Nice video

  • @marghoobalam9874
    @marghoobalam9874 Год назад

    can anyone provide me the Quiz.jsx code

  • @technologytechnepal2391
    @technologytechnepal2391 Год назад

    How to make silent exploit using javascript

  • @ssikarim
    @ssikarim 8 месяцев назад

    Thanks

  • @JeanDamasceneBenimana
    @JeanDamasceneBenimana 12 дней назад

    we need your github page plse

  • @Kleolit
    @Kleolit 9 месяцев назад

    I need all your code

  • @brest_brest
    @brest_brest 10 месяцев назад +1

    Give me the Code
    Please🥺🥺

    • @Azibek_
      @Azibek_ 10 месяцев назад

      Pchool nachooy

  • @zaynindiafans8503
    @zaynindiafans8503 Год назад +4

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

    • @idevkr
      @idevkr Год назад

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

    • @zaynindiafans8503
      @zaynindiafans8503 Год назад

      @@idevkr which channel???

    • @idevkr
      @idevkr Год назад

      @@zaynindiafans8503 youtube channel join button

    • @JustCoNa
      @JustCoNa Год назад +2

      @@zaynindiafans8503 definitely not the channel which posted this video

  • @HimanshuYelane-rc6gm
    @HimanshuYelane-rc6gm 7 месяцев назад

    bhai source code dete to accha hota

  • @SamuelMaiva
    @SamuelMaiva Год назад

    How can I contact you

  • @mohmmedkaifsakali4673
    @mohmmedkaifsakali4673 Год назад

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