Créer une application de quiz avec React-js tutoriel-php.cn

Building a Quiz Application with React

Introduction

Dans ce tutoriel, nous vous guiderons dans la création d'un site Web de quiz amusant et interactif à l'aide de React. Ce projet est un excellent moyen pour les débutants de s'entraîner à gérer les entrées des utilisateurs, à gérer l'état et à rendre du contenu dynamique dans React.

Aperçu du projet

Le site Web Quiz permet aux utilisateurs de répondre à des questions à choix multiples et d'obtenir un retour instantané sur leurs sélections. À la fin du quiz, les utilisateurs voient leurs scores ainsi que les bonnes réponses.

Caractéristiques

Quiz interactif : les utilisateurs peuvent répondre aux questions et voir leurs scores.
Commentaires en temps réel : indication immédiate si la réponse sélectionnée est correcte ou non.
Calcul du score : assure le suivi du score tout au long du quiz.
Contenu dynamique : les questions et les options sont rendues dynamiquement à partir d'une liste prédéfinie.

Technologies utilisées

React : Pour créer l'interface utilisateur et gérer les états des composants.
CSS : Pour styliser l'application.
JavaScript : pour gérer la logique et les fonctionnalités de quiz.

Structure du projet

Le projet est structuré comme suit :

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

Copier après la connexion

Composants clés

Quiz.jsx : Gère la logique du quiz et le calcul du score.
Question.jsx : affiche les questions individuelles et gère les entrées de l'utilisateur.
App.jsx : gère la mise en page et restitue le composant Quiz.

Explication du code

Composant de quiz

Le composant Quiz est responsable du rendu des questions, du calcul du score et de la gestion de la réalisation du 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 ;
  }

  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;

Copier après la connexion

Le composant Quiz gère l'index et le score des questions actuelles. Il suit également la fin du quiz, affichant le score final une fois que toutes les questions ont été répondues.

Composant de question

Le composant Question gère l'affichage de chaque question et permet à l'utilisateur de sélectionner une réponse.

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;

Copier après la connexion

Ce composant prend le prop data, qui inclut la question et ses options, et le restitue dynamiquement. La fonction handleAnswer traite l'option sélectionnée.

Composant d'application

Le composant App gère la mise en page et restitue le composant Quiz.

import Quiz from "./components/Quiz";
import "./App.css";
import Créer une application de quiz avec React from "./assets/images/quizCréer une application de quiz avec React.png";
const App = () => {
  return (
    <div classname="app">
      <img classname="Créer une application de quiz avec React" src="%7BCr%C3%A9er" une application de quiz avec react alt="Créer une application de quiz avec React">
      <quiz></quiz>
      <p classname="footer">Made with ❤️ by Abhishek Gurjar</p>
    </div>
  );
};

export default App;

Copier après la connexion

Ce composant structure la page avec un en-tête et un pied de page, et le composant Quiz est rendu au centre.

Composant de résultat

Le composant Résultat est chargé d'afficher le score du quiz de l'utilisateur après avoir soumis ses réponses. Il calcule le score en comparant les réponses de l'utilisateur avec les réponses correctes et fournit des commentaires sur le nombre de questions auxquelles il a été répondu correctement.

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;

Copier après la connexion

Dans ce composant, le score et le nombre total de questions sont transmis comme accessoires. En fonction du score, le composant affiche un message à l'utilisateur, soit le félicitant d'avoir obtenu toutes les réponses correctes, soit l'encourageant à continuer à s'entraîner. Ce retour dynamique aide les utilisateurs à comprendre leurs performances.

Style CSS

Le CSS garantit une mise en page claire et simple pour le quiz. Il stylise les composants du quiz et fournit des visuels conviviaux.

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

Copier après la connexion

Le style garantit que la mise en page est centrée et fournit des effets de survol sur les options du quiz, le rendant plus interactif.

Installation et utilisation

Pour démarrer ce projet, clonez le référentiel et installez les dépendances :

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

Copier après la connexion

Cela démarrera le serveur de développement et l'application s'exécutera sur http://localhost:3000.

Démo en direct

Découvrez la démo en direct du site Web Quiz ici.

Conclusion

Ce site Web de quiz est un excellent projet pour les débutants cherchant à améliorer leurs compétences React. Il fournit un moyen attrayant de s'entraîner à gérer l'état, à rendre du contenu dynamique et à gérer les entrées des utilisateurs.

Crédits

Inspiration : Le projet s'inspire des jeux de quiz classiques, alliant plaisir et apprentissage.

Auteur

Abhishek Gurjar est un développeur Web passionné par la création d'applications Web interactives et attrayantes. Vous pouvez suivre son travail sur GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!