Atelier 1 : Quiz Application
Objectif :
Dans cette application, nous allons avoir les caractéristiques ou les modules mentionnés ci-dessous :
• Cinq questions à choix multiples (d'autres questions peuvent être ajoutées).
• Quatre options sélectionnables pour chaque question sous forme de boutons, à l'exception de
la dernière.
• Le score sera calculé en fonction de l'option sélectionnée pour chaque question (en interne).
• En fonction du score final, une remarque sera affichée à la fin du quiz, en plus du score et du
bouton de redémarrage.
• L'application comporte deux écrans : l'écran d'accueil (où les questions sont affichées) et
l'écran des résultats (où le score et la remarque sont affichés).
• L'application entière sera séparée en cinq modules différents, à savoir [Link],
[Link], [Link], [Link] et [Link].
Mise en place :
Pour commencer à créer l'application, nous devons d'abord créer un projet Flutter qui nous fournira
de nombreux fichiers et dossiers. Dans le dossier Lib, un fichier [Link] est déjà présent. Et
maintenant, dans le même dossier rest, quatre fichiers doivent être créés :-
• [Link]
• [Link]
• [Link]
• [Link]
Étape 1 : Dans la première étape, nous allons
• Créer la classe MyApp et la rendre dynamique.
• Ajouter des questions pour l'écran home.
• Créer une arborescence de widgets pour l'écran d'accueil.
• En commençant par le fichier [Link]
Créer les variables suivants :
final _questions = const [{
'questionText' : 'Q1. Qui a créé Flutter ? ',
'answers' : [
{'text' : 'Facebook', 'score' : -2},
{'text' : 'Adobe', 'score' : -2},
{'text' : 'Google', 'score' : 10},
{"text" : "Microsoft", "score" : -2},
],
},
{
'questionText' : 'Q2. Qu est-ce que Flutter ?',
'answers' : [
{'text' : 'Android Development Kit', 'score' : -2},
{'text' : 'Kit de développement IOS', 'score' : -2},
{'text' : 'Kit de développement Web', 'score' : -2},
{
'text' :
'SDK to build beautiful IOS, Android, Web & Desktop Native Apps',
'score' : 10
},
],
},
{
'questionText' : ' Q3. Quel est le langage de programmation utilisé par Flutter ?',
'answers' : [
{'text' : 'Ruby', 'score' : -2},
{'text' : 'Dart', 'score' : 10},
{'text' : 'C++', 'score' : -2},
{"text" : "Kotlin", "score" : -2},
],
},
{
'questionText' : 'Q4. Qui a créé le langage de programmation Dart ?',
'answers' : [
{'text' : 'Lars Bak et Kasper Lund', 'score' : 10},
{'text' : 'Brendan Eich', 'score' : -2},
{"text" : "Bjarne Stroustrup", "score" : -2},
{"text" : "Jeremy Ashkenas", "score" : -2},
],
},
{
'questionText' :
'Q5. Flutter pour le web et le bureau est-il disponible en version stable ?',
'answers' : [
{
'text' : 'Oui',
'score' : -2,
},
{'text' : 'No', 'score' : 10},
],
},
];
var _questionIndex = 0 ;
var _totalScore = 0 ;
Créez les deux méthodes _resetQuiz() et _answerQuestion(int scor) , la première méthode sert pour
initialiser le Quiz a zéro (Question 1 et score 0) , la deuxième méthode calcule le score total selon la
réponse de l’utilisateur et vérifier si il y a des questions qui reste si oui on passe a la question
suivante si non on affiche un message indiquent la fin de Quizz.
Le widget principal fait appel au widget Quiz de fichier [Link] et Result dans le fichier
[Link] selon l’ordre des questions si l’ordre est inférieure a la taille de la liste des question donc
on va intégrer Quiz si Non on intégre Result.
Dans le fichier [Link] , La classe Quizz hérite depuis StatelessWidget:
Dans le fichier [Link] , la classe Question hérite depuis StatelessWidget c’est un widget pour
afficher la question (Container et Text)
Dans le fichier [Link] , la classe Answer hérite depuis StatelessWidget c\est une widget pour
construire les reposes et le score d’une manière itérative (SizeBox et ElevatedButton)
Dans le fichier [Link] , la classe Result hérite depuis StatelessWidget c;est une sidget pour
afficher le resultat final (2 Text et un TextButton)
