使用 React 构建测验应用程序

├── public ├── src │   ├── components │   │   ├── quiz.jsx │   │   ├── question.jsx │   ├── app.jsx │   ├── app.css │   ├── index.js │   └── index.css ├── package.json └── readme.md 

import  { useeffect, usestate } from "react"; import result from "./result"; import question from "./question"; const data = [   {     question: "what is the capital of france?",     options: ["paris", "berlin", "madrid", "rome"],     answer: "paris",   },   {     question: "what is the capital of germany?",     options: ["berlin", "munich", "frankfurt", "hamburg"],     answer: "berlin",   },   {     question: "what is the capital of spain?",     options: ["madrid", "barcelona", "seville", "valencia"],     answer: "madrid",   },   {     question: "what is the capital of italy?",     options: ["rome", "milan", "naples", "turin"],     answer: "rome",   },   {     question: "what is the capital of the united kingdom?",     options: ["london", "manchester", "liverpool", "birmingham"],     answer: "london",   },   {     question: "what is the capital of canada?",     options: ["ottawa", "toronto", "vancouver", "montreal"],     answer: "ottawa",   },   {     question: "what is the capital of australia?",     options: ["canberra", "sydney", "melbourne", "brisbane"],     answer: "canberra",   },   {     question: "what is the capital of japan?",     options: ["tokyo", "osaka", "kyoto", "nagoya"],     answer: "tokyo",   },   {     question: "what is the capital of china?",     options: ["beijing", "shanghai", "guangzhou", "shenzhen"],     answer: "beijing",   },   {     question: "what is the capital of russia?",     options: ["moscow", "saint petersburg", "novosibirsk", "yekaterinburg"],     answer: "moscow",   },   {     question: "what is the capital of india?",     options: ["new delhi", "mumbai", "bangalore", "chennai"],     answer: "new delhi",   },   {     question: "what is the capital of brazil?",     options: ["brasilia", "rio de janeiro", "sao paulo", "salvador"],     answer: "brasilia",   },   {     question: "what is the capital of mexico?",     options: ["mexico city", "guadalajara", "monterrey", "tijuana"],     answer: "mexico city",   },   {     question: "what is the capital of south africa?",     options: ["pretoria", "johannesburg", "cape town", "durban"],     answer: "pretoria",   },   {     question: "what is the capital of egypt?",     options: ["cairo", "alexandria", "giza", "luxor"],     answer: "cairo",   },   {     question: "what is the capital of turkey?",     options: ["ankara", "istanbul", "izmir", "antalya"],     answer: "ankara",   },   {     question: "what is the capital of argentina?",     options: ["buenos aires", "cordoba", "rosario", "mendoza"],     answer: "buenos aires",   },   {     question: "what is the capital of nigeria?",     options: ["abuja", "lagos", "kano", "ibadan"],     answer: "abuja",   },   {     question: "what is the capital of saudi arabia?",     options: ["riyadh", "jeddah", "mecca", "medina"],     answer: "riyadh",   },   {     question: "what is the capital of indonesia?",     options: ["jakarta", "surabaya", "bandung", "medan"],     answer: "jakarta",   },   {     question: "what is the capital of thailand?",     options: ["bangkok", "chiang mai", "phuket", "pattaya"],     answer: "bangkok",   },   {     question: "what is the capital of malaysia?",     options: ["kuala lumpur", "george town", "johor bahru", "malacca"],     answer: "kuala lumpur",   },   {     question: "what is the capital of the philippines?",     options: ["manila", "cebu city", "davao city", "quezon city"],     answer: "manila",   },   {     question: "what is the capital of vietnam?",     options: ["hanoi", "ho chi minh city", "da nang", "hai phong"],     answer: "hanoi",   },   {     question: "what is the capital of south korea?",     options: ["seoul", "busan", "incheon", "daegu"],     answer: "seoul",   }, ]; const quiz = () =&gt; {   const [currentquestion, setcurrentquestion] = usestate(0);   const [score, setscore] = usestate(0);   const [showresult, setshowresult] = usestate(false);   const [timer, settimer] = usestate(30);   const [shownextbutton, setshownextbutton] = usestate(true);    useeffect(() =&gt; {     if (timer === 0) {       handlenext();     }     const timerid = settimeout(() =&gt; settimer(timer - 1), 1000);     return () =&gt; cleartimeout(timerid);   }, [timer]);    const handleanswer = (selectedoption) =&gt; {     if (selectedoption === data[currentquestion].answer) {       setscore(score + 1);     }     setshownextbutton(true); // show the next button after answering   };    const handlenext = () =&gt; {     const nextquestion = currentquestion + 1;     if (nextquestion ;   }    return (     <div classname="quiz"> <div classname="countandtime"> <div classname="questionnumber">        question :  {currentquestion + 1} <b>/</b> {data.length}       </div>       <div classname="timer">time left : {timer} seconds</div> </div>       <question question="{data[currentquestion].question}" options="{data[currentquestion].options}" onanswer="{handleanswer}" onnext="{handlenext}" shownextbutton="{shownextbutton}"></question> </div>   ); };  export default quiz;  

const question = ({ question, options, onanswer, onnext, shownextbutton }) =&gt; {   return (     <div classname="question">       <h2>{question}</h2>       {options.map((option, index) =&gt; (         <button classname="option" key="{index}" onclick="{()"> onanswer(option)}&gt;           {option}         </button>       ))}       {shownextbutton &amp;&amp; <button classname="next" onclick="{onnext}">next </button>}     </div>   ); };  export default question;  

import quiz from "./components/quiz"; import "./app.css"; import logo from "./assets/images/quizlogo.png"; const app = () =&gt; {   return (     <div classname="app">       @@##@@       <quiz></quiz><p classname="footer">made with ❤️ by abhishek gurjar</p>     </div>   ); };  export default app;  

const result = ({ score, totalquestion }) =&gt; {   return (     <div classname="result">       <h2>quiz complete</h2>       <p>your score is {score} out of {totalquestion}</p>     </div>   ); }  export default result;  

* {   box-sizing: border-box; } body {   background-color: #cce2c2;   color: black;   margin: 0;   padding: 0;   font-family: sans-serif; } .app {   width: 100%;    display: flex;   align-items: center;   justify-content: flex-start;   flex-direction: column; } .app img {   margin: 50px; }  /* quiz */ .quiz {   display: flex;   flex-direction: column;   align-items: center;   width: 60%;   margin: 0 auto; } .countandtime {   display: flex;   align-items: center;   gap: 300px; } .questionnumber {   font-size: 20px;   background-color: #fec33d;   padding: 10px;   border-radius: 10px;   font-weight: bold; } .timer {   font-size: 18px;   background-color: #44b845;   color: white;   padding: 10px;   border-radius: 10px;   font-weight: bold; }  /* question */  .question {   margin-top: 20px; } .question h2 {   background-color: #eaf0e7;   width: 690px;   padding: 30px;   border-radius: 10px; } .question .option {   display: flex;   margin-block: 20px;   flex-direction: column;   align-items: flex-start;   background-color: #eaf0e7;   padding: 20px;   border-radius: 10px;   font-size: 18px;   width: 690px; }  .question .next {   font-size: 25px;   color: white;   background-color: #35bd3a;   border: none;   padding: 10px;   width: 100px;   border-radius: 10px;    margin-left: 590px; }  /* result */  .result {   border-radius: 19px;   display: flex;   align-items: center;   justify-content: center;   flex-direction: column;   width: 500px;   height: 300px;   margin-top: 140px;   background-color: #35bd3a;   color: white; } .result h2{   font-size: 40px; } .result p{   font-size: 25px; }  .footer {   margin: 40px; } 

git clone https://github.com/abhishekgurjar-in/quiz-website.git cd quiz-website npm install npm start