Exemple de structure possible

Voici des exemples de structure possible avec l'application de base du FCAD.

Nomenclature

La structure des dossiers et fichiers dans le FCAD doit être divisée par activités et pages. Cette structure des dossiers va varier, dépendant du type de structure.

Dossiers :

Chaque dossier représente une activité dans le projet. Tous les dossiers doivent avoir une nomenclature « AXX » où « XX » représente le numéro de l’activité. Exemple : A00, A01, A10, etc.

important

Le dossier A00 doit toujours contenir une page de type « pg_menu », qui est la page du menu des activités, qui par convention interne devrait s’appeler P00.vue

Pages dans un dossier :

Chaque fichier situé dans un dossier représente une page à l’intérieur d’une activité. Les fichiers placés dans un dossier sont de type « .vue ». Les pages doivent avoir une nomenclature « PXX » où « XX » représente le numéro de la page. Exemple : P01.vue, P10.vue, P11.vue, etc.

👁️ Attention!

Dans tout le projet, il ne devrait y avoir qu'une seule page appelée P00.vue (dans le dossier A00) qui contiendra le sommaire des activités.

Chaque page doit avoir un type de page.

Pages d'embranchements dans un dossier :

Les pages d’une branche sont également des pages qui feront partie du dossier de l’activité. Les "pages-branches" existeront seulement si on crée un projet en mode-eL+.

Ces pages doivent avoir une nomenclature « PXX_EXX_PXX » où :

• PXX : Réfère à la page parent où se situe l’embranchement
• EXX : Réfère à une branche.
• PXX : Réfère à la page dans la branche EXX.

Exemple :
P01.vue
P01_E01_P01.vue
P01_E01_P02.vue
P01_E01_P03.vue
P01_E02_P01.vue
P01_E02_P02.vue

Dans cet exemple, la page parent P01.vue contient 2 branches : E01 et E02.

La première branche E01 contient 3 pages : P01_E01_P01.vue, P01_E01_P02.vue et P01_E01_P03.vue et la deuxième branche E02 contient seulement 2 pages : P01_E02_P01.vue et P01_E02_P02.vue

👁️ Attention!

Il ne doit jamais avoir de page d'embranchement définie dans le dossier A00 .

💡 Note

Nous pouvons naviguer seulement dans la branche en cours. À la dernière page de celle ci, nous avons le choix de revenir à l'embrenchement initial (c-à-d à la page parent) avec le bouton « Retourner à la page d'origine » ou d'aller la branche suivante à l'aide du bouton "Aller au sujet suivant".

Le bouton « Retourner à la page d'origine » est disponible en tout temps dans la bare de navigation.

Types de structure d’un projet FCAD

Un cours contient plusieurs projets FCAD et chacun de ces projets peut avoir une structure différente. Avoir une bonne compréension des structures possibles est important pour savoir la quelle est appropriée au projet en vue.

Voici les 3 types de structure qu’on peut avoir dans nos cours :

Structure 1 pour une leçon

La première page du projet doit afficher l’introduction (par défaut)

Avec cette structure, la navigation dans la leçon commencera par l'affichage de la page d’introduction de la leçon. En suite, La navigation menera au sommaire des activités de la leçon. C' est la structure par default.

💡 Note

Lorsque vous installez l'application en prennant toutes les réponses par défault c'est le type de structure appliqué au projet.

mon Projet
  |
  ├─ A00 
  │  └─P00.vue  => Sommaire des activités (page de type « pg_menu »)
  │  
  ├─ A01 => Dossier première d'activité
  │  ├─ P01.vue  => Page d'activité
  │  ├─ P02.vue  => Page d'activité
  │  └─ ...
  │  
  ├─ A02 => Dossier deuxième activité
  │  ├─ P01.vue  => Page d'activité
  │  ├─ P02.vue  => Page d'activité
  │  └─ PXX.vue  
  │ 
  ├─ ...
  │  
  └─ A10 => Dossier de la dernière activité (contient la conclusion)
      └─ P01.vue  => Page 1 de la conclusion de la leçon

💡 Note

Par convention, la page où est affichée le menu est toujours la page avec l'identification (id) « P00 » et doit se trouver dans le dossier « A00 ». Dans ce contexte, le FCAD exécutera en premier la page P01.vue, qui est une page de type « pg_normal » ainsi que tout autre page PXX.vue, pour à la fin exécuter la page P00.vue, qui est une page de type menu.

