Brain Bounce Quiz Interactive

Dans le cadre du cours "Interfaces utilisateurs" enseigné par Noé GUILLAUMIN, nous avons réaliser un projet de quiz interactives combinant de la reconnaissance gestuelle et de la reconnaissance vocale.

Qu'est-ce que c'est Brain Bounce ?

C'est une app ludique de jeux interactif sous forme de quiz en naviguant dans les quiz avec les mains et en répondant aux questions par la voix.

Comment on interagit avec l'application ?

Pour choisir cliquer sur un bouton, rapprochez vous d'un thème et cliquer en tapant sur deux doigts (le curseur de mouvement sera rouge lorsque vous effectuerai ce geste). Pour répondre à une question, cliquer sur le bouton "Répondre" et parler en vous rapprochant du micro de votre appareil.

Stack :

• HTML
• Javascript
• CSS
• WebGL (environnement de tracking de mouvement sur le web)
• MediaPipe (tracking de mouvement et reconnaissance vocale)

Sources et inspirations :

• Code source -> Repo de Noé GUILLAUMIN (https://github.com/Antoinoe/IIM-User-Interface-Demos)
• Logo -> Généré avec ChatGPT
• Design UI de la page de jeu et charte graphique (CSS) -> Généré avec ChatGPT à partir du logo généré
• Design UX de la page de jeu (CSS) -> Généré avec ChatGPT avec des instructions axé uniquement sur la fluidité de navigation entre les questions et le menu principal du jeu
• Landing page -> Généré avec ChatGPT basé sur le logo et la fonction de l'application

Attention : Ouvrir le lien sur Chrome car la technologie MediaPipe ne supporte pas les autres navigateurs.