Qu'est-ce qu'une page?

La page d'activité vous permettra de créer le contenu pour les activités de votre leçon. Ce contenu sera par la suite affiché dans l'application. La page peut être de type menu, simple, médiatique ou une page avec animation. Le type sera défini par la variable type dans le $data de la page.

Quelque ce soit le type, la page se crée par l'insertion de la balise <app-base-page/> dans la section <template/> du composant monofichier.

<template>
   <app-base-page v-slot:content :page="$data">
    <!----------tout le HTML ICI-------------->
  </app-base-page>
</template>

🚩 Important

Une page d'activité dans le FCAD est un composant Vuejs. Elle doit donc présenter et respecter la structure d'une composant monofichieropen in new window défini par Vuejs.

Données du data

les données contenus dans le $data de la page seront utilisés pour construire la page.

Le $data de la page doit contenir au minimum les quatre données suivantes:

Donnée	Type	Utilité
id	String	Donnée obligatoire. Doit être le même que le nom du fichier. ex: 'P01'
title	String	Donnée facultative. Permet de donner un titre à votre page. Par défaut le titre n’est pas utilisé/affiché à moins que la page soit une page d’embranchement.
activityRef	String	Donné obligatoire. Doit être le même que le nom du dossier où la page se trouve ex:'A01'. Important : Si vous remarquez un bug dans la navigation. Par exemple : lors de la navigation, l’application vous retourne une erreur ou vous redirige vers une autre page que celle de l’ordre logique c’est surement que cette donnée est erroné dans une de vos pages.
Type	String	Donné obligatoire. Doit être le type de page utiliser Seulement quatre type accepté : Menu (ne devrait être appeler seulement dans la page « P00 ») / Animation (légal seulement en eL+) / Normal / Médiatique (légal seulement en eL+)
L'exemple ci-dessous présente la definition du data de la page dans la section `<script/>`

<script>
  data() {
    return {
      //toutes données ici
      ...
    }
  }
</script>

👁️ Attention!

Il ne doit y avoir a qu’une seule page avec l’identifiant « P00 » dans toute l'application. Vous devez la placer dans le dossier « A00 ». C'est elle qui devra contenir votre menu.

Le type de page

Il y a 4 types de pages acceptées dans le FCAD.

Les pages se montent toutes de la même manière, mais elles ont des particularités différentes. Dans la section suivante vous verrez leurs comportements, leurs particularités et comment les paramétrés

Type de page	Valeur du paramètre « type »	Utilité	Acceptée dans le mode
Menu	pg_menu	Page pour le sommaire des activités. Elle est toujours nommée P00.vue et elle se trouve dans le dossier A00.	EL et EL+
Normal	pg_normal	Page versatile contenant différents composants tel que : quiz, texte, images, embranchement, etc.	EL et EL+
Médiatique	pg_media	Page contenant des médias tels que l’audio et la vidéo. On peut aussi ajouter une animation.	EL+
Animation	pg_media	Page contenant des médias tels que l’audio et la vidéo. On peut aussi ajouter une animation.	EL+

L'exemple ci-dessous présente comment doit se definir le type d'une page:

<script>
  data() {
    return {
      ...
      type: 'pg_normal',//definition du type de la page
      ...
    }
  }
</script>

Vous trouvez ici la liste de toutes les pages avec leurs caractéristiques et particularités.

💡Note

Tous les types de pages sont disponibles dans la structure de base à l'installation de l'application, peu importe le mode utilisé par l'application.

La page de type menu est obligatoire dans l'application, sans son existence, l'application vous retourneras une erreur et il vous sera impossible d’exécuter l'application.

La page du sommaire des activités sera toujours appelée P00.vue et se trouvera toujours dans le dossier A00.

Comment insérer le sommaire des activités dans cette page?

Appelez la balise <app-comp-menu>. Par défaut l’application, vous créera une carte et le lien de navigation de toute l’activité présente dans votre projet. Pour modifier les informations présentent dans les cartes utilisez le fichier : « menu.setting.js » qui est situé à cet endroit : « scr/module ».

menu.setting.js est le fichier qui dicte le contenu à l’intérieur des cartes d’activité dans le menu. Le fichier modifier le titre, le sous-titre et le temps.

Ce fichier sert aussi à créer les sections de votre application. Les sections sont les boutons affichés dans la barre de navigation secondaires (autant en el ou en el+). Il redirige à la page que vous déclarez dans le fichier.

