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

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 พ.ย. 2024

ความคิดเห็น • 80

  • @asriomar11
    @asriomar11 9 หลายเดือนก่อน +11

    Easy to understand and follow even for beginner. Thanks.

  • @pankajbeniwal988
    @pankajbeniwal988 11 หลายเดือนก่อน +13

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

    • @GreatStackDev
      @GreatStackDev  11 หลายเดือนก่อน +2

      I will try this shortcut, thanks for comment.

  • @User-lm4qq
    @User-lm4qq 3 หลายเดือนก่อน +1

    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
    @theabundantartist2704 12 วันที่ผ่านมา +1

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

    • @GreatStackDev
      @GreatStackDev  10 วันที่ผ่านมา +1

      Thank you so much.

  • @AnnabelleSwan
    @AnnabelleSwan 7 หลายเดือนก่อน +2

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

  • @yt_paperHANk
    @yt_paperHANk หลายเดือนก่อน +1

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

  • @narendrakumar709
    @narendrakumar709 11 หลายเดือนก่อน +1

    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.

  • @lincholechisa6154
    @lincholechisa6154 10 วันที่ผ่านมา

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

  • @prateeksharma3775
    @prateeksharma3775 5 หลายเดือนก่อน +1

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

  • @muhammadusama7284
    @muhammadusama7284 11 หลายเดือนก่อน +7

    completed .waiting for next video of react JS

    • @GreatStackDev
      @GreatStackDev  11 หลายเดือนก่อน +1

      Great! Please check this React Project playlist: th-cam.com/play/PLjwm_8O3suyMMs7kfDD-p-yIhlmEgJkDj.html

  • @durgeshsingh6380
    @durgeshsingh6380 7 หลายเดือนก่อน +2

    Excellent 👍

  • @adityayadav-bh6wm
    @adityayadav-bh6wm 2 หลายเดือนก่อน +1

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

  • @vinuchakravarthineelakanda790
    @vinuchakravarthineelakanda790 2 หลายเดือนก่อน

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

  • @oqant0424
    @oqant0424 วันที่ผ่านมา

    Thank a ton:)

  • @ultimategamer5136
    @ultimategamer5136 4 หลายเดือนก่อน

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

  • @szymonfelski775
    @szymonfelski775 7 หลายเดือนก่อน

    Great tutorial, thanks!

  • @Shirazimtz
    @Shirazimtz 11 หลายเดือนก่อน +3

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

  • @lucianodeniro6475
    @lucianodeniro6475 5 หลายเดือนก่อน +1

    thanks a lot bro, greetings from Argentina

  • @KillingsworthHaley
    @KillingsworthHaley 5 หลายเดือนก่อน +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 4 หลายเดือนก่อน

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

  • @biologyfacts2760
    @biologyfacts2760 3 หลายเดือนก่อน

    very easy to understand thank u so much

  • @rahulkumar12086
    @rahulkumar12086 8 หลายเดือนก่อน +1

    Can anyone explain how he chosen correct and wrong option ?

  • @MinhazFardin
    @MinhazFardin 10 หลายเดือนก่อน

    which theme are you using in vs code

  • @shreyarani213
    @shreyarani213 หลายเดือนก่อน +1

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

    • @wordsfromheaven
      @wordsfromheaven 9 วันที่ผ่านมา +1

      Import UseRef and UseState

  • @LeanAlcala-fu7vq
    @LeanAlcala-fu7vq 6 หลายเดือนก่อน

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

  • @mohamedabdi32006
    @mohamedabdi32006 7 หลายเดือนก่อน +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...

  • @hotshot6674
    @hotshot6674 8 หลายเดือนก่อน

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

  • @rohinipatil8509
    @rohinipatil8509 3 หลายเดือนก่อน +1

    Thank you so much sir

  • @hamzazennou3178
    @hamzazennou3178 7 หลายเดือนก่อน +1

    Perfect

  • @deshanbandara4985
    @deshanbandara4985 8 หลายเดือนก่อน

    Thank you brother ♥

  • @Code_Verse01
    @Code_Verse01 4 หลายเดือนก่อน +1

    33:03

  • @er.soumyavlogs
    @er.soumyavlogs 11 หลายเดือนก่อน +1

    Luv u brother❤

    • @GreatStackDev
      @GreatStackDev  11 หลายเดือนก่อน

      Thanks bro, Glad you liked this react project

  • @peterkyle01
    @peterkyle01 4 หลายเดือนก่อน

    Awesome tutorial.

  • @divyasingh6981
    @divyasingh6981 11 หลายเดือนก่อน +1

    Thanks ❤️

  • @bbieye
    @bbieye 11 หลายเดือนก่อน

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

    • @volkan9799
      @volkan9799 11 หลายเดือนก่อน +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 7 หลายเดือนก่อน

      @@volkan9799 Thanks this helped me

  • @rublyn111
    @rublyn111 11 หลายเดือนก่อน

    Happy I saw this early. Thanks man

    • @GreatStackDev
      @GreatStackDev  11 หลายเดือนก่อน

      Glad you liked this React Quiz app tutorial

  • @ponmugikumaresan5083
    @ponmugikumaresan5083 หลายเดือนก่อน

    Error . useRef is not defined 😢

  • @omarbarbeir9887
    @omarbarbeir9887 11 หลายเดือนก่อน +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 5 หลายเดือนก่อน +1

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

  • @abdullah-khan10
    @abdullah-khan10 11 หลายเดือนก่อน +2

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

  • @oqant0424
    @oqant0424 2 วันที่ผ่านมา

    23:00

  • @aqqibhasan9684
    @aqqibhasan9684 4 หลายเดือนก่อน +1

    Nice video

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน

      Glad you liked it. 😊

  • @Asadullah-b1e4p
    @Asadullah-b1e4p 6 หลายเดือนก่อน

    how intresting if we you create in tsx

  • @farispepic
    @farispepic 4 หลายเดือนก่อน +1

    Where have source code for this project ?

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน

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

    • @farispepic
      @farispepic 4 หลายเดือนก่อน

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

  • @Codenow10222
    @Codenow10222 6 หลายเดือนก่อน

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

  • @quotespower9911
    @quotespower9911 9 หลายเดือนก่อน +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 9 หลายเดือนก่อน +1

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

    • @helloworld2054
      @helloworld2054 4 หลายเดือนก่อน

      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

  • @ssikarim
    @ssikarim 5 หลายเดือนก่อน

    Thanks

  • @nardoneleonard100
    @nardoneleonard100 10 หลายเดือนก่อน +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

  • @rishavkumar6698
    @rishavkumar6698 8 หลายเดือนก่อน

    can we get the source code

  • @sparsh-0384
    @sparsh-0384 11 หลายเดือนก่อน +2

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

    • @GreatStackDev
      @GreatStackDev  11 หลายเดือนก่อน

      thanks for comment, it will help all viewers

  • @technologytechnepal2391
    @technologytechnepal2391 11 หลายเดือนก่อน

    How to make silent exploit using javascript

  • @Code_Verse01
    @Code_Verse01 4 หลายเดือนก่อน

    36:27

  • @zaynindiafans8503
    @zaynindiafans8503 11 หลายเดือนก่อน +4

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

    • @idevkr
      @idevkr 11 หลายเดือนก่อน

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

    • @zaynindiafans8503
      @zaynindiafans8503 11 หลายเดือนก่อน

      @@idevkr which channel???

    • @idevkr
      @idevkr 11 หลายเดือนก่อน

      @@zaynindiafans8503 youtube channel join button

    • @JustCoNa
      @JustCoNa 11 หลายเดือนก่อน +2

      @@zaynindiafans8503 definitely not the channel which posted this video

  • @marghoobalam9874
    @marghoobalam9874 9 หลายเดือนก่อน

    can anyone provide me the Quiz.jsx code

  • @brest_brest
    @brest_brest 8 หลายเดือนก่อน +1

    Give me the Code
    Please🥺🥺

    • @Azibek_
      @Azibek_ 8 หลายเดือนก่อน

      Pchool nachooy

  • @HimanshuYelane-rc6gm
    @HimanshuYelane-rc6gm 4 หลายเดือนก่อน

    bhai source code dete to accha hota

  • @Kleolit
    @Kleolit 7 หลายเดือนก่อน

    I need all your code

  • @SamuelMaiva
    @SamuelMaiva 11 หลายเดือนก่อน

    How can I contact you

  • @mohmmedkaifsakali4673
    @mohmmedkaifsakali4673 11 หลายเดือนก่อน

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