在本教學中，我們將引導您使用 React 建立一個有趣的互動式測驗網站。這個專案是初學者練習在 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 = () => {
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 ;
}
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 }) => {
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 使用 React 建立測驗應用程式 from "./assets/images/quiz使用 React 建立測驗應用程式.png";
const App = () => {
return (
<div classname="app">
<img classname="使用 React 建立測驗應用程式" src="%7B%E4%BD%BF%E7%94%A8" react alt="使用 React 建立測驗應用程式">
<quiz></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 確保測驗的版面乾淨簡單。它設計測驗組件的樣式並提供用戶友好的視覺效果。
* {
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 建立測驗應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
