Cliquer pour passer

Tous les projets
Projet agence · Artefact 30002025

BNP Paribas

ReactViteTypeScriptPixiJSGSAPFramer Motionreact-beautiful-dndSCORM 1.2Accessibilitéi18nStorybook

Module e-learning IA générative

Un des projets qui m'a le plus stimulé. Développé chez Artefact 3000 pour BNP Paribas, ce module e-learning gamifié forme des milliers de collaborateurs aux fondamentaux de l'IA générative. 6 chapitres, 5 types de mini-jeux, 6 vidéos générées par IA, un personnage guide. Et surtout, un pari que peu d'agences tentent : remplacer Articulate Storyline par une app React complète, packagée en SCORM 1.2 pour s'intégrer dans n'importe quel LMS d'entreprise.

Vue d'ensemble01

Un module e-learning qui remplace Articulate par une app React.

6 chapitres, 5 mini-jeux, 6 vidéos générées par IA, un personnage guide, packagé en SCORM 1.2 pour s'intégrer dans le LMS interne BNP.

Fig.01 — L'écran d'introductionModule SCORM interne

L'écran d'introduction : AI-nstein — personnage IA inspiré d'Einstein — guide l'utilisateur via une interface de chat, envoyant des messages et posant des questions auxquels on répond en cliquant. En parallèle, le module de cours principal affiche le contenu interactif du chapitre en cours. En bas, une barre de progression suit l'avancement sur l'ensemble des six chapitres. Les jeux interactifs arrivent dans les chapitres suivants.

Section02

Les mini-jeux interactifs

Cinq types de mini-jeux distincts, développés from scratch avec PixiJS. DataShield : intercepter des données sensibles en chute libre. Un catégoriseur de prompts en glisser-déposer. Une chasse aux hallucinations. Et pour le chapitre 5, le convoi de presse : un objet physique invisible représente la malle sur le tapis roulant, synchronisé image par image avec la vidéo, pour déclencher l'entrée dans les pressoirs au bon moment.

Module e-learning IA générative — Les mini-jeux interactifs — vue 0
Module e-learning IA générative — Les mini-jeux interactifs — vue 1
Module e-learning IA générative — Les mini-jeux interactifs — vue 2
Module e-learning IA générative — Les mini-jeux interactifs — vue 3
Module e-learning IA générative — Les mini-jeux interactifs — vue 4
Module e-learning IA générative — Les mini-jeux interactifs — vue 5
Module e-learning IA générative — Les mini-jeux interactifs — vue 6
Module e-learning IA générative — Les mini-jeux interactifs — vue 7
Module e-learning IA générative — Les mini-jeux interactifs — vue 8
Section03

Apprentissage, récaps & résultats

Chaque chapitre suit le même rythme : une vidéo d'introduction générée par IA, des explications, un jeu interactif, puis un écran de récap ou de résultats qui distingue clairement le juste du faux. En bout de parcours, un passeport de compétences valide l'ensemble des chapitres.

Module e-learning IA générative — Apprentissage, récaps & résultats — vue 0
Module e-learning IA générative — Apprentissage, récaps & résultats — vue 1
Module e-learning IA générative — Apprentissage, récaps & résultats — vue 2
Module e-learning IA générative — Apprentissage, récaps & résultats — vue 3
Module e-learning IA générative — Apprentissage, récaps & résultats — vue 4
Module e-learning IA générative — Apprentissage, récaps & résultats — vue 5
Module e-learning IA générative — Apprentissage, récaps & résultats — vue 6
Module e-learning IA générative — Apprentissage, récaps & résultats — vue 7
Module e-learning IA générative — Apprentissage, récaps & résultats — vue 8
Module e-learning IA générative — Apprentissage, récaps & résultats — vue 9
Côté technique04

Cinq décisions qui ont fait le projet.

Pour les développeurs et les recruteurs : voici les choix techniques qui ont structuré ce module e-learning gamifié, du remplacement d'Articulate à l'accessibilité au clavier.