<script>
  data() {
    return {
      ...
      //Exemple de définition de sections
      A01: {
        title: 'suposer activite 1',
        subTitle: 'Chat supposé activité 1',
        time: '00:00',
        anchors: [
          {
            anchorName: 'Moxxi', //Titre à afficher pour la section
            anchorTag: 'anchor-Moxxi', //Nom de référence de la section
            pageRef: 'P01', //ID de la page ciblé
            page: 'page_1'//Nom de la page
          },
          {
            anchorName: 'Bilbo',
            anchorTag: 'anchor-Bilbo',
            pageRef: 'P01',
            page: 'page_1'
          },
          {
            anchorName: 'Luna',
            anchorTag: 'anchor-Luna',
            pageRef: 'P01',
            page: 'page_1'
          }
        ]
      }
    }
  },
</script>

Pour attacher cette déclaration à vos sections en html en EL. Voici la démarche à suivre :

1- Créé vous une row :

<template>
   <app-base-page v-slot:content :page="$data">
      <b-row></b-row>
  </app-base-page>
</template>

2- Dans cette row déclarez l’attribut ref et donner lui la valeur que vous avez inscrite dans anchorTag :

<template>
   <app-base-page v-slot:content :page="$data">
      <b-row ref="#anchor-Moxxi"></b-row>
  </app-base-page>
</template>

3- Dans cette row declarer l’attribut class et donner lui la valeur que vous avez inscrite dans anchorTag ainsi que la classe anchor :

<template>
   <app-base-page v-slot:content :page="$data">
    <b-row ref="#anchor-Moxxi" class="anchor anchor-Moxxi"></b-row>
   <app-base-page v-slot:content :page="$data">
</template>

Voila! Votre section est créée.

🤩 Le saviez-vous?

Vous pouvez également utiliser les balises HTML <section>, <div>, <article> pour créer définir vos sections

👁️ Attention!

Ne fait pas des sections les unes après les autres. L’écouteur supporte mal se layout. Assurez vous plutôt d'avoir suffisamment de contenus pour bien espacer vos sections.

Le fichier menu.setting.js serre aussi à construire le Breadcrumb, aussi appeler file d’Ariane. Par défaut, l’application affiche:

Le titre du module : vous pouvez changer sa valeur avec la variable title dans le fichier module.vue, situé dans le dossier view.
Le titre d'une activité : vous pouvez definir la valeur avec la variable title dans le fichier menu.setting.js
Le titre d'une section : vous pouvez definir la valeur avec la varible anchorName dans le fichier menu.setting.js

💡Note

Les chiffres et les mots comme Activité ou Leçon sont ajoutés par l'application, qui gère également la traduction et l’incrémentation.

Page normal

La page de type normal est la page la plus versatile de l'application. Elle n’a pas de restrictions et vous pouvez l’utiliser pour afficher la plupart des composants du FCAD.

Voici les composants que vous pouvez mettre dans une page de type normal :

Composantes interactives non-quiz
Composantes interactives quiz
Du texte et des images
Embranchement (en mode eL+)

👁️ Attention!

En mode el, la page normale est la seul page acceptée. Vous ne pouvez pas utiliser la page médiatique ou d'animation.

Vous pouvez l'utiliser pour la production de contenus suivants:

une page contenant un quiz
du texte et des images
tout objet interactif disponible dans le fcad
une vidéo ou un son avec son propre contrôle (seulement en mode el)
faire un embranchement

Il n'y a pas de limite d'objet que vous pouvez utiliser ou ajouter dans cette page. Pensez à la structure de votre page et à votre css pour bien afficher les éléments désirés.

Comment intégrer un objet interactif

Vous n'avez qu'à appeler le composant et le remplir, selon les propriétés dont l'objet interactif à besoin.

Référez-vous à la section guide api pour les éléments interactifs désirez. Voici les listes des éléments interactif disponible :

Comment faire une page de quiz

Pour monter un quiz, vous n'avez qu'à appelez le composant de quiz <app-comp-quiz>.

<template>
  <app-base-page v-slot:content :page="$data">
    <app-comp-quiz :user-interaction="userInteraction" :quiz-data="quizData" />
  </app-base-page>
</template>

Vous devez maintenant importer le fichier .json dans le data de la page. Toute les informations relier au quiz sont dans le fichier .json.

<script>
data() {
  return {
    id: 'P01', // required
    title: 'titreDeMaPage', // optional
    activityRef: 'A01', // required,
    type: 'pg_normal',
    quizData: require('./VotrefichierDeQuiz.json') // ==>  importer comme ceci
  }
}
</script>

