×

Créé une application quizz avec ReactJs et Bootstrap

Programmation

Créé une application quizz avec ReactJs et Bootstrap

Dans ce tutoriel, on va crée une application de quizz avec React.js et Bootstrap. React.js est une bibliothèque JavaScript open-source développée par Facebook. Elle est principalement utilisée pour la création d’interfaces utilisateur (UI) interactives et conviviales pour les applications web. React se concentre sur la construction d’interfaces utilisateur modulaires et réutilisables en utilisant des composants. On créera dans ce tuto une application de quiz assez simple avec des questions à chois multiple.

1. Configuration de l’environnement :

Si vous n’avez pas déjà Node.js installé sur votre système, vous pouvez le télécharger depuis le site officiel : https://nodejs.org/

Ensuite, vous pouvez créer une nouvelle application React en utilisant Create React App, qui est un outil de création de projet React. Ouvrez votre terminal et exécutez la commande suivante :

Bash
npx create-react-app quizz-app
cd quizz-app

2. Installation de Bootstrap :

Pour ajouter Bootstrap à votre application React, utilisez npm (Node Package Manager) :

Bash
npm install bootstrap

3. Création des composants React :

Créez les composants React nécessaires pour votre application de quizz. Vous pouvez organiser votre code de différentes manières, mais voici une structure de fichiers de base :

Lua
src/
|-- components/
|   |-- Quiz.js
|   |-- Question.js
|   |-- Result.js
|-- App.js

4. Créez le composant Quiz :

Dans le composant Quiz.js, vous pouvez gérer la logique du quizz, telles que la gestion des questions, le suivi du score, etc. Voici un exemple simplifié :

JSX
// src/components/Quiz.js

import React, { Component } from 'react';
import Question from './Question';
import Result from './Result';

class Quiz extends Component {
  constructor(props) {
    super(props);
    this.state = {
        questions: [{
            text: "Quelle est la capitale de la France ?",
            options: [
            { text: "Paris", isCorrect: true },
            { text: "Londres", isCorrect: false },
            { text: "Berlin", isCorrect: false },
            { text: "Madrid", isCorrect: false },
            ],
        },
        {
            text: "Quelle est la planète la plus proche du soleil ?",
            options: [
            { text: "Terre", isCorrect: false },
            { text: "Vénus", isCorrect: true },
            { text: "Mars", isCorrect: false },
            { text: "Jupiter", isCorrect: false },
            ],
        },
        {
            text: "Combien de continents y a-t-il sur Terre ?",
            options: [
            { text: "5", isCorrect: false },
            { text: "6", isCorrect: false },
            { text: "7", isCorrect: true },
            { text: "8", isCorrect: false },
            ],
        },
        ],
        currentQuestion: 0,
        score: 0,
        showResult: false,
    };
  }

  // Méthode pour gérer la soumission de la réponse
  handleSubmit = (isCorrect) => {
    if (isCorrect) {
      this.setState((prevState) => ({
        score: prevState.score + 1,
      }));
    }

    if (this.state.currentQuestion === this.state.questions.length - 1) {
      this.setState({ showResult: true });
    } else {
      this.setState((prevState) => ({
        currentQuestion: prevState.currentQuestion + 1,
      }));
    }
  };

  // Méthode pour rejouer le quizz
  rejouerQuizz = () => {
    this.setState({
      currentQuestion: 0,
      score: 0,
      showResult: false,
    });
  };

  render() {
    const { currentQuestion, questions, score, showResult } = this.state;

    return (
      <div className="container mt-5">
        {!showResult ? (
          <Question
            question={questions[currentQuestion]}
            handleSubmit={this.handleSubmit}
          />
        ) : (
          <Result score={score} totalQuestions={questions.length} rejouerQuizz={this.rejouerQuizz}/>
        )}
      </div>
    );
  }
}

export default Quiz;

5. Créez le composant Question :

Le composant Question.js sera responsable de l’affichage des questions et des options de réponse. Voici un exemple de code pour ce composant :

JSX
// src/components/Question.js

import React, { Component } from 'react';

class Question extends Component {
  render() {
    const { question, handleSubmit } = this.props;

    return (
      <div>
        <h2 className="mb-4">{question.text}</h2>
        <ul className="list-group">
          {question.options.map((option, index) => (
            <li key={index} className="list-group-item">
              <button
                className="btn btn-primary"
                onClick={() => handleSubmit(option.isCorrect)}
              >
                {option.text}
              </button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default Question;

6. Créez le composant Result :

Le composant Result.js affichera le score final de l’utilisateur à la fin du quizz. Voici un exemple de code pour ce composant :

JSX
// src/components/Result.js

import React from 'react';

const Result = ({ score, totalQuestions, rejouerQuizz }) => {
  return (
    <div>
      <h2>Résultat du Quizz</h2>
      <p>
        Votre score est de {score}/{totalQuestions}.
      </p>
      <button className="btn btn-primary" onClick={rejouerQuizz}>
        Rejouer
      </button>
    </div>
  );
};

export default Result;

7. Utilisation de Bootstrap :

Assurez-vous d’importer Bootstrap dans votre application. Vous pouvez le faire en important le fichier CSS Bootstrap dans votre fichier index.js :

JSX
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap CSS

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

8. Page d’accueil App.js :

JSX
// src/App.js

import React from 'react';
import './App.css';
import Quiz from './components/Quiz';

function App() {
  return (
    <div className="App">
      <main>
        <Quiz />
      </main>
      <footer className="App-footer">
        <p>Réalisé avec React et Bootstrap</p>
      </footer>
    </div>
  );
}

export default App;

9. Personnalisation :

Personnalisez davantage votre application de quizz en ajoutant des questions et des options de réponse dans le composant Quiz.js. Vous pouvez également personnaliser les styles en utilisant les classes Bootstrap dans vos composants.

10. Exécutez l’application :

Lancez votre application en utilisant la commande suivante :

Bash
npm start

Accédez à http://localhost:3000/ pour voir votre application de quizz en action.

Nous voila à la fin de ce tutoriel pour créer une application de quizz avec React et Bootstrap. Vous pouvez personnaliser davantage l’application, ajouter plus de questions, styliser l’interface utilisateur et étendre les fonctionnalités selon vos besoins spécifiques.

Related Posts

359 commentaires