Erstellen einer Quizanwendung mit React

Einführung

In diesem Tutorial führen wir Sie durch die Erstellung einer unterhaltsamen und interaktiven Quiz-Website mit React. Dieses Projekt ist eine großartige Möglichkeit für Anfänger, den Umgang mit Benutzereingaben, die Statusverwaltung und das Rendern dynamischer Inhalte in React zu üben.

Projektübersicht

Auf der Quiz-Website können Benutzer Multiple-Choice-Fragen beantworten und sofortiges Feedback zu ihrer Auswahl erhalten. Am Ende des Quiz werden den Benutzern ihre Ergebnisse zusammen mit den richtigen Antworten angezeigt.

Merkmale

• Interaktives Quiz: Benutzer können Fragen beantworten und ihre Ergebnisse sehen.
• Echtzeit-Feedback: Sofortige Anzeige, ob die ausgewählte Antwort richtig ist oder nicht.
• Ergebnisberechnung: Verfolgt die Punktzahl während des gesamten Quiz.
• Dynamischer Inhalt: Fragen und Optionen werden dynamisch aus einer vordefinierten Liste gerendert.

Verwendete Technologien

• Reagieren: Zum Erstellen der Benutzeroberfläche und Verwalten von Komponentenzuständen.
• CSS: Zum Gestalten der Anwendung.
• JavaScript: Zur Handhabung von Logik- und Quizfunktionen.

Projektstruktur

Das Projekt ist wie folgt aufgebaut:

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

Schlüsselkomponenten

• Quiz.jsx: Verwaltet die Quizlogik und Punkteberechnung.
• Question.jsx: Zeigt einzelne Fragen an und verarbeitet Benutzereingaben.
• App.jsx: Verwaltet das Layout und rendert die Quiz-Komponente.

Code-Erklärung

Quizkomponente

Die Quiz-Komponente ist für die Darstellung der Fragen, die Berechnung der Punktzahl und die Abwicklung des Quiz-Abschlusses verantwortlich.

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;

Die Quiz-Komponente verwaltet den aktuellen Fragenindex und die Punktzahl. Es verfolgt auch, wann das Quiz beendet ist, und zeigt das Endergebnis an, sobald alle Fragen beantwortet wurden.

Fragekomponente

Die Fragekomponente übernimmt die Anzeige jeder Frage und ermöglicht dem Benutzer die Auswahl einer Antwort.

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;

Diese Komponente übernimmt die Datenstütze, die die Frage und ihre Optionen enthält, und rendert sie dynamisch. Die Funktion handleAnswer verarbeitet die ausgewählte Option.

App-Komponente

Die App-Komponente verwaltet das Layout und rendert die Quiz-Komponente.

import Quiz from "./components/Quiz";
import "./App.css";
import Erstellen einer Quizanwendung mit React from "./assets/images/quizErstellen einer Quizanwendung mit React.png";
const App = () => {
  return (
    <div classname="app">
      <img classname="Erstellen einer Quizanwendung mit React" src="%7BErstellen" einer quizanwendung mit react alt="Erstellen einer Quizanwendung mit React">
      <quiz></quiz>
      <p classname="footer">Made with ❤️ by Abhishek Gurjar</p>
    </div>
  );
};

export default App;

Diese Komponente strukturiert die Seite mit einer Kopf- und Fußzeile, und die Quiz-Komponente wird in der Mitte gerendert.

Ergebniskomponente

Die Ergebniskomponente ist dafür verantwortlich, die Quizpunktzahl des Benutzers anzuzeigen, nachdem er seine Antworten übermittelt hat. Es berechnet die Punktzahl, indem es die Antworten des Benutzers mit den richtigen Antworten vergleicht und gibt Feedback darüber, wie viele Fragen richtig beantwortet wurden.

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;

In dieser Komponente werden die Punktzahl und die Gesamtzahl der Fragen als Requisiten weitergegeben. Basierend auf der Punktzahl zeigt die Komponente dem Benutzer eine Nachricht an, in der er ihn entweder dafür lobt, dass er alle Antworten richtig beantwortet hat, oder ihn zum Weiterüben ermutigt. Dieses dynamische Feedback hilft Benutzern, ihre Leistung zu verstehen.

CSS-Styling

Das CSS sorgt für ein sauberes und einfaches Layout des Quiz. Es gestaltet die Quizkomponenten und bietet benutzerfreundliche Grafiken.

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

Der Stil sorgt dafür, dass das Layout zentriert ist und bietet Hover-Effekte auf den Quizoptionen, wodurch es interaktiver wird.

Installation und Nutzung

Um mit diesem Projekt zu beginnen, klonen Sie das Repository und installieren Sie die Abhängigkeiten:

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

Dadurch wird der Entwicklungsserver gestartet und die Anwendung wird unter http://localhost:3000 ausgeführt.

Live-Demo

Sehen Sie sich hier die Live-Demo der Quiz-Website an.

Abschluss

Diese Quiz-Website ist ein hervorragendes Projekt für Anfänger, die ihre Reaktionsfähigkeiten verbessern möchten. Es bietet eine ansprechende Möglichkeit, das Verwalten des Status, das Rendern dynamischer Inhalte und den Umgang mit Benutzereingaben zu üben.

Credits

• Inspiration: Das Projekt ist von den klassischen Quizspielen inspiriert und verbindet Spaß und Lernen.

Autor

Abhishek Gurjar ist ein Webentwickler, der sich leidenschaftlich für die Entwicklung interaktiver und ansprechender Webanwendungen interessiert. Sie können seine Arbeit auf GitHub verfolgen.

Das obige ist der detaillierte Inhalt vonErstellen einer Quizanwendung mit React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!