Membina Aplikasi Kuiz dengan React

pengenalan

Dalam tutorial ini, kami akan membimbing anda membina Laman Web Kuiz yang menyeronokkan dan interaktif menggunakan React. Projek ini ialah cara yang bagus untuk pemula berlatih mengendalikan input pengguna, mengurus keadaan dan memaparkan kandungan dinamik dalam React.

Gambaran Keseluruhan Projek

Tapak Web Kuiz membenarkan pengguna menjawab soalan aneka pilihan dan mendapatkan maklum balas segera tentang pilihan mereka. Pada akhir kuiz, pengguna ditunjukkan markah mereka bersama-sama dengan jawapan yang betul.

Ciri-ciri

• Kuiz Interaktif: Pengguna boleh menjawab soalan dan melihat markah mereka.
• Maklum Balas Masa Nyata: Petunjuk segera sama ada jawapan yang dipilih betul atau tidak.
• Pengiraan Markah: Menjejaki markah sepanjang kuiz.
• Kandungan Dinamik: Soalan dan pilihan dipaparkan secara dinamik daripada senarai yang dipratentukan.

Teknologi yang Digunakan

• React: Untuk membina antara muka pengguna dan mengurus keadaan komponen.
• CSS: Untuk menggayakan aplikasi.
• JavaScript: Untuk mengendalikan fungsi logik dan kuiz.

Struktur Projek

Projek ini berstruktur seperti berikut:

├── public
├── src
│   ├── components
│   │   ├── Quiz.jsx
│   │   ├── Question.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Komponen Utama

• Kuiz.jsx: Mengendalikan logik kuiz dan pengiraan markah.
• Question.jsx: Memaparkan soalan individu dan mengendalikan input pengguna.
• App.jsx: Menguruskan reka letak dan menjadikan komponen Kuiz.

Penerangan Kod

Komponen Kuiz

Komponen Kuiz bertanggungjawab untuk memberikan soalan, mengira markah dan mengendalikan penyelesaian kuiz.

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;

Komponen Kuiz mengurus indeks dan markah soalan semasa. Ia juga menjejaki apabila kuiz selesai, memaparkan markah akhir sebaik sahaja semua soalan dijawab.

Komponen Soalan

Komponen Soalan mengendalikan paparan setiap soalan dan membenarkan pengguna memilih jawapan.

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;

Komponen ini mengambil prop data, yang merangkumi soalan dan pilihannya, dan menjadikannya secara dinamik. Fungsi handleAnswer memproses pilihan yang dipilih.

Komponen Apl

Komponen Apl menguruskan reka letak dan menjadikan komponen Kuiz.

import Quiz from "./components/Quiz";
import "./App.css";
import Membina Aplikasi Kuiz dengan React from "./assets/images/quizMembina Aplikasi Kuiz dengan React.png";
const App = () => {
  return (
    <div classname="app">
      <img classname="Membina Aplikasi Kuiz dengan React" src="%7BMembina" aplikasi kuiz dengan react alt="Membina Aplikasi Kuiz dengan React">
      <quiz></quiz>
      <p classname="footer">Made with ❤️ by Abhishek Gurjar</p>
    </div>
  );
};

export default App;

Komponen ini menstruktur halaman dengan pengepala dan pengaki, dan komponen Kuiz dipaparkan di tengah.

Komponen Hasil

Komponen Keputusan bertanggungjawab untuk menunjukkan skor kuiz pengguna selepas mereka menyerahkan jawapan mereka. Ia mengira skor dengan membandingkan jawapan pengguna dengan jawapan yang betul dan memberikan maklum balas tentang bilangan soalan yang dijawab dengan betul.

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;

Dalam komponen ini, markah dan jumlah soalan diluluskan sebagai prop. Berdasarkan skor, komponen memaparkan mesej kepada pengguna, sama ada memuji mereka kerana mendapat semua jawapan yang betul atau menggalakkan mereka untuk terus berlatih. Maklum balas dinamik ini membantu pengguna memahami prestasi mereka.

Penggayaan CSS

CSS memastikan reka letak yang bersih dan mudah untuk kuiz. Ia menggayakan komponen kuiz dan menyediakan visual yang mesra pengguna.

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

Penggayaan memastikan reka letak dipusatkan dan memberikan kesan tuding pada pilihan kuiz, menjadikannya lebih interaktif.

Pemasangan dan Penggunaan

Untuk memulakan projek ini, klon repositori dan pasang kebergantungan:

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

Ini akan memulakan pelayan pembangunan, dan aplikasi akan berjalan di http://localhost:3000.

Demo Langsung

Lihat demo langsung Laman Web Kuiz di sini.

Kesimpulan

Tapak Web Kuiz ini merupakan projek yang sangat baik untuk pemula yang ingin meningkatkan kemahiran React mereka. Ia menyediakan cara yang menarik untuk berlatih mengurus keadaan, memaparkan kandungan dinamik dan mengendalikan input pengguna.

Kredit

• Inspirasi: Projek ini diilhamkan oleh permainan kuiz klasik, menggabungkan keseronokan dan pembelajaran.

Pengarang

Abhishek Gurjar ialah pembangun web yang bersemangat membina aplikasi web yang interaktif dan menarik. Anda boleh mengikuti kerjanya di GitHub.

Atas ialah kandungan terperinci Membina Aplikasi Kuiz dengan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!