Créer et ajouter un outil de prise de note dans un module Storyline

🟧  À noter : Ceci est un prototype, et comme tout bon prototype, il peut comporter quelques imperfections et/ou des bugs involontaires (et offerts gratuitement). Merci pour votre compréhension 🍀

1) L’idée : Prendre des notes pendant un module e-learning

Je ne sais pas vous, mais pour ma part, j’ai toujours voulu que les outils auteurs aient une fonctionnalité de prise de note intégrée. Une fonctionnalité que l’on pourrait activer / désactiver au besoin, lorsque l’on produit un module.

J’ai donc essayé de créer mon propre outil de prise de note et c’est le sujet de ce prototype 😉

2) Choix de l’éditeur de texte

Il existe beaucoup d’éditeurs de texte disponibles, notamment TinyMCE, SimpleMDE, Quill, Trix, pour n’en citer que quelques-uns.

Dans mon cas, j’en voulais un simple léger, qui puisse fonctionner avec une bibliothèque JavaScript.

Mon premier choix s’est dirigé vers Quill pour son esthétisme, mais c’est Trix (développé par Basecamp), qui m’a convaincu avec sa robustesse et simplicité,

3) Création de l’outil de prise de note

Dans un 1er temps, j’ai téléchargé le *.JS et le *.CSS de Trix, afin de les intégrer dans une page *.HTML.

Je fais court et simple, mais ce trio (HTML, CSS et JavaScript), c’est un peu à la base de tout site web et c’était le minimum pour pouvoir rendre l’outil fonctionnel.

4) Stockage des notes

À la base, les éditeurs de texte comme Trix (ou Quill, TinyMCE, etc…) servent à éditer, mais pas à stocker.

Il me fallait donc une solution de stockage qui soit simple, fiable et surtout locale. Voici les options que j’ai envisagées :

• ❌ Variable Storyline : Une option intéressante et qui fonctionne (jai testé pour m’amuser), mais les données ne sont pas facilement « sauvegardables » d’une session à l’autre.
• ❌ sessionStorage : C’est une solution utilisée par de nombreuses applications web et qui utilise ma mémoire du navigateur internet, mais le stockage est temporaire et se limite à la session en cours.
• ✅ localStorage : Similaire au « sessionStorage », mais avec l’avantage que les données persistent d’une session à l’autre.
• ❌ IndexDB : Une solution qui permet plus de capacité, mais inutile pour mon cas et plus complexe.

Donc, comme vous le voyez, c’est « localStorage » qui était le adapté à mon besoin.

NB1 : Il existe encore d’autres options de stockage, plus ou moins complexes. Cependant, celles que je vous ai présentées et que j’ai considérées étaient les plus appropriées et les plus simples dans ce cas-ci.

NB2 : Comme mentionné, privilégier un stockage local était essentiel pour moi. Et même si ce n’était pas forcément nécessaire, j’ai ajouté une couche de sécurité supplémentaire en intégrant DOMPurify et CSP.

5) Ajustement des fonctionnalités de l’outil de prise de note

Pour que l’outil corresponde exactement à mes attentes, j’ai fait quelques ajustements dans les fonctionnalités :

• J’ai supprimé la fonction qui permet d’ajouter des images ou fichiers, que ce soit via le bouton « joindre » ou par copier/coller.
• J’ai ajouté un bouton permettant d’imprimer les notes (et de les sauvegarder au format PDF).
• J’ai ajouté un bouton pour effacer toutes ses notes en un clic.

6) L’intégration avec Storyline

L’outil aurait pu être intégré via un WebObject dans calque ou lightbox, mais le contenu de la formation aurait été « caché » par l’outil. C’est pour cela que j’ai ajouté pour un bouton personnalisé dans le player permettant d’ouvrir l’outil dans une nouvelle fenêtre.

Au début, j’avais paramétré un simple bouton pour qu’il ouvre un lien (celui de l’application) dans une nouvelle fenêtre, mais si l’utilisateur ouvrait plusieurs fois l’outil (plusieurs fenêtres), il pouvait y avoir des bugs de sauvegarde.

J’ai donc gardé le même bouton, mais avec un déclencheur JavaScript pour ouvrir l’application de prise de note en utilisant une fonction (toolWindow) afin d’empêcher l’outil de s’ouvrir plusieurs fois.

7) Résultats des tests

Cela fonctionne bien ! Je suis ravi d’avoir créé cet outil simple et fonctionnel pour prendre des notes.

Certes, c’est un prototype qui a ses limites et qui nécessiterait des ajustements pour un vrai déploiement !

Cependant, il pourrait peut-être être retravaillé par des développeurs ou par des éditeurs d’outils auteurs. Qui sait 😉

8) Pistes d’amélioration

Il pourrait y en avoir beaucoup, mais voici les principales auxquelles je songe :

• Export : Ajout d’un bouton pour exporter les notes en formats *.docx ou *.pdf (nécessite des bibliothèques JS supplémentaires).
• Intégration : Ce serait super que l’outil s’ouvre directement de module (et pas une nouvelle fenêtre) en gardant le design et les fonctionnalités de la fonctionnalité « transcription » (pour déplacer, redimensionner et fermer la fenêtre).
• Compatibilité : J’ai l’impression que la sauvegarde ne fonctionne pas bien sur smartphone.

9) En conclusion

Je suis très content de ce prototype, même s’il y a de la place à l’amélioration. Et puis, si cela peut inspirer des développeurs, des éditeurs d’outils auteurs ou tout simplement vous, alors mon objectif est atteint.

N’hésitez pas à partager vos retours dans la publication LinkedIn associée.

Pour aller plus loin :

▶️ Si cet article vous parle et que vous souhaitez collaborer sur un projet similaire (ou différent) : contactez-moi.

Autres articles :