fcad-core-dragon 2.0.0 → 2.0.1-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/CHANGELOG +7 -0
  2. package/README.md +57 -72
  3. package/documentation/.vitepress/config.js +114 -0
  4. package/documentation/api-examples.md +49 -0
  5. package/documentation/composants/app-base-button.md +58 -0
  6. package/documentation/composants/app-base-error-display.md +59 -0
  7. package/documentation/composants/app-base-popover.md +68 -0
  8. package/documentation/composants/app-comp-audio.md +43 -0
  9. package/documentation/composants/app-comp-branch-buttons.md +111 -0
  10. package/documentation/composants/app-comp-button-progress.md +53 -0
  11. package/documentation/composants/app-comp-carousel.md +53 -0
  12. package/documentation/composants/app-comp-container.md +53 -0
  13. package/documentation/composants/app-comp-input-checkbox-next.md +42 -0
  14. package/documentation/composants/app-comp-input-dropdown-next.md +34 -0
  15. package/documentation/composants/app-comp-input-radio-next.md +39 -0
  16. package/documentation/composants/app-comp-input-text-next.md +35 -0
  17. package/documentation/composants/app-comp-input-text-table-next.md +34 -0
  18. package/documentation/composants/app-comp-input-text-to-fill-dropdown-next.md +53 -0
  19. package/documentation/composants/app-comp-input-text-to-fill-next.md +31 -0
  20. package/documentation/composants/app-comp-jauge.md +31 -0
  21. package/documentation/composants/app-comp-menu-item.md +55 -0
  22. package/documentation/composants/app-comp-menu.md +29 -0
  23. package/documentation/composants/app-comp-navigation.md +41 -0
  24. package/documentation/composants/app-comp-note-call.md +53 -0
  25. package/documentation/composants/app-comp-note-credit.md +53 -0
  26. package/documentation/composants/app-comp-play-bar-next.md +53 -0
  27. package/documentation/composants/app-comp-pop-up-next.md +93 -0
  28. package/documentation/composants/app-comp-quiz-next.md +235 -0
  29. package/documentation/composants/app-comp-quiz-recall.md +53 -0
  30. package/documentation/composants/app-comp-svg-next.md +53 -0
  31. package/documentation/composants/app-comp-table-of-content.md +50 -0
  32. package/documentation/composants/app-comp-video-player.md +43 -0
  33. package/documentation/composants.md +46 -0
  34. package/documentation/composants_critiques/ModelPageComposant.md +53 -0
  35. package/documentation/composants_critiques/app-base-module.md +43 -0
  36. package/documentation/composants_critiques/app-base-page.md +48 -0
  37. package/documentation/composants_critiques/app-base.md +311 -0
  38. package/documentation/composants_critiques/main.md +15 -0
  39. package/documentation/demarrage.md +50 -0
  40. package/documentation/deploiement.md +58 -0
  41. package/documentation/index.md +33 -0
  42. package/documentation/markdown-examples.md +85 -0
  43. package/documentation/public/npm_version.png +0 -0
  44. package/documentation/public/vite.svg +15 -0
  45. package/documentation/public/vuejs.svg +2 -0
  46. package/documentation/public/vuetify.svg +6 -0
  47. package/package.json +6 -2
  48. package/src/components/AppBase.vue +3 -0
  49. package/src/components/AppCompBranchButtons.vue +3 -5
  50. package/src/components/AppCompInputCheckBoxNext.vue +18 -13
  51. package/src/components/AppCompInputDropdownNext.vue +1 -1
  52. package/src/components/AppCompInputRadioNext.vue +158 -152
  53. package/src/components/AppCompInputTextNext.vue +0 -1
  54. package/src/components/AppCompInputTextToFillNext.vue +171 -171
  55. package/src/components/AppCompQuizNext.vue +1 -1