Pour ce qui du look des rétroactions, vous pouvez le modifier avec le sass.

💡 Note

Si vous le souhaitez, vous pouvez aussi définir votre(s) quiz(s) directement dans votre page. Pour plus D'information sur le composant quiz veillez consulter la page du composant quiz.

Comment insérer une vidéo ou un audio dans une page normale

👁️ Attention!

Ce qui suit n'est valable que pour le mode el. Ne pas utiliser dans le mode el+ à moins de grande exception.

Lorsque vous avez besoin d'afficher une vidéo ou audio dans votre page, utilisez les balises HTML respective <audio>, <video>. Pour les sous-titres, utilisez la balise <track>.

Prenez note que la page de type médiatique n'est acceptée que avec le mode el+.

Page d’embranchement

Pour créer une page d’embranchement, suivez la nomenclature mentionnée un peu plus haut concernant les pages de contenus des branches.

Pour créer un le lien vers les branches, il faut utiliser le composant d'embranchement <app-comp-branch-buttons> (qui peut être afficher en bouton par défaut, en carte, ou avec le bouton par défaut avec une image derrière). Vous devez passer au composant les informations nécessaires selon le types de rendus demandés.

<template>
  <app-base-page v-slot:content :page="$data">
    <app-comp-branch-buttons/>
  </app-base-page>
</template>

👁️ Attention!

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

Pour plus d'information sur le type d’information à fournir, consulter la page du composant boutons embranchement.

Page de type médiatique

Une page de type médiatique est un page qui contient une vidéo ou un audio. En plus de ces médias, nous pouvons aussi ajouter une animation par-dessus. Ce type de page contiendra une « playbar » pour contrôler les médias.

La page de type médiatique est valide seulement dans un projet en mode EL+.

💡Note

Pour savoir comment insérer une vidéo ou audio en mode EL, veuillez vous référer à la section plus haut sur le type de page normal.

Dans le data de la page, vous devez mettre l'objet suivant:

<script>
mediaData: {
      mType: 'video',
      mSources: [
        {
          type: 'mp4',
          //Example of referencing a media hosted locally
          src: require('@/assets/medias/presentation_tutrice_MDandurand.mp4')

          //Example of referencing a media hosted on a server
          // src: 'https://medias.cegepadistance.ca/videos/test_FCAD_LBT/presentation_tutrice_MDandurand.mp4'
        }
      ],
      mSubtitle: {
        label: 'Français',
        src: require('@/assets/medias/exemple_fichier_vtt.vtt'),
        srclang: 'fr'
      },
      mPoster: require('@/assets/medias/presentation_tutrice_MDandurand.png'),
      mTranscript: 'exemple_transcript.doc' // The file MUST be hosted in the public folder of the project
    },
</script>

Voici le tableau contenant le détail des informations à inscrire :

mediaData

Propriété	Type	Description	Valeur(s) acceptée(s)
mType	String	Défini le type de média à jouer	audio / video
mSources	Array	Défini la liste des objets qui doivent être la source du média	consultez le tableau ci-dessous
mSubtitle	Object	Défini l'object qui doit récupérer les informations pour les sous-titres	Consultez le tableau ci-dessous
mPoster	String	Défini une image à afficher comme thumbnail (vidéo/audio)	Url du fichier image

mSources

Propriété	Type	Description	Valeur(s) acceptée(s)
type	string	Doit être le type de vidéo utiliser et doit être la meme valeur que l'extension utilisé	mp4/ webm / ogg
src	string	doit etre le path ou se trouve la vidéo et indiquer quelle est l'extension utilisée.	Url du média

mSubtitle

Propriété	Type	Description	Valeur(s) acceptée(s)
label	string	Doit être la langue des sous-titres afficher	français /anglais
src	string	Doit être le lien vers la vtt de la vidéo (le vtt doit être dans le même répertoire que la vidéo)	Url du fichier
srclang	string	Doit être l'abréviation de la langue choisis au premier paramètre	fr / en / es

Ajouter une animation

Vous pouvez ajouter une animation dans une page médiatique peu importe le média utiliser (vidéo ou audio) ou une page d'animation. Voici les étapes à suivre :

