fcad-core-dragon 2.0.0-beta.0 → 2.0.0-beta.10

package/documentation/composants/app-base-popover.md

@@ -0,0 +1,68 @@
+# Popover
+
+Une infobulle pouvant être générée automatiquement.
+
+## Aperçu
+
+
+
+## Comportement
+
+Le target doit être reçu et appliqué avant l'ouverture/création du popover. 
+
+## Paramètre 
+
+### Target
+
+**Type:** `String`
+
+**Usage:** Obligatoire.
+
+Définit l'emplacement où pointe la flèche du popover. Doit être initaliser avant le "mounted" du popover.
+
+### Option
+
+**Type:** `Object`
+
+**Usage:** Obligatoire.
+
+Définit le contenu du popover. Il y a plusieurs paramettres de disponible:
+- title
+- content
+- cb_$cancel 
+- cb_$confirm
+
+#### Title
+
+**Type:** `String`
+
+**Usage:** Optionel.
+Le titre du popover.
+
+#### Content
+
+**Type:** `String`
+
+**Usage:** Optionel.
+
+Le contenu du popover en HTML.
+
+#### Cb_$cancel
+
+**Type:** `Function`
+
+**Usage:** Optionel.
+
+La function quand on clique sur le bouton "cancel". N'est pas utilisé par le OnBoarding.
+
+#### Cb_$confirm
+
+**Type:** `Function`
+
+**Usage:** Optionel.
+
+La function quand on clique sur le bouton "confim" qui est mis sur un délai pour le faire sur le "onHidden".
+
+## Style
+
+## Accessibilité

package/documentation/composants/app-comp-audio.md

@@ -0,0 +1,75 @@
+# Lecteur Audio 
+
+Composant pour afficher un audio et sont lecteur.
+
+## Aperçu
+
+Le composant permet d'afficher un lecteur audio et tout ses fonctionalités.
+
+## Comportement
+
+S'affiche dans un  en cadré avec un titre (obligatoire), une image (pas obligatoire), lecteur de média et un tirroire d'accordéon qui contient les sous-titre. 
+
+## Référence du composant
+
+`<app-comp-audio-player :aud-data="audioData2"/>` 
+
+
+## Structure de données
+Voici la structure à utiliser pour les données d'un contenu audio
+> [!IMPORTANT]
+> audiosData doit être un tableau (array)
+```js
+import aud1 from '@/assets/medias/exemple_audio.mp3'
+import posterAud1 from '@/assets/img/audio_poster.png'
+
+export default {
+  data() {
+    return {
+      id: 'P01',
+      activityRef: 'A03',
+      title: 'Lecteurs médias',
+      type: 'pg_normal',
+      audiosData: [
+        {
+          id: 'aud1',
+          mTitle: 'Et si... Annie Ernaux nous parlait',
+          mSources: [
+            {
+              type: 'mp3',
+              src: aud1
+            }
+          ],
+          mPoster: posterAud1,
+          mAlt: "Portrait de l'autrice Annie Ernaux",
+          mTranscript:
+            '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>'
+        }
+      ]
+    }
+  }
+}
+```
+
+### Props
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| id | string | identification unique | N/A |
+| mTitle | string | Titre afficher dans le composant (obligatoire) | N/A |
+| mSources | Objet | deux valeur `type` qui doit être déplacé comme `mp3` et `src` doit être la source du mp3 | N/A |
+| mPoster | n/a | Doit être le lien vers l'affiche de la vidéo (image qui seras visible si le vidéo ne load pas) | N/A |
+| mAlt | string | texte alternatif de l'image (si image il y a ) | N/A |
+| mTranscript | string | Structure html de la transcription afficher dans le composant | N/A |
+
+## Style
+
+`nomde class`[class]
+
+Aucune manipulation requise.
+
+
+## Accessibilité
+
+Aucune manipulation requise.
+

package/documentation/composants/app-comp-branch-buttons.md