01

Remplacer Articulate Storyline par React au sein de l'agence

Les modules SCORM d'Artefact étaient produits avec Articulate Storyline — outil no-code, rapide, mais design contraint, animations impossibles, aucune interactivité custom. Des freelances étaient payés pour produire des slides. L'idée : prouver qu'on pouvait livrer la même compatibilité SCORM 1.2 avec une vraie app React — et changer le workflow de l'agence pour tous les futurs clients e-learning. La technique existe, mais elle est rarement mise en œuvre dans un contexte agence où Articulate est la norme.

02

Comprendre et implémenter le protocole SCORM 1.2

SCORM 1.2 est un standard des années 2000. Un package SCORM, c'est une archive ZIP avec un manifest XML (`imsmanifest.xml`) qui décrit le module, et une API JavaScript (`LMSInitialize`, `LMSSetValue`, `LMSCommit`, etc.) que le LMS expose à la page. J'ai étudié la spec, compris le protocole de communication, puis intégré `pipwerks-scorm-api-wrapper` pour abstraire les appels LMS — ce qui a permis de remonter score, progression et statut de complétion vers le LMS de BNP depuis l'app React.

03

Machine à états pour un flow pédagogique complexe

6 chapitres, une intro, une séquence finale, des dizaines d'étapes conditionnelles selon les réponses de l'utilisateur — sans routing serveur possible. L'ensemble du flow est modélisé via des stores Zustand en machine à états. Chaque étape expose ses conditions d'entrée et de sortie, sa contribution à la progression, et son rendu conditionnel.

04

Mini-jeux canvas dans une SPA statique

Chaque chapitre a son propre mini-jeu — jeu de briques avec raquette et balle (PixiJS), bouclier qui intercepte des données en chute, chasse aux hallucinations IA, catégoriseur de packages. Intégrer PixiJS dans React a demandé de gérer manuellement le cycle de vie des scènes canvas pour éviter les fuites mémoire entre transitions de chapitres.

05

Accessibilité complète — navigation clavier, audio description, zoom

BNP imposait une conformité accessibilité stricte. À l'ouverture du module, l'utilisateur choisit sa langue, active ou désactive l'audio description, règle le niveau de zoom, et choisit entre navigation classique et navigation au clavier (Tab). En mode clavier, chaque élément focusable est annoncé à la voix avant interaction — l'utilisateur entend ce sur quoi il est positionné avant de valider avec Entrée. On a même poussé jusqu'à implémenter le drag & drop au clavier, avant de le désactiver en production pour ne pas surcharger l'expérience. C'est probablement la partie la plus longue et la plus fastidieuse du projet — chaque composant, chaque jeu, chaque transition devait être testé avec tabindex, attributs aria et annonces vocales.

Stack du projet05

Les outils qui font tourner le module.

01React + ViteSPA statique · build autonome compatible SCORM
02SCORM 1.2 (pipwerks)Communication LMS · score · progression · complétion
03PixiJSMini-jeux canvas WebGL haute performance
04react-beautiful-dndDrag & drop accessible · ARIA · navigation clavier
05GSAPTimelines orchestrées texte · image · son
06Framer MotionAnimations React des composants UI
07ZustandMachine à états du flow pédagogique (6 chapitres)
08StorybookValidation visuelle des composants en isolation
Équipe06

Avec qui j'ai travaillé.

Le projet a été mené chez Artefact 3000, en collaboration étroite avec une équipe design et un manager produit.

01Mathieu CrochetManager & architecture · Artefact 3000
02Vincent BlacherHead of Design · Artefact 3000
03Pauline RavelUX Designer · Artefact 3000

Un projet de cette envergure ?

Je conçois et développe des modules e-learning et applications interactives sur mesure.

Apps React, mini-jeux canvas, machines à états, accessibilité, SCORM : ce projet a posé toutes les briques que je peux remettre en œuvre ailleurs.

Voir mes formules

Projet suivant

TotalEnergies

Carte interactive des producteurs locaux