Dans le composant média-player, créé les éléments que vous désirez animer. (N'oublier pas de faire votre style dans la feuille Sass approprié)

🚩 Important

Assurez-vous d'avoir toutes ces propriétés à votre composant.

  ...
  <app-comp-media-player
    v-slot:drawingCanvas
    :m-data="pageMedia"
  />
  ...

Dans la section script, créez-vous une fonction comme dans l'exemple suivant :

<script>
methods: {
    initAnim() {

    }
}
</script>

Dans votre fonction vous devez maintenant créé votre timeline et votre animation. Voici comment procéder :

<script>
methods: {
    // On passera les données de la page en paramettre à la fonction
    initAnim(page) {
      const myAnimTimeline1 = this.$gsap.timeline()// on crée la timeline de l'animation

     // on crée l'animation
      myAnimTimeline1
        .to('.obj1', {
          delay: 0.5,
          opacity: 1,
          duration: 0.5
        })

      page.timeline.add(myAnimTimeline1) // on Ajoute notre animation à la timeline principale de la page
    }
}
</script>

Lorsque vous avez terminé d'animer vos éléments. Vous devez ajouter votre timeline à la timeline de l'application.

💡 Note

Pour plus d'info, Référez-vous à la formation gsap qui se trouve sur moodleopen in new window

Dans l'écouteur d'évènement, vous pouvez maintenant exécuter votre animation

<script>
watch: {
      getCurrentPage() {
      const page = this.getCurrentPage
      if (page && page.timeline) this.initAnim(page)
    }

}
</script>

Page d'animation

La page de type animation se diffère de La page médiatique en ce qu'elle ne contient pas de média. Elle va toutefois contenir une animation à synchroniser avec la timeline. Pour créer une animation, vous pouvez suivre la même logique abordée pour l'animation dans une page médiatique, mais sans créer l'objet médiaData.

Voici un exemple :

<template>
 <app-base-page v-slot:content :page="$data">
  <app-comp-media-player
      v-slot:drawingCanvas
      :m-data="pageMedia"
      @hook:mounted="initAnim"
  />
</app-base-page>      
</template>

<script>
  methods: {
      initAnim() {
        const page = this.getCurrentPage
        const myAnimTimeline1 = this.$gsap.timeline() //timeline for the page animation

        //Creating the animation
        myAnimTimeline1
          .to('.obj1', {
            delay: 0.5,
            opacity: 1,
            duration: 0.5
          })
          .to('.obj2', {
            delay: 0.5,
            opacity: 1,
            duration: 0.5
          })
          .to('.obj3', {
            delay: 0.5,
            opacity: 1,
            duration: 0.5
          })
        if (page.timeline) page.timeline.add(myAnimTimeline1)
      },
  }
</script>

Prêt à intégrer!

Vous avez vue toutes les bases de l'application. Vous êtes maintenant prêt à monter vos pages et intégrer vos cours. Souvenez-vous que l’application intègre BootstrapVueopen in new window, vous devez donc utiliser la grille de Bootstrap pour monter vos pages. Pour ce qui est du style nous utilisons Sassopen in new window, vous pouvez utiliser la structure Sass qui vous est offert lors de l'installation de l'application.

Pour plus d'information sur les composants consultez la section Guide API

Bon travail!

Qu'est-ce qu'une page?

Données du data

Le type de page

Page de type menu

Comment insérer le sommaire des activités dans cette page?

Menu.setting et le concept de section:

Page normal

Comment intégrer un objet interactif

Comment faire une page de quiz

Comment insérer une vidéo ou un audio dans une page normale

Page d’embranchement

Page de type médiatique

Voici le tableau contenant le détail des informations à inscrire :

mediaData

mSources

mSubtitle

Ajouter une animation

Page d'animation

Prêt à intégrer!

# Qu'est-ce qu'une page?

# Données du data

# Le type de page

# Page de type menu

# Comment insérer le sommaire des activités dans cette page?

# Menu.setting et le concept de section:

# Le breadcrumb :

# Page normal

# Comment intégrer un objet interactif

# Comment faire une page de quiz

# Comment insérer une vidéo ou un audio dans une page normale

# Page d’embranchement

# Page de type médiatique

# Voici le tableau contenant le détail des informations à inscrire :

# mediaData

# mSources

# mSubtitle

# Ajouter une animation

# Page d'animation

# Prêt à intégrer!

Qu'est-ce qu'une page?

Données du data

Le type de page

Page de type menu

Comment insérer le sommaire des activités dans cette page?

Menu.setting et le concept de section:

Le breadcrumb :

Page normal

Comment intégrer un objet interactif

Comment faire une page de quiz

Comment insérer une vidéo ou un audio dans une page normale

Page d’embranchement

Page de type médiatique

Voici le tableau contenant le détail des informations à inscrire :

mediaData

mSources

mSubtitle

Ajouter une animation

Page d'animation

Prêt à intégrer!