Insérer un filtre Generico

Les Accordian et Accordian Item sont utilisés ensemble. Ces options permettent d’insérer des accordéons sous forme de titres cliquables qui affichent leur contenu après un clic et se referment suite à un clic sur un autre accordéon. Par défaut, le premier accordéon est affiché et se referme en cliquant sur l'accordéon suivant. Pour les utiliser, il faut d'abord ajouter Accordian puis intégrer des Accordian Item.

1. Choisissez Accordian

2. Cliquez sur Insérer

3. Un code est inséré automatiquement, sous la forme de balises d'ouverture et de fermeture. Placez votre curseur entre ces deux lignes et cliquez surGenerico

4. Donnez un titre au premier accordéon et cliquez sur Insérer

5. Un code est inséré automatiquement entre les balises, comme suit :

   • {GENERICO:type="accordian"}
   • {GENERICO:type="accordianitem",titletext="Titre de l'accordéon 1"}Contenu de l'accordéon 1
   • {GENERICO:type="accordianitem_end"}
   • {GENERICO:type="accordian_end"}

6. Placez votre curseur après le code que vous venez d'ajouter et répétez les étapes 4 et 5 pour ajouter d'autres items d'accordéon.

   Vous pouvez utiliser les codes prédéfinis suivants dans votre cours, il suffit de faire un copier-coller et d'ensuite modifier les Titres de l'accordéon et les Contenus de l'accordéon.

   {GENERICO:type="accordian"}

   {GENERICO:type="accordianitem",titletext="Titre de l'accordéon 1"}Contenu de l'accordéon 1

   {GENERICO:type="accordianitem_end"}

   {GENERICO:type="accordianitem",titletext="Titre de l'accordéon 2"}Contenu de l'accordéon 2

   {GENERICO:type="accordianitem_end"}

   {GENERICO:type="accordianitem",titletext="Titre de l'accordéon 3"}Contenu de l'accordéon 3

   {GENERICO:type="accordianitem_end"}

   {GENERICO:type="accordian_end"}

   Voir l'exemple Accordian/Accordian Item (Ensemble d'accordéon).

Les Accordian Container et Accordian Card Item sont utilisés ensemble pour créer un accordéon. L'Accordéon permet d’alléger la page en présentant un maximum de contenu dans un espace réduit. Il se présente sous forme d’un titre cliquable qui affiche son contenu après un clic et se referme après un autre clic. Pour les utiliser, il faut d'abord ajouter Accordion Container et par la suite y intégrer un Accordion Card Item. 

1. Choisissez Accordian

2. Cliquez sur Insérer

3. Un code est inséré automatiquement, sous la forme de balises d'ouverture et de fermeture. Placez votre curseur entre ces deux lignes et cliquez surGenerico

4. Donnez un titre au premier accordéon et cliquez sur Insérer

5. Un code est inséré automatiquement entre les balises, comme suit :

   • {GENERICO:type="accordion_container"}
   • {GENERICO:type="accordion_card",heading="Titre de l'accordéon"}Contenu de l'accordéon
   • {GENERICO:type="accordion_card_end"}
   • {GENERICO:type="accordion_container_end"}

   Vous pouvez utiliser les codes prédéfinis ci-dessus dans votre cours, il suffit de faire un copier-coller et d'ensuite modifier le Titre de l'accordéon et le Contenu de l'accordéon.

6. Voir l'exemple Accordion Container/Accordion Card Item (Accordéon)

Cette option permet de créer un lien qui s'affiche sous la forme d'un bouton cliquable. Par défaut, le style btn-primeray est choisi. C'est un bouton dont l’apparence est identique aux boutons Moodle.

1. Choisissez Button Maker

2. Paramétrez le bouton :

   a. Sélectionnez un style de bouton parmi les six styles possibles.

   b. Collez le lien du bouton dans url

   c. Par défaut, le lien s'ouvre dans une nouvelle fenêtre (_blank). Il est vous possible de choisir une autre option d'ouverture du lien. 

   d. Nommez le bouton. C'est ce nom qui apparait sur le bouton cliquable.

3. Cliquez sur Insérer

   Vous pouvez utiliser les codes prédéfinis suivants dans votre cours, il suffit de faire un copier-coller et d'ensuite modifier les éléments en fonction de vos besoins.

   {GENERICO:type="Button-Maker",style="btn-primary",url="Adresse du lien",target="_blank",caption="Nom du bouton"}

   Voir l'exemple Button Maker (Création de bouton)

La boîte Info Box affiche un message texte avec une icône FontAwesome sur un fond de couleur, accompagné d'une bordure de couleur. Vous pouvez l'utiliser pour attirer l'attention des étudiants sur des paragraphes importants.

1. Choisissez Info Box

2. Tapez votre texte dans le champ Text (vous pouvez insérer plusieurs paragraphes)

3. Cliquez sur Insérer

   Vous pouvez utiliser les codes prédéfinis suivants dans votre cours, il suffit de faire un copier-coller et d'ensuite insérer votre texte tel qu'indiqué ci-dessous.

   {GENERICO:type="infobox",text="Insérer le texte ici"}

   Voir l'exemple Info Box

La LightBox (Boîte lumière) permet de présenter une image ou un bloc de texte en avant-plan, en atténuant le reste de la page dans une fenêtre surgissante munie d’un bouton Fermer [X]. Cette fonctionnalité est très utile lorsqu’on veut qu’une explication, une image ou une vidéo (Youtube ou Panopto) s’ouvre dans une fenêtre surgissante.

