介绍
在本教程中，我们将引导您使用 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 = () => {
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(() => {
if (timer === 0) {
handlenext();
}
const timerid = settimeout(() => settimer(timer - 1), 1000);
return () => cleartimeout(timerid);
}, [timer]);
const handleanswer = (selectedoption) => {
if (selectedoption === data[currentquestion].answer) {
setscore(score + 1);
}
setshownextbutton(true); // show the next button after answering
};
const handlenext = () => {
const nextquestion = currentquestion + 1;
if (nextquestion < data.length) {
setcurrentquestion(nextquestion);
} else {
setshowresult(true);
}
setshownextbutton(true); // hide the next button after moving to the next question
settimer(30);
};
if (showresult) {
return <result score={score} totalquestion={data.length} />;
}
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}
/>
</div>
);
};
export default quiz;
测验组件管理当前问题索引和分数。它还会跟踪测验何时完成，并在回答所有问题后显示最终分数。
问题成分
问题组件处理每个问题的显示并允许用户选择答案。
const question = ({ question, options, onanswer, onnext, shownextbutton }) => {
return (
<div classname="question">
<h2>{question}</h2>
{options.map((option, index) => (
<button classname="option" key={index} onclick={() => onanswer(option)}>
{option}
</button>
))}
{shownextbutton && <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 = () => {
return (
<div classname="app">
<img classname="logo" src={logo} alt="logo" />
<quiz />
<p classname="footer">made with ❤️ by abhishek gurjar</p>
</div>
);
};
export default app;
该组件通过页眉和页脚构建页面，测验组件呈现在中心。
结果成分
结果组件负责在用户提交答案后显示他们的测验分数。它通过将用户的回答与正确答案进行比较来计算分数，并提供有关正确回答了多少个问题的反馈。
const result = ({ score, totalquestion }) => {
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 上关注他的工作。