@@ -0,0 +1,111 @@
+# Branch Buttons
+
+
+Composant qui génère des boutons d'embranchment dans une page.
+
+## Aperçu
+
+Le composant affiche des boutons ou cartes clicables dans la page. Chaque element est accompagné d'un affichage de l'état de progression dans la branche. 
+
+## Référence du composant
+
+**AppCompBranchButtons**
+`<app-comp-branch-buttons/>` 
+
+## Comportement
+
+Le composant génère des boutons pour chaque branch disponible dans l'activité. Il crée un lien qui ouvre une fenêtre latérale. Son état change de normal à complet, si le bas de la fenêtre latérale est visité. 
+
+Le composant affiche un message d'erreur, lorsque les données passées en reférence, durant la phase de production, ne sont pas valides.
+
+::: tip 💡 Note
+En cas d'erreur, pretez attention au message(s) affiché(s) par le composant dans la console du navigateur et dans la page. Cela vous permettra de savoir ce qui doit être corrigé.
+:::
+
+## Paramètre 
+
+### Props
+
+<table>
+  <thead>
+    <tr>
+      <th>Propriété</th>
+      <th>Type</th>
+      <th>Description</th>
+      <th>valeur par défaut</th>
+      <th>valeur accepté</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>customButtons (optionnelle) </td>
+      <td>Array</td>
+      <td>Tableau d'objets contenant les informations pour chaque bouton d'embranchement.
+      </td>
+      <td>null</td>
+      <td> Un Array d'Object (name, brchName)
+        <br><br>Exemple pour une page avec 2 embranchments chaque objet bouton sera defini comme suit:<br><br>
+        <pre class="code-in-table">
+          <code>
+            [
+              { name: 'bouton_A02_P01_E01', brchName: 'P02_E01' },
+              { name: 'bouton_A02_P01_E02',brchName: 'P02_E02' }
+            ]
+          </code>
+        </pre>
+      </td>
+    </tr>
+    <tr>
+      <td>cards (optionnelle) </td>
+      <td>Array</td>
+      <td>Tableau d'objets contenant les informations pour chaque bouton d'embranchement. Chaque bouton est presenté sous forme d'une carte
+      </td>
+      <td>null</td>
+      <td> Un Array d'Object (imgFile, title, text, brchName, btnTitle)
+        <br><br>Exemple chaque carte d'embranchments sera un objet défini de la forme ci-dessous:<br><br>
+        <pre class="code-in-table">
+          <code>
+            [
+              {
+                imgFile: 'imgCarte.jpg', (l'image doit se trouver dans le dossier src/assets/img du projet)
+                imgAlt: 'Test img 1',
+                title: 'Titre embranchment',
+                text: 'Ceci est un embranchment factice, affiché sous la forme de carte.'
+                brchName: 'P02_E01'
+                btnTitle: ''
+              }
+            ]
+          </code>
+        </pre>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+
+### Slots
+
+Un template custom est disponible pour habiller chaque bouton en faisant reférence au nom de la branch qui le lie. Ceci n'est applicable qu'avec l'utilisation de la propriété `customButtons`
+
+
+
+Exemple:
+
+```vue
+<app-comp-branch-buttons :custom-buttons="buttonData">
+  <template #bouton_A02_P01_E01>
+      <h1>Peu</h1>
+    </template>
+    <template #bouton_A02_P01_E02>
+      <h1>Peut être ici le titre d'une page</h1>
+    </template>
+</app-comp-branch-buttons>
+```
+
+Si le composant est appelée sans prop, les boutons par défaut seront générés.
+
+## Style
+
+
+## Accessibilité
+une variable `imgAlt` est disponible sur chaque objet, pour définir la valeur de l'attribut  `alt` de l'image de la carte.

package/documentation/composants/app-comp-button-progress.md

@@ -0,0 +1,53 @@
+---
+title: Model de page
+
+---
+::: warning  🚩 Important
+  Utilisez ce model comme depart pour écrire la page de votre composant:
+
+  1) Copiez /dubliquez cette page
+  2) Renommez votre copie avec le nom de votre composant
+  3) Édtitez la page en rempliçant les sections qui conserne votre composant.  
+:::
+
+
+Composant pour ....  
+
+## Aperçu
+
+Le composant permet de...
+Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
+
+## Comportement
+
+Lorem ipsum dolor sit amet. At quas quis qui velit tenetur aut suscipit error id iure doloremque ad velit explicabo. Sit repellat praesentium aut perferendis illum qui omnis recusandae est explicabo dolores in quia tempore qui totam velit.
+
+## Référence du composant
+
+**ModelComposantPage** `<model-composant/>` 
+
+
+## Paramètre 
+
+Aucun paramètre n'est nécessaire pour ce composant.
+
+### Props
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| page | Object | données brutes de la page à créer | Doit contenir au minimum les valeurs suivantes: `{id, type, activityRef }`. Référez-vous à la section sur la [création de page](/guide/pageType.html#qu-est-ce-qu-une-page) pour une liste exhaustive des valeurs de la propriété. |
+
+### Slots
+`content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
+
+
+## Style
+
+`nomde class`[class]
+
+Aucune manipulation requise.
+
+
+## Accessibilité
+Aucune manipulation requise.
+

package/documentation/composants/app-comp-carousel.md

@@ -0,0 +1,53 @@
+---
+title: Model de page
+
+---
+::: warning  🚩 Important
+  Utilisez ce model comme depart pour écrire la page de votre composant:
+
+  1) Copiez /dubliquez cette page
+  2) Renommez votre copie avec le nom de votre composant
+  3) Édtitez la page en rempliçant les sections qui conserne votre composant.  
+:::
+
+
+Composant pour ....  
+
+## Aperçu
+
+Le composant permet de...
+Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
+
+## Comportement
+
+Lorem ipsum dolor sit amet. At quas quis qui velit tenetur aut suscipit error id iure doloremque ad velit explicabo. Sit repellat praesentium aut perferendis illum qui omnis recusandae est explicabo dolores in quia tempore qui totam velit.
+
+## Référence du composant
+
+**ModelComposantPage** `<model-composant/>` 
+
+
+## Paramètre 
+
+Aucun paramètre n'est nécessaire pour ce composant.
+
+### Props
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| page | Object | données brutes de la page à créer | Doit contenir au minimum les valeurs suivantes: `{id, type, activityRef }`. Référez-vous à la section sur la [création de page](/guide/pageType.html#qu-est-ce-qu-une-page) pour une liste exhaustive des valeurs de la propriété. |
+
+### Slots
+`content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
+
+
+## Style
+
+`nomde class`[class]
+
+Aucune manipulation requise.
+
+
+## Accessibilité
+Aucune manipulation requise.
+

package/documentation/composants/app-comp-container.md

@@ -0,0 +1,53 @@
+---
+title: Model de page
+
+---
+::: warning  🚩 Important
+  Utilisez ce model comme depart pour écrire la page de votre composant:
+
+  1) Copiez /dubliquez cette page
+  2) Renommez votre copie avec le nom de votre composant
+  3) Édtitez la page en rempliçant les sections qui conserne votre composant.  
+:::
+
+
+Composant pour ....  
+
+## Aperçu
+
+Le composant permet de...
+Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
+
+## Comportement
+
+Lorem ipsum dolor sit amet. At quas quis qui velit tenetur aut suscipit error id iure doloremque ad velit explicabo. Sit repellat praesentium aut perferendis illum qui omnis recusandae est explicabo dolores in quia tempore qui totam velit.
+
+## Référence du composant
+
+**ModelComposantPage** `<model-composant/>` 
+
+
+## Paramètre 
+
+Aucun paramètre n'est nécessaire pour ce composant.
+
+### Props
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| page | Object | données brutes de la page à créer | Doit contenir au minimum les valeurs suivantes: `{id, type, activityRef }`. Référez-vous à la section sur la [création de page](/guide/pageType.html#qu-est-ce-qu-une-page) pour une liste exhaustive des valeurs de la propriété. |
+
+### Slots
+`content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
+
+
+## Style
+
+`nomde class`[class]
+
+Aucune manipulation requise.
+
+
+## Accessibilité
+Aucune manipulation requise.
+

package/documentation/composants/app-comp-input-checkbox-next.md

@@ -0,0 +1,42 @@
+# Input checkBox
+
+Composant d'input checkbox.
+
+## Aperçu
+
+Présente des éléments interactifs sous forme de checkbox. Ce composant est un **élément de base du [composant Quiz](../guide_api/CompQuiz.html)**  et est directement utilisé pour la création de quiz de type checkbox. 
+
+## Référence du composant
+
+**AppCompInputCheckBox** 
+
+## Comportement
+
+Le composant reçoit les informations passés en paramètre par le [composant Quiz](../guide_api/CompQuiz.html) et affiche des elements d`input checkbox. 
+
+## Paramètre 
+
+Voici les éléments par défaut du checkbox.
+
+### Props
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| :class | Object | Ajoute et retire les classes pour les rétroactions et autres | reponseSelectionner, wrong_answer, correct_answer |
+| role | String | Pour l'acessibilité, afin que les gens puissent atteindre l'élément | button | 
+| aria-pressed | Boolean | Pour l'acessibilité, afin que les gens puissent déclencher l'action avec le clavier | false | 
+| @click | function | Déclanche le fonction pour émettre le clique retourner l'élément cliquer et fait réagir la classe | fnClick | 
+
+## Style
+
+Toutes les classes présentes sont importantes pour la structure et le comportement des quiz. Vous ne pouvez pas ajouter n'y modifier les classes.  
+
+## Accessibilité
+
+Le Checkbox vient avec un niveau d'accessibilité de base. Pour l'instant aucune action de votre part n'est requise. 
+
+| Propriété | Type  | Description et utilisation    | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| aria-labelledby | String | Doit être en association avec le label |  N/A | 
+| name | String | Doit être en association avec le label | N/A | 
+

package/documentation/composants/app-comp-input-dropdown-next.md

@@ -0,0 +1,34 @@
+# Input liste déroulante
+
+Composant de liste déroulante.
+
+## Aperçu
+
+Présente des éléments interactifs sous forme d'une liste déroulante. Ce composant est un **élément de base du [composant Quiz](../guide_api/CompQuiz.html)**  et est directement utilisé pour la création de quiz de type liste déroulante.  
+
+## Référence du composant
+
+**AppCompInputDropDown** 
+
+## Comportement
+
+Le composant reçoit les informations passées en paramètre par le [composant Quiz](../guide_api/CompQuiz.html) et affiche des éléments sous forme de liste déroulante. 
+
+## Paramètre 
+
+Voici les éléments par défaut de la liste déroulante.
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| :class | string | reçoit l'*id* défini dans le JSON et les classes pour les rétroactions | reponseSelectionner, wrong_answer, correct_answer |
+| options | String | crée les choix de la liste déroulante déclarée dans le JSON | choix | 
+
+## Style
+
+Toutes les classes présentes sont importantes pour la structure et le comportement des quiz. Vous ne pouvez pas ajouter n'y modifier les classes. 
+
+## Accessibilité
+
+La liste déroulante vient avec un niveau d'accessibilité de base. Pour l'instant aucune action de votre part n'est requise. 
+
+

package/documentation/composants/app-comp-input-radio-next.md

@@ -0,0 +1,39 @@
+# Input bouton radio
+
+Composant d'input radio.
+
+## Aperçu
+
+Présente des éléments interactifs sous forme d'input radio.  Ce composant est un **élément de base du [composant Quiz](../guide_api/CompQuiz.html)**  et est directement utilisé pour la création de quiz de type bouton radio.  
+
+## Référence du composant
+
+**AppCompInputRadio** 
+
+## Comportement
+
+Le composant reçoit les informations passés en paramètre par le [composant Quiz](../guide_api/CompQuiz.html) et affiche des éléments d`input radio.  
+
+## Paramètre 
+
+Voici les éléments par défaut du bouton radio.
+
+### Props
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| :class | Object | Ajoute et retire la classe au click / classe de rétroaction lorsque le quiz est valider | reponseSelectionner, wrong_answer, correct_answer |
+| role | String | Pour l'accessibilité, afin que les gens puissent atteindre l'élément | button | 
+ 
+
+
+
+## Style
+
+Toutes les classes présentes sont importantes pour la structure, à moins de les modifier dans le fichier Sass. 
+
+## Accessibilité
+
+Le bouton vient avec un niveau d'accessibilité de base. Pour l'instant aucune action de votre part n'est requise.  
+
+

package/documentation/composants/app-comp-input-text-next.md

@@ -0,0 +1,35 @@
+# Input textbox
+
+Composant d'input de texte.
+
+## Aperçu
+
+Présente des éléments interactifs sous forme de zone de texte. Ce composant est un **élément de base du [composant Quiz](../guide_api/CompQuiz.html)** et est directement utilisé pour la création de quiz de type zone de texte (text box). 
+
+## Référence du composant
+
+**AppCompInputTextBox** 
+
+## Comportement
+
+Le composant reçoit les informations passés en paramètre par le [composant Quiz](../guide_api/CompQuiz.html) et affiche un element d'input de texte. 
+
+## Paramètre 
+
+Voici les éléments par défaut du text box.
+
+### Props
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| :class | Object | Ajoute et retire la classe au click / classe de rétroaction lorsque le quiz est valider | reponseSelectionner, wrong_answer, correct_answer |
+ 
+
+## Style
+
+Toutes les classes présentes sont importantes pour la structure, à moins de les modifier dans le fichier Sass. 
+
+## Accessibilité
+
+Le bouton vient avec un niveau d'accessibilité de base. Pour l'instant aucune action de votre part n'est requise.  
+

package/documentation/composants/app-comp-input-text-table-next.md

@@ -0,0 +1,34 @@
+# Input Text table 
+
+Composant de groupe de listes déroulantes.
+
+## Aperçu
+
+Présente des éléments interactifs sous forme d'un groupe de listes déroulantes. Ce composant est un **élément de base du [composant Quiz](../guide_api/CompQuiz.html)**  et est directement utilisé pour la création de quiz de type textes sélectionnables groupées. 
+
+## Référence du composant
+
+**AppCompInputTextTable** 
+
+## Comportement
+
+Le composant reçoit les informations passés en paramètre par le [composant Quiz](../guide_api/CompQuiz.html) et affiche des éléments de type liste déroulante. 
+
+## Paramètre 
+
+Voici les éléments par défaut du text box.
+
+### Props
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| :class | Object | Ajoute et retire la classe au click / classe de rétroaction lorsque le quiz est valider | reponseSelectionner, wrong_answer, correct_answer | 
+ 
+
+## Style
+
+## Accessibilité
+
+  Le bouton vient avec un niveau d'accessibilité de base. Pour l'instant aucune action de votre part n'est requise.  
+
+

package/documentation/composants/app-comp-input-text-to-fill-dropdown-next.md

@@ -0,0 +1,53 @@
+---
+title: Model de page
+
+---
+::: warning  🚩 Important
+  Utilisez ce model comme depart pour écrire la page de votre composant:
+
+  1) Copiez /dubliquez cette page
+  2) Renommez votre copie avec le nom de votre composant
+  3) Édtitez la page en rempliçant les sections qui conserne votre composant.  
+:::
+
+
+Composant pour ....  
+
+## Aperçu
+
+Le composant permet de...
+Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
+
+## Comportement
+
+Lorem ipsum dolor sit amet. At quas quis qui velit tenetur aut suscipit error id iure doloremque ad velit explicabo. Sit repellat praesentium aut perferendis illum qui omnis recusandae est explicabo dolores in quia tempore qui totam velit.
+
+## Référence du composant
+
+**ModelComposantPage** `<model-composant/>` 
+
+
+## Paramètre 
+
+Aucun paramètre n'est nécessaire pour ce composant.
+
+### Props
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| page | Object | données brutes de la page à créer | Doit contenir au minimum les valeurs suivantes: `{id, type, activityRef }`. Référez-vous à la section sur la [création de page](/guide/pageType.html#qu-est-ce-qu-une-page) pour une liste exhaustive des valeurs de la propriété. |
+
+### Slots
+`content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
+
+
+## Style
+
+`nomde class`[class]
+
+Aucune manipulation requise.
+
+
+## Accessibilité
+Aucune manipulation requise.
+

package/documentation/composants/app-comp-input-text-to-fill-next.md

@@ -0,0 +1,31 @@
+# Input text to fill
+
+Composant tableau d'input zone de texte.
+
+## Aperçu
+
+Présente des éléments interactifs sous forme de groupe d'input texte.  Ce composant est un **élément de base du [composant Quiz](../guide_api/CompQuiz.html)** et est directement utilisé pour la création de quiz de type textes à trous. 
+
+## Référence du composant
+
+**AppCompInputTextToFill** 
+
+## Comportement
+
+Le composant reçoit les informations passés en paramètre par le [composant Quiz](../guide_api/CompQuiz.html) et affiche des éléments d`input zone de texte. 
+ 
+
+## Paramètre 
+
+### Props
+
+Voici les éléments par défaut du text box.
+
+| Propriété | Type  | Description   | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| :class | Object | Ajoute et retire la classe au click / classe de rétroaction lorsque le quiz est valider | reponseSelectionner, wrong_answer, correct_answer |
+
+ 
+
+## Style
+