1. Choisissez Lightbox2

2. Tapez votre texte dans le champ linktext

3. Cliquez sur Insérer

4. Insérez votre texte à l'intérieur du code de Lightbox2 comme suit :

   {GENERICO:type="lightbox2",linktext="Lien pour afficher le texte"}Votre votre texte{GENERICO:type="lightbox2_end"}.

5. Pour intégrer une LightBox (Boîte lumière) dans votre page, vous pouvez copier-coller les codes ci-dessus et changer les éléments en fonction de vos besoins. 

   Voir l'exemple LightBox (Boîte lumière)

Les Tabs et Tab Items sont utilisés ensemble. Pour les utiliser, il faut d'abord ajouter un Tabs et par la suite des Tab Item. Ces options permettent d’insérer des onglets se succédant horizontalement. Elles peuvent être utilisées pour séparer le contenu par rubrique et constituent un moyen efficace d'organiser les données et de minimiser le défilement vertical.

1. Choisissez Tabs

2. Cliquez sur Insérer

3. Placez votre curseur entre les balises que vous venez d'ajouter et cliquez sur Generico

4. Choisissez Tab item

5. Nommez l'onglet dans title et cliquez sur Insérer

6. Insérer le contenu de l'onglet, placez ensuite votre curseur à la fin de l'élément de l'onglet. Cliquez sur Generico pour ajouter autre onglet.

7. Répétez les étapes 4 et 5

   Vous pouvez utiliser les codes prédéfinis suivants dans votre cours, il suffit de faire un copier-coller et d'ensuitemodifier les Titres de l'onglet et les Contenus de l'onglet.

   {GENERICO:type="tabs"}

   {GENERICO:type="tabitem",title="Onglet 1"}

   Contenu de l'onglet 1

   {GENERICO:type="tabitem_end"}

   {GENERICO:type="tabitem",title="Onglet 2"}

   Contenu de l'onglet 2

   {GENERICO:type="tabitem_end"}

   {GENERICO:type="tabitem",title="Onglet 3"}

   Contenu de l'onglet 3

   {GENERICO:type="tabitem_end"}

   {GENERICO:type="tabs_end"}

8. Voir l'exemple Tabs/Tab Item (Onglets)

La fonction Toggle permet d’insérer un lien cliquable permettant de cacher ou d'afficher son contenu, tels que du texte, une image, une vidéo ou encore du code d’intégration.

1. Choisissez Toogle

2. Tapez votre texte dans le champ linktext

3. Cliquez sur Insérer

4. Un code est inséré automatiquement à l'intérieur duquel vous pouvez ajouter le contenu du Toggle.

   Vous pouvez utiliser les codes prédéfinis suivants dans votre cours, il suffit de faire un copier-coller et d'ensuite modifier les éléments en fonction de vos besoins.

   {GENERICO:type="toggle",linktext="Titre cliquable"}Insérer le texte ici {GENERICO:type="toggle_end"}

   Voir l'exemple : Toggle

La boîte Warning Box affiche une boîte d'avertissement avec une icône FontAwesome sur un fond de couleur, accompagné d'une bordure de couleur. Vous pouvez l'utilisez pour attirer l'attention des étudiants sur un message important.

1. Choisissez Warning Box

2. Tapez votre texte dans le champ text

3. Cliquez sur Insérer

   Vous pouvez utiliser les codes prédéfinis suivants dans votre cours, il suffit de faire un copier-coller et d'ensuite modifier les éléments en fonction de vos besoins.

   {GENERICO:type="warningbox",text="Insérer votre texte ici"}

   Voir l'exemple : Warning Box

La boîte Yellow Box affiche un message texte sur un fond de couleur, accompagné d'une bordure de couleur pointillée. Vous pouvez l'utiliser pour attirer l'attention des étudiants sur un message important.

1. Choisissez Yellow Box

2. Tapez votre texte dans le champ title

3. Cliquez sur Insérer

4. Un code est inséré automatiquement à l'intérieur duquel vous pouvez ajouter le contenu de la boîte. 

   Vous pouvez utiliser les codes prédéfinis suivants dans votre cours, il suffit de faire un copier-coller et d'ensuite modifier les éléments en fonction de vos besoins.

   {GENERICO:type="yellowbox",title="Titre de la boîte"}Insérer votre texte ici{GENERICO:type="yellowbox_end"}

   Voir l'exemple : YellowBox

Le modèle YouTube Generico permet d'intégrer une vidéo provenant du service Youtube dans un site de cours. Il peut être utilisé tel quel ou sous la forme d'un modèle d'intégration de type iframe. Vous n'avez qu'à fournir l'ID de la vidéo (et non pas l'URL complète).

1. Choisissez YouTube

2. Inscrivez la largeur et la hauteur, s'il y a lieu, La valeur est de 560px et 315px

3. Inscrivez l'ID de la vidéo (pas l'URL complète)

4. Cliquez sur Insérer

   Vous pouvez utiliser les codes prédéfinis suivants dans votre cours, il suffit de faire un copier-coller et d'ensuite modifier les éléments en fonction de vos besoins.

   {GENERICO:type="youtube",id="Insérer l'ID de la vidéo ici"}

   Voir l'exemple : YouTube