@@ -0,0 +1,53 @@
1
+ ---
2
+ title: Model de page
3
+
4
+ ---
5
+ ::: warning 🚩 Important
6
+ Utilisez ce model comme depart pour écrire la page de votre composant:
7
+
8
+ 1) Copiez /dubliquez cette page
9
+ 2) Renommez votre copie avec le nom de votre composant
10
+ 3) Édtitez la page en rempliçant les sections qui conserne votre composant.
11
+ :::
12
+
13
+
14
+ Composant pour ....
15
+
16
+ ## Aperçu
17
+
18
+ Le composant permet de...
19
+ Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
20
+
21
+ ## Comportement
22
+
23
+ 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.
24
+
25
+ ## Référence du composant
26
+
27
+ **ModelComposantPage** `<model-composant/>`
28
+
29
+
30
+ ## Paramètre
31
+
32
+ Aucun paramètre n'est nécessaire pour ce composant.
33
+
34
+ ### Props
35
+
36
+ | Propriété | Type | Description | valeur par défaut |
37
+ |:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
38
+ | 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é. |
39
+
40
+ ### Slots
41
+ `content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
42
+
43
+
44
+ ## Style
45
+
46
+ `nomde class`[class]
47
+
48
+ Aucune manipulation requise.
49
+
50
+
51
+ ## Accessibilité
52
+ Aucune manipulation requise.
53
+
@@ -0,0 +1,53 @@
1
+ ---
2
+ title: Model de page
3
+
4
+ ---
5
+ ::: warning 🚩 Important
6
+ Utilisez ce model comme depart pour écrire la page de votre composant:
7
+
8
+ 1) Copiez /dubliquez cette page
9
+ 2) Renommez votre copie avec le nom de votre composant
10
+ 3) Édtitez la page en rempliçant les sections qui conserne votre composant.
11
+ :::
12
+
13
+
14
+ Composant pour ....
15
+
16
+ ## Aperçu
17
+
18
+ Le composant permet de...
19
+ Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
20
+
21
+ ## Comportement
22
+
23
+ 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.
24
+
25
+ ## Référence du composant
26
+
27
+ **ModelComposantPage** `<model-composant/>`
28
+
29
+
30
+ ## Paramètre
31
+
32
+ Aucun paramètre n'est nécessaire pour ce composant.
33
+
34
+ ### Props
35
+
36
+ | Propriété | Type | Description | valeur par défaut |
37
+ |:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
38
+ | 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é. |
39
+
40
+ ### Slots
41
+ `content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
42
+
43
+
44
+ ## Style
45
+
46
+ `nomde class`[class]
47
+
48
+ Aucune manipulation requise.
49
+
50
+
51
+ ## Accessibilité
52
+ Aucune manipulation requise.
53
+
@@ -0,0 +1,93 @@
1
+ # Pop up
2
+
3
+ Se composant est repris de vuetify.
4
+
5
+ ## Aperçu
6
+
7
+ Ce composant est un pop-up qui permet de visualiser du contenu. Il peut être appelé par la machine ou par l'utlisateur. Vous pouvez donc à n'importe quel endroit de votre page ou de votre autre composant appeler ce POP-UP pour afficher les messages de type: `information et personnalisé`.
8
+
9
+ ## Comportement
10
+
11
+ Le FCAD offre un composant POP-UP pour afficher une boite de dialogue à l'utilisateur. Ce composant est paramètré pour générer **2 types de boite de dialogue**.
12
+
13
+ Vous devez utiliser le bus pour appeler l'ouverture du pop-up. Voici comment faire:
14
+
15
+ - Emettre l'événement `open-popup`.
16
+ - Passer en "argument" l'objet POP-UP à générer.
17
+
18
+ ```vue
19
+ <script>
20
+ export default {
21
+ //...
22
+ methods: {
23
+ openPopup(data) {
24
+ this.$bus.$emit("open-popup", data);
25
+ }
26
+ },
27
+ };
28
+ </script>
29
+ ```
30
+
31
+ Dans la section **`<template/>`** de votre page ou de votre composant, vous pouvez maintenant faire afficher le POP-UP, par l'appel de votre méthode sur le clique d'un bouton par exemple.
32
+
33
+ ```vue
34
+ <template>
35
+ <div>
36
+ <app-base-button @click="openPopup(myPopupExemple1)">
37
+ Information
38
+ </app-base-button>
39
+ </div>
40
+ </template>
41
+ ```
42
+
43
+
44
+ ## Paramètre
45
+
46
+ Le pop-up doit recevoir l'information à afficher d'object. Voici le contenu que doit avoir l'objet pop-up:
47
+
48
+ | Propriété | Type | Description |valeur | Required |
49
+ |-----------|--------|-------------------------------|------------------------------------------|----------|
50
+ | type | String | défini le type de pop-up à être générer | `popup-info`, `popup-custom` | true |
51
+ | value | Object | défini le contenu à générer dans le pop-up | `title`, `text_n`, `hypertext`\*, `hypertext_n`\*\*, `audio_n`, `video_n`, `link_n`, `image_n`, `cb_$open`,`cb_$close`, `cb_$cancel`, `cb_$confirm`,`$bvArgs`\*\*\*, <br><br> **_NOTES: <br> `n` étant un entier de 1 à infini <br>\* Doit être uniquement utiliser avec le Pop-up Custom<br>\*\* Doit être utilisé iniquement avec les pop-up<br>\*\*\* liste de proprietés Boostrap-vue à passer_** | true |
52
+
53
+ Voici comment définir l'objet à générer :
54
+
55
+ ```vue
56
+ <script>
57
+ export default {
58
+ //...
59
+ data() {
60
+ return {
61
+ //...
62
+ myPopupExemple1: {
63
+ type: "popup-info",
64
+ value: {text_1:"voici une information de pop-up à afficher"},
65
+ },
66
+ };
67
+ },
68
+ };
69
+ </script>
70
+ ```
71
+
72
+ Voici le tableau de tous les paramètres possible pour les pop-ups :
73
+ | Propriété | Type | Description | Usage | Required |
74
+ |-------------------------|----------|-----------------------------------------|-----------|-------------|
75
+ | title | String | Le titre que doit afficher le POP-UP dans l'entête<br><br>_exemple : information_ | title: 'information' | optionnelle |
76
+ | text_n <br><br>**`n` étant un entier de 1 à infini** | String | un contenu textuel que doit afficher le POP-UP. | text_1:"Hello world" | optionnelle |
77
+ | image_n <br><br>**`n` étant un entier de 1 à infini** | Object | une image à faire afficher dans le POP-UP avec une source et un alt | image_1:{path:'img/mon_image.png', label:'nom de mon image'} <br><br> **Note: les clés `path` et `label` sont obligatoire**. | optionnelle |
78
+ | audio_n <br><br>**`n` étant un entier de 1 à infini** | String | un élément audio à faire afficher dans le POP-UP. | audio_1:'audio/mon_image.png' | optionnelle |
79
+ | video_n <br><br>**`n` étant un entier de 1 à infini** | String | un élément audio à faire afficher dans le POP-UP. | video_1:'video/mon_image.png' | optionnelle |
80
+ | link_n <br><br>**`n` étant un entier de 1 à infini** | Object | un lien à faire afficher dans le POP-UP, avec une source et un libélé | link_1:{ ref:'https://FCADdocumentation.netlify.app/guide/', label:'libélé de mon lien' }<br><br>**Note: les clés `ref` et `label` sont obligatoire**. | optionnelle |
81
+ | hypertext_n <br><br>**`n` étant un entier de 1 à infini** | String | un contenu html à faire afficher dans le POP-UP. | hypertext_1:'voici un texte avec du &lt;strong&gt;html&lt;/strong&gt; à afficher' | |
82
+ | cb\_\$open | Function | une fonction de callback à exécuter lorsque le POP-UP sera ouvert | cb\_\$open:foo() | optionnelle |
83
+ | cb\_\$close | Function | une fonction de callback à exécuter lorsque le POP-UP sera fermé | cb\_\$close:foo() | optionnelle |
84
+ | cb\_\$cancel | Function | une fonction de callback à exécuter lorsque le button d'annulation sera appuyé<br> | cb\_\$cancel:foo() | optionnelle |
85
+ | cb\_\$confirm | Function | une fonction de callback à exécuter lorsque le button de confirmation sera appuyé<br> | cb\_\$confirm:foo() | optionnelle | | optionnelle |
86
+
87
+ ## Style
88
+
89
+ N/A
90
+
91
+ ## Accessibilité
92
+
93
+ Pour l'instant aucune action n'a été fait pour l'accessibilité.
@@ -0,0 +1,235 @@
1
+ # Quiz
2
+
3
+ *Quiz* est le composant qui gère principalement toutes les actions principales de tous les types de quiz de l'application, sans être un gestionnaire.
4
+
5
+ ## Aperçu
6
+
7
+ Le composant *quiz* importe et affiche les données. Selon les données entrer dans la feuille *json*, *quiz* se charge d'utiliser le bon type de quiz. Il gère aussi tout ce qui est validation pour tout type de quiz, si validation il y a. Il affiche la rétroaction en dessous du quiz.
8
+
9
+ ## Comportement
10
+
11
+ *Quiz* doit absolument être lié avec un fichier *json* lors de son appelle. Si le fichier *json* comporte une erreur, le quiz ne fonctionnera pas.
12
+
13
+ Le *json* doit avoir les informations suivantes :
14
+
15
+ - id
16
+ - type
17
+ - enonce
18
+ - choix de réponse
19
+ - solution
20
+ - rétroaction
21
+ - valeur de point
22
+ - le nombre essais
23
+
24
+ ```json
25
+ {
26
+ "id": "Axx_Pxx_Qxx",
27
+ "type_question": "",
28
+ "ennonce": "",
29
+ "choix_reponse": [],
30
+ "solution": "",
31
+ "rétroaction": {
32
+ "retro_neutre": {} ,
33
+ "retro_positive": {} ,
34
+ "retro_negative": {}
35
+ },
36
+ "valeur_points": null,
37
+ "max_essai": null
38
+ }
39
+
40
+
41
+ Peu importe le type de quiz développé, ce sont les informations nécessaires pour créer un quiz.
42
+
43
+ Le paramètre *ennonce* doit absolument recevoir une structure html.
44
+
45
+ ::: warning Attention
46
+ Prenez note que *valeur_points* n'est pas fonctionnel pour l'instant.
47
+ :::
48
+
49
+ ## Paramètre
50
+
51
+ ### Voici les paramètres généraux à tous les quiz
52
+
53
+ #### ID
54
+
55
+ **Type:** `String` _(Axx_Pxx_Qxx)_
56
+
57
+ **Usage:** Obligatoire.
58
+ Définie l'identification unique pour le quiz/ la question. Cet *ID* est constitué de la référence de l'activité **Axx** , référence de la page **Pxx** et un numéro du Quiz **Qxx**.
59
+
60
+ #### TYPE_QUESTION
61
+
62
+ **Type:** `String` _(choix_mult | choix_unique | dropdown | reponse_ouverte | texte_tableau | texte_troue | texte_troue_select)__
63
+
64
+ **Usage:** Obligatoire.
65
+ Définie le type de question.
66
+
67
+ #### ENNONCE
68
+
69
+ **Type:** `String`
70
+
71
+ **Usage:** Obligatoire.
72
+ Définie l'énoncé textuel de la question.
73
+
74
+ #### RETROACTION
75
+
76
+ **Type:** `Object` retro_positive | retro_negative | retro_neutre
77
+
78
+ **Usage:** Obligatoire.
79
+ Définie la rétroaction à afficher pour la question. Doit /referencesléter une des situations ci-dessous:
80
+
81
+ - Une rétraction particulière est attendue selon le type de réponse de l'utilisateur. Les clés `retro_positive , retro_negative , retro_neutre` doivent être remplies.
82
+
83
+ - Aucune rétroaction particulière n'est demandée. Les clés `retro_positive` , `retro_negative` peuvent contenir un string vide ou être mise `Null` et la clé `retro_neutre` doit être remplie pour la rétroaction générale à afficher.
84
+
85
+ #### VALEUR_POINTS
86
+
87
+ **Type:** `Number | Null`
88
+
89
+ **Usage:** Optionnel.
90
+ Définie la valeur de la question en termes de points. Doit être mit à `null` si aucune valeur n’est nécessaire pour le quiz.
91
+
92
+ #### MAX_ESSAI
93
+
94
+ **Type:** `Number | Null`
95
+
96
+ **Usage:** Optionnel.
97
+ Définie le nombre d'essai permit pour ce quiz. Doit être mis à `null` si aucun aucune condition d'essai maximum n'est nécessaire pour le quiz.
98
+
99
+ ### Voici les paramètres spécifique pour les inputs et les types de solutions
100
+
101
+ ### Quiz réponse ouverte
102
+
103
+ [Exemple d'un objet quizData de réponse ouverte](../ref/quizDataReponseOuverte.json)
104
+
105
+ #### CHOIX_REPONSE
106
+
107
+ **Type:** `Null`
108
+
109
+ **Usage:** Obligatoire.
110
+ Doit être mis à `null` si la question ne présente pas un choix de réponse.
111
+
112
+ #### SOLUTION
113
+
114
+ **Type:** `String | Null`
115
+
116
+ **Usage:** Obligatoire.
117
+ Définie la solution pour la question.
118
+
119
+ ### Quiz réponse radio et réponse checkbox
120
+
121
+ [Exemple d'un objet quizData de réponse radio](../ref/quizDataChoixUnique.json)
122
+
123
+ [Exemple d'un objet quizData de réponse checkbox](../ref/quizDataChoixMult.json)
124
+
125
+
126
+ #### CHOIX_REPONSE
127
+
128
+ **Type:** `Array{Object} | Null`
129
+
130
+ **Usage:** Obligatoire.
131
+ Définie l'ensemble des choix proposés pour la réponse. Doit être mis à `null` si la question ne présente pas un choix de réponse.
132
+ Le type d'objet contenu de l'array change selon le type de quiz:
133
+ - Le type `reponse_simple` pour les quiz `choix_unique` || `choix_mult`
134
+
135
+ #### SOLUTION
136
+
137
+ **Type:** `Number | Array | Null`
138
+
139
+ **Usage:** Obligatoire.
140
+ Définie la solution pour la question. Doit contenir une des valeurs ci-dessous:
141
+
142
+ - un Array ( *IDs* des solutions, dans le cas de la question type choix_mult)
143
+ - Null dans le cas où aucune solution n'est attendu/exigé (reponse_ouverte sans validation)
144
+
145
+ ### Quiz réponse liste déroulante
146
+
147
+ [Exemple d'un objet quizData de réponse liste déroulante](../ref/quizDataDropdown.json)
148
+
149
+ #### CHOIX_REPONSE
150
+
151
+ **Type:** `Array{Object} | Null`
152
+
153
+ **Usage:** Obligatoire.
154
+ Définie l'ensemble des choix proposés pour chaque réponse.
155
+
156
+ #### SOLUTION
157
+
158
+ **Type:** `Array | Null`
159
+
160
+ **Usage:** Obligatoire.
161
+ Définie la solution pour la question.
162
+
163
+ ### Quiz texte tableau
164
+
165
+ [Exemple d'un objet quizData de texte tableau](../ref/quizDataTextTableau.json)
166
+
167
+ #### CHOIX_REPONSE
168
+
169
+ **Type:** `Array{Object}`
170
+
171
+ **Usage:** Obligatoire.
172
+ Définie l'ensemble des rangés du tableau avec chaque rangé ayant une réponse.
173
+
174
+ #### SOLUTION
175
+
176
+ **Type:** `Array{Object} | Null`
177
+
178
+ **Usage:** Obligatoire.
179
+ Définie la solution pour la question.
180
+
181
+ ### Quiz texte trou
182
+
183
+ [Exemple d'un objet quizData de texte trou](../ref/quizDataTexteTroue.json)
184
+
185
+ #### TEXTE_BASE
186
+
187
+ **Type:** `String`
188
+
189
+ **Usage:** Obligatoire.
190
+ Définie le texte où les entrées de champs textes seront insérées. L'emplacement des entrés est indiqué dans le texte avec `$%KEY%$`.
191
+
192
+ #### SOLUTION
193
+
194
+ **Type:** `Array{Object} | Null`
195
+
196
+ **Usage:** Obligatoire.
197
+ Définie la solution pour la question.
198
+
199
+
200
+ ### Quiz texte trou à liste déroulante
201
+
202
+ [Exemple d'un objet quizData de texte trou à liste déroulante](../ref/quizDataTextTrouSelect.json)
203
+
204
+ #### CHOIX_REPONSE
205
+
206
+ **Type:** `Array{Object}`
207
+
208
+ **Usage:** Obligatoire.
209
+ Définie l'ensemble des choix proposés pour chaque réponse.
210
+
211
+ #### TEXTE_BASE
212
+
213
+ **Type:** `String`
214
+
215
+ **Usage:** Obligatoire.
216
+ Définie le texte où les entrées de champs textes seront insérées. L'emplacement des entrés est indiqué dans le texte avec `$%KEY%$`.
217
+
218
+ #### SOLUTION
219
+
220
+ **Type:** `Array{Object} | Null`
221
+
222
+ **Usage:** Obligatoire.
223
+ Définie la solution pour la question.
224
+
225
+
226
+
227
+ ## Style
228
+
229
+ Lorsque vous sélectionnez une réponse, la classe *select* est ajoutée à l'élément sélectionné. Lors de la validation des éléments, toutes les bonnes réponses ont la classe *good* et toute les mauvaises réponses on la classes *bad*. Un jeu de classes est utilisé dans la feuille sass de chaque type de input pour identifier les bonnes réponses, les mauvaises réponses, les mauvaises réponse sélectionnées et les bonnes réponses sélectionnées.
230
+
231
+ Aucune classe supplémentaire ne peut être ajoutée au élément du quiz. Vous ne pouvez jouer qu'avec le conteneur parent du quiz pour ajouter des classes ou *id*. Par défaut, le quiz et ses éléments ont l'*id* que vous définissez dans la feuille *json*.
232
+
233
+ ## Accessibilité
234
+
235
+ Pour l'instant aucune action n'a été fait pour l'accessibilité.
@@ -0,0 +1,53 @@
1
+ ---
2
+ title: Model de page
3
+
4
+ ---
5
+ ::: warning 🚩 Important
6
+ Utilisez ce model comme depart pour écrire la page de votre composant:
7
+
8
+ 1) Copiez /dubliquez cette page
9
+ 2) Renommez votre copie avec le nom de votre composant
10
+ 3) Édtitez la page en rempliçant les sections qui conserne votre composant.
11
+ :::
12
+
13
+
14
+ Composant pour ....
15
+
16
+ ## Aperçu
17
+
18
+ Le composant permet de...
19
+ Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
20
+
21
+ ## Comportement
22
+
23
+ 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.
24
+
25
+ ## Référence du composant
26
+
27
+ **ModelComposantPage** `<model-composant/>`
28
+
29
+
30
+ ## Paramètre
31
+
32
+ Aucun paramètre n'est nécessaire pour ce composant.
33
+
34
+ ### Props
35
+
36
+ | Propriété | Type | Description | valeur par défaut |
37
+ |:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
38
+ | 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é. |
39
+
40
+ ### Slots
41
+ `content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
42
+
43
+
44
+ ## Style
45
+
46
+ `nomde class`[class]
47
+
48
+ Aucune manipulation requise.
49
+
50
+
51
+ ## Accessibilité
52
+ Aucune manipulation requise.
53
+
@@ -0,0 +1,53 @@
1
+ ---
2
+ title: Model de page
3
+
4
+ ---
5
+ ::: warning 🚩 Important
6
+ Utilisez ce model comme depart pour écrire la page de votre composant:
7
+
8
+ 1) Copiez /dubliquez cette page
9
+ 2) Renommez votre copie avec le nom de votre composant
10
+ 3) Édtitez la page en rempliçant les sections qui conserne votre composant.
11
+ :::
12
+
13
+
14
+ Composant pour ....
15
+
16
+ ## Aperçu
17
+
18
+ Le composant permet de...
19
+ Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
20
+
21
+ ## Comportement
22
+
23
+ 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.
24
+
25
+ ## Référence du composant
26
+
27
+ **ModelComposantPage** `<model-composant/>`
28
+
29
+
30
+ ## Paramètre
31
+
32
+ Aucun paramètre n'est nécessaire pour ce composant.
33
+
34
+ ### Props
35
+
36
+ | Propriété | Type | Description | valeur par défaut |
37
+ |:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
38
+ | 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é. |
39
+
40
+ ### Slots
41
+ `content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
42
+
43
+
44
+ ## Style
45
+
46
+ `nomde class`[class]
47
+
48
+ Aucune manipulation requise.
49
+
50
+
51
+ ## Accessibilité
52
+ Aucune manipulation requise.
53
+
@@ -0,0 +1,50 @@
1
+ # TOC / Table des matières
2
+
3
+ TOC ou table des matières est disponible dans la barre de navigation.
4
+
5
+ ## Aperçu
6
+
7
+ La table des matières contient toute les liens vers les sections déclarer dans `menu.setting.js`. Elle affiche aussi les informations sur l'activité déclarer dans le même fichier.
8
+
9
+ Il affiche aussi le pourcentage de visionnement de l'activité. Les sections lorsqu'elles sont visitées le mot terminer apparait sous le titre.
10
+
11
+ ## Paramètre
12
+
13
+ Si vous désirez avoir des ancres dans les pages. Créez un fichier nommé ``menu.setting.js` et déposer le à la racine de votre dossier `src`.
14
+
15
+ Voici la structure de celui-ci :
16
+
17
+ ```vue
18
+ <script>
19
+ A00: {
20
+ title: 'Introduction',
21
+ subTitle: 'ceci est un sous-titre',
22
+ time: '00:00',
23
+ anchors: [
24
+ {
25
+ anchorName: 'Moxxi',
26
+ pageRef: 'P01',
27
+ page: 'page_1'
28
+ }
29
+ ]
30
+ },
31
+ </script>
32
+ ```
33
+
34
+ #### Voici certaine spécification
35
+
36
+ Propriété | Type | Description |
37
+ |:----------|:-----------------|:------------------------------------------|
38
+ | id | String | Doit être unique dans tout le fichier |
39
+ | anchorName | String |  Nom affiché dans la table des matières |
40
+ | pageRef | String | Référence de la page où il se trouve.
41
+ | page | String | Référence du name de la page pour créer la route | 
42
+
43
+
44
+ ## Style
45
+
46
+ Vous ne pouvez pas ajouter de classe au élément de la table des matières.
47
+
48
+ ## Accessibilité
49
+
50
+ Pour l'instant aucune action n'a été fait pour l'accessibilité.
@@ -0,0 +1,43 @@
1
+ # Media player
2
+
3
+ Ce composant affiche et gère le vidéo dans la page.
4
+
5
+ ## Aperçu
6
+
7
+ Ce composant affiche et gère les vidéo afficher dans une page.
8
+
9
+ ## Comportement
10
+
11
+ Affiche la vidéo qui est appelé et offre tout les conrole pour jouer la vidéo.
12
+
13
+ - Appelle la play bar pour les fonctionlité suivant : Play, pause, rejouer et le controle du volume
14
+ - Affichage des sous-titres
15
+ - Afficher les transcriptions
16
+
17
+ Les transcripts ouvrent dans une fenêtre latérale. Une seule fenêtre peux être ouvert à la fois.
18
+
19
+ ## Référence du composant
20
+
21
+ `<app-comp-video-player :vid-data="videoData" />`
22
+
23
+ ## Paramètre
24
+
25
+ Il n'y a pas de paramètre pour ce composant.
26
+
27
+ ### Props
28
+
29
+ | Propriété | Type | Description | valeur par défaut |
30
+ |:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
31
+ | id | string | identification unique | N/A |
32
+ | mSources | Objet | deux valeur `type` qui doit être déplacé comme `mp4` et `src` doit être la source du mp4 | N/A |
33
+ | mSubtitles | Objet | trois valeur: `label` qui doit être la langue dont les soustitres seront. `src` doit être la source du mp4 `srclang` doit être le diminutif de la langue des sous-titres | N/A |
34
+ | 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 |
35
+ | mTranscript | string | nom du fichier html où le transcript se trouve | N/A |
36
+
37
+ ## Style
38
+
39
+
40
+
41
+ ## Accessibilité
42
+
43
+
@@ -0,0 +1,46 @@
1
+ # Les composants du FCAD
2
+
3
+ ## Composants critiques
4
+
5
+ | Nom | Description |
6
+ | ------------- | ----------- |
7
+ |[app-base](/composants_critiques/app-base)|Composant racine pour l'utilisation de la librairie.|
8
+ |[app-base-module](/composants_critiques/app-base-module)|Composant racine du module.|
9
+ |[app-base-page](/composants_critiques/app-base-page)|Composant racine des pages d'activité.|
10
+ |[main](/composants_critiques/main)|Point d'entrée principal du FCAD|
11
+
12
+ ## Autres composants
13
+ |Nom|Description|
14
+ |-------------|-----------|
15
+ |[app-base-button](/composants/app-base-button)|Bouton de base géré par le FCAD|
16
+ |[app-base-error-display](/composants/app-base-error-display)|Affichage des erreurs de développement/intégration|
17
+ |[app-base-flip-card](/composants/app-base-flip-card)|Élément interactif sous la forme d'une carte pivotante|
18
+ |[app-base-popover](/composants/app-base-popover)|Affichage de contenu dans une infobulle|
19
+ |[app-comp-audio](/composants/app-comp-audio)|Lecteur audio|
20
+ |[app-comp-branch-buttons](/composants/app-comp-branch-buttons)|Bouton qui ouvre une fenêtre latérale|
21
+ |[app-comp-button-progress](/composants/app-comp-button-progress)|Affichage de la progression d'une fenêtre latérale|
22
+ |[app-comp-carousel](/composants/app-comp-carousel)|Galerie d'images sous la forme d'un carrousel|
23
+ |[app-comp-container](/composants/app-comp-container)|Contenant de la fenêtre latérale|
24
+ |[app-comp-input-checkbox-next](/composants/app-comp-input-checkbox-next)|Exercice à réponses multiples (cases à cocher)|
25
+ |[app-comp-input-dropdown-next](/composants/app-comp-input-dropdown-next)|Exercice à listes déroulantes |
26
+ |[app-comp-input-radio-next](/composants/app-comp-input-radio-next)|Exercice à réponse unique (bouton radio)|
27
+ |[app-comp-input-text-next](/composants/app-comp-input-text-next)|Exercice à réponse ouverte (boîte de texte)|
28
+ |[app-comp-input-text-table-next](/composants/app-comp-input-text-table-next)|Exercice à saisie de textes multiples|
29
+ |[app-comp-input-text-to-fill-dropdown-next](/composants/app-comp-input-text-to-fill-dropdown-next)|Exercice texte à trous avec listes déroulantes|
30
+ |[app-comp-input-text-to-fill-next](/composants/app-comp-input-text-to-fill-next)|Exercice texte à trous avec saisie de texte|
31
+ |[app-comp-jauge](/composants/app-comp-jauge)|Marqueur de progression|
32
+ |[app-comp-menu](/composants/app-comp-menu)|Affichage du sommaire des activités|
33
+ |[app-comp-menu-item](/composants/app-comp-menu-item)|Bouton contenant les informations d'une activité|
34
+ |[app-comp-navigation](/composants/app-comp-navigation)|Navigation principale de l'application|
35
+ |[app-comp-note-call](/composants/app-comp-note-call)|xxxxxxxxx|
36
+ |[app-comp-note-credit](/composants/app-comp-note-credit)|xxxxxxxxx|
37
+ |[app-comp-play-bar-next](/composants/app-comp-play-bar-next)|Barre d'outils des lecteurs vidéo/audio|
38
+ |[app-comp-pop-up-next](/composants/app-comp-pop-up-next)|Fenêtre modale|
39
+ |[app-comp-quiz-next](/composants/app-comp-quiz-next)|Composant de base pour les exercices|
40
+ |[app-comp-quiz-recall](/composants/app-comp-quiz-recall)|Rappel de réponse|
41
+ |[app-comp-svg-next](/composants/app-comp-svg-next)|Gestion des SVG dans l'application|
42
+ |[app-comp-table-of-content](/composants/app-comp-table-of-content)|Composant progression de la navigation principale|
43
+ |[app-comp-video-player](/composants/app-comp-video-player)|Lecteur vidéo|
44
+
45
+
46
+