BelgoQuizz !

Case-study

Cette étude de cas détaille la création et le fonctionnement de mon projet de TFA, BelgoQuizz !

Smartphone affichant la web app BelgoQuizz! Smartphone affichant la web app BelgoQuizz! Projet Présentation Case-study À propos
Menu

Le fonctionnement

Pour ce projet, j’ai choisi d’utiliser un fichier JSON afin de faciliter l’ajout, la modification ou le retrait de certaines questions. En effet, je voulais séparer les questions du reste de l’application pour pouvoir les changer selon mes besoins. Dans le fichier JSON, les réponses ne sont pas placées de manière aléatoire, la première option est toujours la réponse correcte. J’utilise une fonction javascript afin de les mélanger. De cette façon, si un utilisateur recommence plusieurs fois le quizz, les réponses ne se situeront pas aux mêmes endroits.

Exemple d'une page de questions et des choix de réponses. Exemple d'une page de questions et des choix de réponses.

Ensuite, l’application permet au joueur d’utiliser trois bonus. Deux permettent de passer la question et le dernier permet d’avoir un indice. Cet indice se trouve également dans le fichier JSON. La dernière chose que contient ce fichier est une histoire courte sur le thème évoqué dans la question. Elle permet à l’utilisateur d’en apprendre plus. Elle est incrémentée dans la fenêtre indiquant si la réponse est correcte ou erronée.

3 écrans de l'app BelgoQuizz!

Le fonctionnement du questionnaire est simple, une fonction JavaScript incrémente une question, ses réponses, son indice et son anecdote. Lorsque la question apparait, les trois réponses sont chargées dans trois variables qui se positionnent aléatoirement dans les cases de réponses. Quand l’utilisateur appuie sur une réponse, le script vérifie que la variable sélectionnée est égale à la réponse correcte. Si c’est le cas, le score augmente d’un point et la page « Bravo ! » apparait. Si la réponse sélectionnée n’est pas la bonne, alors le score reste inchangé et le compteur de vie diminue. La page « Dommage ! » s’affiche.

Lorsque le compteur de vies atteint zéro, la partie se termine et le score s’affiche sur un modal. L'utilisateur peut choisir de recommencer une partie ou de retourner à l’écran d’accueil. Si ce dernier rejoue, il recommencera à la question suivant celle sur laquelle il a échoué. De ce fait, il ne recomencera pas les questions auxquelles il a déjà répondu.

Toutefois, si le joueur finit toute les questions, un autre modal apparait. Celui-ci, en plus de le féliciter pour avoir répondu à toutes les questions, lui propose de refaire tout le quizz.

L’application permet aussi à l’utilisateur de la partager sur différents réseaux sociaux (Facebook, Twitter, Google+). Sur twitter, un tweet peut être posté avec le score que vous avez réalisé.

Image montrant le partage du score d'un utilisateur sur Twitter.

Dans le menu hamburger de la page d’accueil, il est possible d’accéder à une page d’explication du jeu.

Le design

Pour le design de mon application, j’ai choisi quelque chose de simple pour permettre à l’utilisateur de comprendre facilement les différents éléments qui composent l’interface. Je pense qu’avec la présentation actuelle de BelgoQuizz, un utilisateur, même peu familier avec les interfaces de jeu, est capable de prendre facilement l’application en main.

De plus, je souhaitais qu’il n’y ait pas d’éléments non indispensables affichés à l’écran. Ainsi, l’utilisateur n’est pas assommé d’informations inutiles et le questionnaire est disponible avec toutes les informations peu importe le type ou la taille de l’écran.

La typographie

Pour ce projet, j’ai utilisé deux polices de caractères. La première, pour les titres et les sous-titres, est la police Ubuntu. C’est une police de caractères sans-sérif de style contemporain, réalisée par Dalton Maag.

La seconde police de caractères, pour le corps du texte cette fois, est la Cabin. C’est également une police sans-sérif, d’un style assez classique. Certaines lettres présentent des arrondis, apportant un peu de modernisme à l’ensemble. Cette police est dessinée par Pablo Impallari.

Titre

corps du texte

Les couleurs

Pour les couleurs de mon application, j’ai choisi les trois couleurs du drapeau belge : le noir, le jaune et le rouge.

À ces trois couleurs, j’en ai ajouté deux autres, le rose et le blanc.

Les trois premières couleurs servent à séparer les trois possibilités de réponses ainsi qu’à colorer quelques autres petits éléments. Le rose est utilisé lorsque nous cliquons sur les boutons. Il remplace aussi le fond blanc, quand un bonus a été utilisé. Le blanc a été choisi pour le fond, pour éviter de surcharger de couleurs les pages de l’application. Il est également utilisé pour les textes sur fond foncé.

La conclusion

En conclusion, BelgoQuizz est une application web qui a été conçue pour un public large. En réalisant ce travail, j’ai essayé de concevoir un produit facile à comprendre et à utiliser. Je voulais qu’il soit également ludique et attrayant.

J’ai beaucoup apprécié la réalisation de ce travail, car, elle m’a permis de proposer un produit amusant, pour l’utilisateur mais également pour moi-même. Dans ce quizz, j'ai pu travailler sur des thèmes que j’apprécie : l’histoire belge, le jeu et la programmation en JavaScript.

Enfin, ce travail est, encore une fois, une occasion d’apprendre de nouvelles choses sur le développement web et de mettre en pratique ce que j’ai appris durant cette année en DWM.

Voir le projet