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 :
npm install -g @angular/cliEnsuite, créez un nouveau projet Angular en utilisant la commande suivante :
ng new quiz-appSuivez les instructions pour configurer votre projet.
Enfin, on installe bootstrap pour ajouter du style dans notre application.
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 ».
ng generate component quizzEnsuite crée un service appeler « quizz »
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« .
// 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 » :
// 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.
// 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
<!-- 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 :
ng serveAccé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.
273 commentaires