Créer un moteur de recherche dans un module créé avec ActivePresenter

  • novembre 22, 2024
  • décembre 4, 2024
  • Camille

ActivePresenter est le logiciel auteur que j’utilise pour créer des modules d’apprentissage. Son interface ressemble à celle de PowerPoint. S’il peut être utilisé basiquement, il propose également des fonctionnalités avancées qui le rendent puissant.

Au final, il est possible de générer plusieurs formats de contenus : du HTML pour diffuser basiquement sur le Web, mais également du SCORM (pour le suivi des apprentissages et des parcours sur une plateforme pédagogique) ou des vidéos par exemple.

Découvrez des contenus créés avec ActivePresenter dans la section Mes réalisations.

Vous pouvez tester le moteur de recherche depuis la démonstration du module d’apprentissage des kanji japonais, en cliquant sur le bouton Kanji en page d’accueil et en recherchant le mot musique, par exemple.

⚠ Nota Bene
Lorsque des actions sont créées sur un événement (chargement, clic, etc.) dans l’onglet Interactivité de la fenêtre Propriétés, l’ordre est important.

Préparer les éléments nécessaires au fonctionnement du moteur de recherche

  1. Créez les variables nécessaires au fonctionnement du moteur de recherche depuis l’onglet Accueil, Variables.
    • Créez une variable de type VRAI/FAUX que vous nommez modeRecherche, initialisée à Faux.
      Cette variable permet de savoir qu’une recherche est en cours.
    • Créez une variable de type TEXTE que vous nommez stringRecherche.
      Cette variable stockera le texte recherché, c’est-à-dire ce que l’utilisateur aura saisi dans le champ de recherche.
    • Créez une variable de type TEXTE que vous nommez sensRecherche.
      Cette variable permettra de savoir si la recherche se fait de la première à la dernière diapositive (avant) ou inversement (arriere).
    • Créez une variable de type Nombre que vous nommez indexPremiereFiche et que vous initialisez avec l’index de la première diapositive de contenu (ex. 2 si votre projet contient une page d’accueil dont l’index est 1).
       
  2. Matérialisez la recherche en cours au moyen d’une roue de chargement par exemple.
    • Insérez une forme rectangulaire, noire et semi transparente de hauteur et de largeur 100% et positionnée à 0 pixel des bords haut et gauche.
    • Insérez un Conteneur de type Boîte Flex, aligné verticalement et horizontalement sur la diapositive, de largeur 100%, avec une Direction Vertical, Pas d’enveloppe, un Alignement vertical Milieu et un Débordement Visible (depuis la fenêtre Propriétés dans l’onglet Taille & Propriétés).
    • Dans la fenêtre Sélection, nommez la Boîte Flex roue-texte.
    • Insérez, dans cette Boîte Flex, l’image d’une roue de chargement au format GIF de hauteur 100% et avec un Alignement Horizontal Centrer (depuis la fenêtre Propriétés dans l’onglet Taille & Propriétés).
    • Insérez, dans cette Boîte Flex, une légende en Agrandir 0 et avec un Alignement Horizontal Étendu (depuis la fenêtre Propriétés dans l’onglet Taille & Propriétés), dans laquelle vous saisirez en texte centré de couleur blanche « Recherche en cours ».
    • Sélectionnez la forme rectangulaire et la Boîte Flex depuis la diapositive, cliquez-droit et groupez-les.
    • Pour ce groupe, depuis la fenêtre Propriétés dans l’onglet Taille & Propriétés, cochez Initialement caché.
    • Dans la fenêtre Sélection, nommez le groupe loader.
    • Cliquez-droit sur le groupe depuis la diapositive et, via le menu contextuel, cliquez sur Montrer dans des diapositives multiples, Couche en Haut.
       
  3. Créez un message pour indiquer que la recherche est terminée.
    • Insérez une forme rectangulaire, noire et semi transparente de hauteur et de largeur 100% et positionnée à 0 pixel des bords haut et gauche.
    • Insérez une forme rectangulaire blanche opaque, centrée horizontalement et verticalement sur la diapositive, de hauteur 50% et de largeur 50%, en ajustant la largeur en fonction du rendu souhaité sur le matériel utilisé si vous êtes en projet réactif (ordinateur, mobiles, etc.).
    • Dans la fenêtre Sélection, nommez cette forme fondTexteFinRecherche.
    • Insérez un Conteneur de type Boîte Flex, aligné verticalement et horizontalement sur la diapositive, de hauteur et de largeur correspondant à la forme fondTexteFinRecherche, avec une Direction Vertical, Pas d’enveloppe, un Alignement vertical Milieu et un Débordement Automatique (depuis la fenêtre Propriétés dans l’onglet Taille & Propriétés).
    • Dans la fenêtre Sélection, nommez la Boîte Flex TexteFinRecherche.
    • Insérez, dans cette Boîte Flex, une légende en Agrandir 0 et avec un Alignement Horizontal Étendu, dans laquelle vous saisirez en texte centré « Recherche terminée » (depuis la fenêtre Propriétés dans l’onglet Taille & Propriétés).
    • Insérez, dans cette Boîte Flex, une forme de la couleur de votre choix, avec une Largeur de 30% (à ajuster en fonction du rendu souhaité sur le matériel utilisé si vous êtes en projet réactif), de Hauteur Automatique, en Agrandir 0 et avec un Alignement Horizontal Centrer (depuis la fenêtre Propriétés dans l’onglet Taille & Propriétés).
    • Cliquez-droit sur cette forme, Editer le texte et saisissez « Ok » et, depuis la fenêtre Propriétés dans l’onglet Taille & Propriétés, ajustez les marges de la zone de texte.
    • Ajustez les Marges externes supérieures et inférieures de la légende et de la forme pour les espacer à votre guise.
    • Sélectionnez la forme rectangulaire fondTexteFinRecherche et la Boîte Flex TexteFinRecherche depuis la diapositive, cliquez-droit et groupez-les.
    • Sélectionnez ce nouveau groupe et sélectionnez simultanément la forme rectangulaire, noire et semi transparente de hauteur et de largeur 100% depuis la diapositive, cliquez-droit et groupez-les.
    • Pour ce groupe, depuis la fenêtre Propriétés dans l’onglet Taille & Propriétés, cochez Initialement caché.
    • Dans la fenêtre Sélection, nommez le groupe messageRechercheTerminee.
    • Cliquez-droit sur le groupe depuis la diapositive et, via le menu contextuel, cliquez sur Montrer dans des diapositives multiples, Couche en Haut.
    • Sélectionnez le bouton « Ok » créé à l’instant et depuis la fenêtre Propriétés dans l’onglet Interactivité, ajoutez les actions suivantes Au clic :
        • Ajuster la variable: Définir [modeRecherche] à [Faux]
        • Cacher l’objet: messageRechercheTerminee (Couche Supérieure du Projet)
        • Cacher l’objet: loader (Couche Supérieure du Projet)
        • Executer JavaScript:
    /*Moteur de recherche*/ /*Nous remettons en place la possibilité de scroller*/ document.getElementsByClassName("ap-slides")[0].style.overflowY="auto";
    1. Affichez le message (créé en point 3.) indiquant que la recherche est terminée (et cachez la roue de chargement).
      • Sélectionnez successivement chaque diapositive sur laquelle le champ de recherche sera implanté et depuis l’onglet Interactivité la fenêtre Propriétés, ajoutez les actions suivantes Au chargement :
        • Cacher l’objet: loader (Couche Supérieure du Projet)
          SI modeRecherche est égal à Vrai
        • Montrer l’objet (blocage): messageRechercheTerminee (Couche Supérieure du Projet)
          SI modeRecherche est égal à Vrai
        • Executer JavaScript:
          SI modeRecherche est égal à Vrai
    /*Moteur de recherche*/ /*Nous empêchons l'utilisateur de scroller au-delà du fond noir semi transparent*/ document.getElementsByClassName("ap-slides")[0].style.overflow="hidden"; /*Nous vidons la variable qui a été alimentée par les éléments saisis dans le champ de recherche*/ prez.variable("stringRecherche").clear;

    💡Astuce
    Si vous souhaitez implanter le moteur de recherche sur plusieurs ou sur toutes les diapositives, alors il faudra également mettre en place une variable numérique qui sera incrémentée à chaque diapositive parcourue pendant la recherche.
    Le message signalant la fin de la recherche sera à afficher et la roue de chargement sera à cacher SI la valeur de la variable numérique correspond au nombre total de diapositives du projet (ou à parcourir).
    La variable numérique devra être réinitialisée à 0 Au clic sur le bouton Ok du message signalant la fin de la recherche.

    Créer le champ de recherche

    1. Rendez-vous sur la ou l’une des diapositives sur laquelle vous souhaitez proposer le champ de recherche.
    2. Insérez-y une entrée de texte et sélectionnez les Message de réussite et Message d’échec associés pour les Effacer.
    3. Insérez soit une légende dans laquelle vous mettrez un caractère représentant une loupe (ex. unicode U+1F50E ou avec FontAwesome), soit un pictogramme de loupe.
    4. Dans la fenêtre Sélection, nommez l’entrée de texte champRecherche.
    5. Groupez ces deux éléments et positionnez le groupe à votre convenance.
    6. Sélectionnez l’entrée de texte et :
      • dans l’onglet Style et Effets de la fenêtre Propriétés :
        • paramétrez un remplissage uni blanc par exemple,
        • ajoutez une Ligne solide gris clair de Largeur 1.
      • dans l’onglet Interactivité de la fenêtre Propriétés :
        • renseignez comme Valeurs correctes une valeur improbable (ex. fkfjgsjgifdjvfidjfvlfd),
        • décochez l’ID du rapport,
        • choisissez un nombre de Tentatives Infini,
        • Soumettre à Presser la touche Enter,
        • alimenter la Variable de type TEXTE nommée stringRecherche,
        • dans les Événements – Actions, supprimez les événements présents par défaut et ajoutez un événement Si incorrect et une action Exécuter JavaScript dans laquelle vous adapterez le code suivant :
    /*Moteur de recherche*/ /*Nous alimentons la variable sensRecherche pour indiquer que nous parcourons les diapositives du début vers la fin.*/ prez.variable("sensRecherche", "avant"); /*La méthode trim() permet de retirer les caractères vides en début et fin de chaîne de caractères, notamment ceux automatiquement ajoutés par les claviers de smartphone à la fin d'une saisie.*/ prez.variable("stringRecherche", prez.variable("stringRecherche").trim()); /*Nous nous assurons que l'utilisateur a bien saisi du texte qui a alimenté la variable stringRecherche pour lancer la recherche.*/ if(prez.variable("stringRecherche").length !== 0){ /*Nous faisons apparaître la roue de chargement.*/ if(!prez.object("roue-texte").visible()){ prez.object("roue-texte").show(); } /*Nous indiquons que le module est en mode recherche grâce à la variable modeRecherche que nous passons à Vrai.*/ prez.variable("modeRecherche", true); /*Nous nous rendons sur la première diapositive de contenu (son index est 2 car la première diapositive est en fait la page d'accueil du module).*/ prez.showSlideAt(2); }
    1. Sélectionnez la loupe et dans l’onglet Interactivité de la fenêtre Propriétés ajoutez les actions suivantes Au clic :
      • Soumettre: Toutes les interactions montrant
      • Executer JavaScript: [le script ci-dessous]
      • Montrer l’objet: champRecherche
    /*Moteur de recherche*/ /*Nous alimentons la variable sensRecherche pour indiquer que nous parcourons les diapositives du début vers la fin.*/ prez.variable("sensRecherche", "avant"); /*La méthode trim() permet de retirer les caractères vides en début et fin de chaîne de caractères, notamment ceux automatiquement ajoutés par les claviers de smartphone à la fin d'une saisie.*/ prez.variable("stringRecherche", prez.variable("stringRecherche").trim()); /*Nous nous assurons que l'utilisateur a bien saisi du texte qui a alimenté la variable stringRecherche pour lancer la recherche.*/ if(prez.variable("stringRecherche").length !== 0){ /*Nous faisons apparaître la roue de chargement.*/ if(!prez.object("roue-texte").visible()){ prez.object("roue-texte").show(); } /*Nous indiquons que le module est en mode recherche grâce à la variable modeRecherche que nous passons à Vrai.*/ prez.variable("modeRecherche", true); /*Nous nous rendons sur la première diapositive de contenu (son index est 2 car la première diapositive est en fait la page d'accueil du module).*/ prez.showSlideAt(2); }
    1. Rendez-vous sur la ou les diapositives depuis lesquelles le moteur de recherche est accessible et ajoutez les actions suivantes Au chargement, depuis l’onglet Interactivité de la fenêtre Propriétés :
      • Effacer l’entrée de l’utilisateur: champRecherche
      • Cacher l’objet: champRecherche
      • Executer JavaScript:
    /*Moteur de recherche*/ /*Nous vidons la variable qui stockait le texte recherché précédemment (saisi dans l'entrée de texte champRecherche).*/ prez.variable("stringRecherche").clear;
    1. Rendez-vous sur les diapositives parcourues pendant la recherche et ajoutez les actions suivantes Au chargement, depuis l’onglet Interactivité de la fenêtre Propriétés :
      • Exécuter JavaScript:
    /*Moteur de recherche*/ setTimeout(function(){ /*Nous commençons par afficher la roue de chargement si elle n'est pas déjà affichée.*/ if(!prez.object("loader").visible()){ prez.object("loader").show(); } /*Nous initialisons une variable vide (contenu), que nous alimenterons des contenus textuels de la diapositive.*/ var contenu = ""; /*Nous initialisons une variable numérique qui nous permettra d'indiquer la présence (1) ou non (0) du texte recherché.*/ var presence = 0; /*Nous parcourons le texte de la diapositive, c'est-à-dire le texte tous les éléments (children) présents l'objet conteneur "vocabulaire".*/ for (var e = 0 ; e<prez.object("vocabulaire").children.length ; e++){ /*Nous ajoutons ces éléments textuels à la variable contenu.*/ contenu = contenu + prez.object("vocabulaire").children[e].text(); /*Nous passons tous les contenus en miniscule, afin de ne pas être sensible à la casse.*/ contenu = contenu.toLowerCase(); } /*Si la variable contenu contient la même suite de caractères que celle saisie dans la variable champRecherche réduite en minuscule, nous passons la variable présence à 1...*/ if(contenu.indexOf(prez.variable("stringRecherche").toLowerCase()) > -1){ presence = presence + 1; //... et nous cachons la roue de chargement si celle-ci est visible. if(prez.object("loader").visible()){ prez.object("loader").hide(); } } /*En revanche, si la variable presence est toujours à 0...*/ if(presence === 0){ /*...alors nous passons à la diapositive suivante si la valeur de la variable sensRecherche est avant.*/ if(prez.variable("sensRecherche") == "avant"){ prez.nextSlide(); /*...alors nous passons à la diapositive précédente si la valeur de la variable sensRecherche est arrière et que nous ne sommes pas sur la première diapositive.*/ }else if((prez.variable("sensRecherche") == "arriere")&&(prez.variable("apCurrentSlideIndex")!==prez.variable("indexPremiereFiche"))){ prez.previousSlide(); /*...alors nous revenons à la diapositive depuis laquelle nous avons lancé la recherche si la valeur de la variable sensRecherche est arrière et que nous sommes sur la première diapositive.*/ }else if((prez.variable("sensRecherche") == "arriere")&&(prez.variable("apCurrentSlideIndex")==prez.variable("indexPremiereFiche"))){ prez.showSlideAt(prez.variable("apTotalSlides")); } } }, 050);

    ⚠ Nota Bene
    Dans vos diapositives, si le texte que vous souhaitez soumettre à la recherche se trouve dans des conteneurs différents, alors il vous faut adapter ce script pour parcourir tous les conteneurs concernés de la diapositive (ci-dessus, le conteneur correspond à l’objet nommé « vocabulaire »).
    Également, si du texte est contenu dans un conteneur lui-même contenu dans un conteneur, il n’est pas soumis à la recherche. Il vous faut donc aussi adapter ce script pour parcourir tous les conteneurs concernés.
    Enfin, si le nom des conteneurs est différent d’une diapositive à l’autre, alors il vous faut adapter ce script sur chaque diapositive pour cibler le conteneur concerné en fonction de son nom sur la diapositive.

    Poursuivre la recherche d’une diapositive à l’autre

    Lorsque le script exécuté au chargement de chaque diapositive aura trouvé une correspondance entre le texte recherché (stocké dans la variable de type TEXTE stringRecherche) et le texte présent sur la diapositive (stocké dans la variable contenu, créé dans le script), il s’arrêtera sur la diapositive en question.

    Nous allons donc créer des flèches pour poursuivre la recherche vers les diapositives suivantes ou précédentes :

    1. Insérez deux Légendes et dans chacune d’elle, vous mettrez un caractère représentant une flèche vers le bas pour l’une (ex. unicode U+23F7 ou avec FontAwesome) et une flèche vers le haut (ex. unicode U+23F6 ou avec FontAwesome) pour l’autre ou insérez deux pictogrammes sous forme d’Image.
    2. Groupez ces deux éléments et positionnez le groupe à l’endroit souhaité.
    3. Dans la fenêtre Sélection, nommez le groupe flechesRecherche.
    4. Sélectionnez la flèche pointant vers le bas, qui permettra de poursuivre la recherche vers la diapositive suivante et ajoutez les actions suivantes Au clic, depuis l’onglet Interactivité la fenêtre Propriétés :
      • Ajuster la variable: Définir [sensRecherche] égale à [avant]
      • Aller en avant: diapositive 1
    5. Sélectionnez la flèche pointant vers le haut, qui permettra de poursuivre la recherche vers la diapositive suivante et ajoutez les actions suivantes Au clic, depuis l’onglet Interactivité la fenêtre Propriétés :
      • Ajuster la variable: Définir [sensRecherche] égale à [arriere]
      • Revenir en arrière: diapositive 1
        SI apCurrentSlideIndex n’est pas égale à Variable indexPremiereFiche
    6. Dupliquez ce groupe de flèches sur toutes les diapositives à explorer.
    7. Rendez-vous sur les diapositives parcourues pendant la recherche et ajoutez les actions suivantes Au chargement, depuis l’onglet Interactivité la fenêtre Propriétés :
      • Montrer l’objet: flechesRecherche
        SI modeRecherche est égal à Vrai
      • Cacher l’objet: flechesRecherche
        SI modeRecherche est égal à Faux

    ⚠ Nota Bene
    Si sur vos diapositives, vous avez des flèches de navigation vous permettant de vous rendre sur une autre diapositive, alors il vous faut ajouter préalablement à la redirection les actions suivantes Au clic, depuis l’onglet Interactivité la fenêtre Propriétés :

    • Executer JavaScript: [le script ci-dessous]
      SI modeRecherche est égal à Vrai
    • Ajuster la variable: Définir [modeRecherche] égale à [Faux]
      SI modeRecherche est égal à Vrai
    /*Moteur de recherche*/ /*Nous vidons la variable qui a été alimentée par les éléments saisis dans le champ de recherche.*/ prez.variable("stringRecherche").clear;

    Le moteur de recherche est désormais prêt !

    💡Astuce
    N’oubliez de choisir un curseur approprié pour signifier les objets cliquables dans l’onglet Interactivité de la fenêtre Propriétés de chacun d’entre-eux.

    Si vous avez des questions à propos de cet article, des points d’incompréhension, des suggestions ou si vous avez relevé des oublis ou erreurs de ma part, contactez-moi !