Donc, la page d’introduction sera affichée en premier et par la suite le sommaire d’activités.

Structure 2 pour une leçon

La première page du projet doit afficher le sommaire des activités

Tel que déjà mentionné, nous allons bâtir cette structure lorsque nous allons créer une leçon dont la première page lancée sera le menu des activités.

la structure que vous devez créer dans votre projet est la suivante :

mon Projet
  |
  ├─ A00 
  │  └─P00.vue  => Sommaire des activités (page de type « pg_menu »)
  │  
  ├─ A01 => Dossier Introduction
  │  └─P01.vue  =>  Page 1 de l’introduction de la leçon
  │  
  ├─ A02 => Dossier première activité
  │  ├─ P01.vue  => Page d'activité
  │  ├─ P02.vue  => Page d'activité
  │  └─ PXX.vue  
  │ 
  ├─ ...
  │  
  └─ A10 => Dossier de la dernière activité (contient la conclusion)
      └─ P01.vue  => Page 1 de la conclusion de la leçon

💡 Note

Pour avoir cette strucutre, rendez-vous dans le fichier app.settings.js et mettez la variable : intro_active à false.

Structure 3 pour une leçon

Le projet ne doit pas avoir de sommaire d'activités

Cette structure de navigation est utilisée pour les projets devant présenter l’introduction/conclusion du cours et l’introduction/conclusion du module du cours. Ce projet présentera uniquement des pages où on n’affichera jamais un sommaire des activités.

La structure que vous devez créer dans votre projet est la suivante :

mon Projet
  |
  ├─ A00 
  │  ├─P00.vue  => Sommaire des activités (page de type « pg_menu »)
  │  ├─ P01.vue  => Page 1 de l’introduction
  │  ├─ P02.vue  => Page 2 de l’introduction
  │  ├─ P03.vue  => Page 3 de l’introduction
  │  └─ P04.vue  => Page 4 de l’introduction
  │  
  └─ A01 (Ce dossier ne sera jamais affiché mais dois exister)
     └─ P01.vue (Cette page ne sera jamais affichée, mais elle doit exister)

Vous vous demandez sûrement pourquoi doit-on créer une page pour le sommaire des activités et un dossier A01, puisqu’ils n’existent pas dans le schéma?

Et bien, pour ce type de structure nous devons créer une « passe-passe », car l’application FCAD ne peut pas fonctionner si elle ne contient pas une page de type « pg-menu » et une activité. Pour cette raison, nous devons les créer, et nous devons ajouter un code pour les contourner et qu’elles ne soient pas affichées.

Dans l’exemple nous avons 4 pages dans l’introduction, mais nous ne voulons pas que le menu des activités soit affiché (P00.vue).

Pour faire ceci, nous devons:

1-Forcer la navigation de application vers la premier page d'introduction

//Dans P00.vue
<script>
  //Des que l`application est lancée on veut pousser la navigation vers le introduction
  mounted() {
    this.$router.push({ name: 'introduction' })
  } 
</script>

2-Désactiver le bouton « Précedent » dans la première page de l’introduction (Dans notre exemple : A00/P01.vue)

On veut déactiver le bouton de retour vers le menu uniquement sur la première page, lorsque l'application est lancée ou lorsque la navigation est effectuée vers la première page.

//Dans Module.vue
<script>
  mounted() {
    // Quand application est prête   
    if (this.$route.name == 'introduction') {
          this.$bus.$emit('hide-nav-controls', 'back') // deactiver le bouton 
        } 
  }, 

// Observer la nivagation pour deactiver /activer le bouton de navigation vers le menu
watch: {
    $route: {
      handler() {
        if(this.$route.name === "introduction") this.$bus.$emit('hide-nav-controls', 'back') // deactiver le bouton 
       
      },
      immediate: true
    }
  }

</script>

3-Désactiver le bouton « Retour au menu » de la dernière page de l’introduction (Dans notre exemple : A00/P04.vue)

On veut déactiver le bouton de retour vers le menu lorsque la qu'on atteint la dernière page de l'introduction. Toutefois il egalement permettre la navigation vers la page précédentes

//Dans Module.vue
<script>

  mounted() {
  // Quand application est prête  
    if (this.$route.name == 'introduction') {
      this.$bus.$emit('hide-nav-controls', 'back') // deactiver le bouton de navigation vers arrière
      this.$bus.$emit('show-nav-controls', 'next') // activer le bouton de navigation vers l'avant
    } 
    else if(this.$route =='indotruction.page_4'){
      this.$bus.$emit('show-nav-controls', 'back') // activer le bouton de navigation vers arrière  
      this.$bus.$emit('hide-nav-controls', 'next') //cacher le bouton de navigation avancer (Retour au menu)
    }
  }, 

  // Observer la nivagation pour deactiver /activer le bouton de navigation vers le menu
  watch: {
    $route: {
      handler() {
        if (this.$route.name == 'introduction') {
          this.$bus.$emit('hide-nav-controls', 'back') // deactiver le bouton de navigation vers arrière
          this.$bus.$emit('show-nav-controls', 'next') // activer le bouton de navigation vers l'avant
        } 
        else if(this.$route =='indotruction.page_4'){
          this.$bus.$emit('show-nav-controls', 'back') // activer le bouton de navigation vers arrière  
          this.$bus.$emit('hide-nav-controls', 'next') //cacher le bouton de navigation avancer (Retour au menu)
        }
       
      },
      immediate: true
    }
  }
</script>

4- Ré-activer les boutons « Suivant » et « Précedent » de la barre de navigation sur les autres pages de l’introduction (Dans notre exemple : A00/P02.vue et A00/P03.vue)

Voici comment ré-activer le bouton de navigation primaire :

<script>
  mounted() {

    if (this.$route.name == 'introduction') {
      this.$bus.$emit('hide-nav-controls', 'back') // deactiver le bouton de navigation vers arrière
      this.$bus.$emit('show-nav-controls', 'next') // activer le bouton de navigation vers l'avant
    } 
    else if(this.$route =='indotruction.page_4'){
      this.$bus.$emit('show-nav-controls', 'back') // activer le bouton de navigation vers arrière  
      this.$bus.$emit('hide-nav-controls', 'next') // cacher le bouton de navigation avancer (Retour au menu)
    }else{
      this.$bus.$emit('show-nav-controls') // re-activer les boutons de navigation sur les autres pages
    }
  }, 

  // Observer la nivagation pour deactiver /activer le bouton de navigation vers le menu
  watch: {
    $route: {
      handler() {
        if (this.$route.name == 'introduction') {
          this.$bus.$emit('hide-nav-controls', 'back') // deactiver le bouton de navigation vers arrière
          this.$bus.$emit('show-nav-controls', 'next') // activer le bouton de navigation vers l'avant
        } 
        else if(this.$route =='indotruction.page_4'){
          this.$bus.$emit('show-nav-controls', 'back') // activer le bouton de navigation vers arrière  
          this.$bus.$emit('hide-nav-controls', 'next') // cacher le bouton de navigation avancer (Retour au menu)
        }{
          this.$bus.$emit('show-nav-controls') // re-activer les boutons de navigation sur les autres pages
        }
      },
      immediate: true
    }
  }
</script>

6-Cacher le bouton “menu” dans la barre de navigation.

Pour cela, changer le fichier « bouton.css »

<style>
#btn_back_summary {
  display: none;
  pointer-event: none;
}
</style>

Structure minimum

Pour fonctionner minimalement le FCAD à besoin de la structure suivante:

mon Projet
  |
  ├─ A00 
  │  ├─ P00.vue  => Sommaire des activités (page de type « pg_menu »)
  │  ├─ P01.vue  => Page 1 de l’introduction de la leçon
  │  └─ ...
  │  
  ├─ A01 => Dossier première d'activité
  │  ├─ P01.vue  => Page d'activité
  │  ├─ P02.vue  => Page d'activité
  │  └─ ...
  │  
  ├─ A02 => Dossier deuxième activité
  │  ├─ P01.vue  => Page d'activité
  │  ├─ P02.vue  => Page d'activité
  │  └─ PXX.vue  
  │ 
  ├─ ...
  │  
  └─ A10 => Dossier de la dernière activité (contient la conclusion)
      └─ P01.vue  => Page 1 de la conclusion de la leçon

💡 Note

La page dans le dossier A00 doit être de type pg_menu. Pour rouler l'application a toujours besoin d'un menu et une activité contenant minimalement une page.

N'oublier pas que le bouton de menu est toujours présent dans la playbar. Vous pouvez facilement le faire disparaitre à l'aide de son id dans la feuille Sass des boutons.

Prochaine étape ... les pages

Maintenant que votre structure est prête, vous pouvez commencer à monter vos pages.