×

Crée une application de quizz complète avec Angular et Bootstrap

Crée une application de quizz complète avec Angular et Bootstrap

Dans ce tutoriel, on va crée une application de quizz complète avec Angular et Bootstrap qui est un projet passionnant. AngularJS, souvent simplement appelé Angular, est un framework JavaScript open-source développé par Google. Il est principalement utilisé pour le développement d’applications web single-page (SPA) et est conçu pour simplifier la création de ces applications en utilisant une approche déclarative pour la construction de l’interface utilisateur et en offrant des fonctionnalités pour la gestion de l’état, la communication avec un serveur et bien plus encore. On créera un exemple simple d’application de quizz avec des questions à choix multiples.

Étape 1 : Configuration de l’environnement Angular

Assurez-vous que vous avez Angular CLI installé. Si ce n’est pas le cas, vous pouvez l’installer en utilisant la commande suivante :

Bash
npm install -g @angular/cli

Ensuite, créez un nouveau projet Angular en utilisant la commande suivante :

Bash
ng new quiz-app

Suivez les instructions pour configurer votre projet.

Enfin, on installe bootstrap pour ajouter du style dans notre application.

Bash
cd quiz-app
npm install bootstrap

Étape 2 : Création des composants et services

Créez un composant pour votre application de quizz. Dans cet exemple, nous allons l’appeler « quizz ».

Bash
ng generate component quizz

Ensuite crée un service appeler « quizz »

Bash
ng generate service quizz

Étape 3 : Création des modèles de données

Définissez vos modèles de données pour les questions et les réponses. Créez un dossier « models » à la racine de votre projet et ajoutez le fichiers « question.model.ts« .

TypeScript
// src/app/models/question.model.ts

export class Question {
  constructor(
    public questionText: string,
    public options: string[],
    public correctOption: string
  ) {}
}

Étape 4 : Création des questions

Dans le service « quizz.service.ts » (c’est là que vous stockez vos questions), vous ajouter le code suivant pour ajouter les questions crée une méthode getQuestions qui permet de recuperer les questions dans le component « quizz » :

TypeScript
// src/app/quizz.service.ts

import { Injectable } from '@angular/core';
import { Question } from './models/question.model';

@Injectable({
  providedIn: 'root',
})
export class QuizzService {
  private questions: Question[] = [
    {
      questionText: 'Quelle est la capitale de la France ?',
      options: ['Paris', 'Londres', 'Berlin', 'Madrid'],
      correctOption: 'Paris',
    },
    {
      questionText: 'Quelle est la capitale de la France ?',
      options: ['Paris', 'Londres', 'Berlin', 'Madrid'],
      correctOption: 'Paris',
    },
    {
      questionText: 'Quelle est la capitale de la France ?',
      options: ['Paris', 'Londres', 'Berlin', 'Madrid'],
      correctOption: 'Paris',
    },
    {
      questionText: 'Quelle est la capitale de la France ?',
      options: ['Paris', 'Londres', 'Berlin', 'Madrid'],
      correctOption: 'Paris',
    },
  ];

  getQuestions(): Question[] {
    return this.questions;
  }
}

Étape 5 : Implémentation du component quiz (quiz.component.ts)

Dans le fichier quiz.component.ts, nous implémentons le méthode onselectOption qui permet de détecter si une réponse est sélectionner, la méthode onSubmitAnswer qui permet de détecter si les réponse du quiz sont soumis et la méthode rejouerQuiz qui comme son nom l’indique permet de rejouer au quizz.

TypeScript
// src/app/quizz/quizz.component.ts

import { Component, OnInit } from '@angular/core';
import { Question } from '../models/question.model';
import { QuizzService } from '../quizz.service';

@Component({
  selector: 'app-quizz',
  templateUrl: './quizz.component.html',
  styleUrls: ['./quizz.component.css'],
})
export class QuizzComponent implements OnInit {
  questions: Question[] = [];
  currentQuestionIndex = 0;
  selectedOption = '';
  score = 0;
  quizCompleted = false;
  showError = false; // Nouvelle variable pour afficher l'erreur

  constructor(private quizzService: QuizzService) {}

  ngOnInit(): void {
    this.questions = this.quizzService.getQuestions();
  }

  onSelectOption(option: string): void {
    this.selectedOption = option;
  }

  onSubmitAnswer(): void {
    if (this.selectedOption === '') {
      // Vérifiez si aucune option n'a été sélectionnée
      this.showError = true; // Affichez l'erreur
      return; // Sortez de la méthode sans valider la réponse
    }

    const currentQuestion = this.questions[this.currentQuestionIndex];

    if (this.selectedOption === currentQuestion.correctOption) {
      this.score++;
    }

    this.selectedOption = '';
    this.currentQuestionIndex++;

    if (this.currentQuestionIndex === this.questions.length) {
      this.quizCompleted = true;
    }

    this.showError = false; // Réinitialisez l'erreur lorsque l'utilisateur avance
  }

  rejouerQuizz(): void {
    // Réinitialisez les variables pour rejouer
    this.currentQuestionIndex = 0;
    this.score = 0;
    this.quizCompleted = false;
  }
}

Étape 6 : Créez le modèle de présentation HTML :

On ajoute le code html suivant sur le fichier quiz.component.html pour afficher les questions et les chois

HTML
<!-- src/app/quizz/quizz.component.html -->

<div *ngIf="!quizCompleted" class="container bg-white shadow p-3 mt-5" style="width: 35%;">
    <h1 class="mb-4">Quizz</h1>
    <div class="question">
      <h2>{{ questions[currentQuestionIndex].questionText }}</h2>
      <div *ngFor="let option of questions[currentQuestionIndex].options">
        <label class="form-check-label">
          <input
            type="radio"
            name="answer"
            [value]="option"
            [(ngModel)]="selectedOption"
            class="form-check-input"
          />
          {{ option }}
        </label>
      </div>
    </div>
    <button (click)="onSubmitAnswer()" class="btn btn-primary mt-3">Valider</button>
    <div *ngIf="showError" class="alert alert-danger mt-3">
        Veuillez sélectionner une réponse avant de valider.
      </div>
</div>
  
<div *ngIf="quizCompleted" class="container bg-white shadow p-3 mt-5" style="width: 35%;">
    <h1>Résultat</h1>
    <p>Ton score est de {{ score }}/{{ questions.length }}</p>
    <button (click)="rejouerQuizz()" class="btn btn-success">Rejouer</button>
</div>
  

Étape 7 : Tester votre application :

Vous pouvez tester votre application en exécutant la commande suivante :

Bash
ng serve

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

Étape 8 : Personnalisation et Ajouts

Personnalisez votre application de quizz en ajoutant plus de questions, en améliorant le style avec Bootstrap, en ajoutant un chronomètre ou en affichant un score à la fin du quizz.

Ceci est un exemple de base pour créer une application de quizz avec Angular et Bootstrap sans routage. Vous pouvez le personnaliser et l’étendre en fonction de vos besoins spécifiques.

274 commentaires