使用 React 构建测验应用程序

原创

ithorizon 4周前 (10-19) 阅读数 32 #CSS

介绍

在本教程中，我们将引导您使用 react 构建一个有趣的交互式测验网站。这个项目是初学者练习在 react 中处理用户输入、管理状态和渲染动态内容的好方法。

项目概况

测验网站允许用户回答多项选择题并获得有关其选择的即时反馈。测验结束时，用户会看到他们的分数以及正确答案。

特征

互动测验：用户可以回答问题并查看他们的分数。
实时反馈：立即指示所选答案是否正确。
分数计算：在整个测验过程中跟踪分数。
动态内容：问题和选项从预定义列表中动态呈现。

使用的技术

react：用于构建用户界面和管理组件状态。
css：用于设计应用程序的样式。
javascript：用于处理逻辑和测验功能。

项目结构

该项目的结构如下：

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

关键部件

quiz.jsx：处理测验逻辑和分数计算。
question.jsx：显示单个问题并处理用户输入。
app.jsx：管理布局并渲染 quiz 组件。

代码说明

测验组件

测验组件负责呈现问题、计算分数以及处理测验完成。

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;

该组件采用 data 属性，其中包括问题及其选项，并动态呈现它。 handleanswer 函数处理所选选项。

应用程序组件

app 组件管理布局并渲染 quiz 组件。

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;

在此组件中，分数和问题总数作为 props 传递。根据分数，该组件向用户显示一条消息，要么表扬他们正确回答所有问题，要么鼓励他们继续练习。这种动态反馈可以帮助用户了解他们的表现。

css 样式

css 确保测验的布局干净简单。它设计测验组件的样式并提供用户友好的视觉效果。

* {
  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

这将启动开发服务器，并且应用程序将在 http://localhost:3000 上运行。

现场演示

在此处查看测验网站的现场演示。

结论

这个测验网站对于希望提高 react 技能的初学者来说是一个出色的项目。它提供了一种引人入胜的方式来练习管理状态、呈现动态内容和处理用户输入。

制作人员

灵感：该项目的灵感来自于经典问答游戏，将乐趣与学习融为一体。

作者

abhishek gurjar 是一位 web 开发人员，热衷于构建交互式且引人入胜的 web 应用程序。您可以在 github 上关注他的工作。

以上就是使用 React 构建测验应用程序的详细内容，更多请关注IT视界其它相关文章！

文章标签：测验组件分数问题用户

上一篇：使用 React 构建主题切换的 Todo 应用程序下一篇：使用 React 构建歌词查找器应用程序