diff --git a/docs/css/styles.css b/docs/css/styles.css
index aa3e22042691f21ac093a3dc402ea6409ea880d1..88c5cbce62afa921da02e7a549f143739e266ddf 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -1336,4 +1336,40 @@ a:hover.back-to-top {
.md-typeset ol{
font-size: 1rem;
list-style: decimal;
+}
+
+.md-typeset h1 {
+ font-size: 2.075rem;
+ font-weight: 400;
+ text-transform: none;
+}
+
+.md-typeset h2 {
+ font-size: 1.9rem;
+ font-weight: 400;
+ text-transform: none;
+}
+
+.md-typeset h3 {
+ font-size: 1.725rem;
+ font-weight: 400;
+ text-transform: none;
+}
+
+.md-typeset h4 {
+ font-size: 1.55rem;
+ font-weight: 400;
+ text-transform: none;
+}
+
+.md-typeset h5 {
+ font-size: 1.375rem;
+ font-weight: 400;
+ text-transform: none;
+}
+
+.md-typeset h6 {
+ font-size: 1.2rem;
+ font-weight: 400;
+ text-transform: none;
}
\ No newline at end of file
diff --git a/docs/guide/developer/.pages b/docs/guide/developer/.pages
index d174f9fcf76e598413b462715009bab27db45e24..ab03d1c3730bc8f0b7a6a7cd15cf5442a2582052 100644
--- a/docs/guide/developer/.pages
+++ b/docs/guide/developer/.pages
@@ -2,5 +2,5 @@ nav:
- contributing.md
- file-format.md
- data-types.md
- - plugins.md
+ - plugins
- ...
\ No newline at end of file
diff --git a/docs/guide/developer/data-types.md b/docs/guide/developer/data-types.md
index 97d1942e74d90b9438c00aefe9fdc0e8d4df7907..f51b0be8b412e92d9396cfbafa4ca06ce74fc7af 100644
--- a/docs/guide/developer/data-types.md
+++ b/docs/guide/developer/data-types.md
@@ -1 +1,17 @@
-# Format de données
\ No newline at end of file
+# Format de données
+
+Le format des données du fichier `content.json` est un schéma JSON définit à l'aide de classes, types et interfaces
+TypeScript.
+
+Pour en apprendre plus sur le format de données, nous vous invitons à utiliser les classes ePocs (v1) téléchargeble
+depuis [npm](https://www.npmjs.com/package/@epoc/epoc-types).
+
+```bash
+npm i @epoc/epoc-types
+```
+
+## Liens utiles
+
+- [Types](https://gitlab.inria.fr/learninglab/epoc/epoc-types/-/tree/master/src/v1)
+- [Package](https://www.npmjs.com/package/@epoc/epoc-types)
+
diff --git a/docs/guide/developer/file-format.md b/docs/guide/developer/file-format.md
index cf5432a56788048e736c656275078c45e1aff9b0..fbcaf5d2a0e916862c2eeb3dde61686e807c4bda 100644
--- a/docs/guide/developer/file-format.md
+++ b/docs/guide/developer/file-format.md
@@ -1,50 +1,50 @@
# Format de fichier
-## Fichier `.epoc`
+## Fichier `.epocproject`
Le format de fichier ePoc est une archive ZIP contenenant les assets, les données et
metadonnées mais aussi les données de conception de l'ePoc au format JSON.
Ce format de fichier a été introduit par l'éditeur.
-Pour extraire le contenu d'un fichier `.epoc`, il suffit d'utiliser la commande `unzip`.
+Pour extraire le contenu d'un fichier `.epocproject`, il suffit d'utiliser la commande `unzip`.
```bash
-unzip mon_ePoc.epoc
+unzip mon_ePoc.epocproject
```
-Pour archiver le contenu dans un `.epoc`, il suffit de se placer dans le dossier contenant
+Pour archiver le contenu dans un `.epocproject`, il suffit de se placer dans le dossier contenant
`content.json` et `project.json` puis d'utiliser la commande `zip`
```bash
-zip -r -X mon_ePoc.epoc *
+zip -r -X mon_ePoc.epocproject *
```
## Contenus de l'archive
-### `content.json` (`.epoc`, `.epocx`et `.zip`)
+### `content.json` (`.epoc`, `.epocproject` et `.zip`)
Contient les données (chapitres, pages, contenus, quizz) et métadonnées (titre, auteurs, etc)
de l'ePoc au format JSON dans un schéma respectant les [specifications du format ePoc](data-types.md) définis
en TypeScript.
-### `project.json` (`.epoc` seulement)
+### `project.json` (`.epocproject` seulement)
Ce fichier contient les données de scénarisation, des contenus (cahpitres, pages, contenus, quizz) et
métadonnées (titre, auteurs, etc) de l'ePoc au format JSON. Il s'agit d'une serialization des données
du diagramme (voir [`vue-flow`](https://vueflow.dev/)).
-### `assets` *folder*
+### `assets` *(folder)*
Contient tous les assets (images, viéos, etc) de l'ePoc.
-### `plugins` *folder*
+### `plugins` *(folder)*
### Autres
-D'autres fichiers ou dossiers présents dans l'archive peuvent être utilisé mais ne sont pas
-les utilisés ou lus par défaut.
+D'autres fichiers ou dossiers présents dans l'archive peuvent être utilisés mais ne sont pas
+supportés par défaut par l'éditeur.
-## Fichier de publication (export) `.epocx` ou `.zip`
+## Fichier de publication (export) `.epoc` ou `.zip`
Le format de fichier d'export pour publication sur l'application mobile est aussi une
archive ZIP contenant les assets, les données et metadonnées de l'ePoc au format JSON.
@@ -52,16 +52,16 @@ archive ZIP contenant les assets, les données et metadonnées de l'ePoc au form
Il s'agit d'un sous-ensemble du fichier `.epoc`optimisé pour sa diffusion. Tous els assets
et pages non reliés à un chapitre sont retirés de l'archive.
-Pour extraire le contenu d'un fichier `.epocx` ou `.zip`, il suffit d'utiliser la commande `unzip`.
+Pour extraire le contenu d'un fichier `.epoc` ou `.zip`, il suffit d'utiliser la commande `unzip`.
```bash
-unzip mon_ePoc.epocx # ou unzip mon_ePoc.zip
+unzip mon_ePoc.epoc # ou unzip mon_ePoc.zip
```
-Pour archiver le contenu dans un `.epocx`, il suffit de se placer dans le dossier contenant
+Pour archiver le contenu dans un `.epoc`, il suffit de se placer dans le dossier contenant
`content.json` puis d'utiliser la commande `zip`
```bash
-zip -r -X mon_ePoc.epocx *
+zip -r -X mon_ePoc.epoc *
```
diff --git a/docs/guide/developer/plugins.md b/docs/guide/developer/plugins.md
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/docs/guide/developer/plugins/add-plugin.png b/docs/guide/developer/plugins/add-plugin.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5ed5caadef16e4a2a368323707edcd233d302e9
Binary files /dev/null and b/docs/guide/developer/plugins/add-plugin.png differ
diff --git a/docs/guide/developer/plugins/create.md b/docs/guide/developer/plugins/create.md
new file mode 100644
index 0000000000000000000000000000000000000000..9f429977810bc59e860ec02dad366fb78c1e865b
--- /dev/null
+++ b/docs/guide/developer/plugins/create.md
@@ -0,0 +1,182 @@
+# Créer un plugin
+
+## Introduction
+
+Notre application mobile utilise un système de plugin qui permet d'étendre ses fonctionnalités de manière
+sécurisée et contrôlée. Ce système repose sur l'utilisation d'une iframe en mode sandbox au sein de la webview du
+téléphone. Cette approche garantit un environnement d'exécution isolé pour chaque plugin, préservant ainsi la sécurité
+et la stabilité de l'application principale.
+
+## Fonctionnement du système de plugin
+
+Chaque plugin est essentiellement un script JavaScript (lancé à l'ouverture de l'ePoc) accompagné de template html
+(à insérer dans les pages de texte ou les exercies). Le plugin et ses templates sont éxécutés dans des iframes distinctes.
+L'attribut "sandbox" de l'iframe est utilisé pour créer un environnement d'exécution isolé, empêchant ainsi le plugin d'accéder
+aux ressources de l'application principale sans autorisation explicite.
+
+Le système de plugin fournit une API JavaScript qui permet aux plugins d'interagir avec l'application principale de
+manière contrôlée mais aussi aux templates d'échanger des données avec le plugin. Cette API comprend des méthodes pour
+envoyer et recevoir des données, ainsi que pour déclencher des actions dans l'application principale.
+
+## Plugin core
+### Premier pas
+
+Pour développer un plugin, vous devez tout d'abord créer un script JavaScript. Ce script est ensuite intégré dans une
+iframe non visible en mode sandbox avec les fonctions de l'API. Les fonctions d'API sont le seul moyen d'intéragir avec
+l'application et les templates.
+
+Voici un exemple de code pour créer un plugin qui affiche 'Hello World' au chargement de l'ePoc :
+
+```js
+// plugin.js
+
+ePoc.onLoad = () => {
+ // Executé lorsque le plugin est chargé à l'ouverture de l'ePoc
+ console.log('Hello World')
+}
+```
+
+
+### API plugin core
+
+#### Fonctions
+
+##### `ePoc.onLoad(context)`
+
+Fonction appelée au chargement du plugin permet de retourner sa configuration
+
+##### `ePoc.onEmbed`
+
+Fonction appelée lors du chargement d'un template intégré dans une page de texte ou une question
+
+##### `ePoc.emit(event, value)`
+
+Envoie un message vers l'application mobile
+
+##### `ePoc.emitToEmbeds(value)`
+
+Envoie un message vers les templates du plugin
+
+
+##### `ePoc.receive(data)`
+
+Reçoit un message de l'application mobile
+
+#### Événements reçu speciaux
+##### `'statement'`
+Reçu lorsque l'utilisateur déclenche un évenement xAPI
+
+- `epocId` : ID de l'ePoc où l'évennement a eu lieu
+- `entityType` : Type du contenu qui a déclenché l'évenement (page, video, texte, question, etc)
+- `entityId` : ID du contenu qui a déclenché l'évenement
+- `verb` : Verbe de l'action qui a été effectuée (vu, lu, répondu, etc)
+- `value` : Valeur de l'action qui a été effectuée
+
+###### Exemple
+
+```js
+// plugin.js
+ePoc.receive = async (data) => {
+ if (data.event === 'statement') {
+ console.log(data.statement)
+ // {
+ // epocId,
+ // entityType,
+ // entityId,
+ // verb,
+ // value
+ // }
+ }
+}
+```
+
+## Template
+
+Les plugins peuvent déclarer un template html qui est aussi éxécuté dans une iframe distinct. La
+différence est que l'iframe du template est intégré dans des pages de texte ou des exercices et est visible par
+l'apprenant.
+
+### Exemple "Hello World"
+Voici comment déclarer un template de plugin en reprenant l'exemple précédent :
+
+```js
+// plugin.js
+
+ePoc.onLoad = () => {
+ // Executé lorsque le plugin est chargé à l'ouverture de l'ePoc
+ console.log('Hello World')
+
+ // Le plugin retourne le nom du template et le shortcode pour l'intégrer dans les pages de texte
+ return {
+ template: 'plugin_template.html',
+ shortcode: '[#hello_world]'
+ };
+}
+```
+
+Et le template en question (affiche simplement un titre H1) :
+
+```html
+<!-- plugin_template.html -->
+
+<html lang="en">
+<head>
+ <!-- Feuille de style pour avoir un affichage identique à l'app mobile -->
+ <link rel="stylesheet" href="/assets/css/plugin-embed.css">
+</head>
+<body>
+<h1>Hello World</h1>
+<!-- Script pour avoir accès à l'API -->
+<script src="/assets/js/plugin-api-embed.js"></script>
+<script>
+ // Votre logique métier ici
+</script>
+</body>
+</html>
+```
+
+
+### API plugin template
+
+#### Fonctions
+##### `plugin.emit(event, value)`
+
+Envoie un message depuis le template vers le plugin
+
+
+##### `plugin.receive(data)`
+
+Reçoit un message du plugin ou de l'application mobile
+
+#### Événements émis speciaux
+
+##### `plugin.emit('user-responded', payload)`
+
+Envoie la réponse de l'utilisateur quand le template du plugin est utilisé dans une question personnalisée
+
+###### Exemple de question personnalisée
+
+```html
+<!-- plugin_template.html -->
+<!-- Question personnalisée champ texte libre -->
+<html lang="en">
+<head>
+ <link rel="stylesheet" href="/assets/css/plugin-embed.css">
+</head>
+<body>
+ <form>
+ <!-- Champ texte -->
+ <input type="text"/>
+ </form>
+ <script src="/assets/js/plugin-api-embed.js"></script>
+ <script>
+ const userInput = document.querySelector('input');
+ // Quand l'utilisateur tape du texte
+ userInput.addEventListener('keyup', (event) => {
+ // On envoie la réponse à l'app
+ plugin.emit('user-responded', userInput.value)
+ });
+ </script>
+</body>
+</html>
+```
\ No newline at end of file
diff --git a/docs/guide/developer/plugins/plugin-embed-question.png b/docs/guide/developer/plugins/plugin-embed-question.png
new file mode 100644
index 0000000000000000000000000000000000000000..939b7de025b1861b94bc61a63d5f8696ec09bd16
Binary files /dev/null and b/docs/guide/developer/plugins/plugin-embed-question.png differ
diff --git a/docs/guide/developer/plugins/plugin-embed-shortcode.jpg b/docs/guide/developer/plugins/plugin-embed-shortcode.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..27d9f5ec994db8eaf98f80ee773791e8ee80681c
Binary files /dev/null and b/docs/guide/developer/plugins/plugin-embed-shortcode.jpg differ
diff --git a/docs/guide/developer/plugins/plugin-hello.png b/docs/guide/developer/plugins/plugin-hello.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea0c261c884c46cfcd52717c9c85d3831af708ce
Binary files /dev/null and b/docs/guide/developer/plugins/plugin-hello.png differ
diff --git a/docs/guide/developer/plugins/plugin-question.gif b/docs/guide/developer/plugins/plugin-question.gif
new file mode 100644
index 0000000000000000000000000000000000000000..61c274c06e86dc14f90836df800b90eb767af075
Binary files /dev/null and b/docs/guide/developer/plugins/plugin-question.gif differ
diff --git a/docs/guide/developer/plugins/use.md b/docs/guide/developer/plugins/use.md
new file mode 100644
index 0000000000000000000000000000000000000000..d70c80627c8854c97216fae961ef5359d8f07e5c
--- /dev/null
+++ b/docs/guide/developer/plugins/use.md
@@ -0,0 +1,110 @@
+# Utiliser un plugin
+
+Ce guide vous montrera comment utiliser un plugin JavaScript dans un ePoc.
+
+## Installer un plugin
+
+1. [Créer](create.md) ou télécharger les fichiers d'un plugin
+2. Ajouter un plugin dans les paramètres de l'ePoc
+3. Ajouter le fichier javascript du plugin (obligatoire)
+4. Ajouter le fichier template du plugin (optionnel)
+
+
+
+## Intégrer un template
+
+### Intégrer dans une page de texte
+
+Si votre plugin déclare un template vous pouvez ensuite l'intégrer à l'aide du shortcode prédéterminé.
+
+**Exemple :** En repartant de l'[exemple "Hello World"](create.md#exemple-hello-world) du guide de création d'un plugin
+
+```js
+// plugin.js
+
+ePoc.onLoad = () => {
+ // Executé lorsque le plugin est chargé à l'ouverture de l'ePoc
+ console.log('Hello World')
+
+ // Le plugin retourne le nom du template et le shortcode pour l'intégrer dans les pages de texte
+ return {
+ template: 'plugin_template.html',
+ shortcode: '[#hello_world]' // Shortcode à définir ici
+ };
+}
+```
+
+```html
+<!-- plugin_template.html -->
+
+<html lang="en">
+<head>
+ <!-- Feuille de style pour avoir un affichage identique à l'app mobile -->
+ <link rel="stylesheet" href="/assets/css/plugin-embed.css">
+</head>
+<body>
+<h1>Hello World</h1>
+<!-- Script pour avoir accès à l'API -->
+<script src="/assets/js/plugin-api-embed.js"></script>
+<script>
+ // Votre logique métier ici
+</script>
+</body>
+</html>
+```
+
+
+
+
+
+### Intégrer dans un quiz
+
+Si votre plugin déclare un template vous pouvez aussi l'intégrer dans une question personnalisée.
+
+**Exemple :** En repartant de l'[exemple "Question personnalisée"](create.md#exemple-de-question-personnalisée) du guide de création d'un plugin
+
+```js
+// plugin.js
+
+ePoc.onLoad = () => {
+ // Executé lorsque le plugin est chargé à l'ouverture de l'ePoc
+ console.log('Hello World')
+
+ // Le plugin retourne le nom du template et le shortcode pour l'intégrer dans les pages de texte
+ return {
+ template: 'plugin_template.html',
+ shortcode: '[#hello_world]' // Shortcode à définir ici
+ };
+}
+```
+
+```html
+<!-- plugin_template.html -->
+<!-- Question personnalisée champ texte libre -->
+<html lang="en">
+<head>
+ <link rel="stylesheet" href="/assets/css/plugin-embed.css">
+</head>
+<body>
+<form>
+ <!-- Champ texte -->
+ <input type="text"/>
+</form>
+<script src="/assets/js/plugin-api-embed.js"></script>
+<script>
+ const userInput = document.querySelector('input');
+ // Quand l'utilisateur tape du texte
+ userInput.addEventListener('keyup', (event) => {
+ // On envoie la réponse à l'app
+ plugin.emit('user-responded', userInput.value)
+ });
+</script>
+</body>
+```
+
+
+
+Ce qui donne comme résultat :
+
+
+
diff --git a/docs/guide/user/content/wysiwyg/mermaid.md b/docs/guide/user/content/wysiwyg/mermaid.md
index 3fbb1f1837da2d86cbff688f5c80cf8f8e424454..7319f9c11070996d3d754c1b0492e10ded521cea 100644
--- a/docs/guide/user/content/wysiwyg/mermaid.md
+++ b/docs/guide/user/content/wysiwyg/mermaid.md
@@ -1,4 +1,6 @@
# Intégration Mermaid
Dans l'éditeur WYSIWYG, vous pouvez rédiger du code mermaid.
-[...]
\ No newline at end of file
+[...]
+
+En construction
\ No newline at end of file
diff --git a/docs/mermaid-editor/app/index.html b/docs/mermaid-editor/app/index.html
index 92b7fbb72a7cc96363eefc2ed616224febbb7c45..187f1f5066466f6ed0defaf7c031244da2576745 100644
--- a/docs/mermaid-editor/app/index.html
+++ b/docs/mermaid-editor/app/index.html
@@ -4,8 +4,9 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mermaid Editor</title>
+ <style>h2{text-align: center;}</style>
</head>
<body>
- <h2>Coming soon</h2>
+ <h2>En construction</h2>
</body>